@torpor/view 0.0.14 → 0.1.1

package/test/attributes/components/temp/{Attributes-client-c4812cb9307eac6ff44f90f3358a1811b52c7390.ts → Attributes-client-7b8f7b9996208e8d2d0a12d4f4a40a73df63d9d8.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_attribute from "../../../../src/render/setAttribute";
@@ -15,12 +16,12 @@ export default function Attributes(
 	// @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 data-thing=""> Hello! </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div data-thing="" {$props.attr}> Hello! </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	$run(function setAttribute() {
@@ -32,6 +33,9 @@ export default function Attributes(
 	$run(function setAttribute() {
 		t_attribute(t_div_1, "caption", `this attribute is for ${$props.description}`);
 	});
+	$run(function setAttribute() {
+		t_div_1.setAttribute("attr", $props.attr);
+	});
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);
 

package/test/attributes/components/temp/{Attributes-server-a7ebed503f2169f7c900d4613531082f1023b086.ts → Attributes-server-a1289434a5a801be1d63bfc85b621579e06452f0.ts}

@@ -8,10 +8,11 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";
-	$output += `<div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}"> Hello! </div>`;
+	$output += `<div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div>`;
 
 	return $output;
 }

package/test/await/await.test.ts

@@ -31,8 +31,6 @@ test("await -- hydrated", async () => {
 });
 
 async function check(container: HTMLElement) {
-	const user = userEvent.setup();
-
 	expect(queryByText(container, "Hmm...")).not.toBeNull();
 	expect(queryByText(container, "Is it a number?")).toBeNull();
 
@@ -40,7 +38,7 @@ async function check(container: HTMLElement) {
 
 	expect(queryByText(container, "Is it a number?")).not.toBeNull();
 
-	await user.click(getByText(container, "Guess again"));
+	await userEvent.click(getByText(container, "Guess again"));
 
 	expect(queryByText(container, "Hmm...")).not.toBeNull();
 	expect(queryByText(container, "Is it a number?")).toBeNull();
@@ -49,7 +47,7 @@ async function check(container: HTMLElement) {
 
 	expect(queryByText(container, "Is it a number?")).not.toBeNull();
 
-	await user.click(getByText(container, "Guess again"));
+	await userEvent.click(getByText(container, "Guess again"));
 
 	expect(queryByText(container, "Hmm...")).not.toBeNull();
 	expect(queryByText(container, "Is it a number?")).toBeNull();

package/test/await/components/output/Await-client.ts

@@ -62,7 +62,7 @@ export default function Await(
 				// @ts-ignore
 				const t_root_1 = t_root(t_fragment_1);
 				// @ts-ignore
-				const t_text_1 = t_next(t_next(t_root_1));
+				const t_text_1 = t_next(t_root_1, 2);
 				t_add_fragment(t_fragment_1, t_div_1, t_before);
 				t_next(t_text_1);
 			});
@@ -76,7 +76,7 @@ export default function Await(
 							// @ts-ignore
 							const t_root_2 = t_root(t_fragment_2);
 							// @ts-ignore
-							const t_text_2 = t_next(t_next(t_root_2));
+							const t_text_2 = t_next(t_root_2, 2);
 							t_add_fragment(t_fragment_2, t_div_1, t_before);
 							t_next(t_text_2);
 						});
@@ -92,7 +92,7 @@ export default function Await(
 							const t_root_3 = t_root(t_fragment_3);
 							const t_text_3 = t_child(t_next(t_root_3));
 							// @ts-ignore
-							const t_text_4 = t_next(t_next(t_root_3));
+							const t_text_4 = t_next(t_root_3, 2);
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
@@ -105,7 +105,7 @@ export default function Await(
 			})(t_await_token_1);
 		});
 
-		const t_button_1 = t_next(t_next(t_await_anchor_1)) as HTMLElement;
+		const t_button_1 = t_next(t_await_anchor_1, 2) as HTMLElement;
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor);
 		t_next(t_div_1);

package/test/await/components/temp/{Await-client-6ce3ac610ce79ae3b474c81964b715e6f3d966da.ts → Await-client-a7bf000bf2b59a3d5251a0fa18ec79890a52a547.ts}

@@ -62,7 +62,7 @@ export default function Await(
 				// @ts-ignore
 				const t_root_1 = t_root(t_fragment_1);
 				// @ts-ignore
-				const t_text_1 = t_next(t_next(t_root_1));
+				const t_text_1 = t_next(t_root_1, 2);
 				t_add_fragment(t_fragment_1, t_div_1, t_before);
 				t_next(t_text_1);
 			});
@@ -76,7 +76,7 @@ export default function Await(
 							// @ts-ignore
 							const t_root_2 = t_root(t_fragment_2);
 							// @ts-ignore
-							const t_text_2 = t_next(t_next(t_root_2));
+							const t_text_2 = t_next(t_root_2, 2);
 							t_add_fragment(t_fragment_2, t_div_1, t_before);
 							t_next(t_text_2);
 						});
@@ -92,7 +92,7 @@ export default function Await(
 							const t_root_3 = t_root(t_fragment_3);
 							const t_text_3 = t_child(t_next(t_root_3));
 							// @ts-ignore
-							const t_text_4 = t_next(t_next(t_root_3));
+							const t_text_4 = t_next(t_root_3, 2);
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
@@ -105,7 +105,7 @@ export default function Await(
 			})(t_await_token_1);
 		});
 
-		const t_button_1 = t_next(t_next(t_await_anchor_1)) as HTMLElement;
+		const t_button_1 = t_next(t_await_anchor_1, 2) as HTMLElement;
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor);
 		t_next(t_div_1);

package/test/bench/bench.bench.ts

@@ -6,8 +6,6 @@ import mountComponent from "../mountComponent";
 
 const componentPath = "./test/bench/components/Bench";
 
-const user = userEvent.setup();
-
 beforeAll(async () => {
 	const container = document.createElement("div");
 	const component = await importComponent(componentPath, "client");
@@ -24,11 +22,11 @@ bench("bench", async () => {
 
 	try {
 		// Press a bunch of buttons
-		await user.click(createButton);
-		await user.click(appendButton);
-		await user.click(updateButton);
-		await user.click(swapButton);
-		await user.click(clearButton);
+		await userEvent.click(createButton);
+		await userEvent.click(appendButton);
+		await userEvent.click(updateButton);
+		await userEvent.click(swapButton);
+		await userEvent.click(clearButton);
 	} catch {
 		console.log("ERROR");
 	}

package/test/bench/components/output/Bench-client.ts

@@ -0,0 +1,208 @@
+import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
+import { type ListItem } from "../../../../src/types/ListItem";
+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_class from "../../../../src/render/getClasses";
+import t_event from "../../../../src/render/addEvent";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_list_item from "../../../../src/render/newListItem";
+import t_next from "../../../../src/render/nodeNext";
+import t_pop_range from "../../../../src/render/popRange";
+import t_push_range from "../../../../src/render/pushRange";
+import t_range from "../../../../src/render/newRange";
+import t_root from "../../../../src/render/nodeRoot";
+import t_run_list from "../../../../src/render/runList";
+
+export default function Bench(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+
+	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 */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<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> <!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div>`);
+	// @ts-ignore
+	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_button_1 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3))))))) as HTMLElement;
+	const t_button_2 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 3))) as HTMLElement;
+	const t_button_3 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 5))) as HTMLElement;
+	const t_button_4 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 7))) as HTMLElement;
+	const t_button_5 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 9))) as HTMLElement;
+	const t_button_6 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 11))) as HTMLElement;
+	const t_for_parent_1 = t_next(t_child(t_next(t_child(t_div_1), 3))) as HTMLElement;
+	const t_for_anchor_1 = t_anchor(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1), 3)))))) as HTMLElement;
+
+	/* @for */
+	let t_for_range_1 = t_range();
+	t_run_list(
+		t_for_range_1,
+		t_for_parent_1,
+		t_for_anchor_1,
+		function createNewItems() {
+			let t_new_items: ListItem[] = [];
+			for (let row of $state.data) {
+				t_new_items.push(t_list_item({ row }, row.id));
+				/*t_new_items.push({
+					key: row.id,
+					data: { row }
+				});*/
+			}
+			return t_new_items;
+		},
+		function createListItem(t_item, t_before) {
+			let t_old_range_1 = t_push_range(t_item, true);
+			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <tr> <td class="col-md-1">#</td> <td class="col-md-4"> <a>#</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> `);
+			// @ts-ignore
+			const t_root_1 = t_root(t_fragment_1);
+			const t_tr_1 = t_next(t_root_1) as HTMLElement;
+			const t_text_1 = t_child(t_next(t_child(t_tr_1)));
+			const t_a_1 = t_next(t_child(t_next(t_child(t_tr_1), 3))) as HTMLElement;
+			const t_text_2 = t_child(t_a_1);
+			const t_a_2 = t_next(t_child(t_next(t_child(t_tr_1), 5))) as HTMLElement;
+			// @ts-ignore
+			const t_text_3 = t_next(t_tr_1);
+			$run(function setClasses() {
+				t_tr_1.className = t_class({ danger: $state.selected === t_item.data.row.id });
+			});
+			$run(function setTextContent() {
+				t_text_1.textContent = t_fmt(t_item.data.row.id);
+			});
+			t_event(t_a_1, "click", () => $state.selected = t_item.data.row.id);
+			$run(function setTextContent() {
+				t_text_2.textContent = ` ${t_fmt(t_item.data.row.label)} `;
+			});
+			t_event(t_a_2, "click", () => remove(t_item.data.row));
+			t_add_fragment(t_fragment_1, t_for_parent_1, t_before);
+			t_next(t_text_3);
+			t_pop_range(t_old_range_1);
+		}
+	);
+
+	t_event(t_button_1, "click", create);
+	t_event(t_button_2, "click", createLots);
+	t_event(t_button_3, "click", append);
+	t_event(t_button_4, "click", partialUpdate);
+	t_event(t_button_5, "click", clear);
+	t_event(t_button_6, "click", swapRows);
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/bench/components/output/Bench-server.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/bench/components/temp/{Bench-client-5fee290225ae4771aa847360006123671e8f17f1.ts → Bench-client-fca94b485c6263778751927240ab3ca4048d7a10.ts}

@@ -141,14 +141,14 @@ export default function Bench(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<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> <!> </tbody> </table> <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_button_1 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))) as HTMLElement;
-	const t_button_2 = t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))))) as HTMLElement;
-	const t_button_3 = t_next(t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))))))) as HTMLElement;
-	const t_button_4 = t_next(t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))))))))) as HTMLElement;
-	const t_button_5 = t_next(t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))))))))))) as HTMLElement;
-	const t_button_6 = t_next(t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_next(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1)))))))))))))))))))))))) as HTMLElement;
-	const t_for_parent_1 = t_next(t_child(t_next(t_next(t_next(t_child(t_div_1)))))) as HTMLElement;
-	const t_for_anchor_1 = t_anchor(t_next(t_child(t_for_parent_1))) as HTMLElement;
+	const t_button_1 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3))))))) as HTMLElement;
+	const t_button_2 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 3))) as HTMLElement;
+	const t_button_3 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 5))) as HTMLElement;
+	const t_button_4 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 7))) as HTMLElement;
+	const t_button_5 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 9))) as HTMLElement;
+	const t_button_6 = t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1))))), 3)))), 11))) as HTMLElement;
+	const t_for_parent_1 = t_next(t_child(t_next(t_child(t_div_1), 3))) as HTMLElement;
+	const t_for_anchor_1 = t_anchor(t_next(t_child(t_next(t_child(t_next(t_child(t_div_1), 3)))))) as HTMLElement;
 
 	/* @for */
 	let t_for_range_1 = t_range();
@@ -174,9 +174,9 @@ export default function Bench(
 			const t_root_1 = t_root(t_fragment_1);
 			const t_tr_1 = t_next(t_root_1) as HTMLElement;
 			const t_text_1 = t_child(t_next(t_child(t_tr_1)));
-			const t_a_1 = t_next(t_child(t_next(t_next(t_next(t_child(t_tr_1)))))) as HTMLElement;
+			const t_a_1 = t_next(t_child(t_next(t_child(t_tr_1), 3))) as HTMLElement;
 			const t_text_2 = t_child(t_a_1);
-			const t_a_2 = t_next(t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_tr_1)))))))) as HTMLElement;
+			const t_a_2 = t_next(t_child(t_next(t_child(t_tr_1), 5))) as HTMLElement;
 			// @ts-ignore
 			const t_text_3 = t_next(t_tr_1);
 			$run(function setClasses() {

package/test/bind/bind.test.ts

@@ -30,8 +30,6 @@ test("bind text value -- hydrated", async () => {
 });
 
 async function check(container: HTMLElement) {
-	const user = userEvent.setup();
-
 	const input = container.getElementsByTagName("input")[0];
 	const select = container.getElementsByTagName("select")[0];
 	const para = container.getElementsByTagName("p")[0];
@@ -45,9 +43,9 @@ async function check(container: HTMLElement) {
 	expect(para2).toHaveTextContent("You have selected, 1");
 
 	// Update the input value
-	await user.clear(input);
-	await user.type(input, "Bob");
-	await user.selectOptions(select, "2");
+	await userEvent.clear(input);
+	await userEvent.type(input, "Bob");
+	await userEvent.selectOptions(select, "2");
 
 	expect(input).toHaveValue("Bob");
 	expect(para).toHaveTextContent("Hello, Bob");

package/test/bind/component.test.ts

@@ -0,0 +1,45 @@
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, expect, test } from "vitest";
+import buildOutputFiles from "../buildOutputFiles";
+import hydrateComponent from "../hydrateComponent";
+import importComponent from "../importComponent";
+import mountComponent from "../mountComponent";
+
+const componentPath = "./test/bind/components/BindComponent";
+
+beforeAll(() => {
+	buildOutputFiles(componentPath);
+});
+
+test("bind component value -- mounted", async () => {
+	const container = document.createElement("div");
+	const component = await importComponent(componentPath, "client");
+	mountComponent(container, component);
+
+	await check(container);
+});
+
+test("bind component value -- hydrated", async () => {
+	const container = document.createElement("div");
+	const clientComponent = await importComponent(componentPath, "client");
+	const serverComponent = await importComponent(componentPath, "server");
+	hydrateComponent(container, clientComponent, serverComponent);
+
+	await check(container);
+});
+
+async function check(container: HTMLElement) {
+	const input = container.getElementsByTagName("input")[0];
+	const para = container.getElementsByTagName("p")[0];
+
+	expect(input).toHaveValue("Alice");
+	expect(para).toHaveTextContent("Hello, Alice");
+
+	// Update the input value
+	await userEvent.clear(input);
+	await userEvent.type(input, "Bob");
+
+	expect(input).toHaveValue("Bob");
+	expect(para).toHaveTextContent("Hello, Bob");
+}

package/test/bind/components/BindComponent.torp

@@ -0,0 +1,29 @@
+export default function BindComponent() {
+	let $state = $watch({ name: "Alice", selected: 1 });
+
+	@render {
+		<div>
+			@// t_name_changed = (value) => $state.name = value;
+			<BindText &name={$state.name} />
+			<p>Hello, {$state.name}</p>
+		</div>
+	}
+}
+
+function BindText($props: any) {
+	//let $state = $watch({
+	//	text: $props.name
+	//})
+
+	// $run(() => t_name_changed($props.name))
+
+	//$run(() => {
+	//	$props.name = $state.text
+	//});
+
+	@render {
+		<div>
+			<input &value={$props.name} />
+		</div>
+	}
+}

package/test/bind/components/BindText.torp

@@ -3,8 +3,8 @@ export default function BindText() {
 
 	@render {
 		<div>
-			<input :value={$state.name} />
-			<select :value={$state.selected}>
+			<input &value={$state.name} />
+			<select &value={$state.selected}>
 				<option value=0>First</option>
 				<option value=1>Second</option>
 				<option value=2>Third</option>