@vue/compiler-ssr 3.2.34-beta.1 → 3.2.36

package/dist/compiler-ssr.cjs.js

@@ -82,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
@@ -93,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(`<!--[-->`);
@@ -144,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;
     }
@@ -196,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,
@@ -239,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), [
@@ -249,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();
@@ -303,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]);
@@ -382,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) {
@@ -547,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
@@ -555,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
@@ -573,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
@@ -602,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
@@ -644,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.
@@ -660,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) {
@@ -801,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'
@@ -852,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) {
@@ -865,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);
@@ -916,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);
 }
 
@@ -1037,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
@@ -1049,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)) {
@@ -1172,11 +1241,12 @@ function compile(template, options = {}) {
         directiveTransforms: {
             // reusing core v-bind
             bind: compilerDom.transformBind,
+            on: compilerDom.transformOn,
             // model and show has dedicated SSR handling
             model: ssrTransformModel,
             show: ssrTransformShow,
             // the following are ignored during SSR
-            on: compilerDom.noopDirectiveTransform,
+            // on: noopDirectiveTransform,
             cloak: compilerDom.noopDirectiveTransform,
             once: compilerDom.noopDirectiveTransform,
             memo: compilerDom.noopDirectiveTransform,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.2.34-beta.1",
+  "version": "3.2.36",
   "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.34-beta.1",
-    "@vue/compiler-dom": "3.2.34-beta.1"
+    "@vue/shared": "3.2.36",
+    "@vue/compiler-dom": "3.2.36"
   }
 }