@torpor/view 0.1.5 → 0.1.6

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

@@ -16,12 +16,12 @@ export default function BindComponent(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> `;
+	$output += ` <div> `;
 	const t_props_1: any = {};
 	t_props_1["&name"] = $state.name;
 
 	$output += BindText(t_props_1, $context)
-	$output += ` <p>Hello, ${t_fmt($state.name)}</p> </div>`;
+	$output += `<!> <p>Hello, ${t_fmt($state.name)}</p> </div> `;
 
 	return $output;
 }
@@ -46,7 +46,7 @@ function BindText(
 
 			/* User interface */
 			let $output = "";
-			$output += `<div> <input value="${t_attr($props.name) || ""}"> </div>`;
+			$output += ` <div> <input value="${t_attr($props.name) || ""}"> </div> `;
 
 			return $output;
 		}

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

@@ -25,13 +25,15 @@ export default function BindText(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
-	const t_select_1 = t_next(t_input_1, 2) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_select_1, 2));
-	const t_text_2 = t_child(t_next(t_select_1, 4));
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
+	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
+	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)));
+	// @ts-ignore
+	const t_text_3 = t_next(t_next(t_root_0), true);
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});
@@ -46,7 +48,7 @@ export default function BindText(
 	$run(function setTextContent() {
 		t_text_2.textContent = `You have selected, ${t_fmt($state.selected)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_3);
+	t_next(t_text_3);
 
 }

package/test/bind/components/output/BindText-server.ts

@@ -15,7 +15,7 @@ export default function BindText(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div>`;
+	$output += ` <div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div> `;
 
 	return $output;
 }

package/test/bind/components/temp/{BindComponent-client-a645474748485a878871c062ad69e6bcf35e6550.ts → BindComponent-client-aaeb489ce72b664c6372f8764f7e665994a751a7.ts}

@@ -26,10 +26,11 @@ export default function BindComponent(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <!> <p>#</p> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> <p>#</p> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
@@ -39,13 +40,16 @@ export default function BindComponent(
 	$run(function setBinding() {
 		$state.name = t_props_1["name"];
 	});
-	BindText(t_div_1, t_comp_anchor_1, t_props_1, $context);
-	const t_text_1 = t_child(t_next(t_comp_anchor_1, 2));
+	BindText(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	const t_text_1 = t_child(t_next(t_next(t_anchor(t_comp_anchor_1, true), true)));
+	// @ts-ignore
+	const t_text_2 = t_next(t_comp_parent_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
 
 }
 
@@ -73,15 +77,17 @@ function BindText(
 			/* User interface */
 			const t_fragments: DocumentFragment[] = [];
 
-			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> </div>`);
+			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> </div> `);
+			// @ts-ignore
+			const t_root_0 = t_root(t_fragment_0, true);
+			const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
 			// @ts-ignore
-			const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-			const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
+			const t_text_1 = t_next(t_next(t_root_0), true);
 			$run(function setBinding() {
 				t_input_1.value = $props.name || "";
 			});
 			t_event(t_input_1, "input", (e) => $props.name = e.target.value);
-			t_add_fragment(t_fragment_0, $parent, $anchor);
-			t_next(t_div_1);
+			t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+			t_next(t_text_1);
 
 		}

package/test/bind/components/temp/{BindComponent-server-c557e7aa944517ab87415b8bb35b41b0034254e7.ts → BindComponent-server-c630dee0bee6cea49d5eb8bea04979a737bb8f5e.ts}

@@ -16,12 +16,12 @@ export default function BindComponent(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> `;
+	$output += ` <div> `;
 	const t_props_1: any = {};
 	t_props_1["&name"] = $state.name;
 
 	$output += BindText(t_props_1, $context)
-	$output += ` <p>Hello, ${t_fmt($state.name)}</p> </div>`;
+	$output += `<!> <p>Hello, ${t_fmt($state.name)}</p> </div> `;
 
 	return $output;
 }
@@ -46,7 +46,7 @@ function BindText(
 
 			/* User interface */
 			let $output = "";
-			$output += `<div> <input value="${t_attr($props.name) || ""}"> </div>`;
+			$output += ` <div> <input value="${t_attr($props.name) || ""}"> </div> `;
 
 			return $output;
 		}

package/test/bind/components/temp/{BindText-client-d5f7d721df55020ef337f660e5d278eb80fcc330.ts → BindText-client-134676d616abbad6b8a7ec48df0a2e38cbfe3b87.ts}

@@ -25,13 +25,15 @@ export default function BindText(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
-	const t_select_1 = t_next(t_input_1, 2) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_select_1, 2));
-	const t_text_2 = t_child(t_next(t_select_1, 4));
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
+	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
+	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)));
+	// @ts-ignore
+	const t_text_3 = t_next(t_next(t_root_0), true);
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});
@@ -46,7 +48,7 @@ export default function BindText(
 	$run(function setTextContent() {
 		t_text_2.textContent = `You have selected, ${t_fmt($state.selected)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_3);
+	t_next(t_text_3);
 
 }

package/test/bind/components/temp/{BindText-server-4b94cdf60d9c9a2088306c4407e2ae30785169b0.ts → BindText-server-807a1ddcb68410b30429cb088d2e204ed6f585b2.ts}

@@ -15,7 +15,7 @@ export default function BindText(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div>`;
+	$output += ` <div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div> `;
 
 	return $output;
 }

package/test/buildHtml.ts

@@ -68,5 +68,5 @@ ${template.components.find((t) => t.default)!.name};
 		console.log("===");
 	}
 
-	return html;
+	return html.trim();
 }

package/test/buildOutputFiles.ts

@@ -54,7 +54,11 @@ async function maybeWriteFile(file: string, code: string, suffix: string) {
 			absolute: true,
 			cwd: path.resolve(outputFolder),
 		});
-		oldFiles.forEach((f) => unlinkSync(f));
+		oldFiles.forEach((f) => {
+			if (existsSync(f)) {
+				unlinkSync(f);
+			}
+		});
 
 		// Create the new hash file
 		await fs.writeFile(outputFile, code);
@@ -139,6 +143,7 @@ const importsMap: Record<string, string> = {
 	'import { t_child } from "@torpor/view";':
 		'import t_child from "../../../../src/render/nodeChild";',
 	'import { t_next } from "@torpor/view";': 'import t_next from "../../../../src/render/nodeNext";',
+	'import { t_skip } from "@torpor/view";': 'import t_skip from "../../../../src/render/nodeSkip";',
 	'import { t_frg } from "@torpor/view";':
 		'import t_frg from "../../../../src/render/createFragment";',
 	'import { t_elm } from "@torpor/view";':
@@ -166,6 +171,8 @@ const importsMap: Record<string, string> = {
 		'import t_class from "../../../../src/render/getClasses";',
 	'import { t_style } from "@torpor/view/ssr";':
 		'import t_style from "../../../../src/render/getStyles";',
+	'import { t_print } from "@torpor/view";':
+		'import t_print from "../../../../src/debug/printNode";',
 	'import { type ServerSlotRender } from "@torpor/view/ssr";':
 		'import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";',
 };

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

@@ -23,17 +23,21 @@ export default function ParentChild(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <!> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Anna";
-	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	// @ts-ignore
+	const t_text_1 = t_next(t_comp_parent_1, true);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }
 
@@ -51,14 +55,16 @@ function Child(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<h2>#</h2>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <h2>#</h2> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_text_1 = t_child(t_next(t_root_0));
 	// @ts-ignore
-	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
-	const t_text_1 = t_child(t_h2_1);
+	const t_text_2 = t_next(t_next(t_root_0), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($props.name)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_h2_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
 
 }

package/test/child-component/components/output/ParentChild-server.ts

@@ -12,12 +12,12 @@ export default function ParentChild(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> `;
+	$output += ` <div> `;
 	const t_props_1: any = {};
 	t_props_1["name"] = "Anna";
 
 	$output += Child(t_props_1, $context)
-	$output += ` </div>`;
+	$output += `<!> </div> `;
 
 	return $output;
 }
@@ -33,7 +33,7 @@ function Child(
 
 	/* User interface */
 	let $output = "";
-	$output += `<h2>Hello, ${t_fmt($props.name)}</h2>`;
+	$output += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
 
 	return $output;
 }

package/test/child-component/components/temp/{ParentChild-client-eaefb0cbfd251badab3c57ae2037d973f785a1b8.ts → ParentChild-client-6cf4d156ea46338815270faf67f56472f1a4ccd4.ts}

@@ -23,17 +23,21 @@ export default function ParentChild(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <!> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Anna";
-	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	// @ts-ignore
+	const t_text_1 = t_next(t_comp_parent_1, true);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }
 
@@ -51,14 +55,16 @@ function Child(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<h2>#</h2>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <h2>#</h2> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_text_1 = t_child(t_next(t_root_0));
 	// @ts-ignore
-	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
-	const t_text_1 = t_child(t_h2_1);
+	const t_text_2 = t_next(t_next(t_root_0), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($props.name)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_h2_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
 
 }

package/test/child-component/components/temp/{ParentChild-server-8f2fc556f87867e6e3393e2e9e6d696cda107b69.ts → ParentChild-server-a34a8b5acf1c00d1990f8ab7433599506265a45a.ts}

@@ -12,12 +12,12 @@ export default function ParentChild(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> `;
+	$output += ` <div> `;
 	const t_props_1: any = {};
 	t_props_1["name"] = "Anna";
 
 	$output += Child(t_props_1, $context)
-	$output += ` </div>`;
+	$output += `<!> </div> `;
 
 	return $output;
 }
@@ -33,7 +33,7 @@ function Child(
 
 	/* User interface */
 	let $output = "";
-	$output += `<h2>Hello, ${t_fmt($props.name)}</h2>`;
+	$output += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
 
 	return $output;
 }

package/test/class/class.test.ts

@@ -97,7 +97,7 @@ function check(container: HTMLElement, state: State) {
 
 	// Components
 	expect(queryByText(container, "Child class")).not.toBeNull();
-	expect(queryByText(container, "Child class")).toHaveClass("child-class", {
+	expect(queryByText(container, "Child class")).toHaveClass("child-class torp-1ljxz83", {
 		exact: true,
 	});
 }

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

@@ -23,39 +23,43 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <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> <!> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div class="torp-1ljxz83"> <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> <!> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_a_1 = t_next(t_child(t_div_1), 5) as HTMLElement;
-	const t_div_2 = t_next(t_a_1, 2) as HTMLDivElement;
-	const t_div_3 = t_next(t_div_2, 2) as HTMLDivElement;
-	const t_div_4 = t_next(t_div_3, 2) as HTMLDivElement;
-	const t_div_5 = t_next(t_div_4, 2) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_div_5, 2)) as HTMLElement;
+	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_child(t_next(t_root_0))), true)), true)) as HTMLElement;
+	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;
+	const t_div_4 = t_next(t_next(t_div_3, true)) as HTMLDivElement;
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
 	$run(function setClasses() {
-		t_props_1["class"] = t_class({ "child-class": true });
+		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});
-	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	// @ts-ignore
+	const t_text_1 = t_next(t_comp_parent_1, true);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
+		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_3.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
+		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_4.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
+		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_5.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
+		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }
 
@@ -73,13 +77,16 @@ function Child(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> Child class </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> Child class </div> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_text_1 = t_next(t_div_1, true);
 	$run(function setClassName() {
 		t_div_1.className = $props.class;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }

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

@@ -13,12 +13,12 @@ export default function Class(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> `;
+	$output += ` <div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> `;
 	const t_props_1: any = {};
-	t_props_1["class"] = t_class({ "child-class": true });
+	t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 
 	$output += Child(t_props_1, $context)
-	$output += ` </div>`;
+	$output += `<!> </div> `;
 
 	return $output;
 }
@@ -34,7 +34,7 @@ function Child(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div>`;
+	$output += ` <div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div> `;
 
 	return $output;
 }

package/test/class/components/temp/{Class-client-12f09850a5f8c27de6cf94c23a2b17aadbf66f01.ts → Class-client-0405eff591f854c04e5728df0479014ef91efc61.ts}

@@ -23,39 +23,43 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <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> <!> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div class="torp-1ljxz83"> <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> <!> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_a_1 = t_next(t_child(t_div_1), 5) as HTMLElement;
-	const t_div_2 = t_next(t_a_1, 2) as HTMLDivElement;
-	const t_div_3 = t_next(t_div_2, 2) as HTMLDivElement;
-	const t_div_4 = t_next(t_div_3, 2) as HTMLDivElement;
-	const t_div_5 = t_next(t_div_4, 2) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_div_5, 2)) as HTMLElement;
+	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_child(t_next(t_root_0))), true)), true)) as HTMLElement;
+	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;
+	const t_div_4 = t_next(t_next(t_div_3, true)) as HTMLDivElement;
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
 	$run(function setClasses() {
-		t_props_1["class"] = t_class({ "child-class": true });
+		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});
-	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	// @ts-ignore
+	const t_text_1 = t_next(t_comp_parent_1, true);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
+		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_3.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
+		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_4.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
+		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_5.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
+		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }
 
@@ -73,13 +77,16 @@ function Child(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> Child class </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> Child class </div> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_text_1 = t_next(t_div_1, true);
 	$run(function setClassName() {
 		t_div_1.className = $props.class;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }

package/test/class/components/temp/Class-server-daf30ffb1bacf9877e3385dc9a3eede61c972329.ts

@@ -0,0 +1,40 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_attr from "../../../../src/render/formatAttributeText";
+import t_class from "../../../../src/render/getClasses";
+
+export default function Class(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += ` <div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> `;
+	const t_props_1: any = {};
+	t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
+
+	$output += Child(t_props_1, $context)
+	$output += `<!> </div> `;
+
+	return $output;
+}
+
+function Child(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += ` <div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div> `;
+
+	return $output;
+}