@torpor/view 0.3.0 → 0.3.2

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@torpor/view",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./compile": {
       "types": "./dist/compile.d.ts",
-      "import": "./dist/compile.js"
+      "import": "./dist/compile.js",
+      "require": "./dist/compile.cjs"
     },
     "./ssr": {
       "types": "./dist/ssr.d.ts",
-      "import": "./dist/ssr.js"
+      "import": "./dist/ssr.js",
+      "require": "./dist/ssr.cjs"
     }
   },
   "publishConfig": {

package/src/compile/build/client/buildAwaitNode.ts

@@ -15,6 +15,7 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 	const parentName = node.parentName!;
 	const rangeName = nextVarName("await_range", status);
 	const stateName = "$" + nextVarName("await_state", status);
+	const creatorsName = nextVarName("await_creators", status);
 	const awaitVarsName = nextVarName("await_vars", status);
 
 	// Filter non-control branches (spaces)
@@ -62,14 +63,17 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 	b.append(`
 		/* @await */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 
 	b.append(`
 		let ${awaitVarsName} = { t_token: 0 };
 		$run(function runAwait() {`);
 
+	let index = 0;
+
 	// Build the waiting branch before anything happens
-	buildAwaitBranch(awaitBranch, status, b, parentName, stateName);
+	buildAwaitBranch(awaitBranch, status, b, parentName, stateName, creatorsName, index++);
 
 	b.append(`${awaitVarsName}.t_token++;
 			((t_token) => {`);
@@ -90,7 +94,7 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 	);
 
 	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(thenBranch, status, b, parentName, stateName);
+	buildAwaitBranch(thenBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 		})`);
 
@@ -107,7 +111,7 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 
 	b.append(`
 		if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(catchBranch, status, b, parentName, stateName);
+	buildAwaitBranch(catchBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 				});
 			})(${awaitVarsName}.t_token);
@@ -115,7 +119,7 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
@@ -126,9 +130,11 @@ function buildAwaitBranch(
 	b: Builder,
 	parentName: string,
 	stateName: string,
+	creatorsName: string,
+	index: number,
 ) {
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 
 		buildFragment(node, status, b, parentName, "t_before");
 
@@ -145,6 +151,8 @@ function buildAwaitBranch(
 
 		b.append("};");
 	} else {
-		b.append(`${stateName}.creator = (_) => {};`);
+		b.append(`${creatorsName}[${index}] = (_) => {};`);
 	}
+
+	b.append(`${stateName}.index = ${index};`);
 }

package/src/compile/build/client/buildCode.ts

@@ -101,7 +101,7 @@ function buildTemplate(
 	if (/\$run\b/.test(script)) imports.add("$run");
 	if (/\$mount\b/.test(script)) imports.add("$mount");
 	if (/\$unwrap\b/.test(script)) imports.add("$unwrap");
-	if (/\$peek\b/.test(script)) imports.add("$peek");
+	/*if (/\$peek\b/.test(script))*/ imports.add("$peek");
 	if (/\$batch\b/.test(script)) imports.add("$batch");
 
 	let currentIndex = 0;
@@ -127,6 +127,12 @@ function buildTemplate(
 				b.append(`$context = Object.assign({}, $context);`);
 			}
 
+			// NOTE: We're isolating the user script by setting `context.activeTarget =
+			// null` and then setting it back at the end, but maybe it would be better to
+			// make it so that signals only affect effects that they are under e.g. so
+			// that creating a $state in a component doesn't affect any $runs outside
+			// the component?
+			b.append("$peek(() => { /**/");
 			b.append("");
 		} else if (chunk.script === "/* @render */") {
 			if (current.markup) {
@@ -151,6 +157,7 @@ function buildTemplate(
 		} else if (chunk.script === "/* @style */") {
 			// No styles in the client
 		} else if (chunk.script === "/* @end */") {
+			b.append("/**/ });");
 			currentIndex += 1;
 			current = template.components[currentIndex];
 		} else {

package/src/compile/build/client/buildIfNode.ts

@@ -16,6 +16,7 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 	const parentName = node.parentName || anchorName + ".parentNode";
 	const rangeName = nextVarName("if_range", status);
 	const stateName = "$" + nextVarName("if_state", status);
+	const creatorsName = nextVarName("if_creators", status);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -42,17 +43,19 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 	b.append(`
 		/* @if */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 
 	b.append(`$run(function runIf() {`);
+	let index = 0;
 	for (let branch of branches) {
-		buildIfBranch(branch, status, b, parentName, stateName);
+		buildIfBranch(branch, status, b, parentName, stateName, creatorsName, index++);
 	}
 	b.append(`});`);
 
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
@@ -63,12 +66,14 @@ function buildIfBranch(
 	b: Builder,
 	parentName: string,
 	stateName: string,
+	creatorsName: string,
+	index: number,
 ) {
 	// TODO: replaceForVarNames is going to throw mapping out
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 
 		buildFragment(node, status, b, parentName, "t_before");
 
@@ -85,8 +90,9 @@ function buildIfBranch(
 
 		b.append("};");
 	} else {
-		b.append(`${stateName}.creator = (_) => {};`);
+		b.append(`${creatorsName}[${index}] = (_) => {};`);
 	}
 
+	b.append(`${stateName}.index = ${index};`);
 	b.append("}");
 }

package/src/compile/build/client/buildSwitchNode.ts

@@ -14,6 +14,7 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 	const parentName = node.parentName!;
 	const rangeName = nextVarName("switch_range", status);
 	const stateName = "$" + nextVarName("switch_state", status);
+	const creatorsName = nextVarName("switch_creators", status);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -40,16 +41,19 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 	b.append(`
 		/* @switch */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 
 	b.append(`
 		$run(function runSwitch() {`);
 
+	let index = 0;
+
 	// TODO: replaceForVarNames is going to throw mapping out
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 
 	for (let branch of branches) {
-		buildSwitchBranch(branch, status, b, parentName, stateName);
+		buildSwitchBranch(branch, status, b, parentName, stateName, creatorsName, index++);
 	}
 	b.append(`
 		}
@@ -57,7 +61,7 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
@@ -68,12 +72,14 @@ function buildSwitchBranch(
 	b: Builder,
 	parentName: string,
 	stateName: string,
+	creatorsName: string,
+	index: number,
 ) {
 	// TODO: replaceForVarNames is going to throw mapping out
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 
 		buildFragment(node, status, b, parentName, "t_before");
 
@@ -90,9 +96,10 @@ function buildSwitchBranch(
 
 		b.append("};");
 	} else {
-		b.append(`${stateName}.creator = (_) => {};`);
+		b.append(`${creatorsName}[${index}] = (_) => {};`);
 	}
 
+	b.append(`${stateName}.index = ${index};`);
 	b.append(`
 			break;
 		}`);

package/src/compile/buildType.ts

@@ -16,16 +16,14 @@ export default function buildType(template: Template, options?: BuildOptions): s
 	b.append(`import { type SlotRender } from "${options?.renderFolder || "@torpor/view"}";`);
 
 	for (let component of template.components) {
-		b.append("");
-		b.append(`
-			/**
-			 * Mounts or hydrates the component into the supplied parent node.
-			 * @param $parent -- The parent node.
-			 * @param $anchor -- The node to mount the component before.
-			 * @param $props -- The values that have been passed into the component as properties.
-			 * @param $context -- Values that have been passed into the component from its ancestors.
-			 * @param $slots -- Functions for rendering children into slot nodes within the component.
-			 */
+		if (component.exported) {
+			b.append("");
+			if (component.propsType) {
+				b.append(component.propsType);
+				b.append("");
+			}
+			b.append(`
+			${component.documentation ?? ""}
 			${component.default ? "declare" : "export declare"} function ${component.name}(
 				$parent: ParentNode,
 				$anchor: Node | null,
@@ -34,8 +32,9 @@ export default function buildType(template: Template, options?: BuildOptions): s
 				$slots?: Record<string, SlotRender>,
 			): void;
 		`);
-		if (component.default) {
-			b.append(`export default ${component.name};`);
+			if (component.default) {
+				b.append(`export default ${component.name};`);
+			}
 		}
 	}
 

package/src/compile/parse/ParseComponentStatus.ts

@@ -6,14 +6,20 @@ export default interface ParseComponentStatus {
 	start?: number;
 	/** The component's name */
 	name?: string;
+	/** Whether the component is exported from the file */
+	exported?: boolean;
 	/** Whether the component is defined in a default function */
 	default?: boolean;
+	/** The component's documentation comments */
+	documentation?: string;
 	/** Params declared by the user in the component's function */
 	params?: string;
 	markup?: RootNode;
 	head?: RootNode;
 	stack?: ElementNode[];
 	style?: Style;
+	/** The type or interface that is used for the $props param */
+	propsType?: string;
 	/** $props that are used in the component's function */
 	props?: string[];
 	/** $context props that are used in the component's function */

package/src/compile/parse/parseCode.ts

@@ -5,7 +5,9 @@ import endOfTemplateString from "../utils/endOfTemplateString";
 import isElementNode from "../utils/isElementNode";
 import isSpaceNode from "../utils/isSpaceNode";
 import trimQuotes from "../utils/trimQuotes";
+import ParseComponentStatus from "./ParseComponentStatus";
 import type ParseStatus from "./ParseStatus";
+import parseInlineScript from "./parseInlineScript";
 import parseMarkup from "./parseMarkup";
 import parseStyleElement from "./parseStyles";
 import scopeStyles from "./scopeStyles";
@@ -109,11 +111,14 @@ export default function parseCode(source: string): ParseResult {
 						return {
 							start: c.start,
 							name: c.name,
+							exported: c.exported,
 							default: c.default,
+							documentation: c.documentation,
 							params: c.params,
 							markup: c.markup,
 							head: c.head,
 							style: c.style,
+							propsType: c.propsType,
 							props: c.props,
 							contextProps: c.contextProps,
 							slotProps: c.slotProps,
@@ -126,18 +131,37 @@ export default function parseCode(source: string): ParseResult {
 }
 
 function parseComponentStart(status: ParseStatus) {
-	let source = status.source.substring(0, status.i);
+	let source = status.source.substring(status.marker, status.i);
+	let exported = /export\s+(default\s+)*(function\s+|const\s+)*$/.test(source);
 	let def = /export\s+default\s+(function\s+|const\s+)*$/.test(source);
 	let isConst = /const\s+$/.test(source);
 	let isAnon = /export default\s+$/.test(source);
 
-	status.components.push({
-		start: status.i,
-		name: consumeAlphaNumeric(status),
+	let componentStart = status.i;
+	let name = consumeAlphaNumeric(status);
+
+	const current: ParseComponentStatus = {
+		start: componentStart,
+		name,
+		exported,
 		default: def,
-	});
-	const current = status.components.at(-1);
-	if (!current) return;
+	};
+	status.components.push(current);
+
+	// Look for /** ... */ documentation comments
+	let presource = source.substring(0, status.i).trimEnd();
+	let lastNewline = presource.lastIndexOf("\n");
+	if (lastNewline !== -1) {
+		presource = presource.substring(0, lastNewline).trimEnd();
+		if (presource.endsWith("*/")) {
+			for (let i = presource.length; i >= 0; i--) {
+				if (presource.substring(i, i + 3) === "/**") {
+					current.documentation = presource.substring(i);
+					break;
+				}
+			}
+		}
+	}
 
 	let start = -1;
 	let end = -1;
@@ -168,6 +192,36 @@ function parseComponentStart(status: ParseStatus) {
 
 	current.params = status.source.substring(start, end).trim() || undefined;
 
+	// Look for a params type or interface
+	// Might need to get fancier with this
+	const paramsMatch = current.params?.match(/\$props:\s*([$A-Za-z0-9]+)/);
+	if (paramsMatch) {
+		let propsTypeName = paramsMatch[1];
+		let propsTypeStart = status.source.search(new RegExp(`interface\\s+${propsTypeName}`));
+		if (propsTypeStart === -1) {
+			propsTypeStart = status.source.search(new RegExp(`type\\s+${propsTypeName}`));
+		}
+		if (propsTypeStart !== -1) {
+			let bracesStart = status.source.indexOf("{", propsTypeStart);
+			if (bracesStart !== -1) {
+				const status2: ParseStatus = {
+					source: status.source,
+					i: bracesStart + 1,
+					marker: 0,
+					level: 0,
+					imports: [],
+					script: [],
+					components: [],
+					errors: [],
+				};
+				const propsType = parseInlineScript(status2);
+				if (propsType) {
+					current.propsType = `${status.source.substring(propsTypeStart, bracesStart)}{${propsType}}`;
+				}
+			}
+		}
+	}
+
 	status.marker = end;
 	status.i = status.marker;
 

package/src/compile/parse/parseTag.ts

@@ -75,6 +75,13 @@ function parseTagAttributes(status: ParseStatus): Attribute[] {
 		} else if (accept("/>", status, false) || accept(">", status, false)) {
 			// That's the end of the attributes
 			break;
+		} else if (
+			accept("<", status, false) ||
+			accept("@", status, false) ||
+			accept("}", status, false)
+		) {
+			// It's an unclosed tag -- just bail out here
+			break;
 		} else {
 			const attribute = parseAttribute(status);
 			attributes.push(attribute);

package/src/types/TemplateComponent.ts

@@ -5,13 +5,19 @@ export default interface TemplateComponent {
 	start?: number;
 	/** The component's name */
 	name?: string;
+	/** Whether the component is exported from the file */
+	exported?: boolean;
 	/** Whether the component is defined with a default function */
 	default?: boolean;
+	/** The component's documentation comments */
+	documentation?: string;
 	/** Params declared by the user in the component's function */
 	params?: string;
 	markup?: RootNode;
 	head?: RootNode;
 	style?: Style;
+	/** The type or interface that is used for the $props param */
+	propsType?: string;
 	/** $props that are used in the component's function */
 	props?: string[];
 	/** $context props that are used in the component's function */

package/src/watch/checkEffect.ts

@@ -15,6 +15,8 @@ export default function checkEffect(effect: Effect): void {
 	let rerun = checkSources(effect);
 
 	if (rerun) {
+		//console.log(`running effect '${String(effect.run)}'`);
+
 		// Run cleanup functions for the effect and its children
 		runCleanups(effect);
 

package/test/attributes/components/output/Attributes-client.ts

@@ -1,3 +1,4 @@
+import $peek from "../../../../src/render/$peek";
 import $run from "../../../../src/render/$run";
 import type SlotRender from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
@@ -13,6 +14,7 @@ export default function Attributes(
 	_$context: Record<PropertyKey, any>,
 	_$slots?: Record<string, SlotRender>
 ): void {
+	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -30,4 +32,5 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
+	/**/ });
 }

package/test/attributes/components/output/Attributes-types.ts

@@ -0,0 +1,10 @@
+import type SlotRender from "../../../../src/types/SlotRender";
+
+declare function Attributes(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Attributes;

package/test/attributes/components/temp/{Attributes-client-9b2935d7824ba501776fdc6c48861422c15b6a12.ts → Attributes-client-ffbdd4d85a50436c1a51a4499921304098c1b396.ts}

@@ -1,3 +1,4 @@
+import $peek from "../../../../src/render/$peek";
 import $run from "../../../../src/render/$run";
 import type SlotRender from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
@@ -13,6 +14,7 @@ export default function Attributes(
 	_$context: Record<PropertyKey, any>,
 	_$slots?: Record<string, SlotRender>
 ): void {
+	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -30,4 +32,5 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
+	/**/ });
 }

package/test/attributes/components/temp/Attributes-types-5892927754ac19a8b3a8560fa1c78ce653e5f318.ts

@@ -0,0 +1,10 @@
+import type SlotRender from "../../../../src/types/SlotRender";
+
+declare function Attributes(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Attributes;

package/test/attributes/errors.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "vitest";
+import parse from "../../src/compile/parse";
+import { trimParsed } from "../helpers";
+
+test("unfinished tag", () => {
+	const input = `
+export default function Test() {
+	@render {
+		<div>
+			<a
+		</div>
+	}
+}
+`;
+	const output = trimParsed(parse(input));
+	expect(output.ok).toBe(false);
+	expect(output.errors.length).toBe(1);
+	expect(output.errors[0].message).toBe("Unclosed non-void element: a");
+});
+
+test("unfinished tag with attribute", () => {
+	const input = `
+export default function Test() {
+	@render {
+		<div>
+			<a b
+		</div>
+	}
+}
+`;
+	const output = trimParsed(parse(input));
+	expect(output.ok).toBe(false);
+	expect(output.errors.length).toBe(1);
+	expect(output.errors[0].message).toBe("Unclosed non-void element: a");
+});

package/test/await/components/output/Await-client.ts

@@ -1,3 +1,4 @@
+import $peek from "../../../../src/render/$peek";
 import $run from "../../../../src/render/$run";
 import $watch from "../../../../src/render/$watch";
 import type SlotRender from "../../../../src/types/SlotRender";
@@ -20,6 +21,7 @@ export default function Await(
 	_$context: Record<PropertyKey, any>,
 	_$slots?: Record<string, SlotRender>
 ): void {
+	$peek(() => { /**/
 
 	// Use the $watch function to declare reactive state
 	let $state = $watch({})
@@ -47,33 +49,36 @@ export default function Await(
 
 		/* @await */
 		const t_await_range_1 = t_range();
-		let $t_await_state_1 = $watch({ creator: (_: Node | null) => {} });
+		let $t_await_state_1 = $watch({ index: -1 });
+		let t_await_creators_1: ((t_before: Node | null) => void)[] = [];
 		let t_await_vars_1 = { t_token: 0 };
 		$run(function runAwait() {
-			$t_await_state_1.creator = (t_before) => {
+			t_await_creators_1[0] = (t_before) => {
 				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>Hmm...</p> `);
 				const t_root_1 = t_root(t_fragment_1, true);
 				const t_text_1 = t_next(t_next(t_root_1), true);
 				t_add_fragment(t_fragment_1, t_fragment_0, t_before, t_text_1);
 				t_next(t_text_1);
 			};
+			$t_await_state_1.index = 0;
 			t_await_vars_1.t_token++;
 			((t_token) => {
 				$state.guesser
 				.then((_number) => {
 					if (t_token === t_await_vars_1.t_token) {
-						$t_await_state_1.creator = (t_before) => {
+						t_await_creators_1[1] = (t_before) => {
 							const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <p>Is it a number?</p> `);
 							const t_root_2 = t_root(t_fragment_2, true);
 							const t_text_2 = t_next(t_next(t_root_2), true);
 							t_add_fragment(t_fragment_2, t_fragment_0, t_before, t_text_2);
 							t_next(t_text_2);
 						};
+						$t_await_state_1.index = 1;
 					}
 				})
 				.catch((ex) => {
 					if (t_token === t_await_vars_1.t_token) {
-						$t_await_state_1.creator = (t_before) => {
+						t_await_creators_1[2] = (t_before) => {
 							const t_fragment_3 = t_fragment($parent.ownerDocument!, t_fragments, 3, ` <p class="error">#</p> `);
 							const t_root_3 = t_root(t_fragment_3, true);
 							const t_text_3 = t_child(t_next(t_root_3));
@@ -84,12 +89,13 @@ export default function Await(
 							t_add_fragment(t_fragment_3, t_fragment_0, t_before, t_text_4);
 							t_next(t_text_4);
 						};
+						$t_await_state_1.index = 2;
 					}
 				});
 			})(t_await_vars_1.t_token);
 		});
 		t_run_control(t_await_range_1, t_await_anchor_1, (t_before) => {
-			t_run_branch(t_await_range_1, () => $t_await_state_1.creator(t_before));
+			t_run_branch(t_await_range_1, () => t_await_creators_1[$t_await_state_1.index](t_before));
 		});
 
 		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLElement;
@@ -98,4 +104,5 @@ export default function Await(
 		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);
 		t_next(t_text_5);
 
+		/**/ });
 	}

package/test/await/components/output/Await-types.ts

@@ -0,0 +1,10 @@
+import type SlotRender from "../../../../src/types/SlotRender";
+
+declare function Await(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Await;