fix(compile-vapor): ensure component node is initialized before applyVShow is called

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("<div></div>", true)

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

@@ -26,4 +26,9 @@ describe('compiler: v-show transform', () => {
       }),
     )
   })
+
+  test('on component', () => {
+    const { code } = compileWithVShow(`<Comp v-show="foo"/>`)
+    expect(code).toMatchSnapshot()
+  })
 })

packages/compiler-vapor/src/transform.ts

@@ -147,7 +147,7 @@ export class TransformContext<T extends AllNode = AllNode> {
         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<T extends AllNode = AllNode> {
     }
   }
 
-  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<T extends TemplateChildNode>(

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