@torpor/view 0.4.5 → 0.4.7

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/buildFragment.ts

@@ -347,8 +347,17 @@ function elementTypeName(node: ElementNode) {
 	// TODO: Etc
 	switch (node.tagName.toLowerCase()) {
 		case "div":
+		case "span":
 		case "input":
+		case "select":
+		case "option":
+		case "button":
+		case "form":
 			return `HTML${node.tagName.substring(0, 1).toUpperCase() + node.tagName.substring(1)}Element`;
+		case "a":
+			return "HTMLAnchorElement";
+		case "img":
+			return "HTMLImageElement";
 		case "textarea":
 			return "HTMLTextAreaElement";
 	}

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/addEvent.ts

@@ -3,11 +3,13 @@ import context from "./context";
 export default function addEvent(
 	el: Element,
 	type: string,
-	listener: (this: Element, ev: any) => any,
+	listener: ((this: Element, ev: any) => any) | undefined | null,
 ): void {
 	// Stash the event in context so that it can be added when the fragment is
 	// added to the DOM
 	// NOTE: We don't need to do this for hydration, but it's simpler to do it
 	// the same way in both processes
-	context.stashedEvents.push({ region: context.activeRegion, el, type, listener });
+	if (listener !== undefined && listener !== null) {
+		context.stashedEvents.push({ region: context.activeRegion, el, type, listener });
+	}
 }

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/await/components/output/Await-client.ts

@@ -102,7 +102,7 @@ export default function Await(
 			t_run_branch(t_await_region_1, () => t_await_creators_1[index](t_before));
 		});
 
-		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLElement;
+		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLButtonElement;
 		const t_text_5 = t_next(t_button_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);

package/test/await/components/temp/{Await-client-8ad3f252c4550020753eea3c04cde0da435c6aae.ts → Await-client-1587441666890e0beae15f28451bcd04b90cc597.ts}

@@ -102,7 +102,7 @@ export default function Await(
 			t_run_branch(t_await_region_1, () => t_await_creators_1[index](t_before));
 		});
 
-		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLElement;
+		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLButtonElement;
 		const t_text_5 = t_next(t_button_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);

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/output/BindText-client.ts

@@ -30,7 +30,7 @@ export default function BindText(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> `);
 	const t_root_0 = t_root(t_fragment_0, true);
 	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
-	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
+	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLSelectElement;
 	const t_text_1 = t_child(t_next(t_next(t_select_1, true)));
 	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1, true)), true)));
 	const t_text_3 = t_next(t_next(t_next(t_next(t_next(t_select_1, true)), true)), true);

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/bind/components/temp/{BindText-client-eebe53ed8c48b5bbd046621efa6d9b5d3d753f6f.ts → BindText-client-c56c86c514eed2bcbe3f9c1bf23507a98d7d14b1.ts}

@@ -30,7 +30,7 @@ export default function BindText(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> `);
 	const t_root_0 = t_root(t_fragment_0, true);
 	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
-	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
+	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLSelectElement;
 	const t_text_1 = t_child(t_next(t_next(t_select_1, true)));
 	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1, true)), true)));
 	const t_text_3 = t_next(t_next(t_next(t_next(t_next(t_select_1, true)), true)), true);

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

@@ -25,7 +25,7 @@ export default function Class(
 
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> `);
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLAnchorElement;
 	const t_div_1 = t_next(t_next(t_a_1, true)) as HTMLDivElement;
 	const t_div_2 = t_next(t_next(t_div_1, true)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2, true)) as HTMLDivElement;
@@ -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-d0f120c1171030cbe2862a26bc11965cacdd2b18.ts}

@@ -25,7 +25,7 @@ export default function Class(
 
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> `);
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLAnchorElement;
 	const t_div_1 = t_next(t_next(t_a_1, true)) as HTMLDivElement;
 	const t_div_2 = t_next(t_next(t_div_1, true)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2, true)) as HTMLDivElement;
@@ -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/events/components/output/Events-client.ts

@@ -33,8 +33,8 @@ export default function Increment(
 
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button id="increment"> Increment </button> <button id="increment5"> Increment </button> <p>#</p> `);
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_button_1 = t_next(t_root_0) as HTMLElement;
-	const t_button_2 = t_next(t_next(t_button_1, true)) as HTMLElement;
+	const t_button_1 = t_next(t_root_0) as HTMLButtonElement;
+	const t_button_2 = t_next(t_next(t_button_1, true)) as HTMLButtonElement;
 	const t_text_1 = t_child(t_next(t_next(t_button_2, true)));
 	const t_text_2 = t_next(t_next(t_next(t_button_2, true)), true);
 	t_event(t_button_1, "click", increment);

package/test/events/components/temp/{Events-client-af611081aa6cb1567461367daf3068df86c6ff23.ts → Events-client-8708dd031fb42b980e47799e6f6c0de7a35ef7ae.ts}

@@ -33,8 +33,8 @@ export default function Increment(
 
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button id="increment"> Increment </button> <button id="increment5"> Increment </button> <p>#</p> `);
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_button_1 = t_next(t_root_0) as HTMLElement;
-	const t_button_2 = t_next(t_next(t_button_1, true)) as HTMLElement;
+	const t_button_1 = t_next(t_root_0) as HTMLButtonElement;
+	const t_button_2 = t_next(t_next(t_button_1, true)) as HTMLButtonElement;
 	const t_text_1 = t_child(t_next(t_next(t_button_2, true)));
 	const t_text_2 = t_next(t_next(t_next(t_button_2, true)), true);
 	t_event(t_button_1, "click", increment);

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;
@@ -60,7 +62,7 @@ export default function ForContainingIf(
 			let t_old_region_1 = t_push_region(t_item_1);
 			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <button>#</button> `);
 			const t_root_1 = t_root(t_fragment_1, true);
-			const t_button_1 = t_next(t_root_1) as HTMLElement;
+			const t_button_1 = t_next(t_root_1) as HTMLButtonElement;
 			const t_text_1 = t_child(t_button_1);
 			t_event(t_button_1, "click", doit);
 

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;