From df28fa503b7e6e7bd303feb385ee28416b7a1e42 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 1 Aug 2025 15:12:11 +0800 Subject: [PATCH] fix(compiler-vapor): adjust children generation order for hydration --- .../__snapshots__/compile.spec.ts.snap | 16 ++++++++++++++++ .../compiler-vapor/__tests__/compile.spec.ts | 6 ++++++ .../transformChildren.spec.ts.snap | 4 ++-- .../__snapshots__/transformElement.spec.ts.snap | 2 +- packages/compiler-vapor/src/generators/block.ts | 4 +++- .../compiler-vapor/src/generators/template.ts | 17 +++++++---------- 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap index b10a98d32c..9f2183ce83 100644 --- 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("
", 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("

", true) diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts index 178021d13d..7963a9e98c 100644 --- 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( `
@@ -261,5 +262,10 @@ describe('compile', () => { _setText(n2, " " + _toDisplayString(_ctx.baz))`, ) }) + + test('with insertionState', () => { + const code = compile(`
`) + 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 4a8caa6594..6a353b771f 100644 --- 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("
x
") 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 3034739475..a4f98dfdff 100644 --- 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 5a066b09e9..2b8a9ea0e0 100644 --- 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 -- 2.47.2