@torpor/view 0.1.5 → 0.1.6

package/src/render/clearLayoutSlot.ts

@@ -0,0 +1,6 @@
+import type { Range } from "../types/Range";
+import clearRange from "./clearRange";
+
+export default function clearLayoutSlot(range: Range): void {
+	clearRange(range);
+}

package/src/render/clearRange.ts

@@ -3,7 +3,7 @@ import removeEffect from "../watch/removeEffect";
 import context from "./context";
 
 export default function clearRange(range: Range): void {
-	//console.log(`clearing range ${printNode(range.startNode)} to ${printNode(range.endNode)}`);
+	//console.log("clearing range", range.startNode, "to", range.endNode);
 
 	// Clear effects and collect animations that take place within this range and its children
 	let animations: Animation[] = [];

package/src/render/hydrationMarkers.ts

@@ -1,5 +1,5 @@
 const HYDRATION_START = "[";
 const HYDRATION_END = "]";
-const HYDRATION_BRANCH = "^";
+const HYDRATION_BREAK = "^";
 
-export { HYDRATION_START, HYDRATION_END, HYDRATION_BRANCH };
+export { HYDRATION_START, HYDRATION_END, HYDRATION_BREAK };

package/src/render/isComment.ts

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

package/src/render/isText.ts

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

package/src/render/nodeAnchor.ts

@@ -3,37 +3,72 @@ import { HYDRATION_END, HYDRATION_START } from "./hydrationMarkers";
 import isComment from "./isComment";
 import nodeNext from "./nodeNext";
 
-export default function nodeAnchor(node: Node): Node {
-	// If we are hydrating, the anchor will be at the end of the paired <![> and
-	// <!]> comments
-	if (context.hydrationNode && isComment(node) && node.data === HYDRATION_START) {
-		// Skip and remove the start node
-		let currentNode = nodeNext(node);
-		node.remove();
+/**
+ * Gets the anchor node for a control statement or component.
+ *
+ * When mounting, this just returns the anchor node parameter (because it was
+ * created).
+ *
+ * When hydrating, there should be matched <![> and <!]> comments in the HTML,
+ * and the anchor node should be after the end comment. The matched comment
+ * nodes will be deleted, and the hydration node set to the first node inside
+ * the matched comments.
+ *
+ * @param node The potential anchor node.
+ * @param subsequent Whether this is the second time the anchor is being retrieved.
+ * @returns The anchor node.
+ */
+export default function nodeAnchor(node: ChildNode, subsequent = false): ChildNode {
+	if (context.hydrationNode) {
+		// The first time we get a node anchor during hydration, the hydration
+		// node gets set to the first node in the statement, and then we work
+		// through the nodes until we get to the anchor node itself. So, the
+		// second time we get the anchor node, the hydration node should have
+		// been set to it. I'm not sure this is going to always be the case...
+		if (subsequent) {
+			return context.hydrationNode;
+		}
 
-		// Go through siblings until we get to the end
-		let level = 1;
-		while (currentNode) {
-			if (isComment(currentNode)) {
-				if (currentNode.data === HYDRATION_START) {
-					level += 1;
-				} else if (currentNode.data === HYDRATION_END) {
-					level -= 1;
-				}
-				if (level === 0) {
-					// Remove the end node and return the next one
-					const endNode = currentNode.nextSibling;
-					currentNode.remove();
-					// NOTE: We know this is not null as it is being called from
-					// generated code
-					return endNode!;
+		if (isComment(node) && node.data === HYDRATION_START) {
+			// Skip and remove the start node, setting the hydration node in
+			// nodeNext
+			let currentNode = nodeNext(node);
+			node.remove();
+
+			// Go through siblings until we get to the end
+			let level = 1;
+			while (currentNode) {
+				if (isComment(currentNode)) {
+					if (currentNode.data === HYDRATION_START) {
+						level += 1;
+					} else if (currentNode.data === HYDRATION_END) {
+						level -= 1;
+						if (level === 0) {
+							// Remove the end node and return the next one
+							const endNode = currentNode.nextSibling;
+							currentNode.remove();
+
+							// If the statement is empty (i.e. the end comment
+							// immediately follows the start comment), move the
+							// hydration node past the removed end comment to
+							// the anchor, so that we can continue to the next
+							// nodes
+							if (context.hydrationNode === currentNode) {
+								context.hydrationNode = endNode;
+							}
+
+							// NOTE: We know this is not null as it is being
+							// called from generated code
+							return endNode!;
+						}
+					}
 				}
+				currentNode = currentNode.nextSibling!;
 			}
-			currentNode = currentNode.nextSibling!;
-		}
 
-		if (!currentNode) {
-			throw new Error("End hydration comment not found");
+			if (!currentNode) {
+				throw new Error("End hydration comment not found");
+			}
 		}
 	}
 

package/src/render/nodeCheckHydrationBreak.ts

@@ -0,0 +1,25 @@
+import context from "./context";
+import { HYDRATION_BREAK } from "./hydrationMarkers";
+import isComment from "./isComment";
+
+// TODO: It would be good to remove this, if possible
+
+/**
+ * When hydrating, removes and skips hydration comments that are inserted at the
+ * start of branches and used to split up text nodes that would otherwise be
+ * joined in HTML.
+ *
+ * @param node The node to check and maybe skip.
+ * @returns The next node.
+ */
+export default function nodeCheckHydrationBreak(node: ChildNode | null): ChildNode | null {
+	if (context.hydrationNode) {
+		if (node && isComment(node) && node.data === HYDRATION_BREAK) {
+			let comment = node;
+			node = node.nextSibling;
+			comment.remove();
+		}
+		context.hydrationNode = node;
+	}
+	return node;
+}

package/src/render/nodeChild.ts

@@ -1,18 +1,23 @@
 import context from "./context";
 
 /**
- * Gets the first child of a node
+ * Gets the first child of a node.
+ *
+ * Sets the hydration node.
+ *
+ * @param parent The parent node.
  */
-export default function nodeChild(parent: Node): Node {
-	let child = parent.firstChild;
+export default function nodeChild(parent: Node): ChildNode {
+	let childNode = parent.firstChild;
 	if (context.hydrationNode) {
 		// The child may be null when hydrating the sole text child of an
 		// element with no text
-		if (!child) {
-			child = parent.appendChild(parent.ownerDocument!.createTextNode(""));
+		if (!childNode) {
+			childNode = parent.appendChild(parent.ownerDocument!.createTextNode(""));
 		}
-		context.hydrationNode = child;
+		context.hydrationNode = childNode;
 	}
+
 	// NOTE: We know this is not null as it is being called from generated code
-	return child!;
+	return childNode!;
 }

package/src/render/nodeNext.ts

@@ -1,33 +1,24 @@
 import context from "./context";
-import { HYDRATION_BRANCH } from "./hydrationMarkers";
-import isComment from "./isComment";
+import isText from "./isText";
+import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
 
 /**
- * Gets the next sibling of a node
+ * Gets the next sibling of a node.
+ *
+ * When hydrating, sets the hydration node.
+ *
+ * @param node The node.
+ * @param text Whether we require a text node.
  */
-export default function nodeNext(node: Node, count?: number): Node {
-	let nextNode = checkHydrationNode(node.nextSibling);
-
-	if (count) {
-		for (let i = 1; i < count; i++) {
-			nextNode = checkHydrationNode(nextNode!.nextSibling);
-		}
+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)) {
+		return node;
 	}
 
-	// NOTE: We know nextNode is not null as it is being called from generated code
-	return nextNode!;
-}
+	let nextNode = nodeCheckHydrationBreak(node.nextSibling);
 
-function checkHydrationNode(nextNode: ChildNode | null) {
-	if (context.hydrationNode) {
-		// Remove hydration comments that are inserted at the start of branches
-		// They are just used to split up text nodes that would otherwise be joined in HTML
-		if (nextNode && isComment(nextNode) && nextNode.data === HYDRATION_BRANCH) {
-			let comment = nextNode;
-			nextNode = nextNode.nextSibling;
-			comment.remove();
-		}
-		context.hydrationNode = nextNode;
-	}
-	return nextNode;
+	// NOTE: We know this is not null as it is being called from generated code
+	return nextNode!;
 }

package/src/render/nodeRoot.ts

@@ -1,19 +1,36 @@
 import context from "./context";
+import isText from "./isText";
 
 /**
- * Gets the first child in a fragment
- * */
-export default function nodeRoot(parent: Node): Node {
-	const hydrationNode = context.hydrationNode;
-	if (hydrationNode) {
-		// If hydrating, set the active range's start node, while we have it
+ * Gets the first child in a fragment.
+ *
+ * When hydrating, also sets the active range's start node, while we have it.
+ *
+ * @param parent The parent of the fragment.
+ * @param text Whether we require a text node.
+ */
+export default function nodeRoot(parent: Node, text = false): ChildNode {
+	if (context.hydrationNode) {
+		let rootNode = context.hydrationNode;
+
+		// 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)) {
+			rootNode = rootNode.previousSibling;
+			context.hydrationNode = rootNode;
+		}
+
+		// If hydrating, set the active range's start node
 		const range = context.activeRange;
 		if (range && !range.startNode) {
-			range.startNode = hydrationNode;
+			range.startNode = rootNode;
 		}
-		return hydrationNode;
+
+		return rootNode;
 	} else {
-		// NOTE: We know this is not null as it is being called from generated code
+		// NOTE: We know this is not null as it is being called from generated
+		// code
 		return parent.firstChild!;
 	}
 }

package/src/render/nodeSkip.ts

@@ -0,0 +1,20 @@
+import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
+
+/**
+ * Gets the sibling of a node, x nodes after it.
+ *
+ * When hydrating, sets the hydration node.
+ *
+ * @param node The node.
+ * @param count The number of nodes to skip.
+ */
+export default function nodeSkip(node: ChildNode, count: number): ChildNode {
+	let nextNode = node;
+
+	for (let i = 0; i < count; i++) {
+		nextNode = nodeCheckHydrationBreak(nextNode.nextSibling)!;
+	}
+
+	// NOTE: We know this is not null as it is being called from generated code
+	return nextNode!;
+}

package/src/render/runLayoutSlot.ts

@@ -0,0 +1,26 @@
+import type { Component } from "../types/Component";
+import type { Range } from "../types/Range";
+import type { SlotRender } from "../types/SlotRender";
+import newRange from "./newRange";
+import popRange from "./popRange";
+import pushRange from "./pushRange";
+
+export default function runLayoutSlot(
+	component: Component,
+	slot: SlotRender,
+	parent: ParentNode,
+	anchor: Node | null,
+	$props: Record<string, string>,
+	$context?: Record<PropertyKey, any>,
+): Range {
+	const range = newRange();
+	const oldRange = pushRange(range, true);
+
+	component(parent, anchor, $props, $context, {
+		_: slot,
+	});
+
+	popRange(oldRange);
+
+	return range;
+}

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

@@ -21,9 +21,12 @@ export default function Attributes(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div data-thing="" {$props.attr}> Hello! </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div data-thing="" {$props.attr}> Hello! </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	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 setAttribute() {
 		t_attribute(t_div_1, "thing", $props.thing);
 	});
@@ -36,7 +39,7 @@ export default function Attributes(
 	$run(function setAttribute() {
 		t_div_1.setAttribute("attr", $props.attr);
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }

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

@@ -12,7 +12,7 @@ export default function Attributes(
 
 	/* 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>`;
+	$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> `;
 
 	return $output;
 }

package/test/attributes/components/temp/{Attributes-client-7b8f7b9996208e8d2d0a12d4f4a40a73df63d9d8.ts → Attributes-client-4620a40099e57a7fdaab895b204d85881f6dbfb7.ts}

@@ -21,9 +21,12 @@ export default function Attributes(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div data-thing="" {$props.attr}> Hello! </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, ` <div data-thing="" {$props.attr}> Hello! </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	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 setAttribute() {
 		t_attribute(t_div_1, "thing", $props.thing);
 	});
@@ -36,7 +39,7 @@ export default function Attributes(
 	$run(function setAttribute() {
 		t_div_1.setAttribute("attr", $props.attr);
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+	t_next(t_text_1);
 
 }

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

@@ -12,7 +12,7 @@ export default function Attributes(
 
 	/* 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>`;
+	$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> `;
 
 	return $output;
 }

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

@@ -46,10 +46,11 @@ 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, ` <div> <!> <button> Guess again </button> </div> `);
 		// @ts-ignore
-		const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-		const t_await_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+		const t_root_0 = t_root(t_fragment_0, true);
+		const t_await_parent_1 = t_next(t_root_0) as HTMLElement;
+		const t_await_anchor_1 = t_anchor(t_next(t_child(t_await_parent_1))) as HTMLElement;
 
 		/* @await */
 		const t_await_range_1 = t_range();
@@ -60,10 +61,10 @@ export default function Await(
 			t_run_branch(t_await_range_1, 0, () => {
 				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>Hmm...</p> `);
 				// @ts-ignore
-				const t_root_1 = t_root(t_fragment_1);
+				const t_root_1 = t_root(t_fragment_1, true);
 				// @ts-ignore
-				const t_text_1 = t_next(t_root_1, 2);
-				t_add_fragment(t_fragment_1, t_div_1, t_before);
+				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_next(t_text_1);
 			});
 			((token) => {
@@ -74,10 +75,10 @@ export default function Await(
 						t_run_branch(t_await_range_1, 1, () => {
 							const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <p>Is it a number?</p> `);
 							// @ts-ignore
-							const t_root_2 = t_root(t_fragment_2);
+							const t_root_2 = t_root(t_fragment_2, true);
 							// @ts-ignore
-							const t_text_2 = t_next(t_root_2, 2);
-							t_add_fragment(t_fragment_2, t_div_1, t_before);
+							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_next(t_text_2);
 						});
 						t_pop_range(t_old_range_1);
@@ -89,14 +90,14 @@ export default function Await(
 						t_run_branch(t_await_range_1, 2, () => {
 							const t_fragment_3 = t_fragment($parent.ownerDocument!, t_fragments, 3, ` <p class="error">#</p> `);
 							// @ts-ignore
-							const t_root_3 = t_root(t_fragment_3);
+							const t_root_3 = t_root(t_fragment_3, true);
 							const t_text_3 = t_child(t_next(t_root_3));
 							// @ts-ignore
-							const t_text_4 = t_next(t_root_3, 2);
+							const t_text_4 = t_next(t_next(t_root_3), true);
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
-							t_add_fragment(t_fragment_3, t_div_1, t_before);
+							t_add_fragment(t_fragment_3, t_await_parent_1, t_before, t_text_4);
 							t_next(t_text_4);
 						});
 						t_pop_range(t_old_range_1);
@@ -105,9 +106,11 @@ export default function Await(
 			})(t_await_token_1);
 		});
 
-		const t_button_1 = t_next(t_await_anchor_1, 2) as HTMLElement;
+		const t_button_1 = t_next(t_next(t_anchor(t_await_anchor_1, true), true)) as HTMLElement;
+		// @ts-ignore
+		const t_text_5 = t_next(t_await_parent_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
-		t_add_fragment(t_fragment_0, $parent, $anchor);
-		t_next(t_div_1);
+		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);
+		t_next(t_text_5);
 
 	}

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

@@ -28,9 +28,9 @@ export default function Await(
 
 		/* User interface */
 		let $output = "";
-		$output += `<div> <![>`;
+		$output += ` <div> <![>`;
 		$output += ` <p>Hmm...</p> `;
-		$output += `<!]><!> <button> Guess again </button> </div>`;
+		$output += `<!]><!> <button> Guess again </button> </div> `;
 
 		return $output;
 	}

package/test/await/components/temp/{Await-client-a7bf000bf2b59a3d5251a0fa18ec79890a52a547.ts → Await-client-5d753441145fbac078393af24cccadb208453d69.ts}

@@ -46,10 +46,11 @@ 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, ` <div> <!> <button> Guess again </button> </div> `);
 		// @ts-ignore
-		const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-		const t_await_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+		const t_root_0 = t_root(t_fragment_0, true);
+		const t_await_parent_1 = t_next(t_root_0) as HTMLElement;
+		const t_await_anchor_1 = t_anchor(t_next(t_child(t_await_parent_1))) as HTMLElement;
 
 		/* @await */
 		const t_await_range_1 = t_range();
@@ -60,10 +61,10 @@ export default function Await(
 			t_run_branch(t_await_range_1, 0, () => {
 				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>Hmm...</p> `);
 				// @ts-ignore
-				const t_root_1 = t_root(t_fragment_1);
+				const t_root_1 = t_root(t_fragment_1, true);
 				// @ts-ignore
-				const t_text_1 = t_next(t_root_1, 2);
-				t_add_fragment(t_fragment_1, t_div_1, t_before);
+				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_next(t_text_1);
 			});
 			((token) => {
@@ -74,10 +75,10 @@ export default function Await(
 						t_run_branch(t_await_range_1, 1, () => {
 							const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <p>Is it a number?</p> `);
 							// @ts-ignore
-							const t_root_2 = t_root(t_fragment_2);
+							const t_root_2 = t_root(t_fragment_2, true);
 							// @ts-ignore
-							const t_text_2 = t_next(t_root_2, 2);
-							t_add_fragment(t_fragment_2, t_div_1, t_before);
+							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_next(t_text_2);
 						});
 						t_pop_range(t_old_range_1);
@@ -89,14 +90,14 @@ export default function Await(
 						t_run_branch(t_await_range_1, 2, () => {
 							const t_fragment_3 = t_fragment($parent.ownerDocument!, t_fragments, 3, ` <p class="error">#</p> `);
 							// @ts-ignore
-							const t_root_3 = t_root(t_fragment_3);
+							const t_root_3 = t_root(t_fragment_3, true);
 							const t_text_3 = t_child(t_next(t_root_3));
 							// @ts-ignore
-							const t_text_4 = t_next(t_root_3, 2);
+							const t_text_4 = t_next(t_next(t_root_3), true);
 							$run(function setTextContent() {
 								t_text_3.textContent = `Something went wrong: ${t_fmt(ex)}!`;
 							});
-							t_add_fragment(t_fragment_3, t_div_1, t_before);
+							t_add_fragment(t_fragment_3, t_await_parent_1, t_before, t_text_4);
 							t_next(t_text_4);
 						});
 						t_pop_range(t_old_range_1);
@@ -105,9 +106,11 @@ export default function Await(
 			})(t_await_token_1);
 		});
 
-		const t_button_1 = t_next(t_await_anchor_1, 2) as HTMLElement;
+		const t_button_1 = t_next(t_next(t_anchor(t_await_anchor_1, true), true)) as HTMLElement;
+		// @ts-ignore
+		const t_text_5 = t_next(t_await_parent_1, true);
 		t_event(t_button_1, "click", () => $state.guesser = guessNumber(100));
-		t_add_fragment(t_fragment_0, $parent, $anchor);
-		t_next(t_div_1);
+		t_add_fragment(t_fragment_0, $parent, $anchor, t_text_5);
+		t_next(t_text_5);
 
 	}

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

@@ -28,9 +28,9 @@ export default function Await(
 
 		/* User interface */
 		let $output = "";
-		$output += `<div> <![>`;
+		$output += ` <div> <![>`;
 		$output += ` <p>Hmm...</p> `;
-		$output += `<!]><!> <button> Guess again </button> </div>`;
+		$output += `<!]><!> <button> Guess again </button> </div> `;
 
 		return $output;
 	}

package/test/bind/components/output/BindComponent-client.ts

@@ -26,10 +26,11 @@ 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, ` <div> <!> <p>#</p> </div> `);
 	// @ts-ignore
-	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_div_1))) as HTMLElement;
+	const t_root_0 = t_root(t_fragment_0, true);
+	const t_comp_parent_1 = t_next(t_root_0) as HTMLElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_child(t_comp_parent_1))) as HTMLElement;
 
 	/* @component */
 	const t_props_1: any = $watch({});
@@ -39,13 +40,16 @@ export default function BindComponent(
 	$run(function setBinding() {
 		$state.name = t_props_1["name"];
 	});
-	BindText(t_div_1, t_comp_anchor_1, t_props_1, $context);
-	const t_text_1 = t_child(t_next(t_comp_anchor_1, 2));
+	BindText(t_comp_parent_1, t_comp_anchor_1, t_props_1, $context);
+
+	const t_text_1 = t_child(t_next(t_next(t_anchor(t_comp_anchor_1, true), true)));
+	// @ts-ignore
+	const t_text_2 = t_next(t_comp_parent_1, true);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
-	t_add_fragment(t_fragment_0, $parent, $anchor);
-	t_next(t_div_1);
+	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_2);
+	t_next(t_text_2);
 
 }
 
@@ -73,15 +77,17 @@ function BindText(
 			/* User interface */
 			const t_fragments: DocumentFragment[] = [];
 
-			const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> </div>`);
+			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_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-			const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
+			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_next(t_div_1);
+			t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
+			t_next(t_text_1);
 
 		}