@torpor/view 0.0.13 → 0.1.0

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>
+	}
+}

package/test/props/components/output/Reactive-client.ts

@@ -0,0 +1,70 @@
+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 Reactive(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+
+	let $state = $watch({ text: "before" })
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <button>Update text</button> <!> </div>`);
+	// @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_comp_anchor_1 = t_anchor(t_next(t_button_1, 2)) as HTMLElement;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setProp() {
+		t_props_1["text"] = $state.text;
+	});
+	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
+	t_event(t_button_1, "click", () => $state.text = "after");
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}
+
+function Child(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<p>#</p>`);
+	// @ts-ignore
+	const t_p_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_text_1 = t_child(t_p_1);
+	$run(function setTextContent() {
+		t_text_1.textContent = ` ${t_fmt($props.text)} `;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_p_1);
+
+}

package/test/props/components/output/Reactive-server.ts

@@ -0,0 +1,40 @@
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Reactive(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let $state = $watch({ text: "before" })
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <button>Update text</button> `;
+	const t_props_1: any = {};
+	t_props_1["text"] = $state.text;
+
+	$output += Child(t_props_1, $context)
+	$output += ` </div>`;
+
+	return $output;
+}
+
+function Child(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += `<p> ${t_fmt($props.text)} </p>`;
+
+	return $output;
+}

package/test/props/components/temp/Reactive-client-e3e5f6ee2f22c46337c6ab1df2f241133c7e2646.ts

@@ -0,0 +1,70 @@
+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 Reactive(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+
+	let $state = $watch({ text: "before" })
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <button>Update text</button> <!> </div>`);
+	// @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_comp_anchor_1 = t_anchor(t_next(t_button_1, 2)) as HTMLElement;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setProp() {
+		t_props_1["text"] = $state.text;
+	});
+	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
+	t_event(t_button_1, "click", () => $state.text = "after");
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}
+
+function Child(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<p>#</p>`);
+	// @ts-ignore
+	const t_p_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_text_1 = t_child(t_p_1);
+	$run(function setTextContent() {
+		t_text_1.textContent = ` ${t_fmt($props.text)} `;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_p_1);
+
+}

package/test/props/components/temp/Reactive-server-0914d91287a1bc6d32d7cc56d086624762dbfc04.ts

@@ -0,0 +1,40 @@
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Reactive(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let $state = $watch({ text: "before" })
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <button>Update text</button> `;
+	const t_props_1: any = {};
+	t_props_1["text"] = $state.text;
+
+	$output += Child(t_props_1, $context)
+	$output += ` </div>`;
+
+	return $output;
+}
+
+function Child(
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += `<p> ${t_fmt($props.text)} </p>`;
+
+	return $output;
+}

package/test/props/reactive.test.ts

@@ -0,0 +1,51 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, expect, test } from "vitest";
+import { $watch } from "../../src";
+import buildOutputFiles from "../buildOutputFiles";
+import hydrateComponent from "../hydrateComponent";
+import importComponent from "../importComponent";
+import mountComponent from "../mountComponent";
+
+const componentPath = "./test/props/components/Reactive";
+
+beforeAll(() => {
+	buildOutputFiles(componentPath);
+});
+
+interface State {
+	text: string;
+}
+
+test("props reactive -- mounted", async () => {
+	let $state = $watch({ text: "before" });
+
+	const container = document.createElement("div");
+	const component = await importComponent(componentPath, "client");
+	mountComponent(container, component, $state);
+
+	check(container, $state);
+});
+
+test("props reactive -- hydrated", async () => {
+	let $state = $watch({ text: "before" });
+
+	const container = document.createElement("div");
+	const clientComponent = await importComponent(componentPath, "client");
+	const serverComponent = await importComponent(componentPath, "server");
+	hydrateComponent(container, clientComponent, serverComponent, $state);
+
+	check(container, $state);
+});
+
+async function check(container: HTMLElement, $state: State) {
+	expect(queryByText(container, "before")).toBeInTheDocument();
+
+	await userEvent.click(getByText(container, "Update text"));
+
+	$state.text = "after";
+
+	expect(queryByText(container, "before")).not.toBeInTheDocument();
+	expect(queryByText(container, "after")).toBeInTheDocument();
+}

package/test/replace/components/output/Replace-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";
@@ -20,7 +21,7 @@ export default function Replace(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	let counter = 0;
 
@@ -42,7 +43,7 @@ export default function Replace(
 			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 = `The replace count is ${t_fmt(counter++)}.`;
 			});

package/test/replace/components/output/Replace-server.ts

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

package/test/replace/components/temp/{Replace-client-ea4ddc73c71181fb6ef3c6f5bf61b0b9e017f00a.ts → Replace-client-3fdab63871fa4bb792317caefd3539b1888325b1.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";
@@ -20,7 +21,7 @@ export default function Replace(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	let counter = 0;
 
@@ -42,7 +43,7 @@ export default function Replace(
 			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 = `The replace count is ${t_fmt(counter++)}.`;
 			});

package/test/replace/components/temp/{Replace-server-30eb1ad796516fa4d310798a9c8a6811ec13cbd9.ts → Replace-server-857aca7a58deffc3a1c95ab9d31628b4051ca203.ts}

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

package/test/slots/components/output/Article-client.ts

@@ -27,11 +27,11 @@ export default function Article(
 	if ($slots && $slots["header"]) {
 		$slots["header"](t_slot_parent_1, t_slot_anchor_1, undefined, $context)
 	}
-	const t_slot_anchor_2 = t_anchor(t_next(t_next(t_slot_parent_1))) as HTMLElement;
+	const t_slot_anchor_2 = t_anchor(t_next(t_slot_parent_1, 2)) as HTMLElement;
 	if ($slots && $slots["_"]) {
 		$slots["_"](t_section_1, t_slot_anchor_2, undefined, $context)
 	}
-	const t_slot_anchor_3 = t_anchor(t_next(t_next(t_slot_anchor_2))) as HTMLElement;
+	const t_slot_anchor_3 = t_anchor(t_next(t_slot_anchor_2, 2)) as HTMLElement;
 	if ($slots && $slots["footer"]) {
 		$slots["footer"](t_section_1, t_slot_anchor_3, undefined, $context)
 	}

package/test/slots/components/output/Basic-client.ts

@@ -5,7 +5,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import Header from "./Header-client"
+import Header from "../output/./Header-client"
 
 export default function Basic(
 	$parent: ParentNode,

package/test/slots/components/output/Basic-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 Basic(
 	// @ts-ignore

package/test/slots/components/output/Let-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";
@@ -7,7 +8,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import List from "./List-client"
+import List from "../output/./List-client"
 
 export default function Let(
 	$parent: ParentNode,
@@ -18,7 +19,7 @@ export default function Let(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -29,7 +30,7 @@ export default function Let(
 	const t_comp_anchor_1 = t_anchor(t_root_0) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	const t_props_1: any = $watch({});
 	$run(function setProp() {
 		t_props_1["items"] = $props.items;
 	});

package/test/slots/components/output/Let-server.ts

@@ -1,7 +1,7 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_fmt from "../../../../src/render/formatText";
 
-import List from "./List-server"
+import List from "../output/./List-server"
 
 export default function Let(
 	$props: any,
@@ -10,6 +10,7 @@ export default function Let(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";

package/test/slots/components/output/List-client.ts

@@ -22,7 +22,7 @@ export default function List(
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];

package/test/slots/components/output/List-server.ts

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

package/test/slots/components/output/Named-client.ts

@@ -5,7 +5,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import Article from "./Article-client"
+import Article from "../output/./Article-client"
 
 export default function Named(
 	$parent: ParentNode,
@@ -40,7 +40,7 @@ export default function Named(
 		// @ts-ignore
 		const t_root_2 = t_root(t_fragment_2);
 		// @ts-ignore
-		const t_text_1 = t_next(t_next(t_root_2));
+		const t_text_1 = t_next(t_root_2, 2);
 		t_add_fragment(t_fragment_2, $sparent, $sanchor);
 		t_next(t_text_1);
 	}

package/test/slots/components/output/Named-server.ts

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

package/test/slots/components/output/Unused-client.ts

@@ -4,7 +4,7 @@ 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 Unused(
 	$parent: ParentNode,

package/test/slots/components/output/Unused-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 Unused(
 	// @ts-ignore

package/test/slots/components/temp/{Article-client-741f94eab2e96655f4c9d69ccd7d9c7cc998f4ce.ts → Article-client-80848d6cadd8abac61865d14ddd35685844797e0.ts}

@@ -27,11 +27,11 @@ export default function Article(
 	if ($slots && $slots["header"]) {
 		$slots["header"](t_slot_parent_1, t_slot_anchor_1, undefined, $context)
 	}
-	const t_slot_anchor_2 = t_anchor(t_next(t_next(t_slot_parent_1))) as HTMLElement;
+	const t_slot_anchor_2 = t_anchor(t_next(t_slot_parent_1, 2)) as HTMLElement;
 	if ($slots && $slots["_"]) {
 		$slots["_"](t_section_1, t_slot_anchor_2, undefined, $context)
 	}
-	const t_slot_anchor_3 = t_anchor(t_next(t_next(t_slot_anchor_2))) as HTMLElement;
+	const t_slot_anchor_3 = t_anchor(t_next(t_slot_anchor_2, 2)) as HTMLElement;
 	if ($slots && $slots["footer"]) {
 		$slots["footer"](t_section_1, t_slot_anchor_3, undefined, $context)
 	}

package/test/slots/components/temp/{Basic-client-c82bc3c5e10f2f2c1869347435262c8f3039e32f.ts → Basic-client-97b18686412869e8c814fd4542dfe826b1f7669f.ts}

@@ -5,7 +5,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import Header from "../output/Header-client"
+import Header from "../output/./Header-client"
 
 export default function Basic(
 	$parent: ParentNode,

package/test/slots/components/temp/{Basic-server-21fb4f8caa3bbcae219aaef388af8c26c46fa5ce.ts → Basic-server-248392e2cd147b537cd44e9a5a71885ef20102e4.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 Basic(
 	// @ts-ignore

package/test/slots/components/temp/{Let-client-c54696fd1b5b859a693744722957fa960f72fad6.ts → Let-client-be69c1f5aa32faf16239050d7836db46cfdcba2f.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";
@@ -7,7 +8,7 @@ import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
 import t_root from "../../../../src/render/nodeRoot";
 
-import List from "../output/List-client"
+import List from "../output/./List-client"
 
 export default function Let(
 	$parent: ParentNode,
@@ -18,7 +19,7 @@ export default function Let(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -29,7 +30,7 @@ export default function Let(
 	const t_comp_anchor_1 = t_anchor(t_root_0) as HTMLElement;
 
 	/* @component */
-	const t_props_1: any = {};
+	const t_props_1: any = $watch({});
 	$run(function setProp() {
 		t_props_1["items"] = $props.items;
 	});