ripple 0.3.127 → 0.4.0

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

@@ -1,10 +1,9 @@
-/** @import { Block, Derived, Component } from '#client' */
+/** @import { AppendIntoAnchor, Block, Derived, Component } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
 	BRANCH_BLOCK,
 	DERIVED,
-	CONTAINS_TEARDOWN,
 	DESTROYED,
 	EFFECT_BLOCK,
 	PAUSED,
@@ -12,10 +11,12 @@ import {
 	RENDER_BLOCK,
 	ROOT_BLOCK,
 	TRY_BLOCK,
+	DETACHED_BLOCK,
 	HEAD_BLOCK,
-	DIRECT_CHILD_BLOCK,
-	UNINITIALIZED,
+	IF_BLOCK,
+	CREATES_DERIVEDS,
 } from './constants.js';
+import { hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
 import { apply_element_spread } from './render.js';
 import { is_array } from '@tsrx/core/runtime/language-helpers';
@@ -23,8 +24,10 @@ import {
 	active_block,
 	active_component,
 	active_reaction,
-	create_component_ctx,
 	is_block_dirty,
+	release_deriveds,
+	take_created_deriveds,
+	remove_dependencies,
 	run_block,
 	run_teardown,
 	schedule_update,
@@ -44,12 +47,9 @@ export function user_effect(fn) {
 
 	var component = active_component;
 	if (component !== null && !component.m) {
+		// Flat triples, created once the component has rendered (`pop_component`).
 		var e = (component.e ??= []);
-		e.push({
-			b: active_block,
-			fn,
-			r: active_reaction,
-		});
+		e.push(fn, active_block, active_reaction);
 
 		return;
 	}
@@ -78,17 +78,20 @@ export function pre_effect(fn) {
  * @param {number} [flags]
  */
 export function render(fn, state, flags = 0) {
-	return block(RENDER_BLOCK | flags, fn, state);
+	// block(), inline: a render block runs at once.
+	var block = create_block(RENDER_BLOCK | flags, fn, state);
+	run_block(block, true);
+	block.f ^= BLOCK_HAS_RUN;
+	return block;
 }
 
 /**
  * @param {any} element
  * @param {any} fn
  * @param {number} [flags]
- * @param {string} [exclude_prop]
  */
-export function render_spread(element, fn, flags = 0, exclude_prop) {
-	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn, exclude_prop));
+export function render_spread(element, fn, flags = 0) {
+	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
 }
 
 /**
@@ -100,6 +103,24 @@ export function branch(fn, flags = 0, state = null) {
 	return block(BRANCH_BLOCK | flags, fn, state);
 }
 
+function noop() {}
+
+/**
+ * Gives a text anchor materialized by `resolve_anchor` a branch block of its
+ * own, so destroying the enclosing block removes the anchor along with the
+ * content: a portal target outlives its content, and nothing else owns a node
+ * appended there. Call it after creating the anchored block so block order
+ * matches DOM order (the content is inserted before the anchor). A no-op when
+ * `anchor` is the node as received (an ordinary anchor belongs to a template)
+ * or the SSR marker the sentinel resolves to during hydration.
+ * @param {Node | AppendIntoAnchor} node
+ * @param {Node} anchor
+ */
+export function own_anchor(node, anchor) {
+	if (anchor === node || hydrating) return;
+	branch(noop, 0, { start: anchor, end: anchor });
+}
+
 /**
  * Wire up a `ref={expr}` attribute. `expr` may be:
  *   - a callback function — invoked with the element on mount; if it returns
@@ -114,89 +135,95 @@ export function branch(fn, flags = 0, state = null) {
  * doesn't subscribe to whatever the thunk happens to read. The supported
  * shape is to pass the ref slot itself (`ref={tracker}`); a foot-gun like
  * `ref={tracker.value}` would otherwise read the cell reactively and cause
- * spurious re-runs.
+ * spurious re-runs. Read untracked, the value is fixed for the life of the
+ * enclosing block, so each ref is a single effect block keyed on its state
+ * rather than a render block re-evaluating the thunk.
  *
  * @param {Element} element
  * @param {() => any} get_fn
  * @param {(value: any) => void} [set_fn]
- * @returns {Block}
+ * @returns {void}
  */
 export function ref(element, get_fn, set_fn) {
-	// make sure the first run always enters the dispatch branch,
-	/** @type {any} */
-	var ref_value = UNINITIALIZED;
-	/** @type {Block | null} */
-	var e;
-
-	return block(RENDER_BLOCK, () => {
-		// avoid any reactive reads
-		var next = untrack(get_fn);
-		if (ref_value !== (ref_value = next)) {
-			if (e) {
-				destroy_block(e);
-				e = null;
-			}
+	apply_ref(element, untrack(get_fn), set_fn);
+}
 
-			if (is_array(ref_value)) {
-				e = branch(() => {
-					for (var i = 0; i < ref_value.length; i++) {
-						let current = ref_value[i];
-						ref(element, () => current);
-					}
-				});
-			} else if (typeof ref_value === 'function') {
-				e = branch(() => {
-					effect(() => ref_value(element));
-				});
-			} else if (is_ripple_object(ref_value)) {
-				e = branch(() => {
-					effect(() => {
-						ref_value.value = element;
-						return () => {
-							ref_value.value = null;
-						};
-					});
-				});
-			} else if (set_fn !== undefined) {
-				e = branch(() => {
-					effect(() => {
-						set_fn(element);
-						return () => {
-							set_fn(null);
-						};
-					});
-				});
-			}
+/**
+ * @param {Element} element
+ * @param {any} ref_value
+ * @param {((value: any) => void) | undefined} set_fn
+ * @returns {void}
+ */
+function apply_ref(element, ref_value, set_fn) {
+	if (is_array(ref_value)) {
+		for (var i = 0; i < ref_value.length; i++) {
+			apply_ref(element, ref_value[i], undefined);
 		}
-	});
+	} else if (typeof ref_value === 'function') {
+		block(EFFECT_BLOCK, run_function_ref, { e: element, f: ref_value });
+	} else if (is_ripple_object(ref_value)) {
+		block(EFFECT_BLOCK, run_tracked_ref, { e: element, t: ref_value });
+	} else if (set_fn !== undefined) {
+		block(EFFECT_BLOCK, run_set_ref, { e: element, f: set_fn });
+	}
 }
 
 /**
- * @param {() => (void | (() => void))} fn
- * @returns {Block}
+ * The callback's return value is the effect's teardown.
+ * @param {{ e: Element, f: (element: Element) => any }} s
  */
-export function root(fn) {
-	return block(ROOT_BLOCK, fn, { start: null, end: null }, create_component_ctx());
+function run_function_ref(s) {
+	return s.f(s.e);
 }
 
 /**
- * @param {() => void} fn
- * @param {any} state
- * @returns {Block}
+ * @param {{ e: Element, t: { value: any } }} s
  */
-export function create_try_block(fn, state) {
-	return block(TRY_BLOCK, fn, state);
+function run_tracked_ref(s) {
+	s.t.value = s.e;
+	return clear_tracked_ref;
 }
 
 /**
- * @param {() => void} fn
- * @param {number} [flags]
- * @param {any} [state]
+ * Teardowns keyed on block state receive it (see `run_teardown`).
+ * @param {{ e: Element, t: { value: any } }} s
+ */
+function clear_tracked_ref(s) {
+	s.t.value = null;
+}
+
+/**
+ * @param {{ e: Element, f: (value: any) => void }} s
+ */
+function run_set_ref(s) {
+	s.f(s.e);
+	return clear_set_ref;
+}
+
+/**
+ * @param {{ e: Element, f: (value: any) => void }} s
+ */
+function clear_set_ref(s) {
+	s.f(null);
+}
+
+/**
+ * @param {() => (void | (() => void))} fn
+ * @returns {Block}
  */
-export function boundary_fn_running_block(fn, flags = 0, state = null) {
-	return branch(fn, DIRECT_CHILD_BLOCK | flags, state);
+export function root(fn) {
+	// create_component_ctx, inline: the root is the first component context.
+	return block(
+		ROOT_BLOCK,
+		fn,
+		{ start: null, end: null },
+		{ b: active_block, c: null, e: null, m: false, p: active_component },
+	);
 }
 
+/** Creation counter: a parent always has a lower id than its descendants. */
+var block_id = 0;
+
 /**
  * @param {Block} block
  * @param {Block} parent_block
@@ -220,6 +247,27 @@ function push_block(block, parent_block) {
  * @returns {Block}
  */
 export function block(flags, fn, state = null, co) {
+	var block = create_block(flags, fn, state, co);
+
+	if ((flags & EFFECT_BLOCK) !== 0) {
+		schedule_update(block);
+	} else {
+		run_block(block, true);
+		block.f ^= BLOCK_HAS_RUN;
+	}
+
+	return block;
+}
+
+/**
+ * Allocates a block and links it under the active block without running it.
+ * @param {number} flags
+ * @param {Function} fn
+ * @param {any} [state]
+ * @param {Component} [co]
+ * @returns {Block}
+ */
+export function create_block(flags, fn, state = null, co) {
 	/** @type {Block} */
 	var block = {
 		co: co || active_component,
@@ -227,6 +275,7 @@ export function block(flags, fn, state = null, co) {
 		first: null,
 		f: flags,
 		fn,
+		i: ++block_id,
 		last: null,
 		next: null,
 		p: active_block,
@@ -240,15 +289,17 @@ export function block(flags, fn, state = null, co) {
 		(/** @type {Derived} */ (active_reaction).blocks ??= []).push(block);
 	}
 
-	if (active_block !== null) {
-		push_block(block, active_block);
-	}
-
-	if ((flags & EFFECT_BLOCK) !== 0) {
-		schedule_update(block);
-	} else {
-		run_block(block);
-		block.f ^= BLOCK_HAS_RUN;
+	var parent_block = active_block;
+	if (parent_block !== null) {
+		// push_block, inline: block creation is the hot path.
+		var parent_last = parent_block.last;
+		if (parent_last === null) {
+			parent_block.last = parent_block.first = block;
+		} else {
+			parent_last.next = block;
+			block.prev = parent_last;
+			parent_block.last = block;
+		}
 	}
 
 	return block;
@@ -262,12 +313,10 @@ export function destroy_block_children(parent, remove_dom = false) {
 	var block = parent.first;
 	parent.first = parent.last = null;
 
-	if (remove_dom || (parent.f & CONTAINS_TEARDOWN) !== 0) {
-		while (block !== null) {
-			var next = block.next;
-			destroy_block(block, remove_dom);
-			block = next;
-		}
+	while (block !== null) {
+		var next = block.next;
+		destroy_block(block, remove_dom);
+		block = next;
 	}
 }
 
@@ -278,20 +327,12 @@ export function destroy_block_children(parent, remove_dom = false) {
 export function destroy_non_branch_children(parent, remove_dom = false) {
 	var block = parent.first;
 
-	if (
-		(parent.f & CONTAINS_TEARDOWN) === 0 &&
-		parent.first !== null &&
-		(parent.first.f & BRANCH_BLOCK) === 0
-	) {
-		parent.first = parent.last = null;
-	} else {
-		while (block !== null) {
-			var next = block.next;
-			if ((block.f & BRANCH_BLOCK) === 0) {
-				destroy_block(block, remove_dom);
-			}
-			block = next;
+	while (block !== null) {
+		var next = block.next;
+		if ((block.f & BRANCH_BLOCK) === 0) {
+			destroy_block(block, remove_dom);
 		}
+		block = next;
 	}
 }
 
@@ -312,6 +353,23 @@ export function unlink_block(block) {
 	}
 }
 
+/**
+ * Moves `block` to the end of its parent's child list. A block whose content
+ * is inserted before an anchor the parent already owns is created after the
+ * anchor's block; relinking keeps block order equal to DOM order, which the
+ * first/last node descent in `get_first_node`/`get_last_node` relies on.
+ * @param {Block} block
+ */
+export function move_block_last(block) {
+	var parent = /** @type {Block} */ (block.p);
+	if (parent.last === block) {
+		return;
+	}
+	unlink_block(block);
+	block.prev = block.next = null;
+	push_block(block, parent);
+}
+
 /**
  * @param {Block} block
  */
@@ -401,8 +459,8 @@ export function remove_block_dom(node, end) {
 export function move_block(block, target) {
 	var f = block.f;
 
-	// Only BRANCH_BLOCKs (excluding TRY_BLOCK) can have DOM state to move
-	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+	// Only branch and if blocks (excluding TRY_BLOCK) can have DOM state to move
+	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
 			var node = s.start;
@@ -413,6 +471,10 @@ export function move_block(block, target) {
 				target.append(node);
 				node = next;
 			}
+			// An if's materialized anchor follows its range.
+			if ((f & IF_BLOCK) !== 0 && s.o !== null) {
+				move_block(s.o, target);
+			}
 			return true;
 		}
 	}
@@ -430,8 +492,8 @@ export function move_block(block, target) {
 }
 
 /**
- * Resolve the first DOM node owned by a block. A block normally records its
- * range in `s.start`/`s.end`, but an optimized single control-flow / component
+ * Resolve the first DOM node owned by a block. A branch or if block normally
+ * records its range in `s.start`/`s.end`, but an optimized single control-flow / component
  * root scope renders its content through a descendant block instead of a
  * synthesized `<!>` wrapper, so its own `s.start` is null. In that case we
  * descend into child blocks to find the real first node. Returns null when the
@@ -441,7 +503,7 @@ export function move_block(block, target) {
  */
 export function get_first_node(block) {
 	var f = block.f;
-	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
 			return s.start;
@@ -465,10 +527,11 @@ export function get_first_node(block) {
  */
 export function get_last_node(block) {
 	var f = block.f;
-	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
-			return s.end;
+			// An if's materialized anchor is its last node.
+			return (f & IF_BLOCK) !== 0 && s.o !== null ? s.o.s.end : s.end;
 		}
 	}
 	var child = block.last;
@@ -487,13 +550,18 @@ export function get_last_node(block) {
  * @param {boolean} [remove_dom]
  */
 export function destroy_block(block, remove_dom = true) {
-	block.f ^= DESTROYED;
-
+	var f = (block.f |= DESTROYED);
 	var removed = false;
-	var f = block.f;
+
+	// An ancestor that removed its own range tells its subtree not to bother,
+	// but detached content (a portal target, `<head>`) is not inside that
+	// range and must still be removed, by this block or by its children.
+	if ((f & DETACHED_BLOCK) !== 0) {
+		remove_dom = true;
+	}
 
 	if (
-		(remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) ||
+		(remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) ||
 		(f & HEAD_BLOCK) !== 0
 	) {
 		var s = block.s;
@@ -507,6 +575,16 @@ export function destroy_block(block, remove_dom = true) {
 
 	run_teardown(block);
 
+	if (block.d !== null) {
+		remove_dependencies(block);
+	}
+	if ((f & CREATES_DERIVEDS) !== 0) {
+		var deriveds = take_created_deriveds(block);
+		if (deriveds !== null) {
+			release_deriveds(deriveds);
+		}
+	}
+
 	var parent = block.p;
 
 	// If the parent doesn't have any children, then skip this work altogether

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

@@ -1,36 +1,10 @@
-/** @import { AppendIntoAnchor, Block } from '#client' */
+/** @import { Block } from '#client' */
 
 import { is_tsrx_element } from '../../element.js';
 import { render_value } from './expression.js';
-import { active_block, pop_component, push_component } from './runtime.js';
+import { active_block } from './runtime.js';
 
-/**
- * @param {Function} fn
- * @param {Node | AppendIntoAnchor} anchor
- * @param {Record<string, any>} props
- * @param {Block | null} [block=active_block]
- * @returns {void}
- */
-export function render_component(fn, anchor, props, block = active_block) {
-	if (typeof fn !== 'function' || is_tsrx_element(fn)) {
-		throw_invalid_component_type(fn);
-	}
-
-	run_component(fn, anchor, props, block);
-}
-
-/**
- * @param {Function} fn
- * @param {Node | AppendIntoAnchor} anchor
- * @param {Record<string, any>} props
- * @param {Block | null} [block=active_block]
- * @returns {void}
- */
-function run_component(fn, anchor, props, block = active_block) {
-	push_component();
-	render_value(fn(props), /** @type {ChildNode} */ (anchor), block);
-	pop_component();
-}
+export { render_component } from './runtime.js';
 
 /**
  * @param {import('../../element.js').TSRXElement} value
@@ -46,7 +20,7 @@ export function render_tsrx_element(value, anchor, block = active_block) {
  * @param {any} value
  * @returns {never}
  */
-function throw_invalid_component_type(value) {
+export function throw_invalid_component_type(value) {
 	if (is_tsrx_element(value)) {
 		throw new TypeError('Invalid component type: received a TSRXElement value.');
 	}

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

@@ -1,11 +1,10 @@
 /** @import { Block } from '#client' */
 
-import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { hydrate_node, hydrate_next, hydrating, set_hydrate_node } from './hydration.js';
 import { first_child } from './operations.js';
-import { active_block, active_namespace, get, with_ns } from './runtime.js';
+import { active_block, active_namespace, get, untrack, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 import { is_tsrx_element } from '../../element.js';
 import { render_component } from './component.js';
@@ -14,11 +13,12 @@ import { render_component } from './component.js';
  * @typedef {Function | string | null | undefined | false} CompositeTarget
  * @param {() => CompositeTarget} get_component
  * @param {Node} node
- * @param {Record<string, any>} props
- * @param {string} [exclude_prop]
+ * @param {() => Record<string, any>} get_props the props literal of the call
+ *   site: read once per rendered component (props are plain values), and
+ *   re-read as element attributes when the target is a tag
  * @returns {void}
  */
-export function composite(get_component, node, props, exclude_prop) {
+export function composite(get_component, node, get_props) {
 	if (hydrating) {
 		// During hydration, `node` may already point at the first real SSR node
 		// (e.g. layout children). Only skip forward when we are on an empty
@@ -45,10 +45,8 @@ export function composite(get_component, node, props, exclude_prop) {
 			if (typeof component === 'function') {
 				// Handle as regular component
 				b = branch(() => {
-					const component_props = exclude_prop
-						? exclude_prop_from_object(props, exclude_prop)
-						: props;
-					render_component(component, anchor, component_props);
+					var props = untrack(get_props);
+					render_component(component, anchor, props);
 				});
 			} else if (is_tsrx_element(component)) {
 				throw new TypeError('Invalid component type: received a TSRXElement value.');
@@ -82,9 +80,10 @@ export function composite(get_component, node, props, exclude_prop) {
 						};
 					}
 
-					render_spread(element, () => props || {}, 0, exclude_prop);
+					render_spread(element, get_props, 0);
 
-					if (is_tsrx_element(props?.children)) {
+					var props = untrack(get_props);
+					if (is_tsrx_element(props.children)) {
 						/** @type {Node} */
 						var child_anchor;
 						if (hydrating) {
@@ -97,9 +96,9 @@ export function composite(get_component, node, props, exclude_prop) {
 						}
 
 						if (ns !== DEFAULT_NAMESPACE) {
-							with_ns(ns, () => props.children.render(child_anchor, block));
+							with_ns(ns, () => props.children.render(child_anchor, block, props.children.p));
 						} else {
-							props.children.render(child_anchor, block);
+							props.children.render(child_anchor, block, props.children.p);
 						}
 
 						if (hydrating) {

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

@@ -11,7 +11,8 @@ export var ASYNC_BLOCK = 1 << 10;
 export var HEAD_BLOCK = 1 << 11;
 export var PRE_EFFECT_BLOCK = 1 << 12;
 export var DIRECT_CHILD_BLOCK = 1 << 13;
-export var CONTAINS_UPDATE = 1 << 14;
+// Content rendered outside the parent's DOM range (`<head>`, a portal target).
+export var DETACHED_BLOCK = 1 << 14;
 export var CONTAINS_TEARDOWN = 1 << 15;
 export var BLOCK_HAS_RUN = 1 << 16;
 export var TRACKED = 1 << 17;
@@ -19,10 +20,15 @@ export var DERIVED = 1 << 18;
 export var DEFERRED = 1 << 19;
 export var PAUSED = 1 << 20;
 export var DESTROYED = 1 << 21;
-// Marks a block that was directly scheduled (the owner of a mutated tracked).
-// Its whole subtree is scanned for dirty subscribers during flush; blocks above
-// it are only traversed along the CONTAINS_UPDATE routing path.
-export var UPDATE_SOURCE = 1 << 22;
+// Marks a block that is queued for the next flush.
+export var SCHEDULED = 1 << 22;
+// A per-key match value created by a selector; its map entry is dropped once
+// the last subscriber unlinks.
+export var SELECTOR = 1 << 23;
+// A selector key whose last subscriber left; kept for reuse until a sweep.
+export var RELEASED = 1 << 24;
+/** A block whose latest run created deriveds that are recorded for release (see `release_deriveds`). */
+export var CREATES_DERIVEDS = 1 << 25;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
@@ -53,3 +59,6 @@ export const SUSPENSE_PENDING = Symbol('suspense_pending');
 export const SUSPENSE_REJECTED = Symbol('suspense_rejected');
 /** @type {unique symbol} */
 export const ASYNC_DERIVED_READ_THROWN = Symbol('async_derived_read_thrown');
+
+/** The hoisted render function a module-level component carries (see `render_component`). */
+export const RENDER_ENTRY = Symbol('render');