@torpor/view 0.0.10 → 0.0.12

package/test/bench/components/temp/Bench-server-00cefa588803c01ca4f2741c595e4f045cdd101e.ts

@@ -0,0 +1,130 @@
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_class from "../../../../src/render/getClasses";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Bench(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let rowId = 1;
+	let $state = $watch({
+		data: [],
+		selected: null,
+	});
+
+	const adjectives = [
+		"pretty",
+		"large",
+		"big",
+		"small",
+		"tall",
+		"short",
+		"long",
+		"handsome",
+		"plain",
+		"quaint",
+		"clean",
+		"elegant",
+		"easy",
+		"angry",
+		"crazy",
+		"helpful",
+		"mushy",
+		"odd",
+		"unsightly",
+		"adorable",
+		"important",
+		"inexpensive",
+		"cheap",
+		"expensive",
+		"fancy",
+	];
+	const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+	const nouns = [
+		"table",
+		"chair",
+		"house",
+		"bbq",
+		"desk",
+		"car",
+		"pony",
+		"cookie",
+		"sandwich",
+		"burger",
+		"pizza",
+		"mouse",
+		"keyboard",
+	];
+
+	function append() {
+		$state.data = [...$state.data, ...buildData(1000)];
+	}
+
+	function clear() {
+		$state.data = [];
+	}
+
+	function partialUpdate() {
+		for (let i = 0; i < $state.data.length; i += 10) {
+			const row = $state.data[i];
+			row.label = row.label + " !!!";
+		}
+	}
+
+	function remove(row) {
+		const clone = $state.data.slice();
+		clone.splice(clone.indexOf(row), 1);
+		$state.data = clone;
+	}
+
+	function create() {
+		// TODO: Build this up to 1000:
+		$state.data = buildData(10);
+	}
+
+	function createLots() {
+		$state.data = buildData(10000);
+	}
+
+	function swapRows() {
+		if ($state.data.length > 998) {
+			const clone = $state.data.slice();
+			const tmp = clone[1];
+			clone[1] = clone[998];
+			clone[998] = tmp;
+			$state.data = clone;
+		}
+	}
+
+	function _random(max) {
+		return Math.round(Math.random() * 1000) % max;
+	}
+
+	class Item {
+		id = rowId++;
+		label = `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`;
+	}
+
+	function buildData(count = 1000) {
+		const data = new Array(count);
+		for (let i = 0; i < count; i++) {
+			data[i] = $watch(new Item());
+		}
+		return data;
+	}
+
+	/* User interface */
+	let $output = "";
+	$output += `<div id="main" class="container"> <div class="jumbotron"> <div class="row"> <div class="col-md-6"> <h1>Torpor (keyed)</h1> </div> <div class="col-md-6"> <div class="row"> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="create">Create 1,000 rows</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="createlots"> Create 10,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="append"> Append 1,000 rows </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="update"> Update every 10th row </button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="clear">Clear</button> </div> <div class="col-sm-6 smallpad"> <button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button> </div> </div> </div> </div> </div> <table class="table table-hover table-striped test-data"> <tbody> <![>`;
+	for (let row of $state.data) {
+		$output += `<!^>  <tr class="${t_class({ danger: $state.selected === row.id })}"> <td class="col-md-1">${t_fmt(row.id)}</td> <td class="col-md-4"> <a> ${t_fmt(row.label)} </a> </td> <td class="col-md-1"> <a> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a> </td> <td class="col-md-6"></td> </tr> `;
+	}
+	$output += `<!]><!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div>`;
+
+	return $output;
+}

package/test/build-server/components/{output/IfNested-client.ts → temp/IfNested-client-979db97eea5b4595550b9b46f297f3fbc31796d2.ts}

@@ -18,11 +18,13 @@ export default function IfNested(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
 	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_if_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
 
@@ -32,6 +34,7 @@ export default function IfNested(
 		if ($props.counter > 5) {
 			t_run_branch(t_if_range_1, 0, () => {
 				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <!> `);
+				// @ts-ignore
 				const t_root_1 = t_root(t_fragment_1);
 				const t_if_anchor_2 = t_anchor(t_next(t_root_1)) as HTMLElement;
 
@@ -41,7 +44,9 @@ export default function IfNested(
 					if ($props.counter > 10) {
 						t_run_branch(t_if_range_2, 0, () => {
 							const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <p> It's both true! </p> `);
+							// @ts-ignore
 							const t_root_2 = t_root(t_fragment_2);
+							// @ts-ignore
 							const t_text_1 = t_next(t_next(t_root_2));
 							t_add_fragment(t_fragment_2, t_fragment_1, t_before);
 							t_next(t_text_1);
@@ -50,7 +55,9 @@ export default function IfNested(
 					else {
 						t_run_branch(t_if_range_2, 1, () => {
 							const t_fragment_3 = t_fragment($parent.ownerDocument!, t_fragments, 3, ` <p> The second is not true! </p> `);
+							// @ts-ignore
 							const t_root_3 = t_root(t_fragment_3);
+							// @ts-ignore
 							const t_text_2 = t_next(t_next(t_root_3));
 							t_add_fragment(t_fragment_3, t_fragment_1, t_before);
 							t_next(t_text_2);
@@ -58,6 +65,7 @@ export default function IfNested(
 					}
 				});
 
+				// @ts-ignore
 				const t_text_3 = t_next(t_if_anchor_2);
 				t_add_fragment(t_fragment_1, t_div_1, t_before);
 				t_next(t_text_3);
@@ -66,7 +74,9 @@ export default function IfNested(
 		else {
 			t_run_branch(t_if_range_1, 1, () => {
 				const t_fragment_4 = t_fragment($parent.ownerDocument!, t_fragments, 4, ` <p> The first is not true! </p> `);
+				// @ts-ignore
 				const t_root_4 = t_root(t_fragment_4);
+				// @ts-ignore
 				const t_text_4 = t_next(t_next(t_root_4));
 				t_add_fragment(t_fragment_4, t_div_1, t_before);
 				t_next(t_text_4);
@@ -75,5 +85,6 @@ export default function IfNested(
 	});
 
 	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
 
 }

package/test/buildHtml.ts

@@ -8,7 +8,7 @@ import { type BuildResult } from "../src/compile/types/BuildResult";
 
 const debugPrint = false;
 
-export default function buildHtml(source: string, state?: any, componentPath?: string) {
+export default function buildHtml(source: string, state?: any, componentPath?: string): string {
 	// HACK: we may be running this from the top level, or from within the view folder
 	if (componentPath && !fs.existsSync(componentPath)) {
 		componentPath = path.join("view", componentPath);

package/test/buildOutputFiles.ts

@@ -1,11 +1,11 @@
 import fg from "fast-glob";
-import { existsSync, promises as fs } from "node:fs";
+import crypto from "node:crypto";
+import { existsSync, promises as fs, unlinkSync } from "node:fs";
 import path from "node:path";
-import { buildType } from "../src/compile";
 import build from "../src/compile/build";
 import parse from "../src/compile/parse";
 
-export default async function buildOutputFiles(componentPath: string) {
+export default async function buildOutputFiles(componentPath: string): Promise<void> {
 	//console.log("Building test output files", componentPath);
 	const files = await fg("**/*.torp", {
 		absolute: true,
@@ -15,7 +15,7 @@ export default async function buildOutputFiles(componentPath: string) {
 	//console.log("Done\n");
 }
 
-async function buildFiles(file: string) {
+export async function buildFiles(file: string): Promise<void> {
 	//console.log(`Building files for ${file.substring(path.resolve("./test").length)}`);
 
 	const source = await fs.readFile(file, "utf8");
@@ -23,22 +23,57 @@ async function buildFiles(file: string) {
 	if (parsed.ok && parsed.template) {
 		let serverCode = formatCode(build(parsed.template, { server: true }).code, "server");
 		let clientCode = formatCode(build(parsed.template).code, "client");
+		await maybeWriteFile(file, clientCode, "client");
+		await maybeWriteFile(file, serverCode, "server");
+	} else {
+		// Just log the message and continue with output/testing
+		console.log("PARSE FAILED for " + file);
+		console.log(parsed.errors.map((e) => e.message).join("\n"));
+	}
+}
 
-		let typesCode = buildType(parsed.template);
-		await fs.writeFile(file.replace(".torp", ".d.ts"), typesCode);
+async function maybeWriteFile(file: string, code: string, suffix: string) {
+	//const hash = await hashFileContents(code);
+	const hash = hashFileCode(code);
+
+	// If the hashed file doesn't exist, update it and the output file
+	let outputFile = file
+		.replace("/components/", "/components/temp/")
+		.replace(".torp", `-${suffix}-${hash}.ts`);
+	if (!existsSync(outputFile)) {
+		console.log(`Building files for ${file}`);
+
+		let outputFolder = path.dirname(outputFile);
+		if (!existsSync(outputFolder)) {
+			await fs.mkdir(outputFolder);
+		}
 
-		let outputFile = file.replace("/components/", "/components/output/");
+		// Delete old files
+		const glob = `${path.basename(file, ".torp")}-${suffix}-*.ts`;
+		const oldFiles = await fg(glob, {
+			absolute: true,
+			cwd: path.resolve(outputFolder),
+		});
+		oldFiles.forEach((f) => unlinkSync(f));
+
+		// Create the new hash file
+		await fs.writeFile(outputFile, code);
+
+		// Create the new output file
+		outputFile = file
+			.replace("/components/", "/components/output/")
+			.replace(".torp", `-${suffix}.ts`);
 		if (!existsSync(path.dirname(outputFile))) {
 			await fs.mkdir(path.dirname(outputFile));
 		}
-		await fs.writeFile(outputFile.replace(".torp", "-server.ts"), serverCode);
-		await fs.writeFile(outputFile.replace(".torp", "-client.ts"), clientCode);
-	} else {
-		// Just log the message and continue with output/testing
-		console.log("Parse failed for " + file);
+		await fs.writeFile(outputFile, code);
 	}
 }
 
+function hashFileCode(code: string) {
+	return crypto.createHash("sha1").update(code).digest("hex");
+}
+
 function formatCode(code: string, suffix: string): string {
 	// Replace imports from the built @torpor/view to the source code, so that
 	// a) we don't have to build @torpor/view before testing, and

package/test/class/class.test.ts

@@ -49,21 +49,44 @@ test("class -- hydrated", async () => {
 });
 
 function check(container: HTMLElement, state: State) {
-	expect(queryByText(container, "Hello!")).not.toBeNull();
-	expect(queryByText(container, "Hello!")).toHaveClass("hello red blue", { exact: true });
+	expect(queryByText(container, "From string")).not.toBeNull();
+	expect(queryByText(container, "From string")).toHaveClass("yo torp-1ljxz83", {
+		exact: true,
+	});
+
+	expect(queryByText(container, "From state")).not.toBeNull();
+	expect(queryByText(container, "From state")).toHaveClass("hello red blue torp-1ljxz83", {
+		exact: true,
+	});
+
+	expect(queryByText(container, "From state with scope")).not.toBeNull();
+	expect(queryByText(container, "From state with scope")).toHaveClass(
+		"hello red blue torp-1ljxz83",
+		{
+			exact: true,
+		},
+	);
 
 	expect(queryByText(container, "Class object")).not.toBeNull();
-	expect(queryByText(container, "Class object")).toHaveClass("foo baz", { exact: true });
+	expect(queryByText(container, "Class object")).toHaveClass("foo baz torp-1ljxz83", {
+		exact: true,
+	});
 
 	expect(queryByText(container, "Class array")).not.toBeNull();
-	expect(queryByText(container, "Class array")).toHaveClass("foo baz", { exact: true });
+	expect(queryByText(container, "Class array")).toHaveClass("foo baz torp-1ljxz83", {
+		exact: true,
+	});
 
 	expect(queryByText(container, "Class nested")).not.toBeNull();
-	expect(queryByText(container, "Class nested")).toHaveClass("foo bar baz qux", { exact: true });
+	expect(queryByText(container, "Class nested")).toHaveClass("foo bar baz qux torp-1ljxz83", {
+		exact: true,
+	});
 
 	// Change state
 	state.green = true;
 	state.blue = false;
 
-	expect(queryByText(container, "Hello!")).toHaveClass("hello red green", { exact: true });
+	expect(queryByText(container, "From state")).toHaveClass("hello red green torp-1ljxz83", {
+		exact: true,
+	});
 }

package/test/class/components/Class.torp

@@ -1,8 +1,16 @@
 export default function Class() {
 	@render {
 		<div>
+			<div class="yo">
+				From string
+			</div>
+
+			<a :class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
+				From state
+			</a>
+
 			<div :class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
-				Hello!
+				From state with scope
 			</div>
 
 			<div :class={{ foo: true, bar: false, baz: 5, qux: null }}>
@@ -18,4 +26,10 @@ export default function Class() {
 			</div>
 		</div>		
 	}
+
+	@style {
+		div {
+			color: blue;
+		}
+	}
 }

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

@@ -21,24 +21,28 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div> Hello! </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div class="yo torp-1ljxz83"> From string </div> <a> From state </a> <div> From state with scope </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_div_2 = t_next(t_child(t_div_1)) as HTMLDivElement;
+	const t_a_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_div_2 = t_next(t_next(t_a_1)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
 	const t_div_4 = t_next(t_next(t_div_3)) as HTMLDivElement;
 	const t_div_5 = t_next(t_next(t_div_4)) as HTMLDivElement;
 	$run(function setClasses() {
-		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue });
+		t_a_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 });
+		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_4.className = t_class([ "foo", false, true && "baz", undefined ]);
+		t_div_3.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_5.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ]);
+		t_div_4.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_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);

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

@@ -11,7 +11,7 @@ export default function Class(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue })}"> Hello! </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null })}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ])}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ])}"> Class nested </div> </div>`;
+	$output += `<div> <div class="yo 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> </div>`;
 
 	return $output;
 }

package/test/class/components/temp/{Class-client-600bf865c14f1052d24e1c79242f837aaf5ae5e8.ts → Class-client-8c3f9e0257cc2b687e9bb7106cccbab94a4b5adf.ts}

@@ -21,24 +21,28 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div> Hello! </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div class="yo torp-1ljxz83"> From string </div> <a> From state </a> <div> From state with scope </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_div_2 = t_next(t_child(t_div_1)) as HTMLDivElement;
+	const t_a_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_div_2 = t_next(t_next(t_a_1)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
 	const t_div_4 = t_next(t_next(t_div_3)) as HTMLDivElement;
 	const t_div_5 = t_next(t_next(t_div_4)) as HTMLDivElement;
 	$run(function setClasses() {
-		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue });
+		t_a_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 });
+		t_div_2.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_4.className = t_class([ "foo", false, true && "baz", undefined ]);
+		t_div_3.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
 	});
 	$run(function setClasses() {
-		t_div_5.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ]);
+		t_div_4.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_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);

package/test/class/components/temp/Class-server-2218c3284845fdab80d1a41ebace9a9e2ddd6fc1.ts

@@ -0,0 +1,17 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+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>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <div class="yo 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> </div>`;
+
+	return $output;
+}

package/test/component/components/temp/Header-client-ac151eea86e3f6b058fab101661e13ae73864968.ts

@@ -0,0 +1,34 @@
+import $run from "../../../../src/render/$run";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_child from "../../../../src/render/nodeChild";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function Header(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<h2>#</h2>`);
+	// @ts-ignore
+	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_text_1 = t_child(t_h2_1);
+	$run(function setTextContent() {
+		t_text_1.textContent = `Hi, ${t_fmt($props.name)}`;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_h2_1);
+
+}

package/test/component/components/temp/Header-server-4f10f2332f3ca7a097517cfb938ab1e6f31d68ac.ts

@@ -0,0 +1,17 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Header(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<h2>Hi, ${t_fmt($props.name)}</h2>`;
+
+	return $output;
+}

package/test/console/components/temp/{Console-client-254d7d4799471401334d698b1631ab1cb5b70558.ts → Console-client-2f206752ce59e59fba9bb91263b4102fd515951e.ts}

@@ -18,7 +18,7 @@ export default function Console(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> </div>`, false);
+	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;
 	/* @console */

package/test/console/components/temp/Console-server-b4b15f7a0d1d2b50d87bad4870e1b8d368707c04.ts

@@ -0,0 +1,17 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function Console(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div>  </div>`;
+
+	return $output;
+}

package/test/globalSetup.ts

@@ -1,6 +1,6 @@
 //import "../scripts/buildTestOutput";
 
-export async function setup() {
+export async function setup(): Promise<void> {
 	// Build the output files in the above import
 }
 

package/test/helpers.ts

@@ -28,12 +28,16 @@ export function el(
 	children?: TemplateNode[],
 	selfClosed?: boolean,
 ): ElementNode {
+	let scopeStyles = !!attributes?.find((a) => a.name === "class" && a.value?.startsWith(`"torp-`));
 	return {
 		type: "element",
 		tagName,
-		attributes: attributes || [],
+		attributes: (attributes || []).filter(
+			(a) => !(a.name === "class" && a.value?.startsWith(`"torp-`)),
+		),
 		children: children || [],
 		selfClosed,
+		scopeStyles: scopeStyles || undefined,
 		closed: true,
 	};
 }
@@ -116,7 +120,7 @@ function trimElement(el: RootNode | ElementNode | ControlNode) {
 	}
 }
 
-export function trimCode(code: string) {
+export function trimCode(code: string): string {
 	//return code.split('\n').filter(l => !l.trim().startsWith("import"))
 	return code.replace(/\/\*\*.+\*\/\n/gms, "");
 }

package/test/hydrateComponent.ts

@@ -7,7 +7,7 @@ export default function hydrateComponent(
 	clientComponent: Component,
 	serverComponent: ServerComponent,
 	state?: any,
-) {
+): void {
 	const html = serverComponent(state);
 	container.innerHTML = html;
 	container.ownerDocument.body.appendChild(container);