wip: test

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) {

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 =>

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

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 */

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') {