wip: test

Author: edison1105

packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap

@@ -192,6 +192,20 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-skip > transform > v-skip with key 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_ctx.nested)
+      ? _createCommentVNode("v-skip", true)
+      : (_openBlock(), _createElementBlock("div", { key: "foo" }))
+  }
+}"
+`;
+
 exports[`compiler: v-skip > transform > with component children 1`] = `
 "const _Vue = Vue
 

packages/compiler-core/__tests__/transforms/vSkip.spec.ts

@@ -2,6 +2,7 @@ import {
   type CompilerOptions,
   type ElementNode,
   ElementTypes,
+  ErrorCodes,
   type IfBranchNode,
   type IfNode,
   NodeTypes,
@@ -190,6 +191,28 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
+    test('v-skip with key', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="nested" key="foo"/>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.nested`)
+      expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
+      expect(node.alternate.children.length).toBe(1)
+      expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.alternate.children[0] as ElementNode).tag).toBe(`div`)
+      expect(
+        (node.alternate.children[0] as ElementNode).props[0],
+      ).toMatchObject({
+        name: 'key',
+        type: NodeTypes.ATTRIBUTE,
+        value: {
+          content: 'foo',
+        },
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
     test('v-else + v-skip', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-if="ok"/><div v-else v-skip="nested"/>`,
@@ -338,5 +361,63 @@ describe('compiler: v-skip', () => {
     })
   })
 
-  describe.todo('errors', () => {})
+  describe('errors', () => {
+    test('no expression', () => {
+      const onError = vi.fn()
+      const { node } = parseWithSkipTransform(`<div v-skip/>`, { onError })
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_NO_EXPRESSION,
+          loc: node.loc,
+        },
+      ])
+    })
+
+    test('on <slot>', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(`<slot v-skip="ok"/>`, { onError })
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_ON_TEMPLATE,
+        },
+      ])
+    })
+
+    test('on <template>', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(`<template v-skip="ok"/>`, { onError })
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_ON_TEMPLATE,
+        },
+      ])
+    })
+
+    test('on component without default slot', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <template #foo>foo</template>
+        </Comp>`,
+        { onError },
+      )
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT,
+        },
+      ])
+    })
+
+    test('with v-for', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(`<div v-for="i in items" v-skip="ok"/>`, {
+        onError,
+      })
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_WITH_V_FOR,
+        },
+      ])
+    })
+  })
 })

packages/compiler-core/src/transforms/vSkip.ts

@@ -24,7 +24,6 @@ import {
   findDir,
   findProp,
   isSlotOutlet,
-  isTemplateNode,
   processExpression,
 } from '@vue/compiler-core'
 import { createCodegenNodeForBranch } from './vIf'
@@ -59,7 +58,10 @@ export function processSkip(
   processCodegen?: (skipNode: SkipNode) => () => void,
 ): (() => void) | undefined {
   const loc = dir.exp ? dir.exp.loc : node.loc
-  if (isTemplateNode(node) || isSlotOutlet(node)) {
+  if (
+    (node.type === NodeTypes.ELEMENT && node.tag === 'template') ||
+    isSlotOutlet(node)
+  ) {
     context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
     return
   }