ripple 0.4.2 → 0.4.3

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

@@ -18,7 +18,6 @@ import {
 } 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';
 import {
 	active_block,
@@ -34,15 +33,15 @@ import {
 	untrack,
 } from './runtime.js';
 import { is_ripple_object } from './utils.js';
+import { effect_orphan } from './errors.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @param {Function} fn
  */
 export function user_effect(fn) {
 	if (active_block === null) {
-		throw new Error(
-			'effect() must be called within an active context, such as a component or effect',
-		);
+		effect_orphan();
 	}
 
 	var component = active_component;
@@ -85,15 +84,6 @@ export function render(fn, state, flags = 0) {
 	return block;
 }
 
-/**
- * @param {any} element
- * @param {any} fn
- * @param {number} [flags]
- */
-export function render_spread(element, fn, flags = 0) {
-	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
-}
-
 /**
  * @param {Function} fn
  * @param {number} [flags]
@@ -117,7 +107,7 @@ function noop() {}
  * @param {Node} anchor
  */
 export function own_anchor(node, anchor) {
-	if (anchor === node || hydrating) return;
+	if (anchor === node || (HYDRATION && hydrating)) return;
 	branch(noop, 0, { start: anchor, end: anchor });
 }
 

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

@@ -3,6 +3,7 @@
 import { is_tsrx_element } from '../../element.js';
 import { render_value } from './expression.js';
 import { active_block } from './runtime.js';
+import { component_invalid } from './errors.js';
 
 export { render_component } from './runtime.js';
 
@@ -21,9 +22,5 @@ export function render_tsrx_element(value, anchor, block = active_block) {
  * @returns {never}
  */
 export function throw_invalid_component_type(value) {
-	if (is_tsrx_element(value)) {
-		throw new TypeError('Invalid component type: received a TSRXElement value.');
-	}
-
-	throw new TypeError('Invalid component type: expected a component function.');
+	component_invalid(is_tsrx_element(value));
 }

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

@@ -1,13 +1,17 @@
 /** @import { Block } from '#client' */
+import { component_invalid } from './errors.js';
 
-import { branch, destroy_block, render, render_spread } from './blocks.js';
+import { branch, destroy_block, render } from './blocks.js';
+import { render_spread } from './attributes.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, untrack, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
+import { install_ns_templates } from './template-ns.js';
 import { is_tsrx_element } from '../../element.js';
 import { render_component } from './component.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @typedef {Function | string | null | undefined | false} CompositeTarget
@@ -19,7 +23,7 @@ import { render_component } from './component.js';
  * @returns {void}
  */
 export function composite(get_component, node, get_props) {
-	if (hydrating) {
+	if (HYDRATION && 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
 		// comment anchor from a client template placeholder.
@@ -49,16 +53,20 @@ export function composite(get_component, node, get_props) {
 					render_component(component, anchor, props);
 				});
 			} else if (is_tsrx_element(component)) {
-				throw new TypeError('Invalid component type: received a TSRXElement value.');
+				component_invalid(true);
 			} else if (component != null) {
 				// Custom element - only create if component is not null/undefined
 				const ns = top_element_to_ns(component, active_namespace);
+				if (ns !== DEFAULT_NAMESPACE) {
+					// Templates cloned inside the element parse in its namespace.
+					install_ns_templates();
+				}
 				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 
 					/** @type {Element} */
 					var element;
-					if (hydrating) {
+					if (HYDRATION && hydrating) {
 						// Claim the SSR-rendered element instead of creating a new one.
 						element = /** @type {Element} */ (hydrate_node);
 					} else {
@@ -86,7 +94,7 @@ export function composite(get_component, node, get_props) {
 					if (is_tsrx_element(props.children)) {
 						/** @type {Node} */
 						var child_anchor;
-						if (hydrating) {
+						if (HYDRATION && hydrating) {
 							// The server renders children directly inside the element with no
 							// extra markers; descend the cursor so they claim those nodes.
 							child_anchor = /** @type {Node} */ (first_child(element));
@@ -101,7 +109,7 @@ export function composite(get_component, node, get_props) {
 							props.children.render(child_anchor, block, props.children.p);
 						}
 
-						if (hydrating) {
+						if (HYDRATION && hydrating) {
 							// Reset the cursor to the claimed element so sibling traversal
 							// continues after it.
 							set_hydrate_node(element);

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

@@ -39,7 +39,7 @@ export var ITEM_BLOCK = 1 << 26;
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
 /** @type {unique symbol} */
-export const UNINITIALIZED = Symbol('uninitialized');
+export const UNINITIALIZED = Symbol();
 /** @type {unique symbol} */
 export const TRACKED_ARRAY = Symbol();
 /** @type {unique symbol} */
@@ -58,13 +58,13 @@ export const NAMESPACE_URI = {
 	mathml: 'http://www.w3.org/1998/Math/MathML',
 };
 /** @type {unique symbol} */
-export const TRACKED_UPDATED = Symbol('TRACKED_UPDATED');
+export const TRACKED_UPDATED = Symbol();
 /** @type {unique symbol} */
-export const SUSPENSE_PENDING = Symbol('suspense_pending');
+export const SUSPENSE_PENDING = Symbol();
 /** @type {unique symbol} */
-export const SUSPENSE_REJECTED = Symbol('suspense_rejected');
+export const SUSPENSE_REJECTED = Symbol();
 /** @type {unique symbol} */
-export const ASYNC_DERIVED_READ_THROWN = Symbol('async_derived_read_thrown');
+export const ASYNC_DERIVED_READ_THROWN = Symbol();
 
 /** The hoisted render function a module-level component carries (see `render_component`). */
-export const RENDER_ENTRY = Symbol('render');
+export const RENDER_ENTRY = Symbol();

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

@@ -1,4 +1,5 @@
 /** @import { Component, ContextEntry } from '#client' */
+import { context_orphan } from './errors.js';
 
 import { active_component } from './runtime.js';
 
@@ -18,7 +19,7 @@ export class Context {
 		const component = active_component;
 
 		if (component === null) {
-			throw new Error('No active component found, cannot get context');
+			context_orphan(false);
 		}
 
 		// A component inherits its parent's chain of set entries when it is
@@ -45,7 +46,7 @@ export class Context {
 		const component = active_component;
 
 		if (component === null) {
-			throw new Error('No active component found, cannot set context');
+			context_orphan(true);
 		}
 
 		component.c = { k: this, v: value, n: component.c };

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

@@ -24,49 +24,34 @@ function remove() {
 }
 
 /**
- * @param {function} callback
+ * Calls back once every stylesheet link has loaded (or failed).
+ * @param {() => void} callback
  * @returns {void}
  */
 function remove_when_css_loaded(callback) {
-	/** @type {HTMLLinkElement[]} */
-	const links = Array.from(
-		/** @type {NodeListOf<HTMLLinkElement>} */ (
-			document.querySelectorAll('link[rel="stylesheet"]')
-		),
+	var links = /** @type {NodeListOf<HTMLLinkElement>} */ (
+		document.querySelectorAll('link[rel="stylesheet"]')
 	);
-	let remaining = links.length;
+	var remaining = links.length;
 
 	if (remaining === 0) {
 		callback();
 		return;
 	}
 
-	const done = () => {
-		remaining--;
-		if (remaining === 0) {
-			// clean up all listeners
-			links.forEach((link) => {
-				link.removeEventListener('load', onLoad);
-				link.removeEventListener('error', onError);
-			});
+	var done = () => {
+		if (--remaining === 0) {
 			callback();
 		}
 	};
 
-	function onLoad() {
-		done();
-	}
-	function onError() {
-		done();
-	}
-
-	links.forEach((link) => {
+	for (var link of links) {
 		if (link.sheet) {
 			// already loaded (possibly cached)
 			done();
 		} else {
-			link.addEventListener('load', onLoad);
-			link.addEventListener('error', onError);
+			link.addEventListener('load', done, { once: true });
+			link.addEventListener('error', done, { once: true });
 		}
-	});
+	}
 }

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));
 	}
 }