ripple 0.3.122 → 0.3.124

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # ripple
 
+## 0.3.124
+
+### Patch Changes
+
+- [#1434](https://github.com/Ripple-TS/ripple/pull/1434)
+  [`2f4d02d`](https://github.com/Ripple-TS/ripple/commit/2f4d02d6a6ab83fd1af7e16b86967223990f1aa3)
+  Thanks [@chenzylab](https://github.com/chenzylab)! - Fix event delegation
+  breaking when multiple roots (Portals, mounts) share or mix targets.
+
+  - `handle_root_events(target)` had no notion of multiple callers sharing the
+    same `target` element. Each Portal (or the app root) calls it once on mount;
+    its cleanup unconditionally removed the delegated event listeners from
+    `target`. When two Portals both mount to `document.body` (e.g. a Modal and a
+    SideSheet), closing the first tore down the delegated listeners for
+    `document.body` entirely, silently breaking every click inside the second — no
+    error, no warning. `handle_root_events` now ref-counts callers per target, and
+    the delegated listeners are only torn down once every caller for that target
+    has released it.
+  - The single `root_target` global is gone. `on()` now checks the element against
+    every active root target, so attaching a listener directly to one root's
+    target while another root (e.g. a Portal to a sibling layer) was acquired
+    later no longer silently takes the broken delegated path.
+  - `Portal` acquires root event delegation in its own render block keyed on
+    `target`, so a children-only update no longer releases and re-adds every
+    delegated listener on the target.
+
+## 0.3.123
+
+### Patch Changes
+
+- [#1432](https://github.com/Ripple-TS/ripple/pull/1432)
+  [`8b5abd7`](https://github.com/Ripple-TS/ripple/commit/8b5abd7021a23b7651608fb26ff7e59ed5b4a18c)
+  Thanks [@chenzylab](https://github.com/chenzylab)! - Fix insertion order when a
+  keyed or ref-based `@for` inserts multiple new items in the middle of the list.
+  The pure-insert reconciliation path resolved the DOM anchor per new item by
+  indexing the old blocks with a new-list index, so the anchor drifted into the
+  matched suffix and later items landed after it (e.g. `[A, C, D]` →
+  `[A, B1, B2, C, D]` rendered as `A, B1, C, B2, D`). The anchor is now resolved
+  once, at the start of the matched suffix, and reused for the whole run of
+  inserts.
+
 ## 0.3.122
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.122",
+  "version": "0.3.124",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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

@@ -25,8 +25,31 @@ var all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = new Set();
 
-/** @type {Element | null} */
-var root_target = null;
+/**
+ * Active root delegation targets, ref-counted per target. Multiple callers of
+ * `handle_root_events` can share one target element — sibling Portals both
+ * targeting `document.body`, a Portal targeting the app's mount target, or
+ * 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> }>}
+ */
+var root_target_refs = new Map();
+
+/**
+ * Delegated handling only works for elements strictly below a root delegation
+ * target: the root listener's propagation walk never visits the target itself
+ * or anything above it, so a delegated handler stored there would never fire.
+ * @param {EventTarget} element
+ */
+function is_root_target_or_above(element) {
+	for (var target of root_target_refs.keys()) {
+		if (element === target || /** @type {Element} */ (element).contains?.(target)) {
+			return true;
+		}
+	}
+	return false;
+}
 
 /**
  * @param {AddEventOptions} options
@@ -63,9 +86,8 @@ export function on(element, type, handler, options = {}) {
 		element === window ||
 		element === document ||
 		element === document.body ||
-		element === root_target ||
 		element instanceof MediaQueryList ||
-		/** @type {Element} */ (element).contains(root_target)
+		is_root_target_or_above(element)
 	) {
 		opts.delegated = false;
 	}
@@ -381,9 +403,13 @@ export function delegate(events) {
 
 /** @param {Element} target */
 export function handle_root_events(target) {
-	/** @type {Set<string>} */
-	var registered_events = new Set();
-	root_target = 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);
+	var registered_events = ref.registered_events;
 
 	/**
 	 * @typedef {Object} EventHandleOptions
@@ -417,14 +443,26 @@ export function handle_root_events(target) {
 	event_handle(array_from(all_registered_events));
 	root_event_handles.add(event_handle);
 
+	var released = false;
+
 	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),
 			);
 		}
-		root_event_handles.delete(event_handle);
-		root_target = null;
 	};
 }

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

@@ -479,10 +479,10 @@ function reconcile_by_key(
 
 	if (j > a_end) {
 		if (j <= b_end) {
+			var insert_target = block_start(a_blocks, a_end + 1, a_length, anchor);
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = block_start(a_blocks, j, a_length, anchor);
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, true);
+				b_blocks[j] = create_item(insert_target, b_val, j, render_fn, is_indexed, true);
 				j++;
 			}
 		}
@@ -766,10 +766,10 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 
 	if (j > a_end) {
 		if (j <= b_end) {
+			var insert_target = block_start(a_blocks, a_end + 1, a_length, anchor);
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = block_start(a_blocks, j, a_length, anchor);
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, false);
+				b_blocks[j] = create_item(insert_target, b_val, j, render_fn, is_indexed, false);
 				j++;
 			}
 		}

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

@@ -38,6 +38,14 @@ export function Portal(props) {
 		}
 
 		try {
+			// Root event delegation lives in its own render block so it only
+			// re-runs when `props.target` changes — a children-only update must
+			// not release and re-acquire the target's delegated listeners.
+			render(() => {
+				const cleanup_events = handle_root_events(/** @type {Element} */ (props.target));
+				return cleanup_events;
+			});
+
 			render(() => {
 				const next_target = props.target;
 				const next_children = props.children;
@@ -60,8 +68,6 @@ export function Portal(props) {
 				anchor = create_text();
 				/** @type {Element} */ (target).append(anchor);
 
-				const cleanup_events = handle_root_events(/** @type {Element} */ (target));
-
 				var block = /** @type {Block} */ (active_block);
 
 				b = branch(() => {
@@ -74,7 +80,6 @@ export function Portal(props) {
 				dom_end = b?.s?.end;
 
 				return () => {
-					cleanup_events();
 					/** @type {Text} */ (anchor).remove();
 					if (dom_start && dom_end) {
 						remove_block_dom(dom_start, dom_end);

package/tests/client/events.test.tsrx

@@ -1,5 +1,5 @@
 import type { OnEventListenerRemover } from 'ripple';
-import { effect, flushSync, on, track } from 'ripple';
+import { effect, flushSync, on, Portal, track } from 'ripple';
 
 describe('on() event handler', () => {
 	it('should attach multiple handlers via onClick attribute (delegated)', () => {
@@ -33,6 +33,38 @@ describe('on() event handler', () => {
 		expect(count2Div.textContent).toBe('1');
 	});
 
+	it('attaches directly on a root delegation target even when a portal roots elsewhere', () => {
+		// Regression test: `on()` must not delegate handlers attached to any
+		// active root delegation target. With a single `root_target` global,
+		// a Portal targeting a sibling layer overwrote it, so `on(container)`
+		// took the delegated path and its handler never fired.
+		const layer = document.createElement('div');
+		document.body.appendChild(layer);
+
+		function App() @{
+			<>
+				<button class="inner">{'Inner'}</button>
+				<Portal target={layer}>
+					<div class="layer-content">{'Layer content'}</div>
+				</Portal>
+			</>
+		}
+
+		render(App);
+
+		let calls = 0;
+		const off = on(container, 'click', () => {
+			calls++;
+		});
+
+		container.querySelector('.inner').click();
+		flushSync();
+		expect(calls).toBe(1);
+
+		off();
+		layer.remove();
+	});
+
 	it('should attach and remove a single event handler', () => {
 		function Basic() @{
 			let &[count] = track(0);

package/tests/client/for.test.tsrx

@@ -234,6 +234,78 @@ describe('for statements', () => {
 		expect(container.querySelectorAll('.item').length).toBe(2);
 	});
 
+	it('keyed for inserts multiple new items in the middle in correct order', () => {
+		function App() @{
+			let &[items] = track([
+				{ id: 'a', text: 'A' },
+				{ id: 'c', text: 'C' },
+				{ id: 'd', text: 'D' },
+			]);
+			<>
+				@for (const item of items; key item.id) {
+					<div class="item">{item.text}</div>
+				}
+				<button
+					onClick={() => {
+						items = [
+							{ id: 'a', text: 'A' },
+							{ id: 'b1', text: 'B1' },
+							{ id: 'b2', text: 'B2' },
+							{ id: 'c', text: 'C' },
+							{ id: 'd', text: 'D' },
+						];
+					}}
+				>{'Insert'}</button>
+			</>
+		}
+
+		render(App);
+
+		const getTexts = () => Array.from(container.querySelectorAll('.item')).map(
+			(el) => el.textContent,
+		);
+
+		expect(getTexts()).toEqual(['A', 'C', 'D']);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(getTexts()).toEqual(['A', 'B1', 'B2', 'C', 'D']);
+	});
+
+	it('ref-based for inserts multiple new items in the middle in correct order', () => {
+		const a = { text: 'A' };
+		const c = { text: 'C' };
+		const d = { text: 'D' };
+
+		function App() @{
+			let &[items] = track([a, c, d]);
+			<>
+				@for (const item of items) {
+					<div class="item">{item.text}</div>
+				}
+				<button
+					onClick={() => {
+						items = [a, { text: 'B1' }, { text: 'B2' }, c, d];
+					}}
+				>{'Insert'}</button>
+			</>
+		}
+
+		render(App);
+
+		const getTexts = () => Array.from(container.querySelectorAll('.item')).map(
+			(el) => el.textContent,
+		);
+
+		expect(getTexts()).toEqual(['A', 'C', 'D']);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(getTexts()).toEqual(['A', 'B1', 'B2', 'C', 'D']);
+	});
+
 	it('keyed for with 32+ items: full reversal updates values via Map path', () => {
 		function App() @{
 			let &[items] = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));

package/tests/client/portal.test.tsrx

@@ -137,6 +137,113 @@ describe('Portal', () => {
 		document.body.removeChild(target2);
 	});
 
+	it(
+		'two portals sharing the same target: closing one does not break click delegation for the other',
+		() => {
+			// Regression test: handle_root_events used to have no ref-counting per
+			// target. When two Portals both targeted document.body (e.g. a Modal
+			// and a SideSheet), closing/unmounting the first Portal would tear
+			// down the shared delegated event listeners for *all* portals on that
+			// target, silently breaking clicks inside any portal still open.
+			function TestSharedTargetPortals() @{
+				let &[modalOpen] = track(true);
+				let &[sheetOpen] = track(true);
+				let &[sheetClicks] = track(0);
+				<>
+					@if (modalOpen) {
+						<Portal target={document.body}>
+							<div class="test-portal test-modal">
+								<button
+									class="close-modal"
+									onClick={() => (modalOpen = false)}
+								>{'Close modal'}</button>
+							</div>
+						</Portal>
+					}
+					@if (sheetOpen) {
+						<Portal target={document.body}>
+							<div class="test-portal test-sheet">
+								<span class="sheet-clicks">{String(sheetClicks)}</span>
+								<button
+									class="sheet-btn"
+									onClick={() => {
+										sheetClicks++;
+									}}
+								>{'Sheet button'}</button>
+							</div>
+						</Portal>
+					}
+				</>
+			}
+
+			render(TestSharedTargetPortals);
+
+			expect(document.body.querySelector('.close-modal')).toBeTruthy();
+			expect(document.body.querySelector('.sheet-btn')).toBeTruthy();
+
+			// Close the modal portal - its cleanup must not tear down the shared
+			// document.body event delegation that the still-open sheet portal relies on.
+			document.body.querySelector('.close-modal').click();
+			flushSync();
+
+			expect(document.body.querySelector('.close-modal')).toBeNull();
+			const sheetBtn = document.body.querySelector('.sheet-btn');
+			expect(sheetBtn).toBeTruthy();
+			expect(document.body.querySelector('.sheet-clicks').textContent).toBe('0');
+
+			sheetBtn.click();
+			flushSync();
+
+			// This is the actual regression check: before the fix, the shared
+			// document.body listener was removed when the modal portal's cleanup
+			// ran, so this click would never reach the handler and the count
+			// would stay at 0.
+			expect(document.body.querySelector('.sheet-clicks').textContent).toBe('1');
+		},
+	);
+
+	it('retargets portal when target changes and keeps click delegation working', () => {
+		const target1 = document.createElement('div');
+		const target2 = document.createElement('div');
+		document.body.appendChild(target1);
+		document.body.appendChild(target2);
+
+		function TestRetargetPortal() @{
+			let &[useSecond] = track(false);
+			let &[clicks] = track(0);
+			<>
+				<button class="swap" onClick={() => (useSecond = true)}>{'Swap'}</button>
+				<Portal target={useSecond ? target2 : target1}>
+					<div class="test-portal">
+						<span class="clicks">{String(clicks)}</span>
+						<button class="portal-btn" onClick={() => clicks++}>{'Click'}</button>
+					</div>
+				</Portal>
+			</>
+		}
+
+		render(TestRetargetPortal);
+
+		expect(target1.querySelector('.portal-btn')).toBeTruthy();
+		target1.querySelector('.portal-btn').click();
+		flushSync();
+		expect(target1.querySelector('.clicks').textContent).toBe('1');
+
+		container.querySelector('.swap').click();
+		flushSync();
+
+		// Content moved to the new target, and delegation must follow it there.
+		expect(target1.querySelector('.portal-btn')).toBeNull();
+		expect(target2.querySelector('.portal-btn')).toBeTruthy();
+
+		target2.querySelector('.portal-btn').click();
+		flushSync();
+		expect(target2.querySelector('.clicks').textContent).toBe('2');
+
+		document.body.removeChild(target1);
+		document.body.removeChild(target2);
+	});
+
 	it('handles portal with reactive content', () => {
 		function TestReactivePortal() @{
 			let &[count] = track(0);