marko 6.1.15 → 6.1.16

package/dist/translator/index.js

@@ -1746,7 +1746,17 @@ function isStaticRoot(path) {
 	}
 }
 //#endregion
+//#region src/translator/util/asset-imports.ts
+function addAssetImport(file, request) {
+	(file.metadata.marko.assetImports ??= /* @__PURE__ */ new Set()).add(request);
+}
+function isClientAssetImport(file, request) {
+	const { hydrateIncludeImports } = file.markoOpts;
+	return typeof hydrateIncludeImports === "function" ? hydrateIncludeImports(request) : !!hydrateIncludeImports?.test(request);
+}
+//#endregion
 //#region src/translator/util/binding-prop-tree.ts
+const kDirectContent = Symbol("direct content");
 function getBindingPropTree(binding) {
 	if (pruneBinding(binding)) return;
 	const props = {
@@ -1772,8 +1782,14 @@ function getBindingPropTree(binding) {
 		}
 	}
 	if (binding.type === 2) binding.export ??= generateUid(binding.name);
+	if (isDirectContentBinding(binding)) binding.directContentExport ??= generateUid(`${binding.name}_direct`);
 	return props;
 }
+function isDirectContentBinding(binding) {
+	if (binding.reads.size !== 1) return false;
+	const [read] = binding.reads;
+	return read[kDirectContent] && read.section === binding.section;
+}
 function hasSupersetExcludeProperties(binding, excludeProperties) {
 	if (excludeProperties === void 0) return false;
 	for (const prop of binding.propertyAliases.keys()) if (!propsUtil.has(excludeProperties, prop)) return false;
@@ -1791,6 +1807,11 @@ function hasAllKnownProps(propTree) {
 	return propTree.props && (!propTree.rest || !!propTree.rest.props);
 }
 //#endregion
+//#region src/translator/util/resolve-relative-to-entry.ts
+function resolveRelativeToEntry(entryFile, file, req) {
+	return file === entryFile ? (0, _marko_compiler_babel_utils.resolveRelativePath)(file, req) : (0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, req[0] === "." ? path.default.join(file.opts.filename, "..", req) : req);
+}
+//#endregion
 //#region src/translator/util/entry-builder.ts
 const kState = Symbol();
 var entry_builder_default = {
@@ -1806,21 +1827,58 @@ var entry_builder_default = {
 			const readyId = !isPage && (0, _marko_compiler_babel_utils.getTemplateId)(entryFile.markoOpts, entryFile.opts.filename);
 			const initExpression = _marko_compiler.types.callExpression(_marko_compiler.types.identifier(initHelper), readyId ? runtimeId ? [_marko_compiler.types.stringLiteral(readyId), _marko_compiler.types.stringLiteral(runtimeId)] : [_marko_compiler.types.stringLiteral(readyId)] : runtimeId ? [_marko_compiler.types.stringLiteral(runtimeId)] : []);
 			body.push(exportInit ? _marko_compiler.types.exportDefaultDeclaration(_marko_compiler.types.arrowFunctionExpression([], initExpression)) : _marko_compiler.types.expressionStatement(initExpression));
-		} else if (exportInit) body.push(_marko_compiler.types.exportDefaultDeclaration(_marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([]))));
+		} else {
+			for (const asset of state.assets) body.push(_marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(asset)));
+			if (exportInit) body.push(_marko_compiler.types.exportDefaultDeclaration(_marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([]))));
+		}
 		return body;
 	},
 	visit(file, entryFile, visitChild) {
-		const state = entryFile[kState] ||= { init: false };
+		const state = entryFile[kState] ||= {
+			init: false,
+			assets: /* @__PURE__ */ new Set()
+		};
 		const programExtra = file.path.node.extra;
-		const { analyzedTags } = file.metadata.marko;
+		const { analyzedTags, assetImports } = file.metadata.marko;
 		if (programExtra.isInteractive || programExtra.needsCompat) state.init = true;
+		if (assetImports) for (const request of assetImports) state.assets.add(resolveRelativeToEntry(entryFile, file, request));
 		for (const tag of analyzedTags || []) visitChild(tag);
 	}
 };
 //#endregion
-//#region src/translator/util/resolve-relative-to-entry.ts
-function resolveRelativeToEntry(entryFile, file, req) {
-	return file === entryFile ? (0, _marko_compiler_babel_utils.resolveRelativePath)(file, req) : (0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, req[0] === "." ? path.default.join(file.opts.filename, "..", req) : req);
+//#region src/translator/util/get-style-file.ts
+function getStyleFile(file) {
+	const { filename } = file.opts;
+	const fs = file.markoOpts.fileSystem;
+	const base = getBase(filename);
+	const styleMatch = new RegExp(`^(${escapeRegExp(base)}\\.${"index" === base ? "|" : ""})style\\.\\w+$`);
+	for (const file of fs.readdirSync(path.default.dirname(filename)).sort()) if (styleMatch.test(file)) return `./${file}`;
+}
+/**
+* Given a filename, gets the base name, strips off the file extension
+* and removes any arc flags (https://github.com/eBay/arc).
+*
+* @example
+* getBase("/dir/foo.marko") // => "foo"
+* getBase("/dir/foo.bar.marko") // => "foo.bar"
+* getBase("/dir/foo[bar].marko") // => "foo"
+* getBase("/dir/foo[bar].baz.marko") // => "foo.baz"
+*/
+function getBase(filename) {
+	const start = filename.lastIndexOf(path.default.sep) + 1;
+	const leftDot = filename.indexOf(".", start);
+	if (leftDot === -1) return filename.slice(start);
+	const rightDot = filename.lastIndexOf(".");
+	const closeBracket = leftDot - 1;
+	if (filename[closeBracket] === "]") {
+		const openBracket = filename.lastIndexOf("[", closeBracket);
+		if (openBracket > start) return filename.slice(start, openBracket) + filename.slice(leftDot, rightDot);
+	}
+	return filename.slice(start, rightDot);
+}
+const regexpCharsReg = /[\\^$.*+?()[\]{}|]/g;
+function escapeRegExp(str) {
+	return str.replace(regexpCharsReg, "\\$&");
 }
 //#endregion
 //#region src/common/errors.ts
@@ -2176,6 +2234,7 @@ const pureDOMFunctions = new Set([
 	"_if_closure",
 	"_try",
 	"_dynamic_tag",
+	"_dynamic_tag_content",
 	"_content_closures",
 	"_content",
 	"_template",
@@ -2254,41 +2313,6 @@ function bindingHasProperty(binding, properties) {
 	return false;
 }
 //#endregion
-//#region src/translator/util/get-style-file.ts
-function getStyleFile(file) {
-	const { filename } = file.opts;
-	const fs = file.markoOpts.fileSystem;
-	const base = getBase(filename);
-	const styleMatch = new RegExp(`^(${escapeRegExp(base)}\\.${"index" === base ? "|" : ""})style\\.\\w+$`);
-	for (const file of fs.readdirSync(path.default.dirname(filename)).sort()) if (styleMatch.test(file)) return `./${file}`;
-}
-/**
-* Given a filename, gets the base name, strips off the file extension
-* and removes any arc flags (https://github.com/eBay/arc).
-*
-* @example
-* getBase("/dir/foo.marko") // => "foo"
-* getBase("/dir/foo.bar.marko") // => "foo.bar"
-* getBase("/dir/foo[bar].marko") // => "foo"
-* getBase("/dir/foo[bar].baz.marko") // => "foo.baz"
-*/
-function getBase(filename) {
-	const start = filename.lastIndexOf(path.default.sep) + 1;
-	const leftDot = filename.indexOf(".", start);
-	if (leftDot === -1) return filename.slice(start);
-	const rightDot = filename.lastIndexOf(".");
-	const closeBracket = leftDot - 1;
-	if (filename[closeBracket] === "]") {
-		const openBracket = filename.lastIndexOf("[", closeBracket);
-		if (openBracket > start) return filename.slice(start, openBracket) + filename.slice(leftDot, rightDot);
-	}
-	return filename.slice(start, rightDot);
-}
-const regexpCharsReg = /[\\^$.*+?()[\]{}|]/g;
-function escapeRegExp(str) {
-	return str.replace(regexpCharsReg, "\\$&");
-}
-//#endregion
 //#region src/translator/util/get-known-attr-values.ts
 function getKnownAttrValues(tag) {
 	const attrs = {};
@@ -3064,7 +3088,16 @@ function getSignalFn(signal) {
 		signal.render.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(effectIdentifier, [scopeIdentifier])));
 	}
 	if (isValue && getSerializeReason(section, binding)) signal.hasSideEffect = true;
-	if (!signal.hasSideEffect) return _marko_compiler.types.arrowFunctionExpression(isValue ? [scopeIdentifier, getSignalValueIdentifier(signal)] : [scopeIdentifier], toFirstExpressionOrBlock(signal.render));
+	if (!signal.hasSideEffect) {
+		if (isValue && signal.render.length === 1) {
+			const render = signal.render[0];
+			if (render.type === "ExpressionStatement") {
+				const { expression } = render;
+				if (expression.type === "CallExpression" && expression.callee.type === "Identifier" && expression.arguments.length === 2 && expression.arguments[0] === scopeIdentifier && isOwnValueRead(expression.arguments[1], binding)) return expression.callee;
+			}
+		}
+		return _marko_compiler.types.arrowFunctionExpression(isValue ? [scopeIdentifier, getSignalValueIdentifier(signal)] : [scopeIdentifier], toFirstExpressionOrBlock(signal.render));
+	}
 	if (signal.render.length === 1) {
 		const render = signal.render[0];
 		if (render.type === "ExpressionStatement") {
@@ -3096,6 +3129,11 @@ function getSignalValueIdentifier(signal) {
 	const canonicalBinding = getCanonicalBinding(signal.referencedBindings);
 	return _marko_compiler.types.identifier(canonicalBinding.name);
 }
+function isOwnValueRead(node, binding) {
+	const extra = node.extra;
+	const read = extra?.read;
+	return !!read && !extra.assignment && read.binding === binding && read.props === void 0 && !read.getter?.invoked;
+}
 function subscribe(references, subscriber) {
 	if (references) forEach(references, (binding) => {
 		if (binding.type !== 6) {
@@ -3521,7 +3559,7 @@ var dom_default = { translate: {
 		const inputBinding = program.node.params[0].extra?.binding;
 		const programInputSignal = inputBinding && !inputBinding.pruned ? initValue(inputBinding) : void 0;
 		let extraDecls = decls;
-		const styleFile = getStyleFile(program.hub.file);
+		const styleFile = program.node.extra.styleFile;
 		if (styleFile) (0, _marko_compiler_babel_utils.importDefault)(program.hub.file, styleFile);
 		forEachSectionReverse((childSection) => {
 			if (childSection !== section) {
@@ -3688,322 +3726,309 @@ function getRegisteredFnExpression(node) {
 	if (isRegisteredFnExtra(extra)) return callRuntime("_resume", simplifyFunction(node), _marko_compiler.types.stringLiteral(extra.registerId), (extra.referencedBindingsInFunction || extra.referencesScope) && getScopeIdIdentifier(extra.section));
 }
 //#endregion
-//#region src/translator/core/textarea.ts
-function preAnalyze$1(tag) {
-	if (tag.node.body.body.length) {
-		const parts = [];
-		for (const child of tag.node.body.body) if (child.type === "MarkoText" || child.type === "MarkoPlaceholder" && child.escape) parts.push(child.value);
-		else throw tag.hub.file.hub.buildError(child, "Unexpected content in textarea, only text and placeholders are supported.", SyntaxError);
-		const textValue = normalizeStringExpression(parts);
-		if (textValue) tag.node.attributes.push(_marko_compiler.types.markoAttribute("value", textValue));
-		tag.node.body.body = [];
+//#region src/translator/util/body-to-text-literal.ts
+function bodyToTextLiteral(body) {
+	const templateQuasis = [];
+	const templateExpressions = [];
+	let currentQuasi = "";
+	let placeholderExtra;
+	for (const child of body.body) if (_marko_compiler.types.isMarkoText(child)) currentQuasi += child.value;
+	else if (_marko_compiler.types.isMarkoPlaceholder(child)) {
+		placeholderExtra ||= child.value.extra;
+		templateQuasis.push(templateElement(currentQuasi, false));
+		templateExpressions.push(callRuntime("_to_text", child.value));
+		currentQuasi = "";
+	}
+	if (templateExpressions.length) {
+		templateQuasis.push(templateElement(currentQuasi, true));
+		const literal = _marko_compiler.types.templateLiteral(templateQuasis, templateExpressions);
+		literal.extra = placeholderExtra;
+		return literal;
 	}
+	return _marko_compiler.types.stringLiteral(currentQuasi);
 }
-//#endregion
-//#region src/translator/util/with-previous-location.ts
-function withPreviousLocation(newNode, originalNode) {
-	newNode.start = originalNode.start;
-	newNode.loc = originalNode.loc;
-	newNode.end = originalNode.end;
-	return newNode;
+function templateElement(value, tail) {
+	return _marko_compiler.types.templateElement({
+		raw: escapeTemplateRaw(value),
+		cooked: value
+	}, tail);
 }
 //#endregion
-//#region src/translator/visitors/program/pre-analyze.ts
-const TAG_NAME_IDENTIFIER_REG = /^[A-Z][a-zA-Z0-9_$]*$/;
-const BINDING_CHANGE_HANDLER = /* @__PURE__ */ new WeakMap();
-function preAnalyze(program) {
-	normalizeBody(program.get("body"));
-}
-function normalizeBody(body) {
-	if (body?.length) {
-		for (const child of body) if (child.isMarkoTag()) normalizeTag(child);
-	}
-}
-function normalizeTag(tag) {
-	const { node } = tag;
-	const { name, attributes } = node;
-	let attrNameReg = userAttrNameReg;
-	normalizeBody(tag.get("body").get("body"));
-	normalizeBody(tag.get("attributeTags"));
-	if (node.var) {
-		const insertions = getAssignmentInsertions(node.var);
-		if (insertions) tag.insertAfter(insertions);
-	}
-	if (node.body.params.length) {
-		let insertions;
-		for (const param of node.body.params) insertions = getAssignmentInsertions(param, insertions);
-		if (insertions) node.body.body = [...insertions, ...node.body.body];
-	}
-	if (name.type === "StringLiteral") {
-		const tagName = name.value;
-		if (tag.scope.getBinding(tagName) && TAG_NAME_IDENTIFIER_REG.test(tagName)) node.name = withPreviousLocation(_marko_compiler.types.identifier(tagName), name);
-		else if ((0, _marko_compiler_babel_utils.isNativeTag)(tag)) {
-			attrNameReg = htmlAttrNameReg;
-			switch (tagName) {
-				case "textarea":
-					preAnalyze$1(tag);
-					break;
-			}
-		}
-	}
-	for (let i = 0; i < attributes.length; i++) {
-		const attr = attributes[i];
-		if (_marko_compiler.types.isMarkoAttribute(attr)) {
-			if (attr.bound) {
-				attributes.splice(++i, 0, getChangeHandler(tag, attr));
-				attr.bound = false;
-			} else if (attr.modifier != null) attr.name += ":" + attr.modifier;
-			if (attrNameReg.test(attr.name)) throw tag.hub.buildError(attr.loc?.end && { loc: {
-				start: attr.loc.start,
-				end: {
-					line: attr.loc.start.line,
-					column: attr.loc.start.column + attr.name.length
-				}
-			} }, "Invalid attribute name.");
-			attr.modifier = null;
-		}
-	}
+//#region src/translator/util/is-event-or-change-handler.ts
+function isEventOrChangeHandler(prop) {
+	return /^on[-A-Z][a-zA-Z0-9_$]|[a-zA-Z_$][a-zA-Z0-9_$]*Change$/.test(prop);
 }
-function getChangeHandler(tag, attr) {
-	const changeAttrName = attr.name + "Change";
-	let modifier;
-	if (attr.modifier != null) {
-		if (!_marko_compiler.types.isValidIdentifier(attr.modifier)) throw tag.hub.buildError(attr.value.loc?.end && { loc: {
-			start: {
-				line: attr.value.loc.start.line,
-				column: attr.value.loc.start.column - attr.modifier.length - 2
-			},
-			end: {
-				line: attr.value.loc.start.line,
-				column: attr.value.loc.start.column - 2
-			}
-		} }, "Bound attribute refinement shorthand must be a valid JavaScript identifier.");
-		modifier = withPreviousLocation(_marko_compiler.types.identifier(attr.modifier), attr);
-	}
-	if (_marko_compiler.types.isIdentifier(attr.value)) {
-		const binding = tag.scope.getBinding(attr.value.name);
-		if (!binding) return _marko_compiler.types.markoAttribute(changeAttrName, buildChangeHandlerFunction(attr.value, modifier));
-		const existingChangedAttr = BINDING_CHANGE_HANDLER.get(binding.identifier);
-		if (!existingChangedAttr) {
-			const bindingIdentifierPath = binding.path.getOuterBindingIdentifierPaths()[binding.identifier.name];
-			let changeAttrExpr = bindingIdentifierPath ? bindingIdentifierPath.parentPath === binding.path ? buildChangeHandlerFunction(attr.value, modifier) : bindingIdentifierPath.parentPath.isObjectProperty() ? getChangeHandlerFromObjectPattern(bindingIdentifierPath.parentPath) : void 0 : void 0;
-			if (!changeAttrExpr) throw tag.hub.buildError(attr.value, "Unable to bind to value.");
-			if (modifier && _marko_compiler.types.isIdentifier(changeAttrExpr)) changeAttrExpr = _marko_compiler.types.logicalExpression("&&", changeAttrExpr, buildModifierForwarder(_marko_compiler.types.cloneNode(changeAttrExpr), modifier));
-			const changeHandlerAttr = _marko_compiler.types.markoAttribute(changeAttrName, changeAttrExpr);
-			BINDING_CHANGE_HANDLER.set(binding.identifier, changeHandlerAttr);
-			return changeHandlerAttr;
-		}
-		if (existingChangedAttr.type === "Identifier") return _marko_compiler.types.markoAttribute(changeAttrName, withPreviousLocation(_marko_compiler.types.identifier(existingChangedAttr.name), attr.value));
-		const markoRoot = isMarko(binding.path) ? binding.path : getMarkoRoot(binding.path);
-		if (!(markoRoot?.isMarkoTag() || markoRoot?.isMarkoTagBody())) throw tag.hub.buildError(attr.value, "Unable to bind to value.");
-		const changeHandlerId = generateUid(changeAttrName);
-		const changeHandlerConst = _marko_compiler.types.markoTag(_marko_compiler.types.stringLiteral("const"), [_marko_compiler.types.markoAttribute("value", existingChangedAttr.value, null, null, true)], _marko_compiler.types.markoTagBody([]), null, _marko_compiler.types.identifier(changeHandlerId));
-		BINDING_CHANGE_HANDLER.set(binding.identifier, existingChangedAttr.value = _marko_compiler.types.identifier(changeHandlerId));
-		if (markoRoot.isMarkoTag()) markoRoot.insertAfter(changeHandlerConst);
-		else markoRoot.unshiftContainer("body", changeHandlerConst);
-		return _marko_compiler.types.markoAttribute(changeAttrName, withPreviousLocation(_marko_compiler.types.identifier(changeHandlerId), attr.value));
-	} else if (_marko_compiler.types.isMemberExpression(attr.value) || _marko_compiler.types.isOptionalMemberExpression(attr.value)) {
-		const prop = attr.value.property;
-		if (!_marko_compiler.types.isPrivateName(attr.value.property)) {
-			const memberObj = _marko_compiler.types.cloneNode(attr.value.object);
-			const memberProp = !attr.value.computed && prop.type === "Identifier" ? withPreviousLocation(_marko_compiler.types.identifier(prop.name + "Change"), prop) : _marko_compiler.types.binaryExpression("+", _marko_compiler.types.cloneNode(prop), _marko_compiler.types.stringLiteral("Change"));
-			const computed = memberProp.type !== "Identifier";
-			let changeAttrExpr = attr.value.optional ? _marko_compiler.types.optionalMemberExpression(memberObj, memberProp, computed, true) : _marko_compiler.types.memberExpression(memberObj, memberProp, computed);
-			if (modifier) changeAttrExpr = _marko_compiler.types.logicalExpression("&&", changeAttrExpr, buildModifierForwarder(_marko_compiler.types.memberExpression(memberObj, memberProp, computed), modifier));
-			return _marko_compiler.types.markoAttribute(changeAttrName, changeAttrExpr);
+//#endregion
+//#region src/translator/util/is-non-html-text.ts
+function isNonHTMLText(placeholder) {
+	const parentTag = placeholder.parentPath.isMarkoTagBody() && placeholder.parentPath.parentPath;
+	if (parentTag) {
+		if (isCoreTag(parentTag)) switch (parentTag.node.name.value) {
+			case "html-comment":
+			case "html-script":
+			case "html-style": return true;
 		}
+		else if (isTextOnlyNativeTag(parentTag)) return true;
 	}
-	throw tag.hub.buildError(attr.value, "Attributes may only be bound to identifiers or member expressions");
-}
-function buildModifierForwarder(changeHandler, modifier) {
-	const newValueId = generateUid("next");
-	return _marko_compiler.types.arrowFunctionExpression([_marko_compiler.types.identifier(newValueId)], _marko_compiler.types.blockStatement([_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(changeHandler, [_marko_compiler.types.callExpression(_marko_compiler.types.cloneNode(modifier), [_marko_compiler.types.identifier(newValueId)])]))]));
+	return false;
 }
-function buildChangeHandlerFunction(id, modifier) {
-	const newId = "_new_" + id.name;
-	let newValue = withPreviousLocation(_marko_compiler.types.identifier(newId), id);
-	if (modifier) newValue = _marko_compiler.types.callExpression(modifier, [newValue]);
-	return _marko_compiler.types.arrowFunctionExpression([withPreviousLocation(_marko_compiler.types.identifier(newId), id)], _marko_compiler.types.blockStatement([_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", withPreviousLocation(_marko_compiler.types.identifier(id.name), id), newValue))]));
+function isTextOnlyNativeTag(tag) {
+	const def = (0, _marko_compiler_babel_utils.getTagDef)(tag);
+	return !!(def && def.html && (def.name === "title" || def.parseOptions?.text));
 }
-function getChangeHandlerFromObjectPattern(parent) {
-	let changeKey;
-	const pattern = parent.parentPath;
-	if (parent.node.computed) {
-		changeKey = generateUidIdentifier("dynamicChange");
-		pattern.pushContainer("properties", _marko_compiler.types.objectProperty(_marko_compiler.types.binaryExpression("+", parent.get("key").node, _marko_compiler.types.stringLiteral("Change")), changeKey, true));
-	} else {
-		const searchKey = `${getStringOrIdentifierValue(parent.get("key"))}Change`;
-		for (const prop of pattern.get("properties")) if (prop.isObjectProperty()) {
-			const propKey = prop.get("key");
-			const propValue = prop.get("value");
-			if (!prop.node.computed && getStringOrIdentifierValue(propKey) === searchKey && propValue.isIdentifier()) {
-				changeKey = propValue.node;
+//#endregion
+//#region src/translator/core/for.ts
+const kStatefulReason$1 = Symbol("<for> stateful reason");
+var for_default = {
+	analyze(tag) {
+		const tagSection = getOrCreateSection(tag);
+		const isAttrTag = tag.node.body.attributeTags;
+		const tagBody = tag.get("body");
+		const paramsBinding = trackParamsReferences(tagBody, isAttrTag ? 4 : 5);
+		let allowAttrs;
+		(0, _marko_compiler_babel_utils.assertNoVar)(tag);
+		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
+		assertNoSpreadAttrs(tag);
+		const forType = getForType(tag.node);
+		switch (forType) {
+			case "of":
+				allowAttrs = ["of"];
 				break;
-			}
+			case "in":
+				allowAttrs = ["in"];
+				break;
+			case "to":
+				allowAttrs = [
+					"to",
+					"from",
+					"step"
+				];
+				break;
+			case "until":
+				allowAttrs = [
+					"until",
+					"from",
+					"step"
+				];
+				break;
+			default: throw tag.buildCodeFrameError("The [`<for>` tag](https://markojs.com/docs/reference/core-tag#for) requires an `of=`, `in=`, or `to=` attribute.");
 		}
-		if (!changeKey) pattern.unshiftContainer("properties", _marko_compiler.types.objectProperty(_marko_compiler.types.stringLiteral(searchKey), changeKey = generateUidIdentifier(searchKey)));
-	}
-	return changeKey;
-}
-function getStringOrIdentifierValue(path) {
-	return getLiteralName(path.node);
-}
-function getLiteralName(node) {
-	switch (node.type) {
-		case "Identifier": return node.name;
-		case "StringLiteral": return node.value;
-	}
-}
-function getAssignmentInsertions(node, insertions) {
-	switch (node.type) {
-		case "ObjectPattern":
-			for (const prop of node.properties) if (prop.type === "ObjectProperty") if (prop.value.type === "AssignmentPattern") {
-				const { left, right } = prop.value;
-				const sourceName = generateUid(getLiteralName(left) || getLiteralName(prop.key) || "pattern");
-				prop.shorthand = false;
-				prop.value = _marko_compiler.types.identifier(sourceName);
-				(insertions ||= []).push(toConstTag(left, toFallbackExpr(sourceName, right)));
-				getAssignmentInsertions(left, insertions);
-			} else insertions = getAssignmentInsertions(prop.value, insertions);
-			break;
-		case "ArrayPattern":
-			for (let i = 0, len = node.elements.length; i < len; i++) {
-				const el = node.elements[i];
-				if (el != null) if (el.type === "AssignmentPattern") {
-					const { left, right } = el;
-					const sourceName = generateUid(getLiteralName(left) || "pattern");
-					node.elements[i] = _marko_compiler.types.identifier(sourceName);
-					(insertions ||= []).push(toConstTag(left, toFallbackExpr(sourceName, right)));
-					getAssignmentInsertions(left, insertions);
-				} else insertions = getAssignmentInsertions(el, insertions);
-			}
-			break;
-	}
-	return insertions;
-}
-function toFallbackExpr(id, fallback) {
-	return _marko_compiler.types.conditionalExpression(_marko_compiler.types.binaryExpression("!==", buildUndefined$1(), _marko_compiler.types.identifier(id)), _marko_compiler.types.identifier(id), fallback);
-}
-function toConstTag(id, expr) {
-	return _marko_compiler.types.markoTag(_marko_compiler.types.stringLiteral("const"), [_marko_compiler.types.markoAttribute("value", expr, null, null, true)], _marko_compiler.types.markoTagBody(), null, id);
-}
-function buildUndefined$1() {
-	return _marko_compiler.types.unaryExpression("void", _marko_compiler.types.numericLiteral(0));
-}
-//#endregion
-//#region src/translator/visitors/program/index.ts
-let scopeIdentifier;
-function isScopeIdentifier(node) {
-	return node === scopeIdentifier;
-}
-var program_default = {
-	migrate: {
-		enter(program) {
-			program.node.params = [_marko_compiler.types.identifier("input")];
-		},
-		exit(program) {
-			program.scope.crawl();
+		if (!isAttrTag) allowAttrs.push("by");
+		(0, _marko_compiler_babel_utils.assertAllowedAttributes)(tag, allowAttrs);
+		if (isAttrTag) return;
+		const bodySection = startSection(tagBody);
+		if (!bodySection) {
+			dropNodes(getAllTagReferenceNodes(tag.node));
+			return;
 		}
-	},
-	transform: { exit: preAnalyze },
-	analyze: {
-		enter(program) {
-			startSection(program);
-			trackParamsReferences(program, 2);
-			const programExtra = program.node.extra ??= {};
-			const inputBinding = program.node.params[0].extra?.binding;
-			if (inputBinding) inputBinding.nullable = false;
-			programExtra.domExports = {
-				template: generateUid("template"),
-				walks: generateUid("walks"),
-				setup: generateUid("setup"),
-				params: void 0
-			};
-		},
-		exit(program) {
-			finalizeReferences();
-			const programExtra = program.node.extra;
-			const paramsBinding = programExtra.binding;
-			if (paramsBinding && !paramsBinding.pruned) programExtra.domExports.params = getBindingPropTree(paramsBinding);
+		const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+		const tagExtra = mergeReferences(tagSection, tag.node, getAllTagReferenceNodes(tag.node));
+		addSerializeExpr(tagSection, tagExtra, kStatefulReason$1);
+		if (paramsBinding) {
+			setBindingDownstream(paramsBinding, tagExtra);
+			const keyBinding = paramsBinding.propertyAliases.get(forType === "of" ? "1" : "0");
+			if (keyBinding && !getKnownAttrValues(tag.node).by) {
+				keyBinding.type = 6;
+				keyBinding.scopeAccessor = getAccessorProp().LoopKey;
+			}
 		}
+		bodySection.sectionAccessor = {
+			binding: nodeBinding,
+			prefix: getAccessorPrefix().BranchScopes
+		};
+		bodySection.upstreamExpression = tagExtra;
+		bodySection.isBranch = true;
 	},
-	translate: {
-		enter(program) {
-			scopeIdentifier = isOutputDOM() ? generateUidIdentifier("scope") : null;
-			{
-				const markoOpts = getMarkoOpts();
-				const { output, entry, runtimeId } = markoOpts;
-				const isLoadEntry = entry === "load";
-				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 (isLoadEntry) {
-					const entryFile = program.hub.file;
-					const { filename } = entryFile.opts;
-					program.node.body = [_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("ready"), _marko_compiler.types.identifier("ready"))], _marko_compiler.types.stringLiteral(getRuntimePath("dom"))), _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(_marko_compiler.types.memberExpression(_marko_compiler.types.callExpression(_marko_compiler.types.import(), [_marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename))]), _marko_compiler.types.identifier("then")), [_marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.callExpression(_marko_compiler.types.identifier("ready"), [_marko_compiler.types.stringLiteral(getReadyId(entryFile))]))]))];
-					program.skip();
+	translate: translateByTarget({
+		html: {
+			enter(tag) {
+				if (tag.node.body.attributeTags) return;
+				const bodySection = getSectionForBody(tag.get("body"));
+				if (!bodySection) {
+					tag.remove();
 					return;
 				}
-				if (isDOMPageEntry) {
-					const entryFile = program.hub.file;
-					const { filename } = entryFile.opts;
-					const visitedFiles = new Set([(0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename)]);
-					entry_builder_default.visit(entryFile, entryFile, function visitChild(resolved) {
-						if (!visitedFiles.has(resolved)) {
-							visitedFiles.add(resolved);
-							const file = (0, _marko_compiler_babel_utils.loadFileForImport)(entryFile, resolved);
-							if (file) entry_builder_default.visit(file, entryFile, (id) => visitChild(resolveRelativeToEntry(entryFile, file, id)));
-						}
-					});
-					program.node.body = entry_builder_default.build(entryFile);
-					program.skip();
-					return;
+				setSectionParentIsOwner(bodySection, true);
+				if (!getOnlyChildParentTagName(tag)) {
+					visit(tag, 37);
+					enterShallow(tag);
 				}
-				if (isServerEntry) {
-					const entryFile = program.hub.file;
-					const { filename } = entryFile.opts;
-					const relativeImport = (0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename);
-					const templateId = (0, _marko_compiler_babel_utils.getTemplateId)(markoOpts, filename);
-					const pageAssetArgs = [
-						_marko_compiler.types.identifier("template"),
-						_marko_compiler.types.identifier("flush"),
-						_marko_compiler.types.stringLiteral(templateId)
-					];
-					if (runtimeId) pageAssetArgs.push(_marko_compiler.types.stringLiteral(runtimeId));
-					markoOpts.linkAssets.onAsset("page", filename, templateId);
-					program.node.body = [
-						_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("flush"), _marko_compiler.types.identifier("flush"))], _marko_compiler.types.stringLiteral(markoOpts.linkAssets.runtime)),
-						_marko_compiler.types.importDeclaration([_marko_compiler.types.importDefaultSpecifier(_marko_compiler.types.identifier("template"))], _marko_compiler.types.stringLiteral(relativeImport)),
-						_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("withPageAssets"), _marko_compiler.types.identifier("withPageAssets"))], _marko_compiler.types.stringLiteral(getRuntimePath("html"))),
-						_marko_compiler.types.exportAllDeclaration(_marko_compiler.types.stringLiteral(relativeImport)),
-						_marko_compiler.types.exportDefaultDeclaration(_marko_compiler.types.callExpression(_marko_compiler.types.identifier("withPageAssets"), pageAssetArgs))
-					];
-					program.skip();
-					return;
+				flushBefore(tag);
+			},
+			exit(tag) {
+				if (tag.node.body.attributeTags) return;
+				const tagBody = tag.get("body");
+				const tagSection = getSection(tag);
+				const bodySection = getSectionForBody(tagBody);
+				const { node } = tag;
+				const onlyChildParentTagName = getOnlyChildParentTagName(tag);
+				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				const forAttrs = getKnownAttrValues(node);
+				const forType = getForType(node);
+				const params = node.body.params;
+				const statements = [];
+				const bodyStatements = node.body.body;
+				const singleChild = bodySection.content?.singleChild && bodySection.content.startType !== 4;
+				const branchSerializeReason = getSerializeReason(bodySection, kBranchSerializeReason);
+				const markerSerializeReason = getSerializeReason(tagSection, nodeBinding);
+				flushInto(tag);
+				writeHTMLResumeStatements(tagBody);
+				const forTagArgs = getBaseArgsInForTag(forType, forAttrs);
+				const forTagHTMLRuntime = branchSerializeReason ? forTypeToHTMLResumeRuntime(forType) : forTypeToRuntime(forType);
+				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 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) {
+						getParentTag(tag).node.extra[kSkipEndTag] = true;
+						forTagArgs.push(_marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`));
+					}
+					if (singleChild) {
+						if (!skipParentEnd) forTagArgs.push(_marko_compiler.types.numericLiteral(0));
+						forTagArgs.push(_marko_compiler.types.numericLiteral(1));
+					}
 				}
+				statements.push(_marko_compiler.types.expressionStatement(callRuntime(forTagHTMLRuntime, ...forTagArgs)));
+				for (const replacement of tag.replaceWithMultiple(statements)) replacement.skip();
 			}
-			if (isOutputHTML()) html_default.translate.enter();
-			else dom_default.translate.enter(program);
 		},
-		exit(program) {
-			if (isOutputHTML()) html_default.translate.exit(program);
-			else dom_default.translate.exit(program);
-			if (program.node.extra?.needsCompat) {
-				const compatFile = getCompatRuntimeFile();
-				const body = [void 0];
-				for (const child of program.node.body) if (child.type === "ImportDeclaration" && child.source.value === compatFile) body[0] = child;
-				else body.push(child);
-				body[0] ??= _marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(compatFile));
-				program.node.body = body;
+		dom: {
+			enter(tag) {
+				if (tag.node.body.attributeTags) return;
+				const bodySection = getSectionForBody(tag.get("body"));
+				if (!bodySection) {
+					tag.remove();
+					return;
+				}
+				setSectionParentIsOwner(bodySection, true);
+				if (!getOnlyChildParentTagName(tag)) {
+					visit(tag, 37);
+					enterShallow(tag);
+				}
+			},
+			exit(tag) {
+				if (tag.node.body.attributeTags) return;
+				const tagBody = tag.get("body");
+				const tagSection = getSection(tag);
+				const bodySection = getSectionForBody(tagBody);
+				const { node } = tag;
+				const { referencedBindings } = node.extra;
+				const nodeRef = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				setClosureSignalBuilder(tag, (_closure, render) => {
+					return callRuntime("_for_closure", getScopeAccessorLiteral(nodeRef, true), render);
+				});
+				const forType = getForType(node);
+				const signal = getSignal(tagSection, nodeRef, "for");
+				signal.build = () => {
+					return callRuntime(forTypeToDOMRuntime(forType), getScopeAccessorLiteral(nodeRef, true), ...replaceNullishAndEmptyFunctionsWith0(getBranchRendererArgs(bodySection)));
+				};
+				const forAttrs = getKnownAttrValues(node);
+				const loopArgs = getBaseArgsInForTag(forType, forAttrs);
+				if (forAttrs.by) loopArgs.push(forAttrs.by);
+				addValue(tagSection, referencedBindings, signal, _marko_compiler.types.arrayExpression(loopArgs));
+				tag.remove();
 			}
 		}
-	}
+	}),
+	parseOptions: { controlFlow: true },
+	attributes: {
+		of: {
+			type: "expression",
+			autocomplete: [{ description: "Iterates over a list of items." }]
+		},
+		in: {
+			type: "expression",
+			autocomplete: [{ description: "Iterates over the keys and values of an object." }]
+		},
+		to: {
+			type: "number",
+			autocomplete: [{ description: "Iterates up to the provided number (inclusive)" }]
+		},
+		until: {
+			type: "number",
+			autocomplete: [{ description: "Iterates up to the provided number (exclusive)" }]
+		},
+		from: {
+			type: "number",
+			autocomplete: [{ description: "Iterates starting from the provided number (inclusive)" }]
+		},
+		step: {
+			type: "number",
+			autocomplete: [{ description: "The amount to increment during each iteration (with from/to/until)" }]
+		}
+	},
+	autocomplete: [
+		{
+			snippet: "for|${1:value, index}| of=${3:array}",
+			description: "Use to iterate over lists, object properties, or between ranges.",
+			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
+		},
+		{
+			snippet: "for|${1:name, value}| in=${3:object}",
+			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
+		},
+		{
+			snippet: "for|${1:index}| to=${2:number}",
+			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
+		},
+		{
+			snippet: "for|${1:index}| until=${2:number}",
+			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
+		}
+	]
 };
-//#endregion
-//#region src/translator/util/is-event-or-change-handler.ts
-function isEventOrChangeHandler(prop) {
-	return /^on[-A-Z][a-zA-Z0-9_$]|[a-zA-Z_$][a-zA-Z0-9_$]*Change$/.test(prop);
+function buildForRuntimeCall(type, attrs, params, statements) {
+	return _marko_compiler.types.expressionStatement(callRuntime(forTypeToRuntime(type), ...getBaseArgsInForTag(type, attrs), _marko_compiler.types.arrowFunctionExpression(params, _marko_compiler.types.blockStatement(statements))));
+}
+function getForType(tag) {
+	for (const attr of tag.attributes) if (attr.type === "MarkoAttribute") switch (attr.name) {
+		case "of":
+		case "in":
+		case "to":
+		case "until": return attr.name;
+	}
+}
+function forTypeToRuntime(type) {
+	switch (type) {
+		case "of": return "forOf";
+		case "in": return "forIn";
+		case "to": return "forTo";
+		case "until": return "forUntil";
+	}
+}
+function forTypeToHTMLResumeRuntime(type) {
+	switch (type) {
+		case "of": return "_for_of";
+		case "in": return "_for_in";
+		case "to": return "_for_to";
+		case "until": return "_for_until";
+	}
+}
+function forTypeToDOMRuntime(type) {
+	switch (type) {
+		case "of": return "_for_of";
+		case "in": return "_for_in";
+		case "to": return "_for_to";
+		case "until": return "_for_until";
+	}
+}
+function getBaseArgsInForTag(type, attrs) {
+	switch (type) {
+		case "in": return [attrs.in];
+		case "of": return [attrs.of];
+		case "to": return [
+			attrs.to,
+			attrs.from || _marko_compiler.types.numericLiteral(0),
+			attrs.step || _marko_compiler.types.numericLiteral(1)
+		];
+		case "until": return [
+			attrs.until,
+			attrs.from || _marko_compiler.types.numericLiteral(0),
+			attrs.step || _marko_compiler.types.numericLiteral(1)
+		];
+	}
 }
 //#endregion
 //#region src/translator/util/nested-attribute-tags.ts
@@ -4055,130 +4080,208 @@ function analyzeAttributeTags(tag) {
 			sampleAttrTagsForControlFlow.set(child, name);
 		}
 	}
-	for (const [controlFlowTag, sampleAttrName] of sampleAttrTagsForControlFlow) (controlFlowTag.node.extra ??= {}).attributeTagGroup = lookup[sampleAttrName].group;
-	for (const name in attrTagNodesByName) {
-		const attrTagMeta = lookup[name];
-		if (!attrTagMeta.repeated) {
-			const attrTagNodes = attrTagNodesByName[name];
-			if (attrTagNodes.length > 1) attrTagMeta.repeated = !attrTagMeta.dynamic || hasRepeatedDynamicAttrTags(attrTagNodes);
+	for (const [controlFlowTag, sampleAttrName] of sampleAttrTagsForControlFlow) (controlFlowTag.node.extra ??= {}).attributeTagGroup = lookup[sampleAttrName].group;
+	for (const name in attrTagNodesByName) {
+		const attrTagMeta = lookup[name];
+		if (!attrTagMeta.repeated) {
+			const attrTagNodes = attrTagNodesByName[name];
+			if (attrTagNodes.length > 1) attrTagMeta.repeated = !attrTagMeta.dynamic || hasRepeatedDynamicAttrTags(attrTagNodes);
+		}
+	}
+	return lookup;
+}
+function createAttrTagMeta(name, group) {
+	return {
+		name: name.slice(1),
+		dynamic: false,
+		repeated: false,
+		group
+	};
+}
+function crawlAttrTags(tag, attrTagNodesByName, attrTagNames = /* @__PURE__ */ new Set()) {
+	const attrTags = getAttrTagPaths(tag);
+	for (const child of attrTags) if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
+		const tagName = getTagName(child);
+		attrTagNames.add(tagName);
+		(attrTagNodesByName[tagName] ||= []).push(child);
+		analyzeAttributeTags(child);
+	} else crawlAttrTags(child, attrTagNodesByName, attrTagNames);
+	return attrTagNames;
+}
+function hasRepeatedDynamicAttrTags(attrTags) {
+	let conditionRoot;
+	const seenBranches = /* @__PURE__ */ new Set();
+	for (const attrTag of attrTags) {
+		const parentTag = getParentTag(attrTag);
+		if (seenBranches.has(parentTag) || !isConditionTag(parentTag)) return true;
+		const curConditionRoot = getConditionRoot(parentTag);
+		if (curConditionRoot && curConditionRoot !== (conditionRoot ||= curConditionRoot)) return true;
+		seenBranches.add(parentTag);
+	}
+	return false;
+}
+function getConditionRoot(tag) {
+	if (getTagName(tag) === "if") return tag;
+	let prev = tag.getPrevSibling();
+	while (prev.node) {
+		if (prev.isMarkoTag() && getTagName(prev) === "if") return prev;
+		prev = prev.getPrevSibling();
+	}
+}
+//#endregion
+//#region src/translator/util/translate-attrs.ts
+const contentProps = /* @__PURE__ */ new WeakSet();
+function translateAttrs(tag, propTree = true, skip, statements = [], contentKey = "content") {
+	const contentProperties = [];
+	const attrTagLookup = tag.node.extra?.attributeTags;
+	const seen = new Set(skip);
+	if (attrTagLookup) {
+		for (const name in attrTagLookup) {
+			const attrTagMeta = attrTagLookup[name];
+			if (!seen.has(attrTagMeta.name) && getKnownFromPropTree(propTree, attrTagMeta.name)) {
+				seen.add(attrTagMeta.name);
+				if (attrTagMeta.dynamic) {
+					statements.push(_marko_compiler.types.variableDeclaration("let", [_marko_compiler.types.variableDeclarator(getAttrTagIdentifier(attrTagMeta))]));
+					contentProperties.push(toObjectProperty(attrTagMeta.name, getAttrTagIdentifier(attrTagMeta)));
+				}
+			}
+		}
+		const attrTags = getAttrTagPaths(tag);
+		for (let i = 0; i < attrTags.length; i++) {
+			const child = attrTags[i];
+			if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
+				const attrTagMeta = attrTagLookup[getTagName(child)];
+				if (skip?.has(attrTagMeta.name)) continue;
+				if (attrTagMeta.dynamic) i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
+				else {
+					const translatedAttrTag = translateAttrs(child, getKnownFromPropTree(propTree, attrTagMeta.name), void 0, statements, contentKey);
+					if (attrTagMeta.repeated) {
+						const prevProp = findObjectProperty(attrTagMeta.name, contentProperties);
+						if (prevProp) prevProp.value = callRuntime("attrTags", prevProp.value, propsToExpression(translatedAttrTag.properties));
+						else contentProperties.push(toObjectProperty(attrTagMeta.name, callRuntime("attrTag", propsToExpression(translatedAttrTag.properties))));
+					} else contentProperties.push(toObjectProperty(attrTagMeta.name, callRuntime("attrTag", propsToExpression(translatedAttrTag.properties))));
+				}
+			} else i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
+		}
+	}
+	if (!seen.has(contentKey) && getKnownFromPropTree(propTree, contentKey)) {
+		const contentExpression = buildContent(tag.get("body"));
+		if (contentExpression) {
+			const contentProp = _marko_compiler.types.objectProperty(_marko_compiler.types.identifier(contentKey), contentExpression);
+			seen.add(contentKey);
+			contentProps.add(contentProp);
+			contentProperties.push(contentProp);
+		}
+	}
+	const { attributes } = tag.node;
+	const attrProperties = [];
+	for (let i = attributes.length; i--;) {
+		const attr = attributes[i];
+		const { value } = attr;
+		if (_marko_compiler.types.isMarkoSpreadAttribute(attr)) attrProperties.push(_marko_compiler.types.spreadElement(value));
+		else if (!seen.has(attr.name) && getKnownFromPropTree(propTree, attr.name)) {
+			seen.add(attr.name);
+			attrProperties.push(toObjectProperty(attr.name, value));
 		}
 	}
-	return lookup;
-}
-function createAttrTagMeta(name, group) {
 	return {
-		name: name.slice(1),
-		dynamic: false,
-		repeated: false,
-		group
+		properties: attrProperties.reverse().concat(contentProperties),
+		statements
 	};
 }
-function crawlAttrTags(tag, attrTagNodesByName, attrTagNames = /* @__PURE__ */ new Set()) {
-	const attrTags = getAttrTagPaths(tag);
-	for (const child of attrTags) if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
-		const tagName = getTagName(child);
-		attrTagNames.add(tagName);
-		(attrTagNodesByName[tagName] ||= []).push(child);
-		analyzeAttributeTags(child);
-	} else crawlAttrTags(child, attrTagNodesByName, attrTagNames);
-	return attrTagNames;
-}
-function hasRepeatedDynamicAttrTags(attrTags) {
-	let conditionRoot;
-	const seenBranches = /* @__PURE__ */ new Set();
-	for (const attrTag of attrTags) {
-		const parentTag = getParentTag(attrTag);
-		if (seenBranches.has(parentTag) || !isConditionTag(parentTag)) return true;
-		const curConditionRoot = getConditionRoot(parentTag);
-		if (curConditionRoot && curConditionRoot !== (conditionRoot ||= curConditionRoot)) return true;
-		seenBranches.add(parentTag);
-	}
-	return false;
+function getTranslatedBodyContentProperty(props) {
+	for (const prop of props) if (contentProps.has(prop)) return prop;
 }
-function getConditionRoot(tag) {
-	if (getTagName(tag) === "if") return tag;
-	let prev = tag.getPrevSibling();
-	while (prev.node) {
-		if (prev.isMarkoTag() && getTagName(prev) === "if") return prev;
-		prev = prev.getPrevSibling();
+function addDynamicAttrTagStatements(attrTags, index, attrTagLookup, statements, propTree, contentKey = "content") {
+	const tag = attrTags[index];
+	if (tag.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(tag)) {
+		const attrTagMeta = attrTagLookup[getTagName(tag)];
+		const attrTagExport = getKnownFromPropTree(propTree, attrTagMeta.name);
+		if (attrTagExport && attrTagMeta.dynamic) {
+			const translatedAttrTag = translateAttrs(tag, attrTagExport, void 0, statements, contentKey);
+			if (attrTagMeta.repeated) statements.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", getAttrTagIdentifier(attrTagMeta), callRuntime("attrTags", getAttrTagIdentifier(attrTagMeta), propsToExpression(translatedAttrTag.properties)))));
+			else statements.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", getAttrTagIdentifier(attrTagMeta), callRuntime("attrTag", propsToExpression(translatedAttrTag.properties)))));
+		}
+	} else switch (getTagName(tag)) {
+		case "if": return translateIfAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey);
+		case "for": return translateForAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey);
 	}
+	return index;
 }
-//#endregion
-//#region src/translator/util/set-tag-sections-downstream.ts
-const [getTagDownstreams] = createSectionState("tag-downstreams", () => /* @__PURE__ */ new Map());
-function setTagDownstream(tag, binding) {
-	if (binding) getTagDownstreams(getSection(tag)).set(tag, binding);
+function propsToExpression(props) {
+	return props.length === 1 && _marko_compiler.types.isSpreadElement(props[0]) ? props[0].argument : _marko_compiler.types.objectExpression(props);
 }
-function finalizeTagDownstreams(section) {
-	for (const [tag, binding] of getTagDownstreams(section)) crawlSectionsAndSetBinding(tag, binding);
+function translateForAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey) {
+	const forTag = attrTags[index];
+	const bodyStatements = [];
+	addAllAttrTagsAsDynamic(forTag, attrTagLookup, bodyStatements, propTree, contentKey);
+	statements.push(buildForRuntimeCall(getForType(forTag.node), getKnownAttrValues(forTag.node), forTag.node.body.params, bodyStatements));
+	return index;
 }
-function crawlSectionsAndSetBinding(tag, binding, properties, skip) {
-	if (!skip) {
-		const contentSection = getSectionForBody(tag.get("body"));
-		if (contentSection) {
-			let target = binding;
-			forEach(properties, (property) => {
-				target = target?.propertyAliases.get(property);
-			});
-			contentSection.downstreamBinding = target && (target.noSerialize || includes(target.noSerializeProperties, "content")) ? false : {
-				binding,
-				properties: concat(properties, "content")
-			};
+function translateIfAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey) {
+	const ifTag = attrTags[index];
+	const consequentStatements = [];
+	let ifStatement = _marko_compiler.types.ifStatement(getConditionTestValue(ifTag), _marko_compiler.types.blockStatement(consequentStatements));
+	statements.push(ifStatement);
+	addAllAttrTagsAsDynamic(ifTag, attrTagLookup, consequentStatements, propTree, contentKey);
+	let nextIndex = index + 1;
+	while (nextIndex < attrTags.length) {
+		const nextTag = attrTags[nextIndex];
+		if (nextTag.isMarkoTag()) switch (getTagName(nextTag)) {
+			case "else-if":
+			case "else": {
+				const testValue = getConditionTestValue(nextTag);
+				const alternateStatements = [];
+				addAllAttrTagsAsDynamic(nextTag, attrTagLookup, alternateStatements, propTree, contentKey);
+				if (testValue) {
+					ifStatement.alternate = ifStatement = _marko_compiler.types.ifStatement(testValue, _marko_compiler.types.blockStatement(alternateStatements));
+					nextIndex++;
+					continue;
+				} else {
+					ifStatement.alternate = _marko_compiler.types.blockStatement(alternateStatements);
+					break;
+				}
+			}
 		}
+		break;
 	}
-	const attrTagLookup = analyzeAttributeTags(tag);
-	if (!attrTagLookup) return;
+	return nextIndex - 1;
+}
+function addAllAttrTagsAsDynamic(tag, attrTagLookup, statements, propTree, contentKey) {
 	const attrTags = getAttrTagPaths(tag);
-	for (const child of attrTags) if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
-		const attrTagMeta = attrTagLookup[getTagName(child)];
-		crawlSectionsAndSetBinding(child, binding, concat(properties, attrTagMeta.name));
-	} else crawlSectionsAndSetBinding(child, binding, properties, true);
+	for (let i = 0; i < attrTags.length; i++) i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
 }
-//#endregion
-//#region src/translator/util/body-to-text-literal.ts
-function bodyToTextLiteral(body) {
-	const templateQuasis = [];
-	const templateExpressions = [];
-	let currentQuasi = "";
-	let placeholderExtra;
-	for (const child of body.body) if (_marko_compiler.types.isMarkoText(child)) currentQuasi += child.value;
-	else if (_marko_compiler.types.isMarkoPlaceholder(child)) {
-		placeholderExtra ||= child.value.extra;
-		templateQuasis.push(templateElement(currentQuasi, false));
-		templateExpressions.push(callRuntime("_to_text", child.value));
-		currentQuasi = "";
-	}
-	if (templateExpressions.length) {
-		templateQuasis.push(templateElement(currentQuasi, true));
-		const literal = _marko_compiler.types.templateLiteral(templateQuasis, templateExpressions);
-		literal.extra = placeholderExtra;
-		return literal;
+function findObjectProperty(name, props) {
+	for (const prop of props) if (prop.type === "ObjectProperty") switch (prop.key.type) {
+		case "StringLiteral":
+			if (prop.key.value === name) return prop;
+			break;
+		case "Identifier":
+			if (prop.key.name === name) return prop;
+			break;
 	}
-	return _marko_compiler.types.stringLiteral(currentQuasi);
+	return false;
 }
-function templateElement(value, tail) {
-	return _marko_compiler.types.templateElement({
-		raw: escapeTemplateRaw(value),
-		cooked: value
-	}, tail);
+function getConditionTestValue({ node: { attributes } }) {
+	return attributes.length === 1 ? attributes[0].value : void 0;
 }
-//#endregion
-//#region src/translator/util/is-non-html-text.ts
-function isNonHTMLText(placeholder) {
-	const parentTag = placeholder.parentPath.isMarkoTagBody() && placeholder.parentPath.parentPath;
-	if (parentTag) {
-		if (isCoreTag(parentTag)) switch (parentTag.node.name.value) {
-			case "html-comment":
-			case "html-script":
-			case "html-style": return true;
+function buildContent(body) {
+	const bodySection = body.node.extra?.section;
+	if (bodySection) if (isOutputHTML()) {
+		const serialized = getSectionRegisterReasons(bodySection);
+		let dynamicSerializeReason = !!bodySection.paramReasonGroups || isReasonDynamic(bodySection.serializeReason);
+		if (!dynamicSerializeReason) {
+			for (const reason of bodySection.serializeReasons.values()) if (isReasonDynamic(reason)) {
+				dynamicSerializeReason = true;
+				break;
+			}
 		}
-		else if (isTextOnlyNativeTag(parentTag)) return true;
-	}
-	return false;
-}
-function isTextOnlyNativeTag(tag) {
-	const def = (0, _marko_compiler_babel_utils.getTagDef)(tag);
-	return !!(def && def.html && (def.name === "title" || def.parseOptions?.text));
+		if (dynamicSerializeReason) body.node.body.unshift(getScopeReasonDeclaration(bodySection));
+		else body.node.body.unshift(_marko_compiler.types.expressionStatement(callRuntime("_scope_reason")));
+		return callRuntime(serialized ? "_content_resume" : "_content", _marko_compiler.types.stringLiteral(getResumeRegisterId(bodySection, "content")), _marko_compiler.types.arrowFunctionExpression(body.node.params, _marko_compiler.types.blockStatement(body.node.body)), serialized ? getScopeIdIdentifier(getSection(getAttributeTagParent(body.parentPath))) : void 0);
+	} else return _marko_compiler.types.callExpression(_marko_compiler.types.identifier(bodySection.name), bodySection.referencedLocalClosures ? [scopeIdentifier, _marko_compiler.types.objectExpression(toArray(bodySection.referencedLocalClosures, (ref) => {
+		return toObjectProperty(getScopeAccessor(ref, true), getDeclaredBindingExpression(ref));
+	}))] : [scopeIdentifier]);
 }
 //#endregion
 //#region src/translator/visitors/tag/native-tag.ts
@@ -4308,8 +4411,8 @@ var native_tag_default = {
 				let writeAtStartOfBody;
 				if (tagName === "select") {
 					if (staticControllable) htmlSelectArgs.set(tag.node, {
-						value: staticControllable.attrs[0]?.value || buildUndefined(),
-						valueChange: staticControllable.attrs[1]?.value || buildUndefined()
+						value: staticControllable.attrs[0]?.value || buildUndefined$1(),
+						valueChange: staticControllable.attrs[1]?.value || buildUndefined$1()
 					});
 					else if (spreadExpression) {
 						const spreadIdentifier = generateUidIdentifier("select_input");
@@ -4749,7 +4852,7 @@ function isDynamicControllable(controllable) {
 	if (controllable) return controllable.special || !!(controllable.attrs[1] || controllable.attrs.find(Boolean).value.extra?.referencedBindings);
 	return false;
 }
-function buildUndefined() {
+function buildUndefined$1() {
 	return _marko_compiler.types.unaryExpression("void", _marko_compiler.types.numericLiteral(0));
 }
 //#endregion
@@ -4768,415 +4871,668 @@ function getOptimizedOnlyChildNodeBinding(tag, section, branchSize = 1) {
 		const parentTagName = parentTag.name?.value;
 		return (parentTag.extra ??= {})[kNativeTagBinding] ??= createBinding("#" + parentTagName, 0, section);
 	} else return (tag.node.extra ??= {})[kNodeRef] ??= createBinding("#text", 0, section);
-}
-//#endregion
-//#region src/translator/core/for.ts
-const kStatefulReason$1 = Symbol("<for> stateful reason");
-var for_default = {
-	analyze(tag) {
-		const tagSection = getOrCreateSection(tag);
-		const isAttrTag = tag.node.body.attributeTags;
-		const tagBody = tag.get("body");
-		const paramsBinding = trackParamsReferences(tagBody, isAttrTag ? 4 : 5);
-		let allowAttrs;
-		(0, _marko_compiler_babel_utils.assertNoVar)(tag);
-		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
-		assertNoSpreadAttrs(tag);
-		const forType = getForType(tag.node);
-		switch (forType) {
-			case "of":
-				allowAttrs = ["of"];
-				break;
-			case "in":
-				allowAttrs = ["in"];
-				break;
-			case "to":
-				allowAttrs = [
-					"to",
-					"from",
-					"step"
-				];
-				break;
-			case "until":
-				allowAttrs = [
-					"until",
-					"from",
-					"step"
-				];
-				break;
-			default: throw tag.buildCodeFrameError("The [`<for>` tag](https://markojs.com/docs/reference/core-tag#for) requires an `of=`, `in=`, or `to=` attribute.");
-		}
-		if (!isAttrTag) allowAttrs.push("by");
-		(0, _marko_compiler_babel_utils.assertAllowedAttributes)(tag, allowAttrs);
-		if (isAttrTag) return;
-		const bodySection = startSection(tagBody);
-		if (!bodySection) {
-			dropNodes(getAllTagReferenceNodes(tag.node));
-			return;
-		}
-		const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
-		const tagExtra = mergeReferences(tagSection, tag.node, getAllTagReferenceNodes(tag.node));
-		addSerializeExpr(tagSection, tagExtra, kStatefulReason$1);
-		if (paramsBinding) {
-			setBindingDownstream(paramsBinding, tagExtra);
-			const keyBinding = paramsBinding.propertyAliases.get(forType === "of" ? "1" : "0");
-			if (keyBinding && !getKnownAttrValues(tag.node).by) {
-				keyBinding.type = 6;
-				keyBinding.scopeAccessor = getAccessorProp().LoopKey;
+}
+//#endregion
+//#region src/translator/util/to-first-statement-or-block.ts
+function toFirstStatementOrBlock(body) {
+	if (Array.isArray(body)) {
+		if (body.length === 1) return body[0];
+		return _marko_compiler.types.blockStatement(body);
+	}
+	return body;
+}
+//#endregion
+//#region src/translator/core/if.ts
+const kStatefulReason = Symbol("<if> stateful reason");
+const BRANCHES_LOOKUP = /* @__PURE__ */ new WeakMap();
+const IfTag = {
+	analyze(tag) {
+		assertValidCondition(tag);
+		if (tag.node.body.attributeTags) return;
+		if (isLastBranch(tag)) {
+			const branches = getBranches(tag);
+			const [ifTag] = branches[0];
+			const ifTagSection = getOrCreateSection(ifTag);
+			const ifTagExtra = ifTag.node.extra ??= {};
+			const mergeReferenceNodes = [];
+			const sectionAccessor = {
+				binding: getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection, branches.length),
+				prefix: getAccessorPrefix().BranchScopes
+			};
+			for (const [branchTag, branchBodySection] of branches) {
+				if (branchBodySection) {
+					branchBodySection.isBranch = true;
+					branchBodySection.upstreamExpression = ifTagExtra;
+					branchBodySection.sectionAccessor = sectionAccessor;
+				}
+				if (branchTag.node.attributes.length) mergeReferenceNodes.push(branchTag.node.attributes[0].value);
 			}
+			mergeReferences(ifTagSection, ifTag.node, mergeReferenceNodes);
+			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason);
 		}
-		bodySection.sectionAccessor = {
-			binding: nodeBinding,
-			prefix: getAccessorPrefix().BranchScopes
-		};
-		bodySection.upstreamExpression = tagExtra;
-		bodySection.isBranch = true;
 	},
 	translate: translateByTarget({
 		html: {
 			enter(tag) {
 				if (tag.node.body.attributeTags) return;
 				const bodySection = getSectionForBody(tag.get("body"));
-				if (!bodySection) {
-					tag.remove();
-					return;
-				}
-				setSectionParentIsOwner(bodySection, true);
-				if (!getOnlyChildParentTagName(tag)) {
+				if (isRoot(tag) && !getOnlyChildParentTagName(tag)) {
 					visit(tag, 37);
 					enterShallow(tag);
 				}
 				flushBefore(tag);
+				if (bodySection) setSectionParentIsOwner(bodySection, true);
 			},
 			exit(tag) {
 				if (tag.node.body.attributeTags) return;
 				const tagBody = tag.get("body");
-				const tagSection = getSection(tag);
-				const bodySection = getSectionForBody(tagBody);
-				const { node } = tag;
-				const onlyChildParentTagName = getOnlyChildParentTagName(tag);
-				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
-				const forAttrs = getKnownAttrValues(node);
-				const forType = getForType(node);
-				const params = node.body.params;
-				const statements = [];
-				const bodyStatements = node.body.body;
-				const singleChild = bodySection.content?.singleChild && bodySection.content.startType !== 4;
-				const branchSerializeReason = getSerializeReason(bodySection, kBranchSerializeReason);
-				const markerSerializeReason = getSerializeReason(tagSection, nodeBinding);
-				flushInto(tag);
-				writeHTMLResumeStatements(tagBody);
-				const forTagArgs = getBaseArgsInForTag(forType, forAttrs);
-				const forTagHTMLRuntime = branchSerializeReason ? forTypeToHTMLResumeRuntime(forType) : forTypeToRuntime(forType);
-				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 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) {
-						getParentTag(tag).node.extra[kSkipEndTag] = true;
-						forTagArgs.push(_marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`));
+				if (getSectionForBody(tagBody)) {
+					flushInto(tag);
+					writeHTMLResumeStatements(tagBody);
+				}
+				if (isLastBranch(tag)) {
+					const branches = getBranches(tag);
+					const [ifTag] = branches[0];
+					const ifTagSection = getSection(ifTag);
+					const nodeBinding = getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection);
+					const onlyChildParentTagName = getOnlyChildParentTagName(ifTag);
+					const markerSerializeReason = getSerializeReason(ifTagSection, nodeBinding);
+					const nextTag = tag.getNextSibling();
+					let branchSerializeReasons;
+					let statement;
+					let singleChild = true;
+					for (const [, branchBody] of branches) if (!(branchBody?.content?.singleChild && branchBody.content.startType !== 4)) {
+						singleChild = false;
+						break;
 					}
-					if (singleChild) {
-						if (!skipParentEnd) forTagArgs.push(_marko_compiler.types.numericLiteral(0));
-						forTagArgs.push(_marko_compiler.types.numericLiteral(1));
+					for (let i = branches.length; i--;) {
+						const [branchTag, branchBody] = branches[i];
+						const bodyStatements = branchTag.node.body.body;
+						if (branchBody) {
+							const branchSerializeReason = getSerializeReason(branchBody, kBranchSerializeReason);
+							if (branchSerializeReason) {
+								if (branchSerializeReasons !== true) if (branchSerializeReason === true || branchSerializeReason.state) branchSerializeReasons = true;
+								else if (branchSerializeReasons) branchSerializeReasons = addSorted(compareSources, branchSerializeReasons, branchSerializeReason);
+								else branchSerializeReasons = [branchSerializeReason];
+								bodyStatements.push(_marko_compiler.types.returnStatement(_marko_compiler.types.numericLiteral(i)));
+							}
+						}
+						const [testAttr] = branchTag.node.attributes;
+						const curStatement = toFirstStatementOrBlock(bodyStatements);
+						if (testAttr) statement = _marko_compiler.types.ifStatement(testAttr.value, curStatement, statement);
+						else statement = curStatement;
+						branchTag.remove();
+					}
+					if (branchSerializeReasons) {
+						const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
+						if (skipParentEnd) getParentTag(ifTag).node.extra[kSkipEndTag] = true;
+						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason), !(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));
 					}
+					nextTag.insertBefore(statement);
 				}
-				statements.push(_marko_compiler.types.expressionStatement(callRuntime(forTagHTMLRuntime, ...forTagArgs)));
-				for (const replacement of tag.replaceWithMultiple(statements)) replacement.skip();
 			}
 		},
 		dom: {
 			enter(tag) {
 				if (tag.node.body.attributeTags) return;
 				const bodySection = getSectionForBody(tag.get("body"));
-				if (!bodySection) {
-					tag.remove();
-					return;
-				}
-				setSectionParentIsOwner(bodySection, true);
-				if (!getOnlyChildParentTagName(tag)) {
+				if (bodySection) setSectionParentIsOwner(bodySection, true);
+				if (isRoot(tag) && !getOnlyChildParentTagName(tag)) {
 					visit(tag, 37);
 					enterShallow(tag);
 				}
 			},
 			exit(tag) {
 				if (tag.node.body.attributeTags) return;
-				const tagBody = tag.get("body");
-				const tagSection = getSection(tag);
-				const bodySection = getSectionForBody(tagBody);
-				const { node } = tag;
-				const { referencedBindings } = node.extra;
-				const nodeRef = getOptimizedOnlyChildNodeBinding(tag, tagSection);
-				setClosureSignalBuilder(tag, (_closure, render) => {
-					return callRuntime("_for_closure", getScopeAccessorLiteral(nodeRef, true), render);
-				});
-				const forType = getForType(node);
-				const signal = getSignal(tagSection, nodeRef, "for");
-				signal.build = () => {
-					return callRuntime(forTypeToDOMRuntime(forType), getScopeAccessorLiteral(nodeRef, true), ...replaceNullishAndEmptyFunctionsWith0(getBranchRendererArgs(bodySection)));
-				};
-				const forAttrs = getKnownAttrValues(node);
-				const loopArgs = getBaseArgsInForTag(forType, forAttrs);
-				if (forAttrs.by) loopArgs.push(forAttrs.by);
-				addValue(tagSection, referencedBindings, signal, _marko_compiler.types.arrayExpression(loopArgs));
-				tag.remove();
+				if (isLastBranch(tag)) {
+					const branches = getBranches(tag);
+					const [ifTag] = branches[0];
+					const ifTagSection = getSection(ifTag);
+					const ifTagExtra = branches[0][0].node.extra;
+					const nodeRef = getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection);
+					let expr = _marko_compiler.types.numericLiteral(branches.length);
+					for (let i = branches.length; i--;) {
+						const [branchTag, branchBodySection] = branches[i];
+						const [testAttr] = branchTag.node.attributes;
+						const consequent = _marko_compiler.types.numericLiteral(branchBodySection ? i : -1);
+						if (branchBodySection) setClosureSignalBuilder(branchTag, (_closure, render) => {
+							return callRuntime("_if_closure", getScopeAccessorLiteral(nodeRef, true), _marko_compiler.types.numericLiteral(i), render);
+						});
+						branchTag.remove();
+						expr = testAttr ? _marko_compiler.types.conditionalExpression(testAttr.value, consequent, expr) : consequent;
+					}
+					const signal = getSignal(ifTagSection, nodeRef, "if");
+					signal.build = () => {
+						const rendererArgs = [];
+						for (const [_, branchBodySection] of branches) if (branchBodySection) rendererArgs.push(...getBranchRendererArgs(branchBodySection).slice(0, 3));
+						else rendererArgs.push(void 0, void 0, void 0);
+						return callRuntime("_if", getScopeAccessorLiteral(nodeRef, true), ...replaceNullishAndEmptyFunctionsWith0(rendererArgs));
+					};
+					addValue(ifTagSection, ifTagExtra.referencedBindings, signal, expr);
+				}
 			}
 		}
 	}),
 	parseOptions: { controlFlow: true },
-	attributes: {
-		of: {
-			type: "expression",
-			autocomplete: [{ description: "Iterates over a list of items." }]
-		},
-		in: {
-			type: "expression",
-			autocomplete: [{ description: "Iterates over the keys and values of an object." }]
-		},
-		to: {
-			type: "number",
-			autocomplete: [{ description: "Iterates up to the provided number (inclusive)" }]
-		},
-		until: {
-			type: "number",
-			autocomplete: [{ description: "Iterates up to the provided number (exclusive)" }]
-		},
-		from: {
-			type: "number",
-			autocomplete: [{ description: "Iterates starting from the provided number (inclusive)" }]
-		},
-		step: {
-			type: "number",
-			autocomplete: [{ description: "The amount to increment during each iteration (with from/to/until)" }]
-		}
-	},
-	autocomplete: [
-		{
-			snippet: "for|${1:value, index}| of=${3:array}",
-			description: "Use to iterate over lists, object properties, or between ranges.",
-			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
-		},
-		{
-			snippet: "for|${1:name, value}| in=${3:object}",
-			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
-		},
-		{
-			snippet: "for|${1:index}| to=${2:number}",
-			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
-		},
-		{
-			snippet: "for|${1:index}| until=${2:number}",
-			descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#for"
-		}
-	]
+	autocomplete: [{
+		snippet: "if=${1:condition}",
+		description: "Use to display content only if the condition is met.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+	}]
 };
-function buildForRuntimeCall(type, attrs, params, statements) {
-	return _marko_compiler.types.expressionStatement(callRuntime(forTypeToRuntime(type), ...getBaseArgsInForTag(type, attrs), _marko_compiler.types.arrowFunctionExpression(params, _marko_compiler.types.blockStatement(statements))));
+const ElseIfTag = {
+	...IfTag,
+	autocomplete: [{
+		snippet: "else-if=${1:condition}",
+		description: "Use after an <if> or <else-if> tag to display content if those conditions do not match and this one does.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+	}]
+};
+const ElseTag = {
+	...IfTag,
+	autocomplete: [{
+		description: "Use after an <if> or <else-if> tag to display content if those conditions do not match.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+	}]
+};
+function flattenTextOnlyConditional(rootTag) {
+	if (!isCoreTagName(rootTag, "if")) return;
+	const tagBody = rootTag.parentPath;
+	if (!tagBody.isMarkoTagBody()) return;
+	const parentTag = tagBody.parentPath;
+	if (!parentTag.isMarkoTag() || analyzeTagNameType(parentTag) !== 0) return;
+	const { _escape } = getHTMLRuntime();
+	const branches = [];
+	let cur = rootTag;
+	do {
+		const tag = cur;
+		const { node } = tag;
+		const body = node.body.body;
+		if (node.body.attributeTags || !body.length) return;
+		const [attr] = node.attributes;
+		if (isCoreTagName(tag, "else")) {
+			if (node.attributes.length) return;
+		} else if (node.attributes.length !== 1 || !_marko_compiler.types.isMarkoAttribute(attr) || !attr.default) return;
+		for (const child of body) if (_marko_compiler.types.isMarkoText(child)) {
+			if (_escape(child.value) !== child.value) return;
+		} else if (!_marko_compiler.types.isMarkoPlaceholder(child) || !child.escape) return;
+		branches.push(tag);
+		let next = cur.getNextSibling();
+		while (next.node && next.isMarkoComment()) next = next.getNextSibling();
+		cur = next;
+	} while (cur.node && (isCoreTagName(cur, "else-if") || isCoreTagName(cur, "else")));
+	for (const branchTag of branches) assertValidCondition(branchTag);
+	let expr = _marko_compiler.types.stringLiteral("");
+	for (let i = branches.length; i--;) {
+		const branchTag = branches[i];
+		const text = bodyToTextLiteral(branchTag.node.body);
+		expr = isCoreTagName(branchTag, "else") ? text : _marko_compiler.types.conditionalExpression(branchTag.node.attributes[0].value, text, expr);
+	}
+	for (let i = branches.length; i-- > 1;) branches[i].remove();
+	rootTag.replaceWith(_marko_compiler.types.markoPlaceholder(expr, true));
 }
-function getForType(tag) {
-	for (const attr of tag.attributes) if (attr.type === "MarkoAttribute") switch (attr.name) {
-		case "of":
-		case "in":
-		case "to":
-		case "until": return attr.name;
+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);
+	assertNoSpreadAttrs(tag);
+	switch (getTagName(tag)) {
+		case "if":
+			assertHasValueAttribute(tag);
+			break;
+		case "else-if":
+			assertHasValueAttribute(tag);
+			assertHasPrecedingCondition(tag);
+			break;
+		case "else":
+			assertOptionalIfAttribute(tag);
+			assertHasPrecedingCondition(tag);
+			break;
 	}
 }
-function forTypeToRuntime(type) {
-	switch (type) {
-		case "of": return "forOf";
-		case "in": return "forIn";
-		case "to": return "forTo";
-		case "until": return "forUntil";
+function assertHasPrecedingCondition(tag) {
+	let prev = tag.getPrevSibling();
+	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) {
+	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) {
+	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).`);
+	if (node.attributes.length > 1) {
+		const start = node.attributes[1].loc?.start;
+		const end = node.attributes[node.attributes.length - 1].loc?.end;
+		const msg = `The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) only supports the [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`;
+		if (start == null || end == null) throw tag.get("name").buildCodeFrameError(msg);
+		else throw tag.hub.buildError({ loc: {
+			start,
+			end
+		} }, msg, Error);
 	}
 }
-function forTypeToHTMLResumeRuntime(type) {
-	switch (type) {
-		case "of": return "_for_of";
-		case "in": return "_for_in";
-		case "to": return "_for_to";
-		case "until": return "_for_until";
+function assertOptionalIfAttribute(tag) {
+	const { node } = tag;
+	const [ifAttr] = node.attributes;
+	if (node.attributes.length > 1 || ifAttr && ifAttr.name !== "if") {
+		const start = node.attributes[0].loc?.start;
+		const end = node.attributes[node.attributes.length - 1].loc?.end;
+		const msg = `The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) only supports an \`if=\` attribute.`;
+		if (start == null || end == null) throw tag.get("name").buildCodeFrameError(msg);
+		else throw tag.hub.buildError({ loc: {
+			start,
+			end
+		} }, msg, Error);
 	}
 }
-function forTypeToDOMRuntime(type) {
-	switch (type) {
-		case "of": return "_for_of";
-		case "in": return "_for_in";
-		case "to": return "_for_to";
-		case "until": return "_for_until";
+function getBranches(tag) {
+	let branches = BRANCHES_LOOKUP.get(tag);
+	if (!branches) {
+		let curTag = tag;
+		branches = [];
+		do {
+			BRANCHES_LOOKUP.set(curTag, branches);
+			branches.push([curTag, startSection(curTag.get("body"))]);
+			while ((curTag = curTag.getNextSibling()).isMarkoComment());
+		} while (isCoreTagName(curTag, "else") || isCoreTagName(curTag, "else-if"));
 	}
+	return branches;
 }
-function getBaseArgsInForTag(type, attrs) {
-	switch (type) {
-		case "in": return [attrs.in];
-		case "of": return [attrs.of];
-		case "to": return [
-			attrs.to,
-			attrs.from || _marko_compiler.types.numericLiteral(0),
-			attrs.step || _marko_compiler.types.numericLiteral(1)
-		];
-		case "until": return [
-			attrs.until,
-			attrs.from || _marko_compiler.types.numericLiteral(0),
-			attrs.step || _marko_compiler.types.numericLiteral(1)
-		];
+function isLastBranch(tag) {
+	const branches = getBranches(tag);
+	return branches[branches.length - 1][0] === tag;
+}
+function isRoot(tag) {
+	return isCoreTagName(tag, "if");
+}
+//#endregion
+//#region src/translator/core/textarea.ts
+function preAnalyze$1(tag) {
+	if (tag.node.body.body.length) {
+		const parts = [];
+		for (const child of tag.node.body.body) if (child.type === "MarkoText" || child.type === "MarkoPlaceholder" && child.escape) parts.push(child.value);
+		else throw tag.hub.file.hub.buildError(child, "Unexpected content in textarea, only text and placeholders are supported.", SyntaxError);
+		const textValue = normalizeStringExpression(parts);
+		if (textValue) tag.node.attributes.push(_marko_compiler.types.markoAttribute("value", textValue));
+		tag.node.body.body = [];
 	}
 }
 //#endregion
-//#region src/translator/util/translate-attrs.ts
-const contentProps = /* @__PURE__ */ new WeakSet();
-function translateAttrs(tag, propTree = true, skip, statements = [], contentKey = "content") {
-	const contentProperties = [];
-	const attrTagLookup = tag.node.extra?.attributeTags;
-	const seen = new Set(skip);
-	if (attrTagLookup) {
-		for (const name in attrTagLookup) {
-			const attrTagMeta = attrTagLookup[name];
-			if (!seen.has(attrTagMeta.name) && getKnownFromPropTree(propTree, attrTagMeta.name)) {
-				seen.add(attrTagMeta.name);
-				if (attrTagMeta.dynamic) {
-					statements.push(_marko_compiler.types.variableDeclaration("let", [_marko_compiler.types.variableDeclarator(getAttrTagIdentifier(attrTagMeta))]));
-					contentProperties.push(toObjectProperty(attrTagMeta.name, getAttrTagIdentifier(attrTagMeta)));
-				}
+//#region src/translator/util/with-previous-location.ts
+function withPreviousLocation(newNode, originalNode) {
+	newNode.start = originalNode.start;
+	newNode.loc = originalNode.loc;
+	newNode.end = originalNode.end;
+	return newNode;
+}
+//#endregion
+//#region src/translator/visitors/program/pre-analyze.ts
+const TAG_NAME_IDENTIFIER_REG = /^[A-Z][a-zA-Z0-9_$]*$/;
+const BINDING_CHANGE_HANDLER = /* @__PURE__ */ new WeakMap();
+function preAnalyze(program) {
+	normalizeBody(program.get("body"));
+}
+function normalizeBody(body) {
+	if (body?.length) {
+		for (const child of body) if (child.isMarkoTag()) {
+			flattenTextOnlyConditional(child);
+			if (child.isMarkoTag()) normalizeTag(child);
+		} else if (child.isMarkoPlaceholder()) hoistStaticPlaceholderText(child);
+	}
+}
+function hoistStaticPlaceholderText(placeholder) {
+	const { node } = placeholder;
+	const normalized = normalizeStringExpression([node.value]);
+	if (!normalized || !_marko_compiler.types.isTemplateLiteral(normalized)) return;
+	node.value = normalized;
+	const { _escape } = getHTMLRuntime();
+	const { quasis } = normalized;
+	const lastIndex = quasis.length - 1;
+	const leading = quasis[0].value.cooked ?? "";
+	const trailing = quasis[lastIndex].value.cooked ?? "";
+	if (leading && _escape(leading) === leading) {
+		insertStaticText(placeholder, leading, true);
+		quasis[0].value = {
+			raw: "",
+			cooked: ""
+		};
+	}
+	if (trailing && _escape(trailing) === trailing) {
+		insertStaticText(placeholder, trailing, false);
+		quasis[lastIndex].value = {
+			raw: "",
+			cooked: ""
+		};
+	}
+}
+function insertStaticText(placeholder, value, before) {
+	const sibling = before ? placeholder.getPrevSibling() : placeholder.getNextSibling();
+	if (sibling.isMarkoText()) sibling.node.value = before ? sibling.node.value + value : value + sibling.node.value;
+	else if (before) placeholder.insertBefore(_marko_compiler.types.markoText(value));
+	else placeholder.insertAfter(_marko_compiler.types.markoText(value));
+}
+function normalizeTag(tag) {
+	const { node } = tag;
+	const { name, attributes } = node;
+	let attrNameReg = userAttrNameReg;
+	normalizeBody(tag.get("body").get("body"));
+	normalizeBody(tag.get("attributeTags"));
+	if (node.var) {
+		const insertions = getAssignmentInsertions(node.var);
+		if (insertions) tag.insertAfter(insertions);
+	}
+	if (node.body.params.length) {
+		let insertions;
+		for (const param of node.body.params) insertions = getAssignmentInsertions(param, insertions);
+		if (insertions) node.body.body = [...insertions, ...node.body.body];
+	}
+	if (name.type === "StringLiteral") {
+		const tagName = name.value;
+		if (tag.scope.getBinding(tagName) && TAG_NAME_IDENTIFIER_REG.test(tagName)) node.name = withPreviousLocation(_marko_compiler.types.identifier(tagName), name);
+		else if ((0, _marko_compiler_babel_utils.isNativeTag)(tag)) {
+			attrNameReg = htmlAttrNameReg;
+			switch (tagName) {
+				case "textarea":
+					preAnalyze$1(tag);
+					break;
 			}
 		}
-		const attrTags = getAttrTagPaths(tag);
-		for (let i = 0; i < attrTags.length; i++) {
-			const child = attrTags[i];
-			if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
-				const attrTagMeta = attrTagLookup[getTagName(child)];
-				if (skip?.has(attrTagMeta.name)) continue;
-				if (attrTagMeta.dynamic) i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
-				else {
-					const translatedAttrTag = translateAttrs(child, getKnownFromPropTree(propTree, attrTagMeta.name), void 0, statements, contentKey);
-					if (attrTagMeta.repeated) {
-						const prevProp = findObjectProperty(attrTagMeta.name, contentProperties);
-						if (prevProp) prevProp.value = callRuntime("attrTags", prevProp.value, propsToExpression(translatedAttrTag.properties));
-						else contentProperties.push(toObjectProperty(attrTagMeta.name, callRuntime("attrTag", propsToExpression(translatedAttrTag.properties))));
-					} else contentProperties.push(toObjectProperty(attrTagMeta.name, callRuntime("attrTag", propsToExpression(translatedAttrTag.properties))));
+	}
+	for (let i = 0; i < attributes.length; i++) {
+		const attr = attributes[i];
+		if (_marko_compiler.types.isMarkoAttribute(attr)) {
+			if (attr.bound) {
+				attributes.splice(++i, 0, getChangeHandler(tag, attr));
+				attr.bound = false;
+			} else if (attr.modifier != null) attr.name += ":" + attr.modifier;
+			if (attrNameReg.test(attr.name)) throw tag.hub.buildError(attr.loc?.end && { loc: {
+				start: attr.loc.start,
+				end: {
+					line: attr.loc.start.line,
+					column: attr.loc.start.column + attr.name.length
 				}
-			} else i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
+			} }, "Invalid attribute name.");
+			attr.modifier = null;
 		}
 	}
-	if (!seen.has(contentKey) && getKnownFromPropTree(propTree, contentKey)) {
-		const contentExpression = buildContent(tag.get("body"));
-		if (contentExpression) {
-			const contentProp = _marko_compiler.types.objectProperty(_marko_compiler.types.identifier(contentKey), contentExpression);
-			seen.add(contentKey);
-			contentProps.add(contentProp);
-			contentProperties.push(contentProp);
-		}
+}
+function getChangeHandler(tag, attr) {
+	const changeAttrName = attr.name + "Change";
+	let modifier;
+	if (attr.modifier != null) {
+		if (!_marko_compiler.types.isValidIdentifier(attr.modifier)) throw tag.hub.buildError(attr.value.loc?.end && { loc: {
+			start: {
+				line: attr.value.loc.start.line,
+				column: attr.value.loc.start.column - attr.modifier.length - 2
+			},
+			end: {
+				line: attr.value.loc.start.line,
+				column: attr.value.loc.start.column - 2
+			}
+		} }, "Bound attribute refinement shorthand must be a valid JavaScript identifier.");
+		modifier = withPreviousLocation(_marko_compiler.types.identifier(attr.modifier), attr);
 	}
-	const { attributes } = tag.node;
-	const attrProperties = [];
-	for (let i = attributes.length; i--;) {
-		const attr = attributes[i];
-		const { value } = attr;
-		if (_marko_compiler.types.isMarkoSpreadAttribute(attr)) attrProperties.push(_marko_compiler.types.spreadElement(value));
-		else if (!seen.has(attr.name) && getKnownFromPropTree(propTree, attr.name)) {
-			seen.add(attr.name);
-			attrProperties.push(toObjectProperty(attr.name, value));
+	if (_marko_compiler.types.isIdentifier(attr.value)) {
+		const binding = tag.scope.getBinding(attr.value.name);
+		if (!binding) return _marko_compiler.types.markoAttribute(changeAttrName, buildChangeHandlerFunction(attr.value, modifier));
+		const existingChangedAttr = BINDING_CHANGE_HANDLER.get(binding.identifier);
+		if (!existingChangedAttr) {
+			const bindingIdentifierPath = binding.path.getOuterBindingIdentifierPaths()[binding.identifier.name];
+			let changeAttrExpr = bindingIdentifierPath ? bindingIdentifierPath.parentPath === binding.path ? buildChangeHandlerFunction(attr.value, modifier) : bindingIdentifierPath.parentPath.isObjectProperty() ? getChangeHandlerFromObjectPattern(bindingIdentifierPath.parentPath) : void 0 : void 0;
+			if (!changeAttrExpr) throw tag.hub.buildError(attr.value, "Unable to bind to value.");
+			if (modifier && _marko_compiler.types.isIdentifier(changeAttrExpr)) changeAttrExpr = _marko_compiler.types.logicalExpression("&&", changeAttrExpr, buildModifierForwarder(_marko_compiler.types.cloneNode(changeAttrExpr), modifier));
+			const changeHandlerAttr = _marko_compiler.types.markoAttribute(changeAttrName, changeAttrExpr);
+			BINDING_CHANGE_HANDLER.set(binding.identifier, changeHandlerAttr);
+			return changeHandlerAttr;
+		}
+		if (existingChangedAttr.type === "Identifier") return _marko_compiler.types.markoAttribute(changeAttrName, withPreviousLocation(_marko_compiler.types.identifier(existingChangedAttr.name), attr.value));
+		const markoRoot = isMarko(binding.path) ? binding.path : getMarkoRoot(binding.path);
+		if (!(markoRoot?.isMarkoTag() || markoRoot?.isMarkoTagBody())) throw tag.hub.buildError(attr.value, "Unable to bind to value.");
+		const changeHandlerId = generateUid(changeAttrName);
+		const changeHandlerConst = _marko_compiler.types.markoTag(_marko_compiler.types.stringLiteral("const"), [_marko_compiler.types.markoAttribute("value", existingChangedAttr.value, null, null, true)], _marko_compiler.types.markoTagBody([]), null, _marko_compiler.types.identifier(changeHandlerId));
+		BINDING_CHANGE_HANDLER.set(binding.identifier, existingChangedAttr.value = _marko_compiler.types.identifier(changeHandlerId));
+		if (markoRoot.isMarkoTag()) markoRoot.insertAfter(changeHandlerConst);
+		else markoRoot.unshiftContainer("body", changeHandlerConst);
+		return _marko_compiler.types.markoAttribute(changeAttrName, withPreviousLocation(_marko_compiler.types.identifier(changeHandlerId), attr.value));
+	} else if (_marko_compiler.types.isMemberExpression(attr.value) || _marko_compiler.types.isOptionalMemberExpression(attr.value)) {
+		const prop = attr.value.property;
+		if (!_marko_compiler.types.isPrivateName(attr.value.property)) {
+			const memberObj = _marko_compiler.types.cloneNode(attr.value.object);
+			const memberProp = !attr.value.computed && prop.type === "Identifier" ? withPreviousLocation(_marko_compiler.types.identifier(prop.name + "Change"), prop) : _marko_compiler.types.binaryExpression("+", _marko_compiler.types.cloneNode(prop), _marko_compiler.types.stringLiteral("Change"));
+			const computed = memberProp.type !== "Identifier";
+			let changeAttrExpr = attr.value.optional ? _marko_compiler.types.optionalMemberExpression(memberObj, memberProp, computed, true) : _marko_compiler.types.memberExpression(memberObj, memberProp, computed);
+			if (modifier) changeAttrExpr = _marko_compiler.types.logicalExpression("&&", changeAttrExpr, buildModifierForwarder(_marko_compiler.types.memberExpression(memberObj, memberProp, computed), modifier));
+			return _marko_compiler.types.markoAttribute(changeAttrName, changeAttrExpr);
 		}
 	}
-	return {
-		properties: attrProperties.reverse().concat(contentProperties),
-		statements
-	};
+	throw tag.hub.buildError(attr.value, "Attributes may only be bound to identifiers or member expressions");
 }
-function getTranslatedBodyContentProperty(props) {
-	for (const prop of props) if (contentProps.has(prop)) return prop;
+function buildModifierForwarder(changeHandler, modifier) {
+	const newValueId = generateUid("next");
+	return _marko_compiler.types.arrowFunctionExpression([_marko_compiler.types.identifier(newValueId)], _marko_compiler.types.blockStatement([_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(changeHandler, [_marko_compiler.types.callExpression(_marko_compiler.types.cloneNode(modifier), [_marko_compiler.types.identifier(newValueId)])]))]));
 }
-function addDynamicAttrTagStatements(attrTags, index, attrTagLookup, statements, propTree, contentKey = "content") {
-	const tag = attrTags[index];
-	if (tag.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(tag)) {
-		const attrTagMeta = attrTagLookup[getTagName(tag)];
-		const attrTagExport = getKnownFromPropTree(propTree, attrTagMeta.name);
-		if (attrTagExport && attrTagMeta.dynamic) {
-			const translatedAttrTag = translateAttrs(tag, attrTagExport, void 0, statements, contentKey);
-			if (attrTagMeta.repeated) statements.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", getAttrTagIdentifier(attrTagMeta), callRuntime("attrTags", getAttrTagIdentifier(attrTagMeta), propsToExpression(translatedAttrTag.properties)))));
-			else statements.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", getAttrTagIdentifier(attrTagMeta), callRuntime("attrTag", propsToExpression(translatedAttrTag.properties)))));
+function buildChangeHandlerFunction(id, modifier) {
+	const newId = "_new_" + id.name;
+	let newValue = withPreviousLocation(_marko_compiler.types.identifier(newId), id);
+	if (modifier) newValue = _marko_compiler.types.callExpression(modifier, [newValue]);
+	return _marko_compiler.types.arrowFunctionExpression([withPreviousLocation(_marko_compiler.types.identifier(newId), id)], _marko_compiler.types.blockStatement([_marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", withPreviousLocation(_marko_compiler.types.identifier(id.name), id), newValue))]));
+}
+function getChangeHandlerFromObjectPattern(parent) {
+	let changeKey;
+	const pattern = parent.parentPath;
+	if (parent.node.computed) {
+		changeKey = generateUidIdentifier("dynamicChange");
+		pattern.pushContainer("properties", _marko_compiler.types.objectProperty(_marko_compiler.types.binaryExpression("+", parent.get("key").node, _marko_compiler.types.stringLiteral("Change")), changeKey, true));
+	} else {
+		const searchKey = `${getStringOrIdentifierValue(parent.get("key"))}Change`;
+		for (const prop of pattern.get("properties")) if (prop.isObjectProperty()) {
+			const propKey = prop.get("key");
+			const propValue = prop.get("value");
+			if (!prop.node.computed && getStringOrIdentifierValue(propKey) === searchKey && propValue.isIdentifier()) {
+				changeKey = propValue.node;
+				break;
+			}
 		}
-	} else switch (getTagName(tag)) {
-		case "if": return translateIfAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey);
-		case "for": return translateForAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey);
+		if (!changeKey) pattern.unshiftContainer("properties", _marko_compiler.types.objectProperty(_marko_compiler.types.stringLiteral(searchKey), changeKey = generateUidIdentifier(searchKey)));
 	}
-	return index;
+	return changeKey;
 }
-function propsToExpression(props) {
-	return props.length === 1 && _marko_compiler.types.isSpreadElement(props[0]) ? props[0].argument : _marko_compiler.types.objectExpression(props);
+function getStringOrIdentifierValue(path) {
+	return getLiteralName(path.node);
 }
-function translateForAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey) {
-	const forTag = attrTags[index];
-	const bodyStatements = [];
-	addAllAttrTagsAsDynamic(forTag, attrTagLookup, bodyStatements, propTree, contentKey);
-	statements.push(buildForRuntimeCall(getForType(forTag.node), getKnownAttrValues(forTag.node), forTag.node.body.params, bodyStatements));
-	return index;
+function getLiteralName(node) {
+	switch (node.type) {
+		case "Identifier": return node.name;
+		case "StringLiteral": return node.value;
+	}
 }
-function translateIfAttrTag(attrTags, index, attrTagLookup, statements, propTree, contentKey) {
-	const ifTag = attrTags[index];
-	const consequentStatements = [];
-	let ifStatement = _marko_compiler.types.ifStatement(getConditionTestValue(ifTag), _marko_compiler.types.blockStatement(consequentStatements));
-	statements.push(ifStatement);
-	addAllAttrTagsAsDynamic(ifTag, attrTagLookup, consequentStatements, propTree, contentKey);
-	let nextIndex = index + 1;
-	while (nextIndex < attrTags.length) {
-		const nextTag = attrTags[nextIndex];
-		if (nextTag.isMarkoTag()) switch (getTagName(nextTag)) {
-			case "else-if":
-			case "else": {
-				const testValue = getConditionTestValue(nextTag);
-				const alternateStatements = [];
-				addAllAttrTagsAsDynamic(nextTag, attrTagLookup, alternateStatements, propTree, contentKey);
-				if (testValue) {
-					ifStatement.alternate = ifStatement = _marko_compiler.types.ifStatement(testValue, _marko_compiler.types.blockStatement(alternateStatements));
-					nextIndex++;
-					continue;
-				} else {
-					ifStatement.alternate = _marko_compiler.types.blockStatement(alternateStatements);
-					break;
-				}
+function getAssignmentInsertions(node, insertions) {
+	switch (node.type) {
+		case "ObjectPattern":
+			for (const prop of node.properties) if (prop.type === "ObjectProperty") if (prop.value.type === "AssignmentPattern") {
+				const { left, right } = prop.value;
+				const sourceName = generateUid(getLiteralName(left) || getLiteralName(prop.key) || "pattern");
+				prop.shorthand = false;
+				prop.value = _marko_compiler.types.identifier(sourceName);
+				(insertions ||= []).push(toConstTag(left, toFallbackExpr(sourceName, right)));
+				getAssignmentInsertions(left, insertions);
+			} else insertions = getAssignmentInsertions(prop.value, insertions);
+			break;
+		case "ArrayPattern":
+			for (let i = 0, len = node.elements.length; i < len; i++) {
+				const el = node.elements[i];
+				if (el != null) if (el.type === "AssignmentPattern") {
+					const { left, right } = el;
+					const sourceName = generateUid(getLiteralName(left) || "pattern");
+					node.elements[i] = _marko_compiler.types.identifier(sourceName);
+					(insertions ||= []).push(toConstTag(left, toFallbackExpr(sourceName, right)));
+					getAssignmentInsertions(left, insertions);
+				} else insertions = getAssignmentInsertions(el, insertions);
 			}
-		}
-		break;
+			break;
 	}
-	return nextIndex - 1;
+	return insertions;
 }
-function addAllAttrTagsAsDynamic(tag, attrTagLookup, statements, propTree, contentKey) {
-	const attrTags = getAttrTagPaths(tag);
-	for (let i = 0; i < attrTags.length; i++) i = addDynamicAttrTagStatements(attrTags, i, attrTagLookup, statements, propTree, contentKey);
+function toFallbackExpr(id, fallback) {
+	return _marko_compiler.types.conditionalExpression(_marko_compiler.types.binaryExpression("!==", buildUndefined(), _marko_compiler.types.identifier(id)), _marko_compiler.types.identifier(id), fallback);
 }
-function findObjectProperty(name, props) {
-	for (const prop of props) if (prop.type === "ObjectProperty") switch (prop.key.type) {
-		case "StringLiteral":
-			if (prop.key.value === name) return prop;
-			break;
-		case "Identifier":
-			if (prop.key.name === name) return prop;
-			break;
+function toConstTag(id, expr) {
+	return _marko_compiler.types.markoTag(_marko_compiler.types.stringLiteral("const"), [_marko_compiler.types.markoAttribute("value", expr, null, null, true)], _marko_compiler.types.markoTagBody(), null, id);
+}
+function buildUndefined() {
+	return _marko_compiler.types.unaryExpression("void", _marko_compiler.types.numericLiteral(0));
+}
+//#endregion
+//#region src/translator/visitors/program/index.ts
+let scopeIdentifier;
+function isScopeIdentifier(node) {
+	return node === scopeIdentifier;
+}
+var program_default = {
+	migrate: {
+		enter(program) {
+			program.node.params = [_marko_compiler.types.identifier("input")];
+		},
+		exit(program) {
+			program.scope.crawl();
+		}
+	},
+	transform: { exit: preAnalyze },
+	analyze: {
+		enter(program) {
+			startSection(program);
+			trackParamsReferences(program, 2);
+			const programExtra = program.node.extra ??= {};
+			const inputBinding = program.node.params[0].extra?.binding;
+			if (inputBinding) inputBinding.nullable = false;
+			programExtra.domExports = {
+				template: generateUid("template"),
+				walks: generateUid("walks"),
+				setup: generateUid("setup"),
+				params: void 0
+			};
+			const styleFile = getStyleFile(program.hub.file);
+			if (styleFile) {
+				programExtra.styleFile = styleFile;
+				addAssetImport(program.hub.file, styleFile);
+			}
+		},
+		exit(program) {
+			finalizeReferences();
+			const programExtra = program.node.extra;
+			const paramsBinding = programExtra.binding;
+			if (paramsBinding && !paramsBinding.pruned) programExtra.domExports.params = getBindingPropTree(paramsBinding);
+		}
+	},
+	translate: {
+		enter(program) {
+			scopeIdentifier = isOutputDOM() ? generateUidIdentifier("scope") : null;
+			{
+				const markoOpts = getMarkoOpts();
+				const { output, entry, runtimeId } = markoOpts;
+				const isLoadEntry = entry === "load";
+				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 (isLoadEntry) {
+					const entryFile = program.hub.file;
+					const { filename } = entryFile.opts;
+					program.node.body = [_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("ready"), _marko_compiler.types.identifier("ready"))], _marko_compiler.types.stringLiteral(getRuntimePath("dom"))), _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(_marko_compiler.types.memberExpression(_marko_compiler.types.callExpression(_marko_compiler.types.import(), [_marko_compiler.types.stringLiteral((0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename))]), _marko_compiler.types.identifier("then")), [_marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.callExpression(_marko_compiler.types.identifier("ready"), [_marko_compiler.types.stringLiteral(getReadyId(entryFile))]))]))];
+					program.skip();
+					return;
+				}
+				if (isDOMPageEntry) {
+					const entryFile = program.hub.file;
+					const { filename } = entryFile.opts;
+					const visitedFiles = new Set([(0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename)]);
+					entry_builder_default.visit(entryFile, entryFile, function visitChild(resolved) {
+						if (!visitedFiles.has(resolved)) {
+							visitedFiles.add(resolved);
+							const file = (0, _marko_compiler_babel_utils.loadFileForImport)(entryFile, resolved);
+							if (file) entry_builder_default.visit(file, entryFile, (id) => visitChild(resolveRelativeToEntry(entryFile, file, id)));
+						}
+					});
+					program.node.body = entry_builder_default.build(entryFile);
+					program.skip();
+					return;
+				}
+				if (isServerEntry) {
+					const entryFile = program.hub.file;
+					const { filename } = entryFile.opts;
+					const relativeImport = (0, _marko_compiler_babel_utils.resolveRelativePath)(entryFile, filename);
+					const templateId = (0, _marko_compiler_babel_utils.getTemplateId)(markoOpts, filename);
+					const pageAssetArgs = [
+						_marko_compiler.types.identifier("template"),
+						_marko_compiler.types.identifier("flush"),
+						_marko_compiler.types.stringLiteral(templateId)
+					];
+					if (runtimeId) pageAssetArgs.push(_marko_compiler.types.stringLiteral(runtimeId));
+					markoOpts.linkAssets.onAsset("page", filename, templateId);
+					program.node.body = [
+						_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("flush"), _marko_compiler.types.identifier("flush"))], _marko_compiler.types.stringLiteral(markoOpts.linkAssets.runtime)),
+						_marko_compiler.types.importDeclaration([_marko_compiler.types.importDefaultSpecifier(_marko_compiler.types.identifier("template"))], _marko_compiler.types.stringLiteral(relativeImport)),
+						_marko_compiler.types.importDeclaration([_marko_compiler.types.importSpecifier(_marko_compiler.types.identifier("withPageAssets"), _marko_compiler.types.identifier("withPageAssets"))], _marko_compiler.types.stringLiteral(getRuntimePath("html"))),
+						_marko_compiler.types.exportAllDeclaration(_marko_compiler.types.stringLiteral(relativeImport)),
+						_marko_compiler.types.exportDefaultDeclaration(_marko_compiler.types.callExpression(_marko_compiler.types.identifier("withPageAssets"), pageAssetArgs))
+					];
+					program.skip();
+					return;
+				}
+			}
+			if (isOutputHTML()) html_default.translate.enter();
+			else dom_default.translate.enter(program);
+		},
+		exit(program) {
+			if (isOutputHTML()) html_default.translate.exit(program);
+			else dom_default.translate.exit(program);
+			if (program.node.extra?.needsCompat) {
+				const compatFile = getCompatRuntimeFile();
+				const body = [void 0];
+				for (const child of program.node.body) if (child.type === "ImportDeclaration" && child.source.value === compatFile) body[0] = child;
+				else body.push(child);
+				body[0] ??= _marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(compatFile));
+				program.node.body = body;
+			}
+		}
 	}
-	return false;
+};
+//#endregion
+//#region src/translator/util/set-tag-sections-downstream.ts
+const [getTagDownstreams] = createSectionState("tag-downstreams", () => /* @__PURE__ */ new Map());
+function setTagDownstream(tag, binding) {
+	if (binding) getTagDownstreams(getSection(tag)).set(tag, binding);
 }
-function getConditionTestValue({ node: { attributes } }) {
-	return attributes.length === 1 ? attributes[0].value : void 0;
+function finalizeTagDownstreams(section) {
+	for (const [tag, binding] of getTagDownstreams(section)) crawlSectionsAndSetBinding(tag, binding);
 }
-function buildContent(body) {
-	const bodySection = body.node.extra?.section;
-	if (bodySection) if (isOutputHTML()) {
-		const serialized = getSectionRegisterReasons(bodySection);
-		let dynamicSerializeReason = !!bodySection.paramReasonGroups || isReasonDynamic(bodySection.serializeReason);
-		if (!dynamicSerializeReason) {
-			for (const reason of bodySection.serializeReasons.values()) if (isReasonDynamic(reason)) {
-				dynamicSerializeReason = true;
-				break;
-			}
+function crawlSectionsAndSetBinding(tag, binding, properties, skip) {
+	if (!skip) {
+		const contentSection = getSectionForBody(tag.get("body"));
+		if (contentSection) {
+			let target = binding;
+			forEach(properties, (property) => {
+				target = target?.propertyAliases.get(property);
+			});
+			contentSection.downstreamBinding = target && (target.noSerialize || includes(target.noSerializeProperties, "content")) ? false : {
+				binding,
+				properties: concat(properties, "content")
+			};
 		}
-		if (dynamicSerializeReason) body.node.body.unshift(getScopeReasonDeclaration(bodySection));
-		else body.node.body.unshift(_marko_compiler.types.expressionStatement(callRuntime("_scope_reason")));
-		return callRuntime(serialized ? "_content_resume" : "_content", _marko_compiler.types.stringLiteral(getResumeRegisterId(bodySection, "content")), _marko_compiler.types.arrowFunctionExpression(body.node.params, _marko_compiler.types.blockStatement(body.node.body)), serialized ? getScopeIdIdentifier(getSection(getAttributeTagParent(body.parentPath))) : void 0);
-	} else return _marko_compiler.types.callExpression(_marko_compiler.types.identifier(bodySection.name), bodySection.referencedLocalClosures ? [scopeIdentifier, _marko_compiler.types.objectExpression(toArray(bodySection.referencedLocalClosures, (ref) => {
-		return toObjectProperty(getScopeAccessor(ref, true), getDeclaredBindingExpression(ref));
-	}))] : [scopeIdentifier]);
+	}
+	const attrTagLookup = analyzeAttributeTags(tag);
+	if (!attrTagLookup) return;
+	const attrTags = getAttrTagPaths(tag);
+	for (const child of attrTags) if (child.isMarkoTag()) if ((0, _marko_compiler_babel_utils.isAttributeTag)(child)) {
+		const attrTagMeta = attrTagLookup[getTagName(child)];
+		crawlSectionsAndSetBinding(child, binding, concat(properties, attrTagMeta.name));
+	} else crawlSectionsAndSetBinding(child, binding, properties, true);
 }
 //#endregion
 //#region src/translator/util/translate-var.ts
@@ -5673,7 +6029,8 @@ function writeAttrsToSignals(tag, propTree, importAlias, info) {
 			if (contentExport === true) (restProps ||= []).push(toObjectProperty("content", bodyValue));
 			else {
 				remaining.delete("content");
-				addStatement("render", info.tagSection, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(info.getBindingIdentifier(contentExport.binding, `${importAlias}_content`), [createScopeReadExpression(info.childScopeBinding, info.tagSection), bodyValue])), void 0, true);
+				const directContent = !bodySection.params;
+				addStatement("render", info.tagSection, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(info.getBindingIdentifier(contentExport.binding, `${importAlias}_content`, directContent), [createScopeReadExpression(info.childScopeBinding, info.tagSection), bodyValue])), void 0, true);
 			}
 		}
 	}
@@ -5824,6 +6181,7 @@ function createBinding(name, type, refSection, upstreamAlias, property, excludeP
 		scopeOffset: void 0,
 		scopeAccessor: void 0,
 		export: void 0,
+		directContentExport: void 0,
 		nullable: !sameSection || excludeProperties === void 0,
 		pruned: void 0
 	};
@@ -7213,366 +7571,123 @@ var html_comment_default = {
 		let needsBinding = false;
 		if (tagVar) {
 			if (!_marko_compiler.types.isIdentifier(tagVar)) throw tag.get("var").buildCodeFrameError("The [`<html-comment>` tag](https://markojs.com/docs/reference/core-tag#html-comment) tag variable cannot be destructured.");
-			needsBinding = true;
-		}
-		const referenceNodes = [];
-		for (const child of tag.get("body").get("body")) if (child.isMarkoPlaceholder()) {
-			referenceNodes.push(child.node.value);
-			needsBinding = true;
-		} else if (!child.isMarkoText()) throw child.buildCodeFrameError("Invalid child. Only text is allowed inside an html comment.");
-		if (needsBinding) {
-			const tagSection = getOrCreateSection(tag);
-			const tagExtra = mergeReferences(tagSection, tag.node, referenceNodes);
-			const nodeBinding = tagExtra[kNodeBinding$1] = createBinding("#comment", 0, tagSection, void 0, void 0, void 0, void 0, !!tagVar);
-			trackDomVarReferences(tag, nodeBinding);
-			addSerializeExpr(tagSection, !!tagVar || tagExtra, nodeBinding);
-		}
-		tag.skip();
-	},
-	translate: {
-		enter(tag) {
-			if (tag.node.extra[kNodeBinding$1]) visit(tag, 32);
-			enter(tag);
-			writeTo(tag)`<!--`;
-		},
-		exit(tag) {
-			const tagSection = getSection(tag);
-			const tagExtra = tag.node.extra;
-			const nodeBinding = tagExtra[kNodeBinding$1];
-			const write = writeTo(tag);
-			if (isOutputHTML()) {
-				for (const child of tag.node.body.body) if (_marko_compiler.types.isMarkoText(child)) write`${child.value}`;
-				else if (_marko_compiler.types.isMarkoPlaceholder(child)) write`${callRuntime(child.escape ? "_escape_comment" : "_unescaped", child.value)}`;
-			} else {
-				const textLiteral = bodyToTextLiteral(tag.node.body);
-				if (_marko_compiler.types.isStringLiteral(textLiteral)) write`${textLiteral}`;
-				else addStatement("render", tagSection, tagExtra.referencedBindings, _marko_compiler.types.expressionStatement(callRuntime("_text", createScopeReadExpression(nodeBinding), textLiteral)));
-			}
-			exit(tag);
-			write`-->`;
-			if (nodeBinding) markNode(tag, nodeBinding, getSerializeReason(tagSection, nodeBinding));
-			tag.remove();
-		}
-	},
-	parseOptions: { text: true },
-	types: runtime_info_default.name + "/tags/html-comment.d.marko",
-	autocomplete: [{
-		description: "Use to create an html comment that is not stripped from the output.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-comment"
-	}]
-};
-//#endregion
-//#region src/translator/core/html-script.ts
-var html_script_default = {
-	types: runtime_info_default.name + "/tags/html-script.d.marko",
-	html: true,
-	parseOptions: {
-		text: true,
-		preserveWhitespace: true
-	},
-	autocomplete: [{
-		description: "Use instead of `<script>` to render a native tag directly, without processing by Marko.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-script--html-style"
-	}]
-};
-//#endregion
-//#region src/translator/core/html-style.ts
-var html_style_default = {
-	types: runtime_info_default.name + "/tags/html-style.d.marko",
-	html: true,
-	parseOptions: {
-		text: true,
-		preserveWhitespace: true
-	},
-	autocomplete: [{
-		description: "Use instead of `<style>` to render a native tag directly, without processing by Marko.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-script--html-style"
-	}]
-};
-//#endregion
-//#region src/translator/core/id.ts
-var id_default = {
-	analyze(tag) {
-		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
-		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
-		assertNoBodyContent(tag);
-		(0, _marko_compiler_babel_utils.assertNoAttributeTags)(tag);
-		const { node } = tag;
-		const [valueAttr] = node.attributes;
-		if (!node.var) throw tag.get("name").buildCodeFrameError("The [`<id>` tag](https://markojs.com/docs/reference/core-tag#id) requires a [tag variable](https://markojs.com/docs/reference/language#tag-variables).");
-		if (!_marko_compiler.types.isIdentifier(node.var)) throw tag.get("var").buildCodeFrameError("The [`<id>` tag](https://markojs.com/docs/reference/core-tag#id) cannot be destructured.");
-		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));
-	},
-	translate: { exit(tag) {
-		const { node } = tag;
-		const id = isOutputHTML() ? callRuntime("_id") : callRuntime("_id", scopeIdentifier);
-		const [valueAttr] = tag.node.attributes;
-		if (isOutputHTML()) tag.replaceWith(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, valueAttr ? _marko_compiler.types.logicalExpression("||", valueAttr.value, id) : id)]));
-		else {
-			const section = getSection(tag);
-			const source = initValue(node.var.extra.binding);
-			if (valueAttr) {
-				const { value } = valueAttr;
-				addValue(section, value.extra?.referencedBindings, source, _marko_compiler.types.logicalExpression("||", value, id));
-			} else addValue(section, void 0, source, id);
-			tag.remove();
-		}
-	} },
-	parseOptions: { openTagOnly: true },
-	attributes: {},
-	autocomplete: [{
-		displayText: "id/<name>",
-		description: "Use to create a unique identifier.",
-		snippet: "id/${1:name}",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#id"
-	}],
-	types: runtime_info_default.name + "/tags/id.d.marko"
-};
-//#endregion
-//#region src/translator/util/to-first-statement-or-block.ts
-function toFirstStatementOrBlock(body) {
-	if (Array.isArray(body)) {
-		if (body.length === 1) return body[0];
-		return _marko_compiler.types.blockStatement(body);
-	}
-	return body;
-}
-//#endregion
-//#region src/translator/core/if.ts
-const kStatefulReason = Symbol("<if> stateful reason");
-const BRANCHES_LOOKUP = /* @__PURE__ */ new WeakMap();
-const IfTag = {
-	analyze(tag) {
-		assertValidCondition(tag);
-		if (tag.node.body.attributeTags) return;
-		if (isLastBranch(tag)) {
-			const branches = getBranches(tag);
-			const [ifTag] = branches[0];
-			const ifTagSection = getOrCreateSection(ifTag);
-			const ifTagExtra = ifTag.node.extra ??= {};
-			const mergeReferenceNodes = [];
-			const sectionAccessor = {
-				binding: getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection, branches.length),
-				prefix: getAccessorPrefix().BranchScopes
-			};
-			for (const [branchTag, branchBodySection] of branches) {
-				if (branchBodySection) {
-					branchBodySection.isBranch = true;
-					branchBodySection.upstreamExpression = ifTagExtra;
-					branchBodySection.sectionAccessor = sectionAccessor;
-				}
-				if (branchTag.node.attributes.length) mergeReferenceNodes.push(branchTag.node.attributes[0].value);
-			}
-			mergeReferences(ifTagSection, ifTag.node, mergeReferenceNodes);
-			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason);
-		}
-	},
-	translate: translateByTarget({
-		html: {
-			enter(tag) {
-				if (tag.node.body.attributeTags) return;
-				const bodySection = getSectionForBody(tag.get("body"));
-				if (isRoot(tag) && !getOnlyChildParentTagName(tag)) {
-					visit(tag, 37);
-					enterShallow(tag);
-				}
-				flushBefore(tag);
-				if (bodySection) setSectionParentIsOwner(bodySection, true);
-			},
-			exit(tag) {
-				if (tag.node.body.attributeTags) return;
-				const tagBody = tag.get("body");
-				if (getSectionForBody(tagBody)) {
-					flushInto(tag);
-					writeHTMLResumeStatements(tagBody);
-				}
-				if (isLastBranch(tag)) {
-					const branches = getBranches(tag);
-					const [ifTag] = branches[0];
-					const ifTagSection = getSection(ifTag);
-					const nodeBinding = getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection);
-					const onlyChildParentTagName = getOnlyChildParentTagName(ifTag);
-					const markerSerializeReason = getSerializeReason(ifTagSection, nodeBinding);
-					const nextTag = tag.getNextSibling();
-					let branchSerializeReasons;
-					let statement;
-					let singleChild = true;
-					for (const [, branchBody] of branches) if (!(branchBody?.content?.singleChild && branchBody.content.startType !== 4)) {
-						singleChild = false;
-						break;
-					}
-					for (let i = branches.length; i--;) {
-						const [branchTag, branchBody] = branches[i];
-						const bodyStatements = branchTag.node.body.body;
-						if (branchBody) {
-							const branchSerializeReason = getSerializeReason(branchBody, kBranchSerializeReason);
-							if (branchSerializeReason) {
-								if (branchSerializeReasons !== true) if (branchSerializeReason === true || branchSerializeReason.state) branchSerializeReasons = true;
-								else if (branchSerializeReasons) branchSerializeReasons = addSorted(compareSources, branchSerializeReasons, branchSerializeReason);
-								else branchSerializeReasons = [branchSerializeReason];
-								bodyStatements.push(_marko_compiler.types.returnStatement(_marko_compiler.types.numericLiteral(i)));
-							}
-						}
-						const [testAttr] = branchTag.node.attributes;
-						const curStatement = toFirstStatementOrBlock(bodyStatements);
-						if (testAttr) statement = _marko_compiler.types.ifStatement(testAttr.value, curStatement, statement);
-						else statement = curStatement;
-						branchTag.remove();
-					}
-					if (branchSerializeReasons) {
-						const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
-						if (skipParentEnd) getParentTag(ifTag).node.extra[kSkipEndTag] = true;
-						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason), !(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));
-					}
-					nextTag.insertBefore(statement);
-				}
-			}
+			needsBinding = true;
+		}
+		const referenceNodes = [];
+		for (const child of tag.get("body").get("body")) if (child.isMarkoPlaceholder()) {
+			referenceNodes.push(child.node.value);
+			needsBinding = true;
+		} else if (!child.isMarkoText()) throw child.buildCodeFrameError("Invalid child. Only text is allowed inside an html comment.");
+		if (needsBinding) {
+			const tagSection = getOrCreateSection(tag);
+			const tagExtra = mergeReferences(tagSection, tag.node, referenceNodes);
+			const nodeBinding = tagExtra[kNodeBinding$1] = createBinding("#comment", 0, tagSection, void 0, void 0, void 0, void 0, !!tagVar);
+			trackDomVarReferences(tag, nodeBinding);
+			addSerializeExpr(tagSection, !!tagVar || tagExtra, nodeBinding);
+		}
+		tag.skip();
+	},
+	translate: {
+		enter(tag) {
+			if (tag.node.extra[kNodeBinding$1]) visit(tag, 32);
+			enter(tag);
+			writeTo(tag)`<!--`;
 		},
-		dom: {
-			enter(tag) {
-				if (tag.node.body.attributeTags) return;
-				const bodySection = getSectionForBody(tag.get("body"));
-				if (bodySection) setSectionParentIsOwner(bodySection, true);
-				if (isRoot(tag) && !getOnlyChildParentTagName(tag)) {
-					visit(tag, 37);
-					enterShallow(tag);
-				}
-			},
-			exit(tag) {
-				if (tag.node.body.attributeTags) return;
-				if (isLastBranch(tag)) {
-					const branches = getBranches(tag);
-					const [ifTag] = branches[0];
-					const ifTagSection = getSection(ifTag);
-					const ifTagExtra = branches[0][0].node.extra;
-					const nodeRef = getOptimizedOnlyChildNodeBinding(ifTag, ifTagSection);
-					let expr = _marko_compiler.types.numericLiteral(branches.length);
-					for (let i = branches.length; i--;) {
-						const [branchTag, branchBodySection] = branches[i];
-						const [testAttr] = branchTag.node.attributes;
-						const consequent = _marko_compiler.types.numericLiteral(branchBodySection ? i : -1);
-						if (branchBodySection) setClosureSignalBuilder(branchTag, (_closure, render) => {
-							return callRuntime("_if_closure", getScopeAccessorLiteral(nodeRef, true), _marko_compiler.types.numericLiteral(i), render);
-						});
-						branchTag.remove();
-						expr = testAttr ? _marko_compiler.types.conditionalExpression(testAttr.value, consequent, expr) : consequent;
-					}
-					const signal = getSignal(ifTagSection, nodeRef, "if");
-					signal.build = () => {
-						const rendererArgs = [];
-						for (const [_, branchBodySection] of branches) if (branchBodySection) rendererArgs.push(...getBranchRendererArgs(branchBodySection).slice(0, 3));
-						else rendererArgs.push(void 0, void 0, void 0);
-						return callRuntime("_if", getScopeAccessorLiteral(nodeRef, true), ...replaceNullishAndEmptyFunctionsWith0(rendererArgs));
-					};
-					addValue(ifTagSection, ifTagExtra.referencedBindings, signal, expr);
-				}
+		exit(tag) {
+			const tagSection = getSection(tag);
+			const tagExtra = tag.node.extra;
+			const nodeBinding = tagExtra[kNodeBinding$1];
+			const write = writeTo(tag);
+			if (isOutputHTML()) {
+				for (const child of tag.node.body.body) if (_marko_compiler.types.isMarkoText(child)) write`${child.value}`;
+				else if (_marko_compiler.types.isMarkoPlaceholder(child)) write`${callRuntime(child.escape ? "_escape_comment" : "_unescaped", child.value)}`;
+			} else {
+				const textLiteral = bodyToTextLiteral(tag.node.body);
+				if (_marko_compiler.types.isStringLiteral(textLiteral)) write`${textLiteral}`;
+				else addStatement("render", tagSection, tagExtra.referencedBindings, _marko_compiler.types.expressionStatement(callRuntime("_text", createScopeReadExpression(nodeBinding), textLiteral)));
 			}
+			exit(tag);
+			write`-->`;
+			if (nodeBinding) markNode(tag, nodeBinding, getSerializeReason(tagSection, nodeBinding));
+			tag.remove();
 		}
-	}),
-	parseOptions: { controlFlow: true },
+	},
+	parseOptions: { text: true },
+	types: runtime_info_default.name + "/tags/html-comment.d.marko",
 	autocomplete: [{
-		snippet: "if=${1:condition}",
-		description: "Use to display content only if the condition is met.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+		description: "Use to create an html comment that is not stripped from the output.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-comment"
 	}]
 };
-const ElseIfTag = {
-	...IfTag,
+//#endregion
+//#region src/translator/core/html-script.ts
+var html_script_default = {
+	types: runtime_info_default.name + "/tags/html-script.d.marko",
+	html: true,
+	parseOptions: {
+		text: true,
+		preserveWhitespace: true
+	},
 	autocomplete: [{
-		snippet: "else-if=${1:condition}",
-		description: "Use after an <if> or <else-if> tag to display content if those conditions do not match and this one does.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+		description: "Use instead of `<script>` to render a native tag directly, without processing by Marko.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-script--html-style"
 	}]
 };
-const ElseTag = {
-	...IfTag,
+//#endregion
+//#region src/translator/core/html-style.ts
+var html_style_default = {
+	types: runtime_info_default.name + "/tags/html-style.d.marko",
+	html: true,
+	parseOptions: {
+		text: true,
+		preserveWhitespace: true
+	},
 	autocomplete: [{
-		description: "Use after an <if> or <else-if> tag to display content if those conditions do not match.",
-		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#if--else"
+		description: "Use instead of `<style>` to render a native tag directly, without processing by Marko.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#html-script--html-style"
 	}]
 };
-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);
-	assertNoSpreadAttrs(tag);
-	switch (getTagName(tag)) {
-		case "if":
-			assertHasValueAttribute(tag);
-			break;
-		case "else-if":
-			assertHasValueAttribute(tag);
-			assertHasPrecedingCondition(tag);
-			break;
-		case "else":
-			assertOptionalIfAttribute(tag);
-			assertHasPrecedingCondition(tag);
-			break;
-	}
-}
-function assertHasPrecedingCondition(tag) {
-	let prev = tag.getPrevSibling();
-	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) {
-	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) {
-	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).`);
-	if (node.attributes.length > 1) {
-		const start = node.attributes[1].loc?.start;
-		const end = node.attributes[node.attributes.length - 1].loc?.end;
-		const msg = `The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) only supports the [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`;
-		if (start == null || end == null) throw tag.get("name").buildCodeFrameError(msg);
-		else throw tag.hub.buildError({ loc: {
-			start,
-			end
-		} }, msg, Error);
-	}
-}
-function assertOptionalIfAttribute(tag) {
-	const { node } = tag;
-	const [ifAttr] = node.attributes;
-	if (node.attributes.length > 1 || ifAttr && ifAttr.name !== "if") {
-		const start = node.attributes[0].loc?.start;
-		const end = node.attributes[node.attributes.length - 1].loc?.end;
-		const msg = `The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) only supports an \`if=\` attribute.`;
-		if (start == null || end == null) throw tag.get("name").buildCodeFrameError(msg);
-		else throw tag.hub.buildError({ loc: {
-			start,
-			end
-		} }, msg, Error);
-	}
-}
-function getBranches(tag) {
-	let branches = BRANCHES_LOOKUP.get(tag);
-	if (!branches) {
-		let curTag = tag;
-		branches = [];
-		do {
-			BRANCHES_LOOKUP.set(curTag, branches);
-			branches.push([curTag, startSection(curTag.get("body"))]);
-			while ((curTag = curTag.getNextSibling()).isMarkoComment());
-		} while (isCoreTagName(curTag, "else") || isCoreTagName(curTag, "else-if"));
-	}
-	return branches;
-}
-function isLastBranch(tag) {
-	const branches = getBranches(tag);
-	return branches[branches.length - 1][0] === tag;
-}
-function isRoot(tag) {
-	return isCoreTagName(tag, "if");
-}
+//#endregion
+//#region src/translator/core/id.ts
+var id_default = {
+	analyze(tag) {
+		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
+		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
+		assertNoBodyContent(tag);
+		(0, _marko_compiler_babel_utils.assertNoAttributeTags)(tag);
+		const { node } = tag;
+		const [valueAttr] = node.attributes;
+		if (!node.var) throw tag.get("name").buildCodeFrameError("The [`<id>` tag](https://markojs.com/docs/reference/core-tag#id) requires a [tag variable](https://markojs.com/docs/reference/language#tag-variables).");
+		if (!_marko_compiler.types.isIdentifier(node.var)) throw tag.get("var").buildCodeFrameError("The [`<id>` tag](https://markojs.com/docs/reference/core-tag#id) cannot be destructured.");
+		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));
+	},
+	translate: { exit(tag) {
+		const { node } = tag;
+		const id = isOutputHTML() ? callRuntime("_id") : callRuntime("_id", scopeIdentifier);
+		const [valueAttr] = tag.node.attributes;
+		if (isOutputHTML()) tag.replaceWith(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, valueAttr ? _marko_compiler.types.logicalExpression("||", valueAttr.value, id) : id)]));
+		else {
+			const section = getSection(tag);
+			const source = initValue(node.var.extra.binding);
+			if (valueAttr) {
+				const { value } = valueAttr;
+				addValue(section, value.extra?.referencedBindings, source, _marko_compiler.types.logicalExpression("||", value, id));
+			} else addValue(section, void 0, source, id);
+			tag.remove();
+		}
+	} },
+	parseOptions: { openTagOnly: true },
+	attributes: {},
+	autocomplete: [{
+		displayText: "id/<name>",
+		description: "Use to create a unique identifier.",
+		snippet: "id/${1:name}",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#id"
+	}],
+	types: runtime_info_default.name + "/tags/id.d.marko"
+};
 //#endregion
 //#region src/translator/core/import.ts
 var import_default = {
@@ -7867,52 +7982,20 @@ var style_default = {
 		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
 		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
 		(0, _marko_compiler_babel_utils.assertNoAttributeTags)(tag);
-		const { node } = tag;
+		const { node, hub: { file } } = tag;
 		const ext = STYLE_EXT_REG.exec(node.rawValue || "")?.[1]?.slice(1);
 		for (const attr of node.attributes) {
 			if (attr.start == null && attr.type === "MarkoAttribute" && attr.name === "class" && attr.value.type === "StringLiteral" && attr.value.value === ext) continue;
 			throw tag.hub.buildError(attr.value, "The `style` does not support html attributes." + htmlStyleTagAlternateMsg);
 		}
 		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);
+		(node.extra ??= {}).styleImportPath = importPath;
+		if (importPath) addAssetImport(file, importPath);
 	},
 	translate(tag) {
 		const { node, hub: { file } } = tag;
-		const { filename, sourceMaps } = file.opts;
-		let ext = STYLE_EXT_REG.exec(node.rawValue || "")?.[1] || ".css";
-		if (node.var && !/\.module\./.test(ext)) ext = ".module" + ext;
-		const { resolveVirtualDependency } = getMarkoOpts();
-		const createMap = !!(resolveVirtualDependency && sourceMaps);
-		let magicString;
-		let code = "";
-		let last = 0;
-		let map;
-		for (const child of node.body.body) {
-			code += child.value;
-			if (createMap) {
-				const start = (0, _marko_compiler_babel_utils.getStart)(file, child);
-				if (start !== null) {
-					magicString ||= new magic_string.default(file.code, { filename });
-					if (start > last) magicString.remove(last, start);
-					last = (0, _marko_compiler_babel_utils.getEnd)(file, child);
-				}
-			}
-		}
-		if (magicString) {
-			if (file.code.length > last) magicString.remove(last, file.code.length);
-			map = magicString.generateMap({
-				source: filename,
-				includeContent: true
-			});
-			if (sourceMaps === "inline" || sourceMaps === "both") {
-				code += `\n/*# sourceMappingURL=${map.toUrl()}*/`;
-				if (sourceMaps === "inline") map = void 0;
-			}
-		}
-		const importPath = resolveVirtualDependency?.(filename, {
-			virtualPath: `./${path.default.basename(filename) + ext}`,
-			code,
-			map
-		});
+		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 {
@@ -7929,6 +8012,49 @@ var style_default = {
 	},
 	attributes: {}
 };
+/**
+* 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) {
+	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;
+	let code = "";
+	let last = 0;
+	let map;
+	for (const child of node.body.body) {
+		code += child.value;
+		if (sourceMaps) {
+			const start = (0, _marko_compiler_babel_utils.getStart)(file, child);
+			if (start !== null) {
+				magicString ||= new magic_string.default(file.code, { filename });
+				if (start > last) magicString.remove(last, start);
+				last = (0, _marko_compiler_babel_utils.getEnd)(file, child);
+			}
+		}
+	}
+	if (magicString) {
+		if (file.code.length > last) magicString.remove(last, file.code.length);
+		map = magicString.generateMap({
+			source: filename,
+			includeContent: true
+		});
+		if (sourceMaps === "inline" || sourceMaps === "both") {
+			code += `\n/*# sourceMappingURL=${map.toUrl()}*/`;
+			if (sourceMaps === "inline") map = void 0;
+		}
+	}
+	return resolveVirtualDependency(filename, {
+		virtualPath: `./${path.default.basename(filename) + ext}`,
+		code,
+		map
+	});
+}
 //#endregion
 //#region src/translator/core/try.ts
 const hasEnabledCatch = /* @__PURE__ */ new WeakSet();
@@ -8075,6 +8201,7 @@ var import_declaration_default = {
 		const { node } = importDecl;
 		const { source } = node;
 		const { value } = source;
+		if (_marko_compiler.types.isProgram(importDecl.parent) && isClientAssetImport(importDecl.hub.file, value)) addAssetImport(importDecl.hub.file, value);
 		const tagImport = (0, _marko_compiler_babel_utils.resolveTagImport)(importDecl, value);
 		if (tagImport) {
 			(node.extra ??= {}).tagImport = tagImport;
@@ -8241,7 +8368,7 @@ var placeholder_default = {
 				visit(placeholder, 32);
 			}
 			if (isHTML) {
-				write`${callRuntime(method, value)}`;
+				write`${method === "_escape" ? buildEscapedTextExpression(value) : callRuntime(method, value)}`;
 				if (nodeBinding) markNode(placeholder, nodeBinding, markerSerializeReason);
 			} else addStatement("render", section, valueExtra.referencedBindings, _marko_compiler.types.expressionStatement(method === "_text" ? callRuntime("_text", createScopeReadExpression(nodeBinding), value) : callRuntime("_html", scopeIdentifier, value, getScopeAccessorLiteral(nodeBinding))), void 0, true);
 		}
@@ -8249,6 +8376,26 @@ var placeholder_default = {
 		placeholder.remove();
 	} }
 };
+function buildEscapedTextExpression(value) {
+	const { _escape } = getHTMLRuntime();
+	switch (value.type) {
+		case "StringLiteral":
+		case "NumericLiteral":
+		case "BooleanLiteral": return _marko_compiler.types.stringLiteral(_escape(value.value));
+		case "NullLiteral": return _marko_compiler.types.stringLiteral("");
+		case "ConditionalExpression": return _marko_compiler.types.conditionalExpression(value.test, buildEscapedTextExpression(value.consequent), buildEscapedTextExpression(value.alternate));
+		case "TemplateLiteral": {
+			const parts = [];
+			value.quasis.forEach((quasi, i) => {
+				parts.push(_escape(quasi.value.cooked ?? ""));
+				const expression = value.expressions[i];
+				if (expression) parts.push(callRuntime("_escape", _marko_compiler.types.templateLiteral([_marko_compiler.types.templateElement({ raw: "" }), _marko_compiler.types.templateElement({ raw: "" }, true)], [expression])));
+			});
+			return normalizeStringExpression(parts) ?? _marko_compiler.types.stringLiteral("");
+		}
+		default: return callRuntime("_escape", value);
+	}
+}
 function analyzeSiblingText(placeholder) {
 	const placeholderExtra = placeholder.node.extra;
 	let prev = placeholder.getPrevSibling();
@@ -8489,7 +8636,7 @@ function translateDOM(tag) {
 		write`${_marko_compiler.types.identifier(childExports.template)}`;
 		injectWalks(tag, tagName, _marko_compiler.types.identifier(childExports.walks));
 	} else {
-		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName) => importOrSelfReferenceName(tag.hub.file, relativePath, binding.export, preferredName), (section, childBinding) => {
+		knownTagTranslateDOM(tag, childExports.params, (binding, preferredName, directContent) => importOrSelfReferenceName(tag.hub.file, relativePath, directContent && binding.directContentExport || binding.export, preferredName), (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`)}`;
@@ -8582,6 +8729,7 @@ var dynamic_tag_default = {
 		startSection(tagBody);
 		trackParamsReferences(tagBody, 3);
 		addSerializeExpr(tagSection, hasVar || tagExtra, nodeBinding);
+		if (!hasVar && !node.arguments && !node.attributes.length && !node.body.body.length) tagExtra[kDirectContent] = true;
 	} },
 	translate: {
 		enter(tag) {
@@ -8608,7 +8756,7 @@ var dynamic_tag_default = {
 				if (isOutputHTML()) knownTagTranslateHTML(tag, _marko_compiler.types.memberExpression(tag.node.name, _marko_compiler.types.identifier("content")), definedBodySection, propTree);
 				else {
 					const write = writeTo(tag);
-					knownTagTranslateDOM(tag, propTree, (binding, preferredName) => getSignal(definedBodySection, binding, preferredName).identifier, (section, childBinding) => {
+					knownTagTranslateDOM(tag, propTree, (binding, preferredName, directContent) => directContent && binding.directContentExport ? _marko_compiler.types.identifier(binding.directContentExport) : getSignal(definedBodySection, binding, preferredName).identifier, (section, childBinding) => {
 						const signal = getSignal(definedBodySection, void 0);
 						if (signalHasStatements(signal)) addStatement("render", section, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(_marko_compiler.types.memberExpression(signal.identifier, _marko_compiler.types.identifier("_")), [createScopeReadExpression(childBinding, section), getScopeExpression(section, definedBodySection.parent)])));
 						else if (definedBodySection.readsOwner) addStatement("render", section, void 0, _marko_compiler.types.expressionStatement(_marko_compiler.types.assignmentExpression("=", toMemberExpression(createScopeReadExpression(childBinding, section), getAccessorProp().Owner), getScopeExpression(section, definedBodySection.parent))));
@@ -8672,6 +8820,8 @@ var dynamic_tag_default = {
 				signal.build = () => {
 					return callRuntime("_dynamic_tag", getScopeAccessorLiteral(nodeBinding, true), bodySection && _marko_compiler.types.identifier(bodySection.name), tagVarSignal ? _marko_compiler.types.arrowFunctionExpression([], tagVarSignal.identifier) : void 0, hasTagArgs && _marko_compiler.types.numericLiteral(1));
 				};
+				const directBinding = tagExtra.referencedBindings;
+				if (directBinding && !Array.isArray(directBinding) && directBinding.directContentExport) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.exportNamedDeclaration(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(_marko_compiler.types.identifier(directBinding.directContentExport), callRuntime("_dynamic_tag_content", getScopeAccessorLiteral(nodeBinding, true)))])));
 				if (args.length) {
 					const argsOrInput = hasTagArgs ? _marko_compiler.types.arrayExpression(args) : args[0];
 					if (!_marko_compiler.types.isObjectExpression(argsOrInput) || argsOrInput.properties.length) signal.extraArgs = [_marko_compiler.types.arrowFunctionExpression([], statements.length ? _marko_compiler.types.blockStatement(statements.concat(_marko_compiler.types.returnStatement(argsOrInput))) : argsOrInput)];