diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap index f595da5ef8f..b0de354cf13 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap @@ -1,5 +1,16 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`compiler: v-show transform > on component 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, applyVShow as _applyVShow } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, null, null, true) + _applyVShow(n0, () => (_ctx.foo)) + return n0 +}" +`; + exports[`compiler: v-show transform > simple expression 1`] = ` "import { applyVShow as _applyVShow, template as _template } from 'vue'; const t0 = _template("
", true) diff --git a/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts b/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts index 800f64cc0b4..a5e4c9649f9 100644 --- a/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts @@ -26,4 +26,9 @@ describe('compiler: v-show transform', () => { }), ) }) + + test('on component', () => { + const { code } = compileWithVShow(``) + expect(code).toMatchSnapshot() + }) }) diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index 76563899d2b..2543d7cd583 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/packages/compiler-vapor/src/transform.ts @@ -147,7 +147,7 @@ export class TransformContext { isStaticExpression(e, this.root.options.bindingMetadata), ) ) { - return this.registerOperation(...operations) + return operations.forEach(op => this.registerOperation(op)) } this.block.expressions.push(...expressions) @@ -172,8 +172,12 @@ export class TransformContext { } } - registerOperation(...node: OperationNode[]): void { - this.block.operation.push(...node) + registerOperation(node: OperationNode, index?: number): void { + if (index !== undefined) { + this.block.operation.splice(index, 0, node) + } else { + this.block.operation.push(node) + } } create( diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts index f42801ace6d..b030576917a 100644 --- a/packages/compiler-vapor/src/transforms/transformElement.ts +++ b/packages/compiler-vapor/src/transforms/transformElement.ts @@ -36,7 +36,7 @@ import { type VaporDirectiveNode, } from '../ir' import { EMPTY_EXPRESSION } from './utils' -import { findProp } from '../utils' +import { findDir, findProp } from '../utils' export const isReservedProp: (key: string) => boolean = /*#__PURE__*/ makeMap( // the leading comma is intentional so empty string "" is also included @@ -124,17 +124,28 @@ function transformComponentElement( } context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT - context.registerOperation({ - type: IRNodeTypes.CREATE_COMPONENT_NODE, - id: context.reference(), - tag, - props: propsResult[0] ? propsResult[1] : [propsResult[1]], - asset, - root: singleRoot, - slots: [...context.slots], - once: context.inVOnce, - dynamic: dynamicComponent, - }) + + // ensure v-show is handled after the component is created + let showOperationIndex + if (findDir(node, 'show')) { + showOperationIndex = context.block.operation.findIndex( + op => op.type === IRNodeTypes.DIRECTIVE && op.name === 'show', + ) + } + context.registerOperation( + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + id: context.reference(), + tag, + props: propsResult[0] ? propsResult[1] : [propsResult[1]], + asset, + root: singleRoot, + slots: [...context.slots], + once: context.inVOnce, + dynamic: dynamicComponent, + }, + showOperationIndex, + ) context.slots = [] }