test: add test

vuejs · edison1105 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · 2b730e320bb0b24a7106162bd03fdb66335130a3
commit 2b730e320bb0b24a7106162bd03fdb66335130a3
diff --git 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("<div></div>", true)

diff --git 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(`<Comp v-show="foo"/>`)
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-vapor/src/transform.ts b/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,12 +172,12 @@ export class TransformContext<T extends AllNode = AllNode> {
     }
   }
 
-  registerOperation(...node: OperationNode[]): void {
-    this.block.operation.push(...node)
-  }
-
-  registerOperationAt(node: OperationNode, index: number): void {
-    this.block.operation.splice(index, 0, 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>(

diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -33,7 +33,6 @@ import {
   type IRProps,
   type IRPropsDynamicAttribute,
   type IRPropsStatic,
-  type OperationNode,
   type VaporDirectiveNode,
 } from '../ir'
 import { EMPTY_EXPRESSION } from './utils'
@@ -125,26 +124,28 @@ function transformComponentElement(
   }
 
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
-  const op: OperationNode = {
-    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,
-  }
-  const hasVShow = findDir(node, 'show')
-  if (hasVShow) {
-    const showOperationIndex = context.block.operation.findIndex(
+
+  // 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.registerOperationAt(op, showOperationIndex)
-  } else {
-    context.registerOperation(op)
   }
+  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 = []
 }