@torpor/view 0.1.10 → 0.2.0

package/test/for/components/temp/{ForOf-server-8c2c33ca6595bf0a5e952ca9971e595e18446623.ts → ForOf-server-cd2b01507304e25c34030755b915f56785375de8.ts}

@@ -11,12 +11,13 @@ export default function ForOf(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <section> <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <section> <![>`;
 	for (let item of $props.items) {
-		$output += `<!^> <p> ${t_fmt(item)} </p> `;
+		t_body += `<!^> <p> ${t_fmt(item)} </p> `;
 	}
-	$output += `<!]><!> </section> `;
+	t_body += `<!]><!> </section> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/function/components/Function.torp

@@ -2,15 +2,13 @@ export default function Function() {
 	let $state = $watch({ counter: 0 })
 
 	@render {
-		<div>
-			<button id=increment onclick={increment}>Increment</button>
-			@function increment() {
-					$state.counter += 1;
-					let x = "";
-			}
-			<p>
-					The count is {$state.counter}.
-			</p>
-		</div>
+		<button id=increment onclick={increment}>Increment</button>
+		@function increment() {
+				$state.counter += 1;
+				let x = "";
+		}
+		<p>
+				The count is {$state.counter}.
+		</p>
 	}
 }

package/test/function/components/output/Function-client.ts

@@ -25,13 +25,13 @@ export default function Function(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <button id=increment>Increment</button> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button id=increment>Increment</button> <p>#</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)));
 	// @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_button_1, true)), true);
 	t_event(t_button_1, "click", increment);
 
 	/* @function */

package/test/function/components/output/Function-server.ts

@@ -13,15 +13,16 @@ export default function Function(
 	let $state = $watch({ counter: 0 })
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <button id="increment">Increment</button> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <button id="increment">Increment</button> `;
 
 	function increment() {
 		$state.counter += 1;
 		let x = "";
 	};
 
-	$output += ` <p> The count is ${t_fmt($state.counter)}. </p> </div> `;
+	t_body += ` <p> The count is ${t_fmt($state.counter)}. </p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/function/components/temp/{Function-client-4e2168306756eb927d5ed4b673334b357eecaa74.ts → Function-client-2068eb8ae35b3157b8eda79addde6afd9f4d7006.ts}

@@ -25,13 +25,13 @@ export default function Function(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <button id=increment>Increment</button> <p>#</p> </div> `);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <button id=increment>Increment</button> <p>#</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)));
 	// @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_button_1, true)), true);
 	t_event(t_button_1, "click", increment);
 
 	/* @function */

package/test/function/components/temp/{Function-server-2b19d0cd881c31dc67132107c6e322a18701c318.ts → Function-server-4b66a728f6f1b170d678313238bdc9158356511e.ts}

@@ -13,15 +13,16 @@ export default function Function(
 	let $state = $watch({ counter: 0 })
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div> <button id="increment">Increment</button> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <button id="increment">Increment</button> `;
 
 	function increment() {
 		$state.counter += 1;
 		let x = "";
 	};
 
-	$output += ` <p> The count is ${t_fmt($state.counter)}. </p> </div> `;
+	t_body += ` <p> The count is ${t_fmt($state.counter)}. </p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/html/components/output/Html-server.ts

@@ -10,8 +10,9 @@ export default function Html(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <p> <![>${$props.html}<!]><!> </p> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p> <![>${$props.html}<!]><!> </p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/html/components/temp/{Html-server-d159b0ef04b1f65ae4f9e05a7b44b21e7aa14cf9.ts → Html-server-4f73a2b0c5cd9b82666a99ec6a217c758d435008.ts}

@@ -10,8 +10,9 @@ export default function Html(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <p> <![>${$props.html}<!]><!> </p> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <p> <![>${$props.html}<!]><!> </p> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/hydrateComponent.ts

@@ -8,9 +8,8 @@ export default function hydrateComponent(
 	serverComponent: ServerComponent,
 	state?: any,
 ): void {
-	const html = serverComponent(state);
-	//console.log("HTML", html);
-	container.innerHTML = html;
+	const { body } = serverComponent(state);
+	container.innerHTML = body;
 	container.ownerDocument.body.appendChild(container);
 
 	hydrate(container, clientComponent, state);

package/test/if/components/output/IfAfterIf-server.ts

@@ -10,16 +10,17 @@ export default function IfAfterIf(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 10) {
-		$output += `<!^> <p> It's true! </p> `;
+		t_body += `<!^> <p> It's true! </p> `;
 	}
-	$output += `<!]><!> <![>`;
+	t_body += `<!]><!> <![>`;
 	if ($props.counter > 5) {
-		$output += `<!^> <p> It's also true! </p> `;
+		t_body += `<!^> <p> It's also true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/output/IfElse-server.ts

@@ -10,15 +10,16 @@ export default function IfElse(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 7) {
-		$output += `<!^> <p> It's true! </p> <p> That's right </p> `;
+		t_body += `<!^> <p> It's true! </p> <p> That's right </p> `;
 	}
 	else {
-		$output += `<!^> <p> It's not true... </p> `;
+		t_body += `<!^> <p> It's not true... </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/output/IfElseIf-server.ts

@@ -10,18 +10,19 @@ export default function IfElseIf(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 10) {
-		$output += `<!^> <p> It's over ten! </p> `;
+		t_body += `<!^> <p> It's over ten! </p> `;
 	}
 	else if ($props.counter > 5) {
-		$output += `<!^> <p> It's over five! </p> `;
+		t_body += `<!^> <p> It's over five! </p> `;
 	}
 	else {
-		$output += `<!^> <p> It's not there yet </p> `;
+		t_body += `<!^> <p> It's not there yet </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/output/IfFalse-server.ts

@@ -10,12 +10,13 @@ export default function IfFalse(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 7) {
-		$output += `<!^> <p> It's true! </p> `;
+		t_body += `<!^> <p> It's true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/output/IfNested-server.ts

@@ -10,22 +10,23 @@ export default function IfNested(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 5) {
-		$output += `<!^> <![>`;
+		t_body += `<!^> <![>`;
 		if ($props.counter > 10) {
-			$output += `<!^> <p> It's both true! </p> `;
+			t_body += `<!^> <p> It's both true! </p> `;
 		}
 		else {
-			$output += `<!^> <p> The second is not true! </p> `;
+			t_body += `<!^> <p> The second is not true! </p> `;
 		}
-		$output += `<!]><!> `;
+		t_body += `<!]><!> `;
 	}
 	else {
-		$output += `<!^> <p> The first is not true! </p> `;
+		t_body += `<!^> <p> The first is not true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/temp/{IfAfterIf-server-a5005147e7902d1a5a048c9fe07feb9804eb6560.ts → IfAfterIf-server-3e6a3beab27821c3e53290ee72eca811814aad38.ts}

@@ -10,16 +10,17 @@ export default function IfAfterIf(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 10) {
-		$output += `<!^> <p> It's true! </p> `;
+		t_body += `<!^> <p> It's true! </p> `;
 	}
-	$output += `<!]><!> <![>`;
+	t_body += `<!]><!> <![>`;
 	if ($props.counter > 5) {
-		$output += `<!^> <p> It's also true! </p> `;
+		t_body += `<!^> <p> It's also true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/temp/{IfElse-server-80d93e5fc4ceba7a645f7081fa11b177dbe730d0.ts → IfElse-server-1b5006dfad695f257c7453a79bde3944898fbf6d.ts}

@@ -10,15 +10,16 @@ export default function IfElse(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 7) {
-		$output += `<!^> <p> It's true! </p> <p> That's right </p> `;
+		t_body += `<!^> <p> It's true! </p> <p> That's right </p> `;
 	}
 	else {
-		$output += `<!^> <p> It's not true... </p> `;
+		t_body += `<!^> <p> It's not true... </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/temp/{IfElseIf-server-ddc7348705d51b02538301e0aa704130748992cf.ts → IfElseIf-server-11c65065e9e5640ad65cd0c37af07f1e57c4f49c.ts}

@@ -10,18 +10,19 @@ export default function IfElseIf(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 10) {
-		$output += `<!^> <p> It's over ten! </p> `;
+		t_body += `<!^> <p> It's over ten! </p> `;
 	}
 	else if ($props.counter > 5) {
-		$output += `<!^> <p> It's over five! </p> `;
+		t_body += `<!^> <p> It's over five! </p> `;
 	}
 	else {
-		$output += `<!^> <p> It's not there yet </p> `;
+		t_body += `<!^> <p> It's not there yet </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/temp/{IfFalse-server-e8385013cfdde584b43cc0d71311cbb417859116.ts → IfFalse-server-40d07bc07e5edffd7386fb6016cd025b98175219.ts}

@@ -10,12 +10,13 @@ export default function IfFalse(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 7) {
-		$output += `<!^> <p> It's true! </p> `;
+		t_body += `<!^> <p> It's true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/if/components/temp/{IfNested-server-285a5d8e0e0fcc8ccf421df152fdc00811782835.ts → IfNested-server-061ea3d56576a352be8a9db8424fae0f1d74cd36.ts}

@@ -10,22 +10,23 @@ export default function IfNested(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <![>`;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <![>`;
 	if ($props.counter > 5) {
-		$output += `<!^> <![>`;
+		t_body += `<!^> <![>`;
 		if ($props.counter > 10) {
-			$output += `<!^> <p> It's both true! </p> `;
+			t_body += `<!^> <p> It's both true! </p> `;
 		}
 		else {
-			$output += `<!^> <p> The second is not true! </p> `;
+			t_body += `<!^> <p> The second is not true! </p> `;
 		}
-		$output += `<!]><!> `;
+		t_body += `<!]><!> `;
 	}
 	else {
-		$output += `<!^> <p> The first is not true! </p> `;
+		t_body += `<!^> <p> The first is not true! </p> `;
 	}
-	$output += `<!]><!> `;
+	t_body += `<!]><!> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/mount/components/output/Mount-server.ts

@@ -17,8 +17,9 @@ export default function Mount(
 	});
 
 	/* 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/mount/components/temp/{Mount-server-62f94f276c2d6c9048765a77b575cb21146917f1.ts → Mount-server-8564e4e0886ea754dfedf9a4a5fd82f0484c1d83.ts}

@@ -17,8 +17,9 @@ export default function Mount(
 	});
 
 	/* 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/on-mount/components/output/OnMount-server.ts

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

package/test/on-mount/components/temp/{OnMount-server-c531f718eb68754ea6c3001d5db9c07c511e434c.ts → OnMount-server-2ff035e067926fadc284030075aa5da69a05cf31.ts}

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

package/test/party/components/AnswerButton.torp

@@ -1,9 +1,6 @@
 export default function AnswerButton($props: any) {
 	@render {
-		<div>
-			<button onclick={$props.onYes}>YES</button>
-
-			<button onclick={$props.onNo}>NO</button>
-		</div>
+		<button onclick={$props.onYes}>YES</button>
+		<button onclick={$props.onNo}>NO</button>
 	}
 }

package/test/party/components/AnswerButtonApp.torp

@@ -14,10 +14,8 @@ export default function AnswerButtonApp() {
 	}
 
 	@render {
-		<div>
-			<p>Are you happy?</p>
-			<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
-			<p style="font-size: 50px;">{$state.isHappy ? "😀" : "😥"}</p>
-		</div>
+		<p>Are you happy?</p>
+		<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
+		<p style="font-size: 50px;">{$state.isHappy ? "😀" : "😥"}</p>
 	}
 }

package/test/party/components/ColorSelect.torp

@@ -11,16 +11,14 @@ export default function ColorSelect() {
 	];
 
 	@render {
-		<div>
-			<div>Selected: {colors[$state.selectedColorId - 1].text}</div>
+		<div>Selected: {colors[$state.selectedColorId - 1].text}</div>
 
-			<select &value={$state.selectedColorId}>
-				@for (let color of colors) {
-					<option value={color.id} disabled={color.isDisabled}>
-						{color.text}
-					</option>
-				}
-			</select>
-		</div>
+		<select &value={$state.selectedColorId}>
+			@for (let color of colors) {
+				<option value={color.id} disabled={color.isDisabled}>
+					{color.text}
+				</option>
+			}
+		</select>
 	}
 }

package/test/party/components/Counter.torp

@@ -8,9 +8,7 @@ export default function Counter() {
 	}
 
 	@render {
-		<div>
-			<p>Counter: {$state.count}</p>
-			<button onclick={incrementCount}>+1</button>
-		</div>
+		<p>Counter: {$state.count}</p>
+		<button onclick={incrementCount}>+1</button>
 	}
 }

package/test/party/components/CssStyle.torp

@@ -1,9 +1,7 @@
 export default function CssStyle() {
 	@render {
-		<div>
-			<h1 class="title">I am red</h1>
-			<button style="font-size: 10rem;">I am a button</button>
-		</div>
+		<h1 class="title">I am red</h1>
+		<button style="font-size: 10rem;">I am a button</button>
 	}
 
 	@style {

package/test/party/components/FunnyButtonApp.torp

@@ -3,9 +3,7 @@ import FunnyButton from "./FunnyButton.torp";
 
 export default function FunnyButtonApp() {
 	@render {
-		<div>
-			<FunnyButton />
-			<FunnyButton>Click me!</FunnyButton>
-		</div>
+		<FunnyButton />
+		<FunnyButton>Click me!</FunnyButton>
 	}
 }

package/test/party/components/InputHello.torp

@@ -4,9 +4,7 @@ export default function InputHello() {
 	});
 
 	@render {
-		<div>
-			<p>{$state.text}</p>
-			<input &value={$state.text} />
-		</div>
+		<p>{$state.text}</p>
+		<input &value={$state.text} />
 	}
 }

package/test/party/components/IsAvailable.torp

@@ -4,11 +4,9 @@ export default function IsAvailable() {
 	});
 
 	@render {
-		<div>
-			<div>{$state.isAvailable ? "Available" : "Not available"}</div>
+		<div>{$state.isAvailable ? "Available" : "Not available"}</div>
 
-			<input id="is-available" type="checkbox" &checked={$state.isAvailable} />
-			<label for="is-available">Is available</label>
-		</div>
+		<input id="is-available" type="checkbox" &checked={$state.isAvailable} />
+		<label for="is-available">Is available</label>
 	}
 }

package/test/party/components/PickPill.torp

@@ -4,14 +4,12 @@ export default function PickPill() {
 	});
 
 	@render {
-		<div>
-			<div>Picked: {$state.picked}</div>
+		<div>Picked: {$state.picked}</div>
 
-			<input id="blue-pill" &group={$state.picked} type="radio" value="blue" />
-			<label for="blue-pill">Blue pill</label>
+		<input id="blue-pill" &group={$state.picked} type="radio" value="blue" />
+		<label for="blue-pill">Blue pill</label>
 
-			<input id="red-pill" &group={$state.picked} type="radio" value="red" />
-			<label for="red-pill">Red pill</label>
-		</div>
+		<input id="red-pill" &group={$state.picked} type="radio" value="red" />
+		<label for="red-pill">Red pill</label>
 	}
 }