ripple 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # ripple
 
+## 0.4.2
+
+### Patch Changes
+
+- [#1478](https://github.com/Ripple-TS/ripple/pull/1478)
+  [`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster buffered server
+  rendering. Static text and attribute values are emitted with characters above
+  U+00FF as numeric character references (raw-text elements such as `<script>`
+  excluded), so a server response stays a one-byte string whenever its dynamic
+  data is Latin-1 too: a single static em dash no longer widens the whole body to
+  two bytes per character, which halved the flatten, byte-length and UTF-8 encode
+  cost of a page. The runtime text escaper checks for `&` and `<` with two
+  single-character searches instead of a regex test.
+
+- [#1481](https://github.com/Ripple-TS/ripple/pull/1481)
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Cheaper text-only elements
+  and typed loop items. An element whose only child is a typed text expression
+  (`<td>{row.name}</td>`) is cloned without a placeholder text node and written
+  through the element (`set_text_content`): the first write creates the text node
+  with `textContent`, later writes update it in place, and hydration adopts the
+  server-rendered text with no cursor descent, which removes a DOM read and a text
+  node per cell from every list row. A keyed `@for` key callback reads the item
+  directly instead of unwrapping it. Type inference now follows a binding's
+  declared type through property writes (`items.value = next` no longer hides
+  `track<Row[]>()` from the loop item) and through array and tuple indexing
+  (`row.queries[0].elapsed`), so those reads lower to direct text updates in one
+  render block per row.
+
+- [#1483](https://github.com/Ripple-TS/ripple/pull/1483)
+  [`5de359e`](https://github.com/Ripple-TS/ripple/commit/5de359e430391b0e1609795b42d26161fd5c2ff9)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a list item without a
+  tracked of its own (a plain list's item, or a local keyed item) is created
+  through a lean first run (`run_branch`) instead of the generic block runner:
+  fewer checks and no re-run bookkeeping per item.
+
+- [#1482](https://github.com/Ripple-TS/ripple/pull/1482)
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: cheaper keyed lists. A
+  `@for` or `@if` that trails template siblings appends into its parent element
+  instead of inserting before a `<!>` placeholder. A list item whose updates live
+  in one render block carries that block on the item block itself (`_$_.item`),
+  and a keyed item that only its render block reads is held as it is instead of in
+  a tracked, re-running its block directly when the key's item is replaced. Leaf
+  text is written without a DOM read, from the value the render block last wrote.
+  A keyed diff that re-lays most of its items walks the range front to back
+  instead of appending every item at the end, about half the reorder cost in
+  Chromium and far less right after a layout flush.
+- Updated dependencies
+  [[`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1),
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a),
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)]:
+  - @tsrx/ripple@0.2.1
+
 ## 0.4.1
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,7 +81,7 @@
     "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
     "@tsrx/core": "^0.2.0",
-    "@tsrx/ripple": "0.2.0"
+    "@tsrx/ripple": "0.2.1"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -6,6 +6,10 @@ export const IS_INDEXED = 1 << 3;
 // `__anchor` (sibling semantics, no `<!>` wrapper). Distinct from IS_CONTROLLED,
 // which renders inside a parent element.
 export const ROOT_CONTROLLED = 1 << 4;
+// A keyed @for whose item is read only by the render block its item block
+// carries: items are held as they are, not in a tracked, and a replaced item
+// re-runs its block directly (see the runtime's `item`).
+export const LOCAL_ITEMS = 1 << 7;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

package/src/runtime/internal/client/constants.js

@@ -29,6 +29,12 @@ export var SELECTOR = 1 << 23;
 export var RELEASED = 1 << 24;
 /** A block whose latest run created deriveds that are recorded for release (see `release_deriveds`). */
 export var CREATES_DERIVEDS = 1 << 25;
+/**
+ * A list item block that carries its body's render block itself (see the
+ * runtime's `item`): a branch block for its DOM range, and a reaction that
+ * re-runs the body's update function.
+ */
+export var ITEM_BLOCK = 1 << 26;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

package/src/runtime/internal/client/for.js

@@ -1,8 +1,9 @@
 /** @import { AppendIntoAnchor, Block, Tracked } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED, LOCAL_ITEMS, ROOT_CONTROLLED } from '../../../constants.js';
 import {
 	block as create_block,
+	create_block as allocate_block,
 	branch,
 	destroy_block,
 	destroy_block_children,
@@ -11,11 +12,18 @@ import {
 	own_anchor,
 	render,
 } from './blocks.js';
-import { BRANCH_BLOCK, FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
+import {
+	BLOCK_HAS_RUN,
+	BRANCH_BLOCK,
+	DESTROYED,
+	FOR_BLOCK,
+	ITEM_BLOCK,
+	TRACKED_ARRAY,
+} from './constants.js';
 import { hydrate_first_child, hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { get_last_child, next_sibling, resolve_anchor } from './operations.js';
 import { append } from './template.js';
-import { active_block, set, set_tracking, tracked } from './runtime.js';
+import { active_block, run_block, run_branch, set, set_tracking, tracked } from './runtime.js';
 import { array_from, is_array } from '@tsrx/core/runtime/language-helpers';
 
 /**
@@ -42,8 +50,21 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_
 		v: tracked_value,
 		// The item as the collection holds it; a keyed diff compares against it.
 		r: value,
+		// The render state of a body that carries its render block on the item
+		// block itself (see `item`), or null.
+		p: null,
 	};
 
+	// An item without a tracked of its own (a plain list's, or a local one)
+	// renders in place: allocated, linked and run through `run_branch`, with
+	// none of the first-run bookkeeping a block that may re-run needs.
+	if (tracked_value === value && tracked_index === undefined) {
+		var lean = allocate_block(BRANCH_BLOCK, run_item, state);
+		run_branch(lean, render_fn, anchor, value);
+		lean.f ^= BLOCK_HAS_RUN;
+		return lean;
+	}
+
 	// Passed through module state rather than a per-item closure; run_item
 	// reads them before rendering, so nested loops cannot observe a stale pair.
 	item_anchor = anchor;
@@ -81,9 +102,19 @@ var item_anchor = null;
 var item_render_fn = null;
 
 /**
- * @param {{ i: Tracked | undefined, v: any }} state
+ * @param {{ i: Tracked | undefined, v: any, p: any }} state
  */
 function run_item(state) {
+	var p = state.p;
+	if (p !== null) {
+		// A re-run of an item that carries its render block: only the body's
+		// update function, tracked (see `item`).
+		set_tracking(true);
+		/** @type {(prev: any) => void} */ (
+			/** @type {ListState} */ (/** @type {Block} */ (/** @type {Block} */ (active_block).p).s).u
+		)(p);
+		return;
+	}
 	var render_fn = /** @type {(anchor: Node, value: any, index?: any) => Block} */ (item_render_fn);
 	var anchor = /** @type {Node} */ (item_anchor);
 	item_render_fn = null;
@@ -91,6 +122,27 @@ function run_item(state) {
 	render_fn(anchor, state.v, state.i);
 }
 
+/**
+ * The compiled body of a list item whose updates all live in one render block
+ * calls this where it would have created that block: the item block carries
+ * the render block instead. The update function is the list's (passed to
+ * `for`/`for_keyed`, the same for every item) and `prev` its state; it runs
+ * tracked here, so its dependencies are the item block's own, and a change
+ * re-runs it alone through `run_item`. One block, one run, and one state
+ * object less per item.
+ * @param {any} prev
+ */
+export function item(prev) {
+	var block = /** @type {Block} */ (active_block);
+	block.s.p = prev;
+	block.f |= ITEM_BLOCK;
+	set_tracking(true);
+	/** @type {(prev: any) => void} */ (
+		/** @type {ListState} */ (/** @type {Block} */ (block.p).s).u
+	)(prev);
+	set_tracking(false);
+}
+
 /**
  * @param {ListAnchor} anchor
  * @param {(anchor: Node) => void} render_empty
@@ -236,7 +288,10 @@ class ListState {
 	 * @param {boolean} is_indexed
 	 * @param {((item: any) => any) | undefined} get_key
 	 * @param {((anchor: Node) => void) | undefined} render_empty
-	 * @param {((item: any) => any) | undefined} [map_item]
+	 * @param {((item: any) => any) | undefined} map_item
+	 * @param {((prev: any) => void) | undefined} update_fn the update function
+	 *   of an item body that carries its render block (see `item`)
+	 * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
 	 */
 	constructor(
 		anchor,
@@ -247,6 +302,8 @@ class ListState {
 		get_key,
 		render_empty,
 		map_item,
+		update_fn,
+		is_local,
 	) {
 		this.a = anchor;
 		this.g = get_collection;
@@ -256,6 +313,8 @@ class ListState {
 		this.k = get_key;
 		this.e = render_empty;
 		this.m = map_item;
+		this.u = update_fn;
+		this.l = is_local;
 	}
 }
 
@@ -287,7 +346,18 @@ function run_for_keyed(state) {
 	var array = collection_to_array(state.g());
 
 	set_tracking(false);
-	reconcile_by_key(state.a, block, array, state.r, state.c, state.x, state.k, state.e, state.m);
+	reconcile_by_key(
+		state.a,
+		block,
+		array,
+		state.r,
+		state.c,
+		state.x,
+		state.k,
+		state.e,
+		state.m,
+		state.l,
+	);
 	set_tracking(true);
 
 	if (hydrating) {
@@ -302,9 +372,11 @@ function run_for_keyed(state) {
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @param {(anchor: Node) => void} [render_empty]
+ * @param {(prev: any) => void} [update_fn] for an item body that carries its
+ *   render block: its update function (see `item`)
  * @returns {void}
  */
-export function for_block(node, get_collection, render_fn, flags, render_empty) {
+export function for_block(node, get_collection, render_fn, flags, render_empty, update_fn) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
@@ -340,6 +412,9 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 			is_indexed,
 			undefined,
 			render_empty,
+			undefined,
+			update_fn,
+			false,
 		),
 		FOR_BLOCK,
 	);
@@ -365,6 +440,8 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
  * @param {(item: V) => any} [map_item] for a destructuring pattern with a rest
  *   element or a default: destructures the item once, natively, into an object
  *   of the pattern's names, which is what the item's tracked then holds
+ * @param {(prev: any) => void} [update_fn] for an item body that carries its
+ *   render block: its update function (see `item`)
  * @returns {void}
  */
 export function for_block_keyed(
@@ -375,6 +452,7 @@ export function for_block_keyed(
 	get_key,
 	render_empty,
 	map_item,
+	update_fn,
 ) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
@@ -412,6 +490,8 @@ export function for_block_keyed(
 			get_key,
 			render_empty,
 			map_item,
+			update_fn,
+			(flags & LOCAL_ITEMS) !== 0,
 		),
 		FOR_BLOCK,
 	);
@@ -459,13 +539,23 @@ function update_index(block, index) {
  * @param {Block} block
  * @param {any} value
  * @param {((item: any) => any) | undefined} map_item
+ * @param {boolean} is_local
  * @returns {void}
  */
-function update_value(block, value, map_item) {
+function update_value(block, value, map_item, is_local) {
 	var state = block.s;
 	if (state.r !== value) {
 		state.r = value;
-		set(state.v, map_item === undefined ? value : map_item(value));
+		var next = map_item === undefined ? value : map_item(value);
+		if (is_local) {
+			// Held as it is, read by the item block's update function alone
+			// (`LOCAL_ITEMS`) off its state's `$item` slot: the block re-runs here.
+			state.v = next;
+			state.p.$item = next;
+			run_block(block);
+		} else {
+			set(state.v, next);
+		}
 	}
 }
 
@@ -481,6 +571,7 @@ function update_value(block, value, map_item) {
  * @param {((item: V) => K) | undefined} get_key identity keys when omitted
  * @param {((anchor: Node) => void) | undefined} render_empty
  * @param {((item: V) => any) | undefined} map_item
+ * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
  * @returns {void}
  *
  * The first run only creates items, so it lives in this small function and
@@ -496,6 +587,7 @@ function reconcile_by_key(
 	get_key,
 	render_empty,
 	map_item,
+	is_local,
 ) {
 	var b_length = b.length;
 	var state = /** @type {ListState} */ (block.s);
@@ -512,7 +604,7 @@ function reconcile_by_key(
 			if (get_key !== undefined) {
 				b_keys[j] = get_key(value);
 			}
-			b_blocks[j] = create_item(anchor, value, j, render_fn, is_indexed, true, map_item);
+			b_blocks[j] = create_item(anchor, value, j, render_fn, is_indexed, !is_local, map_item);
 		}
 
 		state.array = b;
@@ -531,6 +623,7 @@ function reconcile_by_key(
 		get_key,
 		render_empty,
 		map_item,
+		is_local,
 	);
 }
 
@@ -547,6 +640,7 @@ function reconcile_by_key(
  * @param {((item: V) => K) | undefined} get_key
  * @param {((anchor: Node) => void) | undefined} render_empty
  * @param {((item: V) => any) | undefined} map_item
+ * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
  * @returns {void}
  */
 function reconcile_by_key_diff(
@@ -559,7 +653,9 @@ function reconcile_by_key_diff(
 	get_key,
 	render_empty,
 	map_item,
+	is_local,
 ) {
+	var is_keyed = !is_local;
 	var state = /** @type {ListState} */ (block.s);
 
 	// Variables used in conditional branches - declare with initial values
@@ -627,7 +723,7 @@ function reconcile_by_key_diff(
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, true, map_item);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, is_keyed, map_item);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -675,7 +771,7 @@ function reconcile_by_key_diff(
 				update_index(b_block, b_start);
 			}
 			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
+				update_value(b_block, b_val, map_item, is_local);
 			}
 			a_start++;
 			b_start++;
@@ -688,7 +784,7 @@ function reconcile_by_key_diff(
 				update_index(b_block, b_end);
 			}
 			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
+				update_value(b_block, b_val, map_item, is_local);
 			}
 			a_end--;
 			b_end--;
@@ -710,7 +806,7 @@ function reconcile_by_key_diff(
 				update_index(b_block, b_start);
 			}
 			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
+				update_value(b_block, b_val, map_item, is_local);
 			}
 			move(b_block, /** @type {ChildNode} */ (a_blocks[a_start].s.start));
 			a_end--;
@@ -725,7 +821,7 @@ function reconcile_by_key_diff(
 				update_index(b_block, b_end);
 			}
 			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
+				update_value(b_block, b_val, map_item, is_local);
 			}
 			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
 			a_start++;
@@ -747,7 +843,7 @@ function reconcile_by_key_diff(
 					b_start,
 					render_fn,
 					is_indexed,
-					true,
+					is_keyed,
 					map_item,
 				);
 				b_start++;
@@ -796,7 +892,7 @@ function reconcile_by_key_diff(
 								update_index(b_block, j);
 							}
 							if (get_key !== undefined) {
-								update_value(b_block, b_val, map_item);
+								update_value(b_block, b_val, map_item, is_local);
 							}
 							++patched;
 							break;
@@ -839,7 +935,7 @@ function reconcile_by_key_diff(
 							update_index(b_block, j);
 						}
 						if (get_key !== undefined) {
-							update_value(b_block, b_val, map_item);
+							update_value(b_block, b_val, map_item, is_local);
 						}
 						++patched;
 					} else if (!fast_path_removal) {
@@ -864,6 +960,7 @@ function reconcile_by_key_diff(
 			get_key,
 			render_empty,
 			map_item,
+			is_local,
 		);
 		return;
 	} else if (moved) {
@@ -872,26 +969,23 @@ function reconcile_by_key_diff(
 		j = seq.length - 1;
 
 		// When most surviving items have to move anyway, re-lay the whole range
-		// in order before a fixed target: inserting before the same node is
-		// noticeably cheaper per item than moving into arbitrary positions.
+		// in order (see `relay`).
 		if ((patched - seq.length) * 3 > b_left * 2) {
-			var relay_target = block_start(b_blocks, b_end + 1, b_length, anchor);
-			for (i = 0; i < b_left; i++) {
-				pos = i + b_start;
-				if (sources[i] === 0) {
-					b_blocks[pos] = create_item(
-						relay_target,
-						b[pos],
-						pos,
-						render_fn,
-						is_indexed,
-						true,
-						map_item,
-					);
-				} else {
-					move(b_blocks[pos], relay_target);
-				}
-			}
+			relay(
+				anchor,
+				a_blocks,
+				a_start,
+				a_end,
+				b,
+				b_blocks,
+				b_start,
+				b_end,
+				sources,
+				render_fn,
+				is_indexed,
+				is_keyed,
+				map_item,
+			);
 			state.array = b;
 			state.blocks = b_blocks;
 			state.keys = b_keys;
@@ -905,7 +999,7 @@ function reconcile_by_key_diff(
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, is_keyed, map_item);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				next_pos = pos + 1;
@@ -924,7 +1018,7 @@ function reconcile_by_key_diff(
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, is_keyed, map_item);
 			}
 		}
 	}
@@ -934,6 +1028,81 @@ function reconcile_by_key_diff(
 	state.keys = b_keys;
 }
 
+/**
+ * Re-lays the unmatched range `b_start..b_end` in its new order, walking it
+ * front to back: `cursor` is the first node of the range that is not in place
+ * yet, so a block already there costs a compare and a sibling read, and every
+ * other block (or a new item) is inserted before `cursor`. Inserting each item
+ * toward the front is what the reverse fast path does too; appending every
+ * item at the end of the range instead cost about twice as much in Blink's
+ * reorder floor (500 rows: 0.55 ms against 0.29), and several times more
+ * right after a layout flush, so this holds even when most items move.
+ * @template V
+ * @param {ListAnchor} anchor
+ * @param {Block[]} a_blocks the old blocks; destroyed ones are skipped
+ * @param {number} a_start
+ * @param {number} a_end
+ * @param {V[]} b
+ * @param {Block[]} b_blocks matched blocks at their new index, holes for new items
+ * @param {number} b_start
+ * @param {number} b_end
+ * @param {Int32Array} sources zero at the index of a new item
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
+ * @param {boolean} is_indexed
+ * @param {boolean} is_keyed
+ * @param {((item: V) => any) | undefined} map_item
+ */
+function relay(
+	anchor,
+	a_blocks,
+	a_start,
+	a_end,
+	b,
+	b_blocks,
+	b_start,
+	b_end,
+	sources,
+	render_fn,
+	is_indexed,
+	is_keyed,
+	map_item,
+) {
+	var b_length = b.length;
+	var end_target = block_start(b_blocks, b_end + 1, b_length, anchor);
+	/** @type {ChildNode | AppendIntoAnchor | null} */
+	var cursor = null;
+
+	// The range starts at the first surviving old block.
+	for (var i = a_start; i <= a_end && cursor === null; i++) {
+		var old_block = a_blocks[i];
+		if ((old_block.f & DESTROYED) === 0) {
+			cursor = /** @type {ChildNode | null} */ (get_first_node(old_block));
+		}
+	}
+	if (cursor === null) {
+		cursor = end_target;
+	}
+
+	for (var pos = b_start; pos <= b_end; pos++) {
+		if (sources[pos - b_start] === 0) {
+			b_blocks[pos] = create_item(cursor, b[pos], pos, render_fn, is_indexed, is_keyed, map_item);
+			continue;
+		}
+		var block = b_blocks[pos];
+		var first = get_first_node(block);
+		if (first === null) {
+			// Renders nothing: it has no place to take.
+			continue;
+		}
+		if (first !== cursor) {
+			move(block, cursor);
+			continue;
+		}
+		var after = next_sibling(/** @type {Node} */ (get_last_node(block)));
+		cursor = after === null ? end_target : /** @type {ChildNode} */ (after);
+	}
+}
+
 /**
  * @template V
  * @param {ListAnchor} anchor
@@ -1211,18 +1380,23 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 		j = seq.length - 1;
 
 		// When most surviving items have to move anyway, re-lay the whole range
-		// in order before a fixed target: inserting before the same node is
-		// noticeably cheaper per item than moving into arbitrary positions.
+		// in order (see `relay`).
 		if ((patched - seq.length) * 3 > b_left * 2) {
-			var relay_target = block_start(b_blocks, b_end + 1, b_length, anchor);
-			for (i = 0; i < b_left; i++) {
-				pos = i + b_start;
-				if (sources[i] === 0) {
-					b_blocks[pos] = create_item(relay_target, b[pos], pos, render_fn, is_indexed, false);
-				} else {
-					move(b_blocks[pos], relay_target);
-				}
-			}
+			relay(
+				anchor,
+				a_blocks,
+				a_start,
+				a_end,
+				b,
+				b_blocks,
+				b_start,
+				b_end,
+				sources,
+				render_fn,
+				is_indexed,
+				false,
+				undefined,
+			);
 			state.array = b;
 			state.blocks = b_blocks;
 			return;

package/src/runtime/internal/client/hydration.js

@@ -76,22 +76,6 @@ export function hydrate_first_child(is_text) {
 	return (hydrate_node = child);
 }
 
-/**
- * Adopts the text node that is an element's only child, leaving the cursor on
- * the element: nothing else inside it navigates, so the parent's sibling
- * traversal continues from the element with no pop().
- * @returns {Node}
- */
-export function hydrate_text_child() {
-	var child = first_child_getter.call(/** @type {Node} */ (hydrate_node));
-
-	if (child === null || child.nodeType !== TEXT_NODE) {
-		child = repair_first_child(child);
-	}
-
-	return child;
-}
-
 /**
  * Handles `<p>{text}</p>` where `text` rendered empty on the server: there is
  * no text node to adopt (or, with siblings, the next node is not one), so one

package/src/runtime/internal/client/index.js

@@ -4,7 +4,6 @@ export {
 	next_sibling as sibling,
 	hydrate_first_child as hydrate_child,
 	hydrate_next_sibling as hydrate_sibling,
-	hydrate_text_child as hydrate_text,
 	append_into,
 	document,
 	create_text,
@@ -13,6 +12,7 @@ export {
 
 export {
 	set_text,
+	set_text_content,
 	set_class,
 	set_style,
 	set_attribute,
@@ -84,7 +84,7 @@ export { composite } from './composite.js';
 
 export { render_component } from './component.js';
 
-export { for_block as for, for_block_keyed as for_keyed } from './for.js';
+export { for_block as for, for_block_keyed as for_keyed, item } from './for.js';
 
 export { selector, selector_match } from './selector.js';
 

package/src/runtime/internal/client/operations.js

@@ -4,13 +4,12 @@ import {
 	hydrate_first_child,
 	hydrate_next_sibling,
 	hydrate_node,
-	hydrate_text_child,
 	hydrating,
 	set_hydrate_node,
 } from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
 
-export { hydrate_first_child, hydrate_next_sibling, hydrate_text_child };
+export { hydrate_first_child, hydrate_next_sibling };
 
 /**
  * The `firstChild` / `nextSibling` getters, called directly so a traversal