@vue/compiler-sfc 3.6.0-beta.15 → 3.6.0-beta.16

package/dist/compiler-sfc.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-sfc v3.6.0-beta.15
+  * @vue/compiler-sfc v3.6.0-beta.16
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -18394,7 +18394,7 @@ function mergeSourceMaps(scriptMap, templateMap, templateLineOffset) {
 }
 //#endregion
 //#region packages/compiler-sfc/src/index.ts
-const version = "3.6.0-beta.15";
+const version = "3.6.0-beta.16";
 const parseCache = parseCache$1;
 const errorMessages = {
 	..._vue_compiler_dom.errorMessages,

package/dist/compiler-sfc.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-sfc v3.6.0-beta.15
+  * @vue/compiler-sfc v3.6.0-beta.16
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -25350,6 +25350,8 @@ init_objectSpread2();
 function genExpression(node, context, assignment) {
 	node = context.getExpressionReplacement(node);
 	const { content, ast, isStatic, loc } = node;
+	const { options } = context;
+	const { inline } = options;
 	if (isStatic) return [[
 		JSON.stringify(content),
 		-2,
@@ -25371,23 +25373,31 @@ function genExpression(node, context, assignment) {
 	let hasMemberExpression = false;
 	if (ids.length) {
 		const [frag, push] = buildCodeFragment();
-		ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
-			const start = id.start - 1;
-			const end = id.end - 1;
-			const last = ids[i - 1];
-			const leadingText = content.slice(last ? last.end - 1 : 0, start);
-			if (leadingText.length) push([leadingText, -3]);
-			const source = content.slice(start, end);
+		let lastEnd = 0;
+		ids.sort((a, b) => a.start - b.start).forEach((id) => {
+			const idStart = id.start - 1;
+			const idEnd = id.end - 1;
+			const source = content.slice(idStart, idEnd);
 			const parentStack = parentStackMap.get(id);
 			const parent = parentStack[parentStack.length - 1];
+			let start = idStart;
+			let end = idEnd;
+			if (inline && options.bindingMetadata && options.bindingMetadata[source] === "setup-let" && parent && parent.type === "UpdateExpression" && parent.argument === id) {
+				start = parent.start - 1;
+				end = parent.end - 1;
+			}
+			if (start < lastEnd) return;
+			const leadingText = content.slice(lastEnd, start);
+			if (leadingText.length) push([leadingText, -3]);
 			hasMemberExpression || (hasMemberExpression = parent && (parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression"));
 			push(...genIdentifier(source, context, {
 				start: advancePositionWithClone(node.loc.start, source, start),
 				end: advancePositionWithClone(node.loc.start, source, end),
 				source
-			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack));
-			if (i === ids.length - 1 && end < content.length) push([content.slice(end), -3]);
+			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack, node));
+			lastEnd = end;
 		});
+		if (lastEnd < content.length) push([content.slice(lastEnd), -3]);
 		if (assignment && hasMemberExpression) push(` = ${assignment}`);
 		return frag;
 	} else return [[
@@ -25396,7 +25406,7 @@ function genExpression(node, context, assignment) {
 		loc
 	]];
 }
-function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
+function genIdentifier(raw, context, loc, assignment, id, parent, parentStack, sourceNode) {
 	const { options, helper, identifiers } = context;
 	const { inline, bindingMetadata } = options;
 	let name = raw;
@@ -25416,19 +25426,49 @@ function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
 		else return genExpression(replacement, context, assignment);
 	}
 	let prefix;
-	if (isStaticProperty(parent) && parent.shorthand) prefix = `${raw}: `;
 	const type = bindingMetadata && bindingMetadata[raw];
+	const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack || []);
+	const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
+	const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
+	if (isStaticProperty(parent) && parent.shorthand && !(inline && type === "setup-let" && isDestructureAssignment)) prefix = `${raw}: `;
 	if (inline) switch (type) {
 		case "setup-let":
-			name = raw = assignment ? `_isRef(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
+			if (isAssignmentLVal) {
+				const { right, operator } = parent;
+				const source = sourceNode;
+				const sourceContent = source.content;
+				const rightStart = right.start - 1;
+				const rightEnd = right.end - 1;
+				const rightContent = sourceContent.slice(rightStart, rightEnd);
+				const rightExp = createSimpleExpression(rightContent, false, {
+					start: advancePositionWithClone(source.loc.start, sourceContent, rightStart),
+					end: advancePositionWithClone(source.loc.start, sourceContent, rightEnd),
+					source: rightContent
+				});
+				rightExp.ast = parseExp(context, rightContent);
+				return [
+					prefix,
+					`${helper("isRef")}(${raw}) ? ${raw}.value ${operator} `,
+					...genExpression(rightExp, context),
+					` : `,
+					[
+						raw,
+						-2,
+						loc,
+						name
+					]
+				];
+			} else if (isUpdateArg) {
+				const { prefix: isPrefix, operator } = parent;
+				const updatePrefix = isPrefix ? operator : ``;
+				const updatePostfix = isPrefix ? `` : operator;
+				raw = `${helper("isRef")}(${raw}) ? ${updatePrefix}${raw}.value${updatePostfix} : ${updatePrefix}${raw}${updatePostfix}`;
+			} else if (!isDestructureAssignment) name = raw = assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
 			break;
 		case "setup-ref":
 			name = raw = withAssignment(`${raw}.value`);
 			break;
 		case "setup-maybe-ref":
-			const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack || []);
-			const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
-			const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
 			raw = isAssignmentLVal || isUpdateArg || isDestructureAssignment ? name = `${raw}.value` : assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : null` : unref();
 			break;
 		case "props":
@@ -26329,7 +26369,12 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
 	if (runtimeCamelize) {
 		key.push(" || \"\"");
 		key = genCall(helper("camelize"), key);
-	}
+	} else if (modifier) key = [
+		"(",
+		...key,
+		" || \"\"",
+		")"
+	];
 	if (handler) key = genCall(helper("toHandlerKey"), key);
 	return [
 		"[",
@@ -26421,6 +26466,11 @@ function genVShow(oper, context) {
 	])];
 }
 //#endregion
+//#region packages/compiler-vapor/src/generators/modifier.ts
+function genDirectiveModifiers(modifiers) {
+	return modifiers.map((value) => `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`).join(", ");
+}
+//#endregion
 //#region packages/compiler-vapor/src/generators/vModel.ts
 const helperMap = {
 	text: "applyTextModel",
@@ -26435,7 +26485,7 @@ function genVModel(oper, context) {
 		`() => (`,
 		...genExpression(exp, context),
 		`)`
-	], genModelHandler(exp, context), modifiers.length ? `{ ${modifiers.map((e) => e.content + ": true").join(",")} }` : void 0)];
+	], genModelHandler(exp, context), modifiers.length ? `{ ${genDirectiveModifiers(modifiers.map((e) => e.content))} }` : void 0)];
 }
 function genModelHandler(exp, context) {
 	return [
@@ -26477,14 +26527,15 @@ function genCustomDirectives(opers, context) {
 		return genMulti(DELIMITERS_ARRAY.concat("void 0"), directiveVar, value, argument, modifiers);
 	}
 }
-function genDirectiveModifiers(modifiers) {
-	return modifiers.map((value) => `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`).join(", ");
-}
 function filterCustomDirectives(id, operations) {
 	return operations.filter((oper) => oper.type === 14 && oper.element === id && !oper.builtin);
 }
 //#endregion
 //#region packages/compiler-vapor/src/generators/component.ts
+function genStaticModifierPropKey(name) {
+	const key = getModifierPropName(name);
+	return [isSimpleIdentifier(key) ? key : JSON.stringify(key)];
+}
 function genCreateComponent(operation, context) {
 	const { helper } = context;
 	const singleUseAssetComponentNames = context.singleUseAssetComponentNames;
@@ -26626,7 +26677,7 @@ function genStaticProps(props, context, dynamicProps, directStaticLiteralProps =
 			}
 			const { key, modelModifiers } = prop;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = key.isStatic ? [getModifierPropName(key.content)] : [
+				const modifiersKey = key.isStatic ? genStaticModifierPropKey(key.content) : [
 					"[",
 					...genExpression(key, context),
 					" + \"Modifiers\"]"
@@ -26669,7 +26720,7 @@ function genDynamicProps(props, context, directStaticLiteralProps = false) {
 			]);
 			const { modelModifiers } = p;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = p.key.isStatic ? [getModifierPropName(p.key.content)] : [
+				const modifiersKey = p.key.isStatic ? genStaticModifierPropKey(p.key.content) : [
 					"[",
 					...genExpression(p.key, context),
 					" + \"Modifiers\"]"
@@ -26794,7 +26845,7 @@ function genDynamicSlot(slot, context, withFunction = false) {
 }
 function genBasicDynamicSlot(slot, context) {
 	const { name, fn } = slot;
-	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context)]);
+	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context, false)]);
 }
 function genLoopSlot(slot, context) {
 	const { name, fn, loop } = slot;
@@ -26806,7 +26857,7 @@ function genLoopSlot(slot, context) {
 	if (rawValue) idMap[rawValue] = rawValue;
 	if (rawKey) idMap[rawKey] = rawKey;
 	if (rawIndex) idMap[rawIndex] = rawIndex;
-	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context), idMap)]);
+	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context, false), idMap)]);
 	return [...genCall(context.helper("createForSlots"), genExpression(source, context), [
 		...genMulti([
 			"(",
@@ -26832,7 +26883,7 @@ function genConditionalSlot(slot, context) {
 		INDENT_END
 	];
 }
-function genSlotBlockWithProps(oper, context) {
+function genSlotBlockWithProps(oper, context, emitNonStableFlag = true) {
 	let propsName;
 	let exitScope;
 	let depth;
@@ -26847,10 +26898,45 @@ function genSlotBlockWithProps(oper, context) {
 	const exitSlotBlock = context.enterSlotBlock();
 	markSlotRootOperations(oper);
 	let blockFn = context.withId(() => genBlock(oper, context, propsName ? [propsName] : []), idMap);
+	if (emitNonStableFlag && !hasStableSlotRoot(oper, context)) blockFn = genCall(context.helper("extend"), blockFn, `{ _: 8 }`);
 	exitSlotBlock();
 	exitScope && exitScope();
 	return blockFn;
 }
+const commentOnlyTemplateRE = /^(?:<!--[\s\S]*?-->)+$/;
+function hasStableSlotRoot(block, context) {
+	let hasValidRoot = false;
+	for (let i = 0; i < block.returns.length; i++) {
+		const id = block.returns[i];
+		const child = findReturnedDynamic$1(block, id);
+		const operation = child && child.operation;
+		if (!operation) {
+			if (child && isStableTemplateSlotRoot(child, context)) hasValidRoot = true;
+			continue;
+		}
+		switch (operation.type) {
+			case 12:
+				if (!operation.dynamic || operation.dynamic.isStatic) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			case 17:
+				if (hasStableSlotRoot(operation.block, context)) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			default: return false;
+		}
+	}
+	return hasValidRoot;
+}
+function isStableTemplateSlotRoot(child, context) {
+	if (child.template == null) return false;
+	const content = context.ir.template.entries[child.template].content;
+	return content !== "" && !commentOnlyTemplateRE.test(content.trim());
+}
 //#endregion
 //#region packages/compiler-vapor/src/generators/slotOutlet.ts
 function genSlotOutlet(oper, context) {
@@ -27187,7 +27273,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	else if (genEffectsExtraFrag) push(...genEffects([], context, genEffectsExtraFrag));
 	push(NEWLINE, `return `);
 	const returnNodes = returns.map((n) => `n${n}`);
-	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"]);
+	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "[]"]);
 	resetBlock();
 	context.singleUseAssetComponentNames = prevSingleUseAssetComponentNames;
 	return frag;
@@ -27526,12 +27612,37 @@ const transformVBind = (dir, node, context) => {
 	};
 };
 //#endregion
+//#region packages/compiler-vapor/src/transforms/vHtml.ts
+function ignoreVHtmlChildren(node, context, clear) {
+	if (!node.children.length) return;
+	const dir = findDir$1(node, "html");
+	if (!dir) return;
+	context.options.onError(createDOMCompilerError(55, dir.loc));
+	if (clear === "node") node.children.length = 0;
+	else context.childrenTemplate.length = 0;
+}
+const transformVHtml = (dir, node, context) => {
+	let { exp, loc } = dir;
+	if (!exp) {
+		context.options.onError(createDOMCompilerError(54, loc));
+		exp = EMPTY_EXPRESSION;
+	}
+	ignoreVHtmlChildren(node, context, "template");
+	context.registerEffect([exp], {
+		type: 8,
+		element: context.reference(),
+		value: exp,
+		isComponent: node.tagType === 1
+	});
+};
+//#endregion
 //#region packages/compiler-vapor/src/transforms/transformElement.ts
 init_objectSpread2();
 const isReservedProp = /* @__PURE__ */ makeMap(",key,ref,ref_for,ref_key,");
 const transformElement = (node, context) => {
 	let effectIndex = context.block.effect.length;
 	const getEffectIndex = () => effectIndex++;
+	if (node.type === 1 && node.children.length) ignoreVHtmlChildren(node, context, "node");
 	let parentSlots;
 	if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
 		parentSlots = context.slots;
@@ -27682,17 +27793,18 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 		};
 		for (const prop of propsResult[1]) {
 			const { key, values } = prop;
+			const canStringifyAttrName = key.isStatic && !UNSAFE_ATTR_NAME_RE.test(key.content);
 			let foldedValue;
-			if (context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
+			if (canStringifyAttrName && context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
 				if (!prevWasQuoted) template += ` `;
 				template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
 				prevWasQuoted = true;
-			} else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
+			} else if (canStringifyAttrName && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
 				const value = values[0].content === "''" ? "" : values[0].content;
 				appendTemplateProp(key.content, value);
-			} else if (key.isStatic && !prop.modifier && isBooleanAttr(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
+			} else if (canStringifyAttrName && !prop.modifier && isBooleanAttr(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
 				if (foldedValue) appendTemplateProp(key.content);
-			} else if (key.isStatic && !prop.modifier && hasBoundValue(values) && (foldedValue = key.content === "class" ? foldClassValues(values) : key.content === "style" ? foldStyleValues(values) : void 0) != null) {
+			} else if (canStringifyAttrName && !prop.modifier && hasBoundValue(values) && (foldedValue = key.content === "class" ? foldClassValues(values) : key.content === "style" ? foldStyleValues(values) : void 0) != null) {
 				if (foldedValue) appendTemplateProp(key.content, foldedValue, true);
 			} else context.registerEffect(values, {
 				type: 3,
@@ -28212,25 +28324,6 @@ const transformVOnce = (node, context) => {
 	if (node.type === 1 && findDir$1(node, "once", true)) context.inVOnce = true;
 };
 //#endregion
-//#region packages/compiler-vapor/src/transforms/vHtml.ts
-const transformVHtml = (dir, node, context) => {
-	let { exp, loc } = dir;
-	if (!exp) {
-		context.options.onError(createDOMCompilerError(54, loc));
-		exp = EMPTY_EXPRESSION;
-	}
-	if (node.children.length) {
-		context.options.onError(createDOMCompilerError(55, loc));
-		context.childrenTemplate.length = 0;
-	}
-	context.registerEffect([exp], {
-		type: 8,
-		element: context.reference(),
-		value: exp,
-		isComponent: node.tagType === 1
-	});
-};
-//#endregion
 //#region packages/compiler-vapor/src/transforms/transformText.ts
 const seen = /* @__PURE__ */ new WeakMap();
 function markNonTemplate(node, context) {
@@ -28926,7 +29019,7 @@ function transformTemplateSlot(node, dir, context) {
 	});
 	else if (vElse) {
 		const vIfSlot = slots[slots.length - 1];
-		if (vIfSlot.slotType === 3) {
+		if (vIfSlot && vIfSlot.slotType === 3) {
 			let ifNode = vIfSlot;
 			while (ifNode.negative && ifNode.negative.slotType === 3) ifNode = ifNode.negative;
 			const negative = vElse.exp ? {
@@ -42205,7 +42298,7 @@ function mergeSourceMaps(scriptMap, templateMap, templateLineOffset) {
 //#endregion
 //#region packages/compiler-sfc/src/index.ts
 init_objectSpread2();
-const version = "3.6.0-beta.15";
+const version = "3.6.0-beta.16";
 const parseCache = parseCache$1;
 const errorMessages = _objectSpread2(_objectSpread2({}, errorMessages$1), DOMErrorMessages);
 const walk = walk$2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.6.0-beta.15",
+  "version": "3.6.0-beta.16",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -47,11 +47,11 @@
     "magic-string": "^0.30.21",
     "postcss": "^8.5.14",
     "source-map-js": "^1.2.1",
-    "@vue/compiler-core": "3.6.0-beta.15",
-    "@vue/compiler-ssr": "3.6.0-beta.15",
-    "@vue/compiler-dom": "3.6.0-beta.15",
-    "@vue/compiler-vapor": "3.6.0-beta.15",
-    "@vue/shared": "3.6.0-beta.15"
+    "@vue/compiler-core": "3.6.0-beta.16",
+    "@vue/compiler-dom": "3.6.0-beta.16",
+    "@vue/compiler-ssr": "3.6.0-beta.16",
+    "@vue/compiler-vapor": "3.6.0-beta.16",
+    "@vue/shared": "3.6.0-beta.16"
   },
   "devDependencies": {
     "@babel/types": "^7.29.7",