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 = []
}