fix(compiler-vapor): adjust children generation order for hydration

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index b10a98d32cba702483ed45d2d0175ec8232ffc37..9f2183ce83ea698ac9b1fb7f3d30aca19cde8a1d 100644 (file)
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -212,6 +212,22 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > execution order > with insertionState 1`] = `
+"import { resolveComponent as _resolveComponent, child as _child, setInsertionState as _setInsertionState, createSlot as _createSlot, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div><div></div></div>", true)
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n3 = t0()
+  const n1 = _child(n3)
+  _setInsertionState(n1)
+  const n0 = _createSlot("default", null)
+  _setInsertionState(n3)
+  const n2 = _createComponentWithFallback(_component_Comp)
+  return n3
+}"
+`;
+
 exports[`compile > execution order > with v-once 1`] = `
 "import { child as _child, next as _next, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><span> </span> <br> </div>", true)

diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index 178021d13dd21896f55f6fbbce381ccb4a082e3d..7963a9e98c2c63a96ec47ee79a8ac1cfe0cfa413 100644 (file)
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -247,6 +247,7 @@ describe('compile', () => {
     _setText(x0, _toDisplayString(_ctx.bar))`,
       )
     })
+
     test('with v-once', () => {
       const code = compile(
         `<div>
@@ -261,5 +262,10 @@ describe('compile', () => {
     _setText(n2, " " + _toDisplayString(_ctx.baz))`,
       )
     })
+
+    test('with insertionState', () => {
+      const code = compile(`<div><div><slot /></div><Comp/></div>`)
+      expect(code).matchSnapshot()
+    })
   })
 })

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
index 4a8caa659484883507e508218e5b2688137ef038..6a353b771ff36a9da1d4d8231d6d7f9870e0cfc8 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -57,10 +57,10 @@ const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </sp
 export function render(_ctx) {
   const n3 = t0()
   const p0 = _next(_child(n3))
-  const p1 = _next(p0)
-  const p2 = _next(p1)
   const n0 = _child(p0)
+  const p1 = _next(p0)
   const n1 = _child(p1)
+  const p2 = _next(p1)
   const n2 = _child(p2)
   const x0 = _child(n0)
   const x1 = _child(n1)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 7aa56aa9c2f880745a40a482fc1fbdfe419e2dcd..3188a866070b762926636a68204f4fd9f157758e 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -343,8 +343,8 @@ const t2 = _template("<form></form>")
 
 export function render(_ctx) {
   const n1 = t1()
-  const n3 = t2()
   const n0 = t0()
+  const n3 = t2()
   const n2 = t2()
   _insert(n0, n1)
   _insert(n2, n3)

diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts
index 30347394756b90e7c63a385a91dc745597b43f4c..a4f98dfdffa3269074815cb6d8916be484aad95c 100644 (file)
--- a/packages/compiler-vapor/src/generators/block.ts
+++ b/packages/compiler-vapor/src/generators/block.ts
@@ -65,7 +65,9 @@ export function genBlockContent(
     push(...genSelf(child, context))
   }
   for (const child of dynamic.children) {
-    push(...genChildren(child, context, push, `n${child.id!}`))
+    if (!child.hasDynamicChild) {
+      push(...genChildren(child, context, push, `n${child.id!}`))
+    }
   }
 
   push(...genOperations(operation, context))

diff --git a/packages/compiler-vapor/src/generators/template.ts b/packages/compiler-vapor/src/generators/template.ts
index 5a066b09e9a622435465988ab2af5cb4736222e6..2b8a9ea0e0488d0966ac31554b3fa43df79ec7c7 100644 (file)
--- a/packages/compiler-vapor/src/generators/template.ts
+++ b/packages/compiler-vapor/src/generators/template.ts
@@ -24,7 +24,7 @@ export function genSelf(
   context: CodegenContext,
 ): CodeFragment[] {
   const [frag, push] = buildCodeFragment()
-  const { id, template, operation } = dynamic
+  const { id, template, operation, hasDynamicChild } = dynamic
 
   if (id !== undefined && template !== undefined) {
     push(NEWLINE, `const n${id} = t${template}()`)
@@ -35,6 +35,10 @@ export function genSelf(
     push(...genOperationWithInsertionState(operation, context))
   }
 
+  if (hasDynamicChild) {
+    push(...genChildren(dynamic, context, push, `n${id}`))
+  }
+
   return frag
 }
 
@@ -50,7 +54,6 @@ export function genChildren(
 
   let offset = 0
   let prev: [variable: string, elementIndex: number] | undefined
-  const childrenToGen: [IRDynamicInfo, string][] = []
 
   for (const [index, child] of children.entries()) {
     if (child.flags & DynamicFlag.NON_TEMPLATE) {
@@ -96,7 +99,7 @@ export function genChildren(
       }
     }
 
-    if (id === child.anchor) {
+    if (id === child.anchor && !child.hasDynamicChild) {
       push(...genSelf(child, context))
     }
 
@@ -105,13 +108,7 @@ export function genChildren(
     }
 
     prev = [variable, elementIndex]
-    childrenToGen.push([child, variable])
-  }
-
-  if (childrenToGen.length) {
-    for (const [child, from] of childrenToGen) {
-      push(...genChildren(child, context, pushBlock, from))
-    }
+    push(...genChildren(child, context, pushBlock, variable))
   }
 
   return frag