@vue/compiler-ssr 3.6.0-rc.13 → 3.6.0-rc.15

package/dist/compiler-ssr.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-ssr v3.6.0-rc.13
+  * @vue/compiler-ssr v3.6.0-rc.15
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -57,21 +57,49 @@ const ssrHelpers = {
 //#region packages/compiler-ssr/src/transforms/ssrVIf.ts
 const ssrTransformIf = (0, _vue_compiler_dom.createStructuralDirectiveTransform)(/^(?:if|else|else-if)$/, _vue_compiler_dom.processIf);
 function ssrProcessIf(node, context, disableNestedFragments = false, disableComment = false) {
-	const [rootBranch] = node.branches;
-	const ifStatement = (0, _vue_compiler_dom.createIfStatement)(rootBranch.condition, processIfBranch(rootBranch, context, disableNestedFragments));
+	const { branches } = node;
+	const ranged = !!context.options.vapor && hasLookalikeBranches(branches);
+	const [rootBranch] = branches;
+	const ifStatement = (0, _vue_compiler_dom.createIfStatement)(rootBranch.condition, processIfBranch(rootBranch, context, disableNestedFragments, ranged && 0));
 	context.pushStatement(ifStatement);
 	let currentIf = ifStatement;
-	for (let i = 1; i < node.branches.length; i++) {
-		const branch = node.branches[i];
-		const branchBlockStatement = processIfBranch(branch, context, disableNestedFragments);
+	for (let i = 1; i < branches.length; i++) {
+		const branch = branches[i];
+		const branchBlockStatement = processIfBranch(branch, context, disableNestedFragments, ranged && i);
 		if (branch.condition) currentIf = currentIf.alternate = (0, _vue_compiler_dom.createIfStatement)(branch.condition, branchBlockStatement);
 		else currentIf.alternate = branchBlockStatement;
 	}
 	if (!currentIf.alternate && (!disableComment || context.options.vapor)) currentIf.alternate = (0, _vue_compiler_dom.createBlockStatement)([(0, _vue_compiler_dom.createCallExpression)(`_push`, ["`<!---->`"])]);
 }
-function processIfBranch(branch, context, disableNestedFragments = false) {
-	const { children } = branch;
-	return processChildrenAsStatement(branch, context, !disableNestedFragments && (children.length !== 1 || children[0].type !== 1) && !(children.length === 1 && children[0].type === 11));
+function processIfBranch(branch, context, disableNestedFragments = false, index = false) {
+	if (index !== false) {
+		const childContext = createChildContext(context);
+		childContext.pushStringPart(`<!--[${index}-->`);
+		processChildren(branch, childContext);
+		childContext.pushStringPart(`<!--]-->`);
+		return (0, _vue_compiler_dom.createBlockStatement)(childContext.body);
+	}
+	return processChildrenAsStatement(branch, context, !disableNestedFragments && !isBareBranch(branch));
+}
+/** Whether a branch renders as it is: its sole element or v-for, unwrapped. */
+function isBareBranch({ children }) {
+	return children.length === 1 && (children[0].type === 1 || children[0].type === 11);
+}
+/**
+* Whether two branches of a chain could start with the same node. Branches
+* that each render one plain element, all of different tags, are told apart
+* by the tag.
+*/
+function hasLookalikeBranches(branches) {
+	if (branches.length < 2) return false;
+	const tags = /* @__PURE__ */ new Set();
+	for (const { children } of branches) {
+		const nodes = children.filter((child) => child.type !== 3);
+		const root = nodes.length === 1 ? nodes[0] : void 0;
+		if (!root || root.type !== 1 || root.tagType !== 0 || tags.has(root.tag)) return true;
+		tags.add(root.tag);
+	}
+	return false;
 }
 //#endregion
 //#region packages/compiler-ssr/src/transforms/ssrVFor.ts
@@ -156,6 +184,9 @@ function ssrProcessSuspense(node, context) {
 //#endregion
 //#region packages/compiler-ssr/src/transforms/ssrTransformElement.ts
 const rawChildrenMap = /* @__PURE__ */ new WeakMap();
+const ssrTransformStyle = (node, context) => {
+	if (node.type === 1 && node.tagType !== 0) (0, _vue_compiler_dom.transformStyle)(node, context);
+};
 const ssrTransformElement = (node, context) => {
 	if (node.type !== 1 || node.tagType !== 0) return;
 	return function ssrPostTransformElement() {
@@ -171,6 +202,7 @@ const ssrTransformElement = (node, context) => {
 		}
 		const needMergeProps = hasDynamicVBind || hasCustomDir;
 		if (needMergeProps) {
+			(0, _vue_compiler_dom.transformStyle)(node, context);
 			const { props, directives } = (0, _vue_compiler_dom.buildProps)(node, context, node.props, false, false, true);
 			if (props || directives.length) {
 				const mergedProps = buildSSRProps(props, directives, context);
@@ -203,6 +235,8 @@ const ssrTransformElement = (node, context) => {
 		let dynamicClassBinding = void 0;
 		let staticClassBinding = void 0;
 		let dynamicStyleBinding = void 0;
+		let staticStyleBinding = void 0;
+		let staticStyleIndex = -1;
 		for (let i = 0; i < node.props.length; i++) {
 			const prop = node.props[i];
 			if (node.tag === "input" && isTrueFalseValue(prop)) continue;
@@ -229,7 +263,16 @@ const ssrTransformElement = (node, context) => {
 								if (attrName === "class") openTag.push(` class="`, dynamicClassBinding = (0, _vue_compiler_dom.createCallExpression)(context.helper(SSR_RENDER_CLASS), [value]), `"`);
 								else if (attrName === "style") {
 									if (dynamicStyleBinding) mergeCall(dynamicStyleBinding, value);
-									else openTag.push(` style="`, dynamicStyleBinding = (0, _vue_compiler_dom.createCallExpression)(context.helper(SSR_RENDER_STYLE), [value]), `"`);
+									else {
+										dynamicStyleBinding = (0, _vue_compiler_dom.createCallExpression)(context.helper(SSR_RENDER_STYLE), [staticStyleBinding ? (0, _vue_compiler_dom.createArrayExpression)([staticStyleBinding, value]) : value]);
+										const parts = [
+											` style="`,
+											dynamicStyleBinding,
+											`"`
+										];
+										if (staticStyleBinding) openTag.splice(staticStyleIndex, 1, ...parts);
+										else openTag.push(...parts);
+									}
 								} else {
 									attrName = node.tag.indexOf("-") > 0 ? attrName : _vue_shared.propsToAttrMap[attrName] || attrName.toLowerCase();
 									if ((0, _vue_shared.isBooleanAttr)(attrName)) openTag.push((0, _vue_compiler_dom.createConditionalExpression)((0, _vue_compiler_dom.createCallExpression)(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [value]), (0, _vue_compiler_dom.createSimpleExpression)(" " + attrName, true), (0, _vue_compiler_dom.createSimpleExpression)("", true), false));
@@ -251,6 +294,16 @@ const ssrTransformElement = (node, context) => {
 				else if (!needMergeProps) {
 					if (name === "key" || name === "ref") continue;
 					if (name === "class" && prop.value) staticClassBinding = JSON.stringify(prop.value.content);
+					if (name === "style" && prop.value) {
+						const style = (0, _vue_shared.parseStringStyle)(prop.value.content);
+						if (dynamicStyleBinding) mergeCall(dynamicStyleBinding, JSON.stringify(style));
+						else {
+							staticStyleBinding = JSON.stringify(style);
+							staticStyleIndex = openTag.length;
+							openTag.push(` style="${(0, _vue_shared.escapeHtml)((0, _vue_shared.stringifyStyle)(style))}"`);
+						}
+						continue;
+					}
 					openTag.push(` ${prop.name}` + (prop.value ? `="${(0, _vue_shared.escapeHtml)(prop.value.content)}"` : ``));
 				}
 			}
@@ -456,6 +509,16 @@ const ssrTransformComponent = (node, context) => {
 		]);
 	};
 };
+/**
+* Whether the server render of `node` begins with markup of its own: a
+* Teleport opens with its markers, a TransitionGroup with its tag or range,
+* a Suspense in a vapor component with its slot's range, an appearing
+* Transition with its `<template>`.
+*/
+function beginsWithOwnMarkup(node) {
+	const component = componentTypeMap.get(node);
+	return component === _vue_compiler_dom.TELEPORT || component === _vue_compiler_dom.TRANSITION_GROUP || component === _vue_compiler_dom.SUSPENSE || component === _vue_compiler_dom.TRANSITION && !!(0, _vue_compiler_dom.findProp)(node, "appear", false, true);
+}
 function ssrProcessComponent(node, context, parent) {
 	const component = componentTypeMap.get(node);
 	if (!node.ssrCodegenNode) {
@@ -607,7 +670,11 @@ function ssrCodegenTransform(ast, options) {
 			ast.helpers.add(helper);
 		});
 	}
-	processChildren(ast, context, ast.children.length > 1 && ast.children.some((c) => !(0, _vue_compiler_dom.isText)(c)));
+	const isFragment = ast.children.length > 1 && ast.children.some((c) => !(0, _vue_compiler_dom.isText)(c));
+	const vaporRange = !!options.vapor && (isFragment || opensRange(ast.children[0]));
+	if (vaporRange) context.pushStringPart(`<!--{-->`);
+	processChildren(ast, context, isFragment && !options.vapor);
+	if (vaporRange) context.pushStringPart(`<!--}-->`);
 	ast.codegenNode = (0, _vue_compiler_dom.createBlockStatement)(context.body);
 	ast.ssrHelpers = Array.from(/* @__PURE__ */ new Set([...Array.from(ast.helpers).filter((h) => h in ssrHelpers), ...context.helpers]));
 	ast.helpers = new Set(Array.from(ast.helpers).filter((h) => !(h in ssrHelpers)));
@@ -646,6 +713,16 @@ function createSSRTransformContext(root, options, helpers = /* @__PURE__ */ new
 		}
 	};
 }
+/** Whether the server render of `node` may begin with a component's range. */
+function opensRange(node) {
+	if (!node) return false;
+	if (node.type === 1) return node.tagType === 1 && !beginsWithOwnMarkup(node);
+	if (node.type === 9) {
+		const [branch] = node.branches;
+		return node.branches.length === 1 && isBareBranch(branch) && opensRange(branch.children[0]);
+	}
+	return false;
+}
 function createChildContext(parent, withSlotScopeId = parent.withSlotScopeId) {
 	return createSSRTransformContext(parent.root, parent.options, parent.helpers, withSlotScopeId);
 }
@@ -858,7 +935,7 @@ function compile(source, options = {}) {
 			ssrTransformElement,
 			ssrTransformComponent,
 			_vue_compiler_dom.trackSlotScopes,
-			_vue_compiler_dom.transformStyle,
+			ssrTransformStyle,
 			...options.nodeTransforms || []
 		],
 		directiveTransforms: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.6.0-rc.13",
+  "version": "3.6.0-rc.15",
   "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.6.0-rc.13",
-    "@vue/compiler-dom": "3.6.0-rc.13"
+    "@vue/shared": "3.6.0-rc.15",
+    "@vue/compiler-dom": "3.6.0-rc.15"
   }
 }