wip: properly inject fallthrough attrs to alternate node

vuejs · Jan 24, 2025 · f725472 · f725472
1 parent 172c16d
commit f725472
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git 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
@@ -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)
+    }
   }
 }