ripple 0.4.1 → 0.4.3

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

@@ -6,9 +6,10 @@ import {
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
-import { hydrate_append, hydrate_node, hydrating } from './hydration.js';
-import { create_text, get_first_child, get_next_sibling, is_firefox } from './operations.js';
+import { H, hydrate_node, hydrating } from './hydration.js';
+import { create_text, get_first_child, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * Assigns start and end nodes to the active block's state.
@@ -30,92 +31,46 @@ export function assign_nodes(start, end) {
 }
 
 /**
- * Creates a DocumentFragment from an HTML string.
- * @param {string} html - The HTML string.
- * @param {boolean} use_svg_namespace - Whether to use SVG namespace.
- * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
- * @returns {DocumentFragment}
+ * Parses content that belongs in the SVG or MathML namespace. Installed by
+ * `template-ns.js` when a template or a dynamic element needs it, so an app
+ * with HTML templates only ships neither.
+ * @type {((html: string, ns: 'svg' | 'math') => DocumentFragment) | null}
  */
-export function create_fragment_from_html(
-	html,
-	use_svg_namespace = false,
-	use_mathml_namespace = false,
-) {
-	if (use_svg_namespace) {
-		return from_namespace(html, 'svg');
-	}
-	if (use_mathml_namespace) {
-		return from_namespace(html, 'math');
-	}
-	var elem = document.createElement('template');
-	elem.innerHTML = html;
-	return elem.content;
-}
+var parse_ns = null;
 
 /**
- * The hydration path of a {@link template} instance: adopts the server node(s)
- * at the cursor instead of cloning. Kept out of the clone path so a client-only
- * mount never compiles it.
- * @param {boolean} is_fragment
- * @param {number} count
- * @returns {Node}
+ * @param {(html: string, ns: 'svg' | 'math') => DocumentFragment} fn
  */
-function hydrate_template(is_fragment, count) {
-	var node = /** @type {Node} */ (hydrate_node);
-	var end = is_fragment ? hydrate_fragment_end(node, count) : node;
-	// assign_nodes, inline: the per-node hydration path stays free of helpers.
-	var block = /** @type {Block} */ (active_block);
-	var s = block.s;
-	if (s === null) {
-		block.s = { start: node, end };
-	} else if (s.start === null) {
-		s.start = node;
-		s.end = end;
-	}
-	return node;
+export function set_ns_parser(fn) {
+	parse_ns = fn;
 }
 
 /**
- * The last top-level node of a hydrated fragment template. Walks using the
- * compiler-provided hop count so hydration never parses template HTML.
- * @param {Node} start
- * @param {number} count
- * @returns {Node}
+ * Creates a DocumentFragment from an HTML string.
+ * @param {string} html - The HTML string.
+ * @param {string} ns - `'svg'`, `'math'`, or `''` for HTML.
+ * @returns {DocumentFragment}
  */
-function hydrate_fragment_end(start, count) {
-	var end = start;
-
-	for (var i = 1; i < count; i++) {
-		var next = get_next_sibling(end);
-
-		while (next !== null && next.nodeType === Node.COMMENT_NODE) {
-			next = get_next_sibling(next);
-		}
-
-		if (next === null) {
-			break;
-		}
-
-		end = next;
+export function create_fragment_from_html(html, ns = '') {
+	if (ns !== '') {
+		return /** @type {NonNullable<typeof parse_ns>} */ (parse_ns)(
+			html,
+			/** @type {'svg' | 'math'} */ (ns),
+		);
 	}
-
-	return end;
+	var elem = document.createElement('template');
+	elem.innerHTML = html;
+	return elem.content;
 }
 
 /**
- * A template's parsed content and the flags that shaped it, shared by every
- * clone of one `template()` instance.
+ * A template's content and flags, shared by every clone of one `template()`
+ * instance, with the parsed node cached for the namespace it was parsed in.
  * @typedef {{
- *   content: string;
- *   is_fragment: boolean;
- *   use_import_node: boolean;
- *   use_svg_namespace: boolean;
- *   use_mathml_namespace: boolean;
- *   is_comment: boolean;
- *   has_start: boolean;
- *   node: Node | DocumentFragment | undefined;
- *   node_svg: boolean;
- *   node_mathml: boolean;
+ *   c: string;
+ *   f: number;
+ *   n: Node | DocumentFragment | undefined;
+ *   ns: string | undefined;
  * }} TemplateState
  */
 
@@ -126,24 +81,33 @@ function hydrate_fragment_end(start, count) {
  * @returns {Node}
  */
 function clone_template(t) {
-	var is_fragment = t.is_fragment;
-	var is_comment = t.is_comment;
-	var node = t.node;
-	// If using runtime namespace, check active_namespace
-	var svg = !is_comment && (t.use_svg_namespace || active_namespace === 'svg');
-	var mathml = !is_comment && (t.use_mathml_namespace || active_namespace === 'mathml');
-
-	if (node === undefined || t.node_svg !== svg || t.node_mathml !== mathml) {
-		node = create_fragment_from_html(t.has_start ? t.content : '<!>' + t.content, svg, mathml);
+	var flags = t.f;
+	var content = t.c;
+	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
+	// The namespace the content parses in: a static one from the flags, else
+	// the active namespace (a comment placeholder needs none).
+	var ns =
+		content === '<!>'
+			? ''
+			: (flags & TEMPLATE_SVG_NAMESPACE) !== 0 || active_namespace === 'svg'
+				? 'svg'
+				: (flags & TEMPLATE_MATHML_NAMESPACE) !== 0 || active_namespace === 'mathml'
+					? 'math'
+					: '';
+	var node = t.n;
+
+	if (node === undefined || t.ns !== ns) {
+		// Content that opens with a placeholder comment gets one more in
+		// front, so the first child the compiler navigates to is the element.
+		node = create_fragment_from_html(content.startsWith('<!>') ? '<!>' + content : content, ns);
 		if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
-		t.node = node;
-		t.node_svg = svg;
-		t.node_mathml = mathml;
+		t.n = node;
+		t.ns = ns;
 	}
 
 	/** @type {DocumentFragment | Node} */
 	var clone =
-		t.use_import_node || is_firefox
+		(flags & TEMPLATE_USE_IMPORT_NODE) !== 0 || is_firefox
 			? document.importNode(/** @type {Node} */ (node), true)
 			: /** @type {Node} */ (node).cloneNode(true);
 
@@ -155,15 +119,7 @@ function clone_template(t) {
 		end = /** @type {Node} */ (/** @type {DocumentFragment} */ (clone).lastChild);
 	}
 
-	// assign_nodes, inline: every template clone records its range.
-	var block = /** @type {Block} */ (active_block);
-	var s = block.s;
-	if (s === null) {
-		block.s = { start, end };
-	} else if (s.start === null) {
-		s.start = start;
-		s.end = end;
-	}
+	assign_nodes(start, end);
 
 	return clone;
 }
@@ -175,24 +131,15 @@ function clone_template(t) {
  * @param {number} [count] - Pre-calculated count of top-level nodes (for fragments). When provided, avoids runtime parsing.
  * @returns {() => Node}
  */
-export function template(content, flags, count = 1) {
+export function template(content, flags = 0, count = 1) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
-	var is_comment = content === '<!>';
 	/** @type {TemplateState} */
-	var t = {
-		content,
-		is_fragment,
-		use_import_node: (flags & TEMPLATE_USE_IMPORT_NODE) !== 0,
-		use_svg_namespace: (flags & TEMPLATE_SVG_NAMESPACE) !== 0,
-		use_mathml_namespace: (flags & TEMPLATE_MATHML_NAMESPACE) !== 0,
-		is_comment,
-		has_start: !is_comment && !content.startsWith('<!>'),
-		node: undefined,
-		node_svg: false,
-		node_mathml: false,
-	};
-
-	return () => (hydrating ? hydrate_template(is_fragment, count) : clone_template(t));
+	var t = { c: content, f: flags, n: undefined, ns: undefined };
+
+	return () =>
+		HYDRATION && hydrating
+			? /** @type {import('./hydrate.js').HydrationRuntime} */ (H).t(is_fragment, count)
+			: clone_template(t);
 }
 
 /**
@@ -201,8 +148,8 @@ export function template(content, flags, count = 1) {
  * @param {Node} dom - The DOM node to append.
  */
 export function append(anchor, dom) {
-	if (hydrating) {
-		hydrate_append(anchor, dom);
+	if (HYDRATION && hydrating) {
+		/** @type {import('./hydrate.js').HydrationRuntime} */ (H).a(anchor, dom);
 		return;
 	}
 	if (/** @type {AppendIntoAnchor} */ (anchor).into === true) {
@@ -217,7 +164,7 @@ export function append(anchor, dom) {
 }
 
 export function text(data = '') {
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
 		return /** @type {Node} */ (hydrate_node);
 	}
@@ -225,27 +172,3 @@ export function text(data = '') {
 	assign_nodes(node, node);
 	return node;
 }
-
-/**
- * Create fragment with proper namespace using Svelte's wrapping approach
- * @param {string} content
- * @param {'svg' | 'math'} ns
- * @returns {DocumentFragment}
- */
-function from_namespace(content, ns = 'svg') {
-	var wrapped = `<${ns}>${content}</${ns}>`;
-
-	var elem = document.createElement('template');
-	elem.innerHTML = wrapped;
-	var fragment = elem.content;
-
-	var root = /** @type {Element} */ (get_first_child(fragment));
-	var result = document.createDocumentFragment();
-
-	var first;
-	while ((first = get_first_child(root))) {
-		result.appendChild(/** @type {Node} */ (first));
-	}
-
-	return result;
-}

package/src/runtime/internal/client/track-async.js

@@ -0,0 +1,356 @@
+/** @import { Block, DeferredTrackedEntry, Tracked } from '#client' */
+
+import { pause_block, pre_effect } from './blocks.js';
+import {
+	ASYNC_DERIVED_READ_THROWN,
+	DIRECT_CHILD_BLOCK,
+	SUSPENSE_PENDING,
+	SUSPENSE_REJECTED,
+	TRACKED,
+	TRACKED_UPDATED,
+	TRY_BLOCK,
+} from './constants.js';
+import { hydrating, track_hash_reference } from './hydration.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
+import {
+	active_block,
+	active_component,
+	active_dependency,
+	get,
+	is_mutating_allowed,
+	set_mutating_allowed,
+	set_pending_read_handler,
+	set_tracking,
+	tracked,
+	tracking,
+	update_tracked_value_clock,
+} from './runtime.js';
+import { is_ripple_object } from './utils.js';
+import {
+	begin_boundary_request,
+	complete_boundary_request,
+	get_boundary_with_catch,
+	get_pending_boundary,
+	handle_boundary_error,
+	register_boundary_deferred,
+	register_boundary_paused_block,
+	replace_boundary_request,
+} from './try.js';
+import { get_async_track_result } from '../../../utils/async.js';
+import { get_track_async_script_id } from '../../../utils/track-async-serialization.js';
+import { revive } from './transport.js';
+import {
+	pending_read_direct,
+	track_async_argument,
+	track_async_boundary,
+	track_async_orphan,
+} from './errors.js';
+
+/**
+ * `trackAsync()` and everything a pending async read sets in motion: boundary
+ * requests, paused blocks, deferred rejections. The runtime reaches it through
+ * a handler the first `trackAsync()` installs, so an application without one
+ * ships none of it.
+ */
+
+var installed = false;
+
+/**
+ * Complete all deferred boundary requests registered on a tracked value.
+ * @param {Tracked} t
+ * @param {boolean} [show_resolved=true]
+ */
+function complete_deferred_boundaries(t, show_resolved = true) {
+	if (t.d !== null) {
+		for (var i = 0; i < t.d.length; i++) {
+			var entry = t.d[i];
+			complete_boundary_request(entry.b, entry.r, show_resolved);
+		}
+		t.d = null;
+	}
+}
+
+/**
+ * A block's run read a pending async value (it threw
+ * `ASYNC_DERIVED_READ_THROWN`, and the read was registered as a dependency):
+ * the block pauses under its pending boundary until the value settles, and
+ * a read straight from a component or boundary body is an error.
+ * @param {Block} block
+ */
+function handle_pending_read(block) {
+	var is_component_direct = active_component?.b === block;
+	var is_try_fn_block =
+		block.p !== null && (block.p.f & TRY_BLOCK) !== 0 && (block.f & DIRECT_CHILD_BLOCK) !== 0;
+
+	if (is_component_direct || is_try_fn_block) {
+		pending_read_direct(is_component_direct);
+	}
+
+	var boundary = get_pending_boundary(block);
+	if (boundary === null) {
+		return;
+	}
+	pause_block(block);
+	register_boundary_paused_block(boundary, block);
+
+	// Register deferred boundary completions for async tracked deps.
+	// This handles the case where a child boundary reads a tracked value
+	// whose resolution is managed by a different (parent) boundary.
+	var dep = block.d;
+	while (dep !== null) {
+		var dep_tracked = /** @type {Tracked} */ (dep.t);
+		if (
+			(dep_tracked.__v === SUSPENSE_PENDING || dep_tracked.__v === SUSPENSE_REJECTED) &&
+			(dep_tracked.f & TRACKED) !== 0
+		) {
+			var deferred_req = begin_boundary_request(boundary);
+			var entry = /** @type {DeferredTrackedEntry} */ ({ b: boundary, r: deferred_req });
+			if (dep_tracked.d === null) {
+				dep_tracked.d = [entry];
+			} else {
+				dep_tracked.d.push(entry);
+			}
+		}
+		dep = dep.n;
+	}
+}
+
+/**
+ * @param {any} fn
+ * @param {Block} b
+ * @param {string} hash - Unique hash for SSR serialization/hydration
+ * @returns {Tracked | void}
+ */
+export function track_async(fn, b, hash) {
+	if (!installed) {
+		installed = true;
+		set_pending_read_handler(handle_pending_read);
+	}
+
+	if (is_ripple_object(fn)) {
+		return fn;
+	}
+
+	var target_block = b || active_block;
+	if (target_block === null) {
+		track_async_orphan();
+	}
+
+	if (typeof fn !== 'function') {
+		track_async_argument();
+	}
+
+	// During hydration, attempt to read serialized data from SSR
+	var had_hydration_data = false;
+	var hydration_value;
+	/** @type {string[] | undefined} */
+	var hydration_deps;
+
+	if (HYDRATION && hydrating) {
+		var script_id = get_track_async_script_id(hash);
+		var script_el = document.getElementById(script_id);
+		if (script_el) {
+			var envelope = JSON.parse(/** @type {string} */ (script_el.textContent));
+			script_el.remove();
+
+			if (envelope.ok) {
+				had_hydration_data = true;
+				hydration_value =
+					envelope.payload === undefined ? envelope.value : revive(envelope.payload);
+				hydration_deps = envelope.deps;
+			} else {
+				// trigger the catch block
+				throw new Error(envelope.error?.message ?? 'Unknown server error');
+			}
+		}
+	}
+
+	var t = tracked(had_hydration_data ? hydration_value : SUSPENSE_PENDING, target_block, hash);
+
+	// Capture the call-site block for boundary lookups. target_block is the
+	// component's block (passed by compiler), but the actual try/pending/catch
+	// boundary is an ancestor of active_block (the block executing trackAsync).
+	var call_site_block = /** @type {Block} */ (active_block);
+
+	var version = 0;
+	/** @type {AbortController | null} */
+	var abort_controller = null;
+	var request_id = 0;
+	/** @type {Block | null} */
+	var boundary = null;
+
+	// TODO: decide if instead of insisting on pending, we create our own boundary
+	// we currently require a pending block upstream but we could also
+	// create a try/pending/catch boundary at mount and hydration like
+	// we do on the server so that there is always a boundary present.
+	// It can handle global pending when none were provided.
+	// Not sure about the catch boundary because if none were provided,
+	// the whole app for any error will be unmounted with the catch block rendered
+
+	// Find boundary from the call-site block.
+	boundary = get_pending_boundary(active_block);
+	if (boundary === null) {
+		track_async_boundary();
+	}
+
+	// If we hydrated with resolved data, the SSR already completed this request.
+	// Otherwise mark a pending request on the boundary for the client-side run.
+	if (!had_hydration_data) {
+		request_id = begin_boundary_request(boundary);
+	}
+
+	pre_effect(() => {
+		if (had_hydration_data) {
+			// First run after hydration: skip fn() entirely (the SSR already
+			// produced the resolved value) and instead register the direct
+			// dependencies from the serialized deps list so future dep changes
+			// trigger a re-run via the normal async path.
+			had_hydration_data = false;
+			if (hydration_deps !== undefined) {
+				for (var i = 0; i < hydration_deps.length; i++) {
+					var dep_ref = track_hash_reference.get(hydration_deps[i]);
+					if (dep_ref !== undefined) {
+						get(dep_ref);
+					}
+				}
+			}
+			return;
+		}
+
+		var current_version = ++version;
+
+		// Abort previous in-flight request
+		if (abort_controller !== null && abort_controller.signal.aborted === false) {
+			abort_controller.abort(TRACKED_UPDATED);
+		}
+		abort_controller = null;
+
+		// Manage boundary request: replace if in-flight, or begin new if previous completed
+		if (request_id > 0 && boundary !== null) {
+			request_id = replace_boundary_request(boundary, request_id);
+		} else if (boundary !== null) {
+			request_id = begin_boundary_request(boundary);
+		}
+
+		// Set to pending before calling fn() in case it's sync.
+		if (t.__v !== SUSPENSE_PENDING) {
+			update_tracked_value_clock(t, SUSPENSE_PENDING);
+		}
+
+		// Temporarily allow mutations so set() doesn't throw inside the pre-effect
+		var previous_is_mutating_allowed = is_mutating_allowed;
+		set_mutating_allowed(true);
+
+		var result;
+		try {
+			result = fn();
+		} catch (e) {
+			set_mutating_allowed(previous_is_mutating_allowed);
+			if (e === ASYNC_DERIVED_READ_THROWN) {
+				// A dependency is still pending or rejected (e.g. chained trackAsync).
+				// Check if any dependency is rejected — if so, propagate rejection.
+				var dep = active_dependency;
+				while (dep !== null) {
+					if (dep.t.__v === SUSPENSE_REJECTED) {
+						update_tracked_value_clock(t, SUSPENSE_REJECTED);
+						complete_deferred_boundaries(t, false);
+						if (request_id > 0 && boundary !== null) {
+							complete_boundary_request(boundary, request_id, false);
+							request_id = 0;
+						}
+						return;
+					}
+					dep = dep.n;
+				}
+				// Dependencies are pending, not rejected — register deferred
+				// rejection so that if the boundary goes to catch mode, this
+				// tracked value is also set to REJECTED.
+				if (request_id > 0 && boundary !== null) {
+					register_boundary_deferred(boundary, request_id, () => {
+						update_tracked_value_clock(t, SUSPENSE_REJECTED);
+					});
+				}
+				return;
+			}
+			throw e;
+		}
+		set_mutating_allowed(previous_is_mutating_allowed);
+
+		// Check if the result is async
+		var previous_tracking = tracking;
+		set_tracking(false);
+		var async_result = get_async_track_result(result);
+		set_tracking(previous_tracking);
+
+		if (async_result === null) {
+			// Sync result
+			update_tracked_value_clock(t, result);
+			if (request_id > 0 && boundary !== null) {
+				complete_boundary_request(boundary, request_id);
+				request_id = 0;
+			}
+			return;
+		}
+
+		// Capture per-invocation so async closures (rejection handler, teardown)
+		// have a stable reference. The shared abort_controller is only read
+		// synchronously at the top of the pre_effect to abort the previous request.
+		var current_abort_controller = async_result.abort_controller;
+		abort_controller = current_abort_controller;
+
+		async_result.promise.then(
+			(resolved) => {
+				if (current_version !== version) {
+					// stale
+					return;
+				}
+				update_tracked_value_clock(t, resolved);
+				complete_deferred_boundaries(t);
+				if (request_id > 0 && boundary !== null) {
+					complete_boundary_request(boundary, request_id);
+					request_id = 0;
+				}
+			},
+			(error) => {
+				if (current_version !== version) return; // stale
+
+				var is_internal_abort =
+					error === TRACKED_UPDATED || current_abort_controller?.signal?.reason === TRACKED_UPDATED;
+				if (is_internal_abort) {
+					// Internal abort (superseded by a new request) — don't set rejected
+					if (request_id > 0 && boundary !== null) {
+						complete_boundary_request(boundary, request_id, false);
+						request_id = 0;
+					}
+					complete_deferred_boundaries(t, false);
+					return;
+				}
+
+				update_tracked_value_clock(t, SUSPENSE_REJECTED);
+				complete_deferred_boundaries(t, false);
+
+				// Route error to catch boundary
+				var boundary_with_catch = get_boundary_with_catch(call_site_block);
+				if (boundary_with_catch !== null) {
+					handle_boundary_error(boundary_with_catch, error);
+				}
+
+				if (request_id > 0 && boundary !== null) {
+					var should_show_resolved =
+						boundary_with_catch === boundary || boundary === null ? false : true;
+					complete_boundary_request(boundary, request_id, should_show_resolved);
+					request_id = 0;
+				}
+			},
+		);
+
+		return () => {
+			// Teardown: abort in-flight request when block is destroyed
+			if (current_abort_controller !== null && current_abort_controller.signal.aborted === false) {
+				current_abort_controller.abort(TRACKED_UPDATED);
+			}
+		};
+	});
+
+	return t;
+}