@torpor/view 0.1.11 → 0.2.0

package/test/party/components/output/TrafficLight-client.ts

@@ -39,10 +39,10 @@ export default function TrafficLight(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <button>Next light</button> <p>#</p> <p> You must <!> </p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button>Next light</button> <p>#</p> <p> You must <!> </p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_button_1 = t_next(t_child(t_next(t_root_0))) as HTMLElement;
+	const t_button_1 = t_next(t_root_0) as HTMLElement;
 	const t_text_1 = t_child(t_next(t_next(t_button_1, true)));
 	const t_if_parent_1 = t_next(t_next(t_next(t_next(t_button_1, true)), true)) as HTMLElement;
 	let t_if_anchor_1 = t_anchor(t_next(t_child(t_next(t_next(t_next(t_next(t_button_1, true)), true))))) as HTMLElement;
@@ -90,7 +90,7 @@ export default function TrafficLight(
 	});
 
 	// @ts-ignore
-	const t_text_5 = t_next(t_next(t_root_0), true);
+	const t_text_5 = t_next(t_next(t_next(t_next(t_next(t_button_1, true)), true)), true);
 	t_event(t_button_1, "click", nextLight);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Light is: ${t_fmt($state.light)}`;

package/test/party/components/output/TrafficLight-server.ts

@@ -23,18 +23,19 @@ export default function TrafficLight(
 	}
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <button>Next light</button> <p>Light is: ${t_fmt($state.light)}</p> <p> You must <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <button>Next light</button> <p>Light is: ${t_fmt($state.light)}</p> <p> You must <![>`;
 	if ($state.light === "red") {
-		$output += `<!^> <span>STOP</span> `;
+		t_body += `<!^> <span>STOP</span> `;
 	}
 	else if ($state.light === "orange") {
-		$output += `<!^> <span>SLOW DOWN</span> `;
+		t_body += `<!^> <span>SLOW DOWN</span> `;
 	}
 	else if ($state.light === "green") {
-		$output += `<!^> <span>GO</span> `;
+		t_body += `<!^> <span>GO</span> `;
 	}
-	$output += `<!]><!> </p> </div> `;
+	t_body += `<!]><!> </p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/output/UserProfile-client.ts

@@ -27,15 +27,15 @@ export default function UserProfile(
 	/* 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> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <p>#</p> <p>#</p> <p>#</p> <p>#</p> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)));
-	const t_text_3 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)), true)));
-	const t_text_4 = t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)), true)), true)));
+	const t_text_1 = t_child(t_next(t_root_0));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_root_0), true)));
+	const t_text_3 = t_child(t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)));
+	const t_text_4 = t_child(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)), true)));
 	// @ts-ignore
-	const t_text_5 = t_next(t_next(t_root_0), true);
+	const t_text_5 = t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)), true)), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `My name is ${t_fmt($props.name)}!`;
 	});

package/test/party/components/output/UserProfile-server.ts

@@ -16,8 +16,9 @@ export default function UserProfile(
 	$props ??= {};
 
 	/* 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> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <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> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/output/UserProfileApp-server.ts

@@ -12,16 +12,19 @@ export default function UserProfileApp(
 ) {
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	const t_props_1: any = {};
 	t_props_1["name"] = "John";
 	t_props_1["age"] = 20;
 	t_props_1["favouriteColors"] = ["green", "blue", "red"];
 	t_props_1["isAvailable"] = true;
 
-	$output += UserProfile(t_props_1, $context)
-	$output += `<!]><!> `;
+	const t_comp_1 = UserProfile(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 };
 }

package/test/party/components/output/UserProfileContext-client.ts

@@ -25,14 +25,14 @@ export default function UserProfileContext(
 	/* 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> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <h2>My Profile</h2> <p>#</p> <p>#</p> <button> Update username to Jane </button> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)));
-	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)), true)));
-	const t_button_1 = t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_child(t_next(t_root_0))), true)), true)), true)) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_next(t_next(t_root_0), true)));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)));
+	const t_button_1 = t_next(t_next(t_next(t_next(t_next(t_next(t_next(t_root_0), true)), true)), true)) as HTMLElement;
 	// @ts-ignore
-	const t_text_3 = t_next(t_next(t_root_0), true);
+	const t_text_3 = t_next(t_button_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Username: ${t_fmt($context.user.username)}`;
 	});

package/test/party/components/output/UserProfileContext-server.ts

@@ -13,8 +13,9 @@ export default function UserProfileContext(
 	$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> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <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> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/output/UserProfileContextApp-client.ts

@@ -35,18 +35,17 @@ export default function UserProfileContextApp(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <h1>#</h1> <!> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <h1>#</h1> <!> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
-	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_next(t_child(t_comp_parent_1)), true))) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_root_0));
+	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_next(t_root_0), true))) as HTMLElement;
 
 	/* @component */
-	UserProfileContext(t_comp_parent_1, t_comp_anchor_1, undefined, $context);
+	UserProfileContext(t_fragment_0, t_comp_anchor_1, undefined, $context);
 
 	// @ts-ignore
-	const t_text_2 = t_next(t_comp_parent_1, true);
+	const t_text_2 = t_next(t_comp_anchor_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Welcome back, ${t_fmt($user.username)}`;
 	});

package/test/party/components/output/UserProfileContextApp-server.ts

@@ -23,11 +23,14 @@ export default function UserProfileContextApp(
 	$context.user = $user;
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <h1>Welcome back, ${t_fmt($user.username)}</h1> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h1>Welcome back, ${t_fmt($user.username)}</h1> <![>`;
 
-	$output += UserProfileContext(undefined, $context)
-	$output += `<!]><!> </div> `;
+	const t_comp_1 = UserProfileContext(undefined, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{AnswerButton-client-ad8f8db36b7aaa68d8de5898a324bacfbe9f20df.ts → AnswerButton-client-890e28879c132eea21260eb82af832afc6a48507.ts}

@@ -1,7 +1,6 @@
 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_fragment from "../../../../src/render/getFragment";
 import t_next from "../../../../src/render/nodeNext";
@@ -21,13 +20,13 @@ export default function AnswerButton(
 	/* 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> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button>YES</button> <button>NO</button> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_button_1 = t_next(t_child(t_next(t_root_0))) as HTMLElement;
+	const t_button_1 = t_next(t_root_0) as HTMLElement;
 	const t_button_2 = t_next(t_next(t_button_1, true)) as HTMLElement;
 	// @ts-ignore
-	const t_text_1 = t_next(t_next(t_root_0), true);
+	const t_text_1 = t_next(t_button_2, true);
 	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_text_1);

package/test/party/components/temp/{AnswerButton-server-928b5d447afa865fa09e0142c79bb1f2c1b86875.ts → AnswerButton-server-01ffab9f6f92073640df2cf2cb5473407d82b24f.ts}

@@ -10,8 +10,9 @@ export default function AnswerButton(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <button>YES</button> <button>NO</button> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <button>YES</button> <button>NO</button> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{AnswerButtonApp-client-5661f07868550612bcdeee268b82c473af6a2613.ts → AnswerButtonApp-client-295a835cadf7e7ccec608f84ed01865dd8c73954.ts}

@@ -37,11 +37,10 @@ export default function AnswerButtonApp(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <p>Are you happy?</p> <!> <p style="font-size: 50px;">#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <p>Are you happy?</p> <!> <p style="font-size: 50px;">#</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_next(t_next(t_child(t_comp_parent_1)), true))) as HTMLElement;
+	let t_comp_anchor_1 = t_anchor(t_next(t_next(t_next(t_root_0), true))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
@@ -51,11 +50,11 @@ export default function AnswerButtonApp(
 	$run(function setProp() {
 		t_props_1["onNo"] = onAnswerNo;
 	});
-	AnswerButton(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+	AnswerButton(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 = t_fmt($state.isHappy ? "😀" : "😥");
 	});

package/test/party/components/temp/{AnswerButtonApp-server-e4ea88e0f4d65508950594437e5e34424bd28897.ts → AnswerButtonApp-server-b458692868307e6e08ad3deed9c2db542c28dee0.ts}

@@ -25,14 +25,17 @@ export default function AnswerButtonApp(
 	}
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <p>Are you happy?</p> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p>Are you happy?</p> <![>`;
 	const t_props_1: any = {};
 	t_props_1["onYes"] = onAnswerYes;
 	t_props_1["onNo"] = onAnswerNo;
 
-	$output += AnswerButton(t_props_1, $context)
-	$output += `<!]><!> <p style="font-size: 50px;">${t_fmt($state.isHappy ? "😀" : "😥")}</p> </div> `;
+	const t_comp_1 = AnswerButton(t_props_1, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> <p style="font-size: 50px;">${t_fmt($state.isHappy ? "😀" : "😥")}</p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{ColorSelect-client-70bf59d6399d63c0eed421b9d370a1e5c97a89ca.ts → ColorSelect-client-5f74d3b38193a0c9b22317598cdbf2f56754ca2b.ts}

@@ -42,11 +42,11 @@ export default function ColorSelect(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <div>#</div> <select> <!> </select> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div>#</div> <select> <!> </select> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_select_1 = t_next(t_next(t_next(t_child(t_next(t_root_0))), true)) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_root_0));
+	const t_select_1 = t_next(t_next(t_next(t_root_0), true)) as HTMLElement;
 	let t_for_anchor_1 = t_anchor(t_next(t_child(t_select_1))) as HTMLElement;
 
 	/* @for */
@@ -90,7 +90,7 @@ export default function ColorSelect(
 	);
 
 	// @ts-ignore
-	const t_text_4 = t_next(t_next(t_root_0), true);
+	const t_text_4 = t_next(t_select_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Selected: ${t_fmt(colors[$state.selectedColorId - 1].text)}`;
 	});

package/test/party/components/temp/{ColorSelect-server-90f83722bd85155ebb2b8ccdaf053cd28d3152be.ts → ColorSelect-server-cf0b1b533948a558e1705d9a7cca3c0b6ae8d315.ts}

@@ -23,12 +23,13 @@ export default function ColorSelect(
 	];
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <div>Selected: ${t_fmt(colors[$state.selectedColorId - 1].text)}</div> <select value="${t_attr($state.selectedColorId) || ""}"> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div>Selected: ${t_fmt(colors[$state.selectedColorId - 1].text)}</div> <select value="${t_attr($state.selectedColorId) || ""}"> <![>`;
 	for (let color of colors) {
-		$output += `<!^> <option ${color.id ? `value="${t_attr(color.id)}"` : ''} ${color.isDisabled ? `disabled="${t_attr(color.isDisabled)}"` : ''}> ${t_fmt(color.text)} </option> `;
+		t_body += `<!^> <option ${color.id ? `value="${t_attr(color.id)}"` : ''} ${color.isDisabled ? `disabled="${t_attr(color.isDisabled)}"` : ''}> ${t_fmt(color.text)} </option> `;
 	}
-	$output += `<!]><!> </select> </div> `;
+	t_body += `<!]><!> </select> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{Colors-server-e13d49ba57f7b0dc6fb10a333ec872f5207e1ff0.ts → Colors-server-b050714bfe752b88a99f6498f1b5c13abe6b56a5.ts}

@@ -12,12 +12,13 @@ export default function Colors(
 	const colors = ["red", "green", "blue"];
 
 	/* User interface */
-	let $output = "";
-	$output += ` <ul> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <ul> <![>`;
 	for (let color of colors) {
-		$output += `<!^>  <li>${t_fmt(color)}</li> `;
+		t_body += `<!^>  <li>${t_fmt(color)}</li> `;
 	}
-	$output += `<!]><!> </ul> `;
+	t_body += `<!]><!> </ul> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{Counter-client-3b876c148f2b14da1766eff77eb6c494f7be6414.ts → Counter-client-006caeda8766cb17a161da0c6f58f006f8f16e8b.ts}

@@ -31,13 +31,13 @@ export default function Counter(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <p>#</p> <button>+1</button> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <p>#</p> <button>+1</button> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_button_1 = t_next(t_next(t_next(t_child(t_next(t_root_0))), true)) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_root_0));
+	const t_button_1 = t_next(t_next(t_next(t_root_0), true)) as HTMLElement;
 	// @ts-ignore
-	const t_text_2 = t_next(t_next(t_root_0), true);
+	const t_text_2 = t_next(t_button_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Counter: ${t_fmt($state.count)}`;
 	});

package/test/party/components/temp/{Counter-server-7adf9376b38d97f1fd4b9c14108e6814e81f14ea.ts → Counter-server-931d36d8e4bcd114047bbfec8aa5f2fac0c2ce1e.ts}

@@ -19,8 +19,9 @@ export default function Counter(
 	}
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <p>Counter: ${t_fmt($state.count)}</p> <button>+1</button> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p>Counter: ${t_fmt($state.count)}</p> <button>+1</button> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{CssStyle-client-37465dd48d1479db1bae513eb0b92c4e9a15e9ea.ts → CssStyle-client-6ec06cbc4b34344234d289f6c4a9e427efff85a7.ts}

@@ -18,11 +18,11 @@ export default function CssStyle(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <h1 class="title torp-1ew8jkr">I am red</h1> <button style="font-size: 10rem;">I am a button</button> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <h1 class="title torp-1ew8jkr">I am red</h1> <button style="font-size: 10rem;">I am a button</button> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
 	// @ts-ignore
-	const t_text_1 = t_next(t_next(t_root_0), true);
+	const t_text_1 = t_next(t_next(t_next(t_next(t_root_0), true)), true);
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 

package/test/party/components/temp/{CssStyle-server-90a950501a20bfa5feac84ca6d97898c25bce2ed.ts → CssStyle-server-fa4bad3c82930632730e3b6b9f0e9193cab6f777.ts}

@@ -10,8 +10,9 @@ export default function CssStyle(
 ) {
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <h1 class="title torp-1ew8jkr">I am red</h1> <button style="font-size: 10rem;">I am a button</button> </div> `;
+	let t_body = "";
+	let t_head = "<style id='1ew8jkr'>.title.torp-1ew8jkr { color: red; } </style>";
+	t_body += ` <h1 class="title torp-1ew8jkr">I am red</h1> <button style="font-size: 10rem;">I am a button</button> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{DoubleCount-server-62c94483ebe9661e5ecc4f489787e32448ddcafa.ts → DoubleCount-server-8c013a97a08562deb6ad0f35e6e337203b0ddde9.ts}

@@ -18,8 +18,9 @@ export default function DoubleCount(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div>${t_fmt($state.doubleCount)}</div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div>${t_fmt($state.doubleCount)}</div> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{FunnyButton-server-e0adab2be2d283acb8a8b580479ade999dc918e9.ts → FunnyButton-server-3fd55a1e1dc71c183a6cea68e4c4693c988b7533.ts}

@@ -9,8 +9,9 @@ export default function FunnyButton(
 ) {
 
 	/* User interface */
-	let $output = "";
-	$output += ` <button style="
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <button style="
 				background: rgba(0, 0, 0, 0.4);
 				color: #fff;
 				padding: 10px 20px;
@@ -22,11 +23,11 @@ export default function FunnyButton(
 				outline: 0;
 			"> <![>`;
 	if ($slots && $slots["_"]) {
-		$output += $slots["_"](undefined, $context);
+		t_body += $slots["_"](undefined, $context);
 	} else {
-		$output += ` <span>No content found</span> `;
+		t_body += ` <span>No content found</span> `;
 	}
-	$output += `<!]><!> </button> `;
+	t_body += `<!]><!> </button> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{FunnyButtonApp-client-daa929c6d64f67e4a1a387b884317a4bb615b5d4.ts → FunnyButtonApp-client-1f2258b8488469d4704366bc49f5c171d8a854ae.ts}

@@ -1,7 +1,6 @@
 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";
@@ -22,16 +21,14 @@ export default function FunnyButtonApp(
 	/* 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 */
-	FunnyButton(t_comp_parent_1, t_comp_anchor_1, undefined, $context);
+	FunnyButton(t_fragment_0, t_comp_anchor_1, undefined, $context);
 
-	const t_comp_parent_2 = t_comp_parent_1 as HTMLElement;
 	let t_comp_anchor_2 = t_anchor(t_next(t_next(t_comp_anchor_1, true))) as HTMLElement;
 
 	/* @component */
@@ -50,10 +47,10 @@ export default function FunnyButtonApp(
 		t_add_fragment(t_fragment_2, $sparent, $sanchor, t_text_1);
 		t_next(t_text_1);
 	}
-	FunnyButton(t_comp_parent_2, t_comp_anchor_2, undefined, $context, t_slots_1);
+	FunnyButton(t_fragment_0, t_comp_anchor_2, undefined, $context, t_slots_1);
 
 	// @ts-ignore
-	const t_text_2 = t_next(t_comp_parent_2, true);
+	const t_text_2 = t_next(t_comp_anchor_2, true);
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
 	t_next(t_text_2);
 

package/test/party/components/temp/{FunnyButtonApp-server-80d85ede7da558154a5aa17cd602d6724bf1c9cb.ts → FunnyButtonApp-server-6463d1c57adf61450d1415f0d76da4561ca3e798.ts}

@@ -12,11 +12,14 @@ export default function FunnyButtonApp(
 ) {
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 
-	$output += FunnyButton(undefined, $context)
-	$output += `<!]><!> <![>`;
+	const t_comp_1 = FunnyButton(undefined, $context);
+	t_body += t_comp_1.body;
+	t_head += t_comp_1.head;
+	t_body += `<!]><!> <![>`;
 	const t_slots_1: Record<string, ServerSlotRender> = {};
 	t_slots_1["_"] = (
 		// @ts-ignore
@@ -24,13 +27,15 @@ export default function FunnyButtonApp(
 		// @ts-ignore
 		$context?: Record<PropertyKey, any>
 	) => {
-		let $output = "";
-		$output += `Click me!`;
-		return $output;
+		let t_body = "";
+		t_body += `Click me!`;
+		return t_body;
 	}
 
-	$output += FunnyButton(undefined, $context, t_slots_1)
-	$output += `<!]><!> </div> `;
+	const t_comp_2 = FunnyButton(undefined, $context, t_slots_1);
+	t_body += t_comp_2.body;
+	t_head += t_comp_2.head;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{HelloWorld-server-e0ed80e7531f303952a4af30d646263ff2e4ead6.ts → HelloWorld-server-50dd4393d55ecd33d5b7684c4f9ed41dfa0ceb5d.ts}

@@ -10,8 +10,9 @@ export default function HelloWorld(
 ) {
 
 	/* User interface */
-	let $output = "";
-	$output += ` <h1>Hello world</h1> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h1>Hello world</h1> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{InputFocused-server-ee70758a515227c04788be0e298a79c277994ccd.ts → InputFocused-server-7b062b0dd7686ccc389c3c1a17f37e9a9bb19da9.ts}

@@ -18,8 +18,9 @@ export default function InputFocused(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <input ref="${t_attr(inputElement) || ""}"> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <input ref="${t_attr(inputElement) || ""}"> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{InputHello-client-2a4cbd980534fde14b9d3e8a2f8e4f59a4f15d64.ts → InputHello-client-496d26bdeb6a168c4242e45f35d22e6ecbd211b9.ts}

@@ -27,13 +27,13 @@ export default function InputHello(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <p>#</p> <input></input> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <p>#</p> <input></input> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_next(t_root_0))), true)) as HTMLInputElement;
+	const t_text_1 = t_child(t_next(t_root_0));
+	const t_input_1 = t_next(t_next(t_next(t_root_0), true)) as HTMLInputElement;
 	// @ts-ignore
-	const t_text_2 = t_next(t_next(t_root_0), true);
+	const t_text_2 = t_next(t_input_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.text);
 	});

package/test/party/components/temp/{InputHello-server-1b9dd5442ded022abe92a9075ca5a4bb90486cbe.ts → InputHello-server-a5fb3e0d8766c19d177a1f4d43d421c7da1b92ab.ts}

@@ -16,8 +16,9 @@ export default function InputHello(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <p>${t_fmt($state.text)}</p> <input value="${t_attr($state.text) || ""}"> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p>${t_fmt($state.text)}</p> <input value="${t_attr($state.text) || ""}"> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/party/components/temp/{IsAvailable-client-3949f85aea0e935c3b59ab1389baee836eff1866.ts → IsAvailable-client-491b92b5e21ebe1bbab47b2e422c35fb996b55e1.ts}

@@ -27,13 +27,13 @@ export default function IsAvailable(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <div>#</div> <input id="is-available" type="checkbox"></input> <label for="is-available">Is available</label> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div>#</div> <input id="is-available" type="checkbox"></input> <label for="is-available">Is available</label> `);
 	// @ts-ignore
 	const t_root_0 = t_root(t_fragment_0, true);
-	const t_text_1 = t_child(t_next(t_child(t_next(t_root_0))));
-	const t_input_1 = t_next(t_next(t_next(t_child(t_next(t_root_0))), true)) as HTMLInputElement;
+	const t_text_1 = t_child(t_next(t_root_0));
+	const t_input_1 = t_next(t_next(t_next(t_root_0), true)) as HTMLInputElement;
 	// @ts-ignore
-	const t_text_2 = t_next(t_next(t_root_0), true);
+	const t_text_2 = t_next(t_next(t_next(t_input_1, true)), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = t_fmt($state.isAvailable ? "Available" : "Not available");
 	});