refactor: add hydration hints

Author: edison1105

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -157,9 +157,9 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const _component_Comp = _resolveComponent("Comp")
   const n0 = t0()
   const n3 = t1()
+  const n2 = _child(n3, 1)
   _setInsertionState(n3, 0)
   const n1 = _createComponentWithFallback(_component_Comp)
-  const n2 = _child(n3)
   _renderEffect(() => {
     _setProp(n3, "id", _ctx.foo)
     _setText(n2, _toDisplayString(_ctx.bar))
@@ -212,14 +212,38 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > execution order > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
+"import { resolveComponent as _resolveComponent, nthChild as _nthChild, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, next as _next, child as _child, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+const t1 = _template("<div><div></div><!><div></div><!><div><button></button></div></div>", true)
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n6 = t1()
+  const n5 = _nthChild(n6, 1, 1)
+  const n7 = _nthChild(n6, 3, 3)
+  const p0 = _next(n7, 4)
+  const n4 = _child(p0, 0)
+  _setInsertionState(n6, n5)
+  const n0 = _createComponentWithFallback(_component_Comp)
+  _setInsertionState(n6, n7)
+  const n1 = _createIf(() => (true), () => {
+    const n3 = t0()
+    return n3
+  })
+  _renderEffect(() => _setProp(n4, "disabled", _ctx.foo))
+  return n6
+}"
+`;
+
 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)
+  const n1 = _child(n3, 0)
   _setInsertionState(n1, null)
   const n0 = _createSlot("default", null)
   _setInsertionState(n3, 1)
@@ -234,9 +258,9 @@ const t0 = _template("<div><span> </span> <br> </div>", true)
 
 export function render(_ctx) {
   const n3 = t0()
-  const n0 = _child(n3)
-  const n1 = _next(n0)
-  const n2 = _nthChild(n3, 3)
+  const n0 = _child(n3, 0)
+  const n1 = _next(n0, 1)
+  const n2 = _nthChild(n3, 3, 3)
   const x0 = _txt(n0)
   _setText(x0, _toDisplayString(_ctx.foo))
   _renderEffect(() => {

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -231,6 +231,23 @@ describe('compile', () => {
       )
     })
 
+    describe('setInsertionState', () => {
+      test('next, child and nthChild should be above the setInsertionState', () => {
+        const code = compile(`
+      <div>
+        <div />
+        <Comp />
+        <div />
+        <div v-if="true" />
+        <div>
+          <button :disabled="foo" />
+        </div>
+      </div>
+      `)
+        expect(code).toMatchSnapshot()
+      })
+    })
+
     test('with v-once', () => {
       const code = compile(
         `<div>

packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap

@@ -47,7 +47,7 @@ const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
-  const n0 = _child(n1)
+  const n0 = _child(n1, 0)
   const x1 = _txt(n1)
   _renderEffect(() => {
     const _foo = _ctx.foo
@@ -86,7 +86,7 @@ const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
-  const n0 = _child(n1)
+  const n0 = _child(n1, 0)
   const x1 = _txt(n1)
   _renderEffect(() => {
     const _String = String

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: children transform > anchor insertion in middle 1`] = `
-"import { child as _child, next as _next, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
+"import { nthChild as _nthChild, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 const t1 = _template("<div><div></div><!><div></div></div>", true)
 
 export function render(_ctx) {
   const n4 = t1()
-  const n3 = _next(_child(n4))
+  const n3 = _nthChild(n4, 1, 1)
   _setInsertionState(n4, n3)
   const n0 = _createIf(() => (1), () => {
     const n2 = t0()
@@ -23,9 +23,9 @@ const t0 = _template("<div><p> </p> <p> </p></div>", true)
 
 export function render(_ctx) {
   const n3 = t0()
-  const n0 = _child(n3)
-  const n1 = _next(n0)
-  const n2 = _next(n1)
+  const n0 = _child(n3, 0)
+  const n1 = _next(n0, 1)
+  const n2 = _next(n1, 2)
   const x0 = _txt(n0)
   const x2 = _txt(n2)
   _renderEffect(() => {
@@ -38,30 +38,30 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: children transform > efficient find 1`] = `
-"import { child as _child, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><div>x</div><div>x</div><div> </div></div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
-  const n0 = _nthChild(n1, 2)
+  const n0 = _nthChild(n1, 2, 2)
   const x0 = _txt(n0)
   _renderEffect(() => _setText(x0, _toDisplayString(_ctx.msg)))
   return n1
 }"
 `;
 
 exports[`compiler: children transform > efficient traversal 1`] = `
-"import { child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { nthChild as _nthChild, child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </span></div><div><span> </span></div></div>", true)
 
 export function render(_ctx) {
   const n3 = t0()
-  const p0 = _next(_child(n3))
-  const n0 = _child(p0)
-  const p1 = _next(p0)
-  const n1 = _child(p1)
-  const p2 = _next(p1)
-  const n2 = _child(p2)
+  const p0 = _nthChild(n3, 1, 1)
+  const n0 = _child(p0, 0)
+  const p1 = _next(p0, 2)
+  const n1 = _child(p1, 0)
+  const p2 = _next(p1, 3)
+  const n2 = _child(p2, 0)
   const x0 = _txt(n0)
   const x1 = _txt(n1)
   const x2 = _txt(n2)

packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -243,7 +243,7 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
     const n3 = _createComponentWithFallback(_component_Comp)
-    const n2 = _child(n3)
+    const n2 = _child(n3, 0)
     _renderEffect(() => _setText(n2, _toDisplayString(_for_item0.value)))
     return [n2, n3]
   }, undefined, 2)
@@ -259,7 +259,7 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
     const n3 = _createComponentWithFallback(_component_Comp)
-    const n2 = _child(n3)
+    const n2 = _child(n3, 0)
     _renderEffect(() => _setText(n2, _toDisplayString(_for_item0.value)))
     return [n2, n3]
   }, undefined, 2)

packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap

@@ -17,8 +17,8 @@ const t0 = _template("<div> <span></span></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n2 = t0()
-  const n0 = _child(n2)
-  const n1 = _next(n0)
+  const n0 = _child(n2, 0)
+  const n1 = _next(n0, 1)
   _setText(n0, _toDisplayString(_ctx.msg) + " ")
   _setClass(n1, _ctx.clz)
   return n2
@@ -54,7 +54,7 @@ const t0 = _template("<div><div></div></div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
-  const n0 = _child(n1)
+  const n0 = _child(n1, 0)
   _setProp(n0, "id", _ctx.foo)
   return n1
 }"

packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts

@@ -56,7 +56,7 @@ describe('compiler: children transform', () => {
         <div>{{ msg }}</div>
       </div>`,
     )
-    expect(code).contains(`const n0 = _nthChild(n1, 2)`)
+    expect(code).contains(`const n0 = _nthChild(n1, 2, 2)`)
     expect(code).toMatchSnapshot()
   })
 
@@ -69,7 +69,7 @@ describe('compiler: children transform', () => {
       </div>`,
     )
     // ensure the insertion anchor is generated before the insertion statement
-    expect(code).toMatch(`const n3 = _next(_child(n4))`)
+    expect(code).toMatch(`const n3 = _nthChild(n4, 1, 1)`)
     expect(code).toMatch(`_setInsertionState(n4, n3)`)
     expect(code).toMatchSnapshot()
   })

packages/compiler-vapor/src/generators/block.ts

@@ -71,7 +71,7 @@ export function genBlockContent(
   }
   for (const child of dynamic.children) {
     if (!child.hasDynamicChild) {
-      push(...genChildren(child, context, `n${child.id!}`))
+      push(...genChildren(child, context, push, `n${child.id!}`))
     }
   }
 

packages/compiler-vapor/src/generators/template.ts

@@ -1,5 +1,9 @@
 import type { CodegenContext } from '../generate'
-import { DynamicFlag, type IRDynamicInfo } from '../ir'
+import {
+  DynamicFlag,
+  type IRDynamicInfo,
+  type InsertionStateTypes,
+} from '../ir'
 import { genDirectivesForElement } from './directive'
 import { genOperationWithInsertionState } from './operation'
 import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
@@ -36,7 +40,7 @@ export function genSelf(
   }
 
   if (hasDynamicChild) {
-    push(...genChildren(dynamic, context, `n${id}`))
+    push(...genChildren(dynamic, context, push, `n${id}`))
   }
 
   return frag
@@ -45,6 +49,7 @@ export function genSelf(
 export function genChildren(
   dynamic: IRDynamicInfo,
   context: CodegenContext,
+  pushBlock: (...items: CodeFragment[]) => number,
   from: string = `n${dynamic.id}`,
 ): CodeFragment[] {
   const { helper } = context
@@ -53,10 +58,19 @@ export function genChildren(
 
   let offset = 0
   let prev: [variable: string, elementIndex: number] | undefined
+  let ifBranchCount = 0
+  let prependCount = 0
 
   for (const [index, child] of children.entries()) {
+    if (child.ifBranch) ifBranchCount++
+    if (
+      child.operation &&
+      (child.operation as InsertionStateTypes).anchor === -1
+    ) {
+      prependCount++
+    }
     if (child.flags & DynamicFlag.NON_TEMPLATE) {
-      offset--
+      if (!child.ifBranch) offset--
     }
 
     const id =
@@ -72,29 +86,36 @@ export function genChildren(
     }
 
     const elementIndex = index + offset
+    const logicalIndex = elementIndex - ifBranchCount + prependCount
     // p for "placeholder" variables that are meant for possible reuse by
     // other access paths
     const variable = id === undefined ? `p${context.block.tempId++}` : `n${id}`
-    push(NEWLINE, `const ${variable} = `)
-
+    pushBlock(NEWLINE, `const ${variable} = `)
     if (prev) {
       if (elementIndex - prev[1] === 1) {
-        push(...genCall(helper('next'), prev[0]))
+        pushBlock(...genCall(helper('next'), prev[0], String(logicalIndex)))
       } else {
-        push(...genCall(helper('nthChild'), from, String(elementIndex)))
+        pushBlock(
+          ...genCall(
+            helper('nthChild'),
+            from,
+            String(elementIndex),
+            String(logicalIndex),
+          ),
+        )
       }
     } else {
       if (elementIndex === 0) {
-        push(...genCall(helper('child'), from))
+        pushBlock(...genCall(helper('child'), from, String(logicalIndex)))
       } else {
-        // check if there's a node that we can reuse from
-        let init = genCall(helper('child'), from)
-        if (elementIndex === 1) {
-          init = genCall(helper('next'), init)
-        } else if (elementIndex > 1) {
-          init = genCall(helper('nthChild'), from, String(elementIndex))
-        }
-        push(...init)
+        pushBlock(
+          ...genCall(
+            helper('nthChild'),
+            from,
+            String(elementIndex),
+            String(logicalIndex),
+          ),
+        )
       }
     }
 
@@ -107,7 +128,7 @@ export function genChildren(
     }
 
     prev = [variable, elementIndex]
-    push(...genChildren(child, context, variable))
+    push(...genChildren(child, context, pushBlock, variable))
   }
 
   return frag

packages/compiler-vapor/src/ir/index.ts

@@ -272,6 +272,7 @@ export interface IRDynamicInfo {
   hasDynamicChild?: boolean
   operation?: OperationNode
   needsKey?: boolean
+  ifBranch?: boolean
 }
 
 export interface IREffect {