From 81992b0f8e9c11a89796572e45fa4aee06cb9de5 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 22 Jan 2025 12:05:53 +0800
Subject: [PATCH 01/38] wip: v-skip

---
 packages/compiler-core/src/ast.ts             |  1 +
 packages/compiler-core/src/compile.ts         |  2 +
 packages/compiler-core/src/errors.ts          |  4 ++
 packages/compiler-core/src/transforms/vIf.ts  |  2 +-
 .../compiler-core/src/transforms/vSkip.ts     | 70 +++++++++++++++++++
 packages/shared/src/general.ts                |  2 +-
 6 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 packages/compiler-core/src/transforms/vSkip.ts

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 2d6df9d9010..2956a4b3dc3 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -144,6 +144,7 @@ export interface PlainElementNode extends BaseElementNode {
     | SimpleExpressionNode // when hoisted
     | CacheExpression // when cached by v-once
     | MemoExpression // when cached by v-memo
+    | ConditionalExpression
     | undefined
   ssrCodegenNode?: TemplateLiteral
 }
diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index a697c9d22e6..637d31c5191 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -22,6 +22,7 @@ import { transformModel } from './transforms/vModel'
 import { transformFilter } from './compat/transformFilter'
 import { ErrorCodes, createCompilerError, defaultOnError } from './errors'
 import { transformMemo } from './transforms/vMemo'
+import { transformSkip } from './transforms/vSkip'
 
 export type TransformPreset = [
   NodeTransform[],
@@ -35,6 +36,7 @@ export function getBaseTransformPreset(
     [
       transformOnce,
       transformIf,
+      transformSkip,
       transformMemo,
       transformFor,
       ...(__COMPAT__ ? [transformFilter] : []),
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 58e113ab19e..42466168e98 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -90,6 +90,8 @@ export enum ErrorCodes {
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
+  X_V_SKIP_NO_EXPRESSION,
+  X_V_SKIP_ON_TEMPLATE,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -179,6 +181,8 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_INVALID_EXPRESSION]: `Error parsing JavaScript expression: `,
   [ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
   [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
+  [ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
+  [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 54c505407a3..f2e1fd5e848 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -217,7 +217,7 @@ function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
   }
 }
 
-function createCodegenNodeForBranch(
+export function createCodegenNodeForBranch(
   branch: IfBranchNode,
   keyIndex: number,
   context: TransformContext,
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
new file mode 100644
index 00000000000..ac96f8e3b25
--- /dev/null
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -0,0 +1,70 @@
+import {
+  type IfBranchNode,
+  NodeTypes,
+  type SimpleExpressionNode,
+  createConditionalExpression,
+  createSimpleExpression,
+} from '../ast'
+import {
+  type NodeTransform,
+  createStructuralDirectiveTransform,
+} from '../transform'
+import {
+  ErrorCodes,
+  createCompilerError,
+  findProp,
+  isSlotOutlet,
+  isTemplateNode,
+  processExpression,
+} from '@vue/compiler-core'
+import { createCodegenNodeForBranch } from './vIf'
+import { validateBrowserExpression } from '../validateExpression'
+
+export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
+  'skip',
+  (node, dir, context) => {
+    if (isTemplateNode(node) || isSlotOutlet(node)) {
+      const loc = dir.exp ? dir.exp.loc : node.loc
+      context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
+      return
+    }
+
+    if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
+      const loc = dir.exp ? dir.exp.loc : node.loc
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, dir.loc),
+      )
+      dir.exp = createSimpleExpression(`true`, false, loc)
+    }
+
+    if (!__BROWSER__ && context.prefixIdentifiers && dir.exp) {
+      dir.exp = processExpression(dir.exp as SimpleExpressionNode, context)
+    }
+
+    if (__DEV__ && __BROWSER__ && dir.exp) {
+      validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
+    }
+
+    return () => {
+      const consequent: IfBranchNode = {
+        type: NodeTypes.IF_BRANCH,
+        loc: node.loc,
+        condition: undefined,
+        children: node.children,
+        userKey: findProp(node, `key`),
+      }
+      const alternate: IfBranchNode = {
+        type: NodeTypes.IF_BRANCH,
+        loc: node.loc,
+        condition: undefined,
+        children: [node],
+        userKey: findProp(node, `key`),
+      }
+      node.codegenNode = createConditionalExpression(
+        dir.exp!,
+        createCodegenNodeForBranch(consequent, 0, context),
+        createCodegenNodeForBranch(alternate, 1, context),
+      )
+    }
+  },
+)
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index 9c6a2313240..d5b5e0b942d 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -90,7 +90,7 @@ export const isReservedProp: (key: string) => boolean = /*@__PURE__*/ makeMap(
 
 export const isBuiltInDirective: (key: string) => boolean =
   /*@__PURE__*/ makeMap(
-    'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo',
+    'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo,skip',
   )
 
 const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {

From ac5005f0c33184e54e8b41a521e991bb0a634786 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 22 Jan 2025 15:05:01 +0800
Subject: [PATCH 02/38] wip: v-skip

---
 packages/compiler-core/src/errors.ts          |  2 +
 .../compiler-core/src/transforms/vSkip.ts     | 41 +++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 42466168e98..b5b5e8cd3e3 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -92,6 +92,7 @@ export enum ErrorCodes {
   X_KEEP_ALIVE_INVALID_CHILDREN,
   X_V_SKIP_NO_EXPRESSION,
   X_V_SKIP_ON_TEMPLATE,
+  X_V_SKIP_UNEXPECTED_SLOT,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -183,6 +184,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
   [ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
   [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
+  [ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip directive requires the component to have a default slot without slot props`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index ac96f8e3b25..d1568ef6bee 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -1,7 +1,10 @@
 import {
+  ElementTypes,
   type IfBranchNode,
   NodeTypes,
   type SimpleExpressionNode,
+  type SlotsExpression,
+  type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
 } from '../ast'
@@ -23,16 +26,15 @@ import { validateBrowserExpression } from '../validateExpression'
 export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   'skip',
   (node, dir, context) => {
+    const loc = dir.exp ? dir.exp.loc : node.loc
     if (isTemplateNode(node) || isSlotOutlet(node)) {
-      const loc = dir.exp ? dir.exp.loc : node.loc
       context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
       return
     }
 
     if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
-      const loc = dir.exp ? dir.exp.loc : node.loc
       context.onError(
-        createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, dir.loc),
+        createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc),
       )
       dir.exp = createSimpleExpression(`true`, false, loc)
     }
@@ -46,13 +48,43 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
     }
 
     return () => {
+      let children: TemplateChildNode[] = []
+      // for components, extract default slot without props
+      // if not found, throw an error
+      if (node.tagType === ElementTypes.COMPONENT) {
+        const codegenNode = node.codegenNode!
+        if (codegenNode.type === NodeTypes.VNODE_CALL) {
+          const genChildren = codegenNode.children! as SlotsExpression
+          if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+            const prop = genChildren.properties.find(
+              p =>
+                p.type === NodeTypes.JS_PROPERTY &&
+                p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+                p.key.content === 'default' &&
+                p.value.params === undefined,
+            )
+            if (prop) {
+              children = prop.value.returns as TemplateChildNode[]
+            } else {
+              context.onError(
+                createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+              )
+            }
+          }
+        }
+      }
+      // for plain elements, take all children
+      else {
+        children = node.children
+      }
       const consequent: IfBranchNode = {
         type: NodeTypes.IF_BRANCH,
         loc: node.loc,
         condition: undefined,
-        children: node.children,
+        children,
         userKey: findProp(node, `key`),
       }
+
       const alternate: IfBranchNode = {
         type: NodeTypes.IF_BRANCH,
         loc: node.loc,
@@ -60,6 +92,7 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
         children: [node],
         userKey: findProp(node, `key`),
       }
+
       node.codegenNode = createConditionalExpression(
         dir.exp!,
         createCodegenNodeForBranch(consequent, 0, context),

From 1bf4e9c35c924fff05a52af6882948f706af7e53 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 22 Jan 2025 15:10:14 +0800
Subject: [PATCH 03/38] chore: update error code

---
 packages/compiler-dom/src/errors.ts | 2 +-
 packages/compiler-ssr/src/errors.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b47624840ab..c765d13eed6 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 57 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,
diff --git a/packages/compiler-ssr/src/errors.ts b/packages/compiler-ssr/src/errors.ts
index e4fd505d282..a1dace764a1 100644
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -17,7 +17,7 @@ export function createSSRCompilerError(
 }
 
 export enum SSRErrorCodes {
-  X_SSR_UNSAFE_ATTR_NAME = 65 /* DOMErrorCodes.__EXTEND_POINT__ */,
+  X_SSR_UNSAFE_ATTR_NAME = 69 /* DOMErrorCodes.__EXTEND_POINT__ */,
   X_SSR_NO_TELEPORT_TARGET,
   X_SSR_INVALID_AST_NODE,
 }

From 32ac9ed0d5463211321bd4ab157c961c9126186c Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 22 Jan 2025 16:34:00 +0800
Subject: [PATCH 04/38] wip: ssr v-skip

---
 .../src/transforms/ssrTransformComponent.ts   |  8 +++
 .../src/transforms/ssrTransformElement.ts     |  7 +++
 .../compiler-ssr/src/transforms/ssrVIf.ts     |  2 +-
 .../compiler-ssr/src/transforms/ssrVSkip.ts   | 49 +++++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 packages/compiler-ssr/src/transforms/ssrVSkip.ts

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index cad1ee81028..6e00788e6b0 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -34,6 +34,7 @@ import {
   createRoot,
   createSimpleExpression,
   createTransformContext,
+  findDir,
   getBaseTransformPreset,
   locStub,
   resolveComponentType,
@@ -61,6 +62,7 @@ import {
   ssrProcessTransition,
   ssrTransformTransition,
 } from './ssrTransformTransition'
+import { ssrProcessSkip } from './ssrVSkip'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
@@ -206,6 +208,12 @@ export function ssrProcessComponent(
   context: SSRTransformContext,
   parent: { children: TemplateChildNode[] },
 ): void {
+  const skipDir = findDir(node, 'skip')
+  if (skipDir) {
+    ssrProcessSkip(node, skipDir, context)
+    return
+  }
+
   const component = componentTypeMap.get(node)!
   if (!node.ssrCodegenNode) {
     // this is a built-in component that fell-through.
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 4a12b0f7ba7..5ff86593642 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -57,6 +57,7 @@ import {
   type SSRTransformContext,
   processChildren,
 } from '../ssrCodegenTransform'
+import { ssrProcessSkip } from './ssrVSkip'
 
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
@@ -442,6 +443,12 @@ export function ssrProcessElement(
   node: PlainElementNode,
   context: SSRTransformContext,
 ): void {
+  const skipDir = findDir(node, 'skip')
+  if (skipDir) {
+    ssrProcessSkip(node, skipDir, context)
+    return
+  }
+
   const isVoidTag = context.options.isVoidTag || NO
   const elementsToAdd = node.ssrCodegenNode!.elements
   for (let j = 0; j < elementsToAdd.length; j++) {
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 0e3880247a1..c84ca659784 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -63,7 +63,7 @@ export function ssrProcessIf(
   }
 }
 
-function processIfBranch(
+export function processIfBranch(
   branch: IfBranchNode,
   context: SSRTransformContext,
   disableNestedFragments = false,
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
new file mode 100644
index 00000000000..1780a189d10
--- /dev/null
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -0,0 +1,49 @@
+import {
+  type ComponentNode,
+  type DirectiveNode,
+  ErrorCodes,
+  type IfBranchNode,
+  NodeTypes,
+  type PlainElementNode,
+  type SimpleExpressionNode,
+  createCompilerError,
+  createIfStatement,
+  createSimpleExpression,
+} from '@vue/compiler-core'
+import { processIfBranch } from './ssrVIf'
+import type { SSRTransformContext } from '../ssrCodegenTransform'
+
+export function ssrProcessSkip(
+  node: PlainElementNode | ComponentNode,
+  dir: DirectiveNode,
+  context: SSRTransformContext,
+): void {
+  if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
+    const loc = dir.exp ? dir.exp.loc : node.loc
+    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc))
+    dir.exp = createSimpleExpression(`true`, false, loc)
+  }
+
+  node.props = node.props.filter(x => x.name !== 'skip')
+  const consequent: IfBranchNode = {
+    type: NodeTypes.IF_BRANCH,
+    loc: node.loc,
+    condition: undefined,
+    children: node.children,
+  }
+
+  const alternate: IfBranchNode = {
+    type: NodeTypes.IF_BRANCH,
+    loc: node.loc,
+    condition: undefined,
+    children: [node],
+  }
+
+  const ifNode = createIfStatement(
+    dir.exp!,
+    processIfBranch(consequent, context),
+    processIfBranch(alternate, context),
+  )
+
+  context.pushStatement(ifNode)
+}

From 80c1e5c3231545917b1d04f3545aa4ae95e7a3a2 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 22 Jan 2025 22:04:06 +0800
Subject: [PATCH 05/38] wip: v-skip work with v-if/v-else/v-else-if

---
 packages/compiler-core/src/ast.ts   | 2 +-
 packages/compiler-core/src/utils.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 2956a4b3dc3..a3c6bd96c03 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -556,7 +556,7 @@ export interface DynamicSlotFnProperty extends Property {
 export type BlockCodegenNode = VNodeCall | RenderSlotCall
 
 export interface IfConditionalExpression extends ConditionalExpression {
-  consequent: BlockCodegenNode | MemoExpression
+  consequent: BlockCodegenNode | MemoExpression | ConditionalExpression
   alternate: BlockCodegenNode | IfConditionalExpression | MemoExpression
 }
 
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index b49d70bb2fb..29939683eb8 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -397,7 +397,11 @@ export function injectProp(
    * we need to get the real props before normalization
    */
   let props =
-    node.type === NodeTypes.VNODE_CALL ? node.props : node.arguments[2]
+    node.type === NodeTypes.VNODE_CALL
+      ? node.props
+      : node.type === NodeTypes.JS_CALL_EXPRESSION
+        ? node.arguments[2]
+        : undefined
   let callPath: CallExpression[] = []
   let parentCall: CallExpression | undefined
   if (
@@ -459,7 +463,7 @@ export function injectProp(
     } else {
       node.props = propsWithInjection
     }
-  } else {
+  } else if (node.type === NodeTypes.JS_CALL_EXPRESSION) {
     if (parentCall) {
       parentCall.arguments[0] = propsWithInjection
     } else {

From 4dbcd896a1dc17a27de9ab9d46602695e59937c9 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 08:36:47 +0800
Subject: [PATCH 06/38] wip: warn work with v-for

---
 packages/compiler-core/src/ast.ts              | 2 +-
 packages/compiler-core/src/errors.ts           | 2 ++
 packages/compiler-core/src/transforms/vSkip.ts | 5 +++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index a3c6bd96c03..2956a4b3dc3 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -556,7 +556,7 @@ export interface DynamicSlotFnProperty extends Property {
 export type BlockCodegenNode = VNodeCall | RenderSlotCall
 
 export interface IfConditionalExpression extends ConditionalExpression {
-  consequent: BlockCodegenNode | MemoExpression | ConditionalExpression
+  consequent: BlockCodegenNode | MemoExpression
   alternate: BlockCodegenNode | IfConditionalExpression | MemoExpression
 }
 
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index b5b5e8cd3e3..048902be604 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -93,6 +93,7 @@ export enum ErrorCodes {
   X_V_SKIP_NO_EXPRESSION,
   X_V_SKIP_ON_TEMPLATE,
   X_V_SKIP_UNEXPECTED_SLOT,
+  X_V_SKIP_WITH_V_FOR,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -185,6 +186,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
   [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
   [ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip directive requires the component to have a default slot without slot props`,
+  [ErrorCodes.X_V_SKIP_WITH_V_FOR]: `v-skip with v-for is not supported.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index d1568ef6bee..2e5d7a42f0d 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -15,6 +15,7 @@ import {
 import {
   ErrorCodes,
   createCompilerError,
+  findDir,
   findProp,
   isSlotOutlet,
   isTemplateNode,
@@ -32,6 +33,10 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
       return
     }
 
+    if (findDir(node, 'for')) {
+      context.onWarn(createCompilerError(ErrorCodes.X_V_SKIP_WITH_V_FOR, loc))
+    }
+
     if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
       context.onError(
         createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc),

From 7a6f1cbcd3ca7126e98fffc5f3247d01f8f45ca1 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 08:59:20 +0800
Subject: [PATCH 07/38] wip: reuse check logic

---
 packages/compiler-core/src/index.ts           |   1 +
 .../compiler-core/src/transforms/vSkip.ts     | 155 ++++++++++--------
 packages/compiler-ssr/src/index.ts            |   2 +
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  16 +-
 4 files changed, 93 insertions(+), 81 deletions(-)

diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 29e5f681300..0ad4f070ebb 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -48,6 +48,7 @@ export { transformBind } from './transforms/vBind'
 export { noopDirectiveTransform } from './transforms/noopDirectiveTransform'
 export { processIf } from './transforms/vIf'
 export { processFor, createForLoopParams } from './transforms/vFor'
+export { processSkip } from './transforms/vSkip'
 export {
   transformExpression,
   processExpression,
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 2e5d7a42f0d..91a44480f78 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -1,15 +1,19 @@
 import {
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
   type IfBranchNode,
   NodeTypes,
   type SimpleExpressionNode,
   type SlotsExpression,
+  type SourceLocation,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
 } from '../ast'
 import {
   type NodeTransform,
+  type TransformContext,
   createStructuralDirectiveTransform,
 } from '../transform'
 import {
@@ -27,82 +31,91 @@ import { validateBrowserExpression } from '../validateExpression'
 export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   'skip',
   (node, dir, context) => {
-    const loc = dir.exp ? dir.exp.loc : node.loc
-    if (isTemplateNode(node) || isSlotOutlet(node)) {
-      context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
-      return
-    }
-
-    if (findDir(node, 'for')) {
-      context.onWarn(createCompilerError(ErrorCodes.X_V_SKIP_WITH_V_FOR, loc))
-    }
-
-    if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
-      context.onError(
-        createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc),
-      )
-      dir.exp = createSimpleExpression(`true`, false, loc)
-    }
-
-    if (!__BROWSER__ && context.prefixIdentifiers && dir.exp) {
-      dir.exp = processExpression(dir.exp as SimpleExpressionNode, context)
-    }
-
-    if (__DEV__ && __BROWSER__ && dir.exp) {
-      validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
-    }
-
-    return () => {
-      let children: TemplateChildNode[] = []
-      // for components, extract default slot without props
-      // if not found, throw an error
-      if (node.tagType === ElementTypes.COMPONENT) {
-        const codegenNode = node.codegenNode!
-        if (codegenNode.type === NodeTypes.VNODE_CALL) {
-          const genChildren = codegenNode.children! as SlotsExpression
-          if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-            const prop = genChildren.properties.find(
-              p =>
-                p.type === NodeTypes.JS_PROPERTY &&
-                p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-                p.key.content === 'default' &&
-                p.value.params === undefined,
-            )
-            if (prop) {
-              children = prop.value.returns as TemplateChildNode[]
-            } else {
-              context.onError(
-                createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+    return processSkip(node, dir, context, loc => {
+      return () => {
+        let children: TemplateChildNode[] = []
+        // for components, extract default slot without props
+        // if not found, throw an error
+        if (node.tagType === ElementTypes.COMPONENT) {
+          const codegenNode = node.codegenNode!
+          if (codegenNode.type === NodeTypes.VNODE_CALL) {
+            const genChildren = codegenNode.children! as SlotsExpression
+            if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+              const prop = genChildren.properties.find(
+                p =>
+                  p.type === NodeTypes.JS_PROPERTY &&
+                  p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+                  p.key.content === 'default' &&
+                  p.value.params === undefined,
               )
+              if (prop) {
+                children = prop.value.returns as TemplateChildNode[]
+              } else {
+                context.onError(
+                  createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+                )
+              }
             }
           }
         }
-      }
-      // for plain elements, take all children
-      else {
-        children = node.children
-      }
-      const consequent: IfBranchNode = {
-        type: NodeTypes.IF_BRANCH,
-        loc: node.loc,
-        condition: undefined,
-        children,
-        userKey: findProp(node, `key`),
-      }
+        // for plain elements, take all children
+        else {
+          children = node.children
+        }
+        const consequent: IfBranchNode = {
+          type: NodeTypes.IF_BRANCH,
+          loc: node.loc,
+          condition: undefined,
+          children,
+          userKey: findProp(node, `key`),
+        }
 
-      const alternate: IfBranchNode = {
-        type: NodeTypes.IF_BRANCH,
-        loc: node.loc,
-        condition: undefined,
-        children: [node],
-        userKey: findProp(node, `key`),
-      }
+        const alternate: IfBranchNode = {
+          type: NodeTypes.IF_BRANCH,
+          loc: node.loc,
+          condition: undefined,
+          children: [node],
+          userKey: findProp(node, `key`),
+        }
 
-      node.codegenNode = createConditionalExpression(
-        dir.exp!,
-        createCodegenNodeForBranch(consequent, 0, context),
-        createCodegenNodeForBranch(alternate, 1, context),
-      )
-    }
+        node.codegenNode = createConditionalExpression(
+          dir.exp!,
+          createCodegenNodeForBranch(consequent, 0, context),
+          createCodegenNodeForBranch(alternate, 1, context),
+        )
+      }
+    })
   },
 )
+
+export function processSkip(
+  node: ElementNode,
+  dir: DirectiveNode,
+  context: TransformContext,
+  processCodegen?: (loc: SourceLocation) => () => void,
+): (() => void) | undefined {
+  const loc = dir.exp ? dir.exp.loc : node.loc
+  if (isTemplateNode(node) || isSlotOutlet(node)) {
+    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
+    return
+  }
+
+  if (findDir(node, 'for')) {
+    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_WITH_V_FOR, loc))
+  }
+
+  if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
+    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc))
+    dir.exp = createSimpleExpression(`true`, false, loc)
+  }
+
+  if (!__BROWSER__ && context.prefixIdentifiers && dir.exp) {
+    dir.exp = processExpression(dir.exp as SimpleExpressionNode, context)
+  }
+
+  if (__DEV__ && __BROWSER__ && dir.exp) {
+    validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
+  }
+
+  if (processCodegen) return processCodegen(loc)
+}
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index f8a686555e8..03bc0bb231e 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -27,6 +27,7 @@ import { ssrTransformModel } from './transforms/ssrVModel'
 import { ssrTransformShow } from './transforms/ssrVShow'
 import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttrs'
 import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
+import { ssrTransformSkip } from './transforms/ssrVSkip'
 
 export function compile(
   source: string | RootNode,
@@ -56,6 +57,7 @@ export function compile(
     hoistStatic: false,
     nodeTransforms: [
       ssrTransformIf,
+      ssrTransformSkip,
       ssrTransformFor,
       trackVForSlotScopes,
       transformExpression,
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index 1780a189d10..a28e517caf4 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -1,29 +1,25 @@
 import {
   type ComponentNode,
   type DirectiveNode,
-  ErrorCodes,
   type IfBranchNode,
+  type NodeTransform,
   NodeTypes,
   type PlainElementNode,
-  type SimpleExpressionNode,
-  createCompilerError,
   createIfStatement,
-  createSimpleExpression,
+  createStructuralDirectiveTransform,
+  processSkip,
 } from '@vue/compiler-core'
 import { processIfBranch } from './ssrVIf'
 import type { SSRTransformContext } from '../ssrCodegenTransform'
 
+export const ssrTransformSkip: NodeTransform =
+  createStructuralDirectiveTransform('skip', processSkip)
+
 export function ssrProcessSkip(
   node: PlainElementNode | ComponentNode,
   dir: DirectiveNode,
   context: SSRTransformContext,
 ): void {
-  if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
-    const loc = dir.exp ? dir.exp.loc : node.loc
-    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_NO_EXPRESSION, loc))
-    dir.exp = createSimpleExpression(`true`, false, loc)
-  }
-
   node.props = node.props.filter(x => x.name !== 'skip')
   const consequent: IfBranchNode = {
     type: NodeTypes.IF_BRANCH,

From 6529c3d03ba4ac56bb15da1db8e0901c136387f3 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 11:14:18 +0800
Subject: [PATCH 08/38] refactor: add new node type for v-skip node

---
 packages/compiler-core/src/ast.ts             |  11 ++
 packages/compiler-core/src/codegen.ts         |   3 +-
 packages/compiler-core/src/transform.ts       |   4 +
 .../src/transforms/cacheStatic.ts             |   1 +
 .../compiler-core/src/transforms/vSkip.ts     | 114 ++++++++++--------
 packages/compiler-core/src/utils.ts           |   6 +
 .../compiler-ssr/src/ssrCodegenTransform.ts   |   4 +
 .../src/transforms/ssrTransformComponent.ts   |   8 --
 .../src/transforms/ssrTransformElement.ts     |   7 --
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  35 ++----
 10 files changed, 97 insertions(+), 96 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 2956a4b3dc3..b3a9d326f61 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -41,6 +41,7 @@ export enum NodeTypes {
   IF_BRANCH,
   FOR,
   TEXT_CALL,
+  SKIP,
   // codegen
   VNODE_CALL,
   JS_CALL_EXPRESSION,
@@ -100,6 +101,7 @@ export type TemplateChildNode =
   | IfBranchNode
   | ForNode
   | TextCallNode
+  | SkipNode
 
 export interface RootNode extends Node {
   type: NodeTypes.ROOT
@@ -406,6 +408,15 @@ export interface FunctionExpression extends Node {
   isNonScopedSlot?: boolean
 }
 
+export interface SkipNode extends Node {
+  type: NodeTypes.SKIP
+  test: ExpressionNode
+  consequent: IfBranchNode
+  alternate: IfBranchNode
+  newline: boolean
+  codegenNode?: ConditionalExpression
+}
+
 export interface ConditionalExpression extends Node {
   type: NodeTypes.JS_CONDITIONAL_EXPRESSION
   test: JSChildNode
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 70116cfb61a..83fd61ee24e 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -656,10 +656,11 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
     case NodeTypes.ELEMENT:
     case NodeTypes.IF:
     case NodeTypes.FOR:
+    case NodeTypes.SKIP:
       __DEV__ &&
         assert(
           node.codegenNode != null,
-          `Codegen node is missing for element/if/for node. ` +
+          `Codegen node is missing for element/if/for/skip node. ` +
             `Apply appropriate transforms first.`,
         )
       genNode(node.codegenNode!, context)
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index aeb96cc2b4a..ca395b55fcd 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -466,6 +466,10 @@ export function traverseNode(
         traverseNode(node.branches[i], context)
       }
       break
+    case NodeTypes.SKIP:
+      traverseNode(node.consequent, context)
+      traverseNode(node.alternate, context)
+      break
     case NodeTypes.IF_BRANCH:
     case NodeTypes.FOR:
     case NodeTypes.ELEMENT:
diff --git a/packages/compiler-core/src/transforms/cacheStatic.ts b/packages/compiler-core/src/transforms/cacheStatic.ts
index 8d5961643c1..d0edd075378 100644
--- a/packages/compiler-core/src/transforms/cacheStatic.ts
+++ b/packages/compiler-core/src/transforms/cacheStatic.ts
@@ -341,6 +341,7 @@ export function getConstantType(
     case NodeTypes.IF:
     case NodeTypes.FOR:
     case NodeTypes.IF_BRANCH:
+    case NodeTypes.SKIP:
       return ConstantTypes.NOT_CONSTANT
     case NodeTypes.INTERPOLATION:
     case NodeTypes.TEXT_CALL:
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 91a44480f78..3e0951f8dd6 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -5,8 +5,8 @@ import {
   type IfBranchNode,
   NodeTypes,
   type SimpleExpressionNode,
+  type SkipNode,
   type SlotsExpression,
-  type SourceLocation,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
@@ -18,6 +18,7 @@ import {
 } from '../transform'
 import {
   ErrorCodes,
+  buildSlots,
   createCompilerError,
   findDir,
   findProp,
@@ -27,61 +28,17 @@ import {
 } from '@vue/compiler-core'
 import { createCodegenNodeForBranch } from './vIf'
 import { validateBrowserExpression } from '../validateExpression'
+import { cloneLoc } from '../parser'
 
 export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   'skip',
   (node, dir, context) => {
-    return processSkip(node, dir, context, loc => {
+    return processSkip(node, dir, context, skipNode => {
       return () => {
-        let children: TemplateChildNode[] = []
-        // for components, extract default slot without props
-        // if not found, throw an error
-        if (node.tagType === ElementTypes.COMPONENT) {
-          const codegenNode = node.codegenNode!
-          if (codegenNode.type === NodeTypes.VNODE_CALL) {
-            const genChildren = codegenNode.children! as SlotsExpression
-            if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-              const prop = genChildren.properties.find(
-                p =>
-                  p.type === NodeTypes.JS_PROPERTY &&
-                  p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-                  p.key.content === 'default' &&
-                  p.value.params === undefined,
-              )
-              if (prop) {
-                children = prop.value.returns as TemplateChildNode[]
-              } else {
-                context.onError(
-                  createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
-                )
-              }
-            }
-          }
-        }
-        // for plain elements, take all children
-        else {
-          children = node.children
-        }
-        const consequent: IfBranchNode = {
-          type: NodeTypes.IF_BRANCH,
-          loc: node.loc,
-          condition: undefined,
-          children,
-          userKey: findProp(node, `key`),
-        }
-
-        const alternate: IfBranchNode = {
-          type: NodeTypes.IF_BRANCH,
-          loc: node.loc,
-          condition: undefined,
-          children: [node],
-          userKey: findProp(node, `key`),
-        }
-
-        node.codegenNode = createConditionalExpression(
+        skipNode.codegenNode = createConditionalExpression(
           dir.exp!,
-          createCodegenNodeForBranch(consequent, 0, context),
-          createCodegenNodeForBranch(alternate, 1, context),
+          createCodegenNodeForBranch(skipNode.consequent, 0, context),
+          createCodegenNodeForBranch(skipNode.alternate, 1, context),
         )
       }
     })
@@ -92,7 +49,7 @@ export function processSkip(
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext,
-  processCodegen?: (loc: SourceLocation) => () => void,
+  processCodegen?: (skipNode: SkipNode) => () => void,
 ): (() => void) | undefined {
   const loc = dir.exp ? dir.exp.loc : node.loc
   if (isTemplateNode(node) || isSlotOutlet(node)) {
@@ -117,5 +74,58 @@ export function processSkip(
     validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
   }
 
-  if (processCodegen) return processCodegen(loc)
+  let children: TemplateChildNode[] = []
+  // for components, extract default slot without props
+  // if not found, throw an error
+  if (node.tagType === ElementTypes.COMPONENT) {
+    const { slots } = buildSlots(node, context)
+    const genChildren = slots as SlotsExpression
+    if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      const prop = genChildren.properties.find(
+        p =>
+          p.type === NodeTypes.JS_PROPERTY &&
+          p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+          p.key.content === 'default' &&
+          p.value.params === undefined,
+      )
+      if (prop) {
+        children = prop.value.returns as TemplateChildNode[]
+      } else {
+        context.onError(
+          createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+        )
+      }
+    }
+  }
+  // for plain elements, take all children
+  else {
+    children = node.children
+  }
+
+  const consequent: IfBranchNode = {
+    type: NodeTypes.IF_BRANCH,
+    loc: node.loc,
+    condition: undefined,
+    children,
+    userKey: findProp(node, `key`),
+  }
+
+  const alternate: IfBranchNode = {
+    type: NodeTypes.IF_BRANCH,
+    loc: node.loc,
+    condition: undefined,
+    children: [node],
+    userKey: findProp(node, `key`),
+  }
+
+  const skipNode: SkipNode = {
+    type: NodeTypes.SKIP,
+    loc: cloneLoc(node.loc),
+    test: dir.exp,
+    consequent,
+    alternate,
+    newline: true,
+  }
+  context.replaceNode(skipNode)
+  if (processCodegen) return processCodegen(skipNode)
 }
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 29939683eb8..b350298ca10 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -528,6 +528,12 @@ export function hasScopeRef(
       return node.children.some(c => hasScopeRef(c, ids))
     case NodeTypes.IF:
       return node.branches.some(b => hasScopeRef(b, ids))
+    case NodeTypes.SKIP:
+      return (
+        hasScopeRef(node.test, ids) ||
+        node.consequent.children.some(c => hasScopeRef(c, ids)) ||
+        node.alternate.children.some(c => hasScopeRef(c, ids))
+      )
     case NodeTypes.IF_BRANCH:
       if (hasScopeRef(node.condition, ids)) {
         return true
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 536cbb5c1e9..d8e3b0b00aa 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -28,6 +28,7 @@ import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
 import { ssrProcessComponent } from './transforms/ssrTransformComponent'
 import { ssrProcessElement } from './transforms/ssrTransformElement'
 import { SSRErrorCodes, createSSRCompilerError } from './errors'
+import { ssrProcessSkip } from './transforms/ssrVSkip'
 
 // Because SSR codegen output is completely different from client-side output
 // (e.g. multiple elements can be concatenated into a single template literal
@@ -217,6 +218,9 @@ export function processChildren(
       case NodeTypes.IF_BRANCH:
         // no-op - handled by ssrProcessIf
         break
+      case NodeTypes.SKIP:
+        ssrProcessSkip(child, context)
+        break
       case NodeTypes.TEXT_CALL:
       case NodeTypes.COMPOUND_EXPRESSION:
         // no-op - these two types can never appear as template child node since
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index 6e00788e6b0..cad1ee81028 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -34,7 +34,6 @@ import {
   createRoot,
   createSimpleExpression,
   createTransformContext,
-  findDir,
   getBaseTransformPreset,
   locStub,
   resolveComponentType,
@@ -62,7 +61,6 @@ import {
   ssrProcessTransition,
   ssrTransformTransition,
 } from './ssrTransformTransition'
-import { ssrProcessSkip } from './ssrVSkip'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
@@ -208,12 +206,6 @@ export function ssrProcessComponent(
   context: SSRTransformContext,
   parent: { children: TemplateChildNode[] },
 ): void {
-  const skipDir = findDir(node, 'skip')
-  if (skipDir) {
-    ssrProcessSkip(node, skipDir, context)
-    return
-  }
-
   const component = componentTypeMap.get(node)!
   if (!node.ssrCodegenNode) {
     // this is a built-in component that fell-through.
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 5ff86593642..4a12b0f7ba7 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -57,7 +57,6 @@ import {
   type SSRTransformContext,
   processChildren,
 } from '../ssrCodegenTransform'
-import { ssrProcessSkip } from './ssrVSkip'
 
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
@@ -443,12 +442,6 @@ export function ssrProcessElement(
   node: PlainElementNode,
   context: SSRTransformContext,
 ): void {
-  const skipDir = findDir(node, 'skip')
-  if (skipDir) {
-    ssrProcessSkip(node, skipDir, context)
-    return
-  }
-
   const isVoidTag = context.options.isVoidTag || NO
   const elementsToAdd = node.ssrCodegenNode!.elements
   for (let j = 0; j < elementsToAdd.length; j++) {
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index a28e517caf4..751d3336f03 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -1,10 +1,6 @@
 import {
-  type ComponentNode,
-  type DirectiveNode,
-  type IfBranchNode,
   type NodeTransform,
-  NodeTypes,
-  type PlainElementNode,
+  type SkipNode,
   createIfStatement,
   createStructuralDirectiveTransform,
   processSkip,
@@ -16,30 +12,13 @@ export const ssrTransformSkip: NodeTransform =
   createStructuralDirectiveTransform('skip', processSkip)
 
 export function ssrProcessSkip(
-  node: PlainElementNode | ComponentNode,
-  dir: DirectiveNode,
+  node: SkipNode,
   context: SSRTransformContext,
 ): void {
-  node.props = node.props.filter(x => x.name !== 'skip')
-  const consequent: IfBranchNode = {
-    type: NodeTypes.IF_BRANCH,
-    loc: node.loc,
-    condition: undefined,
-    children: node.children,
-  }
-
-  const alternate: IfBranchNode = {
-    type: NodeTypes.IF_BRANCH,
-    loc: node.loc,
-    condition: undefined,
-    children: [node],
-  }
-
-  const ifNode = createIfStatement(
-    dir.exp!,
-    processIfBranch(consequent, context),
-    processIfBranch(alternate, context),
+  const ifStatement = createIfStatement(
+    node.test,
+    processIfBranch(node.consequent, context),
+    processIfBranch(node.alternate, context),
   )
-
-  context.pushStatement(ifNode)
+  context.pushStatement(ifStatement)
 }

From 7327a573fe27525f5dfe93bf8686324f4be7c0a5 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 11:35:22 +0800
Subject: [PATCH 09/38] chore: cache buildSlots result

---
 packages/compiler-core/src/ast.ts                   |  2 ++
 .../src/transforms/transformElement.ts              |  5 ++++-
 packages/compiler-core/src/transforms/vSkip.ts      |  6 ++----
 packages/compiler-core/src/transforms/vSlot.ts      | 13 +++++++++++--
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index b3a9d326f61..fed8cd2cfc2 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -153,6 +153,8 @@ export interface PlainElementNode extends BaseElementNode {
 
 export interface ComponentNode extends BaseElementNode {
   tagType: ElementTypes.COMPONENT
+  slots: SlotsExpression
+  hasDynamicSlots: boolean
   codegenNode:
     | VNodeCall
     | CacheExpression // when cached by v-once
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 76ca1d44353..05b215db31a 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -173,7 +173,10 @@ export const transformElement: NodeTransform = (node, context) => {
         vnodeTag !== KEEP_ALIVE
 
       if (shouldBuildAsSlots) {
-        const { slots, hasDynamicSlots } = buildSlots(node, context)
+        const { slots, hasDynamicSlots } = buildSlots(
+          node as ComponentNode,
+          context,
+        )
         vnodeChildren = slots
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 3e0951f8dd6..6121dfaa0a2 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -6,7 +6,6 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
-  type SlotsExpression,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
@@ -79,9 +78,8 @@ export function processSkip(
   // if not found, throw an error
   if (node.tagType === ElementTypes.COMPONENT) {
     const { slots } = buildSlots(node, context)
-    const genChildren = slots as SlotsExpression
-    if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      const prop = genChildren.properties.find(
+    if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      const prop = slots.properties.find(
         p =>
           p.type === NodeTypes.JS_PROPERTY &&
           p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index db367f39c0c..1c264a3a1bc 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -1,8 +1,8 @@
 import {
   type CallExpression,
+  type ComponentNode,
   type ConditionalExpression,
   type DirectiveNode,
-  type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type FunctionExpression,
@@ -114,13 +114,20 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
 // Instead of being a DirectiveTransform, v-slot processing is called during
 // transformElement to build the slots object for a component.
 export function buildSlots(
-  node: ElementNode,
+  node: ComponentNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
 } {
+  // return early if slots are already built to avoid duplication
+  if (node.slots) {
+    return {
+      slots: node.slots,
+      hasDynamicSlots: node.hasDynamicSlots,
+    }
+  }
   context.helper(WITH_CTX)
 
   const { children, loc } = node
@@ -364,6 +371,8 @@ export function buildSlots(
     ]) as SlotsExpression
   }
 
+  node.slots = slots
+  node.hasDynamicSlots = hasDynamicSlots
   return {
     slots,
     hasDynamicSlots,

From 277e1f08f77baac63463c85f23d2ac404a65ab4a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 11:59:46 +0800
Subject: [PATCH 10/38] wip: add test case

---
 .../__tests__/transforms/vSkip.spec.ts        | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 packages/compiler-core/__tests__/transforms/vSkip.spec.ts

diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
new file mode 100644
index 00000000000..f7274d724ec
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -0,0 +1,61 @@
+import {
+  type CompilerOptions,
+  type ElementNode,
+  NodeTypes,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SkipNode,
+  baseParse as parse,
+  transform,
+  transformBind,
+  transformElement,
+} from '@vue/compiler-core'
+import { transformIf } from '../../src/transforms/vIf'
+import { transformFor } from '../../src/transforms/vFor'
+import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
+import { transformSkip } from '../../src/transforms/vSkip'
+
+export function parseWithSkipTransform(
+  template: string,
+  options: CompilerOptions = {},
+): {
+  root: RootNode
+  node: SkipNode
+} {
+  const ast = parse(template, options)
+  transform(ast, {
+    nodeTransforms: [
+      transformIf,
+      transformSkip,
+      transformFor,
+      transformSlotOutlet,
+      transformElement,
+    ],
+    directiveTransforms: {
+      bind: transformBind,
+    },
+    ...options,
+  })
+  return {
+    root: ast,
+    node: ast.children[0] as SkipNode,
+  }
+}
+
+describe('compiler: v-skip', () => {
+  describe('transform', () => {
+    test('basic', () => {
+      const { node } = parseWithSkipTransform(`<div v-skip="ok"/>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(0)
+      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`)
+    })
+  })
+
+  describe.todo('codegen', () => {})
+
+  describe.todo('errors', () => {})
+})

From 1ca1bba354f3f95bafc7e4afb0fcd015b1284997 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 14:36:52 +0800
Subject: [PATCH 11/38] test: add tests

---
 .../__tests__/transforms/vSkip.spec.ts        | 176 ++++++++++++++++++
 1 file changed, 176 insertions(+)

diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index f7274d724ec..595c62f1a2b 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -1,6 +1,7 @@
 import {
   type CompilerOptions,
   type ElementNode,
+  type IfNode,
   NodeTypes,
   type RootNode,
   type SimpleExpressionNode,
@@ -53,6 +54,181 @@ describe('compiler: v-skip', () => {
       expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
       expect((node.alternate.children[0] as ElementNode).tag).toBe(`div`)
     })
+
+    test('with text children', () => {
+      const { node } = parseWithSkipTransform(`<div v-skip="ok">foo</div>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
+      expect((node.consequent.children[0] as any).content).toBe(`foo`)
+      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`)
+    })
+
+    test('with element children', () => {
+      const { node } = parseWithSkipTransform(`<div v-skip="ok"><span/></div>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
+      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`)
+    })
+
+    test('with component children', () => {
+      const { node } = parseWithSkipTransform(`<div v-skip="ok"><Comp/></div>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[0] as ElementNode).tag).toBe(`Comp`)
+      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`)
+    })
+
+    test('with multiple children', () => {
+      const { node } = parseWithSkipTransform(
+        `<div v-skip="ok"><span/><Comp/></div>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(2)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
+      expect(node.consequent.children[1].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[1] as ElementNode).tag).toBe(`Comp`)
+      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`)
+    })
+
+    test('nested v-skip', () => {
+      const { node } = parseWithSkipTransform(
+        `<div v-skip="ok"><div v-skip="nested"/></div>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.SKIP)
+      expect(
+        ((node.consequent.children[0] as SkipNode).test as SimpleExpressionNode)
+          .content,
+      ).toBe(`nested`)
+      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`)
+    })
+
+    test('v-if + v-skip', () => {
+      const { node } = parseWithSkipTransform(
+        `<div v-if="ok" v-skip="nested"/>`,
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      const ifNode = node as unknown as IfNode
+      const branch = ifNode.branches[0]
+      expect((branch.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect(branch.children.length).toBe(1)
+      // skipNode
+      expect(branch.children[0].type).toBe(NodeTypes.SKIP)
+      expect(
+        ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
+      ).toBe(`nested`)
+    })
+
+    test('v-else + v-skip', () => {
+      const { node } = parseWithSkipTransform(
+        `<div v-if="ok"/><div v-else v-skip="nested"/>`,
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      const elseNode = node as unknown as IfNode
+      const branch = elseNode.branches[1]
+      expect(branch.children.length).toBe(1)
+      // skipNode
+      expect(branch.children[0].type).toBe(NodeTypes.SKIP)
+      expect(
+        ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
+      ).toBe(`nested`)
+    })
+
+    test('v-else-if + v-skip', () => {
+      const { node } = parseWithSkipTransform(
+        `<div v-if="ok"/><div v-else-if="yes" v-skip="nested"/>`,
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      const elseIfNode = node as unknown as IfNode
+      const branch = elseIfNode.branches[1]
+      expect((branch.condition as SimpleExpressionNode).content).toBe(`yes`)
+      expect(branch.children.length).toBe(1)
+      // skipNode
+      expect(branch.children[0].type).toBe(NodeTypes.SKIP)
+      expect(
+        ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
+      ).toBe(`nested`)
+    })
+
+    test('on component', () => {
+      const { node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(0)
+      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(`Comp`)
+    })
+
+    test('on component with default slot', () => {
+      const { node } = parseWithSkipTransform(`<Comp v-skip="ok">foo</Comp>`)
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
+      expect((node.consequent.children[0] as any).content).toBe(`foo`)
+      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(`Comp`)
+    })
+
+    test('on component with multiple named slot', () => {
+      const { node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <template #default>default</template>
+          <template #foo>foo</template>
+        </Comp>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(1)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
+      expect((node.consequent.children[0] as any).content).toBe(`default`)
+      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(`Comp`)
+    })
+
+    test('on component with multiple implicit slot', () => {
+      const { node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <span/>
+          <template #foo>foo</template>
+          <div/>
+        </Comp>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
+      expect(node.consequent.children.length).toBe(2)
+      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
+      expect(node.consequent.children[1].type).toBe(NodeTypes.ELEMENT)
+      expect((node.consequent.children[1] as ElementNode).tag).toBe(`div`)
+      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(`Comp`)
+    })
   })
 
   describe.todo('codegen', () => {})

From 5407b0544dd98b6fca50122cada790191ee5e494 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 14:59:16 +0800
Subject: [PATCH 12/38] wip: save

---
 packages/compiler-core/src/transforms/vSlot.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 1c264a3a1bc..b238247b9f4 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -411,6 +411,13 @@ function hasForwardedSlots(children: TemplateChildNode[]): boolean {
       case NodeTypes.IF:
         if (hasForwardedSlots(child.branches)) return true
         break
+      case NodeTypes.SKIP:
+        if (
+          hasForwardedSlots(child.consequent.children) ||
+          hasForwardedSlots(child.alternate.children)
+        )
+          return true
+        break
       case NodeTypes.IF_BRANCH:
       case NodeTypes.FOR:
         if (hasForwardedSlots(child.children)) return true

From 74e8bb44cb1500b5ca5852899f391f861bb1813b Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 14:59:31 +0800
Subject: [PATCH 13/38] Revert "chore: cache buildSlots result"

This reverts commit 7327a573fe27525f5dfe93bf8686324f4be7c0a5.
---
 packages/compiler-core/src/ast.ts                   |  2 --
 .../src/transforms/transformElement.ts              |  5 +----
 packages/compiler-core/src/transforms/vSkip.ts      |  6 ++++--
 packages/compiler-core/src/transforms/vSlot.ts      | 13 ++-----------
 4 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index fed8cd2cfc2..b3a9d326f61 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -153,8 +153,6 @@ export interface PlainElementNode extends BaseElementNode {
 
 export interface ComponentNode extends BaseElementNode {
   tagType: ElementTypes.COMPONENT
-  slots: SlotsExpression
-  hasDynamicSlots: boolean
   codegenNode:
     | VNodeCall
     | CacheExpression // when cached by v-once
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 05b215db31a..76ca1d44353 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -173,10 +173,7 @@ export const transformElement: NodeTransform = (node, context) => {
         vnodeTag !== KEEP_ALIVE
 
       if (shouldBuildAsSlots) {
-        const { slots, hasDynamicSlots } = buildSlots(
-          node as ComponentNode,
-          context,
-        )
+        const { slots, hasDynamicSlots } = buildSlots(node, context)
         vnodeChildren = slots
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 6121dfaa0a2..3e0951f8dd6 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -6,6 +6,7 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
+  type SlotsExpression,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
@@ -78,8 +79,9 @@ export function processSkip(
   // if not found, throw an error
   if (node.tagType === ElementTypes.COMPONENT) {
     const { slots } = buildSlots(node, context)
-    if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      const prop = slots.properties.find(
+    const genChildren = slots as SlotsExpression
+    if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      const prop = genChildren.properties.find(
         p =>
           p.type === NodeTypes.JS_PROPERTY &&
           p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index b238247b9f4..aa4ac478b61 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -1,8 +1,8 @@
 import {
   type CallExpression,
-  type ComponentNode,
   type ConditionalExpression,
   type DirectiveNode,
+  type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type FunctionExpression,
@@ -114,20 +114,13 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
 // Instead of being a DirectiveTransform, v-slot processing is called during
 // transformElement to build the slots object for a component.
 export function buildSlots(
-  node: ComponentNode,
+  node: ElementNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
 } {
-  // return early if slots are already built to avoid duplication
-  if (node.slots) {
-    return {
-      slots: node.slots,
-      hasDynamicSlots: node.hasDynamicSlots,
-    }
-  }
   context.helper(WITH_CTX)
 
   const { children, loc } = node
@@ -371,8 +364,6 @@ export function buildSlots(
     ]) as SlotsExpression
   }
 
-  node.slots = slots
-  node.hasDynamicSlots = hasDynamicSlots
   return {
     slots,
     hasDynamicSlots,

From 4974e5dabad21566b5f77290c555a85880845278 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 15:05:09 +0800
Subject: [PATCH 14/38] Revert "Revert "chore: cache buildSlots result""

This reverts commit 74e8bb44cb1500b5ca5852899f391f861bb1813b.
---
 packages/compiler-core/src/ast.ts                   |  2 ++
 .../src/transforms/transformElement.ts              |  5 ++++-
 packages/compiler-core/src/transforms/vSkip.ts      |  6 ++----
 packages/compiler-core/src/transforms/vSlot.ts      | 13 +++++++++++--
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index b3a9d326f61..fed8cd2cfc2 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -153,6 +153,8 @@ export interface PlainElementNode extends BaseElementNode {
 
 export interface ComponentNode extends BaseElementNode {
   tagType: ElementTypes.COMPONENT
+  slots: SlotsExpression
+  hasDynamicSlots: boolean
   codegenNode:
     | VNodeCall
     | CacheExpression // when cached by v-once
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 76ca1d44353..05b215db31a 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -173,7 +173,10 @@ export const transformElement: NodeTransform = (node, context) => {
         vnodeTag !== KEEP_ALIVE
 
       if (shouldBuildAsSlots) {
-        const { slots, hasDynamicSlots } = buildSlots(node, context)
+        const { slots, hasDynamicSlots } = buildSlots(
+          node as ComponentNode,
+          context,
+        )
         vnodeChildren = slots
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 3e0951f8dd6..6121dfaa0a2 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -6,7 +6,6 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
-  type SlotsExpression,
   type TemplateChildNode,
   createConditionalExpression,
   createSimpleExpression,
@@ -79,9 +78,8 @@ export function processSkip(
   // if not found, throw an error
   if (node.tagType === ElementTypes.COMPONENT) {
     const { slots } = buildSlots(node, context)
-    const genChildren = slots as SlotsExpression
-    if (genChildren.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      const prop = genChildren.properties.find(
+    if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      const prop = slots.properties.find(
         p =>
           p.type === NodeTypes.JS_PROPERTY &&
           p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index aa4ac478b61..b238247b9f4 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -1,8 +1,8 @@
 import {
   type CallExpression,
+  type ComponentNode,
   type ConditionalExpression,
   type DirectiveNode,
-  type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type FunctionExpression,
@@ -114,13 +114,20 @@ const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
 // Instead of being a DirectiveTransform, v-slot processing is called during
 // transformElement to build the slots object for a component.
 export function buildSlots(
-  node: ElementNode,
+  node: ComponentNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
 } {
+  // return early if slots are already built to avoid duplication
+  if (node.slots) {
+    return {
+      slots: node.slots,
+      hasDynamicSlots: node.hasDynamicSlots,
+    }
+  }
   context.helper(WITH_CTX)
 
   const { children, loc } = node
@@ -364,6 +371,8 @@ export function buildSlots(
     ]) as SlotsExpression
   }
 
+  node.slots = slots
+  node.hasDynamicSlots = hasDynamicSlots
   return {
     slots,
     hasDynamicSlots,

From 84a733ebccc7b1566f31f0c5eb1ab32256030080 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 15:09:08 +0800
Subject: [PATCH 15/38] fix: ssr buildSlots not use cache

---
 packages/compiler-core/src/transforms/vSlot.ts               | 5 +++--
 .../compiler-ssr/src/transforms/ssrTransformComponent.ts     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index b238247b9f4..4c90dff1220 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -117,12 +117,13 @@ export function buildSlots(
   node: ComponentNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
+  useCache: boolean = true,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
 } {
-  // return early if slots are already built to avoid duplication
-  if (node.slots) {
+  // early return if slots are already built to avoid duplication
+  if (useCache && node.slots) {
     return {
       slots: node.slots,
       hasDynamicSlots: node.hasDynamicSlots,
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index cad1ee81028..4ba3e1c8d16 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -173,7 +173,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     }
 
     const slots = node.children.length
-      ? buildSlots(node, context, buildSSRSlotFn).slots
+      ? buildSlots(node, context, buildSSRSlotFn, false).slots
       : `null`
 
     if (typeof component !== 'string') {

From 905805fe5acf61676b552b86f4dcf9c331b2777f Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 15:59:51 +0800
Subject: [PATCH 16/38] test: update

---
 .../__snapshots__/vSkip.spec.ts.snap          | 263 ++++++++++++++++++
 .../__tests__/transforms/vSkip.spec.ts        | 249 ++++++++++++-----
 packages/compiler-core/src/ast.ts             |   4 +-
 packages/compiler-core/src/transform.ts       |   4 +-
 .../compiler-core/src/transforms/vSkip.ts     |  35 ++-
 .../compiler-core/src/transforms/vSlot.ts     |   4 +-
 packages/compiler-core/src/utils.ts           |   4 +-
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  15 +-
 8 files changed, 488 insertions(+), 90 deletions(-)
 create mode 100644 packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
new file mode 100644
index 00000000000..113926c9b4b
--- /dev/null
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -0,0 +1,263 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-skip > transform > basic 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_ctx.ok)
+      ? _createCommentVNode("v-skip", true)
+      : (_openBlock(), _createElementBlock("div", { key: 1 }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > nested v-skip 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode, Fragment: _Fragment } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          (_ctx.nested)
+            ? _createCommentVNode("v-skip", true)
+            : (_openBlock(), _createElementBlock("span", { key: 1 }))
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, [
+          (_ctx.nested)
+            ? _createCommentVNode("v-skip", true)
+            : (_openBlock(), _createElementBlock("span", { key: 1 }))
+        ]))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? _createCommentVNode("v-skip", true)
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          default: _withCtx(() => ["foo"]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple implicit slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          _createElementVNode("span"),
+          _createElementVNode("div")
+        ], 64 /* STABLE_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          foo: _withCtx(() => ["foo"]),
+          default: _withCtx(() => [
+            _createElementVNode("span"),
+            _createElementVNode("div")
+          ]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple named slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["default"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          default: _withCtx(() => ["default"]),
+          foo: _withCtx(() => ["foo"]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on dynamic component 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, renderSlot: _renderSlot, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    return (_ctx.ok)
+      ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+      : (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.Comp), { key: 1 }, {
+          default: _withCtx(() => [
+            _renderSlot(_ctx.$slots, "default", { key: 0 })
+          ]),
+          _: 3 /* FORWARDED */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > v-else + v-skip 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
+          (_ctx.nested)
+            ? _createCommentVNode("v-skip", true)
+            : (_openBlock(), _createElementBlock("div", { key: 1 }))
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > v-else-if + v-skip 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : (_ctx.yes)
+        ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
+            (_ctx.nested)
+              ? _createCommentVNode("v-skip", true)
+              : (_openBlock(), _createElementBlock("div", { key: 1 }))
+          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+        : _createCommentVNode("v-if", true)
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > v-if + v-skip 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, Fragment: _Fragment } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          (_ctx.nested)
+            ? _createCommentVNode("v-skip", true)
+            : (_openBlock(), _createElementBlock("div", { key: 1 }))
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : _createCommentVNode("v-if", true)
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > with component children 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createElementBlock: _createElementBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createBlock(_component_Comp, { key: 0 }))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, [
+          (_openBlock(), _createBlock(_component_Comp, { key: 0 }))
+        ]))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > with element children 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock("span", { key: 0 }))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, [
+          (_openBlock(), _createElementBlock("span", { key: 0 }))
+        ]))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > with multiple children 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          _createElementVNode("span"),
+          _createVNode(_component_Comp)
+        ], 64 /* STABLE_FRAGMENT */))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, [
+          _createElementVNode("span"),
+          _createVNode(_component_Comp)
+        ]))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > with text children 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, "foo"))
+  }
+}"
+`;
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 595c62f1a2b..15572cb9e1f 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -1,15 +1,18 @@
 import {
   type CompilerOptions,
   type ElementNode,
+  ElementTypes,
+  type IfBranchNode,
   type IfNode,
   NodeTypes,
   type RootNode,
   type SimpleExpressionNode,
   type SkipNode,
+  generate,
   baseParse as parse,
   transform,
-  transformBind,
   transformElement,
+  transformExpression,
 } from '@vue/compiler-core'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformFor } from '../../src/transforms/vFor'
@@ -18,7 +21,7 @@ import { transformSkip } from '../../src/transforms/vSkip'
 
 export function parseWithSkipTransform(
   template: string,
-  options: CompilerOptions = {},
+  options: CompilerOptions = { prefixIdentifiers: true },
 ): {
   root: RootNode
   node: SkipNode
@@ -29,12 +32,10 @@ export function parseWithSkipTransform(
       transformIf,
       transformSkip,
       transformFor,
+      transformExpression,
       transformSlotOutlet,
       transformElement,
     ],
-    directiveTransforms: {
-      bind: transformBind,
-    },
     ...options,
   })
   return {
@@ -46,102 +47,151 @@ export function parseWithSkipTransform(
 describe('compiler: v-skip', () => {
   describe('transform', () => {
     test('basic', () => {
-      const { node } = parseWithSkipTransform(`<div v-skip="ok"/>`)
+      const { root, node } = parseWithSkipTransform(`<div v-skip="ok"/>`)
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(0)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      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(generate(root).code).toMatchSnapshot()
     })
 
     test('with text children', () => {
-      const { node } = parseWithSkipTransform(`<div v-skip="ok">foo</div>`)
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="ok">foo</div>`,
+      )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
-      expect((node.consequent.children[0] as any).content).toBe(`foo`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.TEXT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as any).content,
+      ).toBe(`foo`)
       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(generate(root).code).toMatchSnapshot()
     })
 
     test('with element children', () => {
-      const { node } = parseWithSkipTransform(`<div v-skip="ok"><span/></div>`)
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="ok"><span/></div>`,
+      )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
+      ).toBe(`span`)
       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(generate(root).code).toMatchSnapshot()
     })
 
     test('with component children', () => {
-      const { node } = parseWithSkipTransform(`<div v-skip="ok"><Comp/></div>`)
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="ok"><Comp/></div>`,
+      )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
+      ).toBe(`Comp`)
       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(generate(root).code).toMatchSnapshot()
     })
 
     test('with multiple children', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok"><span/><Comp/></div>`,
       )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(2)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
-      expect(node.consequent.children[1].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[1] as ElementNode).tag).toBe(`Comp`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(2)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
+      ).toBe(`span`)
+      expect((node.consequent as IfBranchNode).children[1].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[1] as ElementNode).tag,
+      ).toBe(`Comp`)
       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(generate(root).code).toMatchSnapshot()
     })
 
     test('nested v-skip', () => {
-      const { node } = parseWithSkipTransform(
-        `<div v-skip="ok"><div v-skip="nested"/></div>`,
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="ok"><span v-skip="nested"/></div>`,
       )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.SKIP,
+      )
       expect(
-        ((node.consequent.children[0] as SkipNode).test as SimpleExpressionNode)
-          .content,
-      ).toBe(`nested`)
+        (
+          ((node.consequent as IfBranchNode).children[0] as SkipNode)
+            .test as SimpleExpressionNode
+        ).content,
+      ).toBe(`_ctx.nested`)
       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`)
+      const nestedNode = (node.consequent as IfBranchNode)
+        .children[0] as SkipNode
+      expect(nestedNode.type).toBe(NodeTypes.SKIP)
+      expect((nestedNode.test as SimpleExpressionNode).content).toBe(
+        `_ctx.nested`,
+      )
+      expect(nestedNode.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(
+        true,
+      )
+      expect(nestedNode.alternate.children.length).toBe(1)
+      expect(nestedNode.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((nestedNode.alternate.children[0] as ElementNode).tag).toBe(`span`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('v-if + v-skip', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<div v-if="ok" v-skip="nested"/>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       const ifNode = node as unknown as IfNode
       const branch = ifNode.branches[0]
-      expect((branch.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect((branch.condition as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect(branch.children.length).toBe(1)
       // skipNode
       expect(branch.children[0].type).toBe(NodeTypes.SKIP)
       expect(
         ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
-      ).toBe(`nested`)
+      ).toBe(`_ctx.nested`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('v-else + v-skip', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<div v-if="ok"/><div v-else v-skip="nested"/>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
@@ -152,66 +202,89 @@ describe('compiler: v-skip', () => {
       expect(branch.children[0].type).toBe(NodeTypes.SKIP)
       expect(
         ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
-      ).toBe(`nested`)
+      ).toBe(`_ctx.nested`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('v-else-if + v-skip', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<div v-if="ok"/><div v-else-if="yes" v-skip="nested"/>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       const elseIfNode = node as unknown as IfNode
       const branch = elseIfNode.branches[1]
-      expect((branch.condition as SimpleExpressionNode).content).toBe(`yes`)
+      expect((branch.condition as SimpleExpressionNode).content).toBe(
+        `_ctx.yes`,
+      )
       expect(branch.children.length).toBe(1)
       // skipNode
       expect(branch.children[0].type).toBe(NodeTypes.SKIP)
       expect(
         ((branch.children[0] as SkipNode).test as SimpleExpressionNode).content,
-      ).toBe(`nested`)
+      ).toBe(`_ctx.nested`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('on component', () => {
-      const { node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`)
+      const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`)
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(0)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      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).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
       expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('on component with default slot', () => {
-      const { node } = parseWithSkipTransform(`<Comp v-skip="ok">foo</Comp>`)
+      const { root, node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">foo</Comp>`,
+      )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
-      expect((node.consequent.children[0] as any).content).toBe(`foo`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.TEXT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as any).content,
+      ).toBe(`foo`)
       expect(node.alternate.children.length).toBe(1)
-      expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
       expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('on component with multiple named slot', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <template #default>default</template>
           <template #foo>foo</template>
         </Comp>`,
       )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(1)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.TEXT)
-      expect((node.consequent.children[0] as any).content).toBe(`default`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.TEXT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as any).content,
+      ).toBe(`default`)
       expect(node.alternate.children.length).toBe(1)
-      expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
       expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect(generate(root).code).toMatchSnapshot()
     })
 
     test('on component with multiple implicit slot', () => {
-      const { node } = parseWithSkipTransform(
+      const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <span/>
           <template #foo>foo</template>
@@ -219,19 +292,51 @@ describe('compiler: v-skip', () => {
         </Comp>`,
       )
       expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`ok`)
-      expect(node.consequent.children.length).toBe(2)
-      expect(node.consequent.children[0].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[0] as ElementNode).tag).toBe(`span`)
-      expect(node.consequent.children[1].type).toBe(NodeTypes.ELEMENT)
-      expect((node.consequent.children[1] as ElementNode).tag).toBe(`div`)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(2)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
+      ).toBe(`span`)
+      expect((node.consequent as IfBranchNode).children[1].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[1] as ElementNode).tag,
+      ).toBe(`div`)
       expect(node.alternate.children.length).toBe(1)
-      expect(node.alternate.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
       expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect(generate(root).code).toMatchSnapshot()
     })
-  })
 
-  describe.todo('codegen', () => {})
+    test('on dynamic component', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<component :is="Comp" v-skip="ok">
+          <slot/>
+        </component>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.ELEMENT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
+      ).toBe(`slot`)
+      expect(node.alternate.children.length).toBe(1)
+      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
+      expect((node.alternate.children[0] as ElementNode).tag).toBe(`component`)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+  })
 
   describe.todo('errors', () => {})
 })
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index fed8cd2cfc2..d2402331184 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -413,7 +413,7 @@ export interface FunctionExpression extends Node {
 export interface SkipNode extends Node {
   type: NodeTypes.SKIP
   test: ExpressionNode
-  consequent: IfBranchNode
+  consequent: IfBranchNode | CallExpression
   alternate: IfBranchNode
   newline: boolean
   codegenNode?: ConditionalExpression
@@ -468,7 +468,7 @@ export interface TemplateLiteral extends Node {
 export interface IfStatement extends Node {
   type: NodeTypes.JS_IF_STATEMENT
   test: ExpressionNode
-  consequent: BlockStatement
+  consequent: BlockStatement | CallExpression
   alternate: IfStatement | BlockStatement | ReturnStatement | undefined
 }
 
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index ca395b55fcd..bfdc5bb3cf4 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -467,7 +467,9 @@ export function traverseNode(
       }
       break
     case NodeTypes.SKIP:
-      traverseNode(node.consequent, context)
+      const { consequent } = node
+      if (consequent.type === NodeTypes.IF_BRANCH)
+        traverseNode(consequent, context)
       traverseNode(node.alternate, context)
       break
     case NodeTypes.IF_BRANCH:
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 6121dfaa0a2..2f3f4d07531 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -7,6 +7,7 @@ import {
   type SimpleExpressionNode,
   type SkipNode,
   type TemplateChildNode,
+  createCallExpression,
   createConditionalExpression,
   createSimpleExpression,
 } from '../ast'
@@ -16,6 +17,7 @@ import {
   createStructuralDirectiveTransform,
 } from '../transform'
 import {
+  CREATE_COMMENT,
   ErrorCodes,
   buildSlots,
   createCompilerError,
@@ -34,10 +36,16 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   (node, dir, context) => {
     return processSkip(node, dir, context, skipNode => {
       return () => {
+        const { consequent, alternate, test } = skipNode
+        const consequentNode =
+          consequent.type === NodeTypes.IF_BRANCH
+            ? createCodegenNodeForBranch(consequent, 0, context)
+            : consequent
+
         skipNode.codegenNode = createConditionalExpression(
-          dir.exp!,
-          createCodegenNodeForBranch(skipNode.consequent, 0, context),
-          createCodegenNodeForBranch(skipNode.alternate, 1, context),
+          test,
+          consequentNode,
+          createCodegenNodeForBranch(alternate, 1, context),
         )
       }
     })
@@ -100,13 +108,20 @@ export function processSkip(
     children = node.children
   }
 
-  const consequent: IfBranchNode = {
-    type: NodeTypes.IF_BRANCH,
-    loc: node.loc,
-    condition: undefined,
-    children,
-    userKey: findProp(node, `key`),
-  }
+  // if children is empty, create comment node
+  const consequent =
+    children.length !== 0
+      ? ({
+          type: NodeTypes.IF_BRANCH,
+          loc: node.loc,
+          condition: undefined,
+          children,
+          userKey: findProp(node, `key`),
+        } as IfBranchNode)
+      : createCallExpression(context.helper(CREATE_COMMENT), [
+          __DEV__ ? '"v-skip"' : '""',
+          'true',
+        ])
 
   const alternate: IfBranchNode = {
     type: NodeTypes.IF_BRANCH,
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 4c90dff1220..72d90120475 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -413,8 +413,10 @@ function hasForwardedSlots(children: TemplateChildNode[]): boolean {
         if (hasForwardedSlots(child.branches)) return true
         break
       case NodeTypes.SKIP:
+        const consequent = child.consequent
         if (
-          hasForwardedSlots(child.consequent.children) ||
+          (consequent.type === NodeTypes.IF_BRANCH &&
+            hasForwardedSlots(consequent.children)) ||
           hasForwardedSlots(child.alternate.children)
         )
           return true
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index b350298ca10..faaddb2b2c0 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -529,9 +529,11 @@ export function hasScopeRef(
     case NodeTypes.IF:
       return node.branches.some(b => hasScopeRef(b, ids))
     case NodeTypes.SKIP:
+      const { consequent } = node
       return (
         hasScopeRef(node.test, ids) ||
-        node.consequent.children.some(c => hasScopeRef(c, ids)) ||
+        (consequent.type === NodeTypes.IF_BRANCH &&
+          consequent.children.some(c => hasScopeRef(c, ids))) ||
         node.alternate.children.some(c => hasScopeRef(c, ids))
       )
     case NodeTypes.IF_BRANCH:
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index 751d3336f03..e0780fa0c42 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -1,5 +1,6 @@
 import {
   type NodeTransform,
+  NodeTypes,
   type SkipNode,
   createIfStatement,
   createStructuralDirectiveTransform,
@@ -15,10 +16,18 @@ export function ssrProcessSkip(
   node: SkipNode,
   context: SSRTransformContext,
 ): void {
+  const { consequent, alternate, test } = node
+
+  // if consequent is an if branch, process it as well
+  const consequentNode =
+    consequent.type === NodeTypes.IF_BRANCH
+      ? processIfBranch(consequent, context)
+      : consequent
+
   const ifStatement = createIfStatement(
-    node.test,
-    processIfBranch(node.consequent, context),
-    processIfBranch(node.alternate, context),
+    test,
+    consequentNode,
+    processIfBranch(alternate, context),
   )
   context.pushStatement(ifStatement)
 }

From bb6240076c0bb278e5f5fad33781847b0ee5e697 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 16:58:10 +0800
Subject: [PATCH 17/38] wip: test

---
 .../__snapshots__/vSkip.spec.ts.snap          | 14 ++++
 .../__tests__/transforms/vSkip.spec.ts        | 83 ++++++++++++++++++-
 .../compiler-core/src/transforms/vSkip.ts     |  6 +-
 3 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index 113926c9b4b..bb7cdf978f4 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/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
 
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 15572cb9e1f..d1251ffeeeb 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/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,
+        },
+      ])
+    })
+  })
 })
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 2f3f4d07531..0bbb117780b 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/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
   }

From 25b023d17a40f4dc135cdb90499cbaac862c06bc Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 17:26:11 +0800
Subject: [PATCH 18/38] wip: ssr test cases

---
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 335 ++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 packages/compiler-ssr/__tests__/ssrVSkip.spec.ts

diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
new file mode 100644
index 00000000000..9bee16cc27b
--- /dev/null
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -0,0 +1,335 @@
+import { compile } from '@vue/compiler-ssr'
+
+describe('ssr: v-skip', () => {
+  test('basic', () => {
+    expect(compile(`<div v-skip="foo"/>`).code).toMatchInlineSnapshot(`
+      "const { createCommentVNode: _createCommentVNode } = require("vue")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.foo) {
+          _createCommentVNode("v-skip", true)
+        } else {
+          _push(\`<div></div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('with text children', () => {
+    expect(compile(`<div v-skip="foo">hello</div>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.foo) {
+          _push(\`<!--[-->hello<!--]-->\`)
+        } else {
+          _push(\`<div>hello</div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('with element children', () => {
+    expect(compile(`<div v-skip="foo"><span/></div>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.foo) {
+          _push(\`<span></span>\`)
+        } else {
+          _push(\`<div><span></span></div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('with component children', () => {
+    expect(compile(`<div v-skip="foo"><MyComponent/></div>`).code)
+      .toMatchInlineSnapshot(`
+        "const { resolveComponent: _resolveComponent } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          const _component_MyComponent = _resolveComponent("MyComponent")
+
+          if (_ctx.foo) {
+            _push(_ssrRenderComponent(_component_MyComponent, null, null, _parent))
+          } else {
+            _push(\`<div>\`)
+            _push(_ssrRenderComponent(_component_MyComponent, null, null, _parent))
+            _push(\`</div>\`)
+          }
+        }"
+      `)
+  })
+
+  test('with multiple children', () => {
+    expect(compile(`<div v-skip="foo"><span/><span/></div>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.foo) {
+          _push(\`<!--[--><span></span><span></span><!--]-->\`)
+        } else {
+          _push(\`<div><span></span><span></span></div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('nested v-skip', () => {
+    expect(compile(`<div v-skip="foo"><div v-skip="bar"/></div>`).code)
+      .toMatchInlineSnapshot(`
+      "const { createCommentVNode: _createCommentVNode } = require("vue")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.foo) {
+          _push(\`<!--[-->\`)
+          if (_ctx.bar) {
+            _createCommentVNode("v-skip", true)
+          } else {
+            _push(\`<div></div>\`)
+          }
+          _push(\`<!--]-->\`)
+        } else {
+          _push(\`<div>\`)
+          if (_ctx.bar) {
+            _createCommentVNode("v-skip", true)
+          } else {
+            _push(\`<div></div>\`)
+          }
+          _push(\`</div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('v-if + v-skip', () => {
+    expect(compile(`<div v-if="ok" v-skip="foo"/>`).code)
+      .toMatchInlineSnapshot(`
+      "const { createCommentVNode: _createCommentVNode } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.ok) {
+          _push(\`<!--[-->\`)
+          if (_ctx.foo) {
+            _createCommentVNode("v-skip", true)
+          } else {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          }
+          _push(\`<!--]-->\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test.todo('with key', () => {
+    expect(compile(`<div v-skip="ok" key="foo"/>`).code).toMatchInlineSnapshot(`
+      "const { createCommentVNode: _createCommentVNode } = require("vue")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.ok) {
+          _createCommentVNode("v-skip", true)
+        } else {
+          _push(\`<div></div>\`)
+        }
+      }"
+    `)
+  })
+
+  test('v-else + v-skip', () => {
+    expect(compile(`<div v-if="ok"/><div v-else v-skip="nested"/>`).code)
+      .toMatchInlineSnapshot(`
+        "const { createCommentVNode: _createCommentVNode } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.ok) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          } else {
+            _push(\`<!--[-->\`)
+            if (_ctx.nested) {
+              _createCommentVNode("v-skip", true)
+            } else {
+              _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+            }
+            _push(\`<!--]-->\`)
+          }
+        }"
+      `)
+  })
+
+  test('v-else-if + v-skip', () => {
+    expect(
+      compile(`<div v-if="ok"/><div v-else-if="yes" v-skip="nested"/>`).code,
+    ).toMatchInlineSnapshot(`
+        "const { createCommentVNode: _createCommentVNode } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.ok) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          } else if (_ctx.yes) {
+            _push(\`<!--[-->\`)
+            if (_ctx.nested) {
+              _createCommentVNode("v-skip", true)
+            } else {
+              _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+            }
+            _push(\`<!--]-->\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+        }"
+      `)
+  })
+
+  test('on component', () => {
+    expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.foo) {
+          _createCommentVNode("v-skip", true)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on component with default slot', () => {
+    expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[-->foo<!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, null, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on component with multiple named slot', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <template #default>default</template>
+          <template #foo>foo</template>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[-->default<!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, null, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`default\`)
+              }
+            }),
+            foo: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on component with multiple implicit slot', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <span/>
+          <template #foo>foo</template>
+          <div/>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[--><span></span><div></div><!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, null, {
+            foo: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              }
+            }),
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`<span\${
+                  _scopeId
+                }></span><div\${
+                  _scopeId
+                }></div>\`)
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on dynamic component', () => {
+    expect(
+      compile(
+        `<component :is="Comp" v-skip="ok">
+        <slot/>
+      </component>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createVNode: _createVNode } = require("vue")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.ok) {
+          _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+        } else {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), null, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+              }
+            }),
+            _: 3 /* FORWARDED */
+          }), _parent)
+        }
+      }"
+    `)
+  })
+})

From e756c520e1589fa9935b20b34d1546f43b8a2cdf Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 17:53:15 +0800
Subject: [PATCH 19/38] wip: test

---
 .../src/transforms/transformElement.ts        |  2 ++
 .../compiler-core/src/transforms/vSkip.ts     |  2 +-
 .../compiler-core/src/transforms/vSlot.ts     |  2 +-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 33 ++++++++++++++++---
 .../src/transforms/ssrTransformComponent.ts   |  2 +-
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 05b215db31a..d3087c08d98 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -176,6 +176,8 @@ export const transformElement: NodeTransform = (node, context) => {
         const { slots, hasDynamicSlots } = buildSlots(
           node as ComponentNode,
           context,
+          undefined,
+          true,
         )
         vnodeChildren = slots
         if (hasDynamicSlots) {
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 0bbb117780b..e9582e8e5a7 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -87,7 +87,7 @@ export function processSkip(
   // for components, extract default slot without props
   // if not found, throw an error
   if (node.tagType === ElementTypes.COMPONENT) {
-    const { slots } = buildSlots(node, context)
+    const { slots } = buildSlots(node, context, undefined, true)
     if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
       const prop = slots.properties.find(
         p =>
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 72d90120475..a58d6721d73 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -117,7 +117,7 @@ export function buildSlots(
   node: ComponentNode,
   context: TransformContext,
   buildSlotFn: SlotFnBuilder = buildClientSlotFn,
-  useCache: boolean = true,
+  useCache: boolean = false,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 9bee16cc27b..086e957c0d5 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -206,7 +206,7 @@ describe('ssr: v-skip', () => {
 
   test('on component with default slot', () => {
     expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -219,6 +219,10 @@ describe('ssr: v-skip', () => {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
               }
             }),
             _: 1 /* STABLE */
@@ -237,7 +241,7 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -250,11 +254,19 @@ describe('ssr: v-skip', () => {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`default\`)
+              } else {
+                return [
+                  _createTextVNode("default")
+                ]
               }
             }),
             foo: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
               }
             }),
             _: 1 /* STABLE */
@@ -274,7 +286,7 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -287,6 +299,10 @@ describe('ssr: v-skip', () => {
             foo: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
               }
             }),
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -296,6 +312,11 @@ describe('ssr: v-skip', () => {
                 }></span><div\${
                   _scopeId
                 }></div>\`)
+              } else {
+                return [
+                  _createVNode("span"),
+                  _createVNode("div")
+                ]
               }
             }),
             _: 1 /* STABLE */
@@ -313,7 +334,7 @@ describe('ssr: v-skip', () => {
       </component>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createVNode: _createVNode } = require("vue")
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
       const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -324,6 +345,10 @@ describe('ssr: v-skip', () => {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+              } else {
+                return [
+                  _renderSlot(_ctx.$slots, "default")
+                ]
               }
             }),
             _: 3 /* FORWARDED */
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index 4ba3e1c8d16..cad1ee81028 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -173,7 +173,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     }
 
     const slots = node.children.length
-      ? buildSlots(node, context, buildSSRSlotFn, false).slots
+      ? buildSlots(node, context, buildSSRSlotFn).slots
       : `null`
 
     if (typeof component !== 'string') {

From 172c16d13b021b4c07d3f22d3dff5dd0bbfc1eba Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 23 Jan 2025 18:11:16 +0800
Subject: [PATCH 20/38] wip: inject attrs for skip node

---
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 120 +++++++++---------
 .../transforms/ssrInjectFallthroughAttrs.ts   |   3 +
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 086e957c0d5..57f47d1d202 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -4,12 +4,13 @@ describe('ssr: v-skip', () => {
   test('basic', () => {
     expect(compile(`<div v-skip="foo"/>`).code).toMatchInlineSnapshot(`
       "const { createCommentVNode: _createCommentVNode } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
           _createCommentVNode("v-skip", true)
         } else {
-          _push(\`<div></div>\`)
+          _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
         }
       }"
     `)
@@ -18,36 +19,38 @@ describe('ssr: v-skip', () => {
   test('with text children', () => {
     expect(compile(`<div v-skip="foo">hello</div>`).code)
       .toMatchInlineSnapshot(`
-      "
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<!--[-->hello<!--]-->\`)
-        } else {
-          _push(\`<div>hello</div>\`)
-        }
-      }"
-    `)
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<!--[-->hello<!--]-->\`)
+          } else {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello</div>\`)
+          }
+        }"
+      `)
   })
 
   test('with element children', () => {
     expect(compile(`<div v-skip="foo"><span/></div>`).code)
       .toMatchInlineSnapshot(`
-      "
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<span></span>\`)
-        } else {
-          _push(\`<div><span></span></div>\`)
-        }
-      }"
-    `)
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<span></span>\`)
+          } else {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}><span></span></div>\`)
+          }
+        }"
+      `)
   })
 
   test('with component children', () => {
     expect(compile(`<div v-skip="foo"><MyComponent/></div>`).code)
       .toMatchInlineSnapshot(`
         "const { resolveComponent: _resolveComponent } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           const _component_MyComponent = _resolveComponent("MyComponent")
@@ -55,7 +58,7 @@ describe('ssr: v-skip', () => {
           if (_ctx.foo) {
             _push(_ssrRenderComponent(_component_MyComponent, null, null, _parent))
           } else {
-            _push(\`<div>\`)
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
             _push(_ssrRenderComponent(_component_MyComponent, null, null, _parent))
             _push(\`</div>\`)
           }
@@ -66,42 +69,44 @@ describe('ssr: v-skip', () => {
   test('with multiple children', () => {
     expect(compile(`<div v-skip="foo"><span/><span/></div>`).code)
       .toMatchInlineSnapshot(`
-      "
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<!--[--><span></span><span></span><!--]-->\`)
-        } else {
-          _push(\`<div><span></span><span></span></div>\`)
-        }
-      }"
-    `)
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<!--[--><span></span><span></span><!--]-->\`)
+          } else {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}><span></span><span></span></div>\`)
+          }
+        }"
+      `)
   })
 
   test('nested v-skip', () => {
     expect(compile(`<div v-skip="foo"><div v-skip="bar"/></div>`).code)
       .toMatchInlineSnapshot(`
-      "const { createCommentVNode: _createCommentVNode } = require("vue")
+        "const { createCommentVNode: _createCommentVNode } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<!--[-->\`)
-          if (_ctx.bar) {
-            _createCommentVNode("v-skip", true)
-          } else {
-            _push(\`<div></div>\`)
-          }
-          _push(\`<!--]-->\`)
-        } else {
-          _push(\`<div>\`)
-          if (_ctx.bar) {
-            _createCommentVNode("v-skip", true)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<!--[-->\`)
+            if (_ctx.bar) {
+              _createCommentVNode("v-skip", true)
+            } else {
+              _push(\`<div></div>\`)
+            }
+            _push(\`<!--]-->\`)
           } else {
-            _push(\`<div></div>\`)
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+            if (_ctx.bar) {
+              _createCommentVNode("v-skip", true)
+            } else {
+              _push(\`<div></div>\`)
+            }
+            _push(\`</div>\`)
           }
-          _push(\`</div>\`)
-        }
-      }"
-    `)
+        }"
+      `)
   })
 
   test('v-if + v-skip', () => {
@@ -126,15 +131,16 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test.todo('with key', () => {
+  test('with key', () => {
     expect(compile(`<div v-skip="ok" key="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { createCommentVNode: _createCommentVNode } = require("vue")
+      "const { createCommentVNode: _createCommentVNode, mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.ok) {
           _createCommentVNode("v-skip", true)
         } else {
-          _push(\`<div></div>\`)
+          _push(\`<div\${_ssrRenderAttrs(_mergeProps({ key: "foo" }, _attrs))}></div>\`)
         }
       }"
     `)
@@ -198,7 +204,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.foo) {
           _createCommentVNode("v-skip", true)
         } else {
-          _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
+          _push(_ssrRenderComponent(_component_Comp, _attrs, null, _parent))
         }
       }"
     `)
@@ -215,7 +221,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _push(\`<!--[-->foo<!--]-->\`)
         } else {
-          _push(_ssrRenderComponent(_component_Comp, null, {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`foo\`)
@@ -250,7 +256,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _push(\`<!--[-->default<!--]-->\`)
         } else {
-          _push(_ssrRenderComponent(_component_Comp, null, {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`default\`)
@@ -295,7 +301,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _push(\`<!--[--><span></span><div></div><!--]-->\`)
         } else {
-          _push(_ssrRenderComponent(_component_Comp, null, {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
             foo: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`foo\`)
@@ -341,7 +347,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
         } else {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), null, {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index b1aac0d74c2..719c67aec8a 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -67,6 +67,9 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
       }
     }
     injectFallthroughAttrs(node.children[0])
+  } else if (node.type === NodeTypes.SKIP) {
+    const children = filterChild(node.alternate)
+    children.forEach(injectFallthroughAttrs)
   } else if (hasSingleChild(parent)) {
     injectFallthroughAttrs(node)
   }

From f725472d548656f70dc753984ffd1a7c7171e1d3 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 09:11:12 +0800
Subject: [PATCH 21/38] wip: properly inject fallthrough attrs to alternate
 node

---
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 35 +++++++++++++++++++
 .../transforms/ssrInjectFallthroughAttrs.ts   | 11 +++---
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 57f47d1d202..3c1c8cfc026 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -363,4 +363,39 @@ describe('ssr: v-skip', () => {
       }"
     `)
   })
+
+  test('fragment with component v-skip', () => {
+    expect(
+      compile(`
+      <div></div>
+      <Comp v-skip="ok"><span/></Comp>
+    `).code,
+    ).toMatchInlineSnapshot(`
+        "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createVNode: _createVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          const _component_Comp = _resolveComponent("Comp")
+
+          _push(\`<!--[--><div></div>\`)
+          if (_ctx.ok) {
+            _push(\`<span></span>\`)
+          } else {
+            _push(_ssrRenderComponent(_component_Comp, null, {
+              default: _withCtx((_, _push, _parent, _scopeId) => {
+                if (_push) {
+                  _push(\`<span\${_scopeId}></span>\`)
+                } else {
+                  return [
+                    _createVNode("span")
+                  ]
+                }
+              }),
+              _: 1 /* STABLE */
+            }, _parent))
+          }
+          _push(\`<!--]-->\`)
+        }"
+      `)
+  })
 })
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index 719c67aec8a..33c6cc545c5 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -67,11 +67,14 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
       }
     }
     injectFallthroughAttrs(node.children[0])
-  } else if (node.type === NodeTypes.SKIP) {
-    const children = filterChild(node.alternate)
-    children.forEach(injectFallthroughAttrs)
   } else if (hasSingleChild(parent)) {
-    injectFallthroughAttrs(node)
+    if (node.type === NodeTypes.SKIP) {
+      // for skip node, inject fallthrough attrs to the alternate branch
+      const children = filterChild(node.alternate)
+      injectFallthroughAttrs(children[0])
+    } else {
+      injectFallthroughAttrs(node)
+    }
   }
 }
 

From 1d49d53d07835d49c640957032b2f06378bd5086 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 09:28:07 +0800
Subject: [PATCH 22/38] test: add more tests

---
 .../__tests__/transforms/vSkip.spec.ts            | 15 +++++++++++++++
 packages/compiler-core/src/errors.ts              |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index d1251ffeeeb..6987fb52022 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -408,6 +408,21 @@ describe('compiler: v-skip', () => {
       ])
     })
 
+    test('on component with default slot and slot props', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <template #default="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"/>`, {
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 048902be604..683981143e2 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -185,7 +185,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
   [ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
   [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
-  [ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip directive requires the component to have a default slot without slot props`,
+  [ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip requires the component to have a default slot without slot props`,
   [ErrorCodes.X_V_SKIP_WITH_V_FOR]: `v-skip with v-for is not supported.`,
 
   // generic errors

From 6c17a3713fb8df722aea2c62d42faaf06c7492e9 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 10:38:23 +0800
Subject: [PATCH 23/38] chore: minor tweaks

---
 packages/compiler-core/src/transforms/vSlot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index a58d6721d73..4ebb24ba05b 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -413,7 +413,7 @@ function hasForwardedSlots(children: TemplateChildNode[]): boolean {
         if (hasForwardedSlots(child.branches)) return true
         break
       case NodeTypes.SKIP:
-        const consequent = child.consequent
+        const { consequent } = child
         if (
           (consequent.type === NodeTypes.IF_BRANCH &&
             hasForwardedSlots(consequent.children)) ||

From 453aa03d43df12fb411f1eb6d57fbb79c2faa7a6 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 14:18:27 +0800
Subject: [PATCH 24/38] test: add tests

---
 .../__tests__/transforms/vSkip.spec.ts        | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 6987fb52022..2d7a74b7c47 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -337,6 +337,53 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
+    test.todo('on component with dynamic slot + default slot', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <template #[foo]>foo</template>
+          <template #default>default</template>
+        </Comp>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.TEXT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as any).content,
+      ).toBe(`default`)
+      expect(node.alternate.children.length).toBe(1)
+      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
+        ElementTypes.COMPONENT,
+      )
+      expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test.todo('on component with name default slot + v-if', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <template v-if="yes" #default>default</template>
+        </Comp>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test.todo('on component with implicit default slot + v-if', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <span v-if="yes">default</span>
+        </Comp>`,
+      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
     test('on dynamic component', () => {
       const { root, node } = parseWithSkipTransform(
         `<component :is="Comp" v-skip="ok">
@@ -423,6 +470,21 @@ describe('compiler: v-skip', () => {
       ])
     })
 
+    test('on component with only dynamic 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"/>`, {

From feda7a09a8f751c95c77323b2ec734b576f3dd20 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 17:26:43 +0800
Subject: [PATCH 25/38] refactor: tweak v-skip on component

---
 .../__snapshots__/vSkip.spec.ts.snap          | 100 --------
 packages/compiler-core/src/runtimeHelpers.ts  |   4 +
 .../compiler-core/src/transforms/vSkip.ts     | 150 ++++++------
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 228 ++++++++----------
 packages/compiler-ssr/src/runtimeHelpers.ts   |   4 +
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  17 +-
 .../runtime-core/src/helpers/resolveAssets.ts |  23 ++
 packages/runtime-core/src/index.ts            |   1 +
 .../src/helpers/ssrRenderSkipComponent.ts     |  42 ++++
 packages/server-renderer/src/internal.ts      |   1 +
 10 files changed, 274 insertions(+), 296 deletions(-)
 create mode 100644 packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index bb7cdf978f4..8904400a65a 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -36,106 +36,6 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-skip > transform > on component 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
-
-    const _component_Comp = _resolveComponent("Comp")
-
-    return (_ctx.ok)
-      ? _createCommentVNode("v-skip", true)
-      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }))
-  }
-}"
-`;
-
-exports[`compiler: v-skip > transform > on component with default slot 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
-
-    const _component_Comp = _resolveComponent("Comp")
-
-    return (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
-      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
-          default: _withCtx(() => ["foo"]),
-          _: 1 /* STABLE */
-        }))
-  }
-}"
-`;
-
-exports[`compiler: v-skip > transform > on component with multiple implicit slot 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
-
-    const _component_Comp = _resolveComponent("Comp")
-
-    return (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
-          _createElementVNode("span"),
-          _createElementVNode("div")
-        ], 64 /* STABLE_FRAGMENT */))
-      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
-          foo: _withCtx(() => ["foo"]),
-          default: _withCtx(() => [
-            _createElementVNode("span"),
-            _createElementVNode("div")
-          ]),
-          _: 1 /* STABLE */
-        }))
-  }
-}"
-`;
-
-exports[`compiler: v-skip > transform > on component with multiple named slot 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
-
-    const _component_Comp = _resolveComponent("Comp")
-
-    return (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["default"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
-      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
-          default: _withCtx(() => ["default"]),
-          foo: _withCtx(() => ["foo"]),
-          _: 1 /* STABLE */
-        }))
-  }
-}"
-`;
-
-exports[`compiler: v-skip > transform > on dynamic component 1`] = `
-"const _Vue = Vue
-
-return function render(_ctx, _cache) {
-  with (_ctx) {
-    const { withCtx: _withCtx, renderSlot: _renderSlot, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
-
-    return (_ctx.ok)
-      ? _renderSlot(_ctx.$slots, "default", { key: 0 })
-      : (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.Comp), { key: 1 }, {
-          default: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "default", { key: 0 })
-          ]),
-          _: 3 /* FORWARDED */
-        }))
-  }
-}"
-`;
-
 exports[`compiler: v-skip > transform > v-else + v-skip 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 7cf3757b249..46b36f45054 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -26,6 +26,9 @@ export const CREATE_STATIC: unique symbol = Symbol(
 export const RESOLVE_COMPONENT: unique symbol = Symbol(
   __DEV__ ? `resolveComponent` : ``,
 )
+export const RESOLVE_SKIP_COMPONENT: unique symbol = Symbol(
+  __DEV__ ? `resolveSkipComponent` : ``,
+)
 export const RESOLVE_DYNAMIC_COMPONENT: unique symbol = Symbol(
   __DEV__ ? `resolveDynamicComponent` : ``,
 )
@@ -99,6 +102,7 @@ export const helperNameMap: Record<symbol, string> = {
   [CREATE_STATIC]: `createStaticVNode`,
   [RESOLVE_COMPONENT]: `resolveComponent`,
   [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
+  [RESOLVE_SKIP_COMPONENT]: `resolveSkipComponent`,
   [RESOLVE_DIRECTIVE]: `resolveDirective`,
   [RESOLVE_FILTER]: `resolveFilter`,
   [WITH_DIRECTIVES]: `withDirectives`,
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index e9582e8e5a7..cd04c8db89c 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -2,11 +2,12 @@ import {
   type DirectiveNode,
   type ElementNode,
   ElementTypes,
+  type ExpressionNode,
   type IfBranchNode,
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
-  type TemplateChildNode,
+  type VNodeCall,
   createCallExpression,
   createConditionalExpression,
   createSimpleExpression,
@@ -19,7 +20,8 @@ import {
 import {
   CREATE_COMMENT,
   ErrorCodes,
-  buildSlots,
+  RESOLVE_SKIP_COMPONENT,
+  WITH_MEMO,
   createCompilerError,
   findDir,
   findProp,
@@ -33,19 +35,40 @@ import { cloneLoc } from '../parser'
 export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   'skip',
   (node, dir, context) => {
-    return processSkip(node, dir, context, skipNode => {
+    return processSkip(node, dir, context, (skipNode?: SkipNode) => {
       return () => {
-        const { consequent, alternate, test } = skipNode
-        const consequentNode =
-          consequent.type === NodeTypes.IF_BRANCH
-            ? createCodegenNodeForBranch(consequent, 0, context)
-            : consequent
+        const codegenNode = node.codegenNode!
+        if (node.tagType === ElementTypes.COMPONENT) {
+          if (codegenNode.type === NodeTypes.VNODE_CALL) {
+            codegenNode.tag = getVNodeTag(
+              context,
+              dir.exp!,
+              codegenNode.tag as string,
+            )
+          } else if (
+            codegenNode.type === NodeTypes.JS_CALL_EXPRESSION &&
+            codegenNode.callee === WITH_MEMO
+          ) {
+            const vnodeCall = codegenNode.arguments[1].returns as VNodeCall
+            vnodeCall.tag = getVNodeTag(
+              context,
+              dir.exp!,
+              vnodeCall.tag as string,
+            )
+          }
+        } else {
+          const { consequent, alternate, test } = skipNode!
+          const consequentNode =
+            consequent.type === NodeTypes.IF_BRANCH
+              ? createCodegenNodeForBranch(consequent, 0, context)
+              : consequent
 
-        skipNode.codegenNode = createConditionalExpression(
-          test,
-          consequentNode,
-          createCodegenNodeForBranch(alternate, 1, context),
-        )
+          skipNode!.codegenNode = createConditionalExpression(
+            test,
+            consequentNode,
+            createCodegenNodeForBranch(alternate, 1, context),
+          )
+        }
       }
     })
   },
@@ -55,7 +78,7 @@ export function processSkip(
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext,
-  processCodegen?: (skipNode: SkipNode) => () => void,
+  processCodegen?: (skipNode?: SkipNode) => () => void,
 ): (() => void) | undefined {
   const loc = dir.exp ? dir.exp.loc : node.loc
   if (
@@ -83,64 +106,53 @@ export function processSkip(
     validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
   }
 
-  let children: TemplateChildNode[] = []
-  // for components, extract default slot without props
-  // if not found, throw an error
-  if (node.tagType === ElementTypes.COMPONENT) {
-    const { slots } = buildSlots(node, context, undefined, true)
-    if (slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      const prop = slots.properties.find(
-        p =>
-          p.type === NodeTypes.JS_PROPERTY &&
-          p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-          p.key.content === 'default' &&
-          p.value.params === undefined,
-      )
-      if (prop) {
-        children = prop.value.returns as TemplateChildNode[]
-      } else {
-        context.onError(
-          createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
-        )
-      }
-    }
-  }
-  // for plain elements, take all children
-  else {
-    children = node.children
-  }
+  let skipNode: SkipNode | undefined
+  if (node.tagType === ElementTypes.ELEMENT) {
+    const children = node.children
+    // if children is empty, create comment node
+    const consequent =
+      children.length !== 0
+        ? ({
+            type: NodeTypes.IF_BRANCH,
+            loc: node.loc,
+            condition: undefined,
+            children,
+            userKey: findProp(node, `key`),
+          } as IfBranchNode)
+        : createCallExpression(context.helper(CREATE_COMMENT), [
+            __DEV__ ? '"v-skip"' : '""',
+            'true',
+          ])
 
-  // if children is empty, create comment node
-  const consequent =
-    children.length !== 0
-      ? ({
-          type: NodeTypes.IF_BRANCH,
-          loc: node.loc,
-          condition: undefined,
-          children,
-          userKey: findProp(node, `key`),
-        } as IfBranchNode)
-      : createCallExpression(context.helper(CREATE_COMMENT), [
-          __DEV__ ? '"v-skip"' : '""',
-          'true',
-        ])
+    const alternate: IfBranchNode = {
+      type: NodeTypes.IF_BRANCH,
+      loc: node.loc,
+      condition: undefined,
+      children: [node],
+      userKey: findProp(node, `key`),
+    }
 
-  const alternate: IfBranchNode = {
-    type: NodeTypes.IF_BRANCH,
-    loc: node.loc,
-    condition: undefined,
-    children: [node],
-    userKey: findProp(node, `key`),
+    skipNode = {
+      type: NodeTypes.SKIP,
+      loc: cloneLoc(node.loc),
+      test: dir.exp,
+      consequent,
+      alternate,
+      newline: true,
+    }
+    context.replaceNode(skipNode)
   }
 
-  const skipNode: SkipNode = {
-    type: NodeTypes.SKIP,
-    loc: cloneLoc(node.loc),
-    test: dir.exp,
-    consequent,
-    alternate,
-    newline: true,
-  }
-  context.replaceNode(skipNode)
   if (processCodegen) return processCodegen(skipNode)
 }
+
+function getVNodeTag(
+  context: TransformContext,
+  exp: ExpressionNode,
+  tag: string,
+) {
+  return createCallExpression(context.helper(RESOLVE_SKIP_COMPONENT), [
+    exp,
+    tag,
+  ])
+}
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 3c1c8cfc026..4929912b6f3 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -195,45 +195,37 @@ describe('ssr: v-skip', () => {
 
   test('on component', () => {
     expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        if (_ctx.foo) {
-          _createCommentVNode("v-skip", true)
-        } else {
-          _push(_ssrRenderComponent(_component_Comp, _attrs, null, _parent))
-        }
+        _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
       }"
     `)
   })
 
   test('on component with default slot', () => {
     expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        if (_ctx.ok) {
-          _push(\`<!--[-->foo<!--]-->\`)
-        } else {
-          _push(_ssrRenderComponent(_component_Comp, _attrs, {
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`foo\`)
-              } else {
-                return [
-                  _createTextVNode("foo")
-                ]
-              }
-            }),
-            _: 1 /* STABLE */
-          }, _parent))
-        }
+        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
+          default: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`foo\`)
+            } else {
+              return [
+                _createTextVNode("foo")
+              ]
+            }
+          }),
+          _: 1 /* STABLE */
+        }, _parent))
       }"
     `)
   })
@@ -247,37 +239,33 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        if (_ctx.ok) {
-          _push(\`<!--[-->default<!--]-->\`)
-        } else {
-          _push(_ssrRenderComponent(_component_Comp, _attrs, {
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`default\`)
-              } else {
-                return [
-                  _createTextVNode("default")
-                ]
-              }
-            }),
-            foo: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`foo\`)
-              } else {
-                return [
-                  _createTextVNode("foo")
-                ]
-              }
-            }),
-            _: 1 /* STABLE */
-          }, _parent))
-        }
+        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
+          default: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`default\`)
+            } else {
+              return [
+                _createTextVNode("default")
+              ]
+            }
+          }),
+          foo: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`foo\`)
+            } else {
+              return [
+                _createTextVNode("foo")
+              ]
+            }
+          }),
+          _: 1 /* STABLE */
+        }, _parent))
       }"
     `)
   })
@@ -292,42 +280,38 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        if (_ctx.ok) {
-          _push(\`<!--[--><span></span><div></div><!--]-->\`)
-        } else {
-          _push(_ssrRenderComponent(_component_Comp, _attrs, {
-            foo: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`foo\`)
-              } else {
-                return [
-                  _createTextVNode("foo")
-                ]
-              }
-            }),
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`<span\${
-                  _scopeId
-                }></span><div\${
-                  _scopeId
-                }></div>\`)
-              } else {
-                return [
-                  _createVNode("span"),
-                  _createVNode("div")
-                ]
-              }
-            }),
-            _: 1 /* STABLE */
-          }, _parent))
-        }
+        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
+          foo: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`foo\`)
+            } else {
+              return [
+                _createTextVNode("foo")
+              ]
+            }
+          }),
+          default: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`<span\${
+                _scopeId
+              }></span><div\${
+                _scopeId
+              }></div>\`)
+            } else {
+              return [
+                _createVNode("span"),
+                _createVNode("div")
+              ]
+            }
+          }),
+          _: 1 /* STABLE */
+        }, _parent))
       }"
     `)
   })
@@ -340,26 +324,22 @@ describe('ssr: v-skip', () => {
       </component>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+      "const { resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.ok) {
-          _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
-        } else {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
-              } else {
-                return [
-                  _renderSlot(_ctx.$slots, "default")
-                ]
-              }
-            }),
-            _: 3 /* FORWARDED */
-          }), _parent)
-        }
+        _ssrRenderSkipComponent(_push, _ctx.ok, _push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+          default: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+            } else {
+              return [
+                _renderSlot(_ctx.$slots, "default")
+              ]
+            }
+          }),
+          _: 3 /* FORWARDED */
+        }), _parent)
       }"
     `)
   })
@@ -371,31 +351,27 @@ describe('ssr: v-skip', () => {
       <Comp v-skip="ok"><span/></Comp>
     `).code,
     ).toMatchInlineSnapshot(`
-        "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createVNode: _createVNode } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
-        return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_Comp = _resolveComponent("Comp")
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
 
-          _push(\`<!--[--><div></div>\`)
-          if (_ctx.ok) {
-            _push(\`<span></span>\`)
-          } else {
-            _push(_ssrRenderComponent(_component_Comp, null, {
-              default: _withCtx((_, _push, _parent, _scopeId) => {
-                if (_push) {
-                  _push(\`<span\${_scopeId}></span>\`)
-                } else {
-                  return [
-                    _createVNode("span")
-                  ]
-                }
-              }),
-              _: 1 /* STABLE */
-            }, _parent))
-          }
-          _push(\`<!--]-->\`)
-        }"
-      `)
+        _push(\`<!--[--><div></div>\`)
+        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
+          default: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`<span\${_scopeId}></span>\`)
+            } else {
+              return [
+                _createVNode("span")
+              ]
+            }
+          }),
+          _: 1 /* STABLE */
+        }, _parent))
+        _push(\`<!--]-->\`)
+      }"
+    `)
   })
 })
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index 0e2c8c67bed..bc1e9e44e98 100644
--- a/packages/compiler-ssr/src/runtimeHelpers.ts
+++ b/packages/compiler-ssr/src/runtimeHelpers.ts
@@ -3,6 +3,9 @@ import { registerRuntimeHelpers } from '@vue/compiler-dom'
 export const SSR_INTERPOLATE: unique symbol = Symbol(`ssrInterpolate`)
 export const SSR_RENDER_VNODE: unique symbol = Symbol(`ssrRenderVNode`)
 export const SSR_RENDER_COMPONENT: unique symbol = Symbol(`ssrRenderComponent`)
+export const SSR_RENDER_SKIP_COMPONENT: unique symbol = Symbol(
+  `ssrRenderSkipComponent`,
+)
 export const SSR_RENDER_SLOT: unique symbol = Symbol(`ssrRenderSlot`)
 export const SSR_RENDER_SLOT_INNER: unique symbol = Symbol(`ssrRenderSlotInner`)
 export const SSR_RENDER_CLASS: unique symbol = Symbol(`ssrRenderClass`)
@@ -32,6 +35,7 @@ export const ssrHelpers: Record<symbol, string> = {
   [SSR_INTERPOLATE]: `ssrInterpolate`,
   [SSR_RENDER_VNODE]: `ssrRenderVNode`,
   [SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
+  [SSR_RENDER_SKIP_COMPONENT]: `ssrRenderSkipComponent`,
   [SSR_RENDER_SLOT]: `ssrRenderSlot`,
   [SSR_RENDER_SLOT_INNER]: `ssrRenderSlotInner`,
   [SSR_RENDER_CLASS]: `ssrRenderClass`,
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index e0780fa0c42..e7d111299f0 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -1,16 +1,31 @@
 import {
+  ElementTypes,
   type NodeTransform,
   NodeTypes,
   type SkipNode,
+  createCallExpression,
   createIfStatement,
   createStructuralDirectiveTransform,
   processSkip,
 } from '@vue/compiler-core'
 import { processIfBranch } from './ssrVIf'
 import type { SSRTransformContext } from '../ssrCodegenTransform'
+import { SSR_RENDER_SKIP_COMPONENT } from '../runtimeHelpers'
 
 export const ssrTransformSkip: NodeTransform =
-  createStructuralDirectiveTransform('skip', processSkip)
+  createStructuralDirectiveTransform('skip', (node, dir, context) => {
+    processSkip(node, dir, context)
+    return () => {
+      if (node.tagType === ElementTypes.COMPONENT && node.ssrCodegenNode) {
+        const { arguments: args, loc } = node.ssrCodegenNode
+        node.ssrCodegenNode = createCallExpression(
+          context.helper(SSR_RENDER_SKIP_COMPONENT),
+          [`_push`, dir.exp!, ...args],
+          loc,
+        )
+      }
+    }
+  })
 
 export function ssrProcessSkip(
   node: SkipNode,
diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts
index aa6532c2811..dc7d13a6dfe 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -9,6 +9,11 @@ import type { Directive } from '../directives'
 import { camelize, capitalize, isString } from '@vue/shared'
 import { warn } from '../warning'
 import type { VNodeTypes } from '../vnode'
+import {
+  type ComponentPublicInstance,
+  defineComponent,
+  renderSlot,
+} from '@vue/runtime-core'
 
 export const COMPONENTS = 'components'
 export const DIRECTIVES = 'directives'
@@ -138,3 +143,21 @@ function resolve(registry: Record<string, any> | undefined, name: string) {
       registry[capitalize(camelize(name))])
   )
 }
+
+let _comp: ConcreteComponent | undefined
+/**
+ * @private
+ */
+export function resolveSkipComponent(
+  isSkip: boolean,
+  Comp: ConcreteComponent,
+): ConcreteComponent {
+  return isSkip
+    ? _comp ||
+        (_comp = defineComponent({
+          render(this: ComponentPublicInstance) {
+            return renderSlot(this.$slots, 'default')
+          },
+        }))
+    : Comp
+}
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 3871167b3ee..2cefe3eda8c 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -144,6 +144,7 @@ export {
   resolveComponent,
   resolveDirective,
   resolveDynamicComponent,
+  resolveSkipComponent,
 } from './helpers/resolveAssets'
 // For integration with runtime compiler
 export { registerRuntimeCompiler, isRuntimeOnly } from './component'
diff --git a/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
new file mode 100644
index 00000000000..580cadc0580
--- /dev/null
+++ b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
@@ -0,0 +1,42 @@
+import {
+  type Component,
+  type ComponentInternalInstance,
+  type Slots,
+  createVNode,
+} from 'vue'
+import {
+  type Props,
+  type PushFn,
+  type SSRBuffer,
+  renderComponentVNode,
+} from '../render'
+import { type SSRSlots, ssrRenderSlot } from './ssrRenderSlot'
+
+export function ssrRenderSkipComponent(
+  push: PushFn,
+  isSkip: boolean,
+  comp: Component,
+  props: Props | null = null,
+  children: Slots | SSRSlots | null = null,
+  parentComponent: ComponentInternalInstance | null = null,
+  slotScopeId?: string,
+): SSRBuffer | Promise<SSRBuffer> {
+  if (isSkip) {
+    // only render default slot without slot props
+    ssrRenderSlot(
+      children!,
+      'default',
+      {},
+      null,
+      push,
+      parentComponent!,
+      slotScopeId,
+    )
+    return []
+  }
+  return renderComponentVNode(
+    createVNode(comp, props, children),
+    parentComponent,
+    slotScopeId,
+  )
+}
diff --git a/packages/server-renderer/src/internal.ts b/packages/server-renderer/src/internal.ts
index 3a2054066c3..744f0a59306 100644
--- a/packages/server-renderer/src/internal.ts
+++ b/packages/server-renderer/src/internal.ts
@@ -1,6 +1,7 @@
 // internal runtime helpers
 export { renderVNode as ssrRenderVNode } from './render'
 export { ssrRenderComponent } from './helpers/ssrRenderComponent'
+export { ssrRenderSkipComponent } from './helpers/ssrRenderSkipComponent'
 export { ssrRenderSlot, ssrRenderSlotInner } from './helpers/ssrRenderSlot'
 export { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 export {

From e3fc7035136a2cb3c3591f94b95fbe608683b4e0 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 24 Jan 2025 22:15:52 +0800
Subject: [PATCH 26/38] wip: save

---
 .../__snapshots__/vSkip.spec.ts.snap          |  31 +++++
 .../__tests__/transforms/vSkip.spec.ts        | 129 +++++++-----------
 .../compiler-core/src/transforms/vSkip.ts     |  10 +-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   |  10 +-
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  22 ++-
 .../runtime-core/src/helpers/resolveAssets.ts |   5 +-
 6 files changed, 111 insertions(+), 96 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index 8904400a65a..a975095208b 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -36,6 +36,37 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-skip > transform > on component 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp)))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on dynamic component 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderSlot: _renderSlot, resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, resolveSkipComponent: _resolveSkipComponent } = _Vue
+
+    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _resolveDynamicComponent(_ctx.Comp)), null, {
+      default: _withCtx(() => [
+        _renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3 /* FORWARDED */
+    }))
+  }
+}"
+`;
+
 exports[`compiler: v-skip > transform > v-else + v-skip 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 2d7a74b7c47..c9002fb87ff 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -1,14 +1,18 @@
 import {
+  type CallExpression,
   type CompilerOptions,
+  type ComponentNode,
   type ElementNode,
   ElementTypes,
   ErrorCodes,
   type IfBranchNode,
   type IfNode,
   NodeTypes,
+  RESOLVE_SKIP_COMPONENT,
   type RootNode,
   type SimpleExpressionNode,
   type SkipNode,
+  type VNodeCall,
   generate,
   baseParse as parse,
   transform,
@@ -25,7 +29,7 @@ export function parseWithSkipTransform(
   options: CompilerOptions = { prefixIdentifiers: true },
 ): {
   root: RootNode
-  node: SkipNode
+  node: SkipNode | ComponentNode
 } {
   const ast = parse(template, options)
   transform(ast, {
@@ -41,14 +45,17 @@ export function parseWithSkipTransform(
   })
   return {
     root: ast,
-    node: ast.children[0] as SkipNode,
+    node: ast.children[0] as SkipNode | ComponentNode,
   }
 }
 
 describe('compiler: v-skip', () => {
   describe('transform', () => {
     test('basic', () => {
-      const { root, node } = parseWithSkipTransform(`<div v-skip="ok"/>`)
+      const { root, node } = parseWithSkipTransform(`<div v-skip="ok"/>`) as {
+        root: RootNode
+        node: SkipNode
+      }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
@@ -61,7 +68,7 @@ describe('compiler: v-skip', () => {
     test('with text children', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok">foo</div>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -80,7 +87,7 @@ describe('compiler: v-skip', () => {
     test('with element children', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok"><span/></div>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -99,7 +106,7 @@ describe('compiler: v-skip', () => {
     test('with component children', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok"><Comp/></div>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -118,7 +125,7 @@ describe('compiler: v-skip', () => {
     test('with multiple children', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok"><span/><Comp/></div>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(2)
@@ -143,7 +150,7 @@ describe('compiler: v-skip', () => {
     test('nested v-skip', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="ok"><span v-skip="nested"/></div>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -194,7 +201,7 @@ describe('compiler: v-skip', () => {
     test('v-skip with key', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-skip="nested" key="foo"/>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       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)
@@ -216,7 +223,7 @@ describe('compiler: v-skip', () => {
     test('v-else + v-skip', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-if="ok"/><div v-else v-skip="nested"/>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.IF)
       const elseNode = node as unknown as IfNode
       const branch = elseNode.branches[1]
@@ -232,7 +239,7 @@ describe('compiler: v-skip', () => {
     test('v-else-if + v-skip', () => {
       const { root, node } = parseWithSkipTransform(
         `<div v-if="ok"/><div v-else-if="yes" v-skip="nested"/>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.IF)
       const elseIfNode = node as unknown as IfNode
       const branch = elseIfNode.branches[1]
@@ -249,19 +256,24 @@ describe('compiler: v-skip', () => {
     })
 
     test('on component', () => {
-      const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`)
-      expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
-      expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
-      expect(node.alternate.children.length).toBe(1)
-      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
-        ElementTypes.COMPONENT,
+      const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`) as {
+        root: RootNode
+        node: ComponentNode
+      }
+      expect(node.type).toBe(NodeTypes.ELEMENT)
+      expect(node.tagType).toBe(ElementTypes.COMPONENT)
+      const codegenNode = node.codegenNode! as VNodeCall
+      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+      const vnodeTag = codegenNode.tag as CallExpression
+      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+        `_ctx.ok`,
       )
-      expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on component with default slot', () => {
+    test.todo('on component with default slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">foo</Comp>`,
       )
@@ -282,7 +294,7 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on component with multiple named slot', () => {
+    test.todo('on component with multiple named slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <template #default>default</template>
@@ -306,7 +318,7 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on component with multiple implicit slot', () => {
+    test.todo('on component with multiple implicit slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <span/>
@@ -389,23 +401,23 @@ describe('compiler: v-skip', () => {
         `<component :is="Comp" v-skip="ok">
           <slot/>
         </component>`,
+      ) as { root: RootNode; node: ComponentNode }
+      expect(node.type).toBe(NodeTypes.ELEMENT)
+      expect(node.tagType).toBe(ElementTypes.COMPONENT)
+      const codegenNode = node.codegenNode! as VNodeCall
+      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+      const vnodeTag = codegenNode.tag as CallExpression
+      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+        `_ctx.ok`,
       )
-      expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
-      expect((node.consequent as IfBranchNode).children.length).toBe(1)
-      expect((node.consequent as IfBranchNode).children[0].type).toBe(
-        NodeTypes.ELEMENT,
-      )
-      expect(
-        ((node.consequent as IfBranchNode).children[0] as ElementNode).tag,
-      ).toBe(`slot`)
-      expect(node.alternate.children.length).toBe(1)
-      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
-        ElementTypes.COMPONENT,
-      )
-      expect((node.alternate.children[0] as ElementNode).tag).toBe(`component`)
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test.todo('on Teleport', () => {})
+
+    test.todo('built-in components', () => {})
   })
 
   describe('errors', () => {
@@ -440,51 +452,6 @@ describe('compiler: v-skip', () => {
       ])
     })
 
-    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('on component with default slot and slot props', () => {
-      const onError = vi.fn()
-      parseWithSkipTransform(
-        `<Comp v-skip="ok">
-          <template #default="foo">foo</template>
-        </Comp>`,
-        { onError },
-      )
-      expect(onError.mock.calls[0]).toMatchObject([
-        {
-          code: ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT,
-        },
-      ])
-    })
-
-    test('on component with only dynamic 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"/>`, {
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index cd04c8db89c..fc877ba84b3 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -38,7 +38,10 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
     return processSkip(node, dir, context, (skipNode?: SkipNode) => {
       return () => {
         const codegenNode = node.codegenNode!
-        if (node.tagType === ElementTypes.COMPONENT) {
+        if (
+          node.tagType === ElementTypes.COMPONENT &&
+          node.tag !== 'Teleport'
+        ) {
           if (codegenNode.type === NodeTypes.VNODE_CALL) {
             codegenNode.tag = getVNodeTag(
               context,
@@ -107,7 +110,10 @@ export function processSkip(
   }
 
   let skipNode: SkipNode | undefined
-  if (node.tagType === ElementTypes.ELEMENT) {
+  if (
+    node.tagType === ElementTypes.ELEMENT ||
+    (node.tagType === ElementTypes.COMPONENT && node.tag === 'Teleport')
+  ) {
     const children = node.children
     // if children is empty, create comment node
     const consequent =
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 4929912b6f3..778a31c48fd 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -206,7 +206,7 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test('on component with default slot', () => {
+  test.todo('on component with default slot', () => {
     expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
       "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
@@ -230,7 +230,7 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test('on component with multiple named slot', () => {
+  test.todo('on component with multiple named slot', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
@@ -270,7 +270,7 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test('on component with multiple implicit slot', () => {
+  test.todo('on component with multiple implicit slot', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
@@ -325,10 +325,10 @@ describe('ssr: v-skip', () => {
       ).code,
     ).toMatchInlineSnapshot(`
       "const { resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSkipComponent(_push, _ctx.ok, _push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+        _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
               _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index e7d111299f0..8d9f94fca29 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -10,19 +10,27 @@ import {
 } from '@vue/compiler-core'
 import { processIfBranch } from './ssrVIf'
 import type { SSRTransformContext } from '../ssrCodegenTransform'
-import { SSR_RENDER_SKIP_COMPONENT } from '../runtimeHelpers'
+import {
+  SSR_RENDER_COMPONENT,
+  SSR_RENDER_SKIP_COMPONENT,
+  SSR_RENDER_VNODE,
+} from '../runtimeHelpers'
 
 export const ssrTransformSkip: NodeTransform =
   createStructuralDirectiveTransform('skip', (node, dir, context) => {
     processSkip(node, dir, context)
     return () => {
       if (node.tagType === ElementTypes.COMPONENT && node.ssrCodegenNode) {
-        const { arguments: args, loc } = node.ssrCodegenNode
-        node.ssrCodegenNode = createCallExpression(
-          context.helper(SSR_RENDER_SKIP_COMPONENT),
-          [`_push`, dir.exp!, ...args],
-          loc,
-        )
+        const { callee, arguments: args, loc } = node.ssrCodegenNode
+        if (callee === SSR_RENDER_COMPONENT) {
+          node.ssrCodegenNode = createCallExpression(
+            context.helper(SSR_RENDER_SKIP_COMPONENT),
+            [`_push`, dir.exp!, ...args],
+            loc,
+          )
+        } else if (callee === SSR_RENDER_VNODE) {
+          // TODO
+        }
       }
     }
   })
diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts
index dc7d13a6dfe..6e2d6fcebdc 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -11,6 +11,7 @@ import { warn } from '../warning'
 import type { VNodeTypes } from '../vnode'
 import {
   type ComponentPublicInstance,
+  createCommentVNode,
   defineComponent,
   renderSlot,
 } from '@vue/runtime-core'
@@ -156,7 +157,9 @@ export function resolveSkipComponent(
     ? _comp ||
         (_comp = defineComponent({
           render(this: ComponentPublicInstance) {
-            return renderSlot(this.$slots, 'default')
+            return renderSlot(this.$slots, 'default', undefined, () => [
+              createCommentVNode('v-skip'),
+            ])
           },
         }))
     : Comp

From 7efaafb1c63ee1f41573efac973764ded08553c2 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 09:56:03 +0800
Subject: [PATCH 27/38] wip: analyze slots to find default slot when possible

---
 .../__snapshots__/vSkip.spec.ts.snap          | 203 +++++++++++++++++-
 .../__tests__/transforms/vSkip.spec.ts        | 158 +++++++++-----
 packages/compiler-core/src/errors.ts          |   4 +-
 .../compiler-core/src/transforms/vSkip.ts     |  63 +++++-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   |  68 +++---
 5 files changed, 396 insertions(+), 100 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index a975095208b..5b8456bda97 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -36,33 +36,216 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-skip > transform > on component 1`] = `
+exports[`compiler: v-skip > transform > on Teleport 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, Teleport: _Teleport, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    return (_ctx.ok)
+      ? _createCommentVNode("v-skip", true)
+      : (_openBlock(), _createBlock(_Teleport, {
+          key: 1,
+          to: "target"
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          default: _withCtx(() => ["foo"]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with dynamic slot + default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
+      [_ctx.foo]: _withCtx(() => ["foo"]),
+      default: _withCtx(() => ["default"]),
+      _: 2 /* DYNAMIC */
+    }, 1024 /* DYNAMIC_SLOTS */))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with dynamic slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
+      [_ctx.foo]: _withCtx(() => ["foo"]),
+      _: 2 /* DYNAMIC */
+    }, 1024 /* DYNAMIC_SLOTS */))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with implicit default slot + v-if 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
-    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp)))
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          (_ctx.yes)
+            ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+            : _createCommentVNode("v-if", true)
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          default: _withCtx(() => [
+            (_ctx.yes)
+              ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+              : _createCommentVNode("v-if", true)
+          ]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple implicit slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          _createElementVNode("span"),
+          _createElementVNode("div")
+        ], 64 /* STABLE_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          foo: _withCtx(() => ["foo"]),
+          default: _withCtx(() => [
+            _createElementVNode("span"),
+            _createElementVNode("div")
+          ]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with multiple named slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["default"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
+          default: _withCtx(() => ["default"]),
+          foo: _withCtx(() => ["foo"]),
+          _: 1 /* STABLE */
+        }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component with name default slot + v-if 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+      (_ctx.yes)
+        ? {
+            name: "default",
+            fn: _withCtx(() => ["default"]),
+            key: "0"
+          }
+        : undefined
+    ]), 1024 /* DYNAMIC_SLOTS */))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on component without slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_Comp = _resolveComponent("Comp")
+
+    return (_ctx.ok)
+      ? _createCommentVNode("v-skip", true)
+      : (_openBlock(), _createBlock(_component_Comp, { key: 1 }))
+  }
+}"
+`;
+
+exports[`compiler: v-skip > transform > on dynamic component with default slot 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createElementBlock: _createElementBlock } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.Comp), { key: 1 }, {
+          default: _withCtx(() => ["foo"]),
+          _: 1 /* STABLE */
+        }))
   }
 }"
 `;
 
-exports[`compiler: v-skip > transform > on dynamic component 1`] = `
+exports[`compiler: v-skip > transform > on dynamic component with dynamic slot 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderSlot: _renderSlot, resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, resolveSkipComponent: _resolveSkipComponent } = _Vue
+    const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, createBlock: _createBlock, resolveSkipComponent: _resolveSkipComponent } = _Vue
 
     return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _resolveDynamicComponent(_ctx.Comp)), null, {
-      default: _withCtx(() => [
-        _renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3 /* FORWARDED */
-    }))
+      [_ctx.foo]: _withCtx(() => ["foo"]),
+      _: 2 /* DYNAMIC */
+    }, 1024 /* DYNAMIC_SLOTS */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index c9002fb87ff..a9760b9855f 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -255,28 +255,25 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on component', () => {
+    test('on component without slot', () => {
+      // equivalent to <Comp v-if="ok"/>
       const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`) as {
         root: RootNode
-        node: ComponentNode
+        node: SkipNode
       }
-      expect(node.type).toBe(NodeTypes.ELEMENT)
-      expect(node.tagType).toBe(ElementTypes.COMPONENT)
-      const codegenNode = node.codegenNode! as VNodeCall
-      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
-      const vnodeTag = codegenNode.tag as CallExpression
-      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
-      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
-      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
-        `_ctx.ok`,
-      )
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      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(`Comp`)
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with default slot', () => {
+    test('on component with default slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">foo</Comp>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -294,13 +291,13 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with multiple named slot', () => {
+    test('on component with multiple named slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <template #default>default</template>
           <template #foo>foo</template>
         </Comp>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
@@ -318,14 +315,14 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with multiple implicit slot', () => {
+    test('on component with multiple implicit slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <span/>
           <template #foo>foo</template>
           <div/>
         </Comp>`,
-      )
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(2)
@@ -349,57 +346,98 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with dynamic slot + default slot', () => {
+    test('on component with name default slot + v-if', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <template #[foo]>foo</template>
-          <template #default>default</template>
+          <template v-if="yes" #default>default</template>
         </Comp>`,
+      ) as { root: RootNode; node: ComponentNode }
+      expect(node.type).toBe(NodeTypes.ELEMENT)
+      expect(node.tagType).toBe(ElementTypes.COMPONENT)
+      const codegenNode = node.codegenNode! as VNodeCall
+      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+      const vnodeTag = codegenNode.tag as CallExpression
+      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+        `_ctx.ok`,
       )
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('on component with implicit default slot + v-if', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<Comp v-skip="ok">
+          <span v-if="yes">default</span>
+        </Comp>`,
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
-      expect((node.consequent as IfBranchNode).children.length).toBe(1)
-      expect((node.consequent as IfBranchNode).children[0].type).toBe(
-        NodeTypes.TEXT,
-      )
-      expect(
-        ((node.consequent as IfBranchNode).children[0] as any).content,
-      ).toBe(`default`)
-      expect(node.alternate.children.length).toBe(1)
-      expect((node.alternate.children[0] as ElementNode).tagType).toBe(
-        ElementTypes.COMPONENT,
-      )
-      expect((node.alternate.children[0] as ElementNode).tag).toBe(`Comp`)
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with name default slot + v-if', () => {
+    test('on component with dynamic slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <template v-if="yes" #default>default</template>
+          <template #[foo]>foo</template>
         </Comp>`,
+      ) as { root: RootNode; node: ComponentNode }
+      expect(node.type).toBe(NodeTypes.ELEMENT)
+      expect(node.tagType).toBe(ElementTypes.COMPONENT)
+      const codegenNode = node.codegenNode! as VNodeCall
+      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+      const vnodeTag = codegenNode.tag as CallExpression
+      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+        `_ctx.ok`,
       )
-      expect(node.type).toBe(NodeTypes.SKIP)
-      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
-      expect(node.consequent.type === NodeTypes.JS_CALL_EXPRESSION).toBe(true)
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on component with implicit default slot + v-if', () => {
+    test('on component with dynamic slot + default slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <span v-if="yes">default</span>
+          <template #[foo]>foo</template>
+          <template #default>default</template>
         </Comp>`,
+      ) as { root: RootNode; node: ComponentNode }
+      expect(node.type).toBe(NodeTypes.ELEMENT)
+      expect(node.tagType).toBe(ElementTypes.COMPONENT)
+      const codegenNode = node.codegenNode! as VNodeCall
+      expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
+      const vnodeTag = codegenNode.tag as CallExpression
+      expect(vnodeTag.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect(vnodeTag.callee).toBe(RESOLVE_SKIP_COMPONENT)
+      expect((vnodeTag.arguments[0] as SimpleExpressionNode).content).toBe(
+        `_ctx.ok`,
       )
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('on dynamic component with default slot', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<component :is="Comp" v-skip="ok">foo</component>`,
+      ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      expect((node.consequent as IfBranchNode).children.length).toBe(1)
+      expect((node.consequent as IfBranchNode).children[0].type).toBe(
+        NodeTypes.TEXT,
+      )
+      expect(
+        ((node.consequent as IfBranchNode).children[0] as any).content,
+      ).toBe(`foo`)
+      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(`component`)
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on dynamic component', () => {
+    test('on dynamic component with dynamic slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<component :is="Comp" v-skip="ok">
-          <slot/>
+          <template #[foo]>foo</template>
         </component>`,
       ) as { root: RootNode; node: ComponentNode }
       expect(node.type).toBe(NodeTypes.ELEMENT)
@@ -415,9 +453,18 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test.todo('on Teleport', () => {})
-
-    test.todo('built-in components', () => {})
+    test('on Teleport', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<teleport to="target" v-skip="ok"/>`,
+      ) as { root: RootNode; node: SkipNode }
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      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(`teleport`)
+      expect(generate(root).code).toMatchSnapshot()
+    })
   })
 
   describe('errors', () => {
@@ -432,22 +479,35 @@ describe('compiler: v-skip', () => {
       ])
     })
 
+    test('on <template>', () => {
+      const onError = vi.fn()
+      parseWithSkipTransform(`<template v-skip="ok"/>`, { onError })
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SKIP_MISPLACED,
+        },
+      ])
+    })
+
     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,
+          code: ErrorCodes.X_V_SKIP_MISPLACED,
         },
       ])
     })
 
-    test('on <template>', () => {
+    test('on component without default slot', () => {
       const onError = vi.fn()
-      parseWithSkipTransform(`<template v-skip="ok"/>`, { onError })
+      parseWithSkipTransform(
+        `<Comp v-skip="ok"><template #foo>foo</template></Comp>`,
+        { onError },
+      )
       expect(onError.mock.calls[0]).toMatchObject([
         {
-          code: ErrorCodes.X_V_SKIP_ON_TEMPLATE,
+          code: ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT,
         },
       ])
     })
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 683981143e2..8bd6df968e3 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -91,7 +91,7 @@ export enum ErrorCodes {
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
   X_V_SKIP_NO_EXPRESSION,
-  X_V_SKIP_ON_TEMPLATE,
+  X_V_SKIP_MISPLACED,
   X_V_SKIP_UNEXPECTED_SLOT,
   X_V_SKIP_WITH_V_FOR,
 
@@ -184,7 +184,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
   [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
   [ErrorCodes.X_V_SKIP_NO_EXPRESSION]: `v-skip is missing expression.`,
-  [ErrorCodes.X_V_SKIP_ON_TEMPLATE]: `v-skip cannot be used on <template> or <slot> tags.`,
+  [ErrorCodes.X_V_SKIP_MISPLACED]: `v-skip can only be used on elements or components.`,
   [ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT]: `v-skip requires the component to have a default slot without slot props`,
   [ErrorCodes.X_V_SKIP_WITH_V_FOR]: `v-skip with v-for is not supported.`,
 
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index fc877ba84b3..3495a00b104 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -7,6 +7,7 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
+  type TemplateChildNode,
   type VNodeCall,
   createCallExpression,
   createConditionalExpression,
@@ -22,10 +23,10 @@ import {
   ErrorCodes,
   RESOLVE_SKIP_COMPONENT,
   WITH_MEMO,
+  buildSlots,
   createCompilerError,
   findDir,
   findProp,
-  isSlotOutlet,
   processExpression,
 } from '@vue/compiler-core'
 import { createCodegenNodeForBranch } from './vIf'
@@ -38,10 +39,7 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
     return processSkip(node, dir, context, (skipNode?: SkipNode) => {
       return () => {
         const codegenNode = node.codegenNode!
-        if (
-          node.tagType === ElementTypes.COMPONENT &&
-          node.tag !== 'Teleport'
-        ) {
+        if (!skipNode) {
           if (codegenNode.type === NodeTypes.VNODE_CALL) {
             codegenNode.tag = getVNodeTag(
               context,
@@ -85,15 +83,22 @@ export function processSkip(
 ): (() => void) | undefined {
   const loc = dir.exp ? dir.exp.loc : node.loc
   if (
-    (node.type === NodeTypes.ELEMENT && node.tag === 'template') ||
-    isSlotOutlet(node)
+    // v-skip is not allowed on <template> or <slot>
+    !(
+      node.type === NodeTypes.ELEMENT &&
+      (node.tagType === ElementTypes.ELEMENT ||
+        node.tagType === ElementTypes.COMPONENT) &&
+      node.tag !== 'template' &&
+      node.tag !== 'slot'
+    )
   ) {
-    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_ON_TEMPLATE, loc))
+    context.onError(createCompilerError(ErrorCodes.X_V_SKIP_MISPLACED, loc))
     return
   }
 
   if (findDir(node, 'for')) {
     context.onError(createCompilerError(ErrorCodes.X_V_SKIP_WITH_V_FOR, loc))
+    return
   }
 
   if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
@@ -109,12 +114,48 @@ export function processSkip(
     validateBrowserExpression(dir.exp as SimpleExpressionNode, context)
   }
 
-  let skipNode: SkipNode | undefined
+  // element will be processed as a skip node
+  // - native element
+  // - teleport, since it has children
+  // - component without dynamic slots
+  let processAsSkipNode = false
+  const isComponent = node.tagType === ElementTypes.COMPONENT
+  let children: TemplateChildNode[] = []
   if (
     node.tagType === ElementTypes.ELEMENT ||
-    (node.tagType === ElementTypes.COMPONENT && node.tag === 'Teleport')
+    (isComponent && node.tag === 'Teleport')
   ) {
-    const children = node.children
+    processAsSkipNode = true
+    children = node.children
+  } else if (isComponent) {
+    const { slots, hasDynamicSlots } = buildSlots(
+      node,
+      context,
+      undefined,
+      true,
+    )
+    // find default slot if not has dynamic slots
+    if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+      processAsSkipNode = true
+      const prop = slots.properties.find(
+        p =>
+          p.type === NodeTypes.JS_PROPERTY &&
+          p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+          p.key.content === 'default' &&
+          p.value.params === undefined,
+      )
+      if (prop) {
+        children = prop.value.returns as TemplateChildNode[]
+      } else {
+        context.onError(
+          createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+        )
+      }
+    }
+  }
+
+  let skipNode: SkipNode | undefined
+  if (processAsSkipNode) {
     // if children is empty, create comment node
     const consequent =
       children.length !== 0
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 778a31c48fd..1a8aed40c22 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -195,13 +195,17 @@ describe('ssr: v-skip', () => {
 
   test('on component', () => {
     expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent } = require("vue")
+      "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
+        if (_ctx.foo) {
+          _createCommentVNode("v-skip", true)
+        } else {
+          _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
+        }
       }"
     `)
   })
@@ -324,22 +328,26 @@ describe('ssr: v-skip', () => {
       </component>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
       const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
-          default: _withCtx((_, _push, _parent, _scopeId) => {
-            if (_push) {
-              _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
-            } else {
-              return [
-                _renderSlot(_ctx.$slots, "default")
-              ]
-            }
-          }),
-          _: 3 /* FORWARDED */
-        }), _parent)
+        if (_ctx.ok) {
+          _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+        } else {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+              } else {
+                return [
+                  _renderSlot(_ctx.$slots, "default")
+                ]
+              }
+            }),
+            _: 3 /* FORWARDED */
+          }), _parent)
+        }
       }"
     `)
   })
@@ -351,25 +359,29 @@ describe('ssr: v-skip', () => {
       <Comp v-skip="ok"><span/></Comp>
     `).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createVNode: _createVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
         _push(\`<!--[--><div></div>\`)
-        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
-          default: _withCtx((_, _push, _parent, _scopeId) => {
-            if (_push) {
-              _push(\`<span\${_scopeId}></span>\`)
-            } else {
-              return [
-                _createVNode("span")
-              ]
-            }
-          }),
-          _: 1 /* STABLE */
-        }, _parent))
+        if (_ctx.ok) {
+          _push(\`<span></span>\`)
+        } else {
+          _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`<span\${_scopeId}></span>\`)
+              } else {
+                return [
+                  _createVNode("span")
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
         _push(\`<!--]-->\`)
       }"
     `)

From c0f00d290f3f068e523edc0b8eafe9fda3712c9e Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 10:42:12 +0800
Subject: [PATCH 28/38] wip: add ssrRenderSkipVNode

---
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   |  8 ++--
 packages/compiler-ssr/src/runtimeHelpers.ts   |  2 +
 .../compiler-ssr/src/transforms/ssrVSkip.ts   | 39 ++++++++++++-------
 .../src/helpers/ssrRenderSkipComponent.ts     | 24 ++++++++++++
 packages/server-renderer/src/internal.ts      |  5 ++-
 5 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 1a8aed40c22..0f290ed9a6b 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -196,7 +196,7 @@ describe('ssr: v-skip', () => {
   test('on component', () => {
     expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
       "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -204,7 +204,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.foo) {
           _createCommentVNode("v-skip", true)
         } else {
-          _push(_ssrRenderSkipComponent(_push, _ctx.foo, _component_Comp, _attrs, null, _parent))
+          _push(_ssrRenderComponent(_component_Comp, _attrs, null, _parent))
         }
       }"
     `)
@@ -360,7 +360,7 @@ describe('ssr: v-skip', () => {
     `).code,
     ).toMatchInlineSnapshot(`
       "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createVNode: _createVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -369,7 +369,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _push(\`<span></span>\`)
         } else {
-          _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
+          _push(_ssrRenderComponent(_component_Comp, null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 _push(\`<span\${_scopeId}></span>\`)
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index bc1e9e44e98..6130bdd216a 100644
--- a/packages/compiler-ssr/src/runtimeHelpers.ts
+++ b/packages/compiler-ssr/src/runtimeHelpers.ts
@@ -2,6 +2,7 @@ import { registerRuntimeHelpers } from '@vue/compiler-dom'
 
 export const SSR_INTERPOLATE: unique symbol = Symbol(`ssrInterpolate`)
 export const SSR_RENDER_VNODE: unique symbol = Symbol(`ssrRenderVNode`)
+export const SSR_RENDER_SKIP_VNODE: unique symbol = Symbol(`ssrRenderSkipVNode`)
 export const SSR_RENDER_COMPONENT: unique symbol = Symbol(`ssrRenderComponent`)
 export const SSR_RENDER_SKIP_COMPONENT: unique symbol = Symbol(
   `ssrRenderSkipComponent`,
@@ -34,6 +35,7 @@ export const SSR_GET_DIRECTIVE_PROPS: unique symbol =
 export const ssrHelpers: Record<symbol, string> = {
   [SSR_INTERPOLATE]: `ssrInterpolate`,
   [SSR_RENDER_VNODE]: `ssrRenderVNode`,
+  [SSR_RENDER_SKIP_VNODE]: `ssrRenderSkipVNode`,
   [SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
   [SSR_RENDER_SKIP_COMPONENT]: `ssrRenderSkipComponent`,
   [SSR_RENDER_SLOT]: `ssrRenderSlot`,
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index 8d9f94fca29..14fce93e107 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -1,5 +1,5 @@
 import {
-  ElementTypes,
+  type ComponentNode,
   type NodeTransform,
   NodeTypes,
   type SkipNode,
@@ -13,26 +13,39 @@ import type { SSRTransformContext } from '../ssrCodegenTransform'
 import {
   SSR_RENDER_COMPONENT,
   SSR_RENDER_SKIP_COMPONENT,
+  SSR_RENDER_SKIP_VNODE,
   SSR_RENDER_VNODE,
 } from '../runtimeHelpers'
 
 export const ssrTransformSkip: NodeTransform =
   createStructuralDirectiveTransform('skip', (node, dir, context) => {
-    processSkip(node, dir, context)
-    return () => {
-      if (node.tagType === ElementTypes.COMPONENT && node.ssrCodegenNode) {
-        const { callee, arguments: args, loc } = node.ssrCodegenNode
-        if (callee === SSR_RENDER_COMPONENT) {
-          node.ssrCodegenNode = createCallExpression(
-            context.helper(SSR_RENDER_SKIP_COMPONENT),
-            [`_push`, dir.exp!, ...args],
+    return processSkip(node, dir, context, (skipNode?: SkipNode) => {
+      return () => {
+        // for non-skipNode, rewrite the ssrCodegenNode
+        // `ssrRenderComponent` -> `ssrRenderSkipComponent`
+        // `ssrRenderVNode` -> `ssrRenderSkipVNode`
+        if (!skipNode && node && (node as ComponentNode).ssrCodegenNode) {
+          const {
+            callee,
+            arguments: args,
             loc,
-          )
-        } else if (callee === SSR_RENDER_VNODE) {
-          // TODO
+          } = (node as ComponentNode).ssrCodegenNode!
+          if (callee === SSR_RENDER_COMPONENT) {
+            ;(node as ComponentNode).ssrCodegenNode = createCallExpression(
+              context.helper(SSR_RENDER_SKIP_COMPONENT),
+              [`_push`, dir.exp!, ...args],
+              loc,
+            )
+          } else if (callee === SSR_RENDER_VNODE) {
+            ;(node as ComponentNode).ssrCodegenNode = createCallExpression(
+              context.helper(SSR_RENDER_SKIP_VNODE),
+              [dir.exp!, ...args],
+              loc,
+            )
+          }
         }
       }
-    }
+    })
   })
 
 export function ssrProcessSkip(
diff --git a/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
index 580cadc0580..d84a309cff9 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
@@ -2,6 +2,7 @@ import {
   type Component,
   type ComponentInternalInstance,
   type Slots,
+  type VNode,
   createVNode,
 } from 'vue'
 import {
@@ -11,6 +12,7 @@ import {
   renderComponentVNode,
 } from '../render'
 import { type SSRSlots, ssrRenderSlot } from './ssrRenderSlot'
+import { ssrRenderVNode } from '@vue/server-renderer'
 
 export function ssrRenderSkipComponent(
   push: PushFn,
@@ -40,3 +42,25 @@ export function ssrRenderSkipComponent(
     slotScopeId,
   )
 }
+
+export function ssrRenderSkipVNode(
+  isSkip: boolean,
+  push: PushFn,
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance,
+  slotScopeId?: string,
+): void {
+  if (isSkip) {
+    ssrRenderSlot(
+      vnode.children as Slots,
+      'default',
+      {},
+      null,
+      push,
+      parentComponent,
+      slotScopeId,
+    )
+  } else {
+    ssrRenderVNode(push, vnode, parentComponent, slotScopeId)
+  }
+}
diff --git a/packages/server-renderer/src/internal.ts b/packages/server-renderer/src/internal.ts
index 744f0a59306..b9ee3c406c8 100644
--- a/packages/server-renderer/src/internal.ts
+++ b/packages/server-renderer/src/internal.ts
@@ -1,7 +1,10 @@
 // internal runtime helpers
 export { renderVNode as ssrRenderVNode } from './render'
 export { ssrRenderComponent } from './helpers/ssrRenderComponent'
-export { ssrRenderSkipComponent } from './helpers/ssrRenderSkipComponent'
+export {
+  ssrRenderSkipComponent,
+  ssrRenderSkipVNode,
+} from './helpers/ssrRenderSkipComponent'
 export { ssrRenderSlot, ssrRenderSlotInner } from './helpers/ssrRenderSlot'
 export { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 export {

From 7031b59df504c1101b9c27ec3921975dd4b154a7 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 11:11:19 +0800
Subject: [PATCH 29/38] wip: add more ssr test

---
 .../__snapshots__/vSkip.spec.ts.snap          |   2 +-
 .../__tests__/transforms/vSkip.spec.ts        |   2 +-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 303 ++++++++++++++----
 3 files changed, 241 insertions(+), 66 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index 5b8456bda97..b848eb37d48 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -134,7 +134,7 @@ return function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler: v-skip > transform > on component with multiple implicit slot 1`] = `
+exports[`compiler: v-skip > transform > on component with multiple implicit default slot 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index a9760b9855f..27a681630e7 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -315,7 +315,7 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
-    test('on component with multiple implicit slot', () => {
+    test('on component with multiple implicit default slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <span/>
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 0f290ed9a6b..23ba0c7f04c 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -193,7 +193,8 @@ describe('ssr: v-skip', () => {
       `)
   })
 
-  test('on component', () => {
+  test('on component without slot', () => {
+    // equivalent to <Comp v-if="ok"/>
     expect(compile(`<Comp v-skip="foo"/>`).code).toMatchInlineSnapshot(`
       "const { withCtx: _withCtx, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
@@ -210,31 +211,35 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test.todo('on component with default slot', () => {
+  test('on component with default slot', () => {
     expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
-        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
-          default: _withCtx((_, _push, _parent, _scopeId) => {
-            if (_push) {
-              _push(\`foo\`)
-            } else {
-              return [
-                _createTextVNode("foo")
-              ]
-            }
-          }),
-          _: 1 /* STABLE */
-        }, _parent))
+        if (_ctx.ok) {
+          _push(\`<!--[-->foo<!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
       }"
     `)
   })
 
-  test.todo('on component with multiple named slot', () => {
+  test('on component with multiple named slot', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
@@ -243,23 +248,153 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[-->default<!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`default\`)
+              } else {
+                return [
+                  _createTextVNode("default")
+                ]
+              }
+            }),
+            foo: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on component with multiple implicit default slot', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <span/>
+          <template #foo>foo</template>
+          <div/>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[--><span></span><div></div><!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
+            foo: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`foo\`)
+              } else {
+                return [
+                  _createTextVNode("foo")
+                ]
+              }
+            }),
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`<span\${
+                  _scopeId
+                }></span><div\${
+                  _scopeId
+                }></div>\`)
+              } else {
+                return [
+                  _createVNode("span"),
+                  _createVNode("div")
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
+    `)
+  })
+
+  test('on component with name default slot + v-if', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <template v-if="yes" #default>default</template>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
+          (_ctx.yes)
+            ? {
+                name: "default",
+                fn: _withCtx((_, _push, _parent, _scopeId) => {
+                  if (_push) {
+                    _push(\`default\`)
+                  } else {
+                    return [
+                      _createTextVNode("default")
+                    ]
+                  }
+                }),
+                key: "0"
+              }
+            : undefined
+        ]), _parent))
+      }"
+    `)
+  })
+
+  test.todo('on component with implicit default slot + v-if', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <span v-if="yes">default</span>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+    `)
+  })
+
+  test('on component with dynamic slot', () => {
+    expect(
+      compile(
+        `<Comp v-skip="ok">
+          <template #[foo]>foo</template>
+        </Comp>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
         _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
-          default: _withCtx((_, _push, _parent, _scopeId) => {
-            if (_push) {
-              _push(\`default\`)
-            } else {
-              return [
-                _createTextVNode("default")
-              ]
-            }
-          }),
-          foo: _withCtx((_, _push, _parent, _scopeId) => {
+          [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
               _push(\`foo\`)
             } else {
@@ -268,30 +403,29 @@ describe('ssr: v-skip', () => {
               ]
             }
           }),
-          _: 1 /* STABLE */
+          _: 2 /* DYNAMIC */
         }, _parent))
       }"
     `)
   })
 
-  test.todo('on component with multiple implicit slot', () => {
+  test('on component with dynamic slot + default slot', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <span/>
-          <template #foo>foo</template>
-          <div/>
+          <template #[foo]>foo</template>
+          <template #default>default</template>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
       const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
         _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
-          foo: _withCtx((_, _push, _parent, _scopeId) => {
+          [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
               _push(\`foo\`)
             } else {
@@ -302,57 +436,98 @@ describe('ssr: v-skip', () => {
           }),
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`<span\${
-                _scopeId
-              }></span><div\${
-                _scopeId
-              }></div>\`)
+              _push(\`default\`)
             } else {
               return [
-                _createVNode("span"),
-                _createVNode("div")
+                _createTextVNode("default")
               ]
             }
           }),
-          _: 1 /* STABLE */
+          _: 2 /* DYNAMIC */
         }, _parent))
       }"
     `)
   })
 
-  test('on dynamic component', () => {
+  test('on dynamic component with default slot', () => {
+    expect(compile(`<component :is="Comp" v-skip="ok">foo</component>`).code)
+      .toMatchInlineSnapshot(`
+        "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.ok) {
+            _push(\`<!--[-->foo<!--]-->\`)
+          } else {
+            _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+              default: _withCtx((_, _push, _parent, _scopeId) => {
+                if (_push) {
+                  _push(\`foo\`)
+                } else {
+                  return [
+                    _createTextVNode("foo")
+                  ]
+                }
+              }),
+              _: 1 /* STABLE */
+            }), _parent)
+          }
+        }"
+      `)
+  })
+
+  test('on dynamic component with dynamic slot', () => {
     expect(
-      compile(
-        `<component :is="Comp" v-skip="ok">
-        <slot/>
-      </component>`,
-      ).code,
+      compile(`
+      <component :is="Comp" v-skip="ok">
+          <template #[foo]>foo</template>
+        </component>
+      `).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderVNode: _ssrRenderVNode, ssrRenderSkipVNode: _ssrRenderSkipVNode } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _ssrRenderSkipVNode(_ctx.ok, _push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+          [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
+            if (_push) {
+              _push(\`foo\`)
+            } else {
+              return [
+                _createTextVNode("foo")
+              ]
+            }
+          }),
+          _: 2 /* DYNAMIC */
+        }), _parent)
+      }"
+    `)
+  })
+
+  test('on Teleport', () => {
+    expect(
+      compile(`<teleport to="target" v-skip="ok">
+          <div>foo</div>
+        </teleport>`).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, renderSlot: _renderSlot, createVNode: _createVNode } = require("vue")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+      "const { withCtx: _withCtx } = require("vue")
+      const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.ok) {
-          _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
+          _push(\`<div>foo</div>\`)
         } else {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
-              } else {
-                return [
-                  _renderSlot(_ctx.$slots, "default")
-                ]
-              }
-            }),
-            _: 3 /* FORWARDED */
-          }), _parent)
+          _ssrRenderTeleport(_push, (_push) => {
+            _push(\`<div>foo</div>\`)
+          }, "target", false, _parent)
         }
       }"
     `)
   })
 
   test('fragment with component v-skip', () => {
+    // here is verified that when root is a fragment, `_attrs` won't be injected
+    // into skip node's alternate branch
     expect(
       compile(`
       <div></div>

From 46825ca661d4a737e95dc51fffb28c227ba40185 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 11:30:00 +0800
Subject: [PATCH 30/38] wip: add more test

---
 .../__snapshots__/vSkip.spec.ts.snap          | 16 ++++++++++++++
 .../__tests__/transforms/vSkip.spec.ts        | 22 +++++++++++++++++++
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index b848eb37d48..15887f6d80a 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -389,3 +389,19 @@ return function render(_ctx, _cache) {
   }
 }"
 `;
+
+exports[`compiler: v-skip > transform > with v-memo 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, withMemo: _withMemo } = _Vue
+
+    return (_ctx.ok)
+      ? (_openBlock(), _createElementBlock("span", { key: 0 }))
+      : _withMemo([1], () => (_openBlock(), _createElementBlock("div", { key: 1 }, [
+          (_openBlock(), _createElementBlock("span", { key: 0 }))
+        ])), _cache, 0)
+  }
+}"
+`;
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 27a681630e7..33114486d73 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -13,6 +13,7 @@ import {
   type SimpleExpressionNode,
   type SkipNode,
   type VNodeCall,
+  WITH_MEMO,
   generate,
   baseParse as parse,
   transform,
@@ -23,6 +24,7 @@ import { transformIf } from '../../src/transforms/vIf'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import { transformSkip } from '../../src/transforms/vSkip'
+import { transformMemo } from '../../src/transforms/vMemo'
 
 export function parseWithSkipTransform(
   template: string,
@@ -36,6 +38,7 @@ export function parseWithSkipTransform(
     nodeTransforms: [
       transformIf,
       transformSkip,
+      transformMemo,
       transformFor,
       transformExpression,
       transformSlotOutlet,
@@ -255,6 +258,25 @@ describe('compiler: v-skip', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
+    test('with v-memo', () => {
+      const { root, node } = parseWithSkipTransform(
+        `<div v-skip="ok" v-memo="[1]"><span/></div>`,
+      ) as {
+        root: RootNode
+        node: SkipNode
+      }
+      expect(node.type).toBe(NodeTypes.SKIP)
+      expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
+      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`)
+      const codegenNode = (node.alternate.children[0] as ElementNode)
+        .codegenNode!
+      expect(codegenNode.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+      expect((codegenNode as any).callee).toBe(WITH_MEMO)
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
     test('on component without slot', () => {
       // equivalent to <Comp v-if="ok"/>
       const { root, node } = parseWithSkipTransform(`<Comp v-skip="ok"/>`) as {
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index 14fce93e107..7f6d101ee80 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -24,7 +24,7 @@ export const ssrTransformSkip: NodeTransform =
         // for non-skipNode, rewrite the ssrCodegenNode
         // `ssrRenderComponent` -> `ssrRenderSkipComponent`
         // `ssrRenderVNode` -> `ssrRenderSkipVNode`
-        if (!skipNode && node && (node as ComponentNode).ssrCodegenNode) {
+        if (!skipNode && (node as ComponentNode).ssrCodegenNode) {
           const {
             callee,
             arguments: args,

From 80b32bf20acddb10aa7541fccc92c3baa03bf408 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 16:02:53 +0800
Subject: [PATCH 31/38] wip: fix on component slot + v-if in ssr

---
 .../compiler-core/src/transforms/vSkip.ts     |  8 +++-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 37 ++++++++++++++++++-
 .../src/transforms/ssrTransformComponent.ts   | 16 +-------
 packages/shared/src/general.ts                | 14 +++++++
 4 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 3495a00b104..b9e5bcf7de4 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -32,6 +32,7 @@ import {
 import { createCodegenNodeForBranch } from './vIf'
 import { validateBrowserExpression } from '../validateExpression'
 import { cloneLoc } from '../parser'
+import { clone } from '@vue/shared'
 
 export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
   'skip',
@@ -134,7 +135,7 @@ export function processSkip(
       undefined,
       true,
     )
-    // find default slot if not has dynamic slots
+    // find default slot without slot props if not has dynamic slots
     if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
       processAsSkipNode = true
       const prop = slots.properties.find(
@@ -145,7 +146,10 @@ export function processSkip(
           p.value.params === undefined,
       )
       if (prop) {
-        children = prop.value.returns as TemplateChildNode[]
+        const slotNode = prop.value.returns as TemplateChildNode[]
+        // clone the slot node to avoid mutating the original one, since it
+        // will be transformed again in ssr slot vnode fallback
+        children = context.inSSR ? clone(slotNode) : slotNode
       } else {
         context.onError(
           createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 23ba0c7f04c..2a177711bbc 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -368,7 +368,7 @@ describe('ssr: v-skip', () => {
     `)
   })
 
-  test.todo('on component with implicit default slot + v-if', () => {
+  test('on component with implicit default slot + v-if', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
@@ -376,6 +376,41 @@ describe('ssr: v-skip', () => {
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Comp = _resolveComponent("Comp")
+
+        if (_ctx.ok) {
+          _push(\`<!--[-->\`)
+          if (_ctx.yes) {
+            _push(\`<span>default</span>\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+          _push(\`<!--]-->\`)
+        } else {
+          _push(_ssrRenderComponent(_component_Comp, _attrs, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                if (_ctx.yes) {
+                  _push(\`<span\${_scopeId}>default</span>\`)
+                } else {
+                  _push(\`<!---->\`)
+                }
+              } else {
+                return [
+                  (_ctx.yes)
+                    ? (_openBlock(), _createBlock("span", { key: 0 }, "default"))
+                    : _createCommentVNode("v-if", true)
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }, _parent))
+        }
+      }"
     `)
   })
 
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index cad1ee81028..867d61d9605 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -55,7 +55,7 @@ import {
   ssrProcessTransitionGroup,
   ssrTransformTransitionGroup,
 } from './ssrTransformTransitionGroup'
-import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
+import { clone, extend, isObject, isSymbol } from '@vue/shared'
 import { buildSSRProps } from './ssrTransformElement'
 import {
   ssrProcessTransition,
@@ -370,17 +370,3 @@ function subTransform(
   //   node/client branches
   // - hoists are not enabled for the client branch here
 }
-
-function clone(v: any): any {
-  if (isArray(v)) {
-    return v.map(clone)
-  } else if (isPlainObject(v)) {
-    const res: any = {}
-    for (const key in v) {
-      res[key] = clone(v[key as keyof typeof v])
-    }
-    return res
-  } else {
-    return v
-  }
-}
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index d5b5e0b942d..ee8e98564db 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -217,3 +217,17 @@ export function genCacheKey(source: string, options: any): string {
     )
   )
 }
+
+export function clone(v: any): any {
+  if (isArray(v)) {
+    return v.map(clone)
+  } else if (isPlainObject(v)) {
+    const res: any = {}
+    for (const key in v) {
+      res[key] = clone(v[key as keyof typeof v])
+    }
+    return res
+  } else {
+    return v
+  }
+}

From ac55a02d2ba17f1ce84d7ae667bb86c1d572e1cd Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 26 Jan 2025 16:23:46 +0800
Subject: [PATCH 32/38] test: make test pass

---
 .../server-renderer/src/helpers/ssrRenderSkipComponent.ts     | 2 +-
 packages/server-renderer/src/internal.ts                      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
index d84a309cff9..bc36f385fd6 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSkipComponent.ts
@@ -10,9 +10,9 @@ import {
   type PushFn,
   type SSRBuffer,
   renderComponentVNode,
+  renderVNode as ssrRenderVNode,
 } from '../render'
 import { type SSRSlots, ssrRenderSlot } from './ssrRenderSlot'
-import { ssrRenderVNode } from '@vue/server-renderer'
 
 export function ssrRenderSkipComponent(
   push: PushFn,
diff --git a/packages/server-renderer/src/internal.ts b/packages/server-renderer/src/internal.ts
index b9ee3c406c8..7cdf2cdcd03 100644
--- a/packages/server-renderer/src/internal.ts
+++ b/packages/server-renderer/src/internal.ts
@@ -1,12 +1,12 @@
 // internal runtime helpers
 export { renderVNode as ssrRenderVNode } from './render'
 export { ssrRenderComponent } from './helpers/ssrRenderComponent'
+export { ssrRenderSlot, ssrRenderSlotInner } from './helpers/ssrRenderSlot'
+export { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 export {
   ssrRenderSkipComponent,
   ssrRenderSkipVNode,
 } from './helpers/ssrRenderSkipComponent'
-export { ssrRenderSlot, ssrRenderSlotInner } from './helpers/ssrRenderSlot'
-export { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 export {
   ssrRenderClass,
   ssrRenderStyle,

From f4b04986ae22f922bec5fc09c5b0da522f5133b4 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 27 Jan 2025 08:52:53 +0800
Subject: [PATCH 33/38] chore: tweaks comments

---
 packages/compiler-core/src/transforms/vSkip.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index b9e5bcf7de4..569e04958fc 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -147,8 +147,7 @@ export function processSkip(
       )
       if (prop) {
         const slotNode = prop.value.returns as TemplateChildNode[]
-        // clone the slot node to avoid mutating the original one, since it
-        // will be transformed again in ssr slot vnode fallback
+        // using the cloned node for ssr VNode-based slot
         children = context.inSSR ? clone(slotNode) : slotNode
       } else {
         context.onError(

From 2328f91ef76d2cb95e9cfd1cba5e7b8bbef4c5db Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 27 Jan 2025 09:15:51 +0800
Subject: [PATCH 34/38] chore: update

---
 .../compiler-core/src/transforms/vSkip.ts     | 105 ++++++++++--------
 .../compiler-ssr/src/transforms/ssrVSkip.ts   |  11 +-
 2 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 569e04958fc..9d0f11763bb 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -1,4 +1,5 @@
 import {
+  type ComponentNode,
   type DirectiveNode,
   type ElementNode,
   ElementTypes,
@@ -7,6 +8,7 @@ import {
   NodeTypes,
   type SimpleExpressionNode,
   type SkipNode,
+  type SourceLocation,
   type TemplateChildNode,
   type VNodeCall,
   createCallExpression,
@@ -60,14 +62,11 @@ export const transformSkip: NodeTransform = createStructuralDirectiveTransform(
           }
         } else {
           const { consequent, alternate, test } = skipNode!
-          const consequentNode =
-            consequent.type === NodeTypes.IF_BRANCH
-              ? createCodegenNodeForBranch(consequent, 0, context)
-              : consequent
-
           skipNode!.codegenNode = createConditionalExpression(
             test,
-            consequentNode,
+            consequent.type === NodeTypes.IF_BRANCH
+              ? createCodegenNodeForBranch(consequent, 0, context)
+              : consequent,
             createCodegenNodeForBranch(alternate, 1, context),
           )
         }
@@ -129,32 +128,13 @@ export function processSkip(
     processAsSkipNode = true
     children = node.children
   } else if (isComponent) {
-    const { slots, hasDynamicSlots } = buildSlots(
+    ;({ processAsSkipNode, children } = resolveDefaultSlot(
       node,
       context,
-      undefined,
-      true,
-    )
-    // find default slot without slot props if not has dynamic slots
-    if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      processAsSkipNode = true
-      const prop = slots.properties.find(
-        p =>
-          p.type === NodeTypes.JS_PROPERTY &&
-          p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-          p.key.content === 'default' &&
-          p.value.params === undefined,
-      )
-      if (prop) {
-        const slotNode = prop.value.returns as TemplateChildNode[]
-        // using the cloned node for ssr VNode-based slot
-        children = context.inSSR ? clone(slotNode) : slotNode
-      } else {
-        context.onError(
-          createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
-        )
-      }
-    }
+      processAsSkipNode,
+      children,
+      loc,
+    ))
   }
 
   let skipNode: SkipNode | undefined
@@ -162,40 +142,73 @@ export function processSkip(
     // if children is empty, create comment node
     const consequent =
       children.length !== 0
-        ? ({
-            type: NodeTypes.IF_BRANCH,
-            loc: node.loc,
-            condition: undefined,
-            children,
-            userKey: findProp(node, `key`),
-          } as IfBranchNode)
+        ? createBranchNode(node, node.loc, children)
         : createCallExpression(context.helper(CREATE_COMMENT), [
             __DEV__ ? '"v-skip"' : '""',
             'true',
           ])
 
-    const alternate: IfBranchNode = {
-      type: NodeTypes.IF_BRANCH,
-      loc: node.loc,
-      condition: undefined,
-      children: [node],
-      userKey: findProp(node, `key`),
-    }
-
     skipNode = {
       type: NodeTypes.SKIP,
       loc: cloneLoc(node.loc),
       test: dir.exp,
       consequent,
-      alternate,
+      alternate: createBranchNode(node, node.loc, [node]),
       newline: true,
     }
+
     context.replaceNode(skipNode)
   }
 
   if (processCodegen) return processCodegen(skipNode)
 }
 
+function resolveDefaultSlot(
+  node: ComponentNode,
+  context: TransformContext,
+  processAsSkipNode: boolean,
+  children: TemplateChildNode[],
+  loc: SourceLocation,
+) {
+  const { slots, hasDynamicSlots } = buildSlots(node, context, undefined, true)
+  // find default slot without slot props if not has dynamic slots
+  if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+    processAsSkipNode = true
+    const prop = slots.properties.find(
+      p =>
+        p.type === NodeTypes.JS_PROPERTY &&
+        p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+        p.key.content === 'default' &&
+        p.value.params === undefined,
+    )
+    if (prop) {
+      const slotNode = prop.value.returns as TemplateChildNode[]
+      // using the cloned node for ssr VNode-based slot
+      children = context.inSSR ? clone(slotNode) : slotNode
+    } else {
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+      )
+    }
+  }
+
+  return { processAsSkipNode, children }
+}
+
+function createBranchNode(
+  node: ElementNode,
+  loc: SourceLocation,
+  children: TemplateChildNode[],
+): IfBranchNode {
+  return {
+    type: NodeTypes.IF_BRANCH,
+    loc,
+    condition: undefined,
+    children,
+    userKey: findProp(node, `key`),
+  }
+}
+
 function getVNodeTag(
   context: TransformContext,
   exp: ExpressionNode,
diff --git a/packages/compiler-ssr/src/transforms/ssrVSkip.ts b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
index 7f6d101ee80..c6e53d66ebd 100644
--- a/packages/compiler-ssr/src/transforms/ssrVSkip.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVSkip.ts
@@ -53,16 +53,11 @@ export function ssrProcessSkip(
   context: SSRTransformContext,
 ): void {
   const { consequent, alternate, test } = node
-
-  // if consequent is an if branch, process it as well
-  const consequentNode =
-    consequent.type === NodeTypes.IF_BRANCH
-      ? processIfBranch(consequent, context)
-      : consequent
-
   const ifStatement = createIfStatement(
     test,
-    consequentNode,
+    consequent.type === NodeTypes.IF_BRANCH
+      ? processIfBranch(consequent, context)
+      : consequent,
     processIfBranch(alternate, context),
   )
   context.pushStatement(ifStatement)

From c3cb610072457a31637e2142ed797f9192442cff Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 27 Jan 2025 09:35:14 +0800
Subject: [PATCH 35/38] chore: update

---
 packages/compiler-core/src/ast.ts             |  2 +-
 .../compiler-core/src/transforms/vSkip.ts     | 41 ++++++++-----------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index d2402331184..3d09dc9691e 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -416,7 +416,7 @@ export interface SkipNode extends Node {
   consequent: IfBranchNode | CallExpression
   alternate: IfBranchNode
   newline: boolean
-  codegenNode?: ConditionalExpression
+  codegenNode: ConditionalExpression | undefined
 }
 
 export interface ConditionalExpression extends Node {
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index 9d0f11763bb..d4436a38e10 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -128,13 +128,18 @@ export function processSkip(
     processAsSkipNode = true
     children = node.children
   } else if (isComponent) {
-    ;({ processAsSkipNode, children } = resolveDefaultSlot(
-      node,
-      context,
-      processAsSkipNode,
-      children,
-      loc,
-    ))
+    const { hasDynamicSlots, defaultSlot } = resolveDefaultSlot(node, context)
+    if (!hasDynamicSlots) {
+      if (defaultSlot) {
+        processAsSkipNode = true
+        // using the cloned node for ssr VNode-based slot
+        children = context.inSSR ? clone(defaultSlot) : defaultSlot
+      } else {
+        context.onError(
+          createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
+        )
+      }
+    }
   }
 
   let skipNode: SkipNode | undefined
@@ -155,6 +160,7 @@ export function processSkip(
       consequent,
       alternate: createBranchNode(node, node.loc, [node]),
       newline: true,
+      codegenNode: undefined,
     }
 
     context.replaceNode(skipNode)
@@ -163,17 +169,11 @@ export function processSkip(
   if (processCodegen) return processCodegen(skipNode)
 }
 
-function resolveDefaultSlot(
-  node: ComponentNode,
-  context: TransformContext,
-  processAsSkipNode: boolean,
-  children: TemplateChildNode[],
-  loc: SourceLocation,
-) {
+function resolveDefaultSlot(node: ComponentNode, context: TransformContext) {
+  let defaultSlot: TemplateChildNode[] | undefined = undefined
   const { slots, hasDynamicSlots } = buildSlots(node, context, undefined, true)
   // find default slot without slot props if not has dynamic slots
   if (!hasDynamicSlots && slots.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-    processAsSkipNode = true
     const prop = slots.properties.find(
       p =>
         p.type === NodeTypes.JS_PROPERTY &&
@@ -182,17 +182,10 @@ function resolveDefaultSlot(
         p.value.params === undefined,
     )
     if (prop) {
-      const slotNode = prop.value.returns as TemplateChildNode[]
-      // using the cloned node for ssr VNode-based slot
-      children = context.inSSR ? clone(slotNode) : slotNode
-    } else {
-      context.onError(
-        createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
-      )
+      defaultSlot = prop.value.returns as TemplateChildNode[]
     }
   }
-
-  return { processAsSkipNode, children }
+  return { hasDynamicSlots, defaultSlot }
 }
 
 function createBranchNode(

From 69162d3d005cf24e6efbce606813c3b1c26e5a57 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 27 Jan 2025 11:26:45 +0800
Subject: [PATCH 36/38] fix: codegen

---
 .../__snapshots__/vSkip.spec.ts.snap          |  32 +--
 .../__tests__/transforms/vSkip.spec.ts        |  19 +-
 packages/compiler-core/src/transform.ts       |  12 +-
 .../compiler-core/src/transforms/vSkip.ts     |  11 +-
 .../compiler-core/src/transforms/vSlot.ts     |   9 +-
 packages/compiler-core/src/utils.ts           |   4 +-
 .../compiler-ssr/__tests__/ssrVSkip.spec.ts   | 209 +++++++++---------
 7 files changed, 155 insertions(+), 141 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
index 15887f6d80a..79ddaa94d2c 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSkip.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`compiler: v-skip > transform > nested v-skip 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode, Fragment: _Fragment } = _Vue
+    const { createCommentVNode: _createCommentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, Fragment: _Fragment } = _Vue
 
     return (_ctx.ok)
       ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
@@ -95,12 +95,12 @@ exports[`compiler: v-skip > transform > on component with dynamic slot 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { withCtx: _withCtx, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { withCtx: _withCtx, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_resolveSkipComponent(_ctx.ok, _component_Comp), null, {
-      [_ctx.foo]: _withCtx(() => ["foo"]),
+      [_ctx.foo]: _withCtx(() => [_toDisplayString(_ctx.foo)]),
       _: 2 /* DYNAMIC */
     }, 1024 /* DYNAMIC_SLOTS */))
   }
@@ -112,20 +112,20 @@ exports[`compiler: v-skip > transform > on component with implicit default slot
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { withCtx: _withCtx, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
+    const { withCtx: _withCtx, toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
     return (_ctx.ok)
       ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
           (_ctx.yes)
-            ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+            ? (_openBlock(), _createElementBlock("span", { key: 0 }, _toDisplayString(_ctx.default), 1 /* TEXT */))
             : _createCommentVNode("v-if", true)
         ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
       : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
           default: _withCtx(() => [
             (_ctx.yes)
-              ? (_openBlock(), _createElementBlock("span", { key: 0 }, "default"))
+              ? (_openBlock(), _createElementBlock("span", { key: 0 }, _toDisplayString(_ctx.default), 1 /* TEXT */))
               : _createCommentVNode("v-if", true)
           ]),
           _: 1 /* STABLE */
@@ -139,7 +139,7 @@ exports[`compiler: v-skip > transform > on component with multiple implicit defa
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { withCtx: _withCtx, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
+    const { withCtx: _withCtx, createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
@@ -149,7 +149,7 @@ return function render(_ctx, _cache) {
           _createElementVNode("div")
         ], 64 /* STABLE_FRAGMENT */))
       : (_openBlock(), _createBlock(_component_Comp, { key: 1 }, {
-          foo: _withCtx(() => ["foo"]),
+          foo: _withCtx(() => [_toDisplayString(_ctx.foo)]),
           default: _withCtx(() => [
             _createElementVNode("span"),
             _createElementVNode("div")
@@ -185,7 +185,7 @@ exports[`compiler: v-skip > transform > on component with name default slot + v-
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { withCtx: _withCtx, createSlots: _createSlots, toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, resolveSkipComponent: _resolveSkipComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
@@ -193,7 +193,7 @@ return function render(_ctx, _cache) {
       (_ctx.yes)
         ? {
             name: "default",
-            fn: _withCtx(() => ["default"]),
+            fn: _withCtx(() => [_toDisplayString(_ctx.default)]),
             key: "0"
           }
         : undefined
@@ -325,7 +325,7 @@ exports[`compiler: v-skip > transform > with component children 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createElementBlock: _createElementBlock } = _Vue
+    const { resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent("Comp")
 
@@ -343,7 +343,7 @@ exports[`compiler: v-skip > transform > with element children 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_ctx.ok)
       ? (_openBlock(), _createElementBlock("span", { key: 0 }))
@@ -381,11 +381,11 @@ exports[`compiler: v-skip > transform > with text children 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { toDisplayString: _toDisplayString, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, ["foo"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
-      : (_openBlock(), _createElementBlock("div", { key: 1 }, "foo"))
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [_toDisplayString(_ctx.foo)], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+      : (_openBlock(), _createElementBlock("div", { key: 1 }, _toDisplayString(_ctx.foo), 1 /* TEXT */))
   }
 }"
 `;
@@ -395,7 +395,7 @@ exports[`compiler: v-skip > transform > with v-memo 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, withMemo: _withMemo } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, withMemo: _withMemo } = _Vue
 
     return (_ctx.ok)
       ? (_openBlock(), _createElementBlock("span", { key: 0 }))
diff --git a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
index 33114486d73..b352ecf3f46 100644
--- a/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSkip.spec.ts
@@ -70,17 +70,20 @@ describe('compiler: v-skip', () => {
 
     test('with text children', () => {
       const { root, node } = parseWithSkipTransform(
-        `<div v-skip="ok">foo</div>`,
+        `<div v-skip="ok">{{foo}}</div>`,
       ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
       expect((node.test as SimpleExpressionNode).content).toBe(`_ctx.ok`)
       expect((node.consequent as IfBranchNode).children.length).toBe(1)
       expect((node.consequent as IfBranchNode).children[0].type).toBe(
-        NodeTypes.TEXT,
+        NodeTypes.INTERPOLATION,
       )
       expect(
-        ((node.consequent as IfBranchNode).children[0] as any).content,
-      ).toBe(`foo`)
+        (
+          ((node.consequent as IfBranchNode).children[0] as any)
+            .content as SimpleExpressionNode
+        ).content,
+      ).toBe(`_ctx.foo`)
       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`)
@@ -341,7 +344,7 @@ describe('compiler: v-skip', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
           <span/>
-          <template #foo>foo</template>
+          <template #foo>{{foo}}</template>
           <div/>
         </Comp>`,
       ) as { root: RootNode; node: SkipNode }
@@ -371,7 +374,7 @@ describe('compiler: v-skip', () => {
     test('on component with name default slot + v-if', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <template v-if="yes" #default>default</template>
+          <template v-if="yes" #default>{{default}}</template>
         </Comp>`,
       ) as { root: RootNode; node: ComponentNode }
       expect(node.type).toBe(NodeTypes.ELEMENT)
@@ -390,7 +393,7 @@ describe('compiler: v-skip', () => {
     test('on component with implicit default slot + v-if', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <span v-if="yes">default</span>
+          <span v-if="yes">{{default}}</span>
         </Comp>`,
       ) as { root: RootNode; node: SkipNode }
       expect(node.type).toBe(NodeTypes.SKIP)
@@ -401,7 +404,7 @@ describe('compiler: v-skip', () => {
     test('on component with dynamic slot', () => {
       const { root, node } = parseWithSkipTransform(
         `<Comp v-skip="ok">
-          <template #[foo]>foo</template>
+          <template #[foo]>{{foo}}</template>
         </Comp>`,
       ) as { root: RootNode; node: ComponentNode }
       expect(node.type).toBe(NodeTypes.ELEMENT)
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index bfdc5bb3cf4..40755178def 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -467,9 +467,15 @@ export function traverseNode(
       }
       break
     case NodeTypes.SKIP:
-      const { consequent } = node
-      if (consequent.type === NodeTypes.IF_BRANCH)
-        traverseNode(consequent, context)
+      // in non-SSR mode, `alternate` already includes `consequent` content,
+      // so no need to traverse `consequent` node
+      // during `inSSR` transform, we need to traverse both since we use the cloned nodes,
+      // see `createBranchNode` in `vSkip.ts`
+      if (context.inSSR) {
+        const { consequent } = node
+        if (consequent.type === NodeTypes.IF_BRANCH)
+          traverseNode(consequent, context)
+      }
       traverseNode(node.alternate, context)
       break
     case NodeTypes.IF_BRANCH:
diff --git a/packages/compiler-core/src/transforms/vSkip.ts b/packages/compiler-core/src/transforms/vSkip.ts
index d4436a38e10..c2ef333f945 100644
--- a/packages/compiler-core/src/transforms/vSkip.ts
+++ b/packages/compiler-core/src/transforms/vSkip.ts
@@ -132,8 +132,7 @@ export function processSkip(
     if (!hasDynamicSlots) {
       if (defaultSlot) {
         processAsSkipNode = true
-        // using the cloned node for ssr VNode-based slot
-        children = context.inSSR ? clone(defaultSlot) : defaultSlot
+        children = defaultSlot
       } else {
         context.onError(
           createCompilerError(ErrorCodes.X_V_SKIP_UNEXPECTED_SLOT, loc),
@@ -147,7 +146,7 @@ export function processSkip(
     // if children is empty, create comment node
     const consequent =
       children.length !== 0
-        ? createBranchNode(node, node.loc, children)
+        ? createBranchNode(context, node, node.loc, children)
         : createCallExpression(context.helper(CREATE_COMMENT), [
             __DEV__ ? '"v-skip"' : '""',
             'true',
@@ -158,7 +157,7 @@ export function processSkip(
       loc: cloneLoc(node.loc),
       test: dir.exp,
       consequent,
-      alternate: createBranchNode(node, node.loc, [node]),
+      alternate: createBranchNode(context, node, node.loc, [node]),
       newline: true,
       codegenNode: undefined,
     }
@@ -189,6 +188,7 @@ function resolveDefaultSlot(node: ComponentNode, context: TransformContext) {
 }
 
 function createBranchNode(
+  context: TransformContext,
   node: ElementNode,
   loc: SourceLocation,
   children: TemplateChildNode[],
@@ -197,7 +197,8 @@ function createBranchNode(
     type: NodeTypes.IF_BRANCH,
     loc,
     condition: undefined,
-    children,
+    // using cloned node during `inSSR` transform
+    children: context.inSSR ? clone(children) : children,
     userKey: findProp(node, `key`),
   }
 }
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 4ebb24ba05b..0f795fcce9c 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -413,13 +413,8 @@ function hasForwardedSlots(children: TemplateChildNode[]): boolean {
         if (hasForwardedSlots(child.branches)) return true
         break
       case NodeTypes.SKIP:
-        const { consequent } = child
-        if (
-          (consequent.type === NodeTypes.IF_BRANCH &&
-            hasForwardedSlots(consequent.children)) ||
-          hasForwardedSlots(child.alternate.children)
-        )
-          return true
+        // only check `alternate` branch since it contains the `consequent` node
+        if (hasForwardedSlots(child.alternate.children)) return true
         break
       case NodeTypes.IF_BRANCH:
       case NodeTypes.FOR:
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index faaddb2b2c0..093b6bba816 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -529,11 +529,9 @@ export function hasScopeRef(
     case NodeTypes.IF:
       return node.branches.some(b => hasScopeRef(b, ids))
     case NodeTypes.SKIP:
-      const { consequent } = node
       return (
         hasScopeRef(node.test, ids) ||
-        (consequent.type === NodeTypes.IF_BRANCH &&
-          consequent.children.some(c => hasScopeRef(c, ids))) ||
+        // only check `alternate` branch since it contains the `consequent` node
         node.alternate.children.some(c => hasScopeRef(c, ids))
       )
     case NodeTypes.IF_BRANCH:
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
index 2a177711bbc..3b228b349df 100644
--- a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -17,15 +17,19 @@ describe('ssr: v-skip', () => {
   })
 
   test('with text children', () => {
-    expect(compile(`<div v-skip="foo">hello</div>`).code)
+    expect(compile(`<div v-skip="foo">{{hello}}</div>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
-            _push(\`<!--[-->hello<!--]-->\`)
+            _push(\`<!--[-->\${_ssrInterpolate(_ctx.hello)}<!--]-->\`)
           } else {
-            _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello</div>\`)
+            _push(\`<div\${
+              _ssrRenderAttrs(_attrs)
+            }>\${
+              _ssrInterpolate(_ctx.hello)
+            }</div>\`)
           }
         }"
       `)
@@ -212,67 +216,68 @@ describe('ssr: v-skip', () => {
   })
 
   test('on component with default slot', () => {
-    expect(compile(`<Comp v-skip="ok">foo</Comp>`).code).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+    expect(compile(`<Comp v-skip="ok">{{foo}}</Comp>`).code)
+      .toMatchInlineSnapshot(`
+        "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_Comp = _resolveComponent("Comp")
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          const _component_Comp = _resolveComponent("Comp")
 
-        if (_ctx.ok) {
-          _push(\`<!--[-->foo<!--]-->\`)
-        } else {
-          _push(_ssrRenderComponent(_component_Comp, _attrs, {
-            default: _withCtx((_, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`foo\`)
-              } else {
-                return [
-                  _createTextVNode("foo")
-                ]
-              }
-            }),
-            _: 1 /* STABLE */
-          }, _parent))
-        }
-      }"
-    `)
+          if (_ctx.ok) {
+            _push(\`<!--[-->\${_ssrInterpolate(_ctx.foo)}<!--]-->\`)
+          } else {
+            _push(_ssrRenderComponent(_component_Comp, _attrs, {
+              default: _withCtx((_, _push, _parent, _scopeId) => {
+                if (_push) {
+                  _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
+                } else {
+                  return [
+                    _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
+                  ]
+                }
+              }),
+              _: 1 /* STABLE */
+            }, _parent))
+          }
+        }"
+      `)
   })
 
   test('on component with multiple named slot', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <template #default>default</template>
-          <template #foo>foo</template>
+          <template #default>{{default}}</template>
+          <template #foo>{{foo}}</template>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
 
         if (_ctx.ok) {
-          _push(\`<!--[-->default<!--]-->\`)
+          _push(\`<!--[-->\${_ssrInterpolate(_ctx.default)}<!--]-->\`)
         } else {
           _push(_ssrRenderComponent(_component_Comp, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`default\`)
+                _push(\`\${_ssrInterpolate(_ctx.default)}\`)
               } else {
                 return [
-                  _createTextVNode("default")
+                  _createTextVNode(_toDisplayString(_ctx.default), 1 /* TEXT */)
                 ]
               }
             }),
             foo: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`foo\`)
+                _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
               } else {
                 return [
-                  _createTextVNode("foo")
+                  _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
                 ]
               }
             }),
@@ -288,13 +293,13 @@ describe('ssr: v-skip', () => {
       compile(
         `<Comp v-skip="ok">
           <span/>
-          <template #foo>foo</template>
+          <template #foo>{{foo}}</template>
           <div/>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -305,10 +310,10 @@ describe('ssr: v-skip', () => {
           _push(_ssrRenderComponent(_component_Comp, _attrs, {
             foo: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`foo\`)
+                _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
               } else {
                 return [
-                  _createTextVNode("foo")
+                  _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
                 ]
               }
             }),
@@ -337,12 +342,12 @@ describe('ssr: v-skip', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <template v-if="yes" #default>default</template>
+          <template v-if="yes" #default>{{default}}</template>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, createSlots: _createSlots, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -353,10 +358,10 @@ describe('ssr: v-skip', () => {
                 name: "default",
                 fn: _withCtx((_, _push, _parent, _scopeId) => {
                   if (_push) {
-                    _push(\`default\`)
+                    _push(\`\${_ssrInterpolate(_ctx.default)}\`)
                   } else {
                     return [
-                      _createTextVNode("default")
+                      _createTextVNode(_toDisplayString(_ctx.default), 1 /* TEXT */)
                     ]
                   }
                 }),
@@ -372,12 +377,12 @@ describe('ssr: v-skip', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <span v-if="yes">default</span>
+          <span v-if="yes">{{default}}</span>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -385,7 +390,7 @@ describe('ssr: v-skip', () => {
         if (_ctx.ok) {
           _push(\`<!--[-->\`)
           if (_ctx.yes) {
-            _push(\`<span>default</span>\`)
+            _push(\`<span>\${_ssrInterpolate(_ctx.default)}</span>\`)
           } else {
             _push(\`<!---->\`)
           }
@@ -395,14 +400,18 @@ describe('ssr: v-skip', () => {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
                 if (_ctx.yes) {
-                  _push(\`<span\${_scopeId}>default</span>\`)
+                  _push(\`<span\${
+                    _scopeId
+                  }>\${
+                    _ssrInterpolate(_ctx.default)
+                  }</span>\`)
                 } else {
                   _push(\`<!---->\`)
                 }
               } else {
                 return [
                   (_ctx.yes)
-                    ? (_openBlock(), _createBlock("span", { key: 0 }, "default"))
+                    ? (_openBlock(), _createBlock("span", { key: 0 }, _toDisplayString(_ctx.default), 1 /* TEXT */))
                     : _createCommentVNode("v-if", true)
                 ]
               }
@@ -418,12 +427,12 @@ describe('ssr: v-skip', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <template #[foo]>foo</template>
+          <template #[foo]>{{foo}}</template>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -431,10 +440,10 @@ describe('ssr: v-skip', () => {
         _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
           [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`foo\`)
+              _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
             } else {
               return [
-                _createTextVNode("foo")
+                _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
               ]
             }
           }),
@@ -448,13 +457,13 @@ describe('ssr: v-skip', () => {
     expect(
       compile(
         `<Comp v-skip="ok">
-          <template #[foo]>foo</template>
-          <template #default>default</template>
+          <template #[foo]>{{foo}}</template>
+          <template #default>{{default}}</template>
         </Comp>`,
       ).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, createTextVNode: _createTextVNode } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveComponent: _resolveComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSkipComponent: _ssrRenderSkipComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _component_Comp = _resolveComponent("Comp")
@@ -462,19 +471,19 @@ describe('ssr: v-skip', () => {
         _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, _attrs, {
           [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`foo\`)
+              _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
             } else {
               return [
-                _createTextVNode("foo")
+                _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
               ]
             }
           }),
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`default\`)
+              _push(\`\${_ssrInterpolate(_ctx.default)}\`)
             } else {
               return [
-                _createTextVNode("default")
+                _createTextVNode(_toDisplayString(_ctx.default), 1 /* TEXT */)
               ]
             }
           }),
@@ -485,51 +494,52 @@ describe('ssr: v-skip', () => {
   })
 
   test('on dynamic component with default slot', () => {
-    expect(compile(`<component :is="Comp" v-skip="ok">foo</component>`).code)
-      .toMatchInlineSnapshot(`
-        "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
-        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+    expect(
+      compile(`<component :is="Comp" v-skip="ok">{{foo}}</component>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderVNode: _ssrRenderVNode, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
-        return function ssrRender(_ctx, _push, _parent, _attrs) {
-          if (_ctx.ok) {
-            _push(\`<!--[-->foo<!--]-->\`)
-          } else {
-            _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
-              default: _withCtx((_, _push, _parent, _scopeId) => {
-                if (_push) {
-                  _push(\`foo\`)
-                } else {
-                  return [
-                    _createTextVNode("foo")
-                  ]
-                }
-              }),
-              _: 1 /* STABLE */
-            }), _parent)
-          }
-        }"
-      `)
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_ctx.ok) {
+          _push(\`<!--[-->\${_ssrInterpolate(_ctx.foo)}<!--]-->\`)
+        } else {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
+            default: _withCtx((_, _push, _parent, _scopeId) => {
+              if (_push) {
+                _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
+              } else {
+                return [
+                  _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
+                ]
+              }
+            }),
+            _: 1 /* STABLE */
+          }), _parent)
+        }
+      }"
+    `)
   })
 
   test('on dynamic component with dynamic slot', () => {
     expect(
       compile(`
-      <component :is="Comp" v-skip="ok">
-          <template #[foo]>foo</template>
+        <component :is="Comp" v-skip="ok">
+          <template #[foo]>{{foo}}</template>
         </component>
       `).code,
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
-      const { ssrRenderVNode: _ssrRenderVNode, ssrRenderSkipVNode: _ssrRenderSkipVNode } = require("vue/server-renderer")
+      "const { withCtx: _withCtx, resolveDynamicComponent: _resolveDynamicComponent, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createVNode: _createVNode } = require("vue")
+      const { ssrRenderVNode: _ssrRenderVNode, ssrRenderSkipVNode: _ssrRenderSkipVNode, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderSkipVNode(_ctx.ok, _push, _createVNode(_resolveDynamicComponent(_ctx.Comp), _attrs, {
           [_ctx.foo]: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`foo\`)
+              _push(\`\${_ssrInterpolate(_ctx.foo)}\`)
             } else {
               return [
-                _createTextVNode("foo")
+                _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
               ]
             }
           }),
@@ -541,19 +551,20 @@ describe('ssr: v-skip', () => {
 
   test('on Teleport', () => {
     expect(
-      compile(`<teleport to="target" v-skip="ok">
-          <div>foo</div>
+      compile(`
+        <teleport to="target" v-skip="ok">
+          <div>{{foo}}</div>
         </teleport>`).code,
     ).toMatchInlineSnapshot(`
       "const { withCtx: _withCtx } = require("vue")
-      const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+      const { ssrInterpolate: _ssrInterpolate, ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.ok) {
-          _push(\`<div>foo</div>\`)
+          _push(\`<div>\${_ssrInterpolate(_ctx.foo)}</div>\`)
         } else {
           _ssrRenderTeleport(_push, (_push) => {
-            _push(\`<div>foo</div>\`)
+            _push(\`<div>\${_ssrInterpolate(_ctx.foo)}</div>\`)
           }, "target", false, _parent)
         }
       }"

From 12df7309f4caffe787d0f32d9210ed15856d6e5a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 31 Jan 2025 22:33:16 +0800
Subject: [PATCH 37/38] test: add more tests

---
 .../runtime-core/__tests__/hydration.spec.ts  | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 56011d06359..0a3e84b86c0 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -2337,4 +2337,166 @@ describe('SSR hydration', () => {
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
     })
   })
+
+  describe('v-skip', () => {
+    test('on native element', async () => {
+      const App = {
+        setup() {
+          const toggle = ref(true)
+          return { toggle }
+        },
+        template: `
+          <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
+          <div v-skip="toggle"><span>foo</span></div>
+        `,
+      }
+      const container = document.createElement('div')
+      // server render
+      container.innerHTML = await renderToString(h(App))
+      // hydrate
+      createSSRApp(App).mount(container)
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><span>foo</span><!--]-->',
+      )
+
+      triggerEvent('click', container.querySelector('#toggleBtn')!)
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+      )
+    })
+
+    test('on component with default slot', async () => {
+      const Child = {
+        template: `<div><slot/></div>`,
+      }
+      const App = {
+        components: { Child },
+        setup() {
+          const toggle = ref(true)
+          return { toggle }
+        },
+        template: `
+          <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
+          <Child v-skip="toggle"><span>foo</span></Child>
+        `,
+      }
+      const container = document.createElement('div')
+      // server render
+      container.innerHTML = await renderToString(h(App))
+      // hydrate
+      createSSRApp(App).mount(container)
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><span>foo</span><!--]-->',
+      )
+
+      triggerEvent('click', container.querySelector('#toggleBtn')!)
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+      )
+    })
+
+    test('on component with default slot + v-if', async () => {
+      const Child = {
+        template: `<div><slot/></div>`,
+      }
+      const App = {
+        components: { Child },
+        setup() {
+          const toggle = ref(true)
+          return { toggle }
+        },
+        template: `
+          <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
+          <Child v-skip="toggle"><span v-if="true">foo</span></Child>
+        `,
+      }
+      const container = document.createElement('div')
+      // server render
+      container.innerHTML = await renderToString(h(App))
+      // hydrate
+      createSSRApp(App).mount(container)
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+      )
+
+      triggerEvent('click', container.querySelector('#toggleBtn')!)
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+      )
+    })
+
+    test('on component with dynamic slot', async () => {
+      const Child = {
+        template: `<div><slot/></div>`,
+      }
+      const App = {
+        components: { Child },
+        setup() {
+          const toggle = ref(true)
+          const slotName = ref('default')
+          return { toggle, slotName }
+        },
+        template: `
+          <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
+          <Child v-skip="toggle">
+            <template #[slotName]>
+              <span>foo</span>
+            </template>
+          </Child>
+        `,
+      }
+      const container = document.createElement('div')
+      // server render
+      container.innerHTML = await renderToString(h(App))
+      // hydrate
+      createSSRApp(App).mount(container)
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+      )
+
+      triggerEvent('click', container.querySelector('#toggleBtn')!)
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+      )
+    })
+
+    test('on dynamic component with dynamic slot', async () => {
+      const Child = {
+        template: `<div><slot/></div>`,
+      }
+      const App = {
+        setup() {
+          const toggle = ref(true)
+          const slotName = ref('default')
+          return { toggle, slotName, Child }
+        },
+        template: `
+          <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
+          <component :is="Child" v-skip="toggle">
+            <template #[slotName]>
+              <span>foo</span>
+            </template>
+          </component>
+        `,
+      }
+      const container = document.createElement('div')
+      // server render
+      container.innerHTML = await renderToString(h(App))
+      // hydrate
+      createSSRApp(App).mount(container)
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+      )
+
+      triggerEvent('click', container.querySelector('#toggleBtn')!)
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+      )
+    })
+  })
 })

From e44f4a1bc9a5d139e6ebeeb5c55ee0aae795846a Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 1 Feb 2025 09:53:26 +0800
Subject: [PATCH 38/38] test: update

---
 .../runtime-core/__tests__/hydration.spec.ts  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 0a3e84b86c0..858d77ed503 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -2347,7 +2347,7 @@ describe('SSR hydration', () => {
         },
         template: `
           <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
-          <div v-skip="toggle"><span>foo</span></div>
+          <div v-skip="toggle"><span>{{toggle}}</span></div>
         `,
       }
       const container = document.createElement('div')
@@ -2356,13 +2356,13 @@ describe('SSR hydration', () => {
       // hydrate
       createSSRApp(App).mount(container)
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><span>foo</span><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><span>true</span><!--]-->',
       )
 
       triggerEvent('click', container.querySelector('#toggleBtn')!)
       await nextTick()
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>false</span></div><!--]-->',
       )
     })
 
@@ -2378,7 +2378,7 @@ describe('SSR hydration', () => {
         },
         template: `
           <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
-          <Child v-skip="toggle"><span>foo</span></Child>
+          <Child v-skip="toggle"><span>{{toggle}}</span></Child>
         `,
       }
       const container = document.createElement('div')
@@ -2387,13 +2387,13 @@ describe('SSR hydration', () => {
       // hydrate
       createSSRApp(App).mount(container)
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><span>foo</span><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><span>true</span><!--]-->',
       )
 
       triggerEvent('click', container.querySelector('#toggleBtn')!)
       await nextTick()
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>false</span></div><!--]-->',
       )
     })
 
@@ -2409,7 +2409,7 @@ describe('SSR hydration', () => {
         },
         template: `
           <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
-          <Child v-skip="toggle"><span v-if="true">foo</span></Child>
+          <Child v-skip="toggle"><span v-if="true">{{toggle}}</span></Child>
         `,
       }
       const container = document.createElement('div')
@@ -2418,13 +2418,13 @@ describe('SSR hydration', () => {
       // hydrate
       createSSRApp(App).mount(container)
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>true</span><!--]--><!--]-->',
       )
 
       triggerEvent('click', container.querySelector('#toggleBtn')!)
       await nextTick()
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>false</span></div><!--]-->',
       )
     })
 
@@ -2443,7 +2443,7 @@ describe('SSR hydration', () => {
           <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
           <Child v-skip="toggle">
             <template #[slotName]>
-              <span>foo</span>
+              <span>{{toggle}}</span>
             </template>
           </Child>
         `,
@@ -2454,13 +2454,13 @@ describe('SSR hydration', () => {
       // hydrate
       createSSRApp(App).mount(container)
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>true</span><!--]--><!--]-->',
       )
 
       triggerEvent('click', container.querySelector('#toggleBtn')!)
       await nextTick()
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>false</span></div><!--]-->',
       )
     })
 
@@ -2478,7 +2478,7 @@ describe('SSR hydration', () => {
           <button id="toggleBtn" @click="toggle=!toggle">toggle</button>
           <component :is="Child" v-skip="toggle">
             <template #[slotName]>
-              <span>foo</span>
+              <span>{{toggle}}</span>
             </template>
           </component>
         `,
@@ -2489,13 +2489,13 @@ describe('SSR hydration', () => {
       // hydrate
       createSSRApp(App).mount(container)
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>foo</span><!--]--><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><!--[--><span>true</span><!--]--><!--]-->',
       )
 
       triggerEvent('click', container.querySelector('#toggleBtn')!)
       await nextTick()
       expect(container.innerHTML).toBe(
-        '<!--[--><button id="toggleBtn">toggle</button><div><span>foo</span></div><!--]-->',
+        '<!--[--><button id="toggleBtn">toggle</button><div><span>false</span></div><!--]-->',
       )
     })
   })