@torpor/view 0.4.5 → 0.4.6

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

@@ -1,3 +1,4 @@
+import type SourceSpan from "../../types/SourceSpan";
 import type ElementNode from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
 import isSpecialNode from "../../utils/isSpecialNode";
@@ -33,11 +34,11 @@ export default function buildComponentNode(
 		status.imports.add("$watch");
 
 		// Gather props, runs and binding runs, and set them all at once
-		let props: { name: string; value: string }[] = [];
+		let props: { name: string; value: string; span: SourceSpan }[] = [];
 		let runs: string[] = [];
 		let bindingRuns: string[] = [];
 
-		for (let { name, value, reactive, fullyReactive } of node.attributes) {
+		for (let { name, value, reactive, fullyReactive, span } of node.attributes) {
 			if (name === "self" && node.tagName === "@component") {
 				// Ignore this special attribute
 			} else if (name.startsWith("&") && value != null && fullyReactive) {
@@ -47,7 +48,7 @@ export default function buildComponentNode(
 				// TODO: Maybe allow adding a Bindable<T> type to the $props interface??
 				// e.g. Component($props: { text: Bindable<string> })
 				name = name.substring(1);
-				props.push({ name, value });
+				props.push({ name, value, span });
 				runs.push(`${propsName}["${name}"] = ${value};`);
 				bindingRuns.push(`${value} = ${propsName}["${name}"];`);
 			} else if (name === "class" && value != null) {
@@ -57,30 +58,31 @@ export default function buildComponentNode(
 					params.push(`"torp-${status.styleHash}"`);
 				}
 				value = `t_class(${params.join(", ")})`;
-				props.push({ name, value });
+				props.push({ name, value, span });
 				runs.push(`${propsName}["${name}"] = ${value};`);
 			} else if (name === "style" && value != null) {
 				status.imports.add("t_style");
 				value = `t_style(${value})`;
-				props.push({ name, value });
+				props.push({ name, value, span });
 				runs.push(`${propsName}["${name}"] = ${value};`);
 			} else if (value != null) {
-				props.push({ name, value });
+				props.push({ name, value, span });
 				if (reactive) {
 					runs.push(`${propsName}["${name}"] = ${value};`);
 				}
 			} else {
-				props.push({ name, value: "true" });
+				props.push({ name, value: "true", span });
 			}
 		}
 
 		// Set the props, runs and binding runs that we gathered
-		b.append(
-			`const ${propsName} = $watch({ ${replaceForVarNames(
-				props.map((p) => `${p.name}: ${p.value}`).join(", "),
-				status,
-			)} });`,
-		);
+		b.append(`const ${propsName} = $watch({`);
+		for (let p of props) {
+			let value = replaceForVarNames(p.value, status);
+			addMappedText(`${p.name}: `, value, ",", p.span, status, b);
+		}
+		b.append("});");
+		// TODO: Map these things:
 		if (runs.length) {
 			buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
 		}

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

@@ -144,12 +144,13 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	// TODO: dedupe e.g. <meta name="x"> or on special key
 	b.append("$run(() => {");
 	b.append(`
-			const t_headel = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
-	for (let { name, value } of node.attributes) {
+			const t_head_el = document.createElement("${node.tagName}");
+			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
+	for (let { name, value, span } of node.attributes) {
 		if (value != null) {
 			status.imports.add("t_attribute");
-			b.append(`t_attribute(t_headel, "${name}", ${value});`);
+			value = replaceForVarNames(value, status);
+			addMappedText(`t_attribute(t_head_el, "${name}", `, value, ");", span, status, b);
 		}
 	}
 	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);

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

@@ -1,7 +1,6 @@
 import type ControlNode from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import isControlNode from "../../utils/isControlNode";
-import trimEnd from "../../utils/trimEnd";
 import trimMatched from "../../utils/trimMatched";
 import nextVarName from "../utils/nextVarName";
 import type BuildStatus from "./BuildStatus";
@@ -19,7 +18,7 @@ const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
 
 export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const parentName = node.parentName!;
-	const anchorName = node.varName!;
+	const anchorName = node.varName ?? "null";
 
 	// HACK:
 	node = node.children[0] as ControlNode;
@@ -27,9 +26,9 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 	// HACK: Need to wrangle the declaration(s) out of the for loop and put them in data
 	// TODO: Handle destructuring, quotes, comments etc
 	const forVarNames: string[] = [];
-	const forIndexMatch = node.statement.match(forLoopRegex);
-	if (forIndexMatch) {
-		const forVarMatches = forIndexMatch[1].matchAll(forLoopVarsRegex);
+	const forLoopMatch = node.statement.match(forLoopRegex);
+	if (forLoopMatch) {
+		const forVarMatches = forLoopMatch[1].matchAll(forLoopVarsRegex);
 		for (let match of forVarMatches) {
 			forVarNames.push(match[1]);
 		}
@@ -61,12 +60,16 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 	const beforeName = nextVarName("before", status);
 
 	// Get the key node if it's been set
+	let keyStatement = "";
 	const key = node.children.find(
 		(n) => n.type === "control" && (n as ControlNode).operation === "@key",
-	);
-	let keyStatement = key ? (key as ControlNode).statement : "";
-	if (keyStatement) {
-		keyStatement = trimEnd(keyStatement.substring(keyStatement.indexOf("=") + 1).trim(), ";");
+	) as ControlNode;
+	if (key !== undefined) {
+		let matches = key.statement.match(/^(\s*@*key\s*=\s*)(.+?)\s*;*\s*$/);
+		if (matches) {
+			key.span.start += matches[1].length;
+			keyStatement = matches[2];
+		}
 	}
 
 	status.imports.add("t_region");
@@ -91,10 +94,17 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 	// TODO: replaceForVarNames is going to throw mapping out
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 
-	let params = [`{ ${forVarNames.join(",\n")} }`, keyStatement || "undefined"];
-	if (status.options.dev === true) params.push(`"for item"`);
+	b.append(`let ${newItemName} = t_list_item(`);
+	// TODO: Should map these
+	b.append(`{ ${forVarNames.join(", ")} },`);
+	if (key !== undefined) {
+		addMappedText("", `${keyStatement || "undefined"}`, ",", key.span, status, b);
+	}
+	if (status.options.dev === true) {
+		b.append(`"for item"`);
+	}
+	b.append(");");
 	b.append(`
-			let ${newItemName} = t_list_item(${params.join(", ")});
 			${newItemName}.previousRegion = ${previousItemName};
 			${previousItemName}.nextRegion = ${newItemName};
 			${previousItemName} = ${newItemName};

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

@@ -2,7 +2,9 @@ import type ControlNode from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
 import type BuildStatus from "./BuildStatus";
+import addMappedText from "./addMappedText";
 import buildAddFragment from "./buildAddFragment";
+import replaceForVarNames from "./replaceForVarNames";
 
 // TODO: type checking
 
@@ -43,8 +45,18 @@ function buildHtmlBranch(
 
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment!.number}`;
-	b.append(`const ${templateName} = document.createElement("template");`);
-	b.append(`${templateName}.innerHTML = ${node.statement};`);
+	b.append(`let ${templateName} = document.createElement("template");`);
+	// TODO: replaceForVarNames is going to throw mapping out
+	node.span.start += "html(".length;
+	node.span.end -= 2;
+	addMappedText(
+		"",
+		`${templateName}.innerHTML = ${replaceForVarNames(node.statement, status)};`,
+		"",
+		node.span,
+		status,
+		b,
+	);
 	b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
 
 	buildAddFragment(node, status, b, parentName, "t_before");

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

@@ -14,7 +14,7 @@ import replaceForVarNames from "./replaceForVarNames";
 // TODO: Are there too many branches for ifs etc?
 
 export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const anchorName = node.varName!;
+	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName || anchorName + ".parentNode";
 	const regionName = nextVarName("if_region", status);
 	const stateName = "$" + nextVarName("if_state", status);
@@ -84,7 +84,8 @@ function buildIfBranch(
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 
 	if (node.children.length > 0) {
-		b.append(`${creatorsName}[${index}] = (t_before) => {`);
+		let beforeParam = node.fragment !== undefined ? "t_before" : "_";
+		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
 
 		buildFragment(node, status, b, parentName, "t_before");
 

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

@@ -12,7 +12,7 @@ import buildNode from "./buildNode";
 import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const anchorName = node.varName!;
+	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName!;
 	const regionName = nextVarName("switch_region", status);
 	const stateName = "$" + nextVarName("switch_state", status);
@@ -87,7 +87,8 @@ function buildSwitchBranch(
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 
 	if (node.children.length > 0) {
-		b.append(`${creatorsName}[${index}] = (t_before) => {`);
+		let beforeParam = node.fragment !== undefined ? "t_before" : "_";
+		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
 
 		buildFragment(node, status, b, parentName, "t_before");
 

package/src/compile/parse/parseCode.ts

@@ -171,9 +171,12 @@ function parseComponentStart(status: ParseStatus) {
 		script: status.source.substring(status.marker, start),
 		span: { start: status.marker, end: start },
 	});
-	status.script.push({ script: "/* @params */", span: { start: 0, end: 0 } });
+	status.script.push({ script: "/* @params */", span: { start, end } });
 
-	current.params = status.source.substring(start, end).trim() || undefined;
+	current.params = status.source.substring(start, end);
+	if (current.params.trim().length === 0) {
+		current.params = undefined;
+	}
 
 	// Look for a params type or interface
 	// Might need to get fancier with this

package/src/compile/parse/parseTag.ts

@@ -123,6 +123,10 @@ function parseAttribute(status: ParseStatus): Attribute {
 		valueStart++;
 		valueEnd = valueStart + name.length;
 		name = value.split(".").at(-1)!;
+		// Handle definite assignment assertions e.g. {$state.width!}
+		if (name.endsWith("!")) {
+			name = name.substring(0, name.length - 1);
+		}
 		reactive = fullyReactive = true;
 	}
 	return {

package/src/render/runControl.ts

@@ -5,7 +5,7 @@ import popRegion from "./popRegion";
 import pushRegion from "./pushRegion";
 
 /**
- * Runs an`if`, `switch` or `await` control statement
+ * Runs an `if`, `switch` or `await` control statement
  * @param create A function that creates the control statement's branches
  */
 export default function runControl(

package/test/bind/components/output/BindComponent-client.ts

@@ -33,7 +33,9 @@ export default function BindComponent(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: $state.name });
+	const t_props_1 = $watch({
+		name: $state.name,
+	});
 	$run(() => {
 		t_props_1["name"] = $state.name;
 	});

package/test/bind/components/temp/{BindComponent-client-9da323149e29bbb0d7eaf5a86ed541357f1219f8.ts → BindComponent-client-59dbb5565268702ed2935e7e8cc7609b0f956bdc.ts}

@@ -33,7 +33,9 @@ export default function BindComponent(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: $state.name });
+	const t_props_1 = $watch({
+		name: $state.name,
+	});
 	$run(() => {
 		t_props_1["name"] = $state.name;
 	});

package/test/child-component/components/output/ChildComponent-client.ts

@@ -30,7 +30,9 @@ export default function ParentChild(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: "Anna" });
+	const t_props_1 = $watch({
+		name: "Anna",
+	});
 	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 
 	const t_text_1 = t_next(t_comp_anchor_1, true);

package/test/child-component/components/temp/{ChildComponent-client-6033ce1f59fe1ce3f3dfb3d7845807e7f047b18d.ts → ChildComponent-client-a0ac41e8516d1584b2318770b6a5fc791e07b53b.ts}

@@ -30,7 +30,9 @@ export default function ParentChild(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: "Anna" });
+	const t_props_1 = $watch({
+		name: "Anna",
+	});
 	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 
 	const t_text_1 = t_next(t_comp_anchor_1, true);

package/test/class/components/output/Class-client.ts

@@ -33,7 +33,9 @@ export default function Class(
 	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ class: t_class({ "child-class": true }, "torp-1ljxz83") });
+	const t_props_1 = $watch({
+		class: t_class({ "child-class": true }, "torp-1ljxz83"),
+	});
 	$run(() => {
 		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});

package/test/class/components/temp/{Class-client-a5e3f4dd7b0272d69b856f3ef4aa43b83bc2d849.ts → Class-client-28a59ce1bd5ccd2c6cc48d803216a5346fcf2329.ts}

@@ -33,7 +33,9 @@ export default function Class(
 	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ class: t_class({ "child-class": true }, "torp-1ljxz83") });
+	const t_props_1 = $watch({
+		class: t_class({ "child-class": true }, "torp-1ljxz83"),
+	});
 	$run(() => {
 		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});

package/test/component/components/output/Component-client.ts

@@ -30,7 +30,9 @@ export default function Component(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: "Amy" });
+	const t_props_1 = $watch({
+		name: "Amy",
+	});
 	Header(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 
 	const t_text_1 = t_next(t_comp_anchor_1, true);

package/test/component/components/temp/{Component-client-ff200ee2a7a5f08d0473fddffa1f3ba5eb641d2a.ts → Component-client-475c9724b22ebc18149075860326ffd395c4caa0.ts}

@@ -30,7 +30,9 @@ export default function Component(
 	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 	/* @component */
-	const t_props_1 = $watch({ name: "Amy" });
+	const t_props_1 = $watch({
+		name: "Amy",
+	});
 	Header(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 
 	const t_text_1 = t_next(t_comp_anchor_1, true);

package/test/effects/components/output/ForEffect-client.ts

@@ -44,7 +44,9 @@ export default function For(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let item of $props.items) {
-				let t_new_item_1 = t_list_item({ item }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ item },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/effects/components/temp/{ForEffect-client-b1cff64d6b44a881a4bcf4b1a3dee3fa64c9ec7b.ts → ForEffect-client-841255d13e0691d88345d9ea89c5fb021ca4db02.ts}

@@ -44,7 +44,9 @@ export default function For(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let item of $props.items) {
-				let t_new_item_1 = t_list_item({ item }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ item },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/For-client.ts

@@ -46,7 +46,9 @@ export default function For(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/ForAfterFor-client.ts

@@ -46,7 +46,9 @@ export default function ForAfterFor(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;
@@ -87,7 +89,9 @@ export default function ForAfterFor(
 			let t_previous_item_2 = t_for_region_2;
 			let t_next_item_2 = t_for_region_2.nextRegion;
 			for (let i = 10; i > 5; i--) {
-				let t_new_item_2 = t_list_item({ i }, undefined);
+				let t_new_item_2 = t_list_item(
+					{ i },
+				);
 				t_new_item_2.previousRegion = t_previous_item_2;
 				t_previous_item_2.nextRegion = t_new_item_2;
 				t_previous_item_2 = t_new_item_2;

package/test/for/components/output/ForContainingFor-client.ts

@@ -46,7 +46,9 @@ export default function ForContainingFor(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;
@@ -72,7 +74,9 @@ export default function ForContainingFor(
 					let t_previous_item_2 = t_for_region_2;
 					let t_next_item_2 = t_for_region_2.nextRegion;
 					for (let j = 0; j < 2; j++) {
-						let t_new_item_2 = t_list_item({ j }, undefined);
+						let t_new_item_2 = t_list_item(
+							{ j },
+						);
 						t_new_item_2.previousRegion = t_previous_item_2;
 						t_previous_item_2.nextRegion = t_new_item_2;
 						t_previous_item_2 = t_new_item_2;

package/test/for/components/output/ForContainingFunction-client.ts

@@ -47,7 +47,9 @@ export default function ForContainingIf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/ForContainingIf-client.ts

@@ -49,7 +49,9 @@ export default function ForContainingIf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/ForEscape-client.ts

@@ -50,7 +50,9 @@ export default function ForEscape(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/ForIn-client.ts

@@ -45,7 +45,9 @@ export default function ForIn(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let key in $props.item) {
-				let t_new_item_1 = t_list_item({ key }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ key },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/output/ForOf-client.ts

@@ -45,7 +45,9 @@ export default function ForOf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let item of $props.items) {
-				let t_new_item_1 = t_list_item({ item }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ item },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{For-client-8fd92bf0c26cb8e97006a302104ebb2fdcd2e818.ts → For-client-69c16449ab9b63fd8ace8cb1364105a80e6e1c40.ts}

@@ -46,7 +46,9 @@ export default function For(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{ForAfterFor-client-509955ddc13396ede05c9986a6dcc8bbebd00cf3.ts → ForAfterFor-client-b57ee13c70d8504456dbb5f75efd9defecab8cd1.ts}

@@ -46,7 +46,9 @@ export default function ForAfterFor(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;
@@ -87,7 +89,9 @@ export default function ForAfterFor(
 			let t_previous_item_2 = t_for_region_2;
 			let t_next_item_2 = t_for_region_2.nextRegion;
 			for (let i = 10; i > 5; i--) {
-				let t_new_item_2 = t_list_item({ i }, undefined);
+				let t_new_item_2 = t_list_item(
+					{ i },
+				);
 				t_new_item_2.previousRegion = t_previous_item_2;
 				t_previous_item_2.nextRegion = t_new_item_2;
 				t_previous_item_2 = t_new_item_2;

package/test/for/components/temp/{ForContainingFor-client-4f600c73a6583c84d981a82fae42332f983f0b36.ts → ForContainingFor-client-bc5cc8b51b248bebc28fdba5e69d56af4148a66a.ts}

@@ -46,7 +46,9 @@ export default function ForContainingFor(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;
@@ -72,7 +74,9 @@ export default function ForContainingFor(
 					let t_previous_item_2 = t_for_region_2;
 					let t_next_item_2 = t_for_region_2.nextRegion;
 					for (let j = 0; j < 2; j++) {
-						let t_new_item_2 = t_list_item({ j }, undefined);
+						let t_new_item_2 = t_list_item(
+							{ j },
+						);
 						t_new_item_2.previousRegion = t_previous_item_2;
 						t_previous_item_2.nextRegion = t_new_item_2;
 						t_previous_item_2 = t_new_item_2;

package/test/for/components/temp/{ForContainingFunction-client-9bacc4a7214f2385d98b358d29443363f8b9e78d.ts → ForContainingFunction-client-f29a23d27f5458760406127c58520d6abf924409.ts}

@@ -47,7 +47,9 @@ export default function ForContainingIf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{ForContainingIf-client-92b3c13b0fbe3d7900c05dd2e833d8e51d1bc66c.ts → ForContainingIf-client-da96adc2e61301142e0728b55665ef241c19f9a4.ts}

@@ -49,7 +49,9 @@ export default function ForContainingIf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{ForEscape-client-29cdd1ae0528a32f5737295287489e9bbd42889d.ts → ForEscape-client-f2b7590f8e93981bc0cd0c0845ad22df1dc050b6.ts}

@@ -50,7 +50,9 @@ export default function ForEscape(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let i = 0; i < 5; i++) {
-				let t_new_item_1 = t_list_item({ i }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ i },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{ForIn-client-fffaa596adb40e4067931af81cc13fc971dd1813.ts → ForIn-client-8754824447479fba5ba3676b5c1dcb1e3591575f.ts}

@@ -45,7 +45,9 @@ export default function ForIn(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let key in $props.item) {
-				let t_new_item_1 = t_list_item({ key }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ key },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/for/components/temp/{ForOf-client-e6d0948fbd00bfbcbc7099f84331bc3d493abc28.ts → ForOf-client-852d13b24329f89bd864313bc376f73174b9965e.ts}

@@ -45,7 +45,9 @@ export default function ForOf(
 			let t_previous_item_1 = t_for_region_1;
 			let t_next_item_1 = t_for_region_1.nextRegion;
 			for (let item of $props.items) {
-				let t_new_item_1 = t_list_item({ item }, undefined);
+				let t_new_item_1 = t_list_item(
+					{ item },
+				);
 				t_new_item_1.previousRegion = t_previous_item_1;
 				t_previous_item_1.nextRegion = t_new_item_1;
 				t_previous_item_1 = t_new_item_1;

package/test/html/components/output/Html-client.ts

@@ -34,7 +34,7 @@ export default function Html(
 	t_run_control(t_html_region_1, t_html_anchor_1, (t_before) => {
 		$props.html;
 		t_run_branch(t_html_region_1, () => {
-			const t_template_1 = document.createElement("template");
+			let t_template_1 = document.createElement("template");
 			t_template_1.innerHTML = $props.html;
 			let t_fragment_1 = t_template_1.content.cloneNode(true) as DocumentFragment;
 			t_add_fragment(t_fragment_1, t_html_parent_1, t_before);