ripple 0.3.121 → 0.3.123

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # ripple
 
+## 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
+
+- Updated dependencies
+  [[`481d934`](https://github.com/Ripple-TS/ripple/commit/481d934aa17a275aa588d945b4c65b421076f89c)]:
+  - @tsrx/core@0.1.60
+  - @tsrx/ripple@0.1.61
+
 ## 0.3.121
 
 ### 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.121",
+  "version": "0.3.123",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -73,8 +73,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.59",
-    "@tsrx/ripple": "0.1.60"
+    "@tsrx/core": "0.1.60",
+    "@tsrx/ripple": "0.1.61"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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