@torpor/view 0.1.11 → 0.2.0

package/test/party/components/TrafficLight.torp

@@ -12,19 +12,17 @@ export default function TrafficLight() {
 	}
 
 	@render {
-		<div>
-			<button onclick={nextLight}>Next light</button>
-			<p>Light is: {$state.light}</p>
-			<p>
-				You must
-				@if ($state.light === "red") {
-					<span>STOP</span>
-				} else if ($state.light === "orange") {
-					<span>SLOW DOWN</span>
-				} else if ($state.light === "green") {
-					<span>GO</span>
-				}
-			</p>
-		</div>
+		<button onclick={nextLight}>Next light</button>
+		<p>Light is: {$state.light}</p>
+		<p>
+			You must
+			@if ($state.light === "red") {
+				<span>STOP</span>
+			} else if ($state.light === "orange") {
+				<span>SLOW DOWN</span>
+			} else if ($state.light === "green") {
+				<span>GO</span>
+			}
+		</p>
 	}
 }

package/test/party/components/UserProfile.torp

@@ -5,11 +5,9 @@ export default function UserProfile($props: {
 	isAvailable: boolean
 }) {
 	@render {
-		<div>
-			<p>My name is {$props.name}!</p>
-			<p>My age is {$props.age}!</p>
-			<p>My favourite colors are {$props.favouriteColors.join(", ")}!</p>
-			<p>I am {$props.isAvailable ? "available" : "not available"}</p>
-		</div>
+		<p>My name is {$props.name}!</p>
+		<p>My age is {$props.age}!</p>
+		<p>My favourite colors are {$props.favouriteColors.join(", ")}!</p>
+		<p>I am {$props.isAvailable ? "available" : "not available"}</p>
 	}
 }

package/test/party/components/UserProfileContext.torp

@@ -2,13 +2,11 @@ export default function UserProfileContext() {
 	$context.user = $watch($context.user);
 
 	@render {
-		<div>
-			<h2>My Profile</h2>
-			<p>Username: {$context.user.username}</p>
-			<p>Email: {$context.user.email}</p>
-			<button onclick={() => ($context.user.username = "Jane")}>
-				Update username to Jane
-			</button>
-		</div>
+		<h2>My Profile</h2>
+		<p>Username: {$context.user.username}</p>
+		<p>Email: {$context.user.email}</p>
+		<button onclick={() => ($context.user.username = "Jane")}>
+			Update username to Jane
+		</button>
 	}
 }

package/test/party/components/UserProfileContextApp.torp

@@ -12,9 +12,7 @@ export default function UserProfileContextApp() {
 	$context.user = $user;
 
 	@render {
-		<div>
-			<h1>Welcome back, {$user.username}</h1>
-			<UserProfileContext />
-		</div>
+		<h1>Welcome back, {$user.username}</h1>
+		<UserProfileContext />
 	}
 }

package/test/party/components/output/AnswerButton-client.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/output/AnswerButton-server.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/output/AnswerButtonApp-client.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/output/AnswerButtonApp-server.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/output/ColorSelect-client.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/output/ColorSelect-server.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/output/Colors-server.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/output/Counter-client.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/output/Counter-server.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/output/CssStyle-client.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/output/CssStyle-server.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/output/DoubleCount-server.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/output/FunnyButton-server.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/output/FunnyButtonApp-client.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/output/FunnyButtonApp-server.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/output/HelloWorld-server.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/output/InputFocused-server.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/output/InputHello-client.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/output/InputHello-server.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/output/IsAvailable-client.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");
 	});

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

@@ -15,8 +15,9 @@ export default function IsAvailable(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <div>${t_fmt($state.isAvailable ? "Available" : "Not available")}</div> <input id="is-available" type="checkbox" checked="${$state.isAvailable || false}"> <label for="is-available">Is available</label> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div>${t_fmt($state.isAvailable ? "Available" : "Not available")}</div> <input id="is-available" type="checkbox" checked="${$state.isAvailable || false}"> <label for="is-available">Is available</label> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

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

@@ -15,8 +15,9 @@ export default function Name(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <h1>Hello ${t_fmt($state.name)}</h1> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h1>Hello ${t_fmt($state.name)}</h1> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

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

@@ -16,8 +16,9 @@ export default function NameUpdate(
 	$state.name = "Jane"
 
 	/* User interface */
-	let $output = "";
-	$output += ` <h1>Hello ${t_fmt($state.name)}</h1> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <h1>Hello ${t_fmt($state.name)}</h1> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

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

@@ -20,8 +20,9 @@ export default function PageTitle(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <p>Page title: ${t_fmt($state.pageTitle)}</p> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p>Page title: ${t_fmt($state.pageTitle)}</p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

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

@@ -27,14 +27,14 @@ export default function PickPill(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <div>#</div> <input id="blue-pill" type="radio" value="blue"></input> <label for="blue-pill">Blue pill</label> <input id="red-pill" type="radio" value="red"></input> <label for="red-pill">Red pill</label> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div>#</div> <input id="blue-pill" type="radio" value="blue"></input> <label for="blue-pill">Blue pill</label> <input id="red-pill" type="radio" value="red"></input> <label for="red-pill">Red pill</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;
 	const t_input_2 = t_next(t_next(t_next(t_next(t_input_1, true)), 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_2, true)), true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Picked: ${t_fmt($state.picked)}`;
 	});

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

@@ -16,8 +16,9 @@ export default function PickPill(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <div>Picked: ${t_fmt($state.picked)}</div> <input id="blue-pill" group="${t_attr($state.picked) || ""}" type="radio" value="blue"> <label for="blue-pill">Blue pill</label> <input id="red-pill" group="${t_attr($state.picked) || ""}" type="radio" value="red"> <label for="red-pill">Red pill</label> </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div>Picked: ${t_fmt($state.picked)}</div> <input id="blue-pill" group="${t_attr($state.picked) || ""}" type="radio" value="blue"> <label for="blue-pill">Blue pill</label> <input id="red-pill" group="${t_attr($state.picked) || ""}" type="radio" value="red"> <label for="red-pill">Red pill</label> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

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

@@ -24,8 +24,9 @@ export default function Time(
 	});
 
 	/* User interface */
-	let $output = "";
-	$output += ` <p>Current time: ${t_fmt($state.time)}</p> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p>Current time: ${t_fmt($state.time)}</p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }