fix(compiler-core): detect v-if branch root with comment as dev fragm…

…ent (#2785) fix #2780
vuejs · Mar 25, 2021 · 4bf7ba1 · 4bf7ba1
1 parent 3755e60
commit 4bf7ba1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,