marko 6.1.24 → 6.2.1

package/dist/translator/index.js

@@ -800,7 +800,8 @@ function isControlFlowTag(tag) {
 		case "else":
 		case "for":
 		case "await":
-		case "try": return true;
+		case "try":
+		case "show": return true;
 	}
 	return false;
 }
@@ -1200,6 +1201,12 @@ function addOwnerSerializeReason(from, to, reason) {
 function isReasonDynamic(reason) {
 	return !!reason && reason !== true && !reason.state;
 }
+function isStaticSerializeReason(reason) {
+	return !!reason && !isReasonDynamic(reason);
+}
+function isStateSerializeReason(reason) {
+	return !!reason && reason !== true && !!reason.state;
+}
 function getSerializeReason(section, prop, prefix) {
 	if (prop) return section.serializeReasons.get(getPropKey(section, prop, prefix));
 	else return section.serializeReason;
@@ -1536,10 +1543,12 @@ function getNodeContentType(path, extraMember, contentInfo) {
 				case "html-comment": return 0;
 				case "html-script":
 				case "html-style": return 3;
+				case "style": return tag.node.body.body.some((child) => _marko_compiler.types.isMarkoPlaceholder(child)) ? 3 : null;
 				case "for":
 				case "if":
 				case "await":
-				case "try": return 1;
+				case "try":
+				case "show": return 1;
 				default: return null;
 			}
 			else if ((0, _marko_compiler_babel_utils.isNativeTag)(tag)) return 3;
@@ -1645,7 +1654,9 @@ function isNativeNode(tag) {
 	if (isCoreTag(tag)) switch (tag.node.name.value) {
 		case "html-comment":
 		case "html-script":
-		case "html-style": return true;
+		case "html-style":
+		case "show": return true;
+		case "style": return tag.node.body.body.some((child) => _marko_compiler.types.isMarkoPlaceholder(child));
 		default: return false;
 	}
 	return analyzeTagNameType(tag) === 0;
@@ -2242,6 +2253,7 @@ const pureDOMFunctions = new Set([
 	"_child_setup",
 	"_if",
 	"_if_closure",
+	"_show",
 	"_try",
 	"_dynamic_tag",
 	"_dynamic_tag_content",
@@ -2257,6 +2269,7 @@ const pureDOMFunctions = new Set([
 	"_for_of",
 	"_for_to",
 	"_for_until",
+	"_hoist",
 	"_let",
 	"_let_change",
 	"_const",
@@ -2307,6 +2320,40 @@ function getCompatRuntimeFile() {
 	return `marko/${markoOpts.optimize ? "dist" : "src"}/runtime/helpers/tags-compat/${isOutputHTML() ? "html" : "dom"}${markoOpts.optimize ? "" : "-debug"}.${markoOpts.modules === "esm" ? "mjs" : "js"}`;
 }
 //#endregion
+//#region src/translator/util/setup-statements.ts
+/**
+* Tracks, during analyze, whether translate will add statements to a
+* section's setup signal (the signal keyed by no referenced bindings).
+* Sites that key statements by an expression's resolved references register
+* the expression with `addSetupExpr`; sites that always target the setup
+* signal call `addSetupStatement`. Expressions that resolve references
+* through `mergeReferences` are covered centrally by `finalizeReferences`.
+*
+* This lets a template's analyze phase prove its setup export is a noop so
+* parent templates can skip importing and calling it. The proof is checked
+* when the template itself is translated (see `visitors/program/dom.ts`).
+*/
+const [getSetupInfo] = createSectionState("setupStatements", () => ({
+	forced: false,
+	exprs: /* @__PURE__ */ new Set()
+}));
+function addSetupStatement(section) {
+	getSetupInfo(section).forced = true;
+}
+function addSetupExpr(section, node) {
+	if (node) getSetupInfo(section).exprs.add(node.extra ??= {});
+	else getSetupInfo(section).forced = true;
+}
+function sectionHasSetupStatements(section) {
+	const info = getSetupInfo(section);
+	if (info.forced) return true;
+	for (let extra of info.exprs) {
+		while (extra.merged) extra = extra.merged;
+		if (!extra.pruned && !extra.referencedBindings) return true;
+	}
+	return false;
+}
+//#endregion
 //#region src/translator/util/binding-has-prop.ts
 function bindingHasProperty(binding, properties) {
 	if (binding.pruned) return false;
@@ -2747,8 +2794,10 @@ var return_default = {
 		if (!attrs.value) throw tag.get("name").buildCodeFrameError("The [`<return>` tag](https://markojs.com/docs/reference/core-tag#return) requires a [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value).");
 		if (attrs.valueChange) {
 			(attrs.valueChange.extra ??= {}).isEffect = true;
+			addSetupExpr(section, attrs.valueChange);
 			addSerializeReason(section, true, getAccessorProp().TagVariableChange);
 		}
+		addSetupExpr(section, attrs.value);
 		section.returnValueExpr = attrs.value.extra ??= {};
 	},
 	translate: translateByTarget({
@@ -2984,6 +3033,10 @@ function setClosureSignalBuilder(tag, builder) {
 	_setClosureSignalBuilder(getSectionForBody(tag.get("body")), builder);
 }
 const [getTryHasPlaceholder, setTryHasPlaceholder] = createSectionState("tryWithPlaceholder");
+const [getOwnerResumedByMarker, setOwnerResumedByMarker] = createSectionState("ownerResumedByMarker");
+function setSectionOwnerResumedByMarker(section) {
+	setOwnerResumedByMarker(section, true);
+}
 const [getSerializedAccessors] = createSectionState("serializedScopeProperties", () => /* @__PURE__ */ new Map());
 function setSectionSerializedValue(section, prop, expression) {
 	const reason = getSerializeReason(section, prop);
@@ -3094,6 +3147,7 @@ function underTryPlaceholder(section) {
 function initValue(binding, isLet = false) {
 	const section = binding.section;
 	const signal = getSignal(section, binding);
+	if (binding.forcePersist) signal.forcePersist = true;
 	signal.build = () => {
 		if (isPureMemberForwarder(binding)) return;
 		const fn = getSignalFn(signal);
@@ -3466,7 +3520,7 @@ function writeHTMLResumeStatements(path) {
 		const ownerReason = getSerializeReason(section, ownerAccessor);
 		if (ownerReason) {
 			serializedLookup.delete(ownerAccessor);
-			serializedProperties.push(toObjectProperty(ownerAccessor, ifSerialized(ownerReason, callRuntime("_scope_with_id", getScopeIdIdentifier(section.parent)))));
+			if (!getOwnerResumedByMarker(section)) serializedProperties.push(toObjectProperty(ownerAccessor, ifSerialized(ownerReason, callRuntime("_scope_with_id", getScopeIdIdentifier(section.parent)))));
 		}
 	}
 	for (const [key, { expression, reason }] of serializedLookup) serializedProperties.push(toObjectProperty(key, ifSerialized(reason, expression)));
@@ -3711,9 +3765,11 @@ var dom_default = { translate: {
 				if (decls) extraDecls = extraDecls ? [...decls, ...extraDecls] : decls;
 			}
 		});
-		writeSignals(section);
+		const written = writeSignals(section);
 		writeRegisteredFns();
-		if (!getSetup(section)) program.node.body.unshift(_marko_compiler.types.exportNamedDeclaration(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(setupIdentifier, _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([])))])));
+		const setup = getSetup(section);
+		if (domExports.setupEmpty && setup && written.has(setup)) throw program.buildCodeFrameError("Marko internal error: analysis marked this template's setup export as empty but translation produced statements for it. Please open an issue with a reproduction.");
+		if (!setup) program.node.body.unshift(_marko_compiler.types.exportNamedDeclaration(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(setupIdentifier, _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([])))])));
 		program.node.body.unshift(_marko_compiler.types.exportNamedDeclaration(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(templateIdentifier, writes || _marko_compiler.types.stringLiteral(""))])), _marko_compiler.types.exportNamedDeclaration(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(walksIdentifier, walks || _marko_compiler.types.stringLiteral(""))])));
 		if (extraDecls) program.node.body.unshift(_marko_compiler.types.variableDeclaration("const", extraDecls));
 		program.node.body.push(_marko_compiler.types.exportDefaultDeclaration(callRuntime("_template", _marko_compiler.types.stringLiteral(program.hub.file.metadata.marko.id), templateIdentifier, walksIdentifier, setupIdentifier, programInputSignal?.identifier)));
@@ -3876,7 +3932,8 @@ function isNonHTMLText(placeholder) {
 		if (isCoreTag(parentTag)) switch (parentTag.node.name.value) {
 			case "html-comment":
 			case "html-script":
-			case "html-style": return true;
+			case "html-style":
+			case "style": return true;
 		}
 		else if (isTextOnlyNativeTag(parentTag)) return true;
 	}
@@ -3888,7 +3945,7 @@ function isTextOnlyNativeTag(tag) {
 }
 //#endregion
 //#region src/translator/core/for.ts
-const kStatefulReason$1 = Symbol("<for> stateful reason");
+const kStatefulReason$2 = Symbol("<for> stateful reason");
 var for_default = {
 	analyze(tag) {
 		const tagSection = getOrCreateSection(tag);
@@ -3933,7 +3990,7 @@ var for_default = {
 		}
 		const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
 		const tagExtra = mergeReferences(tagSection, tag.node, getAllTagReferenceNodes(tag.node));
-		addSerializeExpr(tagSection, tagExtra, kStatefulReason$1);
+		addSerializeExpr(tagSection, tagExtra, kStatefulReason$2);
 		if (paramsBinding) {
 			setBindingDownstream(paramsBinding, tagExtra);
 			const byAttr = getKnownAttrValues(tag.node).by;
@@ -3985,6 +4042,7 @@ var for_default = {
 				const singleChild = bodySection.content?.singleChild && bodySection.content.startType !== 4;
 				const branchSerializeReason = getSerializeReason(bodySection, kBranchSerializeReason);
 				const markerSerializeReason = getSerializeReason(tagSection, nodeBinding);
+				if (isStateSerializeReason(getSerializeReason(tagSection, kStatefulReason$2)) && isStaticSerializeReason(branchSerializeReason) && isStaticSerializeReason(markerSerializeReason)) setSectionOwnerResumedByMarker(bodySection);
 				flushInto(tag);
 				writeHTMLResumeStatements(tagBody);
 				const forTagArgs = getBaseArgsInForTag(forType, forAttrs);
@@ -3992,7 +4050,7 @@ var for_default = {
 				forTagArgs.push(_marko_compiler.types.arrowFunctionExpression(params, _marko_compiler.types.blockStatement(bodyStatements)));
 				if (branchSerializeReason) {
 					const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
-					const statefulSerializeArg = getSerializeGuard(tagSection, getSerializeReason(tagSection, kStatefulReason$1), !(skipParentEnd || singleChild));
+					const statefulSerializeArg = getSerializeGuard(tagSection, getSerializeReason(tagSection, kStatefulReason$2), !(skipParentEnd || singleChild));
 					const markerSerializeArg = getSerializeGuard(tagSection, markerSerializeReason, !statefulSerializeArg);
 					forTagArgs.push(forAttrs.by || _marko_compiler.types.numericLiteral(0), getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), getSerializeGuard(tagSection, branchSerializeReason, !markerSerializeArg), markerSerializeArg, statefulSerializeArg);
 					if (skipParentEnd) {
@@ -4477,6 +4535,7 @@ var native_tag_default = {
 				if (isEventOrChangeHandler(attr.name)) assertNativeHandlerAttr(tag, attr);
 				if (isEventHandler(attr.name)) {
 					valueExtra.isEffect = true;
+					valueExtra.invokeOnly = true;
 					hasEventHandlers = true;
 				} else {
 					assertValidNativeEventHandlerAttr(tag, attr);
@@ -4516,6 +4575,7 @@ var native_tag_default = {
 				}
 				const spreadExtra = mergeReferences(tagSection, tag.node, spreadReferenceNodes);
 				spreadExtra.nativeTagSpread = true;
+				spreadExtra.invokeOnly = true;
 				if (isMergedSpread) spreadExtra.nativeTagSpreadMerged = true;
 				let carveProperties = getSpreadControllableValueProps(tagName);
 				if (!tag.node.body.body.length && !isTextOnly && !(0, _marko_compiler_babel_utils.getTagDef)(tag)?.parseOptions?.openTagOnly && !seen.content) if (carveProperties) carveProperties.push("content");
@@ -4531,7 +4591,16 @@ var native_tag_default = {
 				}
 			} else relatedControllable = getRelatedControllable(tagName, seen);
 			if (relatedControllable) mergeReferences(tagSection, relatedControllable.attrs.find(Boolean).value, relatedControllable.attrs.map((it) => it?.value));
-			if (textPlaceholders) exprExtras = push(exprExtras, textPlaceholders.length === 1 ? textPlaceholders[0].extra ??= {} : mergeReferences(tagSection, textPlaceholders[0], textPlaceholders.slice(1)));
+			if (textPlaceholders) {
+				exprExtras = push(exprExtras, textPlaceholders.length === 1 ? textPlaceholders[0].extra ??= {} : mergeReferences(tagSection, textPlaceholders[0], textPlaceholders.slice(1)));
+				addSetupExpr(tagSection, textPlaceholders[0]);
+			}
+			if (injectNonce) addSetupStatement(tagSection);
+			if (relatedControllable?.attrs[1]) addSetupStatement(tagSection);
+			for (const name in seen) {
+				const attr = seen[name];
+				if (isEventHandler(name) || name === "content" || !evaluate(attr.value).confident) addSetupExpr(tagSection, attr.value);
+			}
 			addSerializeExpr(tagSection, !!(node.var || hasEventHandlers), nodeBinding);
 			trackDomVarReferences(tag, nodeBinding);
 			addSerializeExpr(tagSection, push(exprExtras, tagExtra), nodeBinding);
@@ -5117,7 +5186,7 @@ function toFirstStatementOrBlock(body) {
 }
 //#endregion
 //#region src/translator/core/if.ts
-const kStatefulReason = Symbol("<if> stateful reason");
+const kStatefulReason$1 = Symbol("<if> stateful reason");
 const BRANCHES_LOOKUP = /* @__PURE__ */ new WeakMap();
 const IfTag = {
 	analyze(tag) {
@@ -5142,7 +5211,7 @@ const IfTag = {
 				if (branchTag.node.attributes.length) mergeReferenceNodes.push(branchTag.node.attributes[0].value);
 			}
 			mergeReferences(ifTagSection, ifTag.node, mergeReferenceNodes);
-			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason);
+			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason$1);
 		}
 	},
 	translate: translateByTarget({
@@ -5160,7 +5229,11 @@ const IfTag = {
 			exit(tag) {
 				if (tag.node.body.attributeTags) return;
 				const tagBody = tag.get("body");
-				if (getSectionForBody(tagBody)) {
+				const bodySection = getSectionForBody(tagBody);
+				if (bodySection) {
+					const [[ifTag]] = getBranches(tag);
+					const ifTagSection = getSection(ifTag);
+					if (isStateSerializeReason(getSerializeReason(ifTagSection, kStatefulReason$1)) && isStaticSerializeReason(getSerializeReason(bodySection, kBranchSerializeReason)) && isStaticSerializeReason(getSerializeReason(ifTagSection, getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection)))) setSectionOwnerResumedByMarker(bodySection);
 					flushInto(tag);
 					writeHTMLResumeStatements(tagBody);
 				}
@@ -5200,7 +5273,7 @@ const IfTag = {
 					if (branchSerializeReasons) {
 						const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
 						if (skipParentEnd) getParentTag(ifTag).node.extra[kSkipEndTag] = true;
-						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason), !(skipParentEnd || singleChild));
+						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason$1), !(skipParentEnd || singleChild));
 						const markerSerializeArg = getSerializeGuard(ifTagSection, markerSerializeReason, !statefulSerializeArg);
 						const cbNode = _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([statement]));
 						statement = _marko_compiler.types.expressionStatement(callRuntime("_if", cbNode, getScopeIdIdentifier(ifTagSection), getScopeAccessorLiteral(nodeBinding), getSerializeGuardForAny(ifTagSection, branchSerializeReasons, !markerSerializeArg), markerSerializeArg, statefulSerializeArg, skipParentEnd ? _marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`) : singleChild ? _marko_compiler.types.numericLiteral(0) : void 0, singleChild ? _marko_compiler.types.numericLiteral(1) : void 0));
@@ -5312,14 +5385,14 @@ function assertValidCondition(tag) {
 	(0, _marko_compiler_babel_utils.assertNoVar)(tag);
 	(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
 	(0, _marko_compiler_babel_utils.assertNoParams)(tag);
-	assertHasBody(tag);
+	assertHasBody$1(tag);
 	assertNoSpreadAttrs(tag);
 	switch (getTagName(tag)) {
 		case "if":
-			assertHasValueAttribute(tag);
+			assertHasValueAttribute$1(tag);
 			break;
 		case "else-if":
-			assertHasValueAttribute(tag);
+			assertHasValueAttribute$1(tag);
 			assertHasPrecedingCondition(tag);
 			break;
 		case "else":
@@ -5333,10 +5406,10 @@ function assertHasPrecedingCondition(tag) {
 	while (prev.node && prev.isMarkoComment()) prev = prev.getPrevSibling();
 	if (!isConditionTag(prev) || getTagName(prev) === "else" && !prev.node.attributes.length) throw tag.buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#if--else) must have a preceding \`<if=cond>\` or \`<else if=cond>\`.`);
 }
-function assertHasBody(tag) {
+function assertHasBody$1(tag) {
 	if (!(tag.node.body.body.length || tag.node.attributeTags.length)) throw tag.get("name").buildCodeFrameError(`The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) requires [body content](https://markojs.com/docs/reference/language#tag-content).`);
 }
-function assertHasValueAttribute(tag) {
+function assertHasValueAttribute$1(tag) {
 	const { node } = tag;
 	const [valueAttr] = node.attributes;
 	if (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default) throw tag.get("name").buildCodeFrameError(`The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) requires a [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
@@ -5662,6 +5735,8 @@ var program_default = {
 			const programExtra = program.node.extra;
 			const paramsBinding = programExtra.binding;
 			if (paramsBinding && !paramsBinding.pruned) programExtra.domExports.params = getBindingPropTree(paramsBinding);
+			const section = programExtra.section;
+			if (!section.hoistedTo && !sectionHasSetupStatements(section)) programExtra.domExports.setupEmpty = true;
 		}
 	},
 	translate: {
@@ -5674,7 +5749,7 @@ var program_default = {
 				const isDOMPageEntry = output === "dom" && entry === "page" || output === "hydrate";
 				const isServerEntry = output === "html" && entry === "page";
 				if (entry && !markoOpts.linkAssets) throw program.buildCodeFrameError("The \"entry\" option requires the `linkAssets` compiler option to be configured.");
-				if (runtimeId && !/^[_$a-z][_$a-z0-9]*$/i.test(runtimeId)) throw program.buildCodeFrameError(`Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
+				if (runtimeId && !/^[_a-z][_a-z0-9]*$/i.test(runtimeId)) throw program.buildCodeFrameError(`Invalid runtimeId: "${runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 				if (isLoadEntry) {
 					const entryFile = program.hub.file;
 					const { filename } = entryFile.opts;
@@ -5836,6 +5911,7 @@ function knownTagAnalyze(tag, contentSection, propTree) {
 	const varBinding = trackVarReferences(tag, 5);
 	const exprs = tagExtra[kKnownExprs] = analyzeParams(tagExtra, section, tag, propTree, attrExprs);
 	if (varBinding) {
+		addSetupStatement(section);
 		const mutatesTagVar = !!(tag.node.var.type === "Identifier" && tag.scope.getBinding(tag.node.var.name)?.constantViolations.length);
 		const varExpr = tagExtra.defineBodySection ? contentSection.returnValueExpr : mapParamReasonToExpr(exprs, contentSection.returnSerializeReason && (contentSection.returnSerializeReason === true || !!contentSection.returnSerializeReason.state || contentSection.returnSerializeReason.param));
 		varBinding.scopeOffset = tagExtra[kChildOffsetScopeBinding$1] = createBinding("#scopeOffset", 0, section);
@@ -5872,6 +5948,8 @@ function knownTagTranslateHTML(tag, tagIdentifier, contentSection, propTree) {
 			childSerializeReasonExpr = reason && getSerializeGuard(section, reason, false);
 		} else {
 			const props = [];
+			let bitmask = 0;
+			let bitmaskNames = "";
 			let hasDynamicReasons = false;
 			let hasSkippedReasons = false;
 			for (let i = 0; i < contentSection.paramReasonGroups.length; i++) {
@@ -5879,10 +5957,16 @@ function knownTagTranslateHTML(tag, tagIdentifier, contentSection, propTree) {
 				const reason = getSerializeReason(section, childScopeBinding, group.id);
 				if (reason) {
 					hasDynamicReasons ||= reason !== true && !reason.state;
-					props.push(_marko_compiler.types.objectProperty(withLeadingComment(_marko_compiler.types.numericLiteral(i), getDebugNames(group.reason)), getSerializeGuard(section, reason, false)));
+					const guard = getSerializeGuard(section, reason, false);
+					if (bitmask >= 0) if (guard.type === "NumericLiteral" && guard.value === 1 && i < 30) {
+						bitmask |= 1 << i + 1;
+						const names = getDebugNames(group.reason);
+						if (names) bitmaskNames += bitmaskNames ? ` | ${names}` : names;
+					} else bitmask = -1;
+					props.push(_marko_compiler.types.objectProperty(withLeadingComment(_marko_compiler.types.numericLiteral(i), getDebugNames(group.reason)), guard));
 				} else hasSkippedReasons = true;
 			}
-			if (props.length) childSerializeReasonExpr = hasDynamicReasons || hasSkippedReasons ? _marko_compiler.types.objectExpression(props) : _marko_compiler.types.numericLiteral(1);
+			if (props.length) childSerializeReasonExpr = !(hasDynamicReasons || hasSkippedReasons) ? _marko_compiler.types.numericLiteral(1) : bitmask > 0 ? withLeadingComment(_marko_compiler.types.numericLiteral(bitmask), bitmaskNames) : _marko_compiler.types.objectExpression(props);
 		}
 		if (childSerializeReasonExpr) tag.insertBefore(_marko_compiler.types.expressionStatement(callRuntime("_set_serialize_reason", childSerializeReasonExpr)));
 	}
@@ -5911,7 +5995,7 @@ function knownTagTranslateDOM(tag, propTree, getBindingIdentifier, callSetup) {
 		};
 		addStatement("render", tagSection, void 0, _marko_compiler.types.expressionStatement(callRuntime("_var", scopeIdentifier, getScopeAccessorLiteral(childScopeBinding, true), source.identifier)));
 	}
-	callSetup(tagSection, childScopeBinding);
+	callSetup?.(tagSection, childScopeBinding);
 	if (propTree) writeParamsToSignals(tag, propTree, getTagName(tag) || "tag", {
 		tagSection,
 		getBindingIdentifier,
@@ -5948,6 +6032,7 @@ function analyzeParams(rootTagExtra, section, tag, propTree, rootAttrExprs) {
 		const argValueExtra = arg.extra ??= {};
 		known[i++] = { value: argValueExtra };
 		rootAttrExprs.add(argValueExtra);
+		addSetupExpr(section, arg);
 	}
 	const attrPropsTree = propTree.props[i];
 	if (attrPropsTree) known[i] = analyzeAttrs(rootTagExtra, section, tag, attrPropsTree, rootAttrExprs);
@@ -6048,6 +6133,7 @@ function analyzeAttrs(rootTagExtra, section, tag, propTree, rootAttrExprs) {
 			else {
 				remaining.delete("content");
 				known.content = { value: void 0 };
+				addSetupStatement(section);
 			}
 		}
 	}
@@ -6072,7 +6158,9 @@ function analyzeAttrs(rootTagExtra, section, tag, propTree, rootAttrExprs) {
 				remaining.delete(attr.name);
 				known[attr.name] = { value: attrExtra };
 				rootAttrExprs.add(attrExtra);
+				addSetupExpr(section, attr.value);
 				setBindingDownstream(templateExportAttr.binding, attrExtra);
+				if (getRootSection(templateExportAttr.binding.section) !== (0, _marko_compiler_babel_utils.getProgram)().node.extra.section && isInvokeOnlyBinding(templateExportAttr.binding)) attrExtra.invokeOnly = true;
 				if (knownSpread && !includes(knownSpread.binding.excludeProperties, attr.name)) addRead(attrExtra, {}, getOrCreatePropertyAlias(knownSpread.binding, attr.name), section, void 0);
 			}
 		} else if (spreadReferenceNodes) spreadReferenceNodes.push(attr.value);
@@ -6095,9 +6183,13 @@ function analyzeAttrs(rootTagExtra, section, tag, propTree, rootAttrExprs) {
 		inputExpr.value = mergeReferences(section, tag.node, spreadReferenceNodes);
 		setBindingDownstream(propTree.rest?.binding || propTree.binding, inputExpr.value);
 	} else dropNodes(spreadReferenceNodes);
-	else if (restReferenceNodes) {
-		inputExpr.value = mergeReferences(section, tag.node, restReferenceNodes);
-		setBindingDownstream(propTree.rest.binding, inputExpr.value);
+	else {
+		if (restReferenceNodes) {
+			inputExpr.value = mergeReferences(section, tag.node, restReferenceNodes);
+			setBindingDownstream(propTree.rest.binding, inputExpr.value);
+		}
+		if (remaining.size) addSetupStatement(section);
+		if (propTree.rest && !propTree.rest.props) addSetupExpr(section, tag.node);
 	}
 	dropNodes(dropReferenceNodes);
 	return inputExpr;
@@ -6380,6 +6472,10 @@ function isSimpleReference(expr) {
 		default: return false;
 	}
 }
+function getRootSection(section) {
+	while (section.parent) section = section.parent;
+	return section;
+}
 //#endregion
 //#region src/translator/util/references.ts
 const kBranchSerializeReason = Symbol("branch serialize reason");
@@ -6418,7 +6514,8 @@ function createBinding(name, type, refSection, upstreamAlias, property, excludeP
 		directContentExport: void 0,
 		nullable: !sameSection || excludeProperties === void 0,
 		pruned: void 0,
-		exposed: false
+		exposed: false,
+		forcePersist: false
 	};
 	if (property) {
 		if (declared) upstreamAlias.nullable = false;
@@ -6647,6 +6744,7 @@ function mergeReferences(section, target, nodes) {
 	for (const node of nodes) {
 		if (!node) continue;
 		const extra = node.extra ??= {};
+		if (extra === targetExtra) continue;
 		extra.merged = targetExtra;
 		if (isReferencedExtra(extra)) {
 			const additionalReads = readsByExpression.get(extra);
@@ -6694,6 +6792,11 @@ function finalizeReferences() {
 	for (const [expr, reads] of readsByExpression) if (isReferencedExtra(expr)) {
 		const exprBindings = resolveReferencedBindings(expr, reads, intersectionsBySection);
 		expr.referencedBindings = exprBindings.referencedBindings;
+		expr.lazyBindings = exprBindings.lazyBindings;
+		if (!exprBindings.referencedBindings) addSetupStatement(expr.section);
+		forEach(exprBindings.lazyBindings, (binding) => {
+			binding.forcePersist = true;
+		});
 		if (exprBindings.hoistedBindings) expr.section.referencedHoists = bindingUtil.union(expr.section.referencedHoists, exprBindings.hoistedBindings);
 		if (expr.isEffect) {
 			forEach(exprBindings.referencedBindings, (binding) => {
@@ -6702,12 +6805,15 @@ function finalizeReferences() {
 			forEach(exprBindings.constantBindings, (binding) => {
 				addSerializeReason(binding.section, true, binding);
 			});
+			forEach(exprBindings.lazyBindings, (binding) => {
+				addSerializeReason(binding.section, true, binding);
+			});
 		}
 		if (exprBindings.allBindings) {
 			const exprFnReads = fnReadsByExpression.get(expr);
 			if (exprFnReads) for (const [fn, fnReads] of exprFnReads) {
 				const fnBindings = fn === expr ? exprBindings : resolveReferencedBindingsInFunction(exprBindings.allBindings, fnReads);
-				fn.referencedBindingsInFunction = fnBindings.referencedBindings;
+				fn.referencedBindingsInFunction = fn === expr ? bindingUtil.union(fnBindings.referencedBindings, exprBindings.lazyBindings) : fnBindings.referencedBindings;
 				fn.constantBindingsInFunction = fnBindings.constantBindings;
 			}
 		}
@@ -6755,14 +6861,19 @@ function finalizeReferences() {
 			}
 		}
 		section.bindings = bindingUtil.add(section.bindings, getCanonicalBinding(binding));
-		for (const { isEffect, section } of binding.reads) if (section.depth > binding.section.depth) {
-			if (binding.type === 4) section.referencedLocalClosures = bindingUtil.add(section.referencedLocalClosures, binding);
-			else if (binding.type !== 0) {
-				const canonicalUpstreamAlias = getCanonicalBinding(binding);
-				canonicalUpstreamAlias.closureSections = sectionUtil.add(canonicalUpstreamAlias.closureSections, section);
-				section.referencedClosures = bindingUtil.add(section.referencedClosures, canonicalUpstreamAlias);
-				setReadsOwner(section, canonicalUpstreamAlias.section);
-				addOwnerSerializeReason(section, canonicalUpstreamAlias.section, !!isEffect || canonicalUpstreamAlias.sources);
+		for (const exprExtra of binding.reads) {
+			const { isEffect, section } = exprExtra;
+			if (section.depth > binding.section.depth) {
+				if (binding.type === 4) section.referencedLocalClosures = bindingUtil.add(section.referencedLocalClosures, binding);
+				else if (binding.type !== 0) {
+					const canonicalUpstreamAlias = getCanonicalBinding(binding);
+					if (!bindingUtil.has(exprExtra.lazyBindings, binding)) {
+						canonicalUpstreamAlias.closureSections = sectionUtil.add(canonicalUpstreamAlias.closureSections, section);
+						section.referencedClosures = bindingUtil.add(section.referencedClosures, canonicalUpstreamAlias);
+					}
+					setReadsOwner(section, canonicalUpstreamAlias.section);
+					addOwnerSerializeReason(section, canonicalUpstreamAlias.section, !!isEffect || canonicalUpstreamAlias.sources);
+				}
 			}
 		}
 	}
@@ -7041,7 +7152,8 @@ function addRead(exprExtra, extra, binding, section, getter) {
 		extra,
 		getter,
 		ownVar: false,
-		comparedTo: void 0
+		comparedTo: void 0,
+		deferred: false
 	};
 	binding.reads.add(exprExtra);
 	exprExtra.section = section;
@@ -7079,6 +7191,7 @@ function addReadToExpression(root, binding, getter) {
 	}
 	if (root.parent.type === "MarkoSpreadAttribute") exprExtra.spreadFrom = binding;
 	if (fnRoot) {
+		read.deferred = fnRoot.node.type !== "ObjectMethod" || fnRoot.node.kind === "method";
 		const fnReadsByExpr = getFunctionReadsByExpression();
 		let exprFnReads = fnReadsByExpr.get(exprExtra);
 		if (!exprFnReads) fnReadsByExpr.set(exprExtra, exprFnReads = /* @__PURE__ */ new Map());
@@ -7223,6 +7336,12 @@ function getReadReplacement(node, signal) {
 		return replacement && withPreviousLocation(replacement, node);
 	} else if (binding && node.type == "Identifier" && node.name !== binding.name) node.name = binding.name;
 }
+function isInvokeOnlyBinding(binding) {
+	if (binding.assignmentSections || binding.hoists || binding.getters.size || binding.propertyAliases.size || binding.excludeProperties) return false;
+	for (const expr of binding.reads) if (!expr.invokeOnly) return false;
+	for (const alias of binding.aliases) if (!isInvokeOnlyBinding(alias)) return false;
+	return true;
+}
 function hasNonConstantPropertyAlias(ref) {
 	for (const alias of ref.propertyAliases.values()) if (alias.type !== 6) return true;
 	return false;
@@ -7300,11 +7419,15 @@ function addBindingGetter(binding, { invoked, hoisted }) {
 		if (hoisted || !binding.getters.has(binding.section)) binding.getters.set(hoisted, !invoked);
 	}
 }
+function isLazyRead(expr, read, binding, isChangeHandlerRead) {
+	return !!(expr.invokeOnly && read.deferred && !isChangeHandlerRead && !binding.upstreamAlias && binding.type !== 0 && binding.type !== 6 && (binding.type !== 4 || binding.section === expr.section));
+}
 function resolveReferencedBindings(expr, reads, intersectionsBySection) {
 	let referencedBindings;
 	let constantBindings;
 	let hoistedBindings;
 	let allBindings;
+	let lazyBindings;
 	if (Array.isArray(reads)) {
 		const rootBindings = getRootBindings(reads);
 		for (const read of reads) {
@@ -7319,14 +7442,16 @@ function resolveReferencedBindings(expr, reads, intersectionsBySection) {
 					hoistedBindings = bindingUtil.add(hoistedBindings, binding);
 				}
 			} else {
-				if (extra.assignmentTo === binding) {
+				const isChangeHandlerRead = extra.assignmentTo === binding;
+				if (isChangeHandlerRead) {
 					const upstreamRoot = binding.upstreamAlias && findClosestReference(binding.upstreamAlias, rootBindings);
 					if (upstreamRoot) binding = upstreamRoot;
 				} else {
 					extra.section = expr.section;
 					({binding} = extra.read ??= resolveExpressionReference(rootBindings, binding));
 				}
-				if (binding.type === 6) constantBindings = bindingUtil.add(constantBindings, binding);
+				if (isLazyRead(expr, read, binding, isChangeHandlerRead)) lazyBindings = bindingUtil.add(lazyBindings, binding);
+				else if (binding.type === 6) constantBindings = bindingUtil.add(constantBindings, binding);
 				else if (binding.type !== 0) referencedBindings = bindingUtil.add(referencedBindings, binding);
 			}
 			allBindings = bindingUtil.add(allBindings, binding);
@@ -7342,12 +7467,20 @@ function resolveReferencedBindings(expr, reads, intersectionsBySection) {
 			}
 		} else {
 			extra.read = createRead(binding, void 0, ownVar);
-			if (binding.type === 6) constantBindings = binding;
+			if (isLazyRead(expr, reads, binding, extra.assignmentTo === binding)) lazyBindings = binding;
+			else if (binding.type === 6) constantBindings = binding;
 			else if (binding.type !== 0) referencedBindings = binding;
 		}
 		extra.section = expr.section;
 		allBindings = binding;
 	}
+	if (lazyBindings) {
+		let onlyLazy;
+		forEach(lazyBindings, (binding) => {
+			if (!bindingUtil.has(referencedBindings, binding)) onlyLazy = bindingUtil.add(onlyLazy, binding);
+		});
+		lazyBindings = onlyLazy;
+	}
 	if (Array.isArray(referencedBindings)) {
 		const intersections = intersectionsBySection.get(expr.section) || [];
 		const intersection = findSorted(compareIntersections, intersections, referencedBindings);
@@ -7363,7 +7496,8 @@ function resolveReferencedBindings(expr, reads, intersectionsBySection) {
 		referencedBindings,
 		constantBindings,
 		hoistedBindings,
-		allBindings
+		allBindings,
+		lazyBindings
 	};
 }
 function resolveExpressionReference(rootBindings, readBinding) {
@@ -7528,6 +7662,7 @@ var await_default = {
 		const paramsBinding = trackParamsReferences(tagBody, 5);
 		if (paramsBinding) setBindingDownstream(paramsBinding, valueExtra);
 		bodySection.upstreamExpression = valueAttr.value.extra;
+		addSetupStatement(section);
 	},
 	translate: translateByTarget({
 		html: {
@@ -7635,7 +7770,10 @@ var const_default = {
 				}
 			}
 			if (!valueExtra.nullable) binding.nullable = false;
-			if (!upstreamAlias) setBindingDownstream(binding, valueExtra);
+			if (!upstreamAlias) {
+				setBindingDownstream(binding, valueExtra);
+				addSetupExpr(getOrCreateSection(tag), valueAttr.value);
+			}
 		}
 	},
 	translate: { exit(tag) {
@@ -7670,6 +7808,7 @@ var debug_default = {
 		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
 		assertNoBodyContent(tag);
 		if (tag.node.attributes.length > 1 || tag.node.attributes.length === 1 && (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default && valueAttr.name !== "value")) throw tag.get("name").buildCodeFrameError("The [`<debug>` tag](https://markojs.com/docs/reference/core-tag#debug) only supports the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value).");
+		addSetupExpr(getOrCreateSection(tag), valueAttr?.value);
 	},
 	translate: { exit(tag) {
 		const section = getSection(tag);
@@ -7919,6 +8058,7 @@ var id_default = {
 		if (tag.node.attributes.length > 1 || tag.node.attributes.length === 1 && (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default && valueAttr.name !== "value")) throw tag.get("name").buildCodeFrameError("The [`<id>` tag](https://markojs.com/docs/reference/core-tag#id) only supports the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value).");
 		const binding = trackVarReferences(tag, 5);
 		if (binding) setBindingDownstream(binding, !!valueAttr && evaluate(valueAttr.value));
+		addSetupExpr(getOrCreateSection(tag), valueAttr?.value);
 	},
 	translate: { exit(tag) {
 		const { node } = tag;
@@ -7995,7 +8135,7 @@ var let_default = {
 		const tagExtra = mergeReferences(tagSection, tag.node, [valueAttr?.value, valueChangeAttr?.value]);
 		if (valueChangeAttr) {
 			setBindingDownstream(binding, tagExtra);
-			addSerializeReason(tagSection, true, binding, getAccessorPrefix().TagVariableChange);
+			if (binding.assignmentSections) addSerializeReason(tagSection, true, binding, getAccessorPrefix().TagVariableChange);
 		} else setBindingDownstream(binding, false);
 	},
 	translate: { exit(tag) {
@@ -8077,6 +8217,7 @@ var log_default = {
 		assertNoBodyContent(tag);
 		if (!valueAttr) throw tag.get("name").buildCodeFrameError("The [`<log>` tag](https://markojs.com/docs/reference/core-tag#log) requires a [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value).");
 		if (tag.node.attributes.length > 1 || !_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default && valueAttr.name !== "value") throw tag.get("name").buildCodeFrameError("The [`<log>` tag](https://markojs.com/docs/reference/core-tag#log) only supports the [`value=` attribute](https://markojs.com/docs/reference/language#shorthand-value).");
+		addSetupExpr(getOrCreateSection(tag), valueAttr.value);
 	},
 	translate: { exit(tag) {
 		const section = getSection(tag);
@@ -8131,6 +8272,7 @@ var script_default = {
 			if (seenValueAttr) throw tag.hub.buildError(attr, "Invalid duplicate value attribute.");
 			seenValueAttr = true;
 			(attr.value.extra ??= {}).isEffect = true;
+			addSetupExpr(getOrCreateSection(tag), attr.value);
 			(0, _marko_compiler_babel_utils.getProgram)().node.extra.isInteractive = true;
 		} else throw tag.hub.buildError(attr, "The [`<script>` tag](https://markojs.com/docs/reference/core-tag#script) does not support html attributes." + htmlScriptTagAlternateMsg);
 		if (!seenValueAttr) dropNodes(getAllTagReferenceNodes(node));
@@ -8209,6 +8351,163 @@ var server_default = {
 	}]
 };
 //#endregion
+//#region src/translator/core/show.ts
+const kStatefulReason = Symbol("<show> stateful reason");
+const kStartBinding = Symbol("<show> range start binding");
+const kStaticDisplay = Symbol("<show> static display");
+const kSingleNodeBody = Symbol("<show> single node body");
+const kDisplayRef = Symbol("<show> hoisted display reference");
+var show_default = {
+	analyze: {
+		enter(tag) {
+			assertValidShow(tag);
+			const tagExtra = tag.node.extra ??= {};
+			const display = tag.node.attributes[0].value;
+			const displayEval = evaluate(display);
+			tagExtra[kSingleNodeBody] = isSingleNodeBody(tag);
+			if (displayEval.confident) tagExtra[kStaticDisplay] = !!displayEval.computed;
+			if (tagExtra[kStaticDisplay] === true) return;
+			const tagSection = getOrCreateSection(tag);
+			if (getOnlyChildParentTagName(tag)) getOptimizedOnlyChildNodeBinding(tag, tagSection);
+			else tagExtra[kStartBinding] = createBinding("#text", 0, tagSection);
+			if (tagExtra[kStaticDisplay] === void 0) {
+				mergeReferences(tagSection, tag.node, [display]);
+				addSerializeExpr(tagSection, tagExtra, kStatefulReason);
+			} else addSetupStatement(tagSection);
+		},
+		exit(tag) {
+			const tagExtra = tag.node.extra;
+			if (tagExtra[kStaticDisplay] === true) return;
+			const tagSection = getSection(tag);
+			const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+			if (tagExtra[kStaticDisplay] === void 0) addSerializeExpr(tagSection, tagExtra, nodeBinding);
+		}
+	},
+	translate: translateByTarget({
+		html: {
+			enter(tag) {
+				const tagExtra = tag.node.extra;
+				flushBefore(tag);
+				const staticDisplay = tagExtra[kStaticDisplay];
+				if (staticDisplay === true) return;
+				if (staticDisplay === false) {
+					writeTo(tag)`<t hidden>`;
+					return;
+				}
+				const display = tag.node.attributes[0].value;
+				if (!_marko_compiler.types.isIdentifier(display) && !isLiteral(display)) {
+					const displayRef = generateUidIdentifier("show");
+					tag.insertBefore(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(displayRef, display)]));
+					tagExtra[kDisplayRef] = displayRef;
+				}
+			},
+			exit(tag) {
+				const tagExtra = tag.node.extra;
+				const staticDisplay = tagExtra[kStaticDisplay];
+				if (staticDisplay === false) writeTo(tag)`</t>`;
+				flushInto(tag);
+				const bodyStatements = tag.node.body.body;
+				if (staticDisplay !== void 0) {
+					for (const replacement of tag.replaceWithMultiple(bodyStatements)) replacement.skip();
+					return;
+				}
+				const tagSection = getSection(tag);
+				const display = tagExtra[kDisplayRef] || tag.node.attributes[0].value;
+				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				const onlyChildParentTagName = getOnlyChildParentTagName(tag);
+				const singleNode = tagExtra[kSingleNodeBody];
+				const statefulReason = getSerializeReason(tagSection, kStatefulReason);
+				const markerSerializeReason = getSerializeReason(tagSection, nodeBinding);
+				const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
+				if (skipParentEnd) getParentTag(tag).node.extra[kSkipEndTag] = true;
+				const statefulSerializeArg = getSerializeGuard(tagSection, statefulReason, !(skipParentEnd || singleNode));
+				const markerSerializeArg = getSerializeGuard(tagSection, markerSerializeReason, !statefulSerializeArg);
+				let startMark;
+				if (!singleNode) {
+					startMark = getSerializeGuard(tagSection, markerSerializeReason, false);
+					if (skipParentEnd) startMark = _marko_compiler.types.logicalExpression("&&", startMark, getSerializeGuard(tagSection, statefulReason, false));
+				}
+				for (const replacement of tag.replaceWithMultiple([
+					_marko_compiler.types.expressionStatement(callRuntime("_show_start", _marko_compiler.types.cloneNode(display, true), startMark)),
+					...bodyStatements,
+					_marko_compiler.types.expressionStatement(callRuntime("_show_end", getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), display, markerSerializeArg, statefulSerializeArg, skipParentEnd ? _marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`) : singleNode ? _marko_compiler.types.numericLiteral(0) : void 0, singleNode ? _marko_compiler.types.numericLiteral(1) : void 0))
+				])) replacement.skip();
+			}
+		},
+		dom: {
+			enter(tag) {
+				if (tag.node.extra[kStartBinding]) {
+					visit(tag, 37);
+					enterShallow(tag);
+				}
+			},
+			exit(tag) {
+				const tagExtra = tag.node.extra;
+				if (tagExtra[kStaticDisplay] === true) {
+					tag.remove();
+					return;
+				}
+				const tagSection = getSection(tag);
+				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				const startBinding = tagExtra[kStartBinding];
+				const display = tagExtra[kStaticDisplay] === false ? _marko_compiler.types.booleanLiteral(false) : tag.node.attributes[0].value;
+				if (startBinding) {
+					visit(tag, 37);
+					enterShallow(tag);
+				}
+				const signal = getSignal(tagSection, nodeBinding, "show");
+				signal.build = () => {
+					return callRuntime("_show", getScopeAccessorLiteral(nodeBinding, true), startBinding ? getScopeAccessorLiteral(startBinding, true) : void 0);
+				};
+				addValue(tagSection, tagExtra.referencedBindings, signal, display);
+				tag.remove();
+			}
+		}
+	}),
+	parseOptions: { controlFlow: true },
+	autocomplete: [{
+		snippet: "show=${1:condition}",
+		description: "Use to render content that is always mounted but only displayed when the condition is met.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#show"
+	}]
+};
+function isSingleNodeBody(tag) {
+	let elements = 0;
+	for (const child of tag.get("body").get("body")) {
+		if (child.isMarkoComment()) continue;
+		if (child.isMarkoTag() && analyzeTagNameType(child) === 0 && _marko_compiler.types.isStringLiteral(child.node.name)) elements++;
+		else return false;
+	}
+	return elements === 1;
+}
+function isLiteral(expr) {
+	switch (expr.type) {
+		case "BooleanLiteral":
+		case "NumericLiteral":
+		case "StringLiteral":
+		case "NullLiteral": return true;
+		default: return false;
+	}
+}
+function assertValidShow(tag) {
+	(0, _marko_compiler_babel_utils.assertNoVar)(tag);
+	(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
+	(0, _marko_compiler_babel_utils.assertNoParams)(tag);
+	assertNoSpreadAttrs(tag);
+	assertHasBody(tag);
+	assertHasValueAttribute(tag);
+}
+function assertHasBody(tag) {
+	if (!tag.node.body.body.length) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires [body content](https://markojs.com/docs/reference/language#tag-content).`);
+	if (tag.node.body.attributeTags) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) does not support [attribute tags](https://markojs.com/docs/reference/language#attribute-tags).`);
+}
+function assertHasValueAttribute(tag) {
+	const { node } = tag;
+	const [valueAttr] = node.attributes;
+	if (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires a [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
+	if (node.attributes.length > 1) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) only supports the [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
+}
+//#endregion
 //#region src/translator/core/static.ts
 var static_default = {
 	parse(tag) {
@@ -8231,36 +8530,112 @@ var static_default = {
 	}]
 };
 //#endregion
+//#region src/translator/util/style-interpolation.ts
+const htmlStyleTagAlternateMsg = " For a native html [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) use the `html-style` core tag instead.";
+function checkStyleInterpolations(tag) {
+	const { body } = tag.node.body;
+	let stringQuote = "";
+	let inComment = false;
+	let groupDepth = 0;
+	let blockDepth = 0;
+	let valueColon = false;
+	let runPlaceholder;
+	let runAfterColon = false;
+	let runDecl = false;
+	const endRun = (selector) => {
+		if (runPlaceholder && !runAfterColon && (selector || runDecl)) throw tag.hub.buildError(runPlaceholder, selector ? styleSelectorMsg : stylePropertyMsg);
+		valueColon = false;
+		runPlaceholder = void 0;
+	};
+	for (let i = 0; i < body.length; i++) {
+		const child = body[i];
+		if (_marko_compiler.types.isMarkoPlaceholder(child)) {
+			if (stringQuote) throw tag.hub.buildError(child, styleStringMsg);
+			if (!runPlaceholder) {
+				runPlaceholder = child;
+				runAfterColon = valueColon;
+				runDecl = blockDepth > 0;
+			}
+			const prev = body[i - 1];
+			if (_marko_compiler.types.isMarkoText(prev) && cssGluedBefore.test(prev.value)) throw tag.hub.buildError(child, styleGluedBeforeMsg);
+			const next = body[i + 1];
+			if (_marko_compiler.types.isMarkoText(next) && cssGluedValue.test(next.value)) throw tag.hub.buildError(child, styleGluedMsg);
+			continue;
+		}
+		const text = child.value;
+		for (let j = 0; j < text.length; j++) {
+			const c = text[j];
+			if (inComment) {
+				if (c === "*" && text[j + 1] === "/") {
+					inComment = false;
+					j++;
+				}
+			} else if (stringQuote) {
+				if (c === "\\") j++;
+				else if (c === stringQuote) stringQuote = "";
+			} else if (c === "\\") j++;
+			else if (c === "/" && text[j + 1] === "*") {
+				inComment = true;
+				j++;
+			} else if (c === "\"" || c === "'") stringQuote = c;
+			else if (c === "(" || c === "[") groupDepth++;
+			else if (c === ")" || c === "]") {
+				if (groupDepth) groupDepth--;
+			} else if (!groupDepth) switch (c) {
+				case ":":
+					if (blockDepth) valueColon = true;
+					break;
+				case "{":
+					endRun(true);
+					blockDepth++;
+					break;
+				case ";":
+					endRun(!blockDepth);
+					break;
+				case "}":
+					endRun(false);
+					if (blockDepth) blockDepth--;
+					break;
+			}
+		}
+	}
+	endRun(!blockDepth);
+}
+const styleInterpolationMsg = "A `${...}` interpolation in a [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) is substituted as a `var(--…)` custom property reference, which";
+const styleSelectorMsg = `${styleInterpolationMsg} only resolves in a declaration value, not in a selector or at-rule prelude. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const stylePropertyMsg = `${styleInterpolationMsg} cannot be used as a property name. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const styleStringMsg = `${styleInterpolationMsg} is not substituted inside a quoted CSS string — the literal text \`var(--…)\` would be rendered instead of the value. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const styleGluedMsg = `${styleInterpolationMsg} CSS does not re-tokenize, so a unit written directly after it (eg \`\${x}px\`) becomes the invalid \`var(--…)px\`. Move the unit into the interpolated value (so it resolves to eg \`"10px"\`) or use \`calc(var(--…) * 1px)\`.`;
+const styleGluedBeforeMsg = `${styleInterpolationMsg} CSS does not re-tokenize, so text written directly before it (eg \`10\${x}\`) merges with the \`var(--…)\` into a single invalid token. Add whitespace before the interpolation or move the text into the interpolated value.`;
+const cssGluedValue = /^(?:[%.\d]|(?:p[xtc]|in|[cm]m|q|r?em|ex|ch|r?lh|v[whib]|vmin|vmax|fr|deg|g?rad|turn|m?s|k?hz|dp(?:i|cm|px)|cq[whib]|cqmin|cqmax)(?![\w-]))/i;
+const cssGluedBefore = /[\w%]$/;
+//#endregion
 //#region src/translator/core/style.ts
 const STYLE_EXT_REG = /^style((?:\.[a-zA-Z0-9$_-]+)+)?/;
-const htmlStyleTagAlternateMsg = " For a native html [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) use the `html-style` core tag instead.";
 var style_default = {
 	analyze(tag) {
 		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
 		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
 		(0, _marko_compiler_babel_utils.assertNoAttributeTags)(tag);
 		const { node, hub: { file } } = tag;
-		const extClass = (STYLE_EXT_REG.exec(node.rawValue || "")?.[1]?.slice(1))?.replace(/\./g, " ");
-		for (const attr of node.attributes) {
-			if (attr.start == null && attr.type === "MarkoAttribute" && attr.name === "class" && attr.value.type === "StringLiteral" && attr.value.value === extClass) continue;
-			throw tag.hub.buildError(attr.value, "The `style` does not support html attributes." + htmlStyleTagAlternateMsg);
+		assertNoStyleAttributes(tag);
+		const names = collectDynamicStyleNames(tag);
+		if (names) {
+			checkStyleInterpolations(tag);
+			checkDynamicStylePlacement(tag);
 		}
-		for (const child of node.body.body) if (child.type !== "MarkoText") throw tag.hub.buildError(child, "The [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) currently only supports static content." + htmlStyleTagAlternateMsg);
-		const importPath = getStyleImportPath(file, node);
+		const importPath = getStyleImportPath(file, node, names);
 		(node.extra ??= {}).styleImportPath = importPath;
 		if (importPath) addAssetImport(file, importPath);
-	},
-	translate(tag) {
-		const { node, hub: { file } } = tag;
-		const importPath = node.extra?.styleImportPath;
-		if (importPath) if (!node.var) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(importPath)));
-		else if (_marko_compiler.types.isIdentifier(node.var)) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([_marko_compiler.types.importNamespaceSpecifier(node.var)], _marko_compiler.types.stringLiteral(importPath)));
-		else {
-			const varDecl = _marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, (0, _marko_compiler_babel_utils.importStar)(file, importPath, "style"))]);
-			(0, _marko_compiler_babel_utils.getProgram)().node.body.push(isOutputDOM() ? varDecl : _marko_compiler.types.markoScriptlet([varDecl], true));
+		if (names) {
+			analyzeDynamicStyle(tag, names);
+			addSetupStatement(getOrCreateSection(tag));
 		}
-		tag.remove();
 	},
+	translate: translateByTarget({
+		html: { exit: translateHTML$1 },
+		dom: { exit: translateDOM$1 }
+	}),
 	parseOptions: {
 		html: false,
 		text: true,
@@ -8269,34 +8644,154 @@ var style_default = {
 	},
 	attributes: {}
 };
+function analyzeDynamicStyle(tag, names) {
+	const { node } = tag;
+	const section = getOrCreateSection(tag);
+	const binding = createBinding("#style", 0, section);
+	node.extra.dynamicStyle = {
+		names,
+		binding
+	};
+	let exprExtras = mergeReferences(section, node, []);
+	for (const value of dynamicStyleValues(node)) exprExtras = push(exprExtras, value.extra ??= {});
+	addSerializeExpr(section, exprExtras, binding);
+}
+function collectDynamicStyleNames(tag) {
+	let names;
+	let index = 0;
+	for (const child of tag.node.body.body) if (_marko_compiler.types.isMarkoPlaceholder(child)) {
+		if (!names) {
+			names = [];
+			index = dynamicStyleNameOffset(tag);
+		}
+		names.push(dynamicStyleName(tag, index++));
+	} else if (!_marko_compiler.types.isMarkoText(child)) throw tag.hub.buildError(child, "The [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) only supports text and `${...}` interpolations." + htmlStyleTagAlternateMsg);
+	return names;
+}
+function dynamicStyleNameOffset(tag) {
+	const { start } = tag.node;
+	let offset = 0;
+	if (start != null) _marko_compiler.types.traverseFast((0, _marko_compiler_babel_utils.getProgram)().node, (node) => {
+		const dynamicStyle = node.extra?.dynamicStyle;
+		if (dynamicStyle && node.start != null && node.start < start) offset += dynamicStyle.names.length;
+	});
+	return offset;
+}
+const styleNameUnsafeReg = /[^a-zA-Z0-9_]/g;
+const encodeStyleNameChar = (c) => "-" + c.charCodeAt(0).toString(36);
+function dynamicStyleName(tag, index) {
+	const { file } = tag.hub;
+	const id = (0, _marko_compiler_babel_utils.getTemplateId)(file.markoOpts, file.opts.filename, index.toString(36));
+	return "--" + ((file.markoOpts.runtimeId || "M_") + id).replace(styleNameUnsafeReg, encodeStyleNameChar);
+}
+function checkDynamicStylePlacement(tag) {
+	for (const sibling of tag.getAllPrevSiblings()) {
+		if (isCoreTagName(sibling, "style")) continue;
+		if (sibling.isMarkoText() ? /\S/.test(sibling.node.value) : getNodeContentType(sibling, "startType") !== null) {
+			(0, _marko_compiler_babel_utils.diagnosticWarn)(tag, { label: "The `${...}` values of a [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) only apply to elements rendered after it, so the content before this tag will not receive them. Move the `<style>` tag above the content it styles." });
+			return;
+		}
+	}
+}
+function assertNoStyleAttributes(tag) {
+	const { node } = tag;
+	const extClass = (STYLE_EXT_REG.exec(node.rawValue || "")?.[1]?.slice(1))?.replace(/\./g, " ");
+	for (const attr of node.attributes) {
+		if (attr.start == null && attr.type === "MarkoAttribute" && attr.name === "class" && attr.value.type === "StringLiteral" && attr.value.value === extClass) continue;
+		throw tag.hub.buildError(attr.value, "The `style` does not support html attributes." + htmlStyleTagAlternateMsg);
+	}
+}
+function translateHTML$1(tag) {
+	const { node } = tag;
+	const dynamic = node.extra?.dynamicStyle;
+	if (dynamic) {
+		const { binding } = dynamic;
+		const section = getSection(tag);
+		writeTo(tag)`${callRuntime("_style_html", buildStyleDecls(node))}`;
+		markNode(tag, binding, getSerializeReason(section, binding));
+	}
+	emitStyleImport(tag);
+	tag.remove();
+}
+function translateDOM$1(tag) {
+	const { node } = tag;
+	const dynamic = node.extra?.dynamicStyle;
+	if (dynamic) {
+		const { names, binding } = dynamic;
+		const section = getSection(tag);
+		const write = writeTo(tag);
+		const readEl = () => createScopeReadExpression(binding);
+		visit(tag, 32);
+		write`<style>`;
+		addStatement("render", section, void 0, _marko_compiler.types.expressionStatement(callRuntime("_style_shell", scopeIdentifier, getScopeAccessorLiteral(binding))), void 0, true);
+		dynamicStyleValues(node).forEach((value, i) => {
+			const valueRef = value.extra?.referencedBindings;
+			addStatement("render", section, valueRef, _marko_compiler.types.expressionStatement(callRuntime("_style_rule_item", readEl(), _marko_compiler.types.stringLiteral(names[i]), value)), void 0, !valueRef);
+		});
+		write`</style>`;
+	}
+	emitStyleImport(tag);
+	tag.remove();
+}
+function dynamicStyleValues(node) {
+	const values = [];
+	for (const child of node.body.body) if (_marko_compiler.types.isMarkoPlaceholder(child)) values.push(child.value);
+	return values;
+}
+function emitStyleImport(tag) {
+	const { node, hub: { file } } = tag;
+	const importPath = node.extra?.styleImportPath;
+	if (!importPath) return;
+	if (!node.var) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(importPath)));
+	else if (_marko_compiler.types.isIdentifier(node.var)) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([_marko_compiler.types.importNamespaceSpecifier(node.var)], _marko_compiler.types.stringLiteral(importPath)));
+	else {
+		const varDecl = _marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, (0, _marko_compiler_babel_utils.importStar)(file, importPath, "style"))]);
+		(0, _marko_compiler_babel_utils.getProgram)().node.body.push(isOutputDOM() ? varDecl : _marko_compiler.types.markoScriptlet([varDecl], true));
+	}
+}
+function buildStyleDecls(node) {
+	const { names } = node.extra.dynamicStyle;
+	const parts = [];
+	dynamicStyleValues(node).forEach((value, i) => {
+		parts.push(`${names[i]}:`);
+		parts.push(callRuntime("_escape_style_value", value));
+		parts.push(";");
+	});
+	return normalizeStringExpression(parts);
+}
 /**
 * Resolves a `<style>` block's text content to its client side import path
 * (eg `./template.marko.css`) by handing the css off to the configured
 * `resolveVirtualDependency` hook.
 */
-function getStyleImportPath(file, node) {
+function getStyleImportPath(file, node, names) {
 	const { resolveVirtualDependency } = file.markoOpts;
 	if (!resolveVirtualDependency) return;
 	const { filename, sourceMaps } = file.opts;
 	let ext = STYLE_EXT_REG.exec(node.rawValue || "")?.[1] || ".css";
 	if (node.var && !/\.module\./.test(ext)) ext = ".module" + ext;
-	let magicString;
+	const magicString = sourceMaps ? new magic_string.default(file.code, { filename }) : void 0;
 	let code = "";
 	let last = 0;
 	let map;
+	let nameIndex = 0;
 	for (const child of node.body.body) {
-		code += child.value;
-		if (sourceMaps) {
+		const placeholder = _marko_compiler.types.isMarkoPlaceholder(child);
+		const text = placeholder ? `var(${names[nameIndex++]})` : child.value;
+		if (magicString) {
 			const start = (0, _marko_compiler_babel_utils.getStart)(file, child);
-			if (start !== null) {
-				magicString ||= new magic_string.default(file.code, { filename });
+			if (start === null) magicString.appendLeft(last, text);
+			else {
+				const end = (0, _marko_compiler_babel_utils.getEnd)(file, child);
 				if (start > last) magicString.remove(last, start);
-				last = (0, _marko_compiler_babel_utils.getEnd)(file, child);
+				if (placeholder) magicString.update(start, end, text);
+				last = end;
 			}
-		}
+		} else code += text;
 	}
 	if (magicString) {
 		if (file.code.length > last) magicString.remove(last, file.code.length);
+		code = magicString.toString();
 		map = magicString.generateMap({
 			source: filename,
 			includeContent: true
@@ -8424,6 +8919,7 @@ var core_default = {
 	"<return>": return_default,
 	"<script>": script_default,
 	"<server>": server_default,
+	"<show>": show_default,
 	"<static>": static_default,
 	"<style>": style_default,
 	"<try>": try_default
@@ -8591,6 +9087,7 @@ var placeholder_default = {
 			const section = getOrCreateSection(placeholder);
 			const nodeBinding = (node.extra ??= {})[kNodeBinding] = createBinding("#text", 0, section);
 			analyzeSiblingText(placeholder);
+			addSetupExpr(section, node.value);
 			addSerializeExpr(section, valueExtra, nodeBinding);
 		}
 	},
@@ -8656,23 +9153,49 @@ function buildEscapedTextExpression(value) {
 function analyzeSiblingText(placeholder) {
 	const placeholderExtra = placeholder.node.extra;
 	let prev = placeholder.getPrevSibling();
-	while (prev.node) {
+	let prevParent = placeholder.parentPath;
+	for (;;) {
+		if (!prev.node) {
+			const showTag = getInlinedBodyTag(prevParent);
+			if (showTag) {
+				prev = showTag.getPrevSibling();
+				prevParent = showTag.parentPath;
+				continue;
+			}
+			break;
+		}
 		const contentType = getNodeContentType(prev, "endType");
 		if (contentType === null) prev = prev.getPrevSibling();
 		else if (contentType === 4 || contentType === 1 || contentType === 2) return placeholderExtra[kSiblingText] = 1;
 		else break;
 	}
-	if (!prev.node && _marko_compiler.types.isProgram(placeholder.parent)) return placeholderExtra[kSiblingText] = 1;
+	if (!prev.node && prevParent.isProgram()) return placeholderExtra[kSiblingText] = 1;
 	let next = placeholder.getNextSibling();
-	while (next.node) {
+	let nextParent = placeholder.parentPath;
+	for (;;) {
+		if (!next.node) {
+			const showTag = getInlinedBodyTag(nextParent);
+			if (showTag) {
+				next = showTag.getNextSibling();
+				nextParent = showTag.parentPath;
+				continue;
+			}
+			break;
+		}
 		const contentType = getNodeContentType(next, "startType");
 		if (contentType === null) next = next.getNextSibling();
 		else if (contentType === 4 || contentType === 1 || contentType === 2) return placeholderExtra[kSiblingText] = 2;
 		else break;
 	}
-	if (!next.node && _marko_compiler.types.isProgram(placeholder.parent)) return placeholderExtra[kSiblingText] = 2;
+	if (!next.node && nextParent.isProgram()) return placeholderExtra[kSiblingText] = 2;
 	return placeholderExtra[kSiblingText] = 0;
 }
+function getInlinedBodyTag(parent) {
+	if (parent.isMarkoTagBody()) {
+		const tag = parent.parentPath;
+		if (tag.isMarkoTag() && isCoreTagName(tag, "show")) return tag;
+	}
+}
 function isStaticText(node) {
 	switch (node?.type) {
 		case "MarkoText": return true;
@@ -8819,6 +9342,7 @@ var custom_tag_default = {
 		const childSection = childExtra.section;
 		if (childExtra.page) programExtra.page ??= true;
 		if (tagExtra.tagNameLoad) tagExtra[kLoadTagBinding] = createBinding("#text", 0, getOrCreateSection(tag));
+		if (tagExtra.tagNameLoad || !childExtra.domExports?.setupEmpty) addSetupStatement(getOrCreateSection(tag));
 		knownTagAnalyze(tag, childSection, programSection === childSection ? programSection.params && getBindingPropTree(programSection.params) : childExtra.domExports?.params);
 	} },
 	translate: {
@@ -8887,13 +9411,13 @@ function translateDOM(tag) {
 		injectWalks(tag, tagName);
 		enterShallow(tag);
 	} else if (programSection === childSection) {
-		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName) => getSignal(programSection, binding, preferredName).identifier, (section, childBinding) => {
+		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName) => getSignal(programSection, binding, preferredName).identifier, childExports.setupEmpty ? void 0 : (section, childBinding) => {
 			addStatement("render", section, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(_marko_compiler.types.identifier(childExports.setup), [createScopeReadExpression(childBinding, section)])));
 		});
 		write`${_marko_compiler.types.identifier(childExports.template)}`;
 		injectWalks(tag, tagName, _marko_compiler.types.identifier(childExports.walks));
 	} else {
-		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName, directContent) => importOrSelfReferenceName(tag.hub.file, relativePath, directContent && binding.directContentExport || binding.export, preferredName), (section, childBinding) => {
+		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName, directContent) => importOrSelfReferenceName(tag.hub.file, relativePath, directContent && binding.directContentExport || binding.export, preferredName), childExports.setupEmpty ? void 0 : (section, childBinding) => {
 			addStatement("render", section, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(importOrSelfReferenceName(file, relativePath, childExports.setup, tagName), [createScopeReadExpression(childBinding, section)])));
 		});
 		write`${(0, _marko_compiler_babel_utils.importNamed)(file, relativePath, childExports.template, `${tagName}_template`)}`;
@@ -8967,6 +9491,7 @@ var dynamic_tag_default = {
 	analyze: { enter(tag) {
 		(0, _marko_compiler_babel_utils.assertAttributesOrArgs)(tag);
 		const { node } = tag;
+		addSetupStatement(getOrCreateSection(tag));
 		const definedBodySection = node.extra?.defineBodySection;
 		if (definedBodySection) {
 			knownTagAnalyze(tag, definedBodySection, definedBodySection.params && getBindingPropTree(definedBodySection.params));