npm - @torpor/view - Versions diffs - 0.1.10 → 0.2.0 - Mend

@torpor/view 0.1.10 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (316) hide show

package/test/bind/components/output/BindText-server.ts CHANGED Viewed

@@ -14,8 +14,9 @@ export default function BindText(
 	let $state = $watch({ name: "Alice", selected: 1 });
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/bind/components/temp/{BindComponent-client-6f650efb818a185ef33e1b071cfd77415a803dd3.ts → BindComponent-client-a59ee6a598341c64c79be633ae7b22cb594dd0bc.ts} RENAMED Viewed

@@ -26,11 +26,10 @@ export default function BindComponent(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> <p>#</p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 	/* @component */
 	const t_props_1: any = $watch({});
@@ -40,11 +39,11 @@ export default function BindComponent(
 	$run(function setBinding() {
 		$state.name = t_props_1["name"];
 	});
-	BindText(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	BindText(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	const t_text_1 = t_child(t_next(t_next(t_comp_anchor_1, true)));
 	// @ts-ignore
-	const t_text_2 = t_next(t_comp_parent_1, true);
+	const t_text_2 = t_next(t_next(t_next(t_comp_anchor_1, true)), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
@@ -64,30 +63,20 @@ function BindText(
 ) {
 	$props ??= $watch({});
-	//let $state = $watch({
-		//	text: $props.name
-		//})
-		// $run(() => t_name_changed($props.name))
-		//$run(() => {
-			//	$props.name = $state.text
-			//});
-			/* User interface */
-			const t_fragments: DocumentFragment[] = [];
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
-			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> </div> `);
-			// @ts-ignore
-			const t_root_0 = t_root(t_fragment_0, true);
-			const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
-			// @ts-ignore
-			const t_text_1 = t_next(t_next(t_root_0), true);
-			$run(function setBinding() {
-				t_input_1.value = $props.name || "";
-			});
-			t_event(t_input_1, "input", (e) => $props.name = e.target.value);
-			t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
-			t_next(t_text_1);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> `);
+	// @ts-ignore
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
+	// @ts-ignore
+	const t_text_1 = t_next(t_input_1, true);
+	$run(function setBinding() {
+		t_input_1.value = $props.name || "";
+	});
+	t_event(t_input_1, "input", (e) => $props.name = e.target.value);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
-		}
+}

package/test/bind/components/temp/{BindComponent-server-2e6caf0cbbb2831eb4bfbd7dcd6cf4d5c422d047.ts → BindComponent-server-96120f1e75c77e02ba11ab719c225005e168d25f.ts} RENAMED Viewed

@@ -1,4 +1,3 @@
-import $run from "../../../../src/render/$serverRun";
 import $watch from "../../../../src/render/$serverWatch";
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
 import t_attr from "../../../../src/render/formatAttributeText";
@@ -15,15 +14,18 @@ export default function BindComponent(
 	let $state = $watch({ name: "Alice", selected: 1 });
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	const t_props_1: any = {};
 	t_props_1["&name"] = $state.name;
-	$output += BindText(t_props_1, $context)
-	$output += `<!]><!> <p>Hello, ${t_fmt($state.name)}</p> </div> `;
+	const t_comp_1 = BindText(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> <p>Hello, ${t_fmt($state.name)}</p> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }
 function BindText(
@@ -34,19 +36,11 @@ function BindText(
 	$slots?: Record<string, ServerSlotRender>
 ) {
 	$props ??= {};
-	//let $state = $watch({
-		//	text: $props.name
-		//})
-		// $run(() => t_name_changed($props.name))
-		//$run(() => {
-			//	$props.name = $state.text
-			//});
-			/* User interface */
-			let $output = "";
-			$output += ` <div> <input value="${t_attr($props.name) || ""}"> </div> `;
+	/* User interface */
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <input value="${t_attr($props.name) || ""}"> `;
-			return $output;
-		}
+	return { body: t_body, head: t_head };
+}

package/test/bind/components/temp/{BindText-client-134676d616abbad6b8a7ec48df0a2e38cbfe3b87.ts → BindText-client-dac614203e672e51675b22a246983168a7c173ea.ts} RENAMED Viewed

@@ -25,15 +25,15 @@ export default function BindText(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_input_1 = t_next(t_child(t_next(t_root_0))) as HTMLInputElement;
+	const t_input_1 = t_next(t_root_0) as HTMLInputElement;
 	const t_select_1 = t_next(t_next(t_input_1, true)) as HTMLElement;
 	const t_text_1 = t_child(t_next(t_next(t_select_1, true)));
 	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1, true)), true)));
 	// @ts-ignore
-	const t_text_3 = t_next(t_next(t_root_0), true);
+	const t_text_3 = t_next(t_next(t_next(t_next(t_next(t_select_1, true)), true)), true);
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});

package/test/bind/components/temp/{BindText-server-807a1ddcb68410b30429cb088d2e204ed6f585b2.ts → BindText-server-c713033ef787587f752fc8e6282e3a8faeee9a08.ts} RENAMED Viewed

@@ -14,8 +14,9 @@ export default function BindText(
 	let $state = $watch({ name: "Alice", selected: 1 });
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/build-server/build-server.test.ts CHANGED Viewed

@@ -29,7 +29,7 @@ IfNested;
 	// Strip TypeScript
 	code = transform(code, { transforms: ["typescript"] }).code;
-	const html = eval(code)(state);
+	const html = eval(code)(state).body;
 	const container = document.createElement("div");
 	container.innerHTML = html;

package/test/build-server/components/IfNested.torp CHANGED Viewed

@@ -1,21 +1,19 @@
 export default function IfNested($props: { counter: number }) {
 	@render {
-		<div>
-			@if ($props.counter > 5) {
-				@if ($props.counter > 10) {
-					<p>
-						It's both true!
-					</p>
-				} else {
-					<p>
-						The second is not true!
-					</p>
-				}
+		@if ($props.counter > 5) {
+			@if ($props.counter > 10) {
+				<p>
+					It's both true!
+				</p>
 			} else {
 				<p>
-					The first is not true!
+					The second is not true!
 				</p>
 			}
-		</div>
+		} else {
+			<p>
+				The first is not true!
+			</p>
+		}
 	}
 }

package/test/buildHtml.ts CHANGED Viewed

@@ -61,7 +61,7 @@ ${template.components.find((t) => t.default)!.name};
 		console.log("===");
 	}
-	const html = eval(code)(state).replaceAll(/\s+/g, " ");
+	const html = eval(code)(state).body.replaceAll(/\s+/g, " ");
 	if (debugPrint) {
 		console.log("=== server html");
 		console.log(html);

package/test/buildOutputFiles.ts CHANGED Viewed

@@ -125,9 +125,9 @@ const importsMap: Record<string, string> = {
 	'import { t_attribute } from "@torpor/view";':
 		'import t_attribute from "../../../../src/render/setAttribute";',
 	'import { t_class } from "@torpor/view";':
-		'import t_class from "../../../../src/render/getClasses";',
+		'import t_class from "../../../../src/render/buildClasses";',
 	'import { t_style } from "@torpor/view";':
-		'import t_style from "../../../../src/render/getStyles";',
+		'import t_style from "../../../../src/render/buildStyles";',
 	'import { t_dynamic } from "@torpor/view";':
 		'import t_dynamic from "../../../../src/render/setDynamicElement";',
 	'import { t_fmt } from "@torpor/view";': 'import t_fmt from "../../../../src/render/formatText";',
@@ -168,9 +168,9 @@ const importsMap: Record<string, string> = {
 	'import { t_attr } from "@torpor/view/ssr";':
 		'import t_attr from "../../../../src/render/formatAttributeText";',
 	'import { t_class } from "@torpor/view/ssr";':
-		'import t_class from "../../../../src/render/getClasses";',
+		'import t_class from "../../../../src/render/buildClasses";',
 	'import { t_style } from "@torpor/view/ssr";':
-		'import t_style from "../../../../src/render/getStyles";',
+		'import t_style from "../../../../src/render/buildStyles";',
 	'import { t_print } from "@torpor/view";':
 		'import t_print from "../../../../src/debug/printNode";',
 	'import { type ServerSlotRender } from "@torpor/view/ssr";':

package/test/child-component/components/ParentChild.torp CHANGED Viewed

@@ -1,8 +1,6 @@
 export default function ParentChild() {
 	@render {
-		<div>
-			<Child name="Anna" />
-		</div>
+		<Child name="Anna" />
 	}
 }

package/test/child-component/components/output/ParentChild-client.ts CHANGED Viewed

@@ -23,19 +23,18 @@ export default function ParentChild(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 	/* @component */
 	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Anna";
-	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	// @ts-ignore
-	const t_text_1 = t_next(t_comp_parent_1, true);
+	const t_text_1 = t_next(t_comp_anchor_1, true);
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);

package/test/child-component/components/output/ParentChild-server.ts CHANGED Viewed

@@ -11,15 +11,18 @@ export default function ParentChild(
 ) {
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	const t_props_1: any = {};
 	t_props_1["name"] = "Anna";
-	$output += Child(t_props_1, $context)
-	$output += `<!]><!> </div> `;
+	const t_comp_1 = Child(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }
 function Child(
@@ -32,8 +35,9 @@ function Child(
 	$props ??= {};
 	/* User interface */
-	let $output = "";
-	$output += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/child-component/components/temp/{ParentChild-client-50ca7e499599209c9d674f2561413ca14a282c22.ts → ParentChild-client-198e4ebc2ef5277ad7147f69d5879946fbe2d6ec.ts} RENAMED Viewed

@@ -23,19 +23,18 @@ export default function ParentChild(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 	/* @component */
 	const t_props_1: any = $watch({});
 	t_props_1["name"] = "Anna";
-	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	// @ts-ignore
-	const t_text_1 = t_next(t_comp_parent_1, true);
+	const t_text_1 = t_next(t_comp_anchor_1, true);
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);

package/test/child-component/components/temp/{ParentChild-server-5e4a7fa5f4cd1c7dbe6866819025d2c03bfc62cb.ts → ParentChild-server-55e809830788ae740608136cf66664fc5434a9cd.ts} RENAMED Viewed

@@ -11,15 +11,18 @@ export default function ParentChild(
 ) {
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	const t_props_1: any = {};
 	t_props_1["name"] = "Anna";
-	$output += Child(t_props_1, $context)
-	$output += `<!]><!> </div> `;
+	const t_comp_1 = Child(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }
 function Child(
@@ -32,8 +35,9 @@ function Child(
 	$props ??= {};
 	/* User interface */
-	let $output = "";
-	$output += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h2>Hello, ${t_fmt($props.name)}</h2> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/class/components/Class.torp CHANGED Viewed

@@ -1,36 +1,34 @@
 export default function Class() {
 	@render {
-		<div>
-			<div id="divid">
-				From id
-			</div>
-			<div class="divclass">
-				From string
-			</div>
+		<div id="divid">
+			From id
+		</div>
-			<a :class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
-				From state
-			</a>
+		<div class="divclass">
+			From string
+		</div>
-			<div :class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
-				From state with scope
-			</div>
+		<a class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
+			From state
+		</a>
-			<div :class={{ foo: true, bar: false, baz: 5, qux: null }}>
-				Class object
-			</div>
+		<div class={{ hello: true, red: $props.red, green: $props.green, blue: $props.blue }}>
+			From state with scope
+		</div>
-			<div :class={[ "foo", false, true && "baz", undefined ]}>
-				Class array
-			</div>
+		<div class={{ foo: true, bar: false, baz: 5, qux: null }}>
+			Class object
+		</div>
-			<div :class={[ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ]}>
-				Class nested
-			</div>
+		<div class={[ "foo", false, true && "baz", undefined ]}>
+			Class array
+		</div>
-			<Child :class={{ "child-class": true }} />
+		<div class={[ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ]}>
+			Class nested
 		</div>
+		<Child class={{ "child-class": true }} />
 	}
 	@style {

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

@@ -3,8 +3,7 @@ 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_class from "../../../../src/render/getClasses";
+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";
@@ -23,15 +22,14 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div class="torp-1ljxz83"> <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> <!> </div> `);
+	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> <!> `);
 	// @ts-ignore
 	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_child(t_next(t_root_0))), true)), true)) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLElement;
 	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;
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
 	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 	/* @component */
@@ -39,10 +37,10 @@ export default function Class(
 	$run(function setClasses() {
 		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});
-	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	// @ts-ignore
-	const t_text_1 = t_next(t_comp_parent_1, true);
+	const t_text_1 = t_next(t_comp_anchor_1, true);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
@@ -83,8 +81,8 @@ function Child(
 	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
 	// @ts-ignore
 	const t_text_1 = t_next(t_div_1, true);
-	$run(function setClassName() {
-		t_div_1.className = $props.class;
+	$run(function setClasses() {
+		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/output/Class-server.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
-import t_attr from "../../../../src/render/formatAttributeText";
-import t_class from "../../../../src/render/getClasses";
+import t_class from "../../../../src/render/buildClasses";
 export default function Class(
 	$props: Record<PropertyKey, any>,
@@ -12,15 +11,18 @@ export default function Class(
 	$props ??= {};
 	/* User interface */
-	let $output = "";
-	$output += ` <div class="torp-1ljxz83"> <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> <![>`;
+	let t_body = "";
+	let t_head = "<style id='1ljxz83'>div.torp-1ljxz83 { color: blue; } </style>";
+	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: any = {};
 	t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
-	$output += Child(t_props_1, $context)
-	$output += `<!]><!> </div> `;
+	const t_comp_1 = Child(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }
 function Child(
@@ -33,8 +35,9 @@ function Child(
 	$props ??= {};
 	/* User interface */
-	let $output = "";
-	$output += ` <div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div class="${t_class($props.class)}"> Child class </div> `;
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/class/components/temp/{Class-client-de2491c550647203bea08727fa8c88f30654db0a.ts → Class-client-7defac0b98d9c9f303670c0372e329e31823f163.ts} RENAMED Viewed

@@ -3,8 +3,7 @@ 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_class from "../../../../src/render/getClasses";
+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";
@@ -23,15 +22,14 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div class="torp-1ljxz83"> <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> <!> </div> `);
+	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> <!> `);
 	// @ts-ignore
 	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_child(t_next(t_root_0))), true)), true)) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)) as HTMLElement;
 	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;
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
 	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_div_4, true))) as HTMLElement;
 	/* @component */
@@ -39,10 +37,10 @@ export default function Class(
 	$run(function setClasses() {
 		t_props_1["class"] = t_class({ "child-class": true }, "torp-1ljxz83");
 	});
-	Child(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	Child(t_fragment_0, t_comp_anchor_1, t_props_1, $context);
 	// @ts-ignore
-	const t_text_1 = t_next(t_comp_parent_1, true);
+	const t_text_1 = t_next(t_comp_anchor_1, true);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
@@ -83,8 +81,8 @@ function Child(
 	const t_div_1 = t_next(t_root_0) as HTMLDivElement;
 	// @ts-ignore
 	const t_text_1 = t_next(t_div_1, true);
-	$run(function setClassName() {
-		t_div_1.className = $props.class;
+	$run(function setClasses() {
+		t_div_1.className = t_class($props.class);
 	});
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);