ripple 0.3.12 → 0.3.14

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

@@ -1,19 +1,30 @@
 /**
-@import { Component, Dependency, Derived, Tracked } from '#server';
-@import { SSRComponent } from 'ripple/server';
-*/
+ * @import { Component, Dependency, Derived, Tracked, Block, TryBlockWithCatch } from '#server';
+ * @import { NestedArray } from '#helpers';
+ * @import { Props } from '#public';
+ * @import { RenderResult, BaseRenderOptions, RenderStreamResult, Stream, StreamSink } from 'ripple/server';
+ */
+
+// Export-only Types
+/** @typedef {Output} OutputInterface */
+
+// Internal Types
+/** @typedef {(props?: Props) => void} RenderComponent */
+/** @typedef {{ tag: string; parent: undefined | ElementContext; filename: undefined | string; line: number; column: number; }} ElementContext */
+/** @typedef {{ cancel: () => void }} RegisteredAsyncOperation */
 
-import { Readable } from 'stream';
-import { DERIVED, UNINITIALIZED, TRACKED } from '../client/constants.js';
 import {
-	is_ripple_object,
-	get_descriptor,
-	define_property,
-	is_array,
-	array_slice,
-} from '../client/utils.js';
+	DERIVED,
+	UNINITIALIZED,
+	TRACKED,
+	SUSPENSE_PENDING,
+	SUSPENSE_REJECTED,
+	ASYNC_DERIVED_READ_THROWN,
+	DERIVED_UPDATED,
+} from '../client/constants.js';
+import { is_ripple_object, array_slice } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
-import { is_boolean_attribute } from '../../../compiler/utils.js';
+import { is_boolean_attribute } from '../../../utils/attributes.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
@@ -22,47 +33,122 @@ import {
 	is_tag_valid_with_parent,
 	is_tag_valid_with_ancestor,
 } from '../../../html-tree-validation.js';
+import { get_async_track_result } from '../../../utils/async.js';
+import {
+	cancel_async_operations,
+	component_block,
+	get_closest_catch_block,
+	try_block,
+} from './blocks.js';
+import { COMPONENT_BLOCK, TRY_BLOCK } from './constants.js';
 
 export { escape };
 export { register_component_css as register_css } from './css-registry.js';
 export { hash } from '../../../utils/hashing.js';
 export { context } from './context.js';
+export { try_block, component_block, regular_block } from './blocks.js';
 export { array_slice };
 export { ripple_element, normalize_children };
 
+export function noop() {}
+
 /**
- * @param {Output} output
  * @param {any} value
  * @returns {void}
  */
-export function render_expression(output, value) {
-	output.push(BLOCK_OPEN);
+export function render_expression(value) {
+	output_push(BLOCK_OPEN);
 
 	if (is_ripple_element(value)) {
-		var result = value.render(output, {});
-
-		if (result && typeof result.then === 'function') {
-			return result.then(() => {
-				output.push(BLOCK_CLOSE);
-			});
-		}
+		value.render({});
 	} else {
-		output.push(escape(value ?? ''));
+		output_push(escape(value ?? ''));
 	}
 
-	output.push(BLOCK_CLOSE);
+	output_push(BLOCK_CLOSE);
 }
 
-/** @type {null | Component} */
-export let active_component = null;
+/**
+ * @returns {Stream}
+ */
+export function create_ssr_stream() {
+	/** @type {ReadableStreamDefaultController<Uint8Array> | null} */
+	var c = null;
+	/** @type {ReadableStream<Uint8Array>} */
+	var stream = new ReadableStream({
+		start(controller) {
+			// this runs synchronously
+			c = controller;
+		},
+	});
+	var encoder = new TextEncoder();
+	var is_closed = false;
+	var controller = /** @type {ReadableStreamDefaultController<Uint8Array>} */ (
+		/** @type {unknown} */ (c)
+	);
+
+	var close = controller.close;
+	var error = controller.error;
+
+	controller.close = function (...args) {
+		is_closed = true;
+		close.call(controller, ...args);
+	};
 
-/** @type {number} */
-let clock = 0;
+	controller.error = function (...args) {
+		is_closed = true;
+		error.call(controller, ...args);
+	};
 
+	return {
+		controller,
+		textEncoder: encoder,
+		stream,
+		sink: {
+			push(chunk) {
+				if (is_closed) {
+					return;
+				}
+				controller.enqueue(encoder.encode(chunk));
+			},
+			close() {
+				controller.close();
+			},
+			error(reason) {
+				controller.error(reason);
+			},
+		},
+	};
+}
+
+/** @type {null | Component} */
+export let active_component = null;
+/** @type {null | Block} */
+export let active_block = null;
+export let tracking = false;
 /** @type {null | Dependency} */
 let active_dependency = null;
+let inside_async_track = false;
+/** @type {ElementContext | undefined} */
+let current_element;
+/** @type {Set<string>} */
+let seen_warnings = new Set();
 
-export let tracking = false;
+/**
+ * @returns {void}
+ */
+export function reset_state() {
+	active_component = null;
+	active_block = null;
+	active_dependency = null;
+	inside_async_track = false;
+	tracking = false;
+	seen_warnings = new Set();
+	current_element = undefined;
+}
+
+/** @type {number} */
+let clock = 0;
 
 /**
  * @returns {number}
@@ -71,6 +157,13 @@ function increment_clock() {
 	return ++clock;
 }
 
+/**
+ * @param {Block} block
+ */
+export function set_active_block(block) {
+	active_block = block;
+}
+
 /**
  * @param {Tracked | Derived} tracked
  * @returns {Dependency}
@@ -169,6 +262,15 @@ function update_derived(computed) {
 	}
 }
 
+/**
+ * @param {Tracked} computed
+ * @param {any} value
+ */
+function update_tracked_value_clock(computed, value) {
+	computed.v = value;
+	computed.c = increment_clock();
+}
+
 /**
  * @param {Derived} computed
  */
@@ -178,15 +280,29 @@ function run_derived(computed) {
 	var previous_component = active_component;
 
 	try {
-		active_component = computed.co;
 		tracking = true;
 		active_dependency = null;
+		active_component = computed.co;
 
 		var value = computed.fn();
 
 		computed.d = active_dependency;
 
 		return value;
+	} catch (error) {
+		computed.d = active_dependency;
+		if (error === ASYNC_DERIVED_READ_THROWN) {
+			// Check if any dependency is rejected — if so, propagate rejection
+			var dep = active_dependency;
+			while (dep !== null) {
+				if (dep.t.v === SUSPENSE_REJECTED) {
+					return SUSPENSE_REJECTED;
+				}
+				dep = dep.n;
+			}
+			return SUSPENSE_PENDING;
+		}
+		throw error;
 	} finally {
 		tracking = previous_tracking;
 		active_dependency = previous_dependency;
@@ -207,27 +323,79 @@ const replacements = {
 	]),
 };
 
-class Output {
-	head = '';
-	body = '';
+export class Output {
+	/** @type {Output} */
+	#root;
+	/** @type {NestedArray<string>} */
+	#head = [];
+	/** @type {NestedArray<string>} */
+	#body = [];
 	/** @type {Set<string>} */
-	css = new Set();
-	/** @type {Promise<any>[]} */
-	promises = [];
-	/** @type {Output | null} */
+	#css = new Set();
+	/** @type {null | Output} */
 	#parent = null;
-	/** @type {import('stream').Readable | null} */
-	#stream = null;
+	/** @type {StreamSink | null} */
+	#streamOutput = null;
+	#stream_started = false;
+	#stream_finished = false;
+	/** @type {null | number} */
+	#pending_count = null;
+	/** @type {null | Promise<void>} */
+	#promise = null;
+	/** @type {null | (() => void)} */
+	#promise_resolve = null;
+	/** @type {null | ((reason?: any) => void)} */
+	#promise_reject = null;
+	#is_root = false;
+	#sync_run = false;
+	/** @type {Set<RegisteredAsyncOperation>} */
+	#async_operations = new Set();
 	/** @type {null | 'head'} */
 	target = null;
 
+	get root() {
+		return this.#root;
+	}
+
+	get body() {
+		return this.#body;
+	}
+
+	get head() {
+		return this.#head;
+	}
+
+	get css() {
+		return this.#css;
+	}
+
+	get promise() {
+		if (this.#is_root) {
+			return /** @type {Promise<void>} */ (this.#promise);
+		}
+
+		throw new Error('getPromise() can only be called on the root Output');
+	}
+
 	/**
 	 * @param {Output | null} parent
-	 * @param {import('stream').Readable | null} stream
 	 */
-	constructor(parent, stream = null) {
-		this.#parent = parent;
-		this.#stream = stream;
+	constructor(parent) {
+		if (!parent) {
+			this.#root = this;
+			this.#is_root = true;
+			this.#promise = new Promise((resolve, reject) => {
+				this.#promise_resolve = resolve;
+				this.#promise_reject = reject;
+			});
+			this.#pending_count = 1;
+			this.#sync_run = true;
+		} else {
+			this.#root = parent.root;
+			this.#parent = parent;
+			this.#parent.body.push(this.body);
+			this.#parent.head.push(this.head);
+		}
 	}
 
 	/**
@@ -235,16 +403,28 @@ class Output {
 	 * @returns {void}
 	 */
 	push(str) {
-		if (this.target === 'head') {
-			this.head += str;
+		if (this.isStreamMode() && !this.isSyncRun()) {
+			// TODO - we need to wrap the resulting block output into something that
+			// the client-side can understand and append them appropriately,
+			// or actually, first append and hydrate when the full block is finished
+			// without waiting for the all blocks to finish streaming to make hydration faster
+			/** @type {StreamSink} */
+			(this.#root.#streamOutput).push(str);
 			return;
 		}
 
-		if (this.#stream) {
-			this.#stream.push(str);
-		} else {
-			this.body += str;
+		if (this.target === 'head') {
+			this.#head.push(str);
+			return;
 		}
+
+		this.#body.push(str);
+	}
+
+	clear() {
+		this.#head.length = 0;
+		this.#body.length = 0;
+		this.#css.clear();
 	}
 
 	/**
@@ -252,113 +432,262 @@ class Output {
 	 * @returns {void}
 	 */
 	register_css(hash) {
-		this.css.add(hash);
+		if (this.isStreamMode() && !this.isSyncRun()) {
+			// TODO - when we're in the streaming mode and finished the sync render,
+			// We should wrap the css into something that the client-side can understand
+			// and append them into the head immediately
+			return;
+		}
+		this.#css.add(hash);
 	}
-}
 
-/** @type {import('ripple/server').render} */
-export async function render(component) {
-	const output = new Output(null, null);
-	let head = '';
-	let body = '';
-	let css = /** @type {Set<string>} */ (new Set());
+	/**
+	 * @param {RegisteredAsyncOperation} operation
+	 * @return {void}
+	 */
+	registerAsync(operation) {
+		this.#async_operations.add(operation);
+		this.#root._incrementPending();
+	}
 
-	// Reset dev-mode element tracking state at the start of each render
-	reset_element_state();
+	/**
+	 * @param {RegisteredAsyncOperation} operation
+	 * @returns {void}
+	 */
+	resolveAsync(operation) {
+		this.#async_operations.delete(operation);
+		this.#root._decrementPending();
+	}
 
-	try {
-		if (component.async) {
-			await component(output, {});
-		} else {
-			component(output, {});
+	cancelAsyncOperations() {
+		for (const operation of this.#async_operations) {
+			operation.cancel();
+			this.#async_operations.delete(operation);
+			this.clear();
+			this.#root._decrementPending();
 		}
-		if (output.promises.length > 0) {
-			await Promise.all(output.promises);
+	}
+
+	_incrementPending() {
+		if (this.#is_root) {
+			/** @type {number} */ (this.#pending_count)++;
+			return;
 		}
+		throw new Error('_incrementPending() is an internal method.');
+	}
 
-		head = output.head;
-		body = BLOCK_OPEN + output.body + BLOCK_CLOSE;
-		css = output.css;
-	} catch (error) {
-		console.log(error);
-	} finally {
-		reset_element_state();
+	_decrementPending() {
+		if (this.#is_root) {
+			/** @type {number} */ (this.#pending_count)--;
+
+			if (this.#pending_count === 0) {
+				this.#promise_resolve?.();
+			}
+			return;
+		}
+		throw new Error('_decrementPending() is an internal method.');
 	}
-	return { head, body, css };
-}
 
-/** @type {import('ripple/server').renderToStream} */
-export function renderToStream(component) {
-	const stream = new Readable({
-		read() {},
-	});
-	const output = new Output(null, stream);
-	render_in_chunks(component, stream, output);
-	return stream;
+	_finishSyncRun() {
+		if (this.#is_root) {
+			this.#sync_run = false;
+			return;
+		}
+
+		throw new Error('_finishSyncRun() is an internal method.');
+	}
+
+	/**
+	 * @param {StreamSink} stream
+	 */
+	_setStream(stream) {
+		if (this.#is_root) {
+			this.#streamOutput = stream;
+			return;
+		}
+
+		throw new Error('_setStream() is an internal method.');
+	}
+
+	_startStream() {
+		if (this.#is_root) {
+			this.#stream_started = true;
+			return;
+		}
+
+		throw new Error('_startStream() is an internal method.');
+	}
+
+	_closeStream() {
+		if (this.#is_root) {
+			if (this.#streamOutput && this.#stream_started && !this.#stream_finished) {
+				this.#stream_finished = true;
+				this.#streamOutput.close();
+			}
+			return;
+		}
+
+		throw new Error('_closeStream() is an internal method.');
+	}
+
+	/**
+	 * @param {unknown} reason
+	 * @returns {void}
+	 */
+	_errorStream(reason) {
+		if (this.#is_root) {
+			if (this.#streamOutput && this.#stream_started && !this.#stream_finished) {
+				this.#stream_finished = true;
+				this.#streamOutput.error(reason);
+			}
+			return;
+		}
+
+		throw new Error('_errorStream() is an internal method.');
+	}
+
+	isStreamMode() {
+		return this.#root.#streamOutput !== null;
+	}
+
+	isSyncRun() {
+		return this.#root.#sync_run;
+	}
+
+	branch() {
+		return new Output(this);
+	}
 }
+
 /**
- *
- * @param {SSRComponent} component
- * @param {Readable} stream
- * @param {Output} output
+ * @param {RenderComponent} component
+ * @param {BaseRenderOptions} [passed_in_options]
+ * @returns {Promise<RenderResult | RenderStreamResult>}
  */
-async function render_in_chunks(component, stream, output) {
+export async function render(component, passed_in_options = {}) {
+	/** @type {BaseRenderOptions} */
+	var options = {
+		...(passed_in_options.stream ? { closeStream: true } : {}),
+		...passed_in_options,
+	};
+	/** @type {Error | null } */
+	var top_level_error = null;
+	var head = '';
+	var body = '';
+	/** @type {Set<string>} */
+	var css = new Set();
+	/** @type {Block | null} */
+	var root_block = null;
+
 	// Reset dev-mode element tracking state at the start of each render
-	reset_element_state();
+	reset_state();
+
+	try_block(
+		// since there is no `active_block` yet, the usual automatic block run will be skipped
+		() => {
+			// this will run only once and immediately when we call the `try_block`
+			root_block = /** @type {Block} */ (active_block);
+			const output = root_block.o;
+			if (options.stream) {
+				output._setStream(options.stream);
+			}
+			component({});
+			output._decrementPending();
+			output._finishSyncRun();
+
+			if (output.isStreamMode()) {
+				sync_buffers_to_string(output);
+				output._startStream();
+				output.push(head);
+				output.push(body);
+				// TODO - how do we handle css?, in needs to be inside the head
+				// We probably can allocate a buffer inside the head for this
+				// We should have the same order of insertion as for the full async render
+			}
+		},
+		(error) => {
+			// TODO - allow a global error template in ripple.config.ts
+			// We're not going to send the error in the stream stream.error()
+			// as we should send sent the error template
+
+			// store the error to be returned
+			top_level_error = error;
+			console.error(error);
+		},
+		() => {
+			// TODO - allow a global pending in ripple.config.ts
+			// pending would be implemented as part of the streaming rendering support
+		},
+	);
+
+	await /** @type {Block} */ (/** @type {unknown} */ (root_block)).o.promise;
+	reset_state();
+
+	const output = /** @type {Block} */ (/** @type {unknown} */ (root_block)).o;
+	if (output.isStreamMode() && options.closeStream) {
+		output._closeStream();
+	}
 
-	try {
-		if (component.async) {
-			await component(output, {});
-		} else {
-			component(output, {});
-		}
-		if (output.promises.length > 0) {
-			await Promise.all(output.promises);
-		}
-		stream.push(null);
-	} catch (error) {
-		console.error(error);
-		stream.emit('error', error);
-	} finally {
-		reset_element_state();
+	if (!output.isStreamMode()) {
+		sync_buffers_to_string(output);
+	}
+
+	return options.stream
+		? { stream: options.stream, topLevelError: top_level_error }
+		: { head, body, css, topLevelError: top_level_error };
+
+	/**
+	 * @param {Output} output
+	 * @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;
+		css = output.css;
 	}
 }
+
 /**
  * @returns {void}
  */
 export function push_component() {
-	var component = {
+	active_component = {
 		c: null,
 		p: active_component,
 	};
-	active_component = component;
+	active_block = component_block(() => {});
 }
 
 /**
  * @returns {void}
  */
 export function pop_component() {
-	var component = /** @type {Component} */ (active_component);
-	active_component = component.p;
+	active_component = /** @type {Component} */ (active_component).p;
+	active_block = /** @type {Block} */ (active_block).p;
 }
 
 /**
- * @typedef {{
- * 	tag: string;
- * 	parent: undefined | ElementContext;
- *  filename: undefined | string;
- *  line: number;
- *  column: number;
- * }} ElementContext
+ * @param {string} str
+ * @returns {void}
  */
+export function output_push(str) {
+	/** @type {Block} */ (active_block).o.push(str);
+}
 
-/** @type {ElementContext | undefined} */
-let current_element;
+/**
+ * @param {Output['target']} target
+ */
+export function set_output_target(target) {
+	/** @type {Block} */ (active_block).o.target = target;
+}
 
 /**
- * @type {Set<string>}
+ * @param {string} hash
+ * @returns {void}
  */
-let seen_warnings = new Set();
+export function output_register_css(hash) {
+	/** @type {Block} */ (active_block).o.register_css(hash);
+}
 
 /**
  * @param {string} message
@@ -427,34 +756,6 @@ export function pop_element() {
 	}
 }
 
-/**
- * Resets the dev-mode element tracking state.
- * Called automatically at the start/end of each render to prevent
- * state from leaking between renders (e.g., if a render throws).
- * Also exported for testing purposes.
- * @returns {void}
- */
-export function reset_element_state() {
-	seen_warnings = new Set();
-	current_element = undefined;
-}
-
-/**
- * @param {() => any} fn
- * @returns {Promise<void>}
- */
-export async function async(fn) {
-	await fn();
-}
-
-/**
- * @returns {boolean}
- */
-export function aborted() {
-	// For SSR, we don't abort rendering
-	return false;
-}
-
 /**
  * @param {any} tracked
  * @returns {any}
@@ -473,6 +774,24 @@ export function get(tracked) {
 		register_dependency(tracked);
 	}
 
+	if (tracked.v === SUSPENSE_PENDING || tracked.v === SUSPENSE_REJECTED) {
+		var is_try_block = false;
+		if (
+			!inside_async_track &&
+			(!active_block ||
+				active_block.f & COMPONENT_BLOCK ||
+				(is_try_block = (active_block.f & TRY_BLOCK) !== 0))
+		) {
+			throw new Error(
+				`Reads on pending tracked or derived values directly inside ${is_try_block ? 'try' : 'component'} body are prohibited. Use trackPending() test for safe access or create another derived instead.`,
+			);
+		}
+
+		// this will be caught by the run_block and the block will be re-run
+		// once the async tracked dependency's promise resolves
+		throw ASYNC_DERIVED_READ_THROWN;
+	}
+
 	var g = tracked.a.get;
 	return g ? g(tracked.v) : tracked.v;
 }
@@ -639,6 +958,7 @@ export function spread_attrs(attrs, css_hash) {
 
 var empty_get_set = { get: undefined, set: undefined };
 
+/** @type {Tracked} */
 class TrackedValue {
 	/**
 	 * @param {any} v
@@ -646,6 +966,10 @@ class TrackedValue {
 	 */
 	constructor(v, a) {
 		this.a = a;
+		/** @type {AbortController | null} */
+		this.aa = null;
+		/** @type {PromiseLike<any> | null} */
+		this.ap = null;
 		this.c = 0;
 		this.f = TRACKED;
 		this.v = v;
@@ -676,6 +1000,7 @@ class TrackedValue {
 	}
 }
 
+/** @type {Derived} */
 class DerivedValue {
 	/**
 	 * @param {Function} fn
@@ -683,11 +1008,14 @@ class DerivedValue {
 	 */
 	constructor(fn, a) {
 		this.a = a;
+		// we always should have an active block
+		// even in async we rerun blocks so we can rely on this
+		this.b = /** @type {Block} */ (active_block);
 		this.c = 0;
 		this.co = active_component;
-		/** @type {null | import('#server').Dependency} */
+		/** @type {Dependency | null} */
 		this.d = null;
-		this.f = TRACKED | DERIVED;
+		this.f = DERIVED;
 		this.fn = fn;
 		this.v = UNINITIALIZED;
 	}
@@ -745,6 +1073,16 @@ export function exclude_from_object(obj, exclude_keys) {
 	return new_obj;
 }
 
+/**
+ * @param {any} v
+ * @param {(value: any) => any} [get]
+ * @param {(next: any, prev: any) => any} [set]
+ * @returns {Derived}
+ */
+function derived(v, get, set) {
+	return /** @type {Derived} */ (new DerivedValue(v, get || set ? { get, set } : empty_get_set));
+}
+
 /**
  * @param {any} v
  * @param {(value: any) => any} [get]
@@ -759,12 +1097,298 @@ export function track(v, get, set) {
 	}
 
 	if (typeof v === 'function') {
-		return /** @type {Derived} */ (new DerivedValue(v, get || set ? { get, set } : empty_get_set));
+		return derived(v, get, set);
 	}
 
 	return tracked(v, get, set);
 }
 
+/**
+ * Runs the async tracked function, handling sync results, async results,
+ * and chained cases where fn() reads a pending dependency.
+ * @param {Tracked} t
+ * @param {() => any} fn
+ * @param {Block} block
+ * @param {((value?: any) => void) | null} dr
+ * @param {((reason?: any) => void) | null} dj
+ */
+function run_track_async(t, fn, block, dr, dj) {
+	var previous_tracking = tracking;
+	var previous_dependency = active_dependency;
+	var previous_inside = inside_async_track;
+	tracking = true;
+	active_dependency = null;
+	inside_async_track = true;
+
+	var result;
+	/** @type {Dependency | null} */
+	var caught_dep = null;
+	var caught = false;
+
+	try {
+		result = fn();
+	} catch (error) {
+		caught_dep = active_dependency;
+		caught = true;
+
+		if (error !== ASYNC_DERIVED_READ_THROWN) {
+			throw error;
+		}
+	} finally {
+		tracking = previous_tracking;
+		active_dependency = previous_dependency;
+		inside_async_track = previous_inside;
+	}
+
+	if (caught) {
+		// Chained case: fn() read a pending tracked/derived dependency
+		// Check if any dependency is rejected
+		var dep = /** @type {Dependency | null} */ (caught_dep);
+		while (dep !== null) {
+			if (dep.t.v === SUSPENSE_REJECTED) {
+				update_tracked_value_clock(t, SUSPENSE_REJECTED);
+				if (dj) {
+					dj(new Error('Upstream dependency rejected'));
+				}
+				return;
+			}
+			dep = dep.n;
+		}
+
+		// Create synthetic promise if first time (for downstream chaining)
+		if (!dr) {
+			t.ap = new Promise((resolve, reject) => {
+				dr = resolve;
+				dj = reject;
+			});
+		}
+
+		// Find the pending dependency with a promise and chain on it
+		dep = /** @type {Dependency | null} */ (caught_dep);
+		while (dep !== null) {
+			var dep_tracked = /** @type {Tracked} */ (dep.t);
+			if ((dep_tracked.f & TRACKED) !== 0 && dep_tracked.v === SUSPENSE_PENDING && dep_tracked.ap) {
+				/** @type {PromiseLike<any>} */ (dep_tracked.ap).then(
+					() => run_track_async(t, fn, block, dr, dj),
+					(error) => {
+						update_tracked_value_clock(t, SUSPENSE_REJECTED);
+						if (dj) {
+							dj(error);
+						}
+						route_error_to_catch_block(get_closest_catch_block(block), error);
+					},
+				);
+				return;
+			}
+			dep = dep.n;
+		}
+		return;
+	}
+
+	// Handle the result
+	var async_result = get_async_track_result(result);
+
+	if (async_result === null) {
+		// Sync result
+		update_tracked_value_clock(t, result);
+		if (dr) {
+			dr(result);
+		}
+		return;
+	}
+
+	t.aa = async_result.abort_controller;
+
+	if (!dr) {
+		// First run, no chaining — set real promise directly
+		t.ap = async_result.promise;
+	}
+
+	async_result.promise.then(
+		(resolved) => {
+			update_tracked_value_clock(t, resolved);
+			if (dr) {
+				dr(resolved);
+			}
+		},
+		(error) => {
+			update_tracked_value_clock(t, SUSPENSE_REJECTED);
+			if (dj) {
+				dj(error);
+			}
+			route_error_to_catch_block(get_closest_catch_block(block), error);
+		},
+	);
+}
+
+/**
+ * @param {any} v
+ * @returns {Tracked | void}
+ */
+export function track_async(v) {
+	if (is_ripple_object(v)) {
+		return v;
+	}
+
+	if (typeof v !== 'function') {
+		throw new TypeError(
+			'trackAsync() only accepts function arguments that return a promise or an object with a promise property',
+		);
+	}
+
+	var t = tracked(SUSPENSE_PENDING);
+	var block = /** @type {Block} */ (active_block);
+	run_track_async(t, v, block, null, null);
+	return t;
+}
+
+/**
+ * @param {(Derived | Tracked) | (() => any)} tracked
+ * @returns {boolean}
+ */
+export function is_tracked_pending(tracked) {
+	try {
+		if (typeof tracked === 'function') {
+			tracked();
+		} else {
+			get(tracked);
+		}
+		return false;
+	} catch (error) {
+		if (error === ASYNC_DERIVED_READ_THROWN) {
+			return true;
+		}
+		throw error;
+	}
+}
+
+/**
+ * @param {Tracked | Derived} tracked
+ * @return {any}
+ */
+export function peek_tracked(tracked) {
+	if (!is_ripple_object(tracked)) {
+		return tracked;
+	}
+
+	return tracked.v;
+}
+
+/**
+ * Routes an error to the nearest catch boundary: clears output, cancels
+ * pending async work, and invokes the catch handler if one exists.
+ * @param {TryBlockWithCatch} catch_block
+ * @param {any} error
+ */
+function route_error_to_catch_block(catch_block, error) {
+	// cancel async should also clear the output
+	// for this block and all its children
+	cancel_async_operations(catch_block);
+	reset_state();
+	set_active_block(catch_block);
+	catch_block.s.c(error);
+}
+
+/**
+ * @param {Block} block
+ * @returns {void}
+ */
+function register_block_rerun(block) {
+	// Find the pending dependency with a promise in the dependency chain.
+	var dep_entry = active_dependency;
+	// tracked async must exist as otherwise we wouldn't have thrown the ASYNC_DERIVED_READ_THROWN
+	/** @type {Tracked | null} */
+	var t = null;
+	while (dep_entry !== null) {
+		var d = /** @type {Tracked} */ (dep_entry.t);
+		if ((d.f & TRACKED) !== 0 && d.v === SUSPENSE_PENDING && d.ap) {
+			t = d;
+			break;
+		}
+		dep_entry = dep_entry.n;
+	}
+
+	var cancelled = false;
+	var try_catch_block = get_closest_catch_block(block);
+	var operation = {
+		cancel: () => {
+			cancelled = true;
+			if (t && t.aa) {
+				t.aa.abort(DERIVED_UPDATED);
+				t.aa = null;
+				t.ap = null;
+			}
+		},
+	};
+
+	try_catch_block.o.registerAsync(operation);
+	/** @type {PromiseLike<any>} */ (/** @type {Tracked} */ (t).ap).then(
+		() => {
+			if (cancelled) {
+				return;
+			}
+			reset_state();
+			try {
+				run_block(block);
+				try_catch_block.o.resolveAsync(operation);
+			} catch (error) {
+				route_error_to_catch_block(try_catch_block, error);
+			}
+		},
+		(error) => {
+			if (cancelled) {
+				return;
+			}
+			route_error_to_catch_block(try_catch_block, error);
+		},
+	);
+	// clear all output buffers as we'll rerun the block rendering
+	block.o.clear();
+}
+
+/**
+ * @param {Block} block
+ */
+export function run_block(block) {
+	var previous_block = active_block;
+	var previous_component = active_component;
+	var previous_tracking = tracking;
+	var previous_dependency = active_dependency;
+	var previous_element = current_element;
+	try {
+		active_block = block;
+		active_component = block.co;
+		tracking = true;
+		active_dependency = null;
+		block.fn(block.o);
+	} catch (error) {
+		var output = block.o;
+		if (error === ASYNC_DERIVED_READ_THROWN) {
+			// regardless of the render mode (stream, etc.)
+			// we need to rerun the block when the dependency's promise resolves
+			register_block_rerun(block);
+
+			if (output.isStreamMode() && output.isSyncRun()) {
+				// rethrowing so that the pending block catches it
+				// we should only render fallback/pending in the streaming mode
+				// when in the synchronous phase
+				throw error;
+			}
+		} else {
+			// always re-throw real errors
+			// during sync, try_block's catch handles it;
+			// during async, the register_block_rerun() try/catch handles it
+			throw error;
+		}
+	} finally {
+		active_block = previous_block;
+		active_component = previous_component;
+		tracking = previous_tracking;
+		active_dependency = previous_dependency;
+		current_element = previous_element;
+	}
+}
+
 /**
  * @param {any} _
  * @param {ConstructorParameters<typeof URL>} params