@torpor/view 0.4.14 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "exports": {

package/src/compile/build/client/buildComponentNode.ts

@@ -134,6 +134,9 @@ export default function buildComponentNode(
 					runs.push(`${propsName}["${name}"] = ${value};`);
 				}
 			} else if (value != null) {
+				if (name === "class" && node.scopeStyles) {
+					value = `"${trimQuotes(value)} torp-${status.styleHash}"`;
+				}
 				props.push({
 					name,
 					preText: "",

package/test/class/class.test.ts

@@ -43,20 +43,32 @@ export default function Class() {
 			Class nested
 		</div>
 
-		<Child class={{ "child-class": true }} />
+		<Child class={{ "child-class": true }}>
+			Child class 1
+		</Child>
+
+		<Child class="pink">
+			Child class 2
+		</Child>
 	}
 
 	@style {
 		div {
 			color: blue;
 		}
+
+		.pink {
+			color: pink;
+		}
 	}
 }
 
 function Child() {
 	@render {
 		<div class={$props.class}>
-			Child class
+			<slot>
+				Child class
+			</slot>
 		</div>
 	}
 }
@@ -93,40 +105,40 @@ test("class -- hydrated", async () => {
 
 function check(container: HTMLElement, state: Props) {
 	expect(queryByText(container, "From id")).not.toBeNull();
-	expect(queryByText(container, "From id")).toHaveClass("torp-1ljxz83", {
+	expect(queryByText(container, "From id")).toHaveClass("torp-1ouzs8a", {
 		exact: true,
 	});
 
 	expect(queryByText(container, "From string")).not.toBeNull();
-	expect(queryByText(container, "From string")).toHaveClass("divclass torp-1ljxz83", {
+	expect(queryByText(container, "From string")).toHaveClass("divclass torp-1ouzs8a", {
 		exact: true,
 	});
 
 	expect(queryByText(container, "From state")).not.toBeNull();
-	expect(queryByText(container, "From state")).toHaveClass("hello red blue torp-1ljxz83", {
+	expect(queryByText(container, "From state")).toHaveClass("hello red blue torp-1ouzs8a", {
 		exact: true,
 	});
 
 	expect(queryByText(container, "From state with scope")).not.toBeNull();
 	expect(queryByText(container, "From state with scope")).toHaveClass(
-		"hello red blue torp-1ljxz83",
+		"hello red blue torp-1ouzs8a",
 		{
 			exact: true,
 		},
 	);
 
 	expect(queryByText(container, "Class object")).not.toBeNull();
-	expect(queryByText(container, "Class object")).toHaveClass("foo baz torp-1ljxz83", {
+	expect(queryByText(container, "Class object")).toHaveClass("foo baz torp-1ouzs8a", {
 		exact: true,
 	});
 
 	expect(queryByText(container, "Class array")).not.toBeNull();
-	expect(queryByText(container, "Class array")).toHaveClass("foo baz torp-1ljxz83", {
+	expect(queryByText(container, "Class array")).toHaveClass("foo baz torp-1ouzs8a", {
 		exact: true,
 	});
 
 	expect(queryByText(container, "Class nested")).not.toBeNull();
-	expect(queryByText(container, "Class nested")).toHaveClass("foo bar baz qux torp-1ljxz83", {
+	expect(queryByText(container, "Class nested")).toHaveClass("foo bar baz qux torp-1ouzs8a", {
 		exact: true,
 	});
 
@@ -134,13 +146,20 @@ function check(container: HTMLElement, state: Props) {
 	state.green = true;
 	state.blue = false;
 
-	expect(queryByText(container, "From state")).toHaveClass("hello red green torp-1ljxz83", {
+	expect(queryByText(container, "From state")).toHaveClass("hello red green torp-1ouzs8a", {
 		exact: true,
 	});
 
 	// Components
-	expect(queryByText(container, "Child class")).not.toBeNull();
-	expect(queryByText(container, "Child class")).toHaveClass("child-class torp-1ljxz83", {
+	expect(queryByText(container, "Child class 1")).not.toBeNull();
+	expect(queryByText(container, "Child class 1")).toHaveClass("child-class torp-1ouzs8a", {
+		exact: true,
+	});
+
+	// Should get a bit fancier than this i.e. if a class is set on a component,
+	// ONLY that class gets the style hash added
+	expect(queryByText(container, "Child class 2")).not.toBeNull();
+	expect(queryByText(container, "Child class 2")).toHaveClass("pink torp-1ouzs8a", {
 		exact: true,
 	});
 }

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

@@ -3,6 +3,7 @@ import $watch from "../../../../src/watch/$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_class from "../../../../src/render/buildClasses";
 import t_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
@@ -21,7 +22,7 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ouzs8a"> From id </div> <div class="divclass torp-1ouzs8a"> From string </div> <a class="torp-1ouzs8a"> From state </a> <div class="torp-1ouzs8a"> From state with scope </div> <div class="torp-1ouzs8a"> Class object </div> <div class="torp-1ouzs8a"> Class array </div> <div class="torp-1ouzs8a"> Class nested </div> <!> <!> `);
 	const t_root_0 = t_root(t_fragment_0, true);
 	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLAnchorElement;
 	const t_div_1 = t_next(t_next(t_a_1, true)) as HTMLDivElement;
@@ -32,23 +33,59 @@ export default function Class(
 
 	/* @component */
 	const t_props_1 = $watch({
-		class: t_class({ "child-class": true }, "torp-1ljxz83"),
+		class: t_class({ "child-class": true }, "torp-1ouzs8a"),
 	});
 	$run(() => {
-		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
+		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ouzs8a");
 	});
-	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
+	const t_slots_1: Record<string, SlotRender> = {};
+	t_slots_1["_"] = (
+		$sparent: ParentNode,
+		$sanchor: Node | null,
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` Child class 1 `);
+		const t_text_1 = t_root(t_fragment_2);
+		t_add_fragment(t_fragment_2, $sparent, $sanchor, t_text_1);
+		t_next(t_text_1);
+	}
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context, t_slots_1);
 
-	const t_text_1 = t_next(t_comp_anchor_1, true);
+	let t_comp_anchor_2 = t_anchor(t_next(t_next(t_comp_anchor_1, true))) as HTMLElement;
+
+	/* @component */
+	const t_props_2 = $watch({
+		class: "pink torp-1ouzs8a",
+	});
+	const t_slots_2: Record<string, SlotRender> = {};
+	t_slots_2["_"] = (
+		$sparent: ParentNode,
+		$sanchor: Node | null,
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		const t_fragment_4 = t_fragment($parent.ownerDocument!, t_fragments, 4, ` Child class 2 `);
+		const t_text_2 = t_root(t_fragment_4);
+		t_add_fragment(t_fragment_4, $sparent, $sanchor, t_text_2);
+		t_next(t_text_2);
+	}
+	Child(t_fragment_0, t_comp_anchor_2, t_props_2, $context, t_slots_2);
+
+	const t_text_3 = t_next(t_comp_anchor_2, true);
 	$run(() => {
-		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
-		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
-		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
-		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
-		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
+		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a");
+		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a");
+		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ouzs8a");
+		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ouzs8a");
+		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ouzs8a");
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-	t_next(t_text_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_3);
+	t_next(t_text_3);
 
 }
 
@@ -58,21 +95,29 @@ function Child(
 	$props: Record<PropertyKey, any>,
 	// @ts-ignore
 	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ): void {
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> Child class </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
 	const t_root_0 = t_root(t_fragment_0, true);
 	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
-	const t_text_1 = t_next(t_div_1, true);
+	let t_slot_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	if ($slots && $slots["_"]) {
+		$slots["_"](t_div_1, t_slot_anchor_1, undefined, $context)
+	} else {
+		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` Child class `);
+		const t_text_1 = t_root(t_fragment_1);
+		t_add_fragment(t_fragment_1, t_div_1, t_slot_anchor_1, t_text_1);
+		t_next(t_text_1);
+	}
+	const t_text_2 = t_next(t_div_1, true);
 	$run(() => {
 		t_div_1.className = t_class($props.class);
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-	t_next(t_text_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
 
 }

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

@@ -12,17 +12,46 @@ export default function Class(
 	let t_head = "";
 
 	/* User interface */
-	t_body += ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> <![>`;
+	t_body += ` <div id="divid" class="torp-1ouzs8a"> From id </div> <div class="divclass torp-1ouzs8a"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ouzs8a")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ouzs8a")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ouzs8a")}"> Class nested </div> <![>`;
 	const t_props_1 = {
-		class: t_class({ "child-class": true }, "torp-1ljxz83"),
+		class: t_class({ "child-class": true }, "torp-1ouzs8a"),
 	};
-	const t_comp_1 = Child(t_props_1, $context);
+	const t_slots_1: Record<string, ServerSlotRender> = {};
+	t_slots_1["_"] = (
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		let t_body = "";
+		t_body += ` Child class 1 `;
+		return t_body;
+	}
+	const t_comp_1 = Child(t_props_1, $context, t_slots_1);
 	t_body += t_comp_1.body;
 	t_head += t_comp_1.head;
+	t_body += `<!]><!> <![>`;
+	const t_props_2 = {
+		class: t_class("pink", "torp-1ouzs8a"),
+	};
+	const t_slots_2: Record<string, ServerSlotRender> = {};
+	t_slots_2["_"] = (
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		let t_body = "";
+		t_body += ` Child class 2 `;
+		return t_body;
+	}
+	const t_comp_2 = Child(t_props_2, $context, t_slots_2);
+	t_body += t_comp_2.body;
+	t_head += t_comp_2.head;
 	t_body += `<!]><!> `;
 
 	/* Style */
-	t_head += "<style id='1ljxz83'>div.torp-1ljxz83 { color: blue; } </style>";
+	t_head += "<style id='1ouzs8a'>div.torp-1ouzs8a { color: blue; } .pink.torp-1ouzs8a { color: pink; } </style>";
 
 	return { body: t_body, head: t_head };
 }
@@ -31,14 +60,19 @@ function Child(
 	$props: Record<PropertyKey, any>,
 	// @ts-ignore
 	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ): { body: string, head: string } {
 	let t_body = "";
 	let t_head = "";
 
 	/* User interface */
-	t_body += ` <div class="${t_class($props.class)}"> Child class </div> `;
+	t_body += ` <div class="${t_class($props.class)}"> <![>`;
+	if ($slots && $slots["_"]) {
+		t_body += $slots["_"](undefined, $context);
+	} else {
+		t_body += ` Child class `;
+	}
+	t_body += `<!]><!> </div> `;
 
 	return { body: t_body, head: t_head };
 }

package/test/class/components/temp/Class-client-c100fef7474dd892108c52b2cfed5825a3412e8b.ts

@@ -0,0 +1,123 @@
+import $run from "../../../../src/watch/$run";
+import $watch from "../../../../src/watch/$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_class from "../../../../src/render/buildClasses";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+export default function Class(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+): void {
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ouzs8a"> From id </div> <div class="divclass torp-1ouzs8a"> From string </div> <a class="torp-1ouzs8a"> From state </a> <div class="torp-1ouzs8a"> From state with scope </div> <div class="torp-1ouzs8a"> Class object </div> <div class="torp-1ouzs8a"> Class array </div> <div class="torp-1ouzs8a"> Class nested </div> <!> <!> `);
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLAnchorElement;
+	const t_div_1 = t_next(t_next(t_a_1, true)) as HTMLDivElement;
+	const t_div_2 = t_next(t_next(t_div_1, true)) as HTMLDivElement;
+	const t_div_3 = t_next(t_next(t_div_2, true)) as HTMLDivElement;
+	const t_div_4 = t_next(t_next(t_div_3, true)) as HTMLDivElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
+
+	/* @component */
+	const t_props_1 = $watch({
+		class: t_class({ "child-class": true }, "torp-1ouzs8a"),
+	});
+	$run(() => {
+		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ouzs8a");
+	});
+	const t_slots_1: Record<string, SlotRender> = {};
+	t_slots_1["_"] = (
+		$sparent: ParentNode,
+		$sanchor: Node | null,
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` Child class 1 `);
+		const t_text_1 = t_root(t_fragment_2);
+		t_add_fragment(t_fragment_2, $sparent, $sanchor, t_text_1);
+		t_next(t_text_1);
+	}
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context, t_slots_1);
+
+	let t_comp_anchor_2 = t_anchor(t_next(t_next(t_comp_anchor_1, true))) as HTMLElement;
+
+	/* @component */
+	const t_props_2 = $watch({
+		class: "pink torp-1ouzs8a",
+	});
+	const t_slots_2: Record<string, SlotRender> = {};
+	t_slots_2["_"] = (
+		$sparent: ParentNode,
+		$sanchor: Node | null,
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		const t_fragment_4 = t_fragment($parent.ownerDocument!, t_fragments, 4, ` Child class 2 `);
+		const t_text_2 = t_root(t_fragment_4);
+		t_add_fragment(t_fragment_4, $sparent, $sanchor, t_text_2);
+		t_next(t_text_2);
+	}
+	Child(t_fragment_0, t_comp_anchor_2, t_props_2, $context, t_slots_2);
+
+	const t_text_3 = t_next(t_comp_anchor_2, true);
+	$run(() => {
+		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a");
+		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a");
+		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ouzs8a");
+		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ouzs8a");
+		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ouzs8a");
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_3);
+	t_next(t_text_3);
+
+}
+
+function Child(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>
+): void {
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
+	let t_slot_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	if ($slots && $slots["_"]) {
+		$slots["_"](t_div_1, t_slot_anchor_1, undefined, $context)
+	} else {
+		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` Child class `);
+		const t_text_1 = t_root(t_fragment_1);
+		t_add_fragment(t_fragment_1, t_div_1, t_slot_anchor_1, t_text_1);
+		t_next(t_text_1);
+	}
+	const t_text_2 = t_next(t_div_1, true);
+	$run(() => {
+		t_div_1.className = t_class($props.class);
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
+
+}

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

@@ -0,0 +1,78 @@
+import type ServerSlotRender from "../../../../src/types/ServerSlotRender";
+import t_class from "../../../../src/render/buildClasses";
+
+export default function Class(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+): { body: string, head: string } {
+	let t_body = "";
+	let t_head = "";
+
+	/* User interface */
+	t_body += ` <div id="divid" class="torp-1ouzs8a"> From id </div> <div class="divclass torp-1ouzs8a"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ouzs8a")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ouzs8a")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ouzs8a")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ouzs8a")}"> Class nested </div> <![>`;
+	const t_props_1 = {
+		class: t_class({ "child-class": true }, "torp-1ouzs8a"),
+	};
+	const t_slots_1: Record<string, ServerSlotRender> = {};
+	t_slots_1["_"] = (
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		let t_body = "";
+		t_body += ` Child class 1 `;
+		return t_body;
+	}
+	const t_comp_1 = Child(t_props_1, $context, t_slots_1);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> <![>`;
+	const t_props_2 = {
+		class: t_class("pink", "torp-1ouzs8a"),
+	};
+	const t_slots_2: Record<string, ServerSlotRender> = {};
+	t_slots_2["_"] = (
+		// @ts-ignore
+		$sprops?: Record<PropertyKey, any>,
+		// @ts-ignore
+		$context?: Record<PropertyKey, any>
+	) => {
+		let t_body = "";
+		t_body += ` Child class 2 `;
+		return t_body;
+	}
+	const t_comp_2 = Child(t_props_2, $context, t_slots_2);
+	t_body += t_comp_2.body;
+	t_head += t_comp_2.head;
+	t_body += `<!]><!> `;
+
+	/* Style */
+	t_head += "<style id='1ouzs8a'>div.torp-1ouzs8a { color: blue; } .pink.torp-1ouzs8a { color: pink; } </style>";
+
+	return { body: t_body, head: t_head };
+}
+
+function Child(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, ServerSlotRender>
+): { body: string, head: string } {
+	let t_body = "";
+	let t_head = "";
+
+	/* User interface */
+	t_body += ` <div class="${t_class($props.class)}"> <![>`;
+	if ($slots && $slots["_"]) {
+		t_body += $slots["_"](undefined, $context);
+	} else {
+		t_body += ` Child class `;
+	}
+	t_body += `<!]><!> </div> `;
+
+	return { body: t_body, head: t_head };
+}

package/test/class/components/temp/Class-client-d17977d356d8c8f964eaa1ac5a381814b33c22ba.ts

@@ -1,78 +0,0 @@
-import $run from "../../../../src/watch/$run";
-import $watch from "../../../../src/watch/$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_class from "../../../../src/render/buildClasses";
-import t_fragment from "../../../../src/render/getFragment";
-import t_next from "../../../../src/render/nodeNext";
-import t_root from "../../../../src/render/nodeRoot";
-
-export default function Class(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: Record<PropertyKey, any>,
-	// @ts-ignore
-	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
-	$slots?: Record<string, SlotRender>
-): void {
-
-	/* User interface */
-	const t_fragments: DocumentFragment[] = [];
-
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> `);
-	const t_root_0 = t_root(t_fragment_0, true);
-	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLAnchorElement;
-	const t_div_1 = t_next(t_next(t_a_1, true)) as HTMLDivElement;
-	const t_div_2 = t_next(t_next(t_div_1, true)) as HTMLDivElement;
-	const t_div_3 = t_next(t_next(t_div_2, true)) as HTMLDivElement;
-	const t_div_4 = t_next(t_next(t_div_3, true)) as HTMLDivElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
-
-	/* @component */
-	const t_props_1 = $watch({
-		class: t_class({ "child-class": true }, "torp-1ljxz83"),
-	});
-	$run(() => {
-		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
-	});
-	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
-
-	const t_text_1 = t_next(t_comp_anchor_1, true);
-	$run(() => {
-		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
-		t_div_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
-		t_div_2.className = t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83");
-		t_div_3.className = t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83");
-		t_div_4.className = t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83");
-	});
-	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-	t_next(t_text_1);
-
-}
-
-function Child(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: Record<PropertyKey, any>,
-	// @ts-ignore
-	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
-	$slots?: Record<string, SlotRender>
-): void {
-
-	/* User interface */
-	const t_fragments: DocumentFragment[] = [];
-
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> Child class </div> `);
-	const t_root_0 = t_root(t_fragment_0, true);
-	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
-	const t_text_1 = t_next(t_div_1, true);
-	$run(() => {
-		t_div_1.className = t_class($props.class);
-	});
-	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-	t_next(t_text_1);
-
-}

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

@@ -1,44 +0,0 @@
-import type ServerSlotRender from "../../../../src/types/ServerSlotRender";
-import t_class from "../../../../src/render/buildClasses";
-
-export default function Class(
-	$props: Record<PropertyKey, any>,
-	// @ts-ignore
-	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
-	$slots?: Record<string, ServerSlotRender>
-): { body: string, head: string } {
-	let t_body = "";
-	let t_head = "";
-
-	/* User interface */
-	t_body += ` <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> <![>`;
-	const t_props_1 = {
-		class: t_class({ "child-class": true }, "torp-1ljxz83"),
-	};
-	const t_comp_1 = Child(t_props_1, $context);
-	t_body += t_comp_1.body;
-	t_head += t_comp_1.head;
-	t_body += `<!]><!> `;
-
-	/* Style */
-	t_head += "<style id='1ljxz83'>div.torp-1ljxz83 { color: blue; } </style>";
-
-	return { body: t_body, head: t_head };
-}
-
-function Child(
-	$props: Record<PropertyKey, any>,
-	// @ts-ignore
-	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
-	$slots?: Record<string, ServerSlotRender>
-): { body: string, head: string } {
-	let t_body = "";
-	let t_head = "";
-
-	/* User interface */
-	t_body += ` <div class="${t_class($props.class)}"> Child class </div> `;
-
-	return { body: t_body, head: t_head };
-}