wip: add ssrRenderSkipVNode

vuejs · Jan 26, 2025 · c0f00d2 · c0f00d2
1 parent 7efaafb
commit c0f00d2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 18 deletions.
diff --git a/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts b/packages/compiler-ssr/__tests__/ssrVSkip.spec.ts
@@ -196,15 +196,15 @@ 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")
 
         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
@@ -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
@@ -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
@@ -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
@@ -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 {