diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap index e56676d8706..d4a8b6827bb 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap +++ b/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) _setInsertionState(n3, 0) const n1 = _createComponentWithFallback(_component_Comp) - const n2 = _child(n3) _renderEffect(() => { _setText(n2, _toDisplayString(_ctx.bar)) _setProp(n3, "id", _ctx.foo) @@ -230,6 +230,30 @@ export function render(_ctx) { }" `; +exports[`compile > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = ` +"import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("
") +const t1 = _template("
", true) + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n6 = t1() + const n5 = _next(_child(n6)) + const n7 = _nthChild(n6, 3) + const p0 = _next(n7) + const n4 = _child(p0) + _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 > static + dynamic root 1`] = ` "import { toDisplayString as _toDisplayString, setText as _setText, template as _template } from 'vue'; const t0 = _template(" ") diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts index 33f399caa77..3a2ce41f0cd 100644 --- a/packages/compiler-vapor/__tests__/compile.spec.ts +++ b/packages/compiler-vapor/__tests__/compile.spec.ts @@ -220,4 +220,21 @@ describe('compile', () => { expect(code).matchSnapshot() }) }) + + describe('setInsertionState', () => { + test('next, child and nthChild should be above the setInsertionState', () => { + const code = compile(` +
+
+ +
+
+
+
+
+ `) + expect(code).toMatchSnapshot() + }) + }) }) diff --git a/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts index e656312356c..2d8ae8c960d 100644 --- a/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts @@ -69,8 +69,8 @@ describe('compiler: children transform', () => {
`, ) // ensure the insertion anchor is generated before the insertion statement - expect(code).toMatch(`const n3 = _next(_child(n4)) - _setInsertionState(n4, n3)`) + expect(code).toMatch(`const n3 = _next(_child(n4))`) + expect(code).toMatch(`_setInsertionState(n4, n3)`) expect(code).toMatchSnapshot() }) }) diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts index b161b8f45d1..48e4b5cb890 100644 --- a/packages/compiler-vapor/src/generators/block.ts +++ b/packages/compiler-vapor/src/generators/block.ts @@ -52,7 +52,7 @@ export function genBlockContent( push(...genSelf(child, context)) } for (const child of dynamic.children) { - push(...genChildren(child, context, `n${child.id!}`)) + 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 356c1ccbe15..5a066b09e9a 100644 --- a/packages/compiler-vapor/src/generators/template.ts +++ b/packages/compiler-vapor/src/generators/template.ts @@ -41,6 +41,7 @@ export function genSelf( export function genChildren( dynamic: IRDynamicInfo, context: CodegenContext, + pushBlock: (...items: CodeFragment[]) => number, from: string = `n${dynamic.id}`, ): CodeFragment[] { const { helper } = context @@ -72,17 +73,17 @@ export function genChildren( // 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])) } else { - push(...genCall(helper('nthChild'), from, String(elementIndex))) + pushBlock(...genCall(helper('nthChild'), from, String(elementIndex))) } } else { if (elementIndex === 0) { - push(...genCall(helper('child'), from)) + pushBlock(...genCall(helper('child'), from)) } else { // check if there's a node that we can reuse from let init = genCall(helper('child'), from) @@ -91,7 +92,7 @@ export function genChildren( } else if (elementIndex > 1) { init = genCall(helper('nthChild'), from, String(elementIndex)) } - push(...init) + pushBlock(...init) } } @@ -109,7 +110,7 @@ export function genChildren( if (childrenToGen.length) { for (const [child, from] of childrenToGen) { - push(...genChildren(child, context, from)) + push(...genChildren(child, context, pushBlock, from)) } }