@torpor/view 0.0.14 → 0.1.0

package/test/party/components/output/FunnyButton-client.ts

@@ -30,7 +30,7 @@ export default function FunnyButton(
 		// @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_button_1, t_slot_anchor_1);
 		t_next(t_text_1);
 	}

package/test/party/components/output/FunnyButtonApp-client.ts

@@ -6,7 +6,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import FunnyButton from "./FunnyButton-client";
+import FunnyButton from "../output/./FunnyButton-client";
 
 export default function FunnyButtonApp(
 	$parent: ParentNode,
@@ -29,7 +29,7 @@ export default function FunnyButtonApp(
 
 	/* @component */
 	FunnyButton(t_div_1, t_comp_anchor_1, undefined, $context);
-	const t_comp_anchor_2 = t_anchor(t_next(t_next(t_comp_anchor_1))) as HTMLElement;
+	const t_comp_anchor_2 = t_anchor(t_next(t_comp_anchor_1, 2)) as HTMLElement;
 
 	/* @component */
 	const t_slots_1: Record<string, SlotRender> = {};

package/test/party/components/output/FunnyButtonApp-server.ts

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

package/test/party/components/output/InputFocused-client.ts

@@ -1,7 +1,6 @@
 import $mount from "../../../../src/render/$mount";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
-import t_flush from "../../../../src/render/flushMountEffects";
 import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
@@ -34,5 +33,4 @@ export default function InputFocused(
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_input_1);
 
-	t_flush();
 }

package/test/party/components/output/InputFocused-server.ts

@@ -19,7 +19,7 @@ export default function InputFocused(
 
 	/* User interface */
 	let $output = "";
-	$output += `<input self="${t_attr(inputElement) || ""}">`;
+	$output += `<input ref="${t_attr(inputElement) || ""}">`;
 
 	return $output;
 }

package/test/party/components/output/InputHello-client.ts

@@ -31,7 +31,7 @@ export default function InputHello(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.text);
 	});

package/test/party/components/output/IsAvailable-client.ts

@@ -31,7 +31,7 @@ export default function IsAvailable(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.isAvailable ? "Available" : "Not available");
 	});

package/test/party/components/output/PickPill-client.ts

@@ -31,8 +31,8 @@ export default function PickPill(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
-	const t_input_2 = t_next(t_next(t_next(t_next(t_input_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
+	const t_input_2 = t_next(t_input_1, 4) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = `Picked: ${t_fmt($state.picked)}`;
 	});

package/test/party/components/output/TrafficLight-client.ts

@@ -43,9 +43,9 @@ export default function TrafficLight(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_button_1 = t_next(t_child(t_div_1)) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_next(t_button_1)));
-	const t_if_parent_1 = t_next(t_next(t_next(t_next(t_button_1)))) as HTMLElement;
-	const t_if_anchor_1 = t_anchor(t_next(t_child(t_if_parent_1))) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_button_1, 2));
+	const t_if_parent_1 = t_next(t_button_1, 4) as HTMLElement;
+	const t_if_anchor_1 = t_anchor(t_next(t_child(t_next(t_button_1, 4)))) as HTMLElement;
 
 	/* @if */
 	const t_if_range_1 = t_range();
@@ -56,7 +56,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_1 = t_root(t_fragment_1);
 				// @ts-ignore
-				const t_text_2 = t_next(t_next(t_root_1));
+				const t_text_2 = t_next(t_root_1, 2);
 				t_add_fragment(t_fragment_1, t_if_parent_1, t_before);
 				t_next(t_text_2);
 			});
@@ -67,7 +67,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_2 = t_root(t_fragment_2);
 				// @ts-ignore
-				const t_text_3 = t_next(t_next(t_root_2));
+				const t_text_3 = t_next(t_root_2, 2);
 				t_add_fragment(t_fragment_2, t_if_parent_1, t_before);
 				t_next(t_text_3);
 			});
@@ -78,7 +78,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_3 = t_root(t_fragment_3);
 				// @ts-ignore
-				const t_text_4 = t_next(t_next(t_root_3));
+				const t_text_4 = t_next(t_root_3, 2);
 				t_add_fragment(t_fragment_3, t_if_parent_1, t_before);
 				t_next(t_text_4);
 			});

package/test/party/components/output/UserProfile-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";
@@ -21,7 +22,7 @@ export default function UserProfile(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -30,9 +31,9 @@ export default function UserProfile(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
-	const t_text_3 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))));
-	const t_text_4 = t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))))));
+	const t_text_2 = t_child(t_next(t_child(t_div_1), 3));
+	const t_text_3 = t_child(t_next(t_child(t_div_1), 5));
+	const t_text_4 = t_child(t_next(t_child(t_div_1), 7));
 	$run(function setTextContent() {
 		t_text_1.textContent = `My name is ${t_fmt($props.name)}!`;
 	});

package/test/party/components/output/UserProfile-server.ts

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

package/test/party/components/output/UserProfileApp-client.ts

@@ -1,11 +1,12 @@
 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_fragment from "../../../../src/render/getFragment";
 import t_root from "../../../../src/render/nodeRoot";
 
-import UserProfile from "./UserProfile-client";
+import UserProfile from "../output/./UserProfile-client";
 
 export default function UserProfileApp(
 	$parent: ParentNode,
@@ -27,7 +28,7 @@ export default function UserProfileApp(
 	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"] = "John";
 	$run(function setProp() {
 		t_props_1["age"] = 20;

package/test/party/components/output/UserProfileApp-server.ts

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

package/test/party/components/output/UserProfileContext-client.ts

@@ -28,9 +28,9 @@ export default function UserProfileContext(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <h2>My Profile</h2> <p>#</p> <p>#</p> <button> Update username to Jane </button> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_text_1 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))));
-	const t_button_1 = t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))))) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_child(t_div_1), 3));
+	const t_text_2 = t_child(t_next(t_child(t_div_1), 5));
+	const t_button_1 = t_next(t_child(t_div_1), 7) as HTMLElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = `Username: ${t_fmt($context.user.username)}`;
 	});

package/test/party/components/output/UserProfileContextApp-client.ts

@@ -10,7 +10,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import UserProfileContext from "./UserProfileContext-client";
+import UserProfileContext from "../output/./UserProfileContext-client";
 
 export default function UserProfileContextApp(
 	$parent: ParentNode,
@@ -39,7 +39,7 @@ export default function UserProfileContextApp(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_comp_anchor_1 = t_anchor(t_next(t_next(t_next(t_child(t_div_1))))) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1), 3)) as HTMLElement;
 
 	/* @component */
 	UserProfileContext(t_div_1, t_comp_anchor_1, undefined, $context);

package/test/party/components/output/UserProfileContextApp-server.ts

@@ -3,7 +3,7 @@ import $watch from "../../../../src/render/$serverWatch";
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_fmt from "../../../../src/render/formatText";
 
-import UserProfileContext from "./UserProfileContext-server";
+import UserProfileContext from "../output/./UserProfileContext-server";
 
 export default function UserProfileContextApp(
 	// @ts-ignore

package/test/party/components/temp/{AnswerButton-client-243454cd7bf84c648f244b3587e60d01a0401039.ts → AnswerButton-client-c3dc7edbfff2db1ea111086002147d771ee12193.ts}

@@ -1,3 +1,4 @@
+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";
@@ -15,7 +16,7 @@ export default function AnswerButton(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -24,7 +25,7 @@ export default function AnswerButton(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_button_1 = t_next(t_child(t_div_1)) as HTMLElement;
-	const t_button_2 = t_next(t_next(t_button_1)) as HTMLElement;
+	const t_button_2 = t_next(t_button_1, 2) as HTMLElement;
 	t_event(t_button_1, "click", $props.onYes);
 	t_event(t_button_2, "click", $props.onNo);
 	t_add_fragment(t_fragment_0, $parent, $anchor);

package/test/party/components/temp/{AnswerButton-server-938e46c1d2510ea37454854ef527e4aa64eb8e52.ts → AnswerButton-server-427442fa8cfc0a18817c2d37f9cb5cbcb3a88a05.ts}

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

package/test/party/components/temp/{AnswerButtonApp-client-34311c2e7412807867fb6267af31a341f092bf31.ts → AnswerButtonApp-client-3e0b63a6bbc1dee3e6cb715c0297cc2ce58d3e4e.ts}

@@ -9,7 +9,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import AnswerButton from "../output/AnswerButton-client";
+import AnswerButton from "../output/./AnswerButton-client";
 
 export default function AnswerButtonApp(
 	$parent: ParentNode,
@@ -40,10 +40,10 @@ export default function AnswerButtonApp(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <p>Are you happy?</p> <!> <p style="font-size: 50px;">#</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_next(t_next(t_child(t_div_1))))) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1), 3)) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	const t_props_1: any = $watch({});
 	$run(function setProp() {
 		t_props_1["onYes"] = onAnswerYes;
 	});
@@ -51,7 +51,7 @@ export default function AnswerButtonApp(
 		t_props_1["onNo"] = onAnswerNo;
 	});
 	AnswerButton(t_div_1, t_comp_anchor_1, t_props_1, $context);
-	const t_text_1 = t_child(t_next(t_next(t_comp_anchor_1)));
+	const t_text_1 = t_child(t_next(t_comp_anchor_1, 2));
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.isHappy ? "😀" : "😥");
 	});

package/test/party/components/temp/{AnswerButtonApp-server-3f5071775abea24ee8830830072c6fe465fc4e56.ts → AnswerButtonApp-server-bbc8bb739d2060ccda77ce406aa6b15d8f90b91c.ts}

@@ -2,7 +2,7 @@ import $watch from "../../../../src/render/$serverWatch";
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_fmt from "../../../../src/render/formatText";
 
-import AnswerButton from "../output/AnswerButton-server";
+import AnswerButton from "../output/./AnswerButton-server";
 
 export default function AnswerButtonApp(
 	// @ts-ignore

package/test/party/components/temp/{ColorSelect-client-f9fb9fa09f4729da3226d5aaf30e84cd3cd705b5.ts → ColorSelect-client-5ffa6f9d77de967993088c9a01b9f976f3333176.ts}

@@ -46,7 +46,7 @@ export default function ColorSelect(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_select_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_select_1 = t_next(t_child(t_div_1), 3) as HTMLElement;
 	const t_for_anchor_1 = t_anchor(t_next(t_child(t_select_1))) as HTMLElement;
 
 	/* @for */

package/test/party/components/temp/{Colors-client-f124162d1dd8f0c3d37bf96c8e5f18599ae3a682.ts → Colors-client-3dafffc5c2a72037f4419fc45d08963872a29958.ts}

@@ -59,7 +59,7 @@ export default function Colors(
 			const t_root_1 = t_root(t_fragment_1);
 			const t_text_1 = t_child(t_next(t_root_1));
 			// @ts-ignore
-			const t_text_2 = t_next(t_next(t_root_1));
+			const t_text_2 = t_next(t_root_1, 2);
 			$run(function setTextContent() {
 				t_text_1.textContent = t_fmt(t_item.data.color);
 			});

package/test/party/components/temp/{Counter-client-c349710110b4afbf9593f20cfc40c162ed836079.ts → Counter-client-4d553521fcfc6c9a4e05dce89e70b2ecf8785c4e.ts}

@@ -35,7 +35,7 @@ export default function Counter(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_button_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_button_1 = t_next(t_child(t_div_1), 3) as HTMLElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = `Counter: ${t_fmt($state.count)}`;
 	});

package/test/party/components/temp/{FunnyButton-client-2e6bec8259065b5bc9ae16d1ca93dd1bd0c56b7c.ts → FunnyButton-client-45f2c5dd56f2cdb80102193a978df6b0cec822ab.ts}

@@ -30,7 +30,7 @@ export default function FunnyButton(
 		// @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_button_1, t_slot_anchor_1);
 		t_next(t_text_1);
 	}

package/test/party/components/temp/{FunnyButtonApp-client-4ed0ebf5be13ddb62d9942bac7f4b8a885ec6c50.ts → FunnyButtonApp-client-ac7101af922dc6ba472b75a428f340caca6be74a.ts}

@@ -6,7 +6,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import FunnyButton from "../output/FunnyButton-client";
+import FunnyButton from "../output/./FunnyButton-client";
 
 export default function FunnyButtonApp(
 	$parent: ParentNode,
@@ -29,7 +29,7 @@ export default function FunnyButtonApp(
 
 	/* @component */
 	FunnyButton(t_div_1, t_comp_anchor_1, undefined, $context);
-	const t_comp_anchor_2 = t_anchor(t_next(t_next(t_comp_anchor_1))) as HTMLElement;
+	const t_comp_anchor_2 = t_anchor(t_next(t_comp_anchor_1, 2)) as HTMLElement;
 
 	/* @component */
 	const t_slots_1: Record<string, SlotRender> = {};

package/test/party/components/temp/{FunnyButtonApp-server-9748c9096848e643c91237c46ea09d23f1b3fa7c.ts → FunnyButtonApp-server-f1a98a946e0bb9d1bb76b01e26d6ead8f55d32bb.ts}

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

package/test/party/components/temp/{InputFocused-client-a543f82c8db205fb3e33c62de699cff43c668a68.ts → InputFocused-client-11a9cb08909b26945bbc2451ab4c1dac09e6d113.ts}

@@ -1,7 +1,6 @@
 import $mount from "../../../../src/render/$mount";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
-import t_flush from "../../../../src/render/flushMountEffects";
 import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
@@ -34,5 +33,4 @@ export default function InputFocused(
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_input_1);
 
-	t_flush();
 }

package/test/party/components/temp/{InputFocused-server-222f2fa7029d1cd6941a3777293a9b2d37b7295e.ts → InputFocused-server-82be1a63c80d1dd3f06efaf0bef349d58cf1d9af.ts}

@@ -19,7 +19,7 @@ export default function InputFocused(
 
 	/* User interface */
 	let $output = "";
-	$output += `<input self="${t_attr(inputElement) || ""}">`;
+	$output += `<input ref="${t_attr(inputElement) || ""}">`;
 
 	return $output;
 }

package/test/party/components/temp/{InputHello-client-9953499de5778bb1d8aac7691129210a6098db07.ts → InputHello-client-b0453caeae0d43dc1878039c6b49318d12624d48.ts}

@@ -31,7 +31,7 @@ export default function InputHello(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.text);
 	});

package/test/party/components/temp/{IsAvailable-client-929ed6c872e72b6c5243b882c6a9a0d13f6a7c47.ts → IsAvailable-client-d789346a68b26fd3f5d9f7aebc4c7bd181c47cad.ts}

@@ -31,7 +31,7 @@ export default function IsAvailable(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.isAvailable ? "Available" : "Not available");
 	});

package/test/party/components/temp/{PickPill-client-f9a50a75ce63ec2ee3ac34e378e20602b93629f7.ts → PickPill-client-b47d371ae5f41d87c96b3cdeed0a8bc06fbfa9c7.ts}

@@ -31,8 +31,8 @@ export default function PickPill(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLInputElement;
-	const t_input_2 = t_next(t_next(t_next(t_next(t_input_1)))) as HTMLInputElement;
+	const t_input_1 = t_next(t_child(t_div_1), 3) as HTMLInputElement;
+	const t_input_2 = t_next(t_input_1, 4) as HTMLInputElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = `Picked: ${t_fmt($state.picked)}`;
 	});

package/test/party/components/temp/{TrafficLight-client-81dd9bd9f3332533e01f6c9b271c15e5f76e1fdb.ts → TrafficLight-client-549f9fe3418c113fb240cfa17e09c42e1e7f346a.ts}

@@ -43,9 +43,9 @@ export default function TrafficLight(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_button_1 = t_next(t_child(t_div_1)) as HTMLElement;
-	const t_text_1 = t_child(t_next(t_next(t_button_1)));
-	const t_if_parent_1 = t_next(t_next(t_next(t_next(t_button_1)))) as HTMLElement;
-	const t_if_anchor_1 = t_anchor(t_next(t_child(t_if_parent_1))) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_button_1, 2));
+	const t_if_parent_1 = t_next(t_button_1, 4) as HTMLElement;
+	const t_if_anchor_1 = t_anchor(t_next(t_child(t_next(t_button_1, 4)))) as HTMLElement;
 
 	/* @if */
 	const t_if_range_1 = t_range();
@@ -56,7 +56,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_1 = t_root(t_fragment_1);
 				// @ts-ignore
-				const t_text_2 = t_next(t_next(t_root_1));
+				const t_text_2 = t_next(t_root_1, 2);
 				t_add_fragment(t_fragment_1, t_if_parent_1, t_before);
 				t_next(t_text_2);
 			});
@@ -67,7 +67,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_2 = t_root(t_fragment_2);
 				// @ts-ignore
-				const t_text_3 = t_next(t_next(t_root_2));
+				const t_text_3 = t_next(t_root_2, 2);
 				t_add_fragment(t_fragment_2, t_if_parent_1, t_before);
 				t_next(t_text_3);
 			});
@@ -78,7 +78,7 @@ export default function TrafficLight(
 				// @ts-ignore
 				const t_root_3 = t_root(t_fragment_3);
 				// @ts-ignore
-				const t_text_4 = t_next(t_next(t_root_3));
+				const t_text_4 = t_next(t_root_3, 2);
 				t_add_fragment(t_fragment_3, t_if_parent_1, t_before);
 				t_next(t_text_4);
 			});

package/test/party/components/temp/{UserProfile-client-938bcef20a2555de22aca939022a32742ac5e729.ts → UserProfile-client-2c13aac1ad915e51dc557f9af765669e636c0fea.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";
@@ -21,7 +22,7 @@ export default function UserProfile(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -30,9 +31,9 @@ export default function UserProfile(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
-	const t_text_3 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))));
-	const t_text_4 = t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))))));
+	const t_text_2 = t_child(t_next(t_child(t_div_1), 3));
+	const t_text_3 = t_child(t_next(t_child(t_div_1), 5));
+	const t_text_4 = t_child(t_next(t_child(t_div_1), 7));
 	$run(function setTextContent() {
 		t_text_1.textContent = `My name is ${t_fmt($props.name)}!`;
 	});

package/test/party/components/temp/{UserProfile-server-9df5c59b8797fa67c479bc76450104d45e6076f9.ts → UserProfile-server-cc1162a4297f6163bfb86e7a8aeea08e8c0625c6.ts}

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

package/test/party/components/temp/{UserProfileApp-client-af27173415d65647cab0f30a9a4967cef0307e25.ts → UserProfileApp-client-2be7a11319cca4d7bfa0f3d2205c441d7e203780.ts}

@@ -1,11 +1,12 @@
 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_fragment from "../../../../src/render/getFragment";
 import t_root from "../../../../src/render/nodeRoot";
 
-import UserProfile from "../output/UserProfile-client";
+import UserProfile from "../output/./UserProfile-client";
 
 export default function UserProfileApp(
 	$parent: ParentNode,
@@ -27,7 +28,7 @@ export default function UserProfileApp(
 	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"] = "John";
 	$run(function setProp() {
 		t_props_1["age"] = 20;

package/test/party/components/temp/{UserProfileApp-server-6a7dbe68ee8041785cef50fb15a9e5ba475e120f.ts → UserProfileApp-server-ab9ff66f787f775aa8571314fee8bcbef85489ef.ts}

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

package/test/party/components/temp/{UserProfileContext-client-93211cdba795b8baf926f60f5b17da90701743b3.ts → UserProfileContext-client-2aa36f436a5f20614d77f48963ec5ca442eebd90.ts}

@@ -28,9 +28,9 @@ export default function UserProfileContext(
 	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <h2>My Profile</h2> <p>#</p> <p>#</p> <button> Update username to Jane </button> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_text_1 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))));
-	const t_button_1 = t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))))) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_child(t_div_1), 3));
+	const t_text_2 = t_child(t_next(t_child(t_div_1), 5));
+	const t_button_1 = t_next(t_child(t_div_1), 7) as HTMLElement;
 	$run(function setTextContent() {
 		t_text_1.textContent = `Username: ${t_fmt($context.user.username)}`;
 	});

package/test/party/components/temp/{UserProfileContextApp-client-7ea7d90a35894408757aef3e935d3a8badf93aea.ts → UserProfileContextApp-client-5099052fdcd8fb4c368c45090390947424a4e9b0.ts}

@@ -10,7 +10,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import UserProfileContext from "../output/UserProfileContext-client";
+import UserProfileContext from "../output/./UserProfileContext-client";
 
 export default function UserProfileContextApp(
 	$parent: ParentNode,
@@ -39,7 +39,7 @@ export default function UserProfileContextApp(
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_text_1 = t_child(t_next(t_child(t_div_1)));
-	const t_comp_anchor_1 = t_anchor(t_next(t_next(t_next(t_child(t_div_1))))) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1), 3)) as HTMLElement;
 
 	/* @component */
 	UserProfileContext(t_div_1, t_comp_anchor_1, undefined, $context);

package/test/party/components/temp/{UserProfileContextApp-server-90290c770529d7211eabf29e7d0fe868aa856b52.ts → UserProfileContextApp-server-6be8dab2ed4f8911f26bef137e7dea164f2b894d.ts}

@@ -3,7 +3,7 @@ import $watch from "../../../../src/render/$serverWatch";
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_fmt from "../../../../src/render/formatText";
 
-import UserProfileContext from "../output/UserProfileContext-server";
+import UserProfileContext from "../output/./UserProfileContext-server";
 
 export default function UserProfileContextApp(
 	// @ts-ignore

package/test/props/components/Reactive.torp

@@ -0,0 +1,18 @@
+export default function Reactive($props: any) {
+	let $state = $watch({ text: "before" })
+
+	@render {
+		<div>
+			<button onclick={() => $state.text = "after"}>Update text</button>
+			<Child text={$state.text} />
+		</div>
+	}
+}
+
+function Child($props: any) {
+	@render {
+		<p>
+			{$props.text}
+		</p>
+	}
+}