ripple 0.3.128 → 0.4.1

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

@@ -53,9 +53,9 @@ import {
 } from '../client/constants.js';
 import { DEV } from 'esm-env';
 import { is_ripple_object } from '../client/utils.js';
-import { iterable_array_from, array_slice, is_array } from '@tsrx/core/runtime/language-helpers';
+import { is_array } from '@tsrx/core/runtime/language-helpers';
 import {
-	escape,
+	escape as escape_html,
 	escape_script,
 	is_boolean_attribute,
 	normalize_css_property_name,
@@ -79,10 +79,6 @@ import {
 	is_tag_valid_with_ancestor,
 } from '../../../html-tree-validation.js';
 import { get_async_track_result } from '../../../utils/async.js';
-import {
-	throw_tracked_index_reference_error,
-	throw_tracked_index_value_error,
-} from '../../../utils/errors.js';
 import { get_track_async_script_id } from '../../../utils/track-async-serialization.js';
 import * as devalue from 'devalue';
 import {
@@ -94,12 +90,10 @@ import {
 } from './blocks.js';
 import { COMPONENT_BLOCK, ROOT_BLOCK, TRY_BLOCK } from './constants.js';
 
-export { escape };
 export { register_component_css as register_css } from './css-registry.js';
 export { simple_hash, strong_hash } from '@tsrx/core/runtime/hash';
 export { context } from './context.js';
 export { try_block, component_block, regular_block } from './blocks.js';
-export { array_slice };
 export { is_tsrx_element, tsrx_element, normalize_children };
 export { create_ref_prop };
 
@@ -181,6 +175,11 @@ export function render_expression(value) {
  * @returns {void}
  */
 export function render_component(fn, props) {
+	// An optional component (an undefined prop, an import that resolved to
+	// nothing) renders nothing; any other non-function is a programming error.
+	if (fn == null) {
+		return;
+	}
 	if (typeof fn !== 'function' || is_tsrx_element(fn)) {
 		throw_invalid_component_type(fn);
 	}
@@ -283,7 +282,8 @@ let inside_async_track = false;
 /** @type {ElementContext | undefined} */
 let current_element;
 /** @type {Set<string>} */
-let seen_warnings = new Set();
+/** @type {Set<string> | null} */
+let seen_warnings = null;
 
 /**
  * @returns {void}
@@ -294,7 +294,7 @@ export function reset_state() {
 	active_dependency = null;
 	inside_async_track = false;
 	tracking = false;
-	seen_warnings = new Set();
+	seen_warnings = null;
 	current_element = undefined;
 }
 
@@ -461,6 +461,18 @@ function run_derived(computed) {
 	}
 }
 
+/**
+ * Runs `fn` after the current task's microtasks have drained, so work
+ * completing in the same task can be batched into it.
+ * @type {(fn: () => void) => void}
+ */
+const defer =
+	typeof setImmediate === 'function'
+		? setImmediate
+		: (fn) => {
+				setTimeout(fn, 0);
+			};
+
 /**
  * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
  * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
@@ -481,8 +493,8 @@ export class Output {
 	#head = [];
 	/** @type {NestedArray<string>} */
 	#body = [];
-	/** @type {Set<string>} */
-	#css = new Set();
+	/** @type {Set<string> | null} root only */
+	#css = null;
 	/** @type {null | Output} */
 	#parent = null;
 	/** @type {StreamSink | null} */
@@ -501,8 +513,8 @@ export class Output {
 	#promise_reject = null;
 	#is_root = false;
 	#sync_run = false;
-	/** @type {Set<RegisteredAsyncOperation>} */
-	#async_operations = new Set();
+	/** @type {Set<RegisteredAsyncOperation> | null} created by the first registration */
+	#async_operations = null;
 	/** @type {null | 'head'} */
 	target = null;
 	/** @type {null | FlushUnit} */
@@ -513,13 +525,14 @@ export class Output {
 	#head_redirect = null;
 	// streaming state, only used on the root instance
 	#next_unit_id = 1;
-	/** @type {FlushUnit[]} */
-	#units = [];
-	/** @type {WeakMap<NestedArray<string>, FlushUnit>} */
-	#unit_slots = new WeakMap();
-	/** @type {Set<string>} */
-	#sent_css = new Set();
+	/** @type {FlushUnit[] | null} */
+	#units = null;
+	/** @type {WeakMap<NestedArray<string>, FlushUnit> | null} */
+	#unit_slots = null;
+	/** @type {Set<string> | null} */
+	#sent_css = null;
 	#shell_flushed = false;
+	#flush_scheduled = false;
 
 	get root() {
 		return this.#root;
@@ -534,7 +547,7 @@ export class Output {
 	}
 
 	get css() {
-		return this.#css;
+		return /** @type {Set<string>} */ (this.#root.#css);
 	}
 
 	get promise() {
@@ -552,6 +565,10 @@ export class Output {
 		if (!parent) {
 			this.#root = this;
 			this.#is_root = true;
+			this.#css = new Set();
+			this.#units = [];
+			this.#unit_slots = new WeakMap();
+			this.#sent_css = new Set();
 			this.#promise = new Promise((resolve, reject) => {
 				this.#promise_resolve = resolve;
 				this.#promise_reject = reject;
@@ -654,7 +671,9 @@ export class Output {
 		}
 		this.#head.length = 0;
 		this.#body.length = 0;
-		this.#css.clear();
+		if (this.#is_root) {
+			/** @type {Set<string>} */ (this.#css).clear();
+		}
 	}
 
 	/**
@@ -670,8 +689,9 @@ export class Output {
 				return;
 			}
 			if (root.#shell_flushed) {
-				if (!root.#sent_css.has(hash)) {
-					root.#sent_css.add(hash);
+				var sent_css = /** @type {Set<string>} */ (root.#sent_css);
+				if (!sent_css.has(hash)) {
+					sent_css.add(hash);
 					var css_text = get_css_text(new Set([hash]));
 					if (css_text) {
 						root.#streamOutput.push('<style data-ripple-ssr>' + css_text + '</style>');
@@ -680,7 +700,7 @@ export class Output {
 				return;
 			}
 		}
-		root.#css.add(hash);
+		/** @type {Set<string>} */ (root.#css).add(hash);
 	}
 
 	/**
@@ -730,7 +750,7 @@ export class Output {
 	 * @return {void}
 	 */
 	registerAsync(operation) {
-		this.#async_operations.add(operation);
+		(this.#async_operations ??= new Set()).add(operation);
 		this.#root._incrementPending();
 	}
 
@@ -739,19 +759,22 @@ export class Output {
 	 * @returns {void}
 	 */
 	resolveAsync(operation) {
-		this.#async_operations.delete(operation);
+		var operations = /** @type {Set<RegisteredAsyncOperation>} */ (this.#async_operations);
+		operations.delete(operation);
 		this.#root._decrementPending();
 		var unit = this.unit;
-		if (unit !== null && !unit.flushed && !unit.settled && this.#async_operations.size === 0) {
+		if (unit !== null && !unit.flushed && !unit.settled && operations.size === 0) {
 			unit.settled = true;
 			this.#root._maybeFlushUnit(unit);
 		}
 	}
 
 	cancelAsyncOperations() {
-		for (const operation of this.#async_operations) {
+		var operations = this.#async_operations;
+		if (operations === null) return;
+		for (const operation of operations) {
 			operation.cancel();
-			this.#async_operations.delete(operation);
+			operations.delete(operation);
 			this.clear();
 			this.#root._decrementPending();
 		}
@@ -761,7 +784,8 @@ export class Output {
 	 * @returns {boolean}
 	 */
 	hasPendingAsyncOperations() {
-		return this.#async_operations.size > 0;
+		var operations = this.#async_operations;
+		return operations !== null && operations.size > 0;
 	}
 
 	/**
@@ -804,8 +828,8 @@ export class Output {
 			error: null,
 		};
 		this.unit = unit;
-		root.#unit_slots.set(this.#body, unit);
-		root.#units.push(unit);
+		/** @type {WeakMap<NestedArray<string>, FlushUnit>} */ (root.#unit_slots).set(this.#body, unit);
+		/** @type {FlushUnit[]} */ (root.#units).push(unit);
 		return unit;
 	}
 
@@ -840,7 +864,9 @@ export class Output {
 				out += item;
 				continue;
 			}
-			var unit = this.#unit_slots.get(item);
+			var unit = /** @type {WeakMap<NestedArray<string>, FlushUnit>} */ (this.#unit_slots).get(
+				item,
+			);
 			if (unit !== undefined && !unit.flushed) {
 				if (unit.settled && !unit.errored) {
 					out += this.#collect_unit(unit, chunk);
@@ -877,9 +903,10 @@ export class Output {
 	#chunk_css(hashes) {
 		/** @type {Set<string>} */
 		var fresh = new Set();
+		var sent_css = /** @type {Set<string>} */ (this.#sent_css);
 		for (var hash of hashes) {
-			if (!this.#sent_css.has(hash)) {
-				this.#sent_css.add(hash);
+			if (!sent_css.has(hash)) {
+				sent_css.add(hash);
 				fresh.add(hash);
 			}
 		}
@@ -901,33 +928,42 @@ export class Output {
 		if (this.#streamOutput === null || this.#stream_finished || !this.#shell_flushed) {
 			return;
 		}
-		if (!unit.settled || unit.flushed || !unit.slot_sent) {
+		if (!unit.settled || unit.flushed || !unit.slot_sent || this.#flush_scheduled) {
 			return;
 		}
-		this.#flush_unit(unit);
-		this.#sweep_units();
+		// Units settling in the same macrotask (data arriving together, a
+		// batch of promises resolved by one timer or I/O callback) travel in
+		// one chunk: the flush runs once the current task's microtasks have
+		// drained. Closing the stream flushes whatever is still queued first.
+		this.#flush_scheduled = true;
+		defer(() => this.#flush_settled());
+	}
+
+	#flush_settled() {
+		this.#flush_scheduled = false;
+		if (!this.#stream_finished) {
+			this.#sweep_units();
+		}
 	}
 
 	/**
 	 * @param {FlushUnit} unit
-	 * @returns {void}
+	 * @returns {string}
 	 */
-	#flush_unit(unit) {
-		var sink = /** @type {StreamSink} */ (this.#streamOutput);
+	#unit_chunk(unit) {
 		if (unit.errored) {
 			unit.flushed = true;
-			sink.push(
+			return (
 				'<script id="' +
-					STREAM_ERROR_SCRIPT_PREFIX +
-					unit.id +
-					'" type="application/json">' +
-					escape_script(JSON.stringify({ message: unit.error })) +
-					'</script>' +
-					'<script>__RIPPLE_S__(' +
-					unit.id +
-					',1)</script>',
+				STREAM_ERROR_SCRIPT_PREFIX +
+				unit.id +
+				'" type="application/json">' +
+				escape_inline_script(JSON.stringify({ message: unit.error })) +
+				'</script>' +
+				'<script>__RIPPLE_S__(' +
+				unit.id +
+				',1)</script>'
 			);
-			return;
 		}
 		/** @type {StreamChunk} */
 		var chunk = { css: new Set(), scripts: [], head: '' };
@@ -939,28 +975,32 @@ export class Output {
 		out += chunk.scripts.join('');
 		out += '<template ' + STREAM_CHUNK_ATTR + '="' + unit.id + '">' + html + '</template>';
 		out += '<script>__RIPPLE_S__(' + unit.id + ')</script>';
-		sink.push(out);
+		return out;
 	}
 
 	/**
-	 * Flushes every unit whose slot has been sent and whose async work has
-	 * settled. Flushing a parent chunk marks nested unsettled slots as sent,
-	 * which can make further units eligible — loop until a fixpoint.
+	 * Streams every unit whose slot has been sent and whose async work has
+	 * settled, as one chunk. Flushing a parent marks nested unsettled slots
+	 * as sent, which can make further units eligible — loop until a fixpoint.
 	 * @returns {void}
 	 */
 	#sweep_units() {
-		var units = this.#units;
+		var units = /** @type {FlushUnit[]} */ (this.#units);
+		var out = '';
 		var progressed = true;
 		while (progressed) {
 			progressed = false;
 			for (var i = 0; i < units.length; i++) {
 				var unit = units[i];
 				if (unit.settled && !unit.flushed && unit.slot_sent) {
-					this.#flush_unit(unit);
+					out += this.#unit_chunk(unit);
 					progressed = true;
 				}
 			}
 		}
+		if (out !== '') {
+			/** @type {StreamSink} */ (this.#streamOutput).push(out);
+		}
 	}
 
 	/**
@@ -984,7 +1024,7 @@ export class Output {
 			// the root boundary's slot is the shell body itself
 			this.unit.slot_sent = true;
 		}
-		for (var hash of this.#css) {
+		for (var hash of /** @type {Set<string>} */ (this.#css)) {
 			chunk.css.add(hash);
 		}
 		var template = this.#stream_template;
@@ -1003,8 +1043,9 @@ export class Output {
 			out += BLOCK_OPEN + body + BLOCK_CLOSE;
 		}
 		var has_open_units = false;
-		for (var i = 0; i < this.#units.length; i++) {
-			if (!this.#units[i].flushed) {
+		var units = /** @type {FlushUnit[]} */ (this.#units);
+		for (var i = 0; i < units.length; i++) {
+			if (!units[i].flushed) {
 				has_open_units = true;
 				break;
 			}
@@ -1072,6 +1113,7 @@ export class Output {
 	_closeStream() {
 		if (this.#is_root) {
 			if (this.#streamOutput && this.#stream_started && !this.#stream_finished) {
+				this.#sweep_units();
 				this.#stream_finished = true;
 				if (this.#stream_template !== null && this.#stream_template.after !== '') {
 					this.#streamOutput.push(this.#stream_template.after);
@@ -1113,17 +1155,28 @@ export class Output {
 	}
 }
 
+/**
+ * Concatenates a buffer tree (see `Output`) into one string. A hand-rolled
+ * walk is far cheaper than `flat(Infinity).join('')` on a cold isolate, where
+ * a render's cost is dominated by unoptimized code.
+ * @param {NestedArray<string>} tree
+ * @returns {string}
+ */
+function flatten_buffer(tree) {
+	var out = '';
+	for (var i = 0; i < tree.length; i++) {
+		var item = tree[i];
+		out += typeof item === 'string' ? item : flatten_buffer(item);
+	}
+	return out;
+}
+
 /**
  * @param {RenderComponent} component
- * @param {BaseRenderOptions} [passed_in_options]
+ * @param {BaseRenderOptions} [options]
  * @returns {Promise<RenderResult | RenderStreamResult>}
  */
-export async function render(component, passed_in_options = {}) {
-	/** @type {BaseRenderOptions} */
-	var options = {
-		...(passed_in_options.stream ? { closeStream: true } : {}),
-		...passed_in_options,
-	};
+export async function render(component, options = {}) {
 	/** @type {Error | null } */
 	var top_level_error = null;
 	var head = '';
@@ -1182,7 +1235,7 @@ export async function render(component, passed_in_options = {}) {
 	await output.promise;
 	reset_state();
 
-	if (output.isStreamMode() && options.closeStream) {
+	if (output.isStreamMode() && ('closeStream' in options ? options.closeStream : true)) {
 		output._closeStream();
 	}
 
@@ -1199,12 +1252,40 @@ export async function render(component, passed_in_options = {}) {
 	 * @returns {void}
 	 */
 	function sync_buffers_to_string(output) {
-		head = /** @type {string[]} */ (output.head).flat(Infinity).join('');
-		body = BLOCK_OPEN + /** @type {string[]} */ (output.body).flat(Infinity).join('') + BLOCK_CLOSE;
+		head = flatten_buffer(output.head);
+		body = BLOCK_OPEN + flatten_buffer(output.body) + BLOCK_CLOSE;
 		css = output.css;
 	}
 }
 
+var CONTENT_SPECIAL = /[&<]/;
+var ATTR_SPECIAL = /[&"<]/;
+var SCRIPT_SPECIAL = /[<>]/;
+
+/**
+ * Escapes the characters that could end an inline `<script>` early. JSON
+ * payloads rarely contain `<` or `>`, so one test replaces two global
+ * replace scans in the common case.
+ * @param {string} str
+ * @returns {string}
+ */
+function escape_inline_script(str) {
+	return SCRIPT_SPECIAL.test(str) ? escape_script(str) : str;
+}
+
+/**
+ * Escapes text or attribute content. Strings without a character to escape
+ * (the common case) return as they are after a single regex test; anything
+ * else goes through the general escaper.
+ * @param {unknown} value
+ * @param {boolean} [is_attr]
+ * @returns {string}
+ */
+export function escape(value, is_attr) {
+	var str = typeof value === 'string' ? value : value == null ? '' : String(value);
+	return (is_attr ? ATTR_SPECIAL : CONTENT_SPECIAL).test(str) ? escape_html(str, is_attr) : str;
+}
+
 /**
  * @returns {void}
  */
@@ -1213,7 +1294,7 @@ export function push_component() {
 		c: null,
 		p: active_component,
 	};
-	active_block = component_block(() => {});
+	active_block = component_block(noop);
 }
 
 /**
@@ -1268,7 +1349,11 @@ function print_nesting_error(message) {
 		`node_invalid_placement_ssr: ${message}\n\n` +
 		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a hydration mismatch.';
 
-	if (seen_warnings.has(message)) return;
+	if (seen_warnings === null) {
+		seen_warnings = new Set();
+	} else if (seen_warnings.has(message)) {
+		return;
+	}
 	seen_warnings.add(message);
 
 	// eslint-disable-next-line no-console
@@ -1404,60 +1489,6 @@ export function get_derived(tracked) {
 	return g ? g(tracked.v) : tracked.v;
 }
 
-/**
- * @param {any} lazy
- * @param {number} [index]
- * @returns {any}
- */
-export function lazy_array_get(lazy, index = 0) {
-	if (is_array(lazy)) {
-		return lazy[index];
-	}
-	var flags = lazy.f;
-	if (flags === TRACKED) {
-		return index === 0
-			? get_tracked(/** @type {Tracked} */ (lazy))
-			: index === 1
-				? lazy
-				: undefined;
-	}
-	if (flags === DERIVED) {
-		return index === 0
-			? get_derived(/** @type {Derived} */ (lazy))
-			: index === 1
-				? lazy
-				: undefined;
-	}
-	return iterable_array_from(lazy, index)[0];
-}
-
-/**
- * @param {any} lazy
- * @param {number} [index]
- * @returns {any[]}
- */
-export function lazy_array_rest(lazy, index = 0) {
-	if (is_array(lazy)) {
-		return lazy.slice(index);
-	}
-	var flags = lazy.f;
-	if (flags === TRACKED) {
-		return index === 0
-			? [get_tracked(/** @type {Tracked} */ (lazy)), lazy]
-			: index === 1
-				? [lazy]
-				: [];
-	}
-	if (flags === DERIVED) {
-		return index === 0
-			? [get_derived(/** @type {Derived} */ (lazy)), lazy]
-			: index === 1
-				? [lazy]
-				: [];
-	}
-	return iterable_array_from(lazy, index);
-}
-
 /**
  * @param {Derived | Tracked} tracked
  * @param {any} value
@@ -1467,62 +1498,11 @@ export function set(tracked, value) {
 
 	if (value !== old_value) {
 		var s = tracked.a.set;
-		tracked.v = s ? s(value, tracked.v) : value;
+		tracked.v = typeof s === 'function' ? s(value, tracked.v) : value;
 		tracked.c = increment_clock();
 	}
 }
 
-/**
- * @param {any} lazy
- * @param {any} value
- * @param {number} [index]
- * @returns {void}
- */
-export function lazy_array_set(lazy, value, index = 0) {
-	if (is_array(lazy)) {
-		lazy[index] = value;
-		return;
-	}
-	var flags = lazy.f;
-	if (flags === TRACKED || flags === DERIVED) {
-		if (index === 0) {
-			set(/** @type {Derived | Tracked} */ (lazy), value);
-			return;
-		}
-		if (index === 1) {
-			throw_tracked_index_reference_error();
-		}
-		return;
-	}
-	lazy[index] = value;
-}
-
-/**
- * @param {any} lazy
- * @param {number} [index]
- * @param {number} [d]
- * @returns {number}
- */
-export function lazy_array_update(lazy, index = 0, d = 1) {
-	var value = lazy_array_get(lazy, index);
-	var result = d === 1 ? value++ : value--;
-	lazy_array_set(lazy, value, index);
-	return result;
-}
-
-/**
- * @param {any} lazy
- * @param {number} [index]
- * @param {number} [d]
- * @returns {number}
- */
-export function lazy_array_update_pre(lazy, index = 0, d = 1) {
-	var value = lazy_array_get(lazy, index);
-	var new_value = d === 1 ? ++value : --value;
-	lazy_array_set(lazy, new_value, index);
-	return new_value;
-}
-
 /**
  * @param {Tracked} tracked
  * @param {number} [d]
@@ -1630,14 +1610,16 @@ export function attr(name, value, is_boolean = false) {
 }
 
 /**
- * @param {Record<string, string | number>} styles
+ * @param {Record<string, string | number | null | undefined>} styles
  * @returns {string}
  */
 function get_styles(styles) {
 	var result = '';
 	for (const key in styles) {
+		const raw_value = styles[key];
+		if (raw_value == null) continue;
 		const css_prop = normalize_css_property_name(key);
-		const value = String(styles[key]).trim();
+		const value = String(raw_value).trim();
 		result += `${css_prop}: ${value}; `;
 	}
 	return result.trim();
@@ -1645,11 +1627,10 @@ function get_styles(styles) {
 
 /**
  * @param {Record<string, any>} attrs
- * @param {string | undefined} css_hash
- * @param {string} [exclude_prop]
+ * @param {string | undefined} [css_hash]
  * @returns {string}
  */
-export function spread_attrs(attrs, css_hash, exclude_prop) {
+export function spread_attrs(attrs, css_hash) {
 	let attr_str = '';
 	let name;
 
@@ -1664,7 +1645,6 @@ export function spread_attrs(attrs, css_hash, exclude_prop) {
 			name === 'children' ||
 			name === 'innerHTML' ||
 			name === '#class' ||
-			name === exclude_prop ||
 			typeof value === 'function' ||
 			is_tsrx_element(value)
 		)
@@ -1707,11 +1687,11 @@ var empty_get_set = { get: undefined, set: undefined };
 class TrackedValue {
 	/**
 	 * @param {any} v
-	 * @param {{ get?: Function; set?: Function }} a
+	 * @param {{ get?: Function; set?: Function | true }} a
 	 * @param {string} hash
 	 */
 	constructor(v, a, hash) {
-		/** @type {{ get?: Function; set?: Function }} */
+		/** @type {{ get?: Function; set?: Function | true }} */
 		this.a = a;
 		/** @type {AbortController | null} */
 		this.aa = null;
@@ -1729,18 +1709,6 @@ class TrackedValue {
 		this.v = v;
 	}
 	/** @returns {any} */
-	get [0]() {
-		return throw_tracked_index_value_error();
-	}
-	/** @param {any} v */
-	set [0](v) {
-		throw_tracked_index_value_error();
-	}
-	/** @returns {Tracked} */
-	get [1]() {
-		return throw_tracked_index_reference_error();
-	}
-	/** @returns {any} */
 	get value() {
 		return get_tracked(/** @type {Tracked} */ (this));
 	}
@@ -1748,25 +1716,25 @@ class TrackedValue {
 	set value(v) {
 		set(/** @type {Tracked} */ (this), v);
 	}
-	/** @returns {2} */
-	get length() {
-		return 2;
-	}
-	/** @returns {Iterator<any | Tracked>} */
-	*[Symbol.iterator]() {
-		yield get_tracked(/** @type {Tracked} */ (this));
-		yield this;
+	/**
+	 * A read-only view: a derived over this value, for a receiver that should
+	 * read but not write it. Equivalent to `track(() => tracked.value)`. The
+	 * view has no hash of its own: it is not a serialized value.
+	 * @returns {Derived}
+	 */
+	readOnly() {
+		return derived(() => get_tracked(/** @type {Tracked} */ (this)));
 	}
 }
 
 class DerivedValue {
 	/**
 	 * @param {Function} fn
-	 * @param {{ get?: Function; set?: Function }} a
-	 * @param {string} hash
+	 * @param {{ get?: Function; set?: Function | true }} a
+	 * @param {string} [hash]
 	 */
 	constructor(fn, a, hash) {
-		/** @type {{ get?: Function; set?: Function }} */
+		/** @type {{ get?: Function; set?: Function | true }} */
 		this.a = a;
 		// we always should have an active block
 		/** @type {Block} */
@@ -1781,24 +1749,12 @@ class DerivedValue {
 		this.f = DERIVED;
 		/** @type {Function} */
 		this.fn = fn;
-		/** @type {string} */
+		/** @type {string | undefined} */
 		this.h = hash;
 		/** @type {any} */
 		this.v = UNINITIALIZED;
 	}
 	/** @returns {any} */
-	get [0]() {
-		return throw_tracked_index_value_error();
-	}
-	/** @param {any} v */
-	set [0](v) {
-		throw_tracked_index_value_error();
-	}
-	/** @returns {Derived} */
-	get [1]() {
-		return throw_tracked_index_reference_error();
-	}
-	/** @returns {any} */
 	get value() {
 		return get_derived(/** @type {Derived} */ (this));
 	}
@@ -1806,14 +1762,16 @@ class DerivedValue {
 	set value(v) {
 		set(/** @type {Derived} */ (this), v);
 	}
-	/** @returns {2} */
-	get length() {
-		return 2;
-	}
-	/** @returns {Iterator<any | Derived>} */
-	*[Symbol.iterator]() {
-		yield get_derived(/** @type {Derived} */ (this));
-		yield this;
+	/**
+	 * A read-only view (see `TrackedValue#readOnly`). A derived without a
+	 * setter is already read-only and is returned as is; a writable one is
+	 * wrapped in a derived that follows it.
+	 * @returns {Derived}
+	 */
+	readOnly() {
+		return this.a.set === undefined
+			? /** @type {Derived} */ (this)
+			: derived(() => get_derived(/** @type {Derived} */ (this)));
 	}
 }
 
@@ -1821,7 +1779,7 @@ class DerivedValue {
  * @param {any} v
  * @param {string} hash
  * @param {(value: any) => any} [get]
- * @param {(next: any, prev: any) => any} [set]
+ * @param {((next: any, prev: any) => any) | true} [set]
  * @returns {Tracked}
  */
 function tracked(v, hash, get, set) {
@@ -1830,29 +1788,11 @@ function tracked(v, hash, get, set) {
 	);
 }
 
-/**
- * @param {Record<string, unknown>} obj
- * @param {string[]} exclude_keys
- * @returns {Record<string, unknown>}
- */
-export function exclude_from_object(obj, exclude_keys) {
-	/** @type {Record<string, unknown>} */
-	var new_obj = {};
-
-	for (const key of Object.keys(obj)) {
-		if (!exclude_keys.includes(key)) {
-			new_obj[key] = obj[key];
-		}
-	}
-
-	return new_obj;
-}
-
 /**
  * @param {any} v
- * @param {string} hash
+ * @param {string} [hash]
  * @param {(value: any) => any} [get]
- * @param {(next: any, prev: any) => any} [set]
+ * @param {((next: any, prev: any) => any) | true} [set]
  * @returns {Derived}
  */
 function derived(v, hash, get, set) {
@@ -1865,7 +1805,7 @@ function derived(v, hash, get, set) {
  * @param {any} v
  * @param {string} hash
  * @param {(value: any) => any} [get]
- * @param {(next: any, prev: any) => any} [set]
+ * @param {((next: any, prev: any) => any) | true} [set]
  * @returns {Tracked | Derived}
  */
 export function track(v, hash, get, set) {
@@ -1891,12 +1831,130 @@ export function track(v, hash, get, set) {
  * @returns {void}
  */
 function serialize_track_async_result(output, hash, value, deps) {
-	/** @type {{ ok: true, payload: string, deps?: string[] }} */
-	var envelope = { ok: true, payload: devalue.stringify(value) };
-	if (deps && deps.length > 0) {
-		envelope.deps = deps;
+	/** @type {string} */
+	var envelope;
+	if (is_plain_data(value, null)) {
+		// plain data: the value travels as raw JSON inside the envelope, so the
+		// client reads it straight off `JSON.parse` with no devalue pass
+		envelope = '{"ok":true,"value":' + JSON.stringify(value);
+		if (deps && deps.length > 0) {
+			envelope += ',"deps":' + JSON.stringify(deps);
+		}
+		envelope += '}';
+	} else {
+		/** @type {{ ok: true, payload: string, deps?: string[] }} */
+		var object = { ok: true, payload: devalue.stringify(value) };
+		if (deps && deps.length > 0) {
+			object.deps = deps;
+		}
+		envelope = JSON.stringify(object);
 	}
-	push_script_for_hydration((str) => output.push_serialized_result(str), hash, envelope);
+	output.push_serialized_result(
+		'<script id="' +
+			get_track_async_script_id(hash) +
+			'" type="application/json">' +
+			escape_inline_script(envelope) +
+			'</script>',
+	);
+}
+
+const default_track_async_serializer = serialize_track_async_result;
+
+/**
+ * Switch once at registration, keeping the default serializer unchanged and
+ * avoiding a transport lookup for every result. Unused registration code can
+ * be removed from builds that only use the default renderer.
+ * @param {Record<string, (value: any) => any> | undefined} reducers
+ */
+export function set_track_async_transport(reducers) {
+	/** @type {typeof serialize_track_async_result} */
+	const serializer =
+		reducers === undefined
+			? default_track_async_serializer
+			: (output, hash, value, deps) => {
+					// Reducers can claim plain objects: devalue must do the only walk.
+					// Embed its JSON directly, avoiding another stringify of the payload
+					// string and another JSON.parse on the client before revival.
+					let envelope = '{"ok":true,"payload":' + devalue.stringify(value, reducers);
+					if (deps && deps.length > 0) envelope += ',"deps":' + JSON.stringify(deps);
+					envelope += '}';
+					output.push_serialized_result(
+						'<script id="' +
+							get_track_async_script_id(hash) +
+							'" type="application/json">' +
+							escape_inline_script(envelope) +
+							'</script>',
+					);
+				};
+	// Keep the function declaration so unused registration leaves exactly the
+	// original renderer in production bundles, without a mutable alias.
+	// @ts-expect-error JavaScript permits reassigning a function declaration.
+	serialize_track_async_result = serializer;
+}
+
+/**
+ * Whether a value is a plain data tree that `JSON.stringify` encodes without
+ * loss: strings, finite numbers (not `-0`), booleans, `null`, arrays without
+ * holes and plain objects, every object reachable exactly once. `JSON.parse`
+ * on the client then yields exactly what `devalue.parse` would. Anything else
+ * — `undefined`, `NaN`, `Infinity`, `-0`, bigints, symbols, functions, Dates,
+ * Maps, Sets, class instances, null-prototype objects, symbol keys, cycles
+ * and shared references — keeps its devalue encoding.
+ * @param {unknown} value
+ * @param {Set<object> | null} seen
+ * @returns {boolean}
+ */
+function is_plain_data(value, seen) {
+	switch (typeof value) {
+		case 'string':
+		case 'boolean':
+			return true;
+		case 'number':
+			return (
+				value === value &&
+				value !== Infinity &&
+				value !== -Infinity &&
+				(value !== 0 || 1 / value > 0)
+			);
+		case 'object':
+			break;
+		default:
+			return false;
+	}
+	if (value === null) {
+		return true;
+	}
+	var proto = Object.getPrototypeOf(value);
+	var is_list = proto === Array.prototype;
+	if (!is_list && proto !== Object.prototype) {
+		return false;
+	}
+	if (seen === null) {
+		seen = new Set();
+	} else if (seen.has(value)) {
+		return false;
+	}
+	seen.add(value);
+	if (is_list) {
+		var list = /** @type {unknown[]} */ (value);
+		for (var i = 0; i < list.length; i++) {
+			if (!is_plain_data(list[i], seen)) {
+				return false;
+			}
+		}
+		return true;
+	}
+	if (Object.getOwnPropertySymbols(value).length !== 0) {
+		return false;
+	}
+	var record = /** @type {Record<string, unknown>} */ (value);
+	var keys = Object.keys(record);
+	for (var k = 0; k < keys.length; k++) {
+		if (!is_plain_data(record[keys[k]], seen)) {
+			return false;
+		}
+	}
+	return true;
 }
 
 /**
@@ -2075,7 +2133,7 @@ function settle_unit_after_catch(catch_block) {
  * @returns {void}
  */
 function push_script_for_hydration(push_fn, hash, envelope) {
-	var serialized_envelope = escape_script(JSON.stringify(envelope));
+	var serialized_envelope = escape_inline_script(JSON.stringify(envelope));
 
 	push_fn(
 		'<script id="' +
@@ -2215,20 +2273,25 @@ function run_track_async(t, fn, block, dr, dj) {
 }
 
 /**
- * Walks a dependency chain and collects the hashes of dependencies that have
- * one (i.e. were created from a compile-time track/trackAsync call).
+ * The hashes of the compile-time tracked values a trackAsync read, recorded
+ * in its hydration envelope so the client re-subscribes to them. A dependency
+ * without a hash that is itself a derived (a `readOnly()` view, a derived made
+ * outside a compiled call) stands for what it read: its own dependencies are
+ * recorded in its place.
  * @param {Dependency | null} head
+ * @param {string[] | null} [hashes]
  * @returns {string[] | null}
  */
-function collect_dep_hashes(head) {
-	/** @type {string[] | null} */
-	var hashes = null;
+function collect_dep_hashes(head, hashes = null) {
 	var dep = head;
 	while (dep !== null) {
-		var h = /** @type {{ h?: string }} */ (dep.t).h;
+		var t = /** @type {{ h?: string; f: number; d?: Dependency | null }} */ (dep.t);
+		var h = t.h;
 		if (h !== undefined) {
 			if (hashes === null) hashes = [];
-			hashes.push(h);
+			if (!hashes.includes(h)) hashes.push(h);
+		} else if ((t.f & DERIVED) !== 0) {
+			hashes = collect_dep_hashes(t.d ?? null, hashes);
 		}
 		dep = dep.n;
 	}
@@ -2511,15 +2574,4 @@ export function ripple_map(iterable) {
 	return new Map(iterable);
 }
 
-/**
- * Returns the fallback value if the given value is undefined.
- * @template T
- * @param {T | undefined} value
- * @param {T} fallback
- * @returns {T}
- */
-export function fallback(value, fallback) {
-	return value === undefined ? fallback : value;
-}
-
 export { dynamic_element } from './dynamic.js';