ripple 0.3.128 → 0.4.0

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

@@ -1,8 +1,14 @@
 import { render } from './blocks.js';
-import { HEAD_BLOCK } from './constants.js';
+import { DETACHED_BLOCK, HEAD_BLOCK } from './constants.js';
 import { COMMENT_NODE } from '../../../constants.js';
 import { create_text, get_first_child, get_next_sibling } from './operations.js';
-import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from './hydration.js';
+import {
+	hydrate_node,
+	hydrating,
+	set_hydrate_node,
+	set_hydrating,
+	set_hydration,
+} from './hydration.js';
 
 /**
  * @param {string} hash
@@ -49,11 +55,10 @@ export function head(hash, render_fn) {
 	}
 
 	try {
-		render(() => render_fn(anchor), null, HEAD_BLOCK);
+		render(() => render_fn(anchor), null, HEAD_BLOCK | DETACHED_BLOCK);
 	} finally {
 		if (was_hydrating) {
-			set_hydrating(true);
-			set_hydrate_node(previous_hydrate_node);
+			set_hydration(true, previous_hydrate_node);
 		}
 	}
 }

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

@@ -28,6 +28,7 @@ export function html(node, get_html, svg = false, mathml = false) {
 			if (hydrating) {
 				// The anchor is the hash comment - we need to skip past it and its content
 				set_hydrate_node(anchor);
+				/** @type {Node | null} */
 				var next = hydrate_next();
 
 				// Walk until we find the empty comment end marker

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

@@ -1,12 +1,14 @@
-/** @import { Derived, Tracked } from '#client' */
+/** @import { AppendIntoAnchor, Block, Derived, Tracked } from '#client' */
 
 import {
 	COMMENT_NODE,
 	HYDRATION_END,
 	HYDRATION_ERROR,
 	HYDRATION_START,
+	TEXT_NODE,
 } from '../../../constants.js';
-import { get_next_sibling } from './operations.js';
+import { create_text, first_child_getter, next_sibling_getter } from './operations.js';
+import { active_block } from './runtime.js';
 
 export let hydrating = false;
 
@@ -21,15 +23,22 @@ export let hydrate_node = null;
  */
 export const track_hash_reference = new Map();
 
-export function clear_track_hash_reference() {
-	track_hash_reference.clear();
+/**
+ * @param {boolean} value
+ */
+export function set_hydrating(value) {
+	hydrating = value;
 }
 
 /**
+ * Enters or leaves a hydration walk: both the flag and the cursor, which is
+ * allowed to be null when restoring the state of a client-only mount.
  * @param {boolean} value
+ * @param {Node | null} node
  */
-export function set_hydrating(value) {
+export function set_hydration(value, node) {
 	hydrating = value;
+	hydrate_node = node;
 }
 
 /**
@@ -44,11 +53,144 @@ export function set_hydrate_node(node, mounting = false) {
 }
 
 export function hydrate_next() {
-	return set_hydrate_node(get_next_sibling(/** @type {Node} */ (hydrate_node)));
+	var node = next_sibling_getter.call(/** @type {Node} */ (hydrate_node));
+	if (node === null) {
+		throw HYDRATION_ERROR;
+	}
+	return (hydrate_node = node);
+}
+
+/**
+ * Descends the cursor into the current node's first child, the way a
+ * compiled `element.firstChild` read does while mounting.
+ * @param {boolean} [is_text]
+ * @returns {Node}
+ */
+export function hydrate_first_child(is_text) {
+	var child = first_child_getter.call(/** @type {Node} */ (hydrate_node));
+
+	if (child === null || (is_text === true && child.nodeType !== TEXT_NODE)) {
+		child = repair_first_child(child);
+	}
+
+	return (hydrate_node = child);
+}
+
+/**
+ * Adopts the text node that is an element's only child, leaving the cursor on
+ * the element: nothing else inside it navigates, so the parent's sibling
+ * traversal continues from the element with no pop().
+ * @returns {Node}
+ */
+export function hydrate_text_child() {
+	var child = first_child_getter.call(/** @type {Node} */ (hydrate_node));
+
+	if (child === null || child.nodeType !== TEXT_NODE) {
+		child = repair_first_child(child);
+	}
+
+	return child;
 }
 
-export function hydrate_advance() {
-	hydrate_node = get_next_sibling(/** @type {Node} */ (hydrate_node));
+/**
+ * Handles `<p>{text}</p>` where `text` rendered empty on the server: there is
+ * no text node to adopt (or, with siblings, the next node is not one), so one
+ * is created in its place.
+ * @param {Node | null} child
+ * @returns {Text}
+ */
+function repair_first_child(child) {
+	var text = create_text();
+	if (child === null) {
+		/** @type {Node} */ (hydrate_node).appendChild(text);
+	} else {
+		/** @type {ChildNode} */ (child).before(text);
+	}
+	return text;
+}
+
+/**
+ * Moves the cursor to the current node's next sibling, the way a compiled
+ * `node.nextSibling` read does while mounting.
+ * @param {boolean} [is_text]
+ * @returns {Node}
+ */
+export function hydrate_next_sibling(is_text) {
+	var next_sibling = /** @type {ChildNode | null} */ (
+		next_sibling_getter.call(/** @type {Node} */ (hydrate_node))
+	);
+
+	if (next_sibling === null || (is_text === true && next_sibling.nodeType !== TEXT_NODE)) {
+		if (is_text !== true) {
+			throw HYDRATION_ERROR;
+		}
+		next_sibling = repair_next_sibling(next_sibling);
+	}
+
+	return (hydrate_node = next_sibling);
+}
+
+/**
+ * A sibling `{expression}` that rendered empty on the server has no text node
+ * to hydrate: create one after the current node (or before whatever follows).
+ * @param {ChildNode | null} next_sibling
+ * @returns {Text}
+ */
+function repair_next_sibling(next_sibling) {
+	var text = create_text();
+	if (next_sibling === null) {
+		/** @type {ChildNode} */ (hydrate_node).after(text);
+	} else {
+		next_sibling.before(text);
+	}
+	return text;
+}
+
+/**
+ * The hydration path of `append`: repositions the hydration cursor instead
+ * of inserting. Kept out of the insert path so a client-only mount never
+ * compiles it.
+ *
+ * Every hydrated node, block, and component leaves the cursor on its last
+ * DOM node, and whoever owns the next node steps past it: a parent element
+ * with its sibling traversal, a control-flow block by reaching its end
+ * marker, an append-into sentinel by adopting the cursor as the next
+ * component's first node.
+ * @param {ChildNode | AppendIntoAnchor} anchor
+ * @param {Node} dom
+ */
+export function hydrate_append(anchor, dom) {
+	var node = /** @type {Node} */ (hydrate_node);
+
+	// The cursor descended into dom's children (child()/sibling() traversal
+	// inside a single-node template) without a compiler-emitted pop(): bring it
+	// back up to dom before deciding where to leave it.
+	if (node !== dom && dom.contains(node)) {
+		node = dom;
+	}
+
+	// A child component renders into the anchor it was handed, which is its
+	// own first node. Its content is hydrated, so leave the cursor on the
+	// content's last node for the parent's sibling traversal.
+	if (anchor === dom) {
+		hydrate_node = node;
+		return;
+	}
+
+	if (node !== dom) {
+		// A fragment's cursor sits on its last top-level node, past the
+		// template's first node: widen the block's end to cover the whole
+		// fragment rather than only the node assign_nodes saw.
+		var s = /** @type {Block} */ (active_block).s;
+		if (s !== null) {
+			s.end = node;
+		}
+	}
+
+	// Step past the content: a branch lands on its block's end marker, the
+	// root on the boundary's end marker, an append-into sentinel on the next
+	// component's first node.
+	hydrate_node = next_sibling_getter.call(node);
 }
 
 export function next(n = 1) {
@@ -56,7 +198,7 @@ export function next(n = 1) {
 		var node = hydrate_node;
 
 		for (var i = 0; i < n; i++) {
-			node = get_next_sibling(/** @type {Node} */ (node));
+			node = next_sibling_getter.call(/** @type {Node} */ (node));
 		}
 
 		hydrate_node = node;
@@ -91,6 +233,6 @@ export function skip_to_hydration_end() {
 				depth += 1;
 			}
 		}
-		node = /** @type {Node} */ (get_next_sibling(node));
+		node = /** @type {Node} */ (next_sibling_getter.call(node));
 	}
 }

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

@@ -1,71 +1,260 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
-import { IF_BLOCK, UNINITIALIZED } from './constants.js';
+import {
+	block,
+	branch,
+	destroy_block,
+	get_first_node,
+	get_last_node,
+	move_block_last,
+	remove_block_dom,
+} from './blocks.js';
+import { DETACHED_BLOCK, IF_BLOCK, RENDER_BLOCK, UNINITIALIZED } from './constants.js';
 import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
+import { create_text, resolve_anchor } from './operations.js';
+import { active_block, probe_if, run_untracked } from './runtime.js';
 import { append } from './template.js';
 
 /**
- * @param {Node} node
- * @param {(set_branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * The if block renders its branch directly: the block owns the branch's DOM
+ * range and its children are the branch's blocks, so no branch block sits in
+ * between. Its condition runs tracked and returns the branch function to
+ * render (or nothing); the branch renders untracked, like a branch block
+ * would.
+ * @typedef {{
+ *   start: Node | null;
+ *   end: Node | null;
+ *   a: Node | AppendIntoAnchor;
+ *   fn: (x: any) => Branch | undefined;
+ *   x: any;
+ *   b: Branch | undefined | typeof UNINITIALIZED;
+ *   o: Block | null;
+ * }} IfState
+ * @typedef {(anchor: Node, x: any) => void} Branch
+ */
+
+function noop() {}
+
+/**
+ * The last DOM node rendered by the current branch through a child block,
+ * for a branch that has no range of its own (its root is control flow).
+ * @param {Block} block
+ * @param {Block | null} skip
+ * @returns {Node | null}
+ */
+function last_child_node(block, skip) {
+	var child = block.last;
+	while (child !== null) {
+		if (child !== skip) {
+			var node = get_last_node(child);
+			if (node !== null) {
+				return node;
+			}
+		}
+		child = child.prev;
+	}
+	return null;
+}
+
+/**
+ * @param {Block} block
+ * @param {Block | null} skip
+ * @returns {Node | null}
+ */
+function first_child_node(block, skip) {
+	var child = block.first;
+	while (child !== null) {
+		if (child !== skip) {
+			var node = get_first_node(child);
+			if (node !== null) {
+				return node;
+			}
+		}
+		child = child.next;
+	}
+	return null;
+}
+
+/**
+ * Destroys the current branch: its DOM range, then its blocks (all children
+ * of the if block except the anchor's owner). `remove_dom` stays on for the
+ * children when the branch renders through them and has no range itself.
+ * @param {IfState} state
+ * @param {Block} block
+ */
+function destroy_branch(state, block) {
+	var start = state.start;
+	var remove_dom = start === null;
+
+	if (!remove_dom) {
+		remove_block_dom(start, /** @type {Node} */ (state.end));
+		state.start = state.end = null;
+	}
+
+	var keep = state.o;
+	var child = block.first;
+	while (child !== null) {
+		var next = child.next;
+		if (child !== keep) {
+			destroy_block(child, remove_dom);
+		}
+		child = next;
+	}
+}
+
+/**
+ * Turns the append-into sentinel of a root-controlled if into a text anchor
+ * the if owns. The sentinel is only right for the first append, so the anchor
+ * is materialized as late as possible: when a branch swap needs the position
+ * of the branch being replaced (still rendered), or when the if renders
+ * nothing and would otherwise have no position at all. Until then a list of
+ * `@if` items keeps no anchor nodes in the DOM.
+ * @param {IfState} state
+ * @param {Block} block
+ */
+function materialize_anchor(state, block) {
+	var sentinel = /** @type {AppendIntoAnchor} */ (state.a);
+	var parent = sentinel.parent;
+	var text = create_text();
+	var last = state.start !== null ? state.end : last_child_node(block, null);
+
+	if (last === null || last.parentNode !== parent) {
+		parent.appendChild(text);
+	} else {
+		/** @type {ChildNode} */ (last).after(text);
+	}
+
+	state.a = text;
+	// Created after the current branch, so block order follows DOM order;
+	// `update_branch` relinks it behind every later branch. The anchor sits
+	// outside the if's own range (it is the if's last node, see
+	// `get_last_node`), so the owner is detached: it removes the anchor even
+	// when the if has already removed its range.
+	state.o = branch(noop, DETACHED_BLOCK, { start: text, end: text });
+}
+
+/**
+ * Renders `fn` as the if's branch when it is not the current one. The
+ * condition returns the branch function itself, so a branch is identified by
+ * that function and no flag is needed.
+ * @param {IfState} state
+ * @param {Branch | undefined} fn
+ */
+function update_branch(state, fn) {
+	var previous = state.b;
+	if (previous === fn) return;
+	state.b = fn;
+
+	var block = /** @type {Block} */ (active_block);
+
+	if (previous !== UNINITIALIZED) {
+		if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+			materialize_anchor(state, block);
+		}
+		destroy_branch(state, block);
+	}
+
+	var o = state.o;
+
+	if (fn !== undefined) {
+		run_untracked(fn, /** @type {Node} */ (state.a), state.x);
+
+		if (o !== null) {
+			move_block_last(o);
+		} else if (
+			/** @type {AppendIntoAnchor} */ (state.a).into === true &&
+			state.start === null &&
+			first_child_node(block, null) === null
+		) {
+			materialize_anchor(state, block);
+		}
+	} else if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+		materialize_anchor(state, block);
+	}
+}
+
+/**
+ * @param {IfState} state
+ */
+function run_if(state) {
+	update_branch(state, state.fn(state.x));
+}
+
+/**
+ * State lives on the block instead of per-if closures.
+ * @param {Node | AppendIntoAnchor} anchor
+ * @param {IfState['fn']} fn
+ * @param {any} x
+ * @returns {IfState}
+ */
+function if_block_state(anchor, fn, x) {
+	return {
+		// DOM range of the current branch
+		start: null,
+		end: null,
+		a: anchor,
+		fn,
+		// the captured local a hoisted condition and its branches receive
+		x,
+		// the current branch
+		b: UNINITIALIZED,
+		// block owning the anchor materialized from a sentinel
+		o: null,
+	};
+}
+
+/**
+ * @param {Node | AppendIntoAnchor} node
+ * @param {IfState['fn']} fn
  * @param {boolean} [root_controlled] When true the block renders directly before
- *   the component's `__anchor` (no synthesized `<!>` wrapper). During hydration
+ *   the component's `__anchor` (no synthesized `<!>` wrapper), which may be an
+ *   append-into sentinel: branches then append into the parent until the if
+ *   needs a position of its own (see `materialize_anchor`). During hydration
  *   the SSR boundary start marker sits at the cursor; we hand it to `append()`
  *   afterwards so it performs the same context-aware boundary advance the
  *   eliminated wrapper's `append()` used to do.
+ * @param {any} [x] The one local a hoisted condition and its branches capture,
+ *   passed to them as their second argument (see the compiler's if lowering).
  * @returns {void}
  */
-export function if_block(node, fn, root_controlled) {
+export function if_block(node, fn, root_controlled, x) {
 	/** @type {Node | undefined} */
 	var boundary;
-
-	if (hydrating) {
-		if (root_controlled) {
-			boundary = /** @type {Node} */ (hydrate_node);
-		}
-		hydrate_next();
-	}
-
 	var anchor = node;
-	var has_branch = false;
-	/** @type {any} */
-	var condition = UNINITIALIZED;
-	/** @type {Block | null} */
-	var b = null;
-
-	/** @type {(fn: (anchor: Node) => void, flag?: boolean) => void} */
-	var set_branch = (fn, flag = true) => {
-		has_branch = true;
-		update_branch(flag, fn);
-	};
-
-	/** @type {(new_condition: any, fn: ((anchor: Node) => void) | null) => void} */
-	var update_branch = (new_condition, fn) => {
-		if (condition === (condition = new_condition)) return;
 
-		if (b !== null) {
-			destroy_block(b);
-			b = null;
+	if (!hydrating) {
+		// Evaluate the condition before deciding whether the if needs a block:
+		// a condition that read no tracked state has its branch rendered by the
+		// probe itself, directly under the current block, with no if block, no
+		// state, and the branch's DOM and blocks belonging to the enclosing
+		// block like any other content. A dynamic condition gets its block,
+		// whose first run evaluates it again and subscribes it.
+		var rendered;
+		try {
+			rendered = probe_if(fn, x, node);
+		} catch {
+			// A condition that throws (a pending async read) is the block's to
+			// handle: create it and let its first run evaluate the condition.
+			rendered = false;
 		}
-
-		if (fn !== null) {
-			b = branch(() => fn(anchor));
+		if (!rendered) {
+			block(RENDER_BLOCK | IF_BLOCK, run_if, if_block_state(anchor, fn, x));
 		}
-	};
+		return;
+	}
 
-	render(
-		() => {
-			has_branch = false;
-			fn(set_branch);
-			if (!has_branch) {
-				update_branch(null, null);
-			}
-		},
-		null,
-		IF_BLOCK,
-	);
+	if (root_controlled) {
+		// A sentinel resolves to the cursor, the block's SSR boundary marker.
+		anchor = resolve_anchor(node);
+		boundary = /** @type {Node} */ (hydrate_node);
+	}
+	hydrate_next();
+
+	block(RENDER_BLOCK | IF_BLOCK, run_if, if_block_state(anchor, fn, x));
 
-	if (hydrating && root_controlled) {
-		append(/** @type {ChildNode} */ (anchor), /** @type {Node} */ (boundary));
+	if (root_controlled) {
+		// The original `node`: for a sentinel, `hydrate_append` performs the
+		// cursor advance that stands in for the eliminated sibling navigation.
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
 	}
 }

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

@@ -4,6 +4,7 @@ export {
 	next_sibling as sibling,
 	hydrate_first_child as hydrate_child,
 	hydrate_next_sibling as hydrate_sibling,
+	hydrate_text_child as hydrate_text,
 	append_into,
 	document,
 	create_text,
@@ -38,8 +39,10 @@ export {
 	TRACKED_UPDATED,
 	SUSPENSE_PENDING,
 	SUSPENSE_REJECTED,
+	RENDER_ENTRY as $r,
 } from './constants.js';
 export { event, render_event, delegate } from './events.js';
+export { portal } from './portal.js';
 
 export {
 	active_block,
@@ -49,14 +52,8 @@ export {
 	get,
 	get_tracked,
 	get_derived,
-	lazy_array_get,
-	lazy_array_rest,
-	lazy_array_set,
-	lazy_array_update,
-	lazy_array_update_pre,
 	set,
 	tracked,
-	spread_props,
 	computed_property,
 	call_property,
 	get_property,
@@ -74,11 +71,8 @@ export {
 	untrack,
 	ref_prop,
 	create_ref_prop,
-	fallback,
-	exclude_from_object,
 	derived,
 	tick,
-	proxy_props,
 	with_block,
 	with_ns,
 	handle_error,
@@ -98,12 +92,10 @@ export { if_block as if } from './if.js';
 
 export { try_block as try, get_pending_boundary } from './try.js';
 
-export { switch_block as switch } from './switch.js';
+export { if_block as switch } from './if.js';
 
 export { template, append, text } from './template.js';
 
-export { array_slice } from '@tsrx/core/runtime/language-helpers';
-
 export { ripple_array } from '../../array.js';
 
 export { ripple_object } from '../../object.js';