diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap index 0534a5eb4d3..2b3c0c939d8 100644 --- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap +++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap @@ -16,7 +16,7 @@ return function render(_ctx, _cache) { ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\")) : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [ _createTextVNode(\\"no\\") - ], 64 /* STABLE_FRAGMENT */)), + ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)), (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => { return (_openBlock(), _createBlock(\\"div\\", null, [ _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) @@ -40,7 +40,7 @@ return function render(_ctx, _cache) { ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\")) : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [ _createTextVNode(\\"no\\") - ], 64 /* STABLE_FRAGMENT */)), + ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => { return (_openBlock(), _createBlock(\\"div\\", null, [ _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) @@ -63,7 +63,7 @@ export function render(_ctx, _cache) { ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\")) : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [ _createTextVNode(\\"no\\") - ], 64 /* STABLE_FRAGMENT */)), + ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => { return (_openBlock(), _createBlock(\\"div\\", null, [ _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap index def7f945a51..71414b4e0a5 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap @@ -111,7 +111,7 @@ return function render(_ctx, _cache) { ? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) : orNot ? (_openBlock(), _createBlock(\\"p\\", { key: 1 })) - : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */)) + : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) } }" `; diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index a9ea7acfb47..4c4d2fa666f 100644 --- a/packages/compiler-core/src/transforms/vIf.ts +++ b/packages/compiler-core/src/transforms/vIf.ts @@ -246,15 +246,24 @@ function createChildrenCodegenNode( injectProp(vnodeCall, keyProperty, context) return vnodeCall } else { + let patchFlag = PatchFlags.STABLE_FRAGMENT + let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT] + // check if the fragment actually contains a single valid child with + // the rest being comments + if ( + __DEV__ && + children.filter(c => c.type !== NodeTypes.COMMENT).length === 1 + ) { + patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT + patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}` + } + return createVNodeCall( context, helper(FRAGMENT), createObjectExpression([keyProperty]), children, - PatchFlags.STABLE_FRAGMENT + - (__DEV__ - ? ` /* ${PatchFlagNames[PatchFlags.STABLE_FRAGMENT]} */` - : ``), + patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``), undefined, undefined, true,