ripple 0.3.128 → 0.4.0

package/tests/client/if-block.test.tsrx

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync, track, type Tracked } from 'ripple';
+
+// `if_block` probes its condition once: a condition that reads no tracked
+// state renders its branch with no block, a dynamic one gets a block whose
+// own first run subscribes it. The dependencies the probe recorded are never
+// handed to the block: a write during the branch's first render (a child's
+// setup here) would prune them before the block could take them over.
+
+describe('if block', () => {
+	it('keeps re-evaluating when the first branch render writes the condition state', () => {
+		let set: (value: number) => void = () => {};
+
+		function Bumper(props: { n: Tracked<number> }) @{
+			// Writes the value the parent's condition depends on, while the
+			// parent's if is rendering this branch for the first time.
+			props.n.value = props.n.value + 1;
+			<span>{'bumped ' + props.n.value}</span>
+		}
+
+		function App() @{
+			const n = track(0);
+			set = (value) => {
+				n.value = value;
+			};
+			@if (n.value < 5) {
+				<Bumper {n} />
+			} @else {
+				<p>{'done'}</p>
+			}
+		}
+
+		render(App);
+		flushSync();
+		expect(container.querySelector('span')?.textContent).toBe('bumped 1');
+
+		set(7);
+		flushSync();
+		expect(container.querySelector('span')).toBeNull();
+		expect(container.querySelector('p')?.textContent).toBe('done');
+
+		set(0);
+		flushSync();
+		expect(container.querySelector('span')?.textContent).toBe('bumped 1');
+	});
+
+	it('renders a static condition with no block and keeps a dynamic one live', () => {
+		let toggle: () => void = () => {};
+
+		function App(props: { fixed: boolean }) @{
+			const on = track(false);
+			toggle = () => {
+				on.value = !on.value;
+			};
+			<>
+				@if (props.fixed) {
+					<b>{'fixed'}</b>
+				}
+				@if (on.value) {
+					<i>{'on'}</i>
+				} @else {
+					<i>{'off'}</i>
+				}
+			</>
+		}
+
+		function Root() @{
+			<App fixed={true} />
+		}
+
+		render(Root);
+		expect(container.querySelector('b')?.textContent).toBe('fixed');
+		expect(container.querySelector('i')?.textContent).toBe('off');
+
+		toggle();
+		flushSync();
+		expect(container.querySelector('i')?.textContent).toBe('on');
+		expect(container.querySelector('b')?.textContent).toBe('fixed');
+	});
+});

package/tests/client/map.test.tsrx

@@ -4,15 +4,15 @@ describe('RippleMap', () => {
 	it('handles set with update and delete operations with a reactive size var', () => {
 		function MapTest() @{
 			let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[value] = track(() => map.get('a'));
-			let &[size] = track(() => map.size);
+			const value = track(() => map.get('a'));
+			const size = track(() => map.size);
 			<>
 				<button onClick={() => map.set('d', 4)}>{'set'}</button>
 				<button onClick={() => map.delete('b')}>{'delete'}</button>
 				<button onClick={() => map.set('a', 5)}>{'update'}</button>
 				<pre>{map.get('d')}</pre>
-				<pre>{size}</pre>
-				<pre>{value}</pre>
+				<pre>{size.value}</pre>
+				<pre>{value.value}</pre>
 			</>
 		}
 
@@ -62,10 +62,10 @@ describe('RippleMap', () => {
 	it('handles has operation and tracks reactive $has', () => {
 		function MapTest() @{
 			let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[has] = track(() => map.has('b'));
+			const has = track(() => map.has('b'));
 			<>
 				<button onClick={() => map.delete('b')}>{'delete'}</button>
-				<pre>{has}</pre>
+				<pre>{has.value}</pre>
 			</>
 		}
 
@@ -83,14 +83,14 @@ describe('RippleMap', () => {
 	it('handles reactivity of keys, values, and entries', () => {
 		function MapTest() @{
 			let map = new RippleMap([['x', 10], ['y', 20]]);
-			let &[keys] = track(() => Array.from(map.keys()));
-			let &[values] = track(() => Array.from(map.values()));
-			let &[entries] = track(() => Array.from(map.entries()));
+			const keys = track(() => Array.from(map.keys()));
+			const values = track(() => Array.from(map.values()));
+			const entries = track(() => Array.from(map.entries()));
 			<>
 				<button onClick={() => map.delete('x')}>{'delete'}</button>
-				<pre>{JSON.stringify(keys)}</pre>
-				<pre>{JSON.stringify(values)}</pre>
-				<pre>{JSON.stringify(entries)}</pre>
+				<pre>{JSON.stringify(keys.value)}</pre>
+				<pre>{JSON.stringify(values.value)}</pre>
+				<pre>{JSON.stringify(entries.value)}</pre>
 			</>
 		}
 
@@ -144,11 +144,11 @@ describe('RippleMap', () => {
 	it('creates RippleMap with initial entries using RippleMap() shorthand syntax', () => {
 		function MapTest() @{
 			let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[value] = track(() => map.get('b'));
+			const value = track(() => map.get('b'));
 			<>
 				<button onClick={() => map.set('b', 10)}>{'update'}</button>
 				<pre>{map.size}</pre>
-				<pre>{value}</pre>
+				<pre>{value.value}</pre>
 			</>
 		}
 
@@ -167,12 +167,12 @@ describe('RippleMap', () => {
 	it('handles all operations with RippleMap() shorthand syntax', () => {
 		function MapTest() @{
 			let map = new RippleMap([['x', 100], ['y', 200]]);
-			let &[keys] = track(() => Array.from(map.keys()));
+			const keys = track(() => Array.from(map.keys()));
 			<>
 				<button onClick={() => map.set('z', 300)}>{'add'}</button>
 				<button onClick={() => map.delete('x')}>{'delete'}</button>
 				<button onClick={() => map.clear()}>{'clear'}</button>
-				<pre>{JSON.stringify(keys)}</pre>
+				<pre>{JSON.stringify(keys.value)}</pre>
 				<pre>{map.size}</pre>
 			</>
 		}

package/tests/client/media-query.test.tsrx

@@ -51,9 +51,9 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		function App() @{
-			let &[medium] = new MediaQuery(media);
+			const medium = new MediaQuery(media);
 			<div>
-				<p>{medium}</p>
+				<p>{medium.value}</p>
 			</div>
 		}
 
@@ -85,19 +85,19 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		function App() @{
-			let &[show] = track(true);
+			const show = track(true);
 			<>
-				@if (show) {
+				@if (show.value) {
 					<Child />
 				}
-				<button onClick={() => (show = !show)}>{'Toggle Child'}</button>
+				<button onClick={() => (show.value = !show.value)}>{'Toggle Child'}</button>
 			</>
 		}
 
 		function Child() @{
-			let &[medium] = new MediaQuery(media);
+			const medium = new MediaQuery(media);
 			<div>
-				<p>{medium}</p>
+				<p>{medium.value}</p>
 			</div>
 		}
 

package/tests/client/portal.test.tsrx

@@ -1,4 +1,4 @@
-import { Portal, flushSync, track } from 'ripple';
+import { Portal, flushSync, track, type Tracked } from 'ripple';
 
 describe('Portal', () => {
 	afterEach(() => {
@@ -46,14 +46,14 @@ describe('Portal', () => {
 
 	it('cleans up portal content when destroyed via conditional rendering', () => {
 		function TestPortal() @{
-			let &[open] = track(true);
+			const open = track(true);
 			<>
-				@if (open) {
+				@if (open.value) {
 					<Portal target={document.body}>
 						<div class="test-portal">{'Conditional content'}</div>
 					</Portal>
 				}
-				<button onClick={() => (open = false)}>{'Close'}</button>
+				<button onClick={() => (open.value = false)}>{'Close'}</button>
 			</>
 		}
 
@@ -72,18 +72,18 @@ describe('Portal', () => {
 
 	it('opens and closes portal via conditional rendering', () => {
 		function TestPortal() @{
-			let &[open] = track(false);
+			const open = track(false);
 			<>
-				@if (open) {
+				@if (open.value) {
 					<Portal target={document.body}>
 						<div class="test-portal">
 							{'Content'}
-							<button onClick={() => (open = false)}>{'Close'}</button>
+							<button onClick={() => (open.value = false)}>{'Close'}</button>
 						</div>
 					</Portal>
 				}
-				@if (!open) {
-					<button onClick={() => (open = true)}>{'Open'}</button>
+				@if (!open.value) {
+					<button onClick={() => (open.value = true)}>{'Open'}</button>
 				}
 			</>
 		}
@@ -146,28 +146,28 @@ describe('Portal', () => {
 			// 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);
+				const modalOpen = track(true);
+				const sheetOpen = track(true);
+				const sheetClicks = track(0);
 				<>
-					@if (modalOpen) {
+					@if (modalOpen.value) {
 						<Portal target={document.body}>
 							<div class="test-portal test-modal">
 								<button
 									class="close-modal"
-									onClick={() => (modalOpen = false)}
+									onClick={() => (modalOpen.value = false)}
 								>{'Close modal'}</button>
 							</div>
 						</Portal>
 					}
-					@if (sheetOpen) {
+					@if (sheetOpen.value) {
 						<Portal target={document.body}>
 							<div class="test-portal test-sheet">
-								<span class="sheet-clicks">{String(sheetClicks)}</span>
+								<span class="sheet-clicks">{String(sheetClicks.value)}</span>
 								<button
 									class="sheet-btn"
 									onClick={() => {
-										sheetClicks++;
+										sheetClicks.value++;
 									}}
 								>{'Sheet button'}</button>
 							</div>
@@ -209,14 +209,14 @@ describe('Portal', () => {
 		document.body.appendChild(target2);
 
 		function TestRetargetPortal() @{
-			let &[useSecond] = track(false);
-			let &[clicks] = track(0);
+			const useSecond = track(false);
+			const clicks = track(0);
 			<>
-				<button class="swap" onClick={() => (useSecond = true)}>{'Swap'}</button>
-				<Portal target={useSecond ? target2 : target1}>
+				<button class="swap" onClick={() => (useSecond.value = true)}>{'Swap'}</button>
+				<Portal target={useSecond.value ? target2 : target1}>
 					<div class="test-portal">
-						<span class="clicks">{String(clicks)}</span>
-						<button class="portal-btn" onClick={() => clicks++}>{'Click'}</button>
+						<span class="clicks">{String(clicks.value)}</span>
+						<button class="portal-btn" onClick={() => clicks.value++}>{'Click'}</button>
 					</div>
 				</Portal>
 			</>
@@ -246,12 +246,12 @@ describe('Portal', () => {
 
 	it('handles portal with reactive content', () => {
 		function TestReactivePortal() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<Portal target={document.body}>
 				<div class="test-portal">
 					{'Count: '}
-					{String(count)}
-					<button onClick={() => count++}>{'Increment'}</button>
+					{String(count.value)}
+					<button onClick={() => count.value++}>{'Increment'}</button>
 				</div>
 			</Portal>
 		}
@@ -268,4 +268,202 @@ describe('Portal', () => {
 
 		expect(portalElement.textContent).toContain('Count: 1');
 	});
+
+	it('re-renders a root @if child at its own position among sibling portals', () => {
+		// Portal content appends through an append-into sentinel with no anchor
+		// node of its own. A child component whose root is control flow must
+		// still re-render where it was, not after content appended since.
+		const target = document.createElement('div');
+		document.body.appendChild(target);
+
+		function Toggle(props: { on: Tracked<boolean> }) @{
+			@if (props.on.value) {
+				<span class="test-portal">{'A'}</span>
+			} @else {
+				<span class="test-portal">{'a'}</span>
+			}
+		}
+
+		function TestPortalOrder() @{
+			const on = track(true);
+			<>
+				<button onClick={() => (on.value = !on.value)}>{'Toggle'}</button>
+				<Portal {target}>
+					<Toggle {on} />
+				</Portal>
+				<Portal {target}>
+					<span class="test-portal">{'B'}</span>
+				</Portal>
+			</>
+		}
+
+		render(TestPortalOrder);
+
+		expect(target.textContent).toBe('AB');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(target.textContent).toBe('aB');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(target.textContent).toBe('AB');
+
+		document.body.removeChild(target);
+	});
+
+	it('moves items to the end of a keyed @for rendered as a component root inside a portal', () => {
+		const target = document.createElement('div');
+		document.body.appendChild(target);
+
+		function List(props: { items: Tracked<number[]> }) @{
+			@for (const item of props.items.value; key item) {
+				<span class="test-portal">{item}</span>
+			}
+		}
+
+		function TestPortalList() @{
+			const items = track([1, 2, 3]);
+			<>
+				<button
+					onClick={() => (items.value = [items.value[1], items.value[2], items.value[0]])}
+				>{'Rotate'}</button>
+				<Portal {target}>
+					<List {items} />
+				</Portal>
+			</>
+		}
+
+		render(TestPortalList);
+
+		expect(target.textContent).toBe('123');
+
+		// Moving the first item to the end inserts before the list's anchor.
+		container.querySelector('button').click();
+		flushSync();
+		expect(target.textContent).toBe('231');
+
+		document.body.removeChild(target);
+	});
+
+	it('moves items to the end of a keyed @for rendered directly as portal children', () => {
+		const target = document.createElement('div');
+		document.body.appendChild(target);
+
+		function TestPortalFor() @{
+			const items = track([1, 2, 3]);
+			<>
+				<button
+					onClick={() => (items.value = [items.value[1], items.value[2], items.value[0]])}
+				>{'Rotate'}</button>
+				<Portal {target}>
+					@for (const item of items.value; key item) {
+						<span class="test-portal">{item}</span>
+					}
+				</Portal>
+			</>
+		}
+
+		render(TestPortalFor);
+
+		expect(target.textContent).toBe('123');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(target.textContent).toBe('231');
+
+		document.body.removeChild(target);
+	});
+
+	it('removes portal content when a fragment containing the portal is destroyed', () => {
+		// The `@if` branch owns a DOM range of its own (the fragment), so it
+		// tells its subtree not to remove DOM; the portal content lives in the
+		// target, outside that range, and must still go.
+		function TestPortalInFragment() @{
+			const open = track(true);
+			<>
+				<button onClick={() => (open.value = false)}>{'Close'}</button>
+				@if (open.value) {
+					<>
+						<Portal target={document.body}>
+							<div class="test-portal">{'Content'}</div>
+						</Portal>
+						<span class="sibling">{'Sibling'}</span>
+					</>
+				}
+			</>
+		}
+
+		render(TestPortalInFragment);
+
+		expect(document.body.querySelector('.test-portal')).toBeTruthy();
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(container.querySelector('.sibling')).toBeNull();
+		expect(document.body.querySelector('.test-portal')).toBeNull();
+	});
+
+	it(
+		'leaves nothing in the target after closing or retargeting a portal with control-flow roots',
+		() => {
+			// A root-controlled block inside portal content gets a text anchor of its
+			// own; the target outlives the portal, so that anchor must go with the
+			// content on close and on retarget.
+			const target1 = document.createElement('div');
+			const target2 = document.createElement('div');
+			document.body.appendChild(target1);
+			document.body.appendChild(target2);
+
+			function Toggle(props) @{
+				@if (props.on) {
+					<span class="test-portal">{'A'}</span>
+				} @else {
+					<span class="test-portal">{'a'}</span>
+				}
+			}
+
+			function List(props) @{
+				@for (const item of props.items; key item) {
+					<span class="test-portal">{item}</span>
+				}
+			}
+
+			function TestPortalCleanup() @{
+				const open = track(true);
+				const useSecond = track(false);
+				<>
+					<button class="close" onClick={() => (open.value = false)}>{'Close'}</button>
+					<button class="swap" onClick={() => (useSecond.value = true)}>{'Swap'}</button>
+					@if (open.value) {
+						<>
+							<Portal target={useSecond.value ? target2 : target1}>
+								<Toggle on={true} />
+							</Portal>
+							<Portal target={useSecond.value ? target2 : target1}>
+								<List items={[1, 2]} />
+							</Portal>
+						</>
+					}
+				</>
+			}
+
+			render(TestPortalCleanup);
+
+			expect(target1.textContent).toBe('A12');
+
+			container.querySelector('.swap').click();
+			flushSync();
+			expect(target1.childNodes.length).toBe(0);
+			expect(target2.textContent).toBe('A12');
+
+			container.querySelector('.close').click();
+			flushSync();
+			expect(target2.childNodes.length).toBe(0);
+
+			document.body.removeChild(target1);
+			document.body.removeChild(target2);
+		},
+	);
 });

package/tests/client/primitive-text.test.tsrx

@@ -0,0 +1,50 @@
+import { flushSync, track } from 'ripple';
+
+it('renders shadowed intrinsic calls as elements beside text', () => {
+	function App() @{
+		const String = () => <b>string</b>;
+		const Number = () => <b>number</b>;
+		const Boolean = () => <b>boolean</b>;
+		const BigInt = () => <b>bigint</b>;
+		const Date = () => <b>date</b>;
+		<>
+			<p>before{String()}after</p>
+			<p>before{Number()}after</p>
+			<p>before{Boolean()}after</p>
+			<p>before{BigInt()}after</p>
+			<p>before{Date()}after</p>
+		</>
+	}
+	render(App);
+	expect([...container.querySelectorAll('b')].map((node) => node.textContent)).toEqual([
+		'string',
+		'number',
+		'boolean',
+		'bigint',
+		'date',
+	]);
+});
+
+it('keeps numeric addition, bigint conversion, and sequence effects during updates', () => {
+	let calls = 0;
+	function App() @{
+		const count = track(2);
+		<>
+			<p>sum: {Number(count.value) + Number(count.value)}</p>
+			<div>
+				{'big: '}
+				{(calls++, BigInt(count.value) satisfies bigint)}
+			</div>
+			<button onClick={() => count.value++}>update</button>
+		</>
+	}
+	render(App);
+	expect(container.querySelector('p').textContent).toBe('sum: 4');
+	expect(container.querySelector('div').textContent).toBe('big: 2');
+	expect(calls).toBe(1);
+	container.querySelector('button').click();
+	flushSync();
+	expect(container.querySelector('p').textContent).toBe('sum: 6');
+	expect(container.querySelector('div').textContent).toBe('big: 3');
+	expect(calls).toBe(2);
+});