ripple 0.4.1 → 0.4.3

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

@@ -0,0 +1,188 @@
+import { DEV } from 'esm-env';
+
+/**
+ * The runtime's errors, one function per error as in Svelte: in development
+ * the message is thrown with a link to its reference page; in production only
+ * the link is, so the message text never ships. Each page lives at
+ * `https://ripple-ts.com/e/<code>`.
+ */
+
+/**
+ * @param {string} code
+ * @param {string} message
+ * @returns {string}
+ */
+function text(code, message) {
+	var link = `https://ripple-ts.com/e/${code}`;
+	return DEV ? `${message}\n${link}` : link;
+}
+
+/** @returns {never} */
+export function effect_orphan() {
+	throw new Error(
+		DEV
+			? text(
+					'effect_orphan',
+					'effect() must be called within an active context, such as a component or effect',
+				)
+			: text('effect_orphan', ''),
+	);
+}
+
+/** @returns {never} */
+export function track_orphan() {
+	throw new TypeError(
+		DEV
+			? text('track_orphan', 'track() requires a valid component context')
+			: text('track_orphan', ''),
+	);
+}
+
+/** @returns {never} */
+export function track_async_orphan() {
+	throw new TypeError(
+		DEV
+			? text('track_async_orphan', 'trackAsync() requires a valid component context')
+			: text('track_async_orphan', ''),
+	);
+}
+
+/** @returns {never} */
+export function track_async_argument() {
+	throw new TypeError(
+		DEV
+			? text(
+					'track_async_argument',
+					'trackAsync() only accepts function arguments that return a promise or an object with a promise property',
+				)
+			: text('track_async_argument', ''),
+	);
+}
+
+/** @returns {never} */
+export function track_async_boundary() {
+	throw new Error(
+		DEV
+			? text('track_async_boundary', 'Missing parent `try { ... } pending { ... }` statement')
+			: text('track_async_boundary', ''),
+	);
+}
+
+/**
+ * @param {boolean} in_component the read sits directly in a component body,
+ *   otherwise in a try/pending/catch body
+ * @returns {never}
+ */
+export function pending_read_direct(in_component) {
+	throw new Error(
+		DEV
+			? text(
+					'pending_read_direct',
+					`Reads on pending tracked values directly inside ${in_component ? 'component' : 'try/pending/catch'} body are prohibited. Use trackPending() test or peek() for safe access or create another derived instead.`,
+				)
+			: text('pending_read_direct', ''),
+	);
+}
+
+/** @returns {never} */
+export function update_depth_exceeded() {
+	throw new Error(
+		DEV
+			? text(
+					'update_depth_exceeded',
+					'Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state.',
+				)
+			: text('update_depth_exceeded', ''),
+	);
+}
+
+/** @returns {never} */
+export function set_in_derived() {
+	throw new Error(
+		DEV
+			? text(
+					'set_in_derived',
+					'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+				)
+			: text('set_in_derived', ''),
+	);
+}
+
+/**
+ * @param {string} [message] a caller's own wording
+ * @returns {never}
+ */
+export function scope_orphan(message) {
+	throw new Error(
+		DEV
+			? text('scope_orphan', message ?? 'Cannot access outside of a component context')
+			: text('scope_orphan', ''),
+	);
+}
+
+/**
+ * @param {boolean} is_element the value is a TSRX element rather than a
+ *   component function
+ * @returns {never}
+ */
+export function component_invalid(is_element) {
+	throw new TypeError(
+		DEV
+			? text(
+					'component_invalid',
+					`Invalid component type: ${is_element ? 'received a TSRXElement value.' : 'expected a component function.'}`,
+				)
+			: text('component_invalid', ''),
+	);
+}
+
+/**
+ * @param {boolean} is_set `Context#set` rather than `Context#get`
+ * @returns {never}
+ */
+export function context_orphan(is_set) {
+	throw new Error(
+		DEV
+			? text(
+					'context_orphan',
+					`No active component found, cannot ${is_set ? 'set' : 'get'} context`,
+				)
+			: text('context_orphan', ''),
+	);
+}
+
+/**
+ * @param {string} kind the block whose end marker is missing
+ * @returns {never}
+ */
+export function hydration_mismatch(kind) {
+	throw new Error(
+		DEV
+			? text('hydration_mismatch', `Hydration mismatch: expected end marker for ${kind} block`)
+			: text('hydration_mismatch', ''),
+	);
+}
+
+/** @returns {never} */
+export function hydration_disabled() {
+	throw new Error(
+		DEV
+			? text(
+					'hydration_disabled',
+					'hydrate() is not available in a client-only build: this build was compiled with `ssr: false`, which leaves the hydration runtime out',
+				)
+			: text('hydration_disabled', ''),
+	);
+}
+
+/** @returns {never} */
+export function root_boundary_disabled() {
+	throw new Error(
+		DEV
+			? text(
+					'root_boundary_disabled',
+					'A root boundary is not available in this build: it was compiled with `rootBoundary: false`, which leaves the boundary runtime out, so `mount()` and `hydrate()` cannot take `rootBoundary` options',
+				)
+			: text('root_boundary_disabled', ''),
+	);
+}

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

@@ -23,7 +23,9 @@ import { render } from './blocks.js';
 var all_registered_events = new Set();
 
 /**
- * @typedef {{ count: number, registered_events: Set<string>, target: Element }} RootTargetRef
+ * A root delegation target: its acquire count, the event names it listens
+ * for, and the element.
+ * @typedef {{ n: number, e: Set<string>, t: Element }} RootTargetRef
  */
 
 /**
@@ -103,8 +105,6 @@ export function on(element, type, handler, options = {}) {
 	};
 }
 
-var last_propagated_event = null;
-
 /**
  * @this {EventTarget}
  * @param {Event} event
@@ -114,19 +114,19 @@ export function handle_event_propagation(event) {
 	var handler_element = this;
 	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
 	var event_name = event.type;
-	var path = event.composedPath?.() || [];
-	var current_target = /** @type {null | Element} */ (path[0] || event.target);
-
-	last_propagated_event = event;
+	/** @type {null | Element} */
+	var current_target;
 
-	// composedPath contains list of nodes the event has propagated through.
-	// We check __root to skip all nodes below it in case this is a
-	// parent of the __root node, which indicates that there's nested
-	// mounted apps. In this case we don't want to trigger events multiple times.
-	var path_idx = 0;
-	var handled_at = last_propagated_event === event && event.__root;
+	// __root marks the root that already handled this event: this listener
+	// then belongs to a parent of a nested mounted app, and the walk resumes
+	// from that root so nothing below it handles the event twice. Only then
+	// is the composed path needed; a plain event starts at its target (the
+	// composed target when it was retargeted out of a shadow tree).
+	var handled_at = event.__root;
 
 	if (handled_at) {
+		var path = event.composedPath?.() || [];
+		var path_idx = 0;
 		var at_idx = path.indexOf(handled_at);
 		if (at_idx !== -1 && (handler_element === document || handler_element === window)) {
 			// This is the fallback document listener or a window listener, but the event was already handled
@@ -151,9 +151,14 @@ export function handle_event_propagation(event) {
 		if (at_idx <= handler_idx) {
 			path_idx = at_idx;
 		}
+		current_target = /** @type {Element} */ (path[path_idx] || event.target);
+	} else {
+		current_target = /** @type {Element} */ (event.target);
+		if (current_target !== null && /** @type {any} */ (current_target).shadowRoot) {
+			current_target = /** @type {Element} */ (event.composedPath?.()[0] || current_target);
+		}
 	}
 
-	current_target = /** @type {Element} */ (path[path_idx] || event.target);
 	// there can only be one delegated event per element, and we either already handled the current target,
 	// or this is the very first target in the chain which has a non-delegated listener, in which case it's safe
 	// to handle a possible delegated event on it later (through the root delegation listener for example).
@@ -181,9 +186,10 @@ export function handle_event_propagation(event) {
 		 */
 		var throw_error;
 		/**
-		 * @type {unknown[]}
+		 * @type {unknown[] | null}
 		 */
-		var other_errors = [];
+		var other_errors = null;
+		var prop = '__' + event_name;
 
 		while (current_target !== null) {
 			/** @type {null | Element} */
@@ -194,7 +200,7 @@ export function handle_event_propagation(event) {
 				null;
 
 			try {
-				var delegated = /** @type {Record<string, any>} */ (current_target)['__' + event_name];
+				var delegated = /** @type {Record<string, any>} */ (current_target)[prop];
 
 				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
 					if (is_array(delegated)) {
@@ -207,7 +213,7 @@ export function handle_event_propagation(event) {
 				}
 			} catch (error) {
 				if (throw_error) {
-					other_errors.push(error);
+					(other_errors ??= []).push(error);
 				} else {
 					throw_error = error;
 				}
@@ -219,16 +225,17 @@ export function handle_event_propagation(event) {
 		}
 
 		if (throw_error) {
-			for (let error of other_errors) {
-				// Throw the rest of the errors, one-by-one on a microtask
-				queueMicrotask(() => {
-					throw error;
-				});
+			if (other_errors !== null) {
+				for (let error of other_errors) {
+					// Throw the rest of the errors, one-by-one on a microtask
+					queueMicrotask(() => {
+						throw error;
+					});
+				}
 			}
 			throw throw_error;
 		}
 	} finally {
-		set_active_block(previous_block);
 		event.__root = handler_element;
 		// @ts-ignore remove proxy on currentTarget
 		delete event.currentTarget;
@@ -412,6 +419,44 @@ export function event(event_name, dom, handler) {
 	event_listener(event_name, dom, handler);
 }
 
+/**
+ * Compiler-emitted listener for a static `onEvent={fn}` whose name can never
+ * be delegated (`onBlur`, `onScroll`, a `Capture` variant): a native listener
+ * on the element, with the handler run outside any reactive context as a
+ * delegated handler is. Nothing is returned, as for `event()`. The name is the
+ * DOM event name the compiler resolved, so no name table is consulted here.
+ * @param {string} name
+ * @param {EventTarget} dom
+ * @param {EventListener} handler
+ * @param {boolean} [capture]
+ * @returns {void}
+ */
+export function listen(name, dom, handler, capture) {
+	dom.addEventListener(
+		name,
+		/**
+		 * @this {EventTarget}
+		 * @param {Event} event
+		 */
+		function (event) {
+			var previous_block = active_block;
+			var previous_reaction = active_reaction;
+			var previous_tracking = tracking;
+			set_active_block(null);
+			set_active_reaction(null);
+			set_tracking(false);
+			try {
+				return handler.call(this, event);
+			} finally {
+				set_active_block(previous_block);
+				set_active_reaction(previous_reaction);
+				set_tracking(previous_tracking);
+			}
+		},
+		capture,
+	);
+}
+
 /**
  * Attaches a listener and returns its remover; `event()` is the one-shot
  * compiled form of this.
@@ -496,8 +541,8 @@ export function delegate(events) {
  * @param {Iterable<string>} events
  */
 function register_root_events(ref, events) {
-	var registered_events = ref.registered_events;
-	var target = ref.target;
+	var registered_events = ref.e;
+	var target = ref.t;
 
 	for (var event_name of events) {
 		if (registered_events.has(event_name)) continue;
@@ -519,17 +564,17 @@ export function handle_root_events(target) {
 	// Sibling portals mostly share one target, so check the last ref first.
 	/** @type {RootTargetRef | undefined} */
 	var ref =
-		last_root_ref !== null && last_root_ref.target === target
+		last_root_ref !== null && last_root_ref.t === target
 			? last_root_ref
 			: root_target_refs.get(target);
 
 	if (ref === undefined) {
-		ref = { count: 0, registered_events: new Set(), target };
+		ref = { n: 0, e: new Set(), t: target };
 		root_target_refs.set(target, ref);
 		register_root_events(ref, all_registered_events);
 	}
 
-	ref.count += 1;
+	ref.n += 1;
 	last_root_ref = ref;
 	return ref;
 }
@@ -539,18 +584,18 @@ export function handle_root_events(target) {
  * @returns {void}
  */
 export function release_root_events(ref) {
-	// The map entry for `ref.target` is always this `ref`: it is only deleted
+	// The map entry for `ref.t` is always this `ref`: it is only deleted
 	// when the count hits 0, which requires every acquirer to have released.
-	ref.count -= 1;
-	if (ref.count > 0) return;
+	ref.n -= 1;
+	if (ref.n > 0) return;
 
 	// Last caller for this target: actually tear down the shared listeners.
-	var target = ref.target;
+	var target = ref.t;
 	root_target_refs.delete(target);
 	if (last_root_ref === ref) {
 		last_root_ref = null;
 	}
-	for (var event_name of ref.registered_events) {
+	for (var event_name of ref.e) {
 		target.removeEventListener(event_name, /** @type {EventListener} */ (handle_event_propagation));
 	}
 }

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

@@ -6,9 +6,10 @@ import { BRANCH_BLOCK, IF_BLOCK, UNINITIALIZED } from './constants.js';
 import { create_text, get_next_sibling } from './operations.js';
 import { assign_nodes } from './template.js';
 import { active_block } from './runtime.js';
-import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { COMMENT_NODE, HYDRATION_END, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
+import { H, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import { COMMENT_NODE, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
 import { is_tsrx_element, TSRX_ELEMENT } from '../../element.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * Finds the nearest enclosing block that owns a DOM range (a branch or an if
@@ -58,7 +59,7 @@ export function render_value(value, anchor, block) {
  * @returns {void}
  */
 function render_tsrx_collection(value, anchor, block) {
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		assign_nodes(/** @type {Node} */ (hydrate_node ?? anchor), anchor);
 		render_tsrx_collection_items(value, anchor, block);
 		return;
@@ -133,61 +134,15 @@ function render_tsrx_element(value, anchor, block) {
  * @returns {void}
  */
 function render_tsrx_collection_text(value, anchor, assign = false) {
-	if (!hydrating) {
-		var text = create_text(value);
-		insert_before(anchor, text);
-		if (assign) {
-			assign_nodes(text, text);
-		}
-		return;
-	}
-
-	var node = hydrate_node;
-
-	if (node?.nodeType === COMMENT_NODE && /** @type {Comment} */ (node).data === HYDRATION_START) {
-		node = get_next_sibling(node);
-	}
-
-	if (node?.nodeType === TEXT_NODE) {
-		var current_value = /** @type {Text} */ (node).nodeValue ?? '';
-
-		if (current_value !== value) {
-			/** @type {Text} */ (node).nodeValue = value;
-
-			if (current_value.startsWith(value)) {
-				var remaining = current_value.slice(value.length);
-
-				if (remaining !== '') {
-					var remaining_text = create_text(remaining);
-					/** @type {ChildNode} */ (node).after(remaining_text);
-					if (assign) {
-						assign_nodes(node, node);
-					}
-					set_hydrate_node(remaining_text);
-					return;
-				}
-			}
-		}
-
-		if (assign) {
-			assign_nodes(node, node);
-		}
-		set_hydrate_node(get_next_sibling(node) ?? anchor);
+	if (HYDRATION && hydrating) {
+		/** @type {import('./hydrate.js').HydrationRuntime} */ (H).x(value, anchor, assign);
 		return;
 	}
-
-	var new_text = create_text(value);
-
-	if (node !== null && node !== anchor) {
-		/** @type {ChildNode} */ (node).before(new_text);
-	} else {
-		anchor.before(new_text);
-	}
-
+	var text = create_text(value);
+	insert_before(anchor, text);
 	if (assign) {
-		assign_nodes(new_text, new_text);
+		assign_nodes(text, text);
 	}
-	set_hydrate_node(node ?? anchor);
 }
 
 /**
@@ -250,10 +205,13 @@ function run_expression(s) {
 	var anchor = s.a;
 	var type = typeof next_value;
 	var is_hydration_marker =
-		hydrating && s.n === COMMENT_NODE && /** @type {Comment} */ (anchor).data === HYDRATION_START;
+		HYDRATION &&
+		hydrating &&
+		s.n === COMMENT_NODE &&
+		/** @type {Comment} */ (anchor).data === HYDRATION_START;
 
 	if (is_hydration_marker) {
-		s.m ??= ensure_expression_end(anchor);
+		s.m ??= /** @type {import('./hydrate.js').HydrationRuntime} */ (H).e(anchor);
 	}
 
 	var end = s.m;
@@ -282,7 +240,7 @@ function run_expression(s) {
 				restore_parent_start(s);
 			}
 
-			if (end !== null && (s.i || !hydrating)) {
+			if (end !== null && (s.i || !(HYDRATION && hydrating))) {
 				clear_expression_range(anchor, end);
 			}
 
@@ -357,7 +315,10 @@ function run_expression(s) {
 	}
 
 	if (is_hydration_marker) {
-		var text = (s.t = get_hydrated_text(anchor, /** @type {Comment} */ (end)));
+		var text = (s.t = /** @type {import('./hydrate.js').HydrationRuntime} */ (H).h(
+			anchor,
+			/** @type {Comment} */ (end),
+		));
 
 		if (next_text === '') {
 			if (text !== null) {
@@ -408,68 +369,12 @@ function restore_parent_start(s) {
 	}
 }
 
-/**
- * @param {Node} anchor
- * @returns {Comment}
- */
-function ensure_expression_end(anchor) {
-	if (hydrating) {
-		/** @type {Node | null} */
-		var current = get_next_sibling(anchor);
-		var depth = 0;
-
-		while (current !== null) {
-			if (current.nodeType === COMMENT_NODE) {
-				var data = /** @type {Comment} */ (current).data;
-
-				if (data === HYDRATION_START) {
-					depth += 1;
-				} else if (data === HYDRATION_END) {
-					if (depth === 0) {
-						return /** @type {Comment} */ (current);
-					}
-
-					depth -= 1;
-				}
-			}
-
-			current = get_next_sibling(current);
-		}
-
-		throw new Error('Hydration mismatch: expected end marker for expression block');
-	}
-
-	var end = document.createComment(HYDRATION_END);
-	/** @type {ChildNode} */ (anchor).after(end);
-	return end;
-}
-
-/**
- * @param {Node} anchor
- * @param {Node} end
- * @returns {Text | null}
- */
-function get_hydrated_text(anchor, end) {
-	var first = get_next_sibling(anchor);
-
-	if (first === end) {
-		return null;
-	}
-
-	if (first?.nodeType === TEXT_NODE && get_next_sibling(first) === end) {
-		return /** @type {Text} */ (first);
-	}
-
-	clear_expression_range(anchor, end);
-	return null;
-}
-
 /**
  * @param {Node} anchor
  * @param {Node} end
  * @returns {void}
  */
-function clear_expression_range(anchor, end) {
+export function clear_expression_range(anchor, end) {
 	var current = get_next_sibling(anchor);
 
 	while (current !== null && current !== end) {
@@ -487,7 +392,7 @@ function clear_expression_range(anchor, end) {
  * @returns {void}
  */
 function settle_hydration(end) {
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		set_hydrate_node(end);
 	}
 }