ripple 0.3.85 → 0.3.86

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # ripple
 
+## 0.3.86
+
+### Patch Changes
+
+- [#1310](https://github.com/Ripple-TS/ripple/pull/1310)
+  [`4ebd58d`](https://github.com/Ripple-TS/ripple/commit/4ebd58dfe853c1ed945072822eaba8a7a9e19a6c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix
+  `Cannot use 'in' operator to search for 'parent' in null` thrown from `append()`
+  when reordering or inserting into a keyed `@for` whose item body is a single
+  control-flow / component root (e.g. `@for (...; key ...) { <Card {item} /> }`
+  where `Card`'s own body is a single `@if`/`@for`/component). The 0.3.85
+  wrapper-anchor optimization leaves such an item block's `s.start` null because
+  its DOM is rendered through a descendant block, and keyed reconciliation read
+  `s.start` directly as the insertion anchor. Reconciliation now resolves the real
+  first/last DOM node by descending child blocks, so no `<!>` comment marker is
+  reintroduced and the optimization's reduced DOM-mutation cost is preserved. The
+  same resolution is applied to `@switch` case reordering.
+- Updated dependencies
+  [[`e4e6d7b`](https://github.com/Ripple-TS/ripple/commit/e4e6d7b854786ad19a2c86276ea7e0ffb062e61a)]:
+  - @tsrx/ripple@0.1.34
+
 ## 0.3.85
 
 ### 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.85",
+  "version": "0.3.86",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,7 +74,7 @@
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
     "@tsrx/core": "0.1.33",
-    "@tsrx/ripple": "0.1.33"
+    "@tsrx/ripple": "0.1.34"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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

@@ -429,6 +429,59 @@ export function move_block(block, target) {
 	return moved;
 }
 
+/**
+ * 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
+ * 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
+ * block currently renders no DOM.
+ * @param {Block} block
+ * @returns {Node | null}
+ */
+export function get_first_node(block) {
+	var f = block.f;
+	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+		var s = block.s;
+		if (s !== null && s.start !== null) {
+			return s.start;
+		}
+	}
+	var child = block.first;
+	while (child !== null) {
+		var node = get_first_node(child);
+		if (node !== null) {
+			return node;
+		}
+		child = child.next;
+	}
+	return null;
+}
+
+/**
+ * Mirror of {@link get_first_node} for the last DOM node owned by a block.
+ * @param {Block} block
+ * @returns {Node | null}
+ */
+export function get_last_node(block) {
+	var f = block.f;
+	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+		var s = block.s;
+		if (s !== null && s.start !== null) {
+			return s.end;
+		}
+	}
+	var child = block.last;
+	while (child !== null) {
+		var node = get_last_node(child);
+		if (node !== null) {
+			return node;
+		}
+		child = child.prev;
+	}
+	return null;
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [remove_dom]

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

@@ -1,7 +1,14 @@
 /** @import { Block, Tracked } from '#client' */
 
 import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
-import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
+import {
+	branch,
+	destroy_block,
+	destroy_block_children,
+	get_first_node,
+	get_last_node,
+	render,
+} from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child, get_last_child, next_sibling } from './operations.js';
@@ -71,12 +78,26 @@ function create_empty(anchor, render_empty) {
 
 /**
  * @param {Block} block
- * @param {Element} anchor
+ * @param {ChildNode} anchor
  * @returns {void}
  */
 function move(block, anchor) {
-	var node = block.s.start;
-	var end = block.s.end;
+	// Fast path: a normal item records its own range. Only an optimized single
+	// control-flow / component root item (DOM rendered through a descendant
+	// block, `s.start` null) needs the descent via `get_first_node`/`get_last_node`.
+	var s = block.s;
+	var node = s.start;
+	var end;
+
+	if (node === null) {
+		node = get_first_node(block);
+		if (node === null) {
+			return;
+		}
+		end = get_last_node(block);
+	} else {
+		end = s.end;
+	}
 
 	if (node === end) {
 		anchor.before(node);
@@ -87,12 +108,43 @@ function move(block, anchor) {
 		anchor.before(node);
 		node = next_node;
 		if (node === end) {
-			anchor.before(end);
+			anchor.before(/** @type {Node} */ (end));
 			break;
 		}
 	}
 }
 
+/**
+ * Resolve the insertion anchor for a block at `index`: the first real DOM node
+ * at or after `index`, or `fallback` when every remaining block renders nothing.
+ * Scanning forward keeps insertions correct even when an optimized item renders
+ * no DOM (e.g. a single `@if` that is currently false), which previously relied
+ * on a synthesized `<!>` wrapper as a stable position marker.
+ * @param {Block[]} blocks
+ * @param {number} index
+ * @param {number} length
+ * @param {Element | Text} fallback
+ * @returns {ChildNode}
+ */
+function block_start(blocks, index, length, fallback) {
+	if (index >= length) {
+		return fallback;
+	}
+	// Fast path: a normal item records its own boundary, so this is the same
+	// single property read the pre-#1307 code did — no descent, no scan.
+	var first = blocks[index].s.start;
+	if (first !== null) {
+		return first;
+	}
+	for (var k = index; k < length; k++) {
+		var node = get_first_node(blocks[k]);
+		if (node !== null) {
+			return /** @type {ChildNode} */ (node);
+		}
+	}
+	return fallback;
+}
+
 /**
  * @template V
  * @param {V[] | Iterable<V>} collection
@@ -429,7 +481,7 @@ function reconcile_by_key(
 		if (j <= b_end) {
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				var target = block_start(a_blocks, j, a_length, anchor);
 				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, true);
 				j++;
 			}
@@ -548,14 +600,14 @@ function reconcile_by_key(
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				move(b_blocks[pos], target);
 			} else {
 				j--;
@@ -568,7 +620,7 @@ function reconcile_by_key(
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			}
 		}
@@ -716,7 +768,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 		if (j <= b_end) {
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				var target = block_start(a_blocks, j, a_length, anchor);
 				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, false);
 				j++;
 			}
@@ -829,14 +881,14 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				move(b_blocks[pos], target);
 			} else {
 				j--;
@@ -849,7 +901,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			}
 		}

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

@@ -1,6 +1,6 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
+import { branch, destroy_block, get_first_node, get_last_node, render } from './blocks.js';
 import { SWITCH_BLOCK } from './constants.js';
 import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
@@ -13,8 +13,22 @@ import { append } from './template.js';
  * @returns {void}
  */
 function move(block, anchor) {
-	var node = block.s.start;
-	var end = block.s.end;
+	// Fast path: a normal case records its own range. Only an optimized single
+	// control-flow / component root case (DOM rendered through a descendant
+	// block, `s.start` null) needs the descent via `get_first_node`/`get_last_node`.
+	var s = block.s;
+	var node = s !== null ? s.start : null;
+	var end;
+
+	if (node === null) {
+		node = get_first_node(block);
+		if (node === null) {
+			return;
+		}
+		end = get_last_node(block);
+	} else {
+		end = s.end;
+	}
 	/** @type {Node | null} */
 	var sibling;
 

package/tests/client/for-single-root-items.test.tsrx

@@ -0,0 +1,130 @@
+import { RippleArray, flushSync, track } from 'ripple';
+
+// Regression tests for the 0.3.85 optimization (PR #1307) that elides the
+// `<!>` wrapper for single control-flow / component root scopes. When such a
+// scope renders its DOM through a descendant block, the owning block's
+// `s.start` is null, so keyed-for reconciliation must resolve the real first
+// node by descending child blocks instead of reading `s.start` directly.
+// Previously this threw `Cannot use 'in' operator to search for 'parent' in
+// null` from `append()` on a reactive insert.
+
+describe('keyed for with single-root item bodies (#1307 regression)', () => {
+	it(
+		'prepends into a keyed @for whose body is a single component (single control-flow root)',
+		() => {
+			function MuzeCard(props) @{
+				@if (true) {
+					<p>{props.muze.muzeId}</p>
+				}
+			}
+			function App() @{
+				const muzes = new RippleArray({ muzeId: 'b' }, { muzeId: 'c' });
+				<>
+					<button onClick={() => muzes.unshift({ muzeId: 'a' })}>{'add'}</button>
+					@for (const muze of muzes; key muze.muzeId) {
+						<MuzeCard {muze} />
+					}
+				</>
+			}
+			render(App);
+			expect(container.querySelectorAll('p').length).toBe(2);
+
+			container.querySelector('button').click();
+			flushSync();
+
+			expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+				'a',
+				'b',
+				'c',
+			]);
+		},
+	);
+
+	it('reorders a keyed @for of single-control-flow-root components', () => {
+		function MuzeCard(props) @{
+			@if (true) {
+				<p>{props.muze.muzeId}</p>
+			}
+		}
+		function App() @{
+			const muzes = new RippleArray({ muzeId: 'a' }, { muzeId: 'b' }, { muzeId: 'c' });
+			<>
+				<button onClick={() => muzes.reverse()}>{'reverse'}</button>
+				@for (const muze of muzes; key muze.muzeId) {
+					<MuzeCard {muze} />
+				}
+			</>
+		}
+		render(App);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('inserts in the middle of a keyed @for whose item body is a single @for', () => {
+		function App() @{
+			const groups = new RippleArray({ id: 'g1', items: ['1'] }, { id: 'g3', items: ['3'] });
+			<>
+				<button onClick={() => groups.splice(1, 0, { id: 'g2', items: ['2'] })}>{'insert'}</button>
+				@for (const group of groups; key group.id) {
+					@for (const item of group.items; key item) {
+						<p>{item}</p>
+					}
+				}
+			</>
+		}
+		render(App);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+			'1',
+			'2',
+			'3',
+		]);
+	});
+
+	it('realistic shape: keyed @for of components inside an @if > fragment', () => {
+		function MuzeCard(props) @{
+			@if (true) {
+				<p class="muze">{props.muze.muzeId}</p>
+			}
+		}
+		function App() @{
+			let &[loaded, loadedT] = track(true);
+			const muzes = new RippleArray({ muzeId: 'b' }, { muzeId: 'c' });
+			<>
+				<button onClick={() => muzes.unshift({ muzeId: 'a' })}>{'add'}</button>
+				@if (loaded) {
+					<>
+						@for (const muze of muzes; key muze.muzeId) {
+							<MuzeCard {muze} />
+						}
+						@if (muzes.length > 0) {
+							<span class="count">{String(muzes.length)}</span>
+						}
+					</>
+				}
+			</>
+		}
+		render(App);
+		expect(container.querySelectorAll('.muze').length).toBe(2);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('.muze')).map((p) => p.textContent)).toEqual([
+			'a',
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.count').textContent).toBe('3');
+	});
+});