ripple 0.3.128 → 0.4.1

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

@@ -16,14 +16,15 @@ import {
 	set_tracking,
 	tracking,
 } from './runtime.js';
-import { array_from, define_property, is_array } from '@tsrx/core/runtime/language-helpers';
+import { define_property, is_array } from '@tsrx/core/runtime/language-helpers';
 import { render } from './blocks.js';
 
 /** @type {Set<string>} */
 var all_registered_events = new Set();
 
-/** @type {Set<(events: Array<string>) => void>} */
-var root_event_handles = new Set();
+/**
+ * @typedef {{ count: number, registered_events: Set<string>, target: Element }} RootTargetRef
+ */
 
 /**
  * Active root delegation targets, ref-counted per target. Multiple callers of
@@ -32,10 +33,13 @@ var root_event_handles = new Set();
  * nested mounts. The shared delegated listeners for a target may only be torn
  * down once every caller for that target has released it, otherwise
  * unmounting one Portal silently kills event delegation for its siblings.
- * @type {Map<Element, { count: number, registered_events: Set<string> }>}
+ * @type {Map<Element, RootTargetRef>}
  */
 var root_target_refs = new Map();
 
+/** @type {RootTargetRef | null} */
+var last_root_ref = null;
+
 /**
  * Delegated handling only works for elements strictly below a root delegation
  * target: the root listener's propagation walk never visits the target itself
@@ -271,30 +275,10 @@ function create_event(event_name, dom, handler, options) {
 	if (is_delegated) {
 		var prop = '__' + event_name;
 		var target = /** @type {DelegatedEventTarget} */ (dom);
-		var current = target[prop];
-
-		if (current === undefined) {
-			target[prop] = handler;
-		} else if (is_array(current)) {
-			if (!current.includes(handler)) {
-				current.push(handler);
-			}
-		} else {
-			if (current !== handler) {
-				target[prop] = [current, handler];
-			}
-		}
-
+		add_delegated_handler(target, prop, handler);
 		delegate([event_name]);
 		return () => {
-			var handlers = target[prop];
-			if (is_array(handlers)) {
-				var filtered = handlers.filter((h) => h !== handler);
-				target[prop] =
-					filtered.length === 0 ? undefined : filtered.length === 1 ? filtered[0] : filtered;
-			} else {
-				target[prop] = undefined;
-			}
+			remove_delegated_handler(target, prop, handler);
 		};
 	}
 
@@ -336,12 +320,107 @@ function create_event(event_name, dom, handler, options) {
 }
 
 /**
+ * Delegated event name resolution per compiler-emitted name (`"Click"`,
+ * `"PointerMove"`, ...): the lowercase DOM name, or null when the event cannot
+ * be delegated (capture variants, non-bubbling events).
+ * @type {Map<string, string | null>}
+ */
+var delegated_event_names = new Map();
+
+/**
+ * @param {string} event_name
+ * @returns {string | null}
+ */
+function get_delegated_event_name(event_name) {
+	var name = delegated_event_names.get(event_name);
+
+	if (name === undefined) {
+		if (is_capture_event(event_name)) {
+			name = null;
+		} else {
+			name = event_name.toLowerCase();
+			if (is_non_delegated(name)) {
+				name = null;
+			}
+		}
+		delegated_event_names.set(event_name, name);
+	}
+
+	return name;
+}
+
+/**
+ * @param {DelegatedEventTarget} target
+ * @param {string} prop
+ * @param {EventListener} handler
+ * @returns {void}
+ */
+function add_delegated_handler(target, prop, handler) {
+	var current = target[prop];
+
+	if (current === undefined) {
+		target[prop] = handler;
+	} else if (is_array(current)) {
+		if (!current.includes(handler)) {
+			current.push(handler);
+		}
+	} else {
+		if (current !== handler) {
+			target[prop] = [current, handler];
+		}
+	}
+}
+
+/**
+ * @param {DelegatedEventTarget} target
+ * @param {string} prop
+ * @param {EventListener} handler
+ * @returns {void}
+ */
+function remove_delegated_handler(target, prop, handler) {
+	var handlers = target[prop];
+	if (is_array(handlers)) {
+		var filtered = handlers.filter((h) => h !== handler);
+		target[prop] =
+			filtered.length === 0 ? undefined : filtered.length === 1 ? filtered[0] : filtered;
+	} else {
+		target[prop] = undefined;
+	}
+}
+
+/**
+ * Compiler-emitted one-shot listener for a static `onEvent={handler}`: the
+ * element's lifetime owns the handler, so nothing is returned for cleanup.
  * @param {string} event_name
  * @param {Element} dom
  * @param {EventListener | AddEventObject} handler
- * @returns {() => void}
+ * @returns {void}
  */
 export function event(event_name, dom, handler) {
+	if (typeof handler === 'function') {
+		// Plain handler: the common compiled `onClick={fn}` shape. Resolve the
+		// delegated name from the cache and skip the options plumbing.
+		var name = get_delegated_event_name(event_name);
+
+		if (name !== null) {
+			add_delegated_handler(/** @type {DelegatedEventTarget} */ (dom), '__' + name, handler);
+			delegate([name]);
+			return;
+		}
+	}
+
+	event_listener(event_name, dom, handler);
+}
+
+/**
+ * Attaches a listener and returns its remover; `event()` is the one-shot
+ * compiled form of this.
+ * @param {string} event_name
+ * @param {Element} dom
+ * @param {EventListener | AddEventObject} handler
+ * @returns {() => void}
+ */
+export function event_listener(event_name, dom, handler) {
 	/** @type AddEventOptions */
 	var options = {};
 	/** @type {EventListener} */
@@ -350,7 +429,7 @@ export function event(event_name, dom, handler) {
 	if (typeof handler === 'object' && 'handleEvent' in handler) {
 		({ handleEvent: event_handler, ...options } = handler);
 	} else {
-		event_handler = handler;
+		event_handler = /** @type {EventListener} */ (handler);
 	}
 
 	return create_event(event_name, dom, event_handler, options);
@@ -381,7 +460,7 @@ export function render_event(event_name, dom, get_handler) {
 			prev = handler;
 
 			if (handler) {
-				remove_listener = event(event_name, dom, handler);
+				remove_listener = event_listener(event_name, dom, handler);
 			}
 		}
 	});
@@ -392,77 +471,86 @@ export function render_event(event_name, dom, get_handler) {
  * @returns {void}
  */
 export function delegate(events) {
+	var added = false;
+
 	for (var i = 0; i < events.length; i++) {
-		all_registered_events.add(events[i]);
+		var event_name = events[i];
+
+		if (!all_registered_events.has(event_name)) {
+			all_registered_events.add(event_name);
+			added = true;
+		}
 	}
 
-	for (var fn of root_event_handles) {
-		fn(events);
+	// Every root target already listens for every previously registered event,
+	// so only a new event name needs to fan out to the targets.
+	if (added) {
+		for (var ref of root_target_refs.values()) {
+			register_root_events(ref, events);
+		}
 	}
 }
 
-/** @param {Element} target */
-export function handle_root_events(target) {
-	var ref = root_target_refs.get(target) ?? {
-		count: 0,
-		registered_events: /** @type {Set<string>} */ (new Set()),
-	};
-	ref.count += 1;
-	root_target_refs.set(target, ref);
+/**
+ * @param {RootTargetRef} ref
+ * @param {Iterable<string>} events
+ */
+function register_root_events(ref, events) {
 	var registered_events = ref.registered_events;
+	var target = ref.target;
 
-	/**
-	 * @typedef {Object} EventHandleOptions
-	 * @property {boolean} [passive]
-	 */
-
-	/**
-	 * @typedef {(
-	 *   events: Array<string>
-	 * ) => void} EventHandle
-	 */
-
-	/** @type {EventHandle} */
-	var event_handle = (/** @type {Array<string>} */ events) => {
-		for (var i = 0; i < events.length; i++) {
-			var event_name = events[i];
-
-			if (registered_events.has(event_name)) continue;
-			registered_events.add(event_name);
+	for (var event_name of events) {
+		if (registered_events.has(event_name)) continue;
+		registered_events.add(event_name);
 
-			/** @type {boolean} */
-			var passive = is_passive_event(event_name);
-
-			/** @type {EventHandleOptions} */
-			var options = { passive };
-
-			target.addEventListener(event_name, handle_event_propagation, options);
-		}
-	};
+		target.addEventListener(event_name, handle_event_propagation, {
+			passive: is_passive_event(event_name),
+		});
+	}
+}
 
-	event_handle(array_from(all_registered_events));
-	root_event_handles.add(event_handle);
+/**
+ * Acquires the delegated root listeners for `target` and returns the shared
+ * ref; every acquire must be paired with one `release_root_events` call.
+ * @param {Element} target
+ * @returns {RootTargetRef}
+ */
+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
+			: root_target_refs.get(target);
+
+	if (ref === undefined) {
+		ref = { count: 0, registered_events: new Set(), target };
+		root_target_refs.set(target, ref);
+		register_root_events(ref, all_registered_events);
+	}
 
-	var released = false;
+	ref.count += 1;
+	last_root_ref = ref;
+	return ref;
+}
 
-	return () => {
-		if (released) return;
-		released = true;
-
-		root_event_handles.delete(event_handle);
-
-		// The map entry for `target` is always this `ref`: it is only deleted
-		// when the count hits 0, which requires this cleanup to have run.
-		ref.count -= 1;
-		if (ref.count > 0) return;
-
-		// Last caller for this target: actually tear down the shared listeners.
-		root_target_refs.delete(target);
-		for (var event_name of registered_events) {
-			target.removeEventListener(
-				event_name,
-				/** @type {EventListener} */ (handle_event_propagation),
-			);
-		}
-	};
+/**
+ * @param {RootTargetRef} ref
+ * @returns {void}
+ */
+export function release_root_events(ref) {
+	// The map entry for `ref.target` 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;
+
+	// Last caller for this target: actually tear down the shared listeners.
+	var target = ref.target;
+	root_target_refs.delete(target);
+	if (last_root_ref === ref) {
+		last_root_ref = null;
+	}
+	for (var event_name of ref.registered_events) {
+		target.removeEventListener(event_name, /** @type {EventListener} */ (handle_event_propagation));
+	}
 }

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

@@ -1,23 +1,24 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
 import { is_array } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render } from './blocks.js';
-import { BRANCH_BLOCK, UNINITIALIZED } from './constants.js';
+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 { is_tsrx_element } from '../../element.js';
+import { is_tsrx_element, TSRX_ELEMENT } from '../../element.js';
 
 /**
- * Finds the nearest enclosing BRANCH_BLOCK in the block hierarchy.
+ * Finds the nearest enclosing block that owns a DOM range (a branch or an if
+ * block) in the block hierarchy.
  * @param {Block | null} block
  * @returns {Block | null}
  */
 function find_enclosing_branch(block) {
 	while (block !== null) {
-		if ((block.f & BRANCH_BLOCK) !== 0) {
+		if ((block.f & (BRANCH_BLOCK | IF_BLOCK)) !== 0) {
 			return block;
 		}
 		block = block.p;
@@ -32,13 +33,19 @@ function find_enclosing_branch(block) {
  * @returns {void}
  */
 export function render_value(value, anchor, block) {
-	if (is_tsrx_element(value)) {
-		render_tsrx_element(value, anchor, block);
-	} else if (is_array(value)) {
+	// render_tsrx_element, inline: an element's render may return another
+	// element (a wrapper), an array, or text.
+	var rendered = false;
+	// is_tsrx_element, inline: every component render passes through here.
+	while (value != null && value[TSRX_ELEMENT] === true) {
+		value = value.render(anchor, block, value.p);
+		rendered = true;
+	}
+	if (is_array(value)) {
 		render_tsrx_collection(value, anchor, block);
 	} else if (value != null) {
 		var text = value + '';
-		if (text !== '') {
+		if (rendered || text !== '') {
 			render_tsrx_collection_text(text, anchor, true);
 		}
 	}
@@ -60,11 +67,27 @@ function render_tsrx_collection(value, anchor, block) {
 	var start = document.createComment('');
 	var end = document.createComment('');
 
-	anchor.before(start, end);
+	insert_before(anchor, start);
+	insert_before(anchor, end);
 	assign_nodes(start, end);
 	render_tsrx_collection_items(value, end, block);
 }
 
+/**
+ * Inserts `node` before `anchor`, or appends it into the parent when `anchor`
+ * is an append-into sentinel (see `append_into`).
+ * @param {ChildNode | AppendIntoAnchor} anchor
+ * @param {Node} node
+ * @returns {void}
+ */
+function insert_before(anchor, node) {
+	if (/** @type {AppendIntoAnchor} */ (anchor).into === true) {
+		/** @type {AppendIntoAnchor} */ (anchor).parent.appendChild(node);
+	} else {
+		/** @type {ChildNode} */ (anchor).before(node);
+	}
+}
+
 /**
  * @param {any[]} value
  * @param {ChildNode} anchor
@@ -92,7 +115,7 @@ function render_tsrx_collection_items(value, anchor, block) {
  * @returns {void}
  */
 function render_tsrx_element(value, anchor, block) {
-	var result = value.render(anchor, block);
+	var result = value.render(anchor, block, value.p);
 
 	if (is_tsrx_element(result)) {
 		render_tsrx_element(result, anchor, block);
@@ -112,7 +135,7 @@ function render_tsrx_element(value, anchor, block) {
 function render_tsrx_collection_text(value, anchor, assign = false) {
 	if (!hydrating) {
 		var text = create_text(value);
-		anchor.before(text);
+		insert_before(anchor, text);
 		if (assign) {
 			assign_nodes(text, text);
 		}
@@ -241,7 +264,7 @@ function run_expression(s) {
 		if (next_is_collection || is_tsrx_element(next_value)) {
 			if (s.i && s.e && s.v === next_value) {
 				if (end !== null) {
-					advance_hydration(end);
+					settle_hydration(end);
 				}
 				return;
 			}
@@ -310,7 +333,7 @@ function run_expression(s) {
 			s.e = true;
 			s.i = true;
 			if (end !== null) {
-				advance_hydration(end);
+				settle_hydration(end);
 			}
 			return;
 		}
@@ -320,7 +343,7 @@ function run_expression(s) {
 
 	if (s.i && !s.e && s.v === next_text) {
 		if (end !== null) {
-			advance_hydration(end);
+			settle_hydration(end);
 		}
 		return;
 	}
@@ -368,7 +391,7 @@ function run_expression(s) {
 	s.e = false;
 	s.i = true;
 	if (end !== null) {
-		advance_hydration(end);
+		settle_hydration(end);
 	}
 }
 
@@ -457,17 +480,14 @@ function clear_expression_range(anchor, end) {
 }
 
 /**
+ * Leaves the hydration cursor on the expression's end marker, the last node
+ * the expression owns: the parent steps past it with its own sibling
+ * navigation, exactly as it does after an element or a control-flow block.
  * @param {Comment} end
  * @returns {void}
  */
-function advance_hydration(end) {
-	if (!hydrating) {
-		return;
-	}
-
-	var next = get_next_sibling(end);
-
-	if (next !== null) {
-		set_hydrate_node(next);
+function settle_hydration(end) {
+	if (hydrating) {
+		set_hydrate_node(end);
 	}
 }