@torpor/view 0.1.10 → 0.2.0

package/src/index.ts

@@ -6,11 +6,12 @@ import t_animate from "./render/addAnimation";
 import t_event from "./render/addEvent";
 import t_add_fragment from "./render/addFragment";
 import t_apply_props from "./render/applyProps";
+import t_class from "./render/buildClasses";
+import t_style from "./render/buildStyles";
 import clearLayoutSlot from "./render/clearLayoutSlot";
+import fillLayoutSlot from "./render/fillLayoutSlot";
 import t_fmt from "./render/formatText";
-import t_class from "./render/getClasses";
 import t_fragment from "./render/getFragment";
-import t_style from "./render/getStyles";
 import hydrate from "./render/hydrate";
 import mount from "./render/mount";
 import t_list_item from "./render/newListItem";
@@ -24,7 +25,6 @@ import t_pop_range from "./render/popRange";
 import t_push_range from "./render/pushRange";
 import t_run_control from "./render/runControl";
 import t_run_branch from "./render/runControlBranch";
-import runLayoutSlot from "./render/runLayoutSlot";
 import t_run_list from "./render/runList";
 import t_attribute from "./render/setAttribute";
 import t_dynamic from "./render/setDynamicElement";
@@ -35,7 +35,7 @@ import { type ServerSlotRender } from "./types/ServerSlotRender";
 import { type SlotRender } from "./types/SlotRender";
 
 // Mount and hydrate
-export { mount, hydrate, runLayoutSlot, clearLayoutSlot };
+export { mount, hydrate, fillLayoutSlot, clearLayoutSlot };
 
 // Functions for the user that can be called from components
 export { $watch, $unwrap, $run, $mount };

package/src/render/addFragment.ts

@@ -1,6 +1,7 @@
 import animate from "../motion/animate";
 import $run from "./$run";
 import context from "./context";
+import isFragmentNode from "./isFragmentNode";
 
 export default function addFragment(
 	fragment: DocumentFragment,
@@ -24,7 +25,7 @@ export default function addFragment(
 		}
 	}
 
-	let parentIsFragment = parent.nodeType === 11;
+	let parentIsFragment = isFragmentNode(parent);
 
 	if (!hydrationNode) {
 		// HACK: We need to be able to add fragments to new fragments as well as

package/src/render/{getClasses.ts → buildClasses.ts}

@@ -1,10 +1,17 @@
-export default function getClasses(value: unknown, styleHash?: string): string {
-	let classes: string[] = [];
-	gatherNames("", value, classes);
-	if (styleHash) {
-		classes.push(styleHash);
+export default function buildClasses(value: unknown, styleHash?: string): string {
+	if (typeof value === "string") {
+		if (styleHash) {
+			value += " " + styleHash;
+		}
+		return value;
+	} else {
+		let classes: string[] = [];
+		gatherNames("", value, classes);
+		if (styleHash) {
+			classes.push(styleHash);
+		}
+		return classes.join(" ");
 	}
-	return classes.join(" ");
 }
 
 function gatherNames(name: unknown, value: unknown, classes: string[]) {

package/src/render/buildStyles.ts

@@ -0,0 +1,19 @@
+export default function buildStyles(value: unknown): string {
+	if (typeof value === "string") {
+		return value;
+	} else {
+		let styles: string[] = [];
+		if (value) {
+			if (Array.isArray(value)) {
+				for (let v of value) {
+					styles.push(v);
+				}
+			} else if (typeof value === "object") {
+				for (let [n, v] of Object.entries(value)) {
+					styles.push(`${n}: ${v}`);
+				}
+			}
+		}
+		return styles.join("; ");
+	}
+}

package/src/render/{runLayoutSlot.ts → fillLayoutSlot.ts}

@@ -5,7 +5,7 @@ import newRange from "./newRange";
 import popRange from "./popRange";
 import pushRange from "./pushRange";
 
-export default function runLayoutSlot(
+export default function fillLayoutSlot(
 	component: Component,
 	slot: SlotRender,
 	parent: ParentNode,

package/src/render/isCommentNode.ts

@@ -0,0 +1,3 @@
+export default function isCommentNode(node: Node | null | undefined): node is Comment {
+	return node?.nodeType === 8;
+}

package/src/render/isFragmentNode.ts

@@ -0,0 +1,3 @@
+export default function isFragmentNode(node: Node | null | undefined): node is DocumentFragment {
+	return node?.nodeType === 11;
+}

package/src/render/isTextNode.ts

@@ -0,0 +1,3 @@
+export default function isTextNode(node: Node | null | undefined): node is Text {
+	return node?.nodeType === 3;
+}

package/src/render/moveRange.ts

@@ -1,8 +1,17 @@
 import { type Range } from "../types/Range";
+import isFragmentNode from "./isFragmentNode";
 
 export default function moveRange(parent: Node, range: Range, before: ChildNode | null): void {
 	const endNode = range.endNode || range.startNode;
 	let currentNode = range.startNode;
+
+	// HACK: The parent may have once been a document fragment, but will now be
+	// in the document, so we will have to use the before element's parent,
+	// which should work as long as we are always passing a before element...
+	if (isFragmentNode(parent)) {
+		parent = before!.parentNode!;
+	}
+
 	while (currentNode) {
 		const nextNode = currentNode.nextSibling;
 		parent.insertBefore(currentNode, before);

package/src/render/nodeAnchor.ts

@@ -1,6 +1,6 @@
 import context from "./context";
 import { HYDRATION_END, HYDRATION_START } from "./hydrationMarkers";
-import isComment from "./isComment";
+import isCommentNode from "./isCommentNode";
 import nodeNext from "./nodeNext";
 
 /**
@@ -19,7 +19,7 @@ import nodeNext from "./nodeNext";
  */
 export default function nodeAnchor(node: ChildNode): ChildNode {
 	if (context.hydrationNode) {
-		if (isComment(node) && node.data === HYDRATION_START) {
+		if (isCommentNode(node) && node.data === HYDRATION_START) {
 			// Skip and remove the start node, setting the hydration node in
 			// nodeNext
 			let currentNode = nodeNext(node);
@@ -28,7 +28,7 @@ export default function nodeAnchor(node: ChildNode): ChildNode {
 			// Go through siblings until we get to the end
 			let level = 1;
 			while (currentNode) {
-				if (isComment(currentNode)) {
+				if (isCommentNode(currentNode)) {
 					if (currentNode.data === HYDRATION_START) {
 						level += 1;
 					} else if (currentNode.data === HYDRATION_END) {

package/src/render/nodeCheckHydrationBreak.ts

@@ -1,6 +1,6 @@
 import context from "./context";
 import { HYDRATION_BREAK } from "./hydrationMarkers";
-import isComment from "./isComment";
+import isCommentNode from "./isCommentNode";
 
 // TODO: It would be good to remove this, if possible
 
@@ -14,7 +14,7 @@ import isComment from "./isComment";
  */
 export default function nodeCheckHydrationBreak(node: ChildNode | null): ChildNode | null {
 	if (context.hydrationNode) {
-		if (node && isComment(node) && node.data === HYDRATION_BREAK) {
+		if (node && isCommentNode(node) && node.data === HYDRATION_BREAK) {
 			let comment = node;
 			node = node.nextSibling;
 			comment.remove();

package/src/render/nodeNext.ts

@@ -1,5 +1,5 @@
 import context from "./context";
-import isText from "./isText";
+import isTextNode from "./isTextNode";
 import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
 
 /**
@@ -13,7 +13,7 @@ import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
 export default function nodeNext(node: ChildNode, text = false): ChildNode {
 	// If the required node is a text node, and we already have one, just use
 	// it. This is caused by text nodes being merged in HTML
-	if (context.hydrationNode && text && isText(node)) {
+	if (context.hydrationNode && text && isTextNode(node)) {
 		return node;
 	}
 

package/src/render/nodeRoot.ts

@@ -1,5 +1,7 @@
 import context from "./context";
-import isText from "./isText";
+import { HYDRATION_START } from "./hydrationMarkers";
+import isCommentNode from "./isCommentNode";
+import isTextNode from "./isTextNode";
 
 /**
  * Gets the first child in a fragment.
@@ -16,11 +18,18 @@ export default function nodeRoot(parent: Node, text = false): ChildNode {
 		// If the root node we need is a text node, and the hydration node is
 		// not a text node but the previous node is, use the previous node. This
 		// is caused by text nodes being merged in HTML
-		if (text && !isText(rootNode) && isText(rootNode.previousSibling)) {
+		if (text && !isTextNode(rootNode) && isTextNode(rootNode.previousSibling)) {
 			rootNode = rootNode.previousSibling;
 			context.hydrationNode = rootNode;
 		}
 
+		// HACK: If the root node is a hydration start comment node, get the
+		// next one instead
+		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
+			rootNode = rootNode.nextSibling!;
+			context.hydrationNode = rootNode;
+		}
+
 		// If hydrating, set the active range's start node
 		const range = context.activeRange;
 		if (range && !range.startNode) {

package/src/ssr.ts

@@ -2,10 +2,10 @@ import $mount from "./render/$serverMount";
 import $run from "./render/$serverRun";
 import $unwrap from "./render/$serverUnwrap";
 import $watch from "./render/$serverWatch";
+import t_class from "./render/buildClasses";
+import t_style from "./render/buildStyles";
 import t_attr from "./render/formatAttributeText";
 import t_fmt from "./render/formatText";
-import t_class from "./render/getClasses";
-import t_style from "./render/getStyles";
 import { type ServerSlotRender } from "./types/ServerSlotRender";
 
 export { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };

package/src/types/ServerComponent.ts

@@ -7,4 +7,4 @@ export type ServerComponent = (
 	$props?: Record<string, any>,
 	$context?: Record<string, any>,
 	$slots?: Record<string, ServerSlotRender>,
-) => string;
+) => { body: string; head: string };

package/test/attributes/components/output/Attributes-server.ts

@@ -11,8 +11,9 @@ export default function Attributes(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/attributes/components/temp/{Attributes-server-80f9f58fd6cb30df11867386d4f0b15b44401ebe.ts → Attributes-server-f4c59f5e4757ce0113907389902499efc36cfe38.ts}

@@ -11,8 +11,9 @@ export default function Attributes(
 	$props ??= {};
 
 	/* User interface */
-	let $output = "";
-	$output += ` <div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div> `;
+	let t_body = "";
+	let t_head = "";
+	t_body += ` <div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div> `;
 
-	return $output;
+	return { body: t_body, head: t_head };
 }

package/test/await/components/Await.torp

@@ -17,17 +17,15 @@ export default function Await() {
 		}
 
 	@render {
-		<div>
-				@await ($state.guesser) {
-						<p>Hmm...</p>
-				} then (number) {
-						<p>Is it a number?</p>
-				} catch (ex) {
-						<p class="error">Something went wrong: {ex}!</p>
-				}
-				<button onclick={() => $state.guesser = guessNumber(100)}>
-						Guess again
-				</button>
-		</div>
+		@await ($state.guesser) {
+				<p>Hmm...</p>
+		} then (number) {
+				<p>Is it a number?</p>
+		} catch (ex) {
+				<p class="error">Something went wrong: {ex}!</p>
+		}
+		<button onclick={() => $state.guesser = guessNumber(100)}>
+				Guess again
+		</button>
 	}
 }

package/test/await/components/output/Await-client.ts

@@ -46,11 +46,10 @@ export default function Await(
 		/* User interface */
 		const t_fragments: DocumentFragment[] = [];
 
-		const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> <button> Guess again </button> </div> `);
+		const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> <button> Guess again </button> `);
 		// @ts-ignore
 		const t_root_0 = t_root(t_fragment_0, true);
-		const t_await_parent_1 = t_next(t_root_0) as HTMLElement;
-		let t_await_anchor_1 = t_anchor(t_next(t_child(t_await_parent_1))) as HTMLElement;
+		let t_await_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 		/* @await */
 		const t_await_range_1 = t_range();
@@ -64,7 +63,7 @@ export default function Await(
 				const t_root_1 = t_root(t_fragment_1, true);
 				// @ts-ignore
 				const t_text_1 = t_next(t_next(t_root_1), true);
-				t_add_fragment(t_fragment_1, t_await_parent_1, t_before, t_text_1);
+				t_add_fragment(t_fragment_1, t_fragment_0, t_before, t_text_1);
 				t_next(t_text_1);
 			});
 			((token) => {
@@ -78,7 +77,7 @@ export default function Await(
 							const t_root_2 = t_root(t_fragment_2, true);
 							// @ts-ignore
 							const t_text_2 = t_next(t_next(t_root_2), true);
-							t_add_fragment(t_fragment_2, t_await_parent_1, t_before, t_text_2);
+							t_add_fragment(t_fragment_2, t_fragment_0, t_before, t_text_2);
 							t_next(t_text_2);
 						});
 						t_pop_range(t_old_range_1);
@@ -97,7 +96,7 @@ export default function Await(
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
-							t_add_fragment(t_fragment_3, t_await_parent_1, t_before, t_text_4);
+							t_add_fragment(t_fragment_3, t_fragment_0, t_before, t_text_4);
 							t_next(t_text_4);
 						});
 						t_pop_range(t_old_range_1);
@@ -108,7 +107,7 @@ export default function Await(
 
 		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLElement;
 		// @ts-ignore
-		const t_text_5 = t_next(t_await_parent_1, true);
+		const t_text_5 = t_next(t_button_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);
 		t_next(t_text_5);

package/test/await/components/output/Await-server.ts

@@ -27,10 +27,11 @@ export default function Await(
 		}
 
 		/* User interface */
-		let $output = "";
-		$output += ` <div> <![>`;
-		$output += ` <p>Hmm...</p> `;
-		$output += `<!]><!> <button> Guess again </button> </div> `;
+		let t_body = "";
+		let t_head = "";
+		t_body += ` <![>`;
+		t_body += ` <p>Hmm...</p> `;
+		t_body += `<!]><!> <button> Guess again </button> `;
 
-		return $output;
+		return { body: t_body, head: t_head };
 	}

package/test/await/components/temp/{Await-client-9c30564ea39457e614e60c0cc0a71c431e8a1e76.ts → Await-client-17b0e7c682fbff8518a440831620c1024b8be23a.ts}

@@ -46,11 +46,10 @@ export default function Await(
 		/* User interface */
 		const t_fragments: DocumentFragment[] = [];
 
-		const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div> <!> <button> Guess again </button> </div> `);
+		const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <!> <button> Guess again </button> `);
 		// @ts-ignore
 		const t_root_0 = t_root(t_fragment_0, true);
-		const t_await_parent_1 = t_next(t_root_0) as HTMLElement;
-		let t_await_anchor_1 = t_anchor(t_next(t_child(t_await_parent_1))) as HTMLElement;
+		let t_await_anchor_1 = t_anchor(t_next(t_root_0)) as HTMLElement;
 
 		/* @await */
 		const t_await_range_1 = t_range();
@@ -64,7 +63,7 @@ export default function Await(
 				const t_root_1 = t_root(t_fragment_1, true);
 				// @ts-ignore
 				const t_text_1 = t_next(t_next(t_root_1), true);
-				t_add_fragment(t_fragment_1, t_await_parent_1, t_before, t_text_1);
+				t_add_fragment(t_fragment_1, t_fragment_0, t_before, t_text_1);
 				t_next(t_text_1);
 			});
 			((token) => {
@@ -78,7 +77,7 @@ export default function Await(
 							const t_root_2 = t_root(t_fragment_2, true);
 							// @ts-ignore
 							const t_text_2 = t_next(t_next(t_root_2), true);
-							t_add_fragment(t_fragment_2, t_await_parent_1, t_before, t_text_2);
+							t_add_fragment(t_fragment_2, t_fragment_0, t_before, t_text_2);
 							t_next(t_text_2);
 						});
 						t_pop_range(t_old_range_1);
@@ -97,7 +96,7 @@ export default function Await(
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
-							t_add_fragment(t_fragment_3, t_await_parent_1, t_before, t_text_4);
+							t_add_fragment(t_fragment_3, t_fragment_0, t_before, t_text_4);
 							t_next(t_text_4);
 						});
 						t_pop_range(t_old_range_1);
@@ -108,7 +107,7 @@ export default function Await(
 
 		const t_button_1 = t_next(t_next(t_await_anchor_1, true)) as HTMLElement;
 		// @ts-ignore
-		const t_text_5 = t_next(t_await_parent_1, true);
+		const t_text_5 = t_next(t_button_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
 		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);
 		t_next(t_text_5);

package/test/await/components/temp/{Await-server-f02f39af3bb3344ca6b18a1d64d60b21913fba31.ts → Await-server-eb8d79f8abc791dd8e87f9713534cebf0eb2c854.ts}

@@ -27,10 +27,11 @@ export default function Await(
 		}
 
 		/* User interface */
-		let $output = "";
-		$output += ` <div> <![>`;
-		$output += ` <p>Hmm...</p> `;
-		$output += `<!]><!> <button> Guess again </button> </div> `;
+		let t_body = "";
+		let t_head = "";
+		t_body += ` <![>`;
+		t_body += ` <p>Hmm...</p> `;
+		t_body += `<!]><!> <button> Guess again </button> `;
 
-		return $output;
+		return { body: t_body, head: t_head };
 	}

package/test/bench/components/Bench.torp

@@ -147,7 +147,7 @@ export default function Bench() {
 				<tbody>
 						@for (let row of $state.data) {
 								@key = row.id
-								<tr :class={{ danger: $state.selected === row.id }}>
+								<tr class={{ danger: $state.selected === row.id }}>
 										<td class="col-md-1">{row.id}</td>
 										<td class="col-md-4">
 												<a onclick={() => $state.selected = row.id}>