@torpor/view 0.0.11 → 0.0.13

package/test/importComponent.ts

@@ -1,47 +1,19 @@
-import fg from "fast-glob";
-import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
+import { buildFiles } from "./buildOutputFiles";
 
-export default async function importComponent(componentPath: string, suffix: string) {
-	// Create a file with a hashed suffix to import dynamically in Vite(st)
-	const sourceFile =
-		path.join(path.dirname(componentPath), "output", path.basename(componentPath)) +
-		`-${suffix}.ts`;
-	const hash = await hashFileContents(sourceFile);
-	const destPath = path.join(path.dirname(componentPath), "temp");
-	const destFile = path.join(destPath, `${path.basename(componentPath)}-${suffix}-${hash}.ts`);
-	if (!fs.existsSync(destFile)) {
-		//console.log(`${sourceFile} has changed, copying new version`);
+export default async function importComponent(componentPath: string, suffix: string): Promise<any> {
+	if (!componentPath.endsWith(".torp")) componentPath += ".torp";
+	await buildFiles(componentPath);
 
-		if (!fs.existsSync(destPath)) {
-			fs.mkdirSync(destPath);
-		}
-
-		// Delete old files
-		(
-			await fg(`${path.basename(componentPath)}-${suffix}-*.ts`, {
-				absolute: true,
-				cwd: path.resolve(destPath),
-			})
-		).forEach((f) => fs.unlinkSync(f));
-
-		//fs.copyFileSync(sourceFile, destFile);
-		const source = fs
-			.readFileSync(sourceFile, "utf8")
-			.replaceAll(/import (.+?) from ['"]\.\/(.+?)['"]/g, 'import $1 from "../output/$2"');
-		fs.writeFileSync(destFile, source);
+	const destFolder = path.join(path.dirname(componentPath), "temp");
+	let destFile = fs
+		.readdirSync(destFolder)
+		.find((f) => f.startsWith(`${path.basename(componentPath, ".torp")}-${suffix}-`));
+	if (!destFile) {
+		throw new Error("Component file not found");
 	}
-	return (await import(destFile)).default as any;
-}
+	destFile = path.join(destFolder, destFile);
 
-// From https://stackoverflow.com/a/18658613
-function hashFileContents(path: string): Promise<string> {
-	return new Promise((resolve, reject) => {
-		const hash = crypto.createHash("sha1");
-		const stream = fs.createReadStream(path);
-		stream.on("error", (err) => reject(err));
-		stream.on("data", (chunk) => hash.update(chunk));
-		stream.on("end", () => resolve(hash.digest("hex")));
-	});
+	return (await import(destFile)).default;
 }

package/test/mountComponent.ts

@@ -1,7 +1,11 @@
 import mount from "../src/render/mount";
 import { type Component } from "../src/types/Component";
 
-export default function mountComponent(container: HTMLElement, component: Component, state?: any) {
+export default function mountComponent(
+	container: HTMLElement,
+	component: Component,
+	state?: any,
+): void {
 	container.ownerDocument.body.appendChild(container);
 	mount(container, component, state);
 }

package/test/party/components/temp/AnswerButton-client-243454cd7bf84c648f244b3587e60d01a0401039.ts

@@ -0,0 +1,33 @@
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_child from "../../../../src/render/nodeChild";
+import t_event from "../../../../src/render/addEvent";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function AnswerButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <button>YES</button> <button>NO</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_button_2 = t_next(t_next(t_button_1)) 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);
+	t_next(t_div_1);
+
+}

package/test/party/components/temp/AnswerButton-server-938e46c1d2510ea37454854ef527e4aa64eb8e52.ts

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

package/test/party/components/temp/FunnyButton-client-2e6bec8259065b5bc9ae16d1ca93dd1bd0c56b7c.ts

@@ -0,0 +1,40 @@
+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_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function FunnyButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>
+) {
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<button style=" background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0; "> <!> </button>`);
+	// @ts-ignore
+	const t_button_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_button_1))) as HTMLElement;
+	if ($slots && $slots["_"]) {
+		$slots["_"](t_button_1, t_slot_anchor_1, undefined, $context)
+	} else {
+		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <span>No content found</span> `);
+		// @ts-ignore
+		const t_root_1 = t_root(t_fragment_1);
+		// @ts-ignore
+		const t_text_1 = t_next(t_next(t_root_1));
+		t_add_fragment(t_fragment_1, t_button_1, t_slot_anchor_1);
+		t_next(t_text_1);
+	}
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_button_1);
+
+}

package/test/party/components/temp/FunnyButton-server-e8ab55e47c735f7e42c55d2b7504dfa4190a1b40.ts

@@ -0,0 +1,32 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function FunnyButton(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<button style="
+				background: rgba(0, 0, 0, 0.4);
+				color: #fff;
+				padding: 10px 20px;
+				font-size: 30px;
+				border: 2px solid #fff;
+				margin: 8px; transform: scale(0.9);
+				box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+				transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+				outline: 0;
+			"> <![>`;
+	if ($slots && $slots["_"]) {
+		$output += $slots["_"](undefined, $context);
+	} else {
+		$output += ` <span>No content found</span> `;
+	}
+	$output += `<!]><!> </button>`;
+
+	return $output;
+}

package/test/party/components/temp/Time-client-7ba4ca9322af2cb88a873c812fc776760c337c64.ts

@@ -0,0 +1,47 @@
+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";
+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 Time(
+	$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({
+		time: new Date().toLocaleTimeString()
+	});
+
+	$run(() => {
+		const timer = setInterval(() => {
+			$state.time = new Date().toLocaleTimeString();
+		}, 1000);
+
+		return () => clearInterval(timer);
+	});
+
+	/* 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 = `Current time: ${t_fmt($state.time)}`;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_p_1);
+
+}

package/test/party/components/temp/Time-server-08f66c7f3f32b13de06d75fe679cf58b5727c473.ts

@@ -0,0 +1,31 @@
+import $run from "../../../../src/render/$serverRun";
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Time(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	let $state = $watch({
+		time: new Date().toLocaleTimeString()
+	});
+
+	$run(() => {
+		const timer = setInterval(() => {
+			$state.time = new Date().toLocaleTimeString();
+		}, 1000);
+
+		return () => clearInterval(timer);
+	});
+
+	/* User interface */
+	let $output = "";
+	$output += `<p>Current time: ${t_fmt($state.time)}</p>`;
+
+	return $output;
+}

package/test/party/components/temp/UserProfile-client-938bcef20a2555de22aca939022a32742ac5e729.ts

@@ -0,0 +1,51 @@
+import $run from "../../../../src/render/$run";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_child from "../../../../src/render/nodeChild";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function UserProfile(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: {
+		name: string,
+		age: number,
+		favoriteColors: string[],
+		isAvailable: boolean
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <p>#</p> <p>#</p> <p>#</p> <p>#</p> </div>`);
+	// @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)))))))));
+	$run(function setTextContent() {
+		t_text_1.textContent = `My name is ${t_fmt($props.name)}!`;
+	});
+	$run(function setTextContent() {
+		t_text_2.textContent = `My age is ${t_fmt($props.age)}!`;
+	});
+	$run(function setTextContent() {
+		t_text_3.textContent = `My favourite colors are ${t_fmt($props.favouriteColors.join(", "))}!`;
+	});
+	$run(function setTextContent() {
+		t_text_4.textContent = `I am ${t_fmt($props.isAvailable ? "available" : "not available")}`;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/party/components/temp/UserProfile-server-9df5c59b8797fa67c479bc76450104d45e6076f9.ts

@@ -0,0 +1,22 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function UserProfile(
+	$props: {
+		name: string,
+		age: number,
+		favoriteColors: string[],
+		isAvailable: boolean
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <p>My name is ${t_fmt($props.name)}!</p> <p>My age is ${t_fmt($props.age)}!</p> <p>My favourite colors are ${t_fmt($props.favouriteColors.join(", "))}!</p> <p>I am ${t_fmt($props.isAvailable ? "available" : "not available")}</p> </div>`;
+
+	return $output;
+}

package/test/party/components/temp/UserProfileContext-client-93211cdba795b8baf926f60f5b17da90701743b3.ts

@@ -0,0 +1,44 @@
+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";
+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 UserProfileContext(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$context = Object.assign({}, $context);
+
+	$context.user = $watch($context.user);
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	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;
+	$run(function setTextContent() {
+		t_text_1.textContent = `Username: ${t_fmt($context.user.username)}`;
+	});
+	$run(function setTextContent() {
+		t_text_2.textContent = `Email: ${t_fmt($context.user.email)}`;
+	});
+	t_event(t_button_1, "click", () => ($context.user.username = "Jane"));
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/party/components/temp/UserProfileContext-server-cf58767df1e2d1dde919f59de73cdd9764bbc006.ts

@@ -0,0 +1,20 @@
+import $watch from "../../../../src/render/$serverWatch";
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function UserProfileContext(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$context = Object.assign({}, $context);
+	$context.user = $watch($context.user);
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <h2>My Profile</h2> <p>Username: ${t_fmt($context.user.username)}</p> <p>Email: ${t_fmt($context.user.email)}</p> <button> Update username to Jane </button> </div>`;
+
+	return $output;
+}

package/test/slots/components/temp/Article-client-741f94eab2e96655f4c9d69ccd7d9c7cc998f4ce.ts

@@ -0,0 +1,41 @@
+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_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function Article(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>
+) {
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<section> <h2> <!> </h2> <!> <!> </section>`);
+	// @ts-ignore
+	const t_section_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_slot_parent_1 = t_next(t_child(t_section_1)) as HTMLElement;
+	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_slot_parent_1))) as HTMLElement;
+	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;
+	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;
+	if ($slots && $slots["footer"]) {
+		$slots["footer"](t_section_1, t_slot_anchor_3, undefined, $context)
+	}
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_section_1);
+
+}

package/test/slots/components/temp/Article-server-a6bd47a621cc213db4313eb775a52246541dd203.ts

@@ -0,0 +1,28 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function Article(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<section> <h2> <![>`;
+	if ($slots && $slots["header"]) {
+		$output += $slots["header"](undefined, $context);
+	}
+	$output += `<!]><!> </h2> <![>`;
+	if ($slots && $slots["_"]) {
+		$output += $slots["_"](undefined, $context);
+	}
+	$output += `<!]><!> <![>`;
+	if ($slots && $slots["footer"]) {
+		$output += $slots["footer"](undefined, $context);
+	}
+	$output += `<!]><!> </section>`;
+
+	return $output;
+}

package/test/slots/components/temp/Header-client-e2e1e7d60b48b0841cd0c20224f520330ca96458.ts

@@ -0,0 +1,38 @@
+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_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function Header(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>
+) {
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<h2> <!> </h2>`);
+	// @ts-ignore
+	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_h2_1))) as HTMLElement;
+	if ($slots && $slots["_"]) {
+		$slots["_"](t_h2_1, t_slot_anchor_1, undefined, $context)
+	} else {
+		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` Default header... `);
+		// @ts-ignore
+		const t_text_1 = t_root(t_fragment_1);
+		t_add_fragment(t_fragment_1, t_h2_1, t_slot_anchor_1);
+		t_next(t_text_1);
+	}
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_h2_1);
+
+}

package/test/slots/components/temp/Header-server-1c195508a91c32822da22a08576c8a30c9070636.ts

@@ -0,0 +1,22 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function Header(
+	// @ts-ignore
+	$props?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<h2> <![>`;
+	if ($slots && $slots["_"]) {
+		$output += $slots["_"](undefined, $context);
+	} else {
+		$output += ` Default header... `;
+	}
+	$output += `<!]><!> </h2>`;
+
+	return $output;
+}

package/test/slots/components/temp/List-client-0659d999cfb48b865fe5b8aaaf2a4ddac3a8a8b6.ts

@@ -0,0 +1,76 @@
+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_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 List(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<ul> <!> </ul>`);
+	// @ts-ignore
+	const t_ul_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_for_anchor_1 = t_anchor(t_next(t_child(t_ul_1))) as HTMLElement;
+
+	/* @for */
+	let t_for_range_1 = t_range();
+	t_run_list(
+		t_for_range_1,
+		t_ul_1,
+		t_for_anchor_1,
+		function createNewItems() {
+			let t_new_items: ListItem[] = [];
+			for (let item of $props.items) {
+				t_new_items.push(t_list_item({ item }));
+				/*t_new_items.push({
+					data: { item }
+				});*/
+			}
+			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, ` <li> <!> </li> `);
+			// @ts-ignore
+			const t_root_1 = t_root(t_fragment_1);
+			const t_slot_parent_1 = t_next(t_root_1) as HTMLElement;
+			const t_slot_anchor_1 = t_anchor(t_next(t_child(t_slot_parent_1))) as HTMLElement;
+			const t_sprops_1 = $watch({});
+			$run(function setProp() {
+				t_sprops_1["item"] = t_item.data.item;
+			});
+			if ($slots && $slots["_"]) {
+				$slots["_"](t_slot_parent_1, t_slot_anchor_1, t_sprops_1, $context)
+			}
+			// @ts-ignore
+			const t_text_1 = t_next(t_slot_parent_1);
+			t_add_fragment(t_fragment_1, t_ul_1, t_before);
+			t_next(t_text_1);
+			t_pop_range(t_old_range_1);
+		}
+	);
+
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_ul_1);
+
+}

package/test/slots/components/temp/List-server-4b76485a259d054187edad8aa691d80ac918ad86.ts

@@ -0,0 +1,25 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function List(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<ul> <![>`;
+	for (let item of $props.items) {
+		$output += `<!^> <li> <![>`;
+		const t_sprops_1: any = {};
+		t_sprops_1["item"] = item;
+		if ($slots && $slots["_"]) {
+			$output += $slots["_"](t_sprops_1, $context);
+		}
+		$output += `<!]><!> </li> `;
+	}
+	$output += `<!]><!> </ul>`;
+
+	return $output;
+}