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

diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
index 76563899d2b770b19aae215805cded9c13ba85b5..534f28e5d22af75007c0ed1536e13a57a6b53b82 100644 (file)
--- a/packages/compiler-vapor/src/transform.ts
+++ b/packages/compiler-vapor/src/transform.ts
@@ -176,6 +176,10 @@ export class TransformContext<T extends AllNode = AllNode> {
     this.block.operation.push(...node)
   }
 
+  registerOperationAt(node: OperationNode, index: number): void {
+    this.block.operation.splice(index, 0, node)
+  }
+
   create<T extends TemplateChildNode>(
     node: T,
     index: number,

diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index f42801ace6d72f257aa02aa6663881d7229451c1..c47e589953cd5ba7bc54a9874639d86b50e32a74 100644 (file)
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -33,10 +33,11 @@ import {
   type IRProps,
   type IRPropsDynamicAttribute,
   type IRPropsStatic,
+  type OperationNode,
   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,7 +125,7 @@ function transformComponentElement(
   }
 
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
-  context.registerOperation({
+  const op: OperationNode = {
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,
@@ -134,7 +135,16 @@ function transformComponentElement(
     slots: [...context.slots],
     once: context.inVOnce,
     dynamic: dynamicComponent,
-  })
+  }
+  const hasVShow = findDir(node, 'show')
+  if (hasVShow) {
+    const showOperationIndex = context.block.operation.findIndex(
+      op => op.type === IRNodeTypes.DIRECTIVE && op.name === 'show',
+    )
+    context.registerOperationAt(op, showOperationIndex)
+  } else {
+    context.registerOperation(op)
+  }
   context.slots = []
 }