@torpor/view 1.0.2 → 1.1.0

package/dist/compile.mjs

@@ -537,9 +537,7 @@ function buildNodeFragmentText(node, status, fragments, currentFragment) {
 			if (currentFragment) currentFragment.text += isReactive(content) ? "#" : content;
 			break;
 		}
-		case "special":
-			buildSpecialFragmentText(node, status, fragments, currentFragment);
-			break;
+		case "special": buildSpecialFragmentText(node, status, fragments, currentFragment);
 	}
 }
 function buildRootFragmentText(node, status, fragments) {
@@ -584,7 +582,6 @@ function buildControlFragmentText(node, status, fragments, currentFragment) {
 			};
 			fragments.push(node.fragment);
 			for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
-			break;
 	}
 }
 function buildComponentFragmentText(node, status, fragments, currentFragment) {
@@ -934,9 +931,7 @@ function declareControlFragmentVars(fragment, node, path, status, b, parentName,
 		case "@html group":
 			declareParentAndAnchorFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, node.operation.substring(1).replace(" group", ""), declare);
 			break;
-		default:
-			for (let [i, child] of node.children.entries()) declareFragmentVars(fragment, child, path, status, b, parentName, anchorName, varPaths, i === node.children.length - 1, declare);
-			break;
+		default: for (let [i, child] of node.children.entries()) declareFragmentVars(fragment, child, path, status, b, parentName, anchorName, varPaths, i === node.children.length - 1, declare);
 	}
 }
 function declareComponentFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, declare) {
@@ -1005,8 +1000,10 @@ function declareElementFragmentVars(fragment, node, path, status, b, parentName,
 		else b.append(`t_elm("${node.tagName}", {${attributes}}, [`);
 	}
 	for (let [i, child] of node.children.entries()) declareFragmentVars(fragment, child, elementPath, status, b, parentName, anchorName, varPaths, i === node.children.length - 1, declare);
-	if (!declare) if (declareVariable || childParentName) b.append("])),");
-	else b.append("]),");
+	if (!declare) {
+		if (declareVariable || childParentName) b.append("])),");
+		else b.append("]),");
+	}
 }
 function elementNodeNeedsDeclaration(node, topLevel, lastChild) {
 	const hasReactiveAttribute = node.attributes.some((a) => a.value && a.reactive);
@@ -1127,10 +1124,12 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
 		let level = 0;
 		let end = 0;
 		for (let i = pos + match.length; i < varPath.length; i++) if (varPath[i] === "(") level++;
-		else if (varPath[i] === ")") if (level === 0) {
-			end = i;
-			break;
-		} else level--;
+		else if (varPath[i] === ")") {
+			if (level === 0) {
+				end = i;
+				break;
+			} else level--;
+		}
 		const tail = varPath.substring(end + count);
 		varPath = `${head}t_skip(${varPath.substring(pos + match.length, end)}, ${count})${tail}`;
 	}
@@ -1146,10 +1145,12 @@ function getFragmentVarPathPart(path, varPath, status, root = false, rootFn = "t
 		varPath = `t_child(${varPath})`;
 	}
 	for (let [i, child] of path.children.entries()) {
-		if (i > 0) if (child.type === "text" || child.type === "space") varPath = `t_next_text(${varPath}, true)`;
-		else {
-			status.imports.add("t_next");
-			varPath = `t_next(${varPath})`;
+		if (i > 0) {
+			if (child.type === "text" || child.type === "space") varPath = `t_next_text(${varPath}, true)`;
+			else {
+				status.imports.add("t_next");
+				varPath = `t_next(${varPath})`;
+			}
 		}
 		if (i === path.children.length - 1 && child.children.length) varPath = getFragmentVarPathPart(child, varPath, status);
 	}
@@ -1284,39 +1285,40 @@ function buildComponentNode(node, status, b, root = false) {
 		let props = [];
 		let runs = [];
 		let bindingRuns = [];
-		for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@component") {} else if (value != null && fullyReactive) if (name.startsWith("&")) {
-			name = name.substring(1);
-			props.push({
-				name,
-				value,
-				spans: [span]
-			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-			bindingRuns.push(bindingTarget(value, `${propsName}["${name}"]`, name, status.imports));
-		} else if (name === "class") {
-			if (node.scopeStyles) value = `[${value}, "torp-${status.styleHash}"]`;
-			props.push({
-				name,
-				value,
-				spans: [span]
-			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-		} else if (name === "style") {
-			props.push({
-				name,
-				value,
-				spans: [span]
-			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-		} else {
-			props.push({
-				name,
-				value,
-				spans: [span]
-			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-		}
-		else if (value != null && reactive) {
+		for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@component") {} else if (value != null && fullyReactive) {
+			if (name.startsWith("&")) {
+				name = name.substring(1);
+				props.push({
+					name,
+					value,
+					spans: [span]
+				});
+				runs.push(`${propsName}["${name}"] = ${value};`);
+				bindingRuns.push(bindingTarget(value, `${propsName}["${name}"]`, name, status.imports));
+			} else if (name === "class") {
+				if (node.scopeStyles) value = `[${value}, "torp-${status.styleHash}"]`;
+				props.push({
+					name,
+					value,
+					spans: [span]
+				});
+				runs.push(`${propsName}["${name}"] = ${value};`);
+			} else if (name === "style") {
+				props.push({
+					name,
+					value,
+					spans: [span]
+				});
+				runs.push(`${propsName}["${name}"] = ${value};`);
+			} else {
+				props.push({
+					name,
+					value,
+					spans: [span]
+				});
+				runs.push(`${propsName}["${name}"] = ${value};`);
+			}
+		} else if (value != null && reactive) {
 			const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
 			value = newValue;
 			if (name === "class") {
@@ -1574,8 +1576,10 @@ function collectExpressionStrings(node, out) {
 	}
 	if (isElementLike(node)) {
 		for (const attr of node.attributes) {
-			if (attr.value !== void 0) if (attr.name.startsWith("&")) out.push(`${attr.value} =`);
-			else out.push(attr.value);
+			if (attr.value !== void 0) {
+				if (attr.name.startsWith("&")) out.push(`${attr.value} =`);
+				else out.push(attr.value);
+			}
 			if (attr.fullyReactive && attr.name !== attr.value) out.push(attr.name);
 		}
 		for (const child of node.children) collectExpressionStrings(child, out);
@@ -2158,10 +2162,11 @@ function buildTitleNode(node, status, b) {
 }
 function buildHeadNode(node, status, b) {
 	status.imports.add("$run");
+	status.imports.add("t_head_element");
+	const selector = headElementSelector(node);
 	b.append("$run(() => {");
 	b.append(`
-			const t_head_el = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
+			const t_head_el = t_head_element("${node.tagName}", ${JSON.stringify(selector)});`);
 	for (let { name, value, span } of node.attributes) if (value != null) {
 		status.imports.add("t_attribute");
 		value = replaceForVarNames(value, status);
@@ -2169,31 +2174,55 @@ function buildHeadNode(node, status, b) {
 	}
 	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);
 }
+/**
+* Builds a selector that finds an equivalent element in the head, from the
+* attributes that identify it (e.g. `meta[name="description"]`). Returns an
+* empty string when the element has no identifying attributes, in which case
+* a new element is always created.
+*/
+function headElementSelector(node) {
+	const identityAttributes = [
+		"name",
+		"property",
+		"rel",
+		"charset",
+		"http-equiv",
+		"itemprop"
+	];
+	const parts = [];
+	for (let { name, value, reactive } of node.attributes) {
+		if (!identityAttributes.includes(name) || value == null || reactive) continue;
+		const attributeValue = trimQuotes(value).replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
+		parts.push(`[${name}="${attributeValue}"]`);
+	}
+	return parts.length ? node.tagName + parts.join("") : "";
+}
 function buildElementAttributes$1(node, varName, status, b) {
 	let fragment = status.fragmentStack.at(-1)?.fragment;
 	if (!fragment) throw new Error("No fragment on stack");
-	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
-	else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
-	else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
-	else if (name.startsWith("on")) buildEventAttribute(varName, name, value, span, status, b);
-	else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
-	else if (name === "class") {
-		status.imports.add("t_class");
-		const params = [value];
-		if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-		const propName = status.ns ? "className.baseVal" : "className";
-		stashRun(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", span, status);
-	} else if (name === "style") {
-		status.imports.add("t_style");
-		stashRun(fragment, `${varName}.style.cssText += t_style(`, value, ");", span, status);
-	} else if (name.includes("-")) {
-		status.imports.add("t_attribute");
-		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
-	} else {
-		status.imports.add("t_attribute");
-		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
-	}
-	else if (value != null && reactive) {
+	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
+		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
+		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
+		else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
+		else if (name.startsWith("on")) buildEventAttribute(varName, name, value, span, status, b);
+		else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
+		else if (name === "class") {
+			status.imports.add("t_class");
+			const params = [value];
+			if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
+			const propName = status.ns ? "className.baseVal" : "className";
+			stashRun(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", span, status);
+		} else if (name === "style") {
+			status.imports.add("t_style");
+			stashRun(fragment, `${varName}.style.cssText += t_style(`, value, ");", span, status);
+		} else if (name.includes("-")) {
+			status.imports.add("t_attribute");
+			stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
+		} else {
+			status.imports.add("t_attribute");
+			stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
+		}
+	} else if (value != null && reactive) {
 		const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
 		value = newValue;
 		if (name === "class") {
@@ -2245,7 +2274,6 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 			case "radio":
 				eventName = "change";
 				inputValue = "e.target.value";
-				break;
 		}
 	} else if (node.tagName === "select") {
 		eventName = "change";
@@ -2288,10 +2316,12 @@ function buildTransitionAttribute(node, varName, name, value, status, b) {
 			b.append(`const ${entryVarName} = (${value})(${varName});`);
 			b.append(`t_animate(${varName}, ${entryVarName});`);
 		}
-	} else if (name === "transition-out") if (node.attributes.find((a) => a.name === "transition-in")) return;
-	else {
-		b.append(`const ${exitVarName} = (${value})(${varName});`);
-		b.append(`t_animate(${varName}, null, ${entryVarName});`);
+	} else if (name === "transition-out") {
+		if (node.attributes.find((a) => a.name === "transition-in")) return;
+		else {
+			b.append(`const ${exitVarName} = (${value})(${varName});`);
+			b.append(`t_animate(${varName}, null, ${entryVarName});`);
+		}
 	}
 }
 //#endregion
@@ -2504,6 +2534,7 @@ const importsMap$1 = {
 	t_attribute: "import { t_attribute } from \"${folder}\";",
 	t_dynamic: "import { t_dynamic } from \"${folder}\";",
 	t_fmt: "import { t_fmt } from \"${folder}\";",
+	t_head_element: "import { t_head_element } from \"${folder}\";",
 	t_fragment: "import { t_fragment } from \"${folder}\";",
 	t_fragment_el: "import { t_fragment_el } from \"${folder}\";",
 	t_event: "import { t_event } from \"${folder}\";",
@@ -2715,13 +2746,22 @@ function buildAttributeNode(attribute, b) {
 	b.append(`${attribute.name}: ${attribute.value};`);
 }
 //#endregion
-//#region src/compile/build/server/buildServerComponentNode.ts
-function buildServerComponentNode(node, status, b) {
-	status.output += HYDRATION_START_COMMENT;
+//#region src/compile/build/server/flushOutput.ts
+/**
+* Appends any pending output to the generated code, targeting the body
+* string -- or the head string, when building inside a @head block.
+*/
+function flushOutput(status, b) {
 	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
+		b.append(`${status.inHead ? "t_head" : "t_body"} += \`${status.output}\`;`);
 		status.output = "";
 	}
+}
+//#endregion
+//#region src/compile/build/server/buildServerComponentNode.ts
+function buildServerComponentNode(node, status, b) {
+	status.output += HYDRATION_START_COMMENT;
+	flushOutput(status, b);
 	const componentHasProps = node.attributes.length;
 	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
 	if (componentHasProps) {
@@ -2759,7 +2799,7 @@ function buildServerComponentNode(node, status, b) {
 			const nameAttribute = slot.attributes.find((a) => a.name === "name");
 			const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
 			const slotParams = [slot.hasSlotProps ? "$slot: Record<PropertyKey, any>" : "_$slot?: Record<PropertyKey, any>", "// @ts-ignore\n// eslint-disable-next-line no-unused-vars\n$context?: Record<PropertyKey, any>"];
-			b.append(`${slot.hasSlotProps ? "// @ts-ignore\n" : ""}${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
+			b.append(`${slot.hasSlotProps ? "// @ts-ignore\n" : ""}${slotsName}["${slotName}"] = async (\n${slotParams.join(",\n")}\n) => {`);
 			b.append(`let t_body = "";`);
 			for (let child of slot.children) buildServerNode(child, status, b);
 			if (status.output) {
@@ -2778,39 +2818,51 @@ function buildServerComponentNode(node, status, b) {
 	let renderParams = `${propsName}, $context`;
 	if (slotsName !== "undefined") renderParams += `, ${slotsName}`;
 	const componentResult = nextVarName("comp", status);
-	b.append(`const ${componentResult} = ${componentName}(${renderParams});`);
-	b.append(`t_body += ${componentResult}.body;`);
+	b.append(`const ${componentResult} = await ${componentName}(${renderParams});`);
+	b.append(`${status.inHead ? "t_head" : "t_body"} += ${componentResult}.body;`);
 	b.append(`t_head += ${componentResult}.head;`);
 	status.output += HYDRATION_END_COMMENT;
 	status.output += "<!>";
 }
 //#endregion
 //#region src/compile/build/server/buildServerAwaitNode.ts
+/**
+* Builds an `@await` boundary for the server (ASYNC.md → "Server rendering").
+*
+* Rather than inlining the `with` branch (the old shape), the boundary is
+* handed to the `t_await_server` runtime helper: content and `with` branches
+* become closures, and the helper decides at render time whether resolved
+* content can ship (all `source: "server"` reads settled) or the `with`
+* branch + client fetch is the honest output. The runtime emits the
+* hydration markers and anchor itself, including the `<!--t-await:...-->`
+* values payload for resolved boundaries.
+*/
 function buildServerAwaitNode(node, status, b) {
-	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
-	for (let branch of node.children) if (isControlNode(branch) && branch.operation === "@with") buildServerAwaitBranch(branch, status, b);
-	status.output += HYDRATION_END_COMMENT;
-	status.output += "<!>";
-}
-function buildServerAwaitBranch(node, status, b) {
-	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
+	status.imports.add("t_await_server");
+	const id = status.awaitCount++;
+	const resultName = nextVarName("await", status);
+	b.append(`const ${resultName} = await t_await_server("${id}", async () => {`);
+	b.append(`let t_body = "";`);
+	b.append(`let t_head = "";`);
+	for (let branch of node.children) if (isControlNode(branch) && branch.operation === "@await") for (let child of branch.children) buildServerNode(child, status, b);
+	flushOutput(status, b);
+	b.append(`return { body: t_body, head: t_head };`);
+	b.append(`}, async () => {`);
+	b.append(`let t_body = "";`);
+	b.append(`let t_head = "";`);
+	for (let branch of node.children) if (isControlNode(branch) && branch.operation === "@with") for (let child of branch.children) buildServerNode(child, status, b);
+	flushOutput(status, b);
+	b.append(`return { body: t_body, head: t_head };`);
+	b.append(`});`);
+	b.append(`${status.inHead ? "t_head" : "t_body"} += ${resultName}.body;`);
+	b.append(`t_head += ${resultName}.head;`);
 }
 //#endregion
 //#region src/compile/build/server/buildServerForNode.ts
 function buildServerForNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	for (let branch of node.children) if (isControlNode(branch)) buildServerForBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
 	status.output += "<!>";
@@ -2819,10 +2871,7 @@ function buildServerForBranch(node, status, b) {
 	b.append(`${node.statement} {`);
 	status.output += HYDRATION_BREAK_COMMENT;
 	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	b.append("}");
 }
 //#endregion
@@ -2837,10 +2886,7 @@ function buildServerHtmlNode(node, status) {
 //#region src/compile/build/server/buildServerIfNode.ts
 function buildServerIfNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	for (let branch of node.children) if (isControlNode(branch)) buildServerIfBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
 	status.output += "<!>";
@@ -2849,20 +2895,14 @@ function buildServerIfBranch(node, status, b) {
 	b.append(`${node.statement} {`);
 	status.output += HYDRATION_BREAK_COMMENT;
 	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	b.append("}");
 }
 //#endregion
 //#region src/compile/build/server/buildServerReplaceNode.ts
 function buildServerReplaceNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	for (let branch of node.children) if (isControlNode(branch)) buildServerReplaceBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
 	status.output += "<!>";
@@ -2870,10 +2910,7 @@ function buildServerReplaceNode(node, status, b) {
 function buildServerReplaceBranch(node, status, b) {
 	b.append(`${node.statement};`);
 	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 }
 //#endregion
 //#region src/compile/build/server/buildServerScriptNode.ts
@@ -2888,10 +2925,7 @@ function maybeAppend(text, end) {
 //#region src/compile/build/server/buildServerSwitchNode.ts
 function buildServerSwitchNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	b.append(`${node.statement} {`);
 	for (let branch of node.children.filter((c) => isControlNode(c))) if (isControlNode(branch)) buildServerSwitchBranch(branch, status, b);
 	b.append("}");
@@ -2902,10 +2936,7 @@ function buildServerSwitchBranch(node, status, b) {
 	b.append(`${node.statement} {`);
 	status.output += HYDRATION_BREAK_COMMENT;
 	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	b.append("break;");
 	b.append("}");
 }
@@ -2913,10 +2944,7 @@ function buildServerSwitchBranch(node, status, b) {
 //#region src/compile/build/server/buildServerTryNode.ts
 function buildServerTryNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	const branches = node.children.filter((n) => isControlNode(n));
 	let tryBranch = branches.find((n) => n.operation === "@try");
 	let catchBranch = branches.find((n) => n.operation === "@catch");
@@ -2937,10 +2965,7 @@ function buildServerTryNode(node, status, b) {
 }
 function buildServerTryBranch(node, status, b) {
 	for (let child of node.children) buildServerNode(child, status, b);
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 }
 //#endregion
 //#region src/compile/build/server/buildServerControlNode.ts
@@ -2981,18 +3006,12 @@ function buildServerControlNode(node, status, b) {
 			break;
 		case "@html": break;
 		case "@const":
-			if (status.output) {
-				b.append(`t_body += \`${status.output}\`;`);
-				status.output = "";
-			}
+			flushOutput(status, b);
 			buildServerScriptNode(node, b);
 			break;
 		case "@function":
 		case "@async function":
-			if (status.output) {
-				b.append(`t_body += \`${status.output}\`;`);
-				status.output = "";
-			}
+			flushOutput(status, b);
 			b.append("");
 			buildServerScriptNode(node, b);
 			b.append("");
@@ -3022,48 +3041,47 @@ function buildServerElementNode(node, status, b) {
 	}
 }
 function buildElementAttributes(node, status) {
-	let needsClass = node.scopeStyles;
+	let needsClass = node.scopeStyles && !status.inHead;
 	let attributes = [];
-	for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (name.startsWith("on") || name.startsWith(":on")) {} else if (name.startsWith("transition") && value) {} else if (value != null && fullyReactive) if (name === "&value" || name === "&checked" || name === "&group") {
-		if (name === "&value" && node.tagName === "select" && node.attributes.some((a) => a.name === "multiple")) continue;
-		let defaultValue = "";
-		let typeAttribute = node.attributes.find((a) => a.name === "type");
-		if (typeAttribute && typeAttribute.value) switch (trimQuotes(typeAttribute.value)) {
-			case "number":
-				defaultValue = "0";
-				break;
-			case "checkbox":
-				defaultValue = "false";
-				break;
-		}
-		if (!defaultValue) {
+	for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (name.startsWith("on") || name.startsWith(":on")) {} else if (name.startsWith("transition") && value) {} else if (value != null && fullyReactive) {
+		if (name === "&value" || name === "&checked" || name === "&group") {
+			if (name === "&value" && node.tagName === "select" && node.attributes.some((a) => a.name === "multiple")) continue;
+			let defaultValue = "";
+			let typeAttribute = node.attributes.find((a) => a.name === "type");
+			if (typeAttribute && typeAttribute.value) switch (trimQuotes(typeAttribute.value)) {
+				case "number":
+					defaultValue = "0";
+					break;
+				case "checkbox": defaultValue = "false";
+			}
+			if (!defaultValue) {
+				status.imports.add("t_attr");
+				value = `t_attr(${value})`;
+				defaultValue = "\"\"";
+			}
+			let valueOrDefault = `${value} || ${defaultValue}`;
+			const propName = name.substring(1);
+			attributes.push(`${propName}="\${${valueOrDefault}}"`);
+		} else if (name === "class") {
+			status.imports.add("t_class");
+			let params = [value];
+			if (node.scopeStyles && !status.inHead) {
+				params.push(`"torp-${status.styleHash}"`);
+				needsClass = false;
+			}
+			value = params.join(", ");
+			attributes.push(`\${t_class(${value}) !== "" ? \`class="\${t_class(${value})}"\` : ""}`);
+		} else if (name === "style") {
+			status.imports.add("t_style");
+			attributes.push(`\${t_style(${value}) !== "" ? \`style="\${t_style(${value})}"\` : ""}`);
+		} else {
 			status.imports.add("t_attr");
-			value = `t_attr(${value})`;
-			defaultValue = "\"\"";
+			attributes.push(`\${${value} ? \`${name}="\${t_attr(${value})}"\` : ""}`);
 		}
-		let valueOrDefault = `${value} || ${defaultValue}`;
-		const propName = name.substring(1);
-		attributes.push(`${propName}="\${${valueOrDefault}}"`);
-	} else if (name === "class") {
-		status.imports.add("t_class");
-		let params = [value];
-		if (node.scopeStyles) {
-			params.push(`"torp-${status.styleHash}"`);
-			needsClass = false;
-		}
-		value = params.join(", ");
-		attributes.push(`\${t_class(${value}) !== "" ? \`class="\${t_class(${value})}"\` : ""}`);
-	} else if (name === "style") {
-		status.imports.add("t_style");
-		attributes.push(`\${t_style(${value}) !== "" ? \`style="\${t_style(${value})}"\` : ""}`);
-	} else {
-		status.imports.add("t_attr");
-		attributes.push(`\${${value} ? \`${name}="\${t_attr(${value})}"\` : ""}`);
-	}
-	else if (value != null && reactive) {
+	} else if (value != null && reactive) {
 		status.imports.add("t_attr");
 		attributes.push(`${name}="${trimQuotes(value).replaceAll("{", "${t_attr(").replaceAll("}", ")}")}"`);
-	} else if (name === "class" && node.scopeStyles) {
+	} else if (name === "class" && node.scopeStyles && !status.inHead) {
 		value = value ? `"${trimQuotes(value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
 		attributes.push(`${name}="${trimQuotes(value).replaceAll("\"", "&quot;")}"`);
 		needsClass = false;
@@ -3081,10 +3099,7 @@ function buildServerRootNode(node, status, b) {
 //#region src/compile/build/server/buildServerSlotNode.ts
 function buildServerSlotNode(node, status, b) {
 	status.output += HYDRATION_START_COMMENT;
-	if (status.output) {
-		b.append(`t_body += \`${status.output}\`;`);
-		status.output = "";
-	}
+	flushOutput(status, b);
 	let slotName = node.attributes.find((a) => a.name === "name")?.value;
 	slotName = slotName ? trimQuotes(slotName) : "_";
 	const propsName = nextVarName("slot_props", status);
@@ -3096,15 +3111,12 @@ function buildServerSlotNode(node, status, b) {
 		else b.append(`${propsName}["${name}"] = true;`);
 	}
 	b.append(`if ($slots && $slots["${slotName}"]) {`);
-	b.append(`t_body += $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`);
+	b.append(`${status.inHead ? "t_head" : "t_body"} += await $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`);
 	const fill = node.children.find((c) => isSpecialNode(c) && (c.tagName === "fill" || c.tagName === "filldef"));
 	if (fill && isSpecialNode(fill) && fill.children.length) {
 		b.append(`} else {`);
 		for (let child of fill.children) buildServerNode(child, status, b);
-		if (status.output) {
-			b.append(`t_body += \`${status.output}\`;`);
-			status.output = "";
-		}
+		flushOutput(status, b);
 	}
 	b.append(`}`);
 	status.output += HYDRATION_END_COMMENT;
@@ -3202,6 +3214,8 @@ const importsMap = {
 	$unwrap: "import { $unwrap } from \"${folder}\";",
 	$peek: "import { $peek } from \"${folder}\";",
 	$batch: "import { $batch } from \"${folder}\";",
+	t_server_flush: "import { t_server_flush } from \"${folder}\";",
+	t_await_server: "import { t_await_server } from \"${folder}\";",
 	t_fmt: "import { t_fmt } from \"${folder}\";",
 	t_attr: "import { t_attr } from \"${folder}\";",
 	t_class: "import { t_class } from \"${folder}\";",
@@ -3244,18 +3258,24 @@ function buildServerTemplate(template, imports, b, options) {
 	if (/\$unwrap\b/.test(scriptCode)) imports.add("$unwrap");
 	if (/\$peek\b/.test(scriptCode)) imports.add("$peek");
 	if (/\$batch\b/.test(scriptCode)) imports.add("$batch");
+	const asyncChunks = /* @__PURE__ */ new Set();
+	for (let [i, chunk] of template.script.entries()) if (chunk.script === "/* @params */" && i > 0) asyncChunks.add(i - 1);
 	let currentIndex = 0;
 	let current = template.components[0];
-	for (let chunk of template.script) if (chunk.script === "/* @params */") {
+	for (let [chunkIndex, chunk] of template.script.entries()) if (chunk.script === "/* @params */") {
 		let params = [
 			current.params ?? `${current.props?.length ? "$props: Record<PropertyKey, any>" : "_$props?: Record<PropertyKey, any>"}`,
 			`${current.contextProps?.length || current.markup && markupRendersComponent(current.markup) || current.error && markupRendersComponent(current.error) ? "$context" : "_$context"}?: Record<PropertyKey, any>`,
 			`${current.slotProps?.length ? "$slots" : "_$slots"}?: Record<string, ServerSlotRender>`
 		];
 		b.append(params.join(",\n") + ",");
-	} else if (chunk.script === ") /* @return_type */ {") b.append("): { body: string; head: string } {");
+	} else if (chunk.script === ") /* @return_type */ {") b.append("): Promise<{ body: string; head: string }> {");
 	else if (chunk.script === "/* @start */") {
 		if (current.contextProps?.length) b.append(`$context = Object.assign({}, $context);`);
+		if (containsAwaitGroup(current.markup) || containsAwaitGroup(current.error) || containsAwaitGroup(current.head)) {
+			imports.add("t_server_flush");
+			b.append(`return t_server_flush(async () => {`);
+		}
 		b.append(`let t_body = "";`);
 		b.append(`let t_head = "";`);
 	} else if (chunk.script === "/* @render */") {
@@ -3266,6 +3286,7 @@ function buildServerTemplate(template, imports, b, options) {
 				styleHash: current.style?.hash || "",
 				varNames: {},
 				preserveWhitespace: false,
+				awaitCount: 0,
 				options
 			};
 			b.append("");
@@ -3289,6 +3310,7 @@ function buildServerTemplate(template, imports, b, options) {
 				styleHash: current.style?.hash || "",
 				varNames: {},
 				preserveWhitespace: false,
+				awaitCount: 0,
 				options
 			};
 			b.append(`} catch (${current.errorVar}) {`);
@@ -3302,7 +3324,24 @@ function buildServerTemplate(template, imports, b, options) {
 			}
 			b.append("}");
 		}
-	} else if (chunk.script === "/* @head */") {} else if (chunk.script === "/* @style */") {
+	} else if (chunk.script === "/* @head */") {
+		if (current.head) {
+			const status = {
+				imports,
+				output: "",
+				styleHash: current.style?.hash || "",
+				varNames: {},
+				preserveWhitespace: false,
+				inHead: true,
+				awaitCount: 0,
+				options
+			};
+			b.append("");
+			b.append("/* Head */");
+			buildServerNode(current.head, status, b);
+			flushOutput(status, b);
+		}
+	} else if (chunk.script === "/* @style */") {
 		if (current.style) {
 			b.append("");
 			b.append("/* Style */");
@@ -3311,9 +3350,23 @@ function buildServerTemplate(template, imports, b, options) {
 		}
 	} else if (chunk.script === "/* @end */") {
 		b.append(`return { body: t_body, head: t_head };`);
+		if (containsAwaitGroup(current.markup) || containsAwaitGroup(current.error) || containsAwaitGroup(current.head)) b.append(`});`);
 		currentIndex += 1;
 		current = template.components[currentIndex];
-	} else b.append(chunk.script);
+	} else if (asyncChunks.has(chunkIndex)) b.append(chunk.script.replace(/(?<!async\s)function\s+([A-Za-z_$][\w$]*)((?:<(?:[^<>]|<[^<>]*>)*>)?)\s*\($/, "async function $1$2("));
+	else b.append(chunk.script);
+}
+/**
+* Whether a markup tree contains an `@await` boundary, so the component's
+* render must be wrapped in a flush.
+*/
+function containsAwaitGroup(node) {
+	if (node === void 0 || node === null) return false;
+	if (isControlNode(node) && node.operation === "@await group") return true;
+	if (node.type !== "text" && node.type !== "comment") {
+		for (let child of node.children) if (containsAwaitGroup(child)) return true;
+	}
+	return false;
 }
 //#endregion
 //#region src/compile/utils/trimWhitespace.ts
@@ -3531,9 +3584,10 @@ function parseInlineScript(status) {
 			continue;
 		}
 		if (accept("{", status)) braceCount += 1;
-		else if (accept("}", status)) if (braceCount > 0) braceCount -= 1;
-		else return status.source.substring(start, status.i - 1);
-		else status.i += 1;
+		else if (accept("}", status)) {
+			if (braceCount > 0) braceCount -= 1;
+			else return status.source.substring(start, status.i - 1);
+		} else status.i += 1;
 	}
 	return "";
 }
@@ -3889,9 +3943,10 @@ function usesSlot(nodes) {
 */
 function slottifyChildNodes(node) {
 	let nonFillNodes = [];
-	for (let child of node.children) if (isFillNode(child)) if (nonFillNodes.find((n) => !isSpaceNode(n)) === void 0) nonFillNodes = [];
-	else break;
-	else nonFillNodes.push(child);
+	for (let child of node.children) if (isFillNode(child)) {
+		if (nonFillNodes.find((n) => !isSpaceNode(n)) === void 0) nonFillNodes = [];
+		else break;
+	} else nonFillNodes.push(child);
 	if (nonFillNodes.find((n) => !isSpaceNode(n)) === void 0) nonFillNodes = [];
 	if (nonFillNodes.length) {
 		let defaultFillNode = node.children.find((n) => isFillNode(n) && !n.attributes.find((a) => a.name === "name"));
@@ -4377,11 +4432,12 @@ function hash(input) {
 * @returns True if the supplied string was found at the current parse position
 */
 function expect(value, status, advance = true) {
-	if (status.i < status.source.length) if (status.source.substring(status.i, status.i + value.length) == value) {
-		status.i += advance ? value.length : 0;
-		return true;
-	} else addError(status, `Expected ${value}`);
-	else addError(status, "Expected token");
+	if (status.i < status.source.length) {
+		if (status.source.substring(status.i, status.i + value.length) == value) {
+			status.i += advance ? value.length : 0;
+			return true;
+		} else addError(status, `Expected ${value}`);
+	} else addError(status, "Expected token");
 	return false;
 }
 //#endregion
@@ -4532,21 +4588,25 @@ function parseCode(source) {
 			status.level = 0;
 		}
 	} else if (accept("function", status)) {
-		if (consumeSpace(status)) if (/[A-Z]/.test(source[status.i])) parseComponentStart(status);
-		else status.i--;
+		if (consumeSpace(status)) {
+			if (/[A-Z]/.test(source[status.i])) parseComponentStart(status);
+			else status.i--;
+		}
 	} else if (accept("const", status)) {
-		if (consumeSpace(status)) if (/[A-Z]/.test(source[status.i])) {
-			const start = status.i;
-			consumeAlphaNumeric(status);
-			consumeSpace(status);
-			if (accept("=", status)) {
+		if (consumeSpace(status)) {
+			if (/[A-Z]/.test(source[status.i])) {
+				const start = status.i;
+				consumeAlphaNumeric(status);
 				consumeSpace(status);
-				if (accept("(", status, false)) {
-					status.i = start;
-					parseComponentStart(status);
+				if (accept("=", status)) {
+					consumeSpace(status);
+					if (accept("(", status, false)) {
+						status.i = start;
+						parseComponentStart(status);
+					}
 				}
-			}
-		} else status.i--;
+			} else status.i--;
+		}
 	} else if (accept("export", status)) {
 		const start = status.i;
 		if (consumeSpace(status) && accept("default", status) && consumeSpace(status) && accept("(", status, false)) parseComponentStart(status);