@vue/compiler-ssr 3.2.33 → 3.2.35

package/dist/compiler-ssr.cjs.js

@@ -9,6 +9,7 @@ const SSR_INTERPOLATE = Symbol(`ssrInterpolate`);
 const SSR_RENDER_VNODE = Symbol(`ssrRenderVNode`);
 const SSR_RENDER_COMPONENT = Symbol(`ssrRenderComponent`);
 const SSR_RENDER_SLOT = Symbol(`ssrRenderSlot`);
+const SSR_RENDER_SLOT_INNER = Symbol(`ssrRenderSlotInner`);
 const SSR_RENDER_CLASS = Symbol(`ssrRenderClass`);
 const SSR_RENDER_STYLE = Symbol(`ssrRenderStyle`);
 const SSR_RENDER_ATTRS = Symbol(`ssrRenderAttrs`);
@@ -28,6 +29,7 @@ const ssrHelpers = {
     [SSR_RENDER_VNODE]: `ssrRenderVNode`,
     [SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
     [SSR_RENDER_SLOT]: `ssrRenderSlot`,
+    [SSR_RENDER_SLOT_INNER]: `ssrRenderSlotInner`,
     [SSR_RENDER_CLASS]: `ssrRenderClass`,
     [SSR_RENDER_STYLE]: `ssrRenderStyle`,
     [SSR_RENDER_ATTRS]: `ssrRenderAttrs`,
@@ -80,7 +82,7 @@ function processIfBranch(branch, context, disableNestedFragments = false) {
         (children.length !== 1 || children[0].type !== 1 /* ELEMENT */) &&
         // optimize away nested fragments when the only child is a ForNode
         !(children.length === 1 && children[0].type === 11 /* FOR */);
-    return processChildrenAsStatement(children, context, needFragmentWrapper);
+    return processChildrenAsStatement(branch, context, needFragmentWrapper);
 }
 
 // Plugin for the first transform pass, which simply constructs the AST node
@@ -91,7 +93,7 @@ function ssrProcessFor(node, context, disableNestedFragments = false) {
     const needFragmentWrapper = !disableNestedFragments &&
         (node.children.length !== 1 || node.children[0].type !== 1 /* ELEMENT */);
     const renderLoop = compilerDom.createFunctionExpression(compilerDom.createForLoopParams(node.parseResult));
-    renderLoop.body = processChildrenAsStatement(node.children, context, needFragmentWrapper);
+    renderLoop.body = processChildrenAsStatement(node, context, needFragmentWrapper);
     // v-for always renders a fragment unless explicitly disabled
     if (!disableNestedFragments) {
         context.pushStringPart(`<!--[-->`);
@@ -121,7 +123,20 @@ const ssrTransformSlotOutlet = (node, context) => {
         if (context.scopeId && context.slotted !== false) {
             args.push(`"${context.scopeId}-s"`);
         }
-        node.ssrCodegenNode = compilerDom.createCallExpression(context.helper(SSR_RENDER_SLOT), args);
+        let method = SSR_RENDER_SLOT;
+        // #3989
+        // check if this is a single slot inside a transition wrapper - since
+        // transition will unwrap the slot fragment into a single vnode at runtime,
+        // we need to avoid rendering the slot as a fragment.
+        const parent = context.parent;
+        if (parent &&
+            parent.type === 1 /* ELEMENT */ &&
+            parent.tagType === 1 /* COMPONENT */ &&
+            compilerDom.resolveComponentType(parent, context, true) === compilerDom.TRANSITION &&
+            parent.children.filter(c => c.type === 1 /* ELEMENT */).length === 1) {
+            method = SSR_RENDER_SLOT_INNER;
+        }
+        node.ssrCodegenNode = compilerDom.createCallExpression(context.helper(method), args);
     }
 };
 function ssrProcessSlotOutlet(node, context) {
@@ -129,7 +144,7 @@ function ssrProcessSlotOutlet(node, context) {
     // has fallback content
     if (node.children.length) {
         const fallbackRenderFn = compilerDom.createFunctionExpression([]);
-        fallbackRenderFn.body = processChildrenAsStatement(node.children, context);
+        fallbackRenderFn.body = processChildrenAsStatement(node, context);
         // _renderSlot(slots, name, props, fallback, ...)
         renderCall.arguments[3] = fallbackRenderFn;
     }
@@ -181,7 +196,7 @@ function ssrProcessTeleport(node, context) {
     true, // newline
     false, // isSlot
     node.loc);
-    contentRenderFn.body = processChildrenAsStatement(node.children, context);
+    contentRenderFn.body = processChildrenAsStatement(node, context);
     context.pushStatement(compilerDom.createCallExpression(context.helper(SSR_RENDER_TELEPORT), [
         `_push`,
         contentRenderFn,
@@ -224,8 +239,8 @@ function ssrProcessSuspense(node, context) {
     }
     const { slotsExp, wipSlots } = wipEntry;
     for (let i = 0; i < wipSlots.length; i++) {
-        const { fn, children } = wipSlots[i];
-        fn.body = processChildrenAsStatement(children, context);
+        const slot = wipSlots[i];
+        slot.fn.body = processChildrenAsStatement(slot, context);
     }
     // _push(ssrRenderSuspense(slots))
     context.pushStatement(compilerDom.createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
@@ -234,39 +249,6 @@ function ssrProcessSuspense(node, context) {
     ]));
 }
 
-function ssrProcessTransitionGroup(node, context) {
-    const tag = compilerDom.findProp(node, 'tag');
-    if (tag) {
-        if (tag.type === 7 /* DIRECTIVE */) {
-            // dynamic :tag
-            context.pushStringPart(`<`);
-            context.pushStringPart(tag.exp);
-            context.pushStringPart(`>`);
-            processChildren(node.children, context, false, 
-            /**
-             * TransitionGroup has the special runtime behavior of flattening and
-             * concatenating all children into a single fragment (in order for them to
-             * be patched using the same key map) so we need to account for that here
-             * by disabling nested fragment wrappers from being generated.
-             */
-            true);
-            context.pushStringPart(`</`);
-            context.pushStringPart(tag.exp);
-            context.pushStringPart(`>`);
-        }
-        else {
-            // static tag
-            context.pushStringPart(`<${tag.value.content}>`);
-            processChildren(node.children, context, false, true);
-            context.pushStringPart(`</${tag.value.content}>`);
-        }
-    }
-    else {
-        // fragment
-        processChildren(node.children, context, true, true);
-    }
-}
-
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
 const rawChildrenMap = new WeakMap();
@@ -288,7 +270,7 @@ const ssrTransformElement = (node, context) => {
         const hasCustomDir = node.props.some(p => p.type === 7 /* DIRECTIVE */ && !shared.isBuiltInDirective(p.name));
         const needMergeProps = hasDynamicVBind || hasCustomDir;
         if (needMergeProps) {
-            const { props, directives } = compilerDom.buildProps(node, context, node.props, true /* ssr */);
+            const { props, directives } = compilerDom.buildProps(node, context, node.props, false /* isComponent */, false /* isDynamicComponent */, true /* ssr */);
             if (props || directives.length) {
                 const mergedProps = buildSSRProps(props, directives, context);
                 const propsExp = compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTRS), [mergedProps]);
@@ -367,7 +349,7 @@ const ssrTransformElement = (node, context) => {
                         node.children = [compilerDom.createInterpolation(prop.exp, prop.loc)];
                     }
                 }
-                else if (!needMergeProps) {
+                else if (!needMergeProps && prop.name !== 'on') {
                     // Directive transforms.
                     const directiveTransform = context.directiveTransforms[prop.name];
                     if (directiveTransform) {
@@ -532,7 +514,7 @@ function ssrProcessElement(node, context) {
         context.pushStringPart(rawChildren);
     }
     else if (node.children.length) {
-        processChildren(node.children, context);
+        processChildren(node, context);
     }
     if (!isVoidTag(node.tag)) {
         // push closing tag
@@ -540,11 +522,75 @@ function ssrProcessElement(node, context) {
     }
 }
 
+const wipMap$1 = new WeakMap();
+// phase 1: build props
+function ssrTransformTransitionGroup(node, context) {
+    return () => {
+        const tag = compilerDom.findProp(node, 'tag');
+        if (tag) {
+            const otherProps = node.props.filter(p => p !== tag);
+            const { props, directives } = compilerDom.buildProps(node, context, otherProps, true, /* isComponent */ false, /* isDynamicComponent */ true /* ssr (skip event listeners) */);
+            let propsExp = null;
+            if (props || directives.length) {
+                propsExp = compilerDom.createCallExpression(context.helper(SSR_RENDER_ATTRS), [
+                    buildSSRProps(props, directives, context)
+                ]);
+            }
+            wipMap$1.set(node, {
+                tag,
+                propsExp
+            });
+        }
+    };
+}
+// phase 2: process children
+function ssrProcessTransitionGroup(node, context) {
+    const entry = wipMap$1.get(node);
+    if (entry) {
+        const { tag, propsExp } = entry;
+        if (tag.type === 7 /* DIRECTIVE */) {
+            // dynamic :tag
+            context.pushStringPart(`<`);
+            context.pushStringPart(tag.exp);
+            if (propsExp) {
+                context.pushStringPart(propsExp);
+            }
+            context.pushStringPart(`>`);
+            processChildren(node, context, false, 
+            /**
+             * TransitionGroup has the special runtime behavior of flattening and
+             * concatenating all children into a single fragment (in order for them to
+             * be patched using the same key map) so we need to account for that here
+             * by disabling nested fragment wrappers from being generated.
+             */
+            true);
+            context.pushStringPart(`</`);
+            context.pushStringPart(tag.exp);
+            context.pushStringPart(`>`);
+        }
+        else {
+            // static tag
+            context.pushStringPart(`<${tag.value.content}`);
+            if (propsExp) {
+                context.pushStringPart(propsExp);
+            }
+            context.pushStringPart(`>`);
+            processChildren(node, context, false, true);
+            context.pushStringPart(`</${tag.value.content}>`);
+        }
+    }
+    else {
+        // fragment
+        processChildren(node, context, true, true);
+    }
+}
+
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
 // the 2nd pass, so we store the WIP slot functions in a weakMap during the 1st
 // pass and complete them in the 2nd pass.
-const wipMap$1 = new WeakMap();
+const wipMap$2 = new WeakMap();
+const WIP_SLOT = Symbol();
 const componentTypeMap = new WeakMap();
 // ssr component transform is done in two phases:
 // In phase 1. we use `buildSlot` to analyze the children of the component into
@@ -558,12 +604,16 @@ const ssrTransformComponent = (node, context) => {
         return;
     }
     const component = compilerDom.resolveComponentType(node, context, true /* ssr */);
+    const isDynamicComponent = shared.isObject(component) && component.callee === compilerDom.RESOLVE_DYNAMIC_COMPONENT;
     componentTypeMap.set(node, component);
     if (shared.isSymbol(component)) {
         if (component === compilerDom.SUSPENSE) {
             return ssrTransformSuspense(node, context);
         }
-        return; // built-in component: fallthrough
+        if (component === compilerDom.TRANSITION_GROUP) {
+            return ssrTransformTransitionGroup(node, context);
+        }
+        return; // other built-in components: fallthrough
     }
     // Build the fallback vnode-based branch for the component's slots.
     // We need to clone the node into a fresh copy and use the buildSlots' logic
@@ -587,19 +637,20 @@ const ssrTransformComponent = (node, context) => {
         if (node.props.length) {
             // note we are not passing ssr: true here because for components, v-on
             // handlers should still be passed
-            const { props, directives } = compilerDom.buildProps(node, context);
+            const { props, directives } = compilerDom.buildProps(node, context, undefined, true, isDynamicComponent);
             if (props || directives.length) {
                 propsExp = buildSSRProps(props, directives, context);
             }
         }
         const wipEntries = [];
-        wipMap$1.set(node, wipEntries);
+        wipMap$2.set(node, wipEntries);
         const buildSSRSlotFn = (props, children, loc) => {
             const fn = compilerDom.createFunctionExpression([props || `_`, `_push`, `_parent`, `_scopeId`], undefined, // no return, assign body later
             true, // newline
             true, // isSlot
             loc);
             wipEntries.push({
+                type: WIP_SLOT,
                 fn,
                 children,
                 // also collect the corresponding vnode branch built earlier
@@ -629,7 +680,7 @@ const ssrTransformComponent = (node, context) => {
         }
     };
 };
-function ssrProcessComponent(node, context) {
+function ssrProcessComponent(node, context, parent) {
     const component = componentTypeMap.get(node);
     if (!node.ssrCodegenNode) {
         // this is a built-in component that fell-through.
@@ -645,19 +696,29 @@ function ssrProcessComponent(node, context) {
         else {
             // real fall-through: Transition / KeepAlive
             // just render its children.
-            processChildren(node.children, context);
+            // #5352: if is at root level of a slot, push an empty string.
+            // this does not affect the final output, but avoids all-comment slot
+            // content of being treated as empty by ssrRenderSlot().
+            if (parent.type === WIP_SLOT) {
+                context.pushStringPart(``);
+            }
+            // #5351: filter out comment children inside transition
+            if (component === compilerDom.TRANSITION) {
+                node.children = node.children.filter(c => c.type !== 3 /* COMMENT */);
+            }
+            processChildren(node, context);
         }
     }
     else {
         // finish up slot function expressions from the 1st pass.
-        const wipEntries = wipMap$1.get(node) || [];
+        const wipEntries = wipMap$2.get(node) || [];
         for (let i = 0; i < wipEntries.length; i++) {
-            const { fn, children, vnodeBranch } = wipEntries[i];
+            const { fn, vnodeBranch } = wipEntries[i];
             // For each slot, we generate two branches: one SSR-optimized branch and
             // one normal vnode-based branch. The branches are taken based on the
             // presence of the 2nd `_push` argument (which is only present if the slot
             // is called by `_ssrRenderSlot`.
-            fn.body = compilerDom.createIfStatement(compilerDom.createSimpleExpression(`_push`, false), processChildrenAsStatement(children, context, false, true /* withSlotScopeId */), vnodeBranch);
+            fn.body = compilerDom.createIfStatement(compilerDom.createSimpleExpression(`_push`, false), processChildrenAsStatement(wipEntries[i], context, false, true /* withSlotScopeId */), vnodeBranch);
         }
         // component is inside a slot, inherit slot scope Id
         if (context.withSlotScopeId) {
@@ -677,16 +738,25 @@ function ssrProcessComponent(node, context) {
 const rawOptionsMap = new WeakMap();
 const [baseNodeTransforms, baseDirectiveTransforms] = compilerDom.getBaseTransformPreset(true);
 const vnodeNodeTransforms = [...baseNodeTransforms, ...compilerDom.DOMNodeTransforms];
-const vnodeDirectiveTransforms = Object.assign(Object.assign({}, baseDirectiveTransforms), compilerDom.DOMDirectiveTransforms);
+const vnodeDirectiveTransforms = {
+    ...baseDirectiveTransforms,
+    ...compilerDom.DOMDirectiveTransforms
+};
 function createVNodeSlotBranch(props, children, parentContext) {
     // apply a sub-transform using vnode-based transforms.
     const rawOptions = rawOptionsMap.get(parentContext.root);
-    const subOptions = Object.assign(Object.assign({}, rawOptions), { 
+    const subOptions = {
+        ...rawOptions,
         // overwrite with vnode-based transforms
         nodeTransforms: [
             ...vnodeNodeTransforms,
             ...(rawOptions.nodeTransforms || [])
-        ], directiveTransforms: Object.assign(Object.assign({}, vnodeDirectiveTransforms), (rawOptions.directiveTransforms || {})) });
+        ],
+        directiveTransforms: {
+            ...vnodeDirectiveTransforms,
+            ...(rawOptions.directiveTransforms || {})
+        }
+    };
     // wrap the children with a wrapper template for proper children treatment.
     const wrapperNode = {
         type: 1 /* ELEMENT */,
@@ -720,8 +790,8 @@ function subTransform(node, options, parentContext) {
     // like normal render functions
     childContext.ssr = false;
     // inherit parent scope analysis state
-    childContext.scopes = Object.assign({}, parentContext.scopes);
-    childContext.identifiers = Object.assign({}, parentContext.identifiers);
+    childContext.scopes = { ...parentContext.scopes };
+    childContext.identifiers = { ...parentContext.identifiers };
     childContext.imports = parentContext.imports;
     // traverse
     compilerDom.traverseNode(childRoot, childContext);
@@ -777,7 +847,7 @@ function ssrCodegenTransform(ast, options) {
         context.body.push(compilerDom.createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`]));
     }
     const isFragment = ast.children.length > 1 && ast.children.some(c => !compilerDom.isText(c));
-    processChildren(ast.children, context, isFragment);
+    processChildren(ast, context, isFragment);
     ast.codegenNode = compilerDom.createBlockStatement(context.body);
     // Finalize helpers.
     // We need to separate helpers imported from 'vue' vs. '@vue/server-renderer'
@@ -828,10 +898,11 @@ function createChildContext(parent, withSlotScopeId = parent.withSlotScopeId) {
     // ensure child inherits parent helpers
     return createSSRTransformContext(parent.root, parent.options, parent.helpers, withSlotScopeId);
 }
-function processChildren(children, context, asFragment = false, disableNestedFragments = false) {
+function processChildren(parent, context, asFragment = false, disableNestedFragments = false) {
     if (asFragment) {
         context.pushStringPart(`<!--[-->`);
     }
+    const { children } = parent;
     for (let i = 0; i < children.length; i++) {
         const child = children[i];
         switch (child.type) {
@@ -841,7 +912,7 @@ function processChildren(children, context, asFragment = false, disableNestedFra
                         ssrProcessElement(child, context);
                         break;
                     case 1 /* COMPONENT */:
-                        ssrProcessComponent(child, context);
+                        ssrProcessComponent(child, context, parent);
                         break;
                     case 2 /* SLOT */:
                         ssrProcessSlotOutlet(child, context);
@@ -892,9 +963,9 @@ function processChildren(children, context, asFragment = false, disableNestedFra
         context.pushStringPart(`<!--]-->`);
     }
 }
-function processChildrenAsStatement(children, parentContext, asFragment = false, withSlotScopeId = parentContext.withSlotScopeId) {
+function processChildrenAsStatement(parent, parentContext, asFragment = false, withSlotScopeId = parentContext.withSlotScopeId) {
     const childContext = createChildContext(parentContext, withSlotScopeId);
-    processChildren(children, childContext, asFragment);
+    processChildren(parent, childContext, asFragment);
     return compilerDom.createBlockStatement(childContext.body);
 }
 
@@ -1013,7 +1084,8 @@ const ssrTransformShow = (dir, node, context) => {
     };
 };
 
-const hasSingleChild = (node) => node.children.filter(n => n.type !== 3 /* COMMENT */).length === 1;
+const filterChild = (node) => node.children.filter(n => n.type !== 3 /* COMMENT */);
+const hasSingleChild = (node) => filterChild(node).length === 1;
 const ssrInjectFallthroughAttrs = (node, context) => {
     // _attrs is provided as a function argument.
     // mark it as a known identifier so that it doesn't get prefixed by
@@ -1025,16 +1097,37 @@ const ssrInjectFallthroughAttrs = (node, context) => {
         node.tagType === 1 /* COMPONENT */ &&
         (compilerDom.isBuiltInType(node.tag, 'Transition') ||
             compilerDom.isBuiltInType(node.tag, 'KeepAlive'))) {
-        if (hasSingleChild(node)) {
-            injectFallthroughAttrs(node.children[0]);
+        const rootChildren = filterChild(context.root);
+        if (rootChildren.length === 1 && rootChildren[0] === node) {
+            if (hasSingleChild(node)) {
+                injectFallthroughAttrs(node.children[0]);
+            }
+            return;
         }
-        return;
     }
     const parent = context.parent;
     if (!parent || parent.type !== 0 /* ROOT */) {
         return;
     }
     if (node.type === 10 /* IF_BRANCH */ && hasSingleChild(node)) {
+        // detect cases where the parent v-if is not the only root level node
+        let hasEncounteredIf = false;
+        for (const c of filterChild(parent)) {
+            if (c.type === 9 /* IF */ ||
+                (c.type === 1 /* ELEMENT */ && compilerDom.findDir(c, 'if'))) {
+                // multiple root v-if
+                if (hasEncounteredIf)
+                    return;
+                hasEncounteredIf = true;
+            }
+            else if (
+            // node before v-if
+            !hasEncounteredIf ||
+                // non else nodes
+                !(c.type === 1 /* ELEMENT */ && compilerDom.findDir(c, /else/, true))) {
+                return;
+            }
+        }
         injectFallthroughAttrs(node.children[0]);
     }
     else if (hasSingleChild(parent)) {
@@ -1111,16 +1204,27 @@ function injectCssVars(node) {
 }
 
 function compile(template, options = {}) {
-    options = Object.assign(Object.assign(Object.assign({}, options), compilerDom.parserOptions), { ssr: true, inSSR: true, scopeId: options.mode === 'function' ? null : options.scopeId, 
+    options = {
+        ...options,
+        // apply DOM-specific parsing options
+        ...compilerDom.parserOptions,
+        ssr: true,
+        inSSR: true,
+        scopeId: options.mode === 'function' ? null : options.scopeId,
         // always prefix since compiler-ssr doesn't have size concern
-        prefixIdentifiers: true, 
+        prefixIdentifiers: true,
         // disable optimizations that are unnecessary for ssr
-        cacheHandlers: false, hoistStatic: false });
+        cacheHandlers: false,
+        hoistStatic: false
+    };
     const ast = compilerDom.baseParse(template, options);
     // Save raw options for AST. This is needed when performing sub-transforms
     // on slot vnode branches.
     rawOptionsMap.set(ast, options);
-    compilerDom.transform(ast, Object.assign(Object.assign({}, options), { hoistStatic: false, nodeTransforms: [
+    compilerDom.transform(ast, {
+        ...options,
+        hoistStatic: false,
+        nodeTransforms: [
             ssrTransformIf,
             ssrTransformFor,
             compilerDom.trackVForSlotScopes,
@@ -1133,14 +1237,22 @@ function compile(template, options = {}) {
             compilerDom.trackSlotScopes,
             compilerDom.transformStyle,
             ...(options.nodeTransforms || []) // user transforms
-        ], directiveTransforms: Object.assign({ 
+        ],
+        directiveTransforms: {
             // reusing core v-bind
-            bind: compilerDom.transformBind, 
+            bind: compilerDom.transformBind,
+            on: compilerDom.transformOn,
             // model and show has dedicated SSR handling
-            model: ssrTransformModel, show: ssrTransformShow, 
+            model: ssrTransformModel,
+            show: ssrTransformShow,
             // the following are ignored during SSR
-            on: compilerDom.noopDirectiveTransform, cloak: compilerDom.noopDirectiveTransform, once: compilerDom.noopDirectiveTransform, memo: compilerDom.noopDirectiveTransform }, (options.directiveTransforms || {}) // user transforms
-        ) }));
+            // on: noopDirectiveTransform,
+            cloak: compilerDom.noopDirectiveTransform,
+            once: compilerDom.noopDirectiveTransform,
+            memo: compilerDom.noopDirectiveTransform,
+            ...(options.directiveTransforms || {}) // user transforms
+        }
+    });
     // traverse the template AST and convert into SSR codegen AST
     // by replacing ast.codegenNode.
     ssrCodegenTransform(ast, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.2.33",
+  "version": "3.2.35",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-ssr#readme",
   "dependencies": {
-    "@vue/shared": "3.2.33",
-    "@vue/compiler-dom": "3.2.33"
+    "@vue/shared": "3.2.35",
+    "@vue/compiler-dom": "3.2.35"
   }
 }