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 {