ripple 0.3.127 → 0.4.0

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

@@ -1,4 +1,4 @@
-import { RippleArray, flushSync, track } from 'ripple';
+import { RippleArray, flushSync, mount, 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
@@ -98,11 +98,11 @@ describe('keyed for with single-root item bodies (#1307 regression)', () => {
 			}
 		}
 		function App() @{
-			let &[loaded, loadedT] = track(true);
+			const loaded = track(true);
 			const muzes = new RippleArray({ muzeId: 'b' }, { muzeId: 'c' });
 			<>
 				<button onClick={() => muzes.unshift({ muzeId: 'a' })}>{'add'}</button>
-				@if (loaded) {
+				@if (loaded.value) {
 					<>
 						@for (const muze of muzes; key muze.muzeId) {
 							<MuzeCard {muze} />
@@ -127,4 +127,119 @@ describe('keyed for with single-root item bodies (#1307 regression)', () => {
 		]);
 		expect(container.querySelector('.count').textContent).toBe('3');
 	});
+
+	describe('controlled list of root @if items (lazy anchors)', () => {
+		const text_nodes = (el) => Array.from(el.childNodes).filter((n) => n.nodeType === 3).length;
+
+		it('keeps no anchor nodes until a branch swaps, then removes the anchor with the item', () => {
+			function App() @{
+				const items = track([
+					{ id: 1, code: false },
+					{ id: 2, code: true },
+					{ id: 3, code: false },
+				]);
+				<>
+					<button
+						class="swap"
+						onClick={() => {
+							items.value = items.value.map((i) => (i.id === 2 ? { ...i, code: false } : i));
+						}}
+					>{'swap'}</button>
+					<button
+						class="remove"
+						onClick={() => {
+							items.value = items.value.filter((i) => i.id !== 2);
+						}}
+					>{'remove'}</button>
+					<button
+						class="clear"
+						onClick={() => {
+							items.value = [];
+						}}
+					>{'clear'}</button>
+					<ul>
+						@for (const item of items.value; key item.id) {
+							@if (item.code) {
+								<li class="code">{item.id}</li>
+							} @else {
+								<li class="text">{item.id}</li>
+							}
+						}
+					</ul>
+				</>
+			}
+			render(App);
+			const ul = container.querySelector('ul');
+			expect(text_nodes(ul)).toBe(0);
+			expect(Array.from(ul.children).map((li) => li.className)).toEqual(['text', 'code', 'text']);
+
+			container.querySelector('.swap').click();
+			flushSync();
+			expect(Array.from(ul.children).map((li) => li.className)).toEqual(['text', 'text', 'text']);
+			// The swapped item now owns one text anchor, placed right after it.
+			expect(text_nodes(ul)).toBe(1);
+			expect(ul.children[1].nextSibling.nodeType).toBe(3);
+
+			container.querySelector('.remove').click();
+			flushSync();
+			expect(Array.from(ul.children).map((li) => li.textContent)).toEqual(['1', '3']);
+			expect(text_nodes(ul)).toBe(0);
+
+			container.querySelector('.clear').click();
+			flushSync();
+			expect(ul.childNodes.length).toBe(0);
+		});
+
+		it('moves a materialized anchor with its item and removes it on unmount', () => {
+			function App() @{
+				const items = track([
+					{ id: 1, show: false },
+					{ id: 2, show: true },
+				]);
+				<>
+					<button
+						class="show"
+						onClick={() => {
+							items.value = items.value.map((i) => (i.id === 1 ? { ...i, show: true } : i));
+						}}
+					>{'show'}</button>
+					<button
+						class="reverse"
+						onClick={() => {
+							items.value = [...items.value].reverse();
+						}}
+					>{'reverse'}</button>
+					<ul>
+						@for (const item of items.value; key item.id) {
+							@if (item.show) {
+								<li>{item.id}</li>
+							}
+						}
+					</ul>
+				</>
+			}
+			const unmount = mount(App, { target: container, rootBoundary: false });
+			const ul = container.querySelector('ul');
+			// An empty branch materializes its anchor at once, so it has a position.
+			expect(text_nodes(ul)).toBe(1);
+			expect(ul.firstChild.nodeType).toBe(3);
+			expect(ul.children.length).toBe(1);
+
+			container.querySelector('.show').click();
+			flushSync();
+			expect(Array.from(ul.children).map((li) => li.textContent)).toEqual(['1', '2']);
+			// The content renders before its anchor.
+			expect(ul.children[0].nextSibling.nodeType).toBe(3);
+
+			container.querySelector('.reverse').click();
+			flushSync();
+			expect(Array.from(ul.children).map((li) => li.textContent)).toEqual(['2', '1']);
+			// The anchor travelled with item 1 to the end.
+			expect(ul.lastChild.nodeType).toBe(3);
+			expect(ul.lastChild.previousSibling).toBe(ul.children[1]);
+
+			unmount();
+			expect(container.childNodes.length).toBe(0);
+		});
+	});
 });

package/tests/client/for.test.tsrx

@@ -166,18 +166,18 @@ describe('for statements', () => {
 
 	it('correctly handles keyed for...of loops', () => {
 		function App() @{
-			let &[items] = track([
+			const items = track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },
 			]);
 			<>
-				@for (let item of items; index i; key item.id) {
+				@for (let item of items.value; index i; key item.id) {
 					<div>{i + ':' + item.text}</div>
 				}
 				<button
 					onClick={() => {
-						items = items.toReversed();
+						items.value = items.value.toReversed();
 					}}
 				>{'Reverse'}</button>
 			</>
@@ -195,22 +195,63 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('keyed by identity re-reads a plain array mutated in place', () => {
+		const list = [{ id: 1 }, { id: 2 }, { id: 3 }];
+		let bump = () => {};
+
+		function App() @{
+			const version = track(0);
+			bump = () => {
+				version.value = version.value + 1;
+			};
+			<ul>
+				@for (const item of (version.value, list); key item) {
+					<li>{item.id}</li>
+				}
+			</ul>
+		}
+
+		render(App);
+		const texts = () => Array.from(container.querySelectorAll('li'), (el) => el.textContent);
+		expect(texts()).toEqual(['1', '2', '3']);
+
+		list.push({ id: 4 });
+		bump();
+		flushSync();
+		expect(texts()).toEqual(['1', '2', '3', '4']);
+
+		list.splice(0, 1);
+		bump();
+		flushSync();
+		expect(texts()).toEqual(['2', '3', '4']);
+
+		list.reverse();
+		bump();
+		flushSync();
+		expect(texts()).toEqual(['4', '3', '2']);
+
+		list.splice(1, 1, { id: 5 });
+		bump();
+		flushSync();
+		expect(texts()).toEqual(['4', '5', '2']);
+	});
+
 	it('keyed for over derived updates sibling text nodes', () => {
 		function App() @{
-			let &[count] = track(0);
-			let &[items] = track(
-				() => Array.from({ length: count }).map((_, id) => ({ id, label: `Item ${id}` })),
+			const count = track(0);
+			const items = track(
+				() => Array.from({ length: count.value }).map((_, id) => ({ id, label: `Item ${id}` })),
 			);
 			<>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Add'}</button>
-				@for (const item of items; key item.id) {
+				@for (const item of items.value; key item.id) {
 					<div class="item">{item.label}</div>
 				}
-				<p class="count">{count}</p>
+				<p class="count">{count.value}</p>
 			</>
 		}
 
@@ -236,18 +277,18 @@ describe('for statements', () => {
 
 	it('keyed for inserts multiple new items in the middle in correct order', () => {
 		function App() @{
-			let &[items] = track([
+			const items = track([
 				{ id: 'a', text: 'A' },
 				{ id: 'c', text: 'C' },
 				{ id: 'd', text: 'D' },
 			]);
 			<>
-				@for (const item of items; key item.id) {
+				@for (const item of items.value; key item.id) {
 					<div class="item">{item.text}</div>
 				}
 				<button
 					onClick={() => {
-						items = [
+						items.value = [
 							{ id: 'a', text: 'A' },
 							{ id: 'b1', text: 'B1' },
 							{ id: 'b2', text: 'B2' },
@@ -279,14 +320,14 @@ describe('for statements', () => {
 		const d = { text: 'D' };
 
 		function App() @{
-			let &[items] = track([a, c, d]);
+			const items = track([a, c, d]);
 			<>
-				@for (const item of items) {
+				@for (const item of items.value) {
 					<div class="item">{item.text}</div>
 				}
 				<button
 					onClick={() => {
-						items = [a, { text: 'B1' }, { text: 'B2' }, c, d];
+						items.value = [a, { text: 'B1' }, { text: 'B2' }, c, d];
 					}}
 				>{'Insert'}</button>
 			</>
@@ -308,16 +349,16 @@ describe('for statements', () => {
 
 	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}` })));
+			const items = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));
 			<>
 				<div>
-					@for (let item of items; index idx; key item.id) {
+					@for (let item of items.value; index idx; key item.id) {
 						<span class="item">{idx + ':' + item.text}</span>
 					}
 				</div>
 				<button
 					onClick={() => {
-						items = items.toReversed();
+						items.value = items.value.toReversed();
 					}}
 				>{'Reverse'}</button>
 			</>
@@ -339,25 +380,25 @@ describe('for statements', () => {
 
 	it('handles updating with new objects with same key', () => {
 		function App() @{
-			let &[items] = track([
+			const items = track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },
 			]);
 			<>
-				@for (let item of items; index i; key item.id) {
+				@for (let item of items.value; index i; key item.id) {
 					<div>{i + ':' + item.text}</div>
 				}
 				<button
 					onClick={() => {
-						items[0].id = 3;
-						items[1].id = 2;
-						items[2].id = 1;
-
-						items = [
-							{ ...items[0], text: 'Item 1!' },
-							{ ...items[1], text: 'Item 2!' },
-							{ ...items[2], text: 'Item 3!' },
+						items.value[0].id = 3;
+						items.value[1].id = 2;
+						items.value[2].id = 1;
+
+						items.value = [
+							{ ...items.value[0], text: 'Item 1!' },
+							{ ...items.value[1], text: 'Item 2!' },
+							{ ...items.value[2], text: 'Item 3!' },
 						];
 					}}
 				>{'Reverse'}</button>
@@ -378,16 +419,16 @@ describe('for statements', () => {
 		const objects = Array.from({ length: 50 }, (_, i) => ({ id: i, text: `Obj ${i}` }));
 
 		function App() @{
-			let &[items] = track(objects.slice());
+			const items = track(objects.slice());
 			<>
 				<div>
-					@for (const item of items) {
+					@for (const item of items.value) {
 						<span class="item">{item.text}</span>
 					}
 				</div>
 				<button
 					onClick={() => {
-						items = objects.slice(15).reverse();
+						items.value = objects.slice(15).reverse();
 					}}
 				>{'Trim and reverse'}</button>
 			</>
@@ -406,4 +447,264 @@ describe('for statements', () => {
 
 		expect(getTexts()).toEqual(objects.slice(15).reverse().map((o) => o.text));
 	});
+
+	it('renders the index and the key from a function that returns its template', () => {
+		function Plain({ items }) {
+			return <ul>
+				@for (const item of items) {
+					<li class="plain">{item.text}</li>
+				}
+			</ul>;
+		}
+
+		function Indexed({ items }) {
+			return <ul>
+				@for (const item of items; index i) {
+					<li class="indexed">{i + ': ' + item.text}</li>
+				}
+			</ul>;
+		}
+
+		function Keyed({ items }) {
+			return <ul>
+				@for (const item of items; key item.id) {
+					<li class="keyed">{item.text}</li>
+				}
+			</ul>;
+		}
+
+		function IndexedAndKeyed({ items }) {
+			return <ul>
+				@for (const item of items; index i; key item.id) {
+					<li class="indexed-keyed">{i + ': ' + item.text}</li>
+				}
+			</ul>;
+		}
+
+		const Arrow = ({ items }) => <ul>
+			@for (const item of items; index i) {
+				<li class="arrow">{i + ': ' + item.text}</li>
+			}
+		</ul>;
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<>
+				<Plain {items} />
+				<Indexed {items} />
+				<Keyed {items} />
+				<IndexedAndKeyed {items} />
+				<Arrow {items} />
+			</>
+		}
+
+		render(App);
+
+		const texts = (selector) => Array.from(container.querySelectorAll(selector)).map(
+			(el) => el.textContent,
+		);
+
+		expect(texts('.plain')).toEqual(['a', 'b']);
+		expect(texts('.indexed')).toEqual(['0: a', '1: b']);
+		expect(texts('.keyed')).toEqual(['a', 'b']);
+		expect(texts('.indexed-keyed')).toEqual(['0: a', '1: b']);
+		expect(texts('.arrow')).toEqual(['0: a', '1: b']);
+	});
+
+	it('renders the index and the key from a template held in a variable', () => {
+		function Indexed({ items }) {
+			const list = <ul>
+				@for (const item of items; index i) {
+					<li class="indexed">{i + ': ' + item.text}</li>
+				}
+			</ul>;
+			return list;
+		}
+
+		function Keyed({ items }) {
+			return [
+				<ul>
+					@for (const item of items; key item.id) {
+						<li class="keyed">{item.text}</li>
+					}
+				</ul>,
+			];
+		}
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<>
+				<Indexed {items} />
+				<Keyed {items} />
+			</>
+		}
+
+		render(App);
+
+		const texts = (selector) => Array.from(container.querySelectorAll(selector)).map(
+			(el) => el.textContent,
+		);
+
+		expect(texts('.indexed')).toEqual(['0: a', '1: b']);
+		expect(texts('.keyed')).toEqual(['a', 'b']);
+	});
+
+	it('renders a bare `@for` held in a variable through an expression', () => {
+		function Returned({ items }) {
+			const yo = @for (const item of items; index i; key item.id) {
+				<li class="returned">{i + ': ' + item.text}</li>
+			};
+			return <ul>{yo}</ul>;
+		}
+
+		function Held({ items }) {
+			const yo = @for (const item of items; index i) {
+				<li class="held">{i + ': ' + item.text}</li>
+			};
+			const list = <ul>{yo}</ul>;
+			return list;
+		}
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<>
+				<Returned {items} />
+				<Held {items} />
+			</>
+		}
+
+		render(App);
+
+		const texts = (selector) => Array.from(container.querySelectorAll(selector)).map(
+			(el) => el.textContent,
+		);
+
+		expect(texts('.returned')).toEqual(['0: a', '1: b']);
+		expect(texts('.held')).toEqual(['0: a', '1: b']);
+	});
+
+	it('reads rest and default pattern names off the per-key item as it changes', () => {
+		type Row = { id: number; name: string; tags?: string[] };
+		let replace: (rows: Row[]) => void = () => {};
+
+		function App() @{
+			const rows = track<Row[]>([
+				{ id: 1, name: 'one', tags: ['a', 'b'] },
+			]);
+			replace = (next) => {
+				rows.value = next;
+			};
+			<ul>
+				@for (const { id, ...rest } of rows.value; key id) {
+					<li>{rest.name}</li>
+				}
+				@for (const [head, second = 'none', ...others] of rows.value.map(
+					(row) => row.tags ?? [],
+				); key head) {
+					<li>{head + ':' + second + ':' + others.length}</li>
+				}
+			</ul>
+		}
+
+		render(App);
+		const items = () => [...container.querySelectorAll('li')].map((li) => li.textContent);
+		expect(items()).toEqual(['one', 'a:b:0']);
+
+		// A new object under the same key updates the existing block in place.
+		replace([
+			{ id: 1, name: 'uno', tags: ['a'] },
+		]);
+		flushSync();
+		expect(items()).toEqual(['uno', 'a:none:0']);
+	});
+
+	it('destructures a keyed item once per change, so defaults run once', () => {
+		type Row = { id: number; label?: string };
+		let replace: (rows: Row[]) => void = () => {};
+		let defaults = 0;
+		const next = () => `default ${++defaults}`;
+
+		function App() @{
+			const rows = track<Row[]>([{ id: 1 }]);
+			replace = (next) => {
+				rows.value = next;
+			};
+			<ul>
+				@for (const { id, label = next() } of rows.value; key id) {
+					<li>{label + '/' + label + '/' + id}</li>
+				}
+			</ul>
+		}
+
+		render(App);
+		const items = () => [...container.querySelectorAll('li')].map((li) => li.textContent);
+		// Two reads of `label`, one evaluation of its default.
+		expect(items()).toEqual(['default 1/default 1/1']);
+		expect(defaults).toBe(1);
+
+		replace([{ id: 1 }]);
+		flushSync();
+		expect(items()).toEqual(['default 2/default 2/1']);
+		expect(defaults).toBe(2);
+
+		replace([
+			{ id: 1, label: 'given' },
+		]);
+		flushSync();
+		expect(items()).toEqual(['given/given/1']);
+		expect(defaults).toBe(2);
+	});
+
+	it('reads rest pattern names inside a hoisted branch of a keyed loop', () => {
+		type Row = { id: number; name: string };
+		let replace: (rows: Row[]) => void = () => {};
+		let toggle: () => void = () => {};
+
+		function App() @{
+			const rows = track<Row[]>([
+				{ id: 1, name: 'one' },
+			]);
+			const show = track(true);
+			replace = (next) => {
+				rows.value = next;
+			};
+			toggle = () => {
+				show.value = !show.value;
+			};
+			<ul>
+				@for (const { id, ...rest } of rows.value; key id) {
+					@if (show.value) {
+						<li>{rest.name}</li>
+					}
+				}
+			</ul>
+		}
+
+		render(App);
+		const items = () => [...container.querySelectorAll('li')].map((li) => li.textContent);
+		expect(items()).toEqual(['one']);
+
+		replace([
+			{ id: 1, name: 'uno' },
+		]);
+		flushSync();
+		expect(items()).toEqual(['uno']);
+
+		toggle();
+		flushSync();
+		expect(items()).toEqual([]);
+
+		toggle();
+		flushSync();
+		expect(items()).toEqual(['uno']);
+	});
 });