ripple 0.3.128 → 0.4.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']);
+	});
 });

package/tests/client/head.test.tsrx

@@ -31,18 +31,18 @@ describe('head elements', () => {
 
 	it('renders reactive title element', () => {
 		function App() @{
-			let &[title] = track('Initial Title');
+			const title = track('Initial Title');
 			<>
 				<head>
-					<title>{title}</title>
+					<title>{title.value}</title>
 				</head>
 				<div>
 					<button
 						onClick={() => {
-							title = 'Updated Title';
+							title.value = 'Updated Title';
 						}}
 					>{'Update Title'}</button>
-					<span>{title}</span>
+					<span>{title.value}</span>
 				</div>
 			</>
 		}
@@ -62,15 +62,15 @@ describe('head elements', () => {
 
 	it('renders title with template literal', () => {
 		function App() @{
-			let &[name] = track('World');
+			const name = track('World');
 			<>
 				<head>
-					<title>{`Hello ${name}!`}</title>
+					<title>{`Hello ${name.value}!`}</title>
 				</head>
 				<div>
 					<button
 						onClick={() => {
-							name = 'Ripple';
+							name.value = 'Ripple';
 						}}
 					>{'Change Name'}</button>
 				</div>
@@ -90,19 +90,19 @@ describe('head elements', () => {
 
 	it('renders title with computed value', () => {
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			let prefix = 'Count: ';
 			<>
 				<head>
-					<title>{prefix + count}</title>
+					<title>{prefix + count.value}</title>
 				</head>
 				<div>
 					<button
 						onClick={() => {
-							count++;
+							count.value++;
 						}}
 					>{'Increment'}</button>
-					<span>{count}</span>
+					<span>{count.value}</span>
 				</div>
 			</>
 		}
@@ -121,15 +121,15 @@ describe('head elements', () => {
 
 	it('handles multiple title updates', () => {
 		function App() @{
-			let &[step] = track(1);
+			const step = track(1);
 			<>
 				<head>
-					<title>{`Step ${step} of 3`}</title>
+					<title>{`Step ${step.value} of 3`}</title>
 				</head>
 				<div>
 					<button
 						onClick={() => {
-							step = step % 3 + 1;
+							step.value = step.value % 3 + 1;
 						}}
 					>{'Next Step'}</button>
 				</div>
@@ -244,23 +244,23 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', () => {
 		function App() @{
-			let &[showPrefix] = track(true);
-			let &[title] = track('Main Page');
+			const showPrefix = track(true);
+			const title = track('Main Page');
 			<>
 				<head>
 					<title>
-						{showPrefix ? 'App - ' + title : title}
+						{showPrefix.value ? 'App - ' + title.value : title.value}
 					</title>
 				</head>
 				<div>
 					<button
 						onClick={() => {
-							showPrefix = !showPrefix;
+							showPrefix.value = !showPrefix.value;
 						}}
 					>{'Toggle Prefix'}</button>
 					<button
 						onClick={() => {
-							title = title === 'Main Page' ? 'Settings' : 'Main Page';
+							title.value = title.value === 'Main Page' ? 'Settings' : 'Main Page';
 						}}
 					>{'Change Page'}</button>
 				</div>

package/tests/client/html.test.tsrx

@@ -16,12 +16,14 @@ describe('Fragment innerHTML', () => {
 
 	it('renders spread innerHTML as content instead of an attribute', () => {
 		function App() @{
-			let &[attrs] = track<{ innerHTML?: string }>({
+			const attrs = track<{ innerHTML?: string }>({
 				innerHTML: '<span>Spread HTML</span>',
 			});
 			<>
-				<code {...attrs} />
-				<button onClick={() => (attrs = { innerHTML: '<em>Updated HTML</em>' })}>{'Update'}</button>
+				<code {...attrs.value} />
+				<button
+					onClick={() => (attrs.value = { innerHTML: '<em>Updated HTML</em>' })}
+				>{'Update'}</button>
 			</>
 		}
 
@@ -64,12 +66,12 @@ describe('Fragment innerHTML', () => {
 
 	it('renders dynamic innerHTML fragments', () => {
 		function App() @{
-			let &[str] = track('<div>Test</div>');
+			const str = track('<div>Test</div>');
 			<>
-				<Fragment innerHTML={str} />
+				<Fragment innerHTML={str.value} />
 				<button
 					onClick={() => {
-						str = '<div>Updated</div>';
+						str.value = '<div>Updated</div>';
 					}}
 				>{'Update'}</button>
 			</>
@@ -99,10 +101,10 @@ describe('Fragment innerHTML', () => {
 
 	it('updates dynamic Fragment innerHTML', () => {
 		function App() @{
-			let &[html] = track('<span>First</span>');
+			const html = track('<span>First</span>');
 			<>
-				<Fragment innerHTML={html} />
-				<button onClick={() => (html = '<em>Second</em>')}>{'Update'}</button>
+				<Fragment innerHTML={html.value} />
+				<button onClick={() => (html.value = '<em>Second</em>')}>{'Update'}</button>
 			</>
 		}