@torpor/view 0.0.13 → 0.1.0

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

@@ -0,0 +1,87 @@
+import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
+import t_child from "../../../../src/render/nodeChild";
+import t_event from "../../../../src/render/addEvent";
+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 BindComponent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+
+	let $state = $watch({ name: "Alice", selected: 1 });
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	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;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setProp() {
+		t_props_1["name"] = $state.name;
+	});
+	$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));
+	$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);
+
+}
+
+function BindText(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	//let $state = $watch({
+		//	text: $props.name
+		//})
+
+		// $run(() => t_name_changed($props.name))
+
+		//$run(() => {
+			//	$props.name = $state.text
+			//});
+
+			/* User interface */
+			const t_fragments: DocumentFragment[] = [];
+
+			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> </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;
+			$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);
+
+		}

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

@@ -0,0 +1,52 @@
+import $run from "../../../../src/render/$serverRun";
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_attr from "../../../../src/render/formatAttributeText";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function BindComponent(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let $state = $watch({ name: "Alice", selected: 1 });
+
+	/* User interface */
+	let $output = "";
+	$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>`;
+
+	return $output;
+}
+
+function BindText(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+	//let $state = $watch({
+		//	text: $props.name
+		//})
+
+		// $run(() => t_name_changed($props.name))
+
+		//$run(() => {
+			//	$props.name = $state.text
+			//});
+
+			/* User interface */
+			let $output = "";
+			$output += `<div> <input value="${t_attr($props.name) || ""}"> </div>`;
+
+			return $output;
+		}

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

@@ -29,9 +29,9 @@ export default function BindText(
 	// @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_next(t_input_1)) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_next(t_select_1)));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1)))));
+	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));
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});

package/test/bind/components/temp/BindComponent-client-a645474748485a878871c062ad69e6bcf35e6550.ts

@@ -0,0 +1,87 @@
+import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
+import t_child from "../../../../src/render/nodeChild";
+import t_event from "../../../../src/render/addEvent";
+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 BindComponent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+
+	let $state = $watch({ name: "Alice", selected: 1 });
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	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;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setProp() {
+		t_props_1["name"] = $state.name;
+	});
+	$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));
+	$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);
+
+}
+
+function BindText(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	//let $state = $watch({
+		//	text: $props.name
+		//})
+
+		// $run(() => t_name_changed($props.name))
+
+		//$run(() => {
+			//	$props.name = $state.text
+			//});
+
+			/* User interface */
+			const t_fragments: DocumentFragment[] = [];
+
+			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> </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;
+			$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);
+
+		}

package/test/bind/components/temp/BindComponent-server-c557e7aa944517ab87415b8bb35b41b0034254e7.ts

@@ -0,0 +1,52 @@
+import $run from "../../../../src/render/$serverRun";
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_attr from "../../../../src/render/formatAttributeText";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function BindComponent(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let $state = $watch({ name: "Alice", selected: 1 });
+
+	/* User interface */
+	let $output = "";
+	$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>`;
+
+	return $output;
+}
+
+function BindText(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+	//let $state = $watch({
+		//	text: $props.name
+		//})
+
+		// $run(() => t_name_changed($props.name))
+
+		//$run(() => {
+			//	$props.name = $state.text
+			//});
+
+			/* User interface */
+			let $output = "";
+			$output += `<div> <input value="${t_attr($props.name) || ""}"> </div>`;
+
+			return $output;
+		}

package/test/bind/components/temp/{BindText-client-9e2f542e13bcbf9a44eab2c5a79d67ddb128f928.ts → BindText-client-d5f7d721df55020ef337f660e5d278eb80fcc330.ts}

@@ -29,9 +29,9 @@ export default function BindText(
 	// @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_next(t_input_1)) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_next(t_select_1)));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1)))));
+	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));
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});

package/test/build-server/build-server-element-node.test.ts

@@ -35,7 +35,7 @@ export default function Component() {
 		<p>
 			<input value='some "text"'>
 			<input value={value}>
-			<input :value={value}>
+			<input &value={value}>
 			<input {value}>
 			<input value={value + " extra"}>
 			<input value="{value} extra">

package/test/buildOutputFiles.ts

@@ -83,7 +83,12 @@ function formatCode(code: string, suffix: string): string {
 	}
 
 	// Replace component imports with JS imports
-	code = code.replaceAll(/import (.+?) from ['"](.+?).torp['"]/g, `import $1 from "$2-${suffix}"`);
+	// HACK: Reference from `../output/` as it will work in both the hashed files
+	// (in `/temp`) and non-hashed files (in `/output`)
+	code = code.replaceAll(
+		/import (.+?) from ['"](.+?).torp['"]/g,
+		`import $1 from "../output/$2-${suffix}"`,
+	);
 
 	return code;
 }
@@ -95,8 +100,6 @@ const importsMap: Record<string, string> = {
 		'import $unwrap from "../../../../src/render/$unwrap";',
 	'import { $run } from "@torpor/view";': 'import $run from "../../../../src/render/$run";',
 	'import { $mount } from "@torpor/view";': 'import $mount from "../../../../src/render/$mount";',
-	'import { t_flush } from "@torpor/view";':
-		'import t_flush from "../../../../src/render/flushMountEffects";',
 	'import { t_range } from "@torpor/view";':
 		'import t_range from "../../../../src/render/newRange";',
 	'import { t_push_range } from "@torpor/view";':

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

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
@@ -28,7 +29,7 @@ export default function ParentChild(
 	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	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);
@@ -45,7 +46,7 @@ function Child(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];

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

@@ -29,6 +29,7 @@ function Child(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";

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

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
@@ -28,7 +29,7 @@ export default function ParentChild(
 	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	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);
@@ -45,7 +46,7 @@ function Child(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];

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

@@ -29,6 +29,7 @@ function Child(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";

package/test/class/class.test.ts

@@ -49,8 +49,13 @@ test("class -- hydrated", async () => {
 });
 
 function check(container: HTMLElement, state: State) {
+	expect(queryByText(container, "From id")).not.toBeNull();
+	expect(queryByText(container, "From id")).toHaveClass("torp-1ljxz83", {
+		exact: true,
+	});
+
 	expect(queryByText(container, "From string")).not.toBeNull();
-	expect(queryByText(container, "From string")).toHaveClass("yo torp-1ljxz83", {
+	expect(queryByText(container, "From string")).toHaveClass("divclass torp-1ljxz83", {
 		exact: true,
 	});
 

package/test/class/components/Class.torp

@@ -1,7 +1,11 @@
 export default function Class() {
 	@render {
 		<div>
-			<div class="yo">
+			<div id="divid">
+				From id
+			</div>
+
+			<div class="divclass">
 				From string
 			</div>
 

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

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_child from "../../../../src/render/nodeChild";
@@ -16,19 +17,19 @@ export default function Class(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	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>`);
+	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_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;
+	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;
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});

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

@@ -8,10 +8,11 @@ export default function Class(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* 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>`;
+	$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> </div>`;
 
 	return $output;
 }

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

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_child from "../../../../src/render/nodeChild";
@@ -16,19 +17,19 @@ export default function Class(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	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>`);
+	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_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;
+	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;
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});

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

@@ -0,0 +1,18 @@
+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>
+) {
+	$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> </div>`;
+
+	return $output;
+}

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

@@ -1,10 +1,11 @@
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
 import t_fragment from "../../../../src/render/getFragment";
 import t_root from "../../../../src/render/nodeRoot";
 
-import Header from "./Header-client";
+import Header from "../output/./Header-client";
 
 export default function Component(
 	$parent: ParentNode,
@@ -26,7 +27,7 @@ export default function Component(
 	const t_comp_anchor_1 = t_anchor(t_root_0) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Amy";
 	Header(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	t_add_fragment(t_fragment_0, $parent, $anchor);

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

@@ -1,6 +1,6 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 
-import Header from "./Header-server";
+import Header from "../output/./Header-server";
 
 export default function Component(
 	// @ts-ignore

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

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_child from "../../../../src/render/nodeChild";
@@ -16,7 +17,7 @@ export default function Header(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];

package/test/component/components/output/Header-server.ts

@@ -8,6 +8,7 @@ export default function Header(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";

package/test/component/components/temp/{Component-client-32cd481f03e25d10b8e93947a2ff8773135b4975.ts → Component-client-a2fb6f30fc340bac909b64cb4f5ac68cde376de3.ts}

@@ -1,10 +1,11 @@
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
 import t_fragment from "../../../../src/render/getFragment";
 import t_root from "../../../../src/render/nodeRoot";
 
-import Header from "../output/Header-client";
+import Header from "../output/./Header-client";
 
 export default function Component(
 	$parent: ParentNode,
@@ -26,7 +27,7 @@ export default function Component(
 	const t_comp_anchor_1 = t_anchor(t_root_0) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Amy";
 	Header(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	t_add_fragment(t_fragment_0, $parent, $anchor);

package/test/component/components/temp/{Component-server-11542f55405218c0b471172cac1d6a1a4edb5c09.ts → Component-server-40be12cd528ccf768f1ad40ef2a435ad2b2a2d71.ts}

@@ -1,6 +1,6 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 
-import Header from "../output/Header-server";
+import Header from "../output/./Header-server";
 
 export default function Component(
 	// @ts-ignore

package/test/component/components/temp/{Header-client-ac151eea86e3f6b058fab101661e13ae73864968.ts → Header-client-75cb4aa868295ac168c16ba7b275fbb5ab9256f9.ts}

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_child from "../../../../src/render/nodeChild";
@@ -16,7 +17,7 @@ export default function Header(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];