@torpor/view 0.4.13 → 0.4.15

package/src/compile/parse/parseTag.ts

@@ -2,7 +2,6 @@ import type Attribute from "../types/nodes/Attribute";
 import type ElementNode from "../types/nodes/ElementNode";
 import isFullyReactive from "../utils/isFullyReactive";
 import isReactive from "../utils/isReactive";
-import trimQuotes from "../utils/trimQuotes";
 import type ParseStatus from "./ParseStatus";
 import parseInlineScript from "./parseInlineScript";
 import accept from "./utils/accept";
@@ -17,7 +16,7 @@ export default function parseTag(status: ParseStatus): ElementNode {
 
 	consumeSpace(status);
 
-	let tagStart = status.i;
+	let tagStart = status.i + 1;
 	let snailed = accept("@", status);
 	let tagName = consumeAlphaNumeric(status);
 	let tagEnd = status.i;
@@ -109,11 +108,6 @@ function parseAttribute(status: ParseStatus): Attribute {
 			value = value.substring(1, value.length - 1);
 			valueStart++;
 			valueEnd--;
-		} else if (reactive) {
-			// TODO: Ranges etc, like text nodes -- I think we would need to
-			// leave things reactive (or fully reactive) and check it when
-			// building instead
-			value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
 		}
 	} else if (name.startsWith("{") && name.endsWith("}")) {
 		// It's a shortcut attribute. It could be e.g. {width} or it could be

package/src/compile/parse/parseText.ts

@@ -84,7 +84,7 @@ export default function parseText(status: ParseStatus, element: ElementNode): vo
 				const text: TextNode = {
 					type: "text",
 					content: content + spaceContent,
-					spans: spans,
+					spans,
 				};
 				element.children.push(text);
 			}

package/src/render/buildClasses.ts

@@ -16,7 +16,7 @@ export default function buildClasses(value: ClassValue, styleHash?: string): str
 	}
 }
 
-function gatherNames(name: string, value: ClassValue, classes: string[]) {
+function gatherNames(name: string, value: unknown, classes: string[]) {
 	if (value) {
 		if (Array.isArray(value)) {
 			for (let v of value) {

package/src/render/buildStyles.ts

@@ -8,7 +8,9 @@ export default function buildStyles(value: StyleValue): string {
 		if (value) {
 			if (Array.isArray(value)) {
 				for (let v of value) {
-					styles.push(v);
+					if (v) {
+						styles.push(v);
+					}
 				}
 			} else if (typeof value === "object") {
 				for (let [n, v] of Object.entries(value)) {

package/src/types/ClassValue.ts

@@ -1,3 +1,8 @@
-type ClassValue = string | Record<string, string> | undefined | Array<ClassValue>;
+type ClassValue =
+	| string
+	| Record<string, boolean | null | undefined>
+	| Array<ClassValue>
+	| null
+	| undefined;
 
 export default ClassValue;

package/src/types/StyleValue.ts

@@ -1,3 +1,8 @@
-type StyleValue = string | Record<string, string> | Array<string> | undefined;
+type StyleValue =
+	| string
+	| Record<string, string | null | undefined>
+	| Array<string | null | undefined>
+	| null
+	| undefined;
 
 export default StyleValue;

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