@torpor/view 1.0.3 → 1.1.1

package/dist/compile.mjs

@@ -2200,12 +2200,15 @@ function headElementSelector(node) {
 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);
+	const combinedHandlers = combinedEventHandlers(node, status);
+	const consumedHandlers = new Set(Array.from(combinedHandlers.values(), (c) => c.index));
+	for (let [index, { name, value, reactive, fullyReactive, span }] of node.attributes.entries()) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
+		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b, combinedHandlers.get(index));
+		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b, combinedHandlers.get(index));
 		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.startsWith("on")) {
+			if (!consumedHandlers.has(index)) 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];
@@ -2243,21 +2246,20 @@ function buildElementAttributes$1(node, varName, status, b) {
 		}
 	}
 }
-function buildBindGroupAttribute(node, varName, value, status, b) {
+function buildBindGroupAttribute(node, varName, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
 	let eventName = "change";
 	let inputValue = node.attributes.find((a) => a.name === "value")?.value;
 	let set = `${value} == ${inputValue}`;
 	let propName = "checked";
 	buildRun("setBinding", `${`${varName}.${propName} = ${set}`};`, status, b);
-	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => {
-			if (e.target.${propName}) ${value} = ${inputValue};
-		});`);
+	emitBindEvent(varName, eventName, `(e) => {
+				if (e.target.${propName}) ${value} = ${inputValue};
+			}`, `if (e.target.${propName}) ${value} = ${inputValue};`, combined, status, b);
 }
-function buildBindAttribute(node, varName, name, value, status, b) {
+function buildBindAttribute(node, varName, name, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
-	let eventName = "input";
+	let eventName = bindEventName(node, name);
 	let defaultValue = "\"\"";
 	let inputValue = "e.target.value";
 	if (node.tagName === "input") {
@@ -2270,25 +2272,83 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 			case "checkbox":
 				defaultValue = "false";
 				inputValue = "e.target.checked";
-				break;
-			case "radio":
-				eventName = "change";
-				inputValue = "e.target.value";
 		}
 	} else if (node.tagName === "select") {
-		eventName = "change";
 		if (node.attributes.find((a) => a.name === "multiple")) {
 			buildRun("setBinding", `Array.from(${varName}.options).forEach((opt) => opt.selected = Array.isArray(${value}) && ${value}.includes(opt.value));`, status, b);
-			status.imports.add("t_event");
-			b.append(`t_event(${varName}, "change", (e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value));`);
+			emitBindEvent(varName, eventName, `(e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value)`, `${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value);`, combined, status, b);
 			return;
 		}
 	}
 	let set = `${value} || ${defaultValue}`;
 	const propName = name.substring(1);
 	buildRun("setBinding", `${propName === "value" ? `${varName}.${propName} = String(${set})` : `${varName}.${propName} = ${set}`};`, status, b);
+	emitBindEvent(varName, eventName, `(e) => ${value} = ${inputValue}`, `${value} = ${inputValue};`, combined, status, b);
+}
+/**
+* Gets the name of the event that a &-binding attribute uses to write the
+* element's state back to the bound value
+*/
+function bindEventName(node, name) {
+	if (name === "&group") return "change";
+	if (node.tagName === "select") return "change";
+	if (node.tagName === "input") {
+		let typeAttribute = node.attributes.find((a) => a.name === "type");
+		if (typeAttribute?.value && trimQuotes(typeAttribute.value) === "radio") return "change";
+	}
+	return "input";
+}
+/**
+* Pairs &-binding attributes (&value, &checked, &group) with user `on<event>`
+* handler attributes listening to the same event. Both would emit their own
+* t_event call for the element, but the second registration would clobber
+* the first -- typically the binding's state write -- so the pair is emitted
+* as one t_event that calls the binding write and the user handler in source
+* order. Returns a map from binding attribute index to the combined handler.
+*/
+function combinedEventHandlers(node, status) {
+	const bindings = /* @__PURE__ */ new Map();
+	const handlers = /* @__PURE__ */ new Map();
+	for (let [index, { name, value, fullyReactive }] of node.attributes.entries()) {
+		if (value == null || !fullyReactive) continue;
+		if (name === "&value" || name === "&checked" || name === "&group") bindings.set(bindEventName(node, name), index);
+		else if (name.startsWith("on")) handlers.set(name.substring(2), index);
+	}
+	const combined = /* @__PURE__ */ new Map();
+	for (let [eventName, bindingIndex] of bindings) {
+		const handlerIndex = handlers.get(eventName);
+		if (handlerIndex === void 0) continue;
+		const handler = node.attributes[handlerIndex];
+		combined.set(bindingIndex, {
+			index: handlerIndex,
+			value: replaceForVarNames(handler.value, status),
+			span: handler.span,
+			first: handlerIndex < bindingIndex
+		});
+	}
+	return combined;
+}
+/**
+* Emits the t_event call for a &-binding, optionally combined with a user
+* `on<event>` handler for the same event (which is called after -- or, when
+* it appeared first in source, before -- the binding write)
+*/
+function emitBindEvent(varName, eventName, listener, body, combined, status, b) {
 	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
+	if (!combined) {
+		b.append(`t_event(${varName}, "${eventName}", ${listener});`);
+		return;
+	}
+	b.append(`t_event(${varName}, "${eventName}", (e) => {`);
+	const handlerCall = `((${combined.value}) as ((e: any) => any) | undefined)?.(e);`;
+	if (combined.first) {
+		addMappedText("", handlerCall, "", combined.span, status, b);
+		b.append(body);
+	} else {
+		b.append(body);
+		addMappedText("", handlerCall, "", combined.span, status, b);
+	}
+	b.append("});");
 }
 function buildEventAttribute(varName, name, value, span, status, b) {
 	value = replaceForVarNames(value, status);
@@ -2799,7 +2859,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) {
@@ -2818,7 +2878,7 @@ 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(`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;
@@ -2826,16 +2886,37 @@ function buildServerComponentNode(node, status, b) {
 }
 //#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;
 	flushOutput(status, b);
-	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);
+	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
@@ -3090,7 +3171,7 @@ function buildServerSlotNode(node, status, b) {
 		else b.append(`${propsName}["${name}"] = true;`);
 	}
 	b.append(`if ($slots && $slots["${slotName}"]) {`);
-	b.append(`${status.inHead ? "t_head" : "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 {`);
@@ -3193,6 +3274,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}\";",
@@ -3235,18 +3318,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 */") {
@@ -3257,6 +3346,7 @@ function buildServerTemplate(template, imports, b, options) {
 				styleHash: current.style?.hash || "",
 				varNames: {},
 				preserveWhitespace: false,
+				awaitCount: 0,
 				options
 			};
 			b.append("");
@@ -3280,6 +3370,7 @@ function buildServerTemplate(template, imports, b, options) {
 				styleHash: current.style?.hash || "",
 				varNames: {},
 				preserveWhitespace: false,
+				awaitCount: 0,
 				options
 			};
 			b.append(`} catch (${current.errorVar}) {`);
@@ -3302,6 +3393,7 @@ function buildServerTemplate(template, imports, b, options) {
 				varNames: {},
 				preserveWhitespace: false,
 				inHead: true,
+				awaitCount: 0,
 				options
 			};
 			b.append("");
@@ -3318,9 +3410,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