ripple 0.3.128 → 0.4.0

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

@@ -2,7 +2,8 @@
 
 import { render } from './blocks.js';
 import { UNINITIALIZED } from './constants.js';
-import { get_tracked, selector_tracked, set } from './runtime.js';
+import { get_tracked, revive_selector_key, selector_tracked, set } from './runtime.js';
+import { RELEASED } from './constants.js';
 
 /**
  * @typedef {{ v: any; m: Map<any, Tracked>; b: Block; a: import('./runtime.js').SelectorAccessors }} Selector
@@ -24,7 +25,7 @@ export function selector(get_source) {
 		v: UNINITIALIZED,
 		m,
 		b: /** @type {Block} */ (/** @type {unknown} */ (null)),
-		a: { get: undefined, set: undefined, m },
+		a: { get: undefined, set: undefined, m, n: 0 },
 	};
 
 	s.b = render(() => {
@@ -69,6 +70,8 @@ export function selector_match(s, key) {
 	if (match === undefined) {
 		match = selector_tracked(key === s.v, s.b, s.a, key);
 		m.set(key, match);
+	} else if ((match.f & RELEASED) !== 0) {
+		revive_selector_key(match);
 	}
 	return get_tracked(match);
 }

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

@@ -1,15 +1,12 @@
 /** @import { AppendIntoAnchor, Block } from '#client' */
 
 import {
-	COMMENT_NODE,
-	HYDRATION_END,
-	HYDRATION_START,
 	TEMPLATE_FRAGMENT,
 	TEMPLATE_USE_IMPORT_NODE,
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
-import { hydrate_advance, hydrate_node, hydrating, pop } from './hydration.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 { active_block, active_namespace } from './runtime.js';
 
@@ -56,189 +53,167 @@ export function create_fragment_from_html(
 }
 
 /**
- * Creates a template node or fragment from content and flags.
- * @param {string} content - The template content.
- * @param {number} flags - Flags for template type.
- * @param {number} [count] - Pre-calculated count of top-level nodes (for fragments). When provided, avoids runtime parsing.
- * @returns {() => Node}
+ * 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}
  */
-export function template(content, flags, count = 1) {
-	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
-	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
-	var use_svg_namespace = (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
-	var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
-	/** @type {Node | DocumentFragment | undefined} */
-	var node;
-	var node_svg = false;
-	var node_mathml = false;
-	var is_comment = content === '<!>';
-	var has_start = !is_comment && !content.startsWith('<!>');
+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;
+}
 
-	return () => {
-		if (hydrating) {
-			if (is_fragment) {
-				var start = /** @type {Node} */ (hydrate_node);
-				var end = start;
+/**
+ * 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}
+ */
+function hydrate_fragment_end(start, count) {
+	var end = start;
 
-				// Walk using compiler-provided hop count so hydration never
-				// parses template HTML into fragments.
-				for (var i = 1; i < count; i++) {
-					var next = get_next_sibling(end);
+	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);
-					}
+		while (next !== null && next.nodeType === Node.COMMENT_NODE) {
+			next = get_next_sibling(next);
+		}
 
-					if (next === null) {
-						break;
-					}
+		if (next === null) {
+			break;
+		}
 
-					end = next;
-				}
+		end = next;
+	}
 
-				assign_nodes(start, end);
-				return start;
-			} else {
-				var node_to_use = /** @type {Node} */ (hydrate_node);
-				assign_nodes(node_to_use, node_to_use);
-				return node_to_use;
-			}
-		}
-		// If using runtime namespace, check active_namespace
-		var svg = !is_comment && (use_svg_namespace || active_namespace === 'svg');
-		var mathml = !is_comment && (use_mathml_namespace || active_namespace === 'mathml');
+	return end;
+}
 
-		if (node === undefined || node_svg !== svg || node_mathml !== mathml) {
-			node = create_fragment_from_html(has_start ? content : '<!>' + content, svg, mathml);
-			node_svg = svg;
-			node_mathml = mathml;
-			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
-		}
+/**
+ * A template's parsed content and the flags that shaped it, shared by every
+ * clone of one `template()` instance.
+ * @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;
+ * }} TemplateState
+ */
 
-		/** @type {DocumentFragment | Node} */
-		var clone =
-			use_import_node || is_firefox
-				? document.importNode(/** @type {Node} */ (node), true)
-				: /** @type {Node} */ (node).cloneNode(true);
+/**
+ * The clone path of a {@link template} instance. Kept out of the per-template
+ * closure so a hydrating page never compiles it.
+ * @param {TemplateState} t
+ * @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);
+		if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
+		t.node = node;
+		t.node_svg = svg;
+		t.node_mathml = mathml;
+	}
 
-		if (is_fragment) {
-			// we know for sure that children exist
-			var start = /** @type {Node} */ (get_first_child(/** @type {DocumentFragment} */ (clone)));
-			var end = /** @type {Node} */ (/** @type {DocumentFragment} */ (clone).lastChild);
+	/** @type {DocumentFragment | Node} */
+	var clone =
+		t.use_import_node || is_firefox
+			? document.importNode(/** @type {Node} */ (node), true)
+			: /** @type {Node} */ (node).cloneNode(true);
+
+	var start = clone;
+	var end = clone;
+	if (is_fragment) {
+		// we know for sure that children exist
+		start = /** @type {Node} */ (get_first_child(/** @type {DocumentFragment} */ (clone)));
+		end = /** @type {Node} */ (/** @type {DocumentFragment} */ (clone).lastChild);
+	}
 
-			assign_nodes(start, end);
-		} else {
-			assign_nodes(clone, clone);
-		}
+	// 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;
+	}
 
-		return clone;
+	return clone;
+}
+
+/**
+ * Creates a template node or fragment from content and flags.
+ * @param {string} content - The template content.
+ * @param {number} flags - Flags for template type.
+ * @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) {
+	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));
 }
 
 /**
  * Appends a DOM node before the anchor node.
  * @param {ChildNode | AppendIntoAnchor} anchor - The anchor node.
  * @param {Node} dom - The DOM node to append.
- * @param {boolean} [skip_advance] - If true, don't advance hydrate_node (used when next() already positioned it).
  */
-export function append(anchor, dom, skip_advance) {
+export function append(anchor, dom) {
 	if (hydrating) {
-		// When skip_advance is true, the caller (e.g., a fragment component) has already
-		// used next() to position hydrate_node correctly. We must NOT reset it.
-		if (skip_advance) {
-			return;
-		}
-
-		// During hydration, if anchor === dom, we're hydrating a child component
-		// where the "anchor" IS the content. If the cursor is still somewhere
-		// inside dom (at any depth), reset it to dom's level so sibling traversal
-		// works. But if the cursor has advanced past dom (e.g., because internal
-		// control flow blocks like switch/if/for advanced it through their
-		// hydration markers), preserve the advanced position.
-		if (anchor === dom) {
-			if (hydrate_node !== null && hydrate_node !== dom && dom.contains(hydrate_node)) {
-				pop(dom);
-			}
-			return;
-		}
-
-		// If the hydration cursor has descended into dom's children (e.g. after
-		// child()/sibling() traversal inside a single-node template), we need
-		// pop() to reset back to dom's sibling level before advancing.
-		// But if the cursor is already at dom's sibling level (e.g. because
-		// nested control flow blocks advanced it past dom via sibling traversal),
-		// pop() would incorrectly reset backwards — so we skip it.
-		if (hydrate_node !== null && hydrate_node !== dom && dom.contains(hydrate_node)) {
-			pop(dom);
-		} else if (hydrate_node !== dom) {
-			// Cursor has advanced past dom via sibling traversal (due to nested
-			// block processing). Update the branch block's end to reflect the
-			// actual extent, which may be past the statically-assigned end from
-			// the template's assign_nodes call.
-			var block = /** @type {Block} */ (active_block);
-			var s = block.s;
-			if (s !== null) {
-				s.end = /** @type {Node} */ (hydrate_node);
-			}
-
-			if (is_after_hydration_block(dom, hydrate_node)) {
-				return;
-			}
-		}
-
-		// Only advance if there's a next sibling. At the end of a component's
-		// content, there might not be more siblings, and that's fine.
-		hydrate_advance();
+		hydrate_append(anchor, dom);
 		return;
 	}
-	if ('parent' in anchor) {
+	if (/** @type {AppendIntoAnchor} */ (anchor).into === true) {
 		// Append-into-parent sentinel: an all-component-children element passes a
 		// `{ parent }` object (no `nodeType`) so each component's root appends as
 		// the host's last child instead of inserting before a placeholder comment.
 		// The block still self-marks its range via assign_nodes, so teardown works.
-		anchor.parent.appendChild(dom);
+		/** @type {AppendIntoAnchor} */ (anchor).parent.appendChild(dom);
 		return;
 	}
-	anchor.before(/** @type {Node} */ (dom));
-}
-
-/**
- * @param {Node} start
- * @param {Node | null} target
- * @returns {boolean}
- */
-function is_after_hydration_block(start, target) {
-	if (
-		target === null ||
-		start.nodeType !== COMMENT_NODE ||
-		/** @type {Comment} */ (start).data !== HYDRATION_START
-	) {
-		return false;
-	}
-
-	var current = get_next_sibling(start);
-	var depth = 0;
-
-	while (current !== null && current !== target) {
-		if (current.nodeType === COMMENT_NODE) {
-			var data = /** @type {Comment} */ (current).data;
-
-			// `[`-prefixed covers plain block starts and streaming slot markers
-			if (data.startsWith(HYDRATION_START)) {
-				depth += 1;
-			} else if (data === HYDRATION_END) {
-				if (depth === 0) {
-					return true;
-				}
-
-				depth -= 1;
-			}
-		}
-
-		current = get_next_sibling(current);
-	}
-
-	return false;
+	/** @type {ChildNode} */ (anchor).before(/** @type {Node} */ (dom));
 }
 
 export function text(data = '') {

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

@@ -0,0 +1,38 @@
+import * as devalue from 'devalue';
+import { create_transport } from '../../transport.js';
+
+export { set_transport as setTransport };
+
+/** @type {ReturnType<typeof create_transport>} */
+let transport;
+
+/**
+ * Register the application's transport before hydration, mounting or RPC.
+ * @param {import('#public').Transport} [value]
+ */
+export function set_transport(value) {
+	transport = create_transport(value);
+}
+
+/**
+ * Encodes RPC arguments for the wire with the registered transport, if any.
+ * @param {unknown} value
+ * @returns {string}
+ */
+export function encode(value) {
+	return devalue.stringify(value, transport?.reducers);
+}
+
+/**
+ * Revives a devalue payload: the string form (RPC results, hydration
+ * envelopes from a server without a transport), or the flattened array a
+ * server with a transport embeds directly in a hydration envelope.
+ * @param {string | unknown[]} payload
+ * @returns {any}
+ */
+export function revive(payload) {
+	var revivers = transport?.revivers;
+	return typeof payload === 'string'
+		? devalue.parse(payload, revivers)
+		: devalue.unflatten(payload, revivers);
+}