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(``).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(\`\`)
} else {
- _push(_ssrRenderSkipComponent(_push, _ctx.ok, _component_Comp, null, {
+ _push(_ssrRenderComponent(_component_Comp, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`\`)
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 = {
[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 {