ripple 0.3.128 → 0.4.1

package/src/runtime/index-server.js

@@ -1,6 +1,7 @@
 import { output_push, noop, tsrx_element } from './internal/server/index.js';
 
 export { Fragment } from '../jsx-runtime.js';
+export { set_transport as setTransport } from './internal/server/transport.js';
 export { Context } from './internal/server/context.js';
 export {
 	untrack,

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

@@ -1,4 +1,4 @@
-/** @import { Block, Derived, Component } from '#client' */
+/** @import { AppendIntoAnchor, Block, Derived, Component } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
@@ -11,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';
@@ -22,8 +24,9 @@ import {
 	active_block,
 	active_component,
 	active_reaction,
-	create_component_ctx,
 	is_block_dirty,
+	release_deriveds,
+	take_created_deriveds,
 	remove_dependencies,
 	run_block,
 	run_teardown,
@@ -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,87 +135,90 @@ 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
  */
-export function boundary_fn_running_block(fn, flags = 0, state = null) {
-	return branch(fn, DIRECT_CHILD_BLOCK | flags, state);
+function clear_set_ref(s) {
+	s.f(null);
+}
+
+/**
+ * @param {() => (void | (() => void))} fn
+ * @returns {Block}
+ */
+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. */
@@ -223,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,
@@ -244,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, true);
-		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;
@@ -306,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
  */
@@ -395,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;
@@ -407,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;
 		}
 	}
@@ -424,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
@@ -435,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;
@@ -459,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;
@@ -484,8 +553,15 @@ export function destroy_block(block, remove_dom = true) {
 	var f = (block.f |= DESTROYED);
 	var removed = false;
 
+	// 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;
@@ -502,6 +578,12 @@ export function destroy_block(block, remove_dom = true) {
 	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;
 

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,6 +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;
+// 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;
@@ -23,6 +25,10 @@ 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');

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

@@ -1,4 +1,4 @@
-/** @import { Component } from '#client' */
+/** @import { Component, ContextEntry } from '#client' */
 
 import { active_component } from './runtime.js';
 
@@ -16,25 +16,25 @@ export class Context {
 
 	get() {
 		const component = active_component;
-		const context = this;
 
 		if (component === null) {
 			throw new Error('No active component found, cannot get context');
 		}
-		/** @type {Component | null} */
-		let current_component = component;
 
-		while (current_component !== null) {
-			const context_map = current_component.c;
+		// A component inherits its parent's chain of set entries when it is
+		// created, so only the values that were set are visited, not every
+		// ancestor; the most recent set of a context is nearest the head.
+		/** @type {ContextEntry | null} */
+		let entry = component.c;
 
-			if (context_map?.has(context)) {
-				return context_map.get(context);
+		while (entry !== null) {
+			if (entry.k === this) {
+				return entry.v;
 			}
-
-			current_component = current_component.p;
+			entry = entry.n;
 		}
 
-		return context._v;
+		return this._v;
 	}
 
 	/**
@@ -43,19 +43,12 @@ export class Context {
 	 */
 	set(value) {
 		const component = active_component;
-		const context = this;
 
 		if (component === null) {
 			throw new Error('No active component found, cannot set context');
 		}
 
-		let current_context = component.c;
-
-		if (current_context === null) {
-			current_context = component.c = new Map();
-		}
-
-		current_context.set(context, value);
+		component.c = { k: this, v: value, n: component.c };
 	}
 }
 

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

@@ -1,14 +1,12 @@
 import { DEV } from 'esm-env';
 
-export function remove_ssr_css() {
-	if (!document || typeof requestAnimationFrame !== 'function') {
-		return;
-	}
-
-	remove_styles();
-}
-
-function remove_styles() {
+/**
+ * Removes the server's inline styles once the client stylesheets are in.
+ * Schedule it with `requestAnimationFrame`: the removal already waits for a
+ * frame after the stylesheets load, and starting from a frame keeps mounting
+ * and hydrating free of stylesheet queries.
+ */
+export function remove_styles() {
 	if (DEV) {
 		const styles = document.querySelector('style[data-vite-dev-id]');
 		if (styles) {