ripple 0.3.67 → 0.3.69

package/tests/client/map.test.tsrx

@@ -2,18 +2,18 @@ import { RippleMap, flushSync, track } from 'ripple';
 
 describe('RippleMap', () => {
 	it('handles set with update and delete operations with a reactive size var', () => {
-		component MapTest() {
-			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[value] = track(() => map.get('a'));
-			let &[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>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+				let &[value] = track(() => map.get('a'));
+				let &[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>
+			</>;
 		}
 
 		render(MapTest);
@@ -41,11 +41,12 @@ describe('RippleMap', () => {
 	});
 
 	it('handles clear operation', () => {
-		component MapTest() {
-			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-
-			<button onClick={() => map.clear()}>{'clear'}</button>
-			<pre>{map.size}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+				<button onClick={() => map.clear()}>{'clear'}</button>
+				<pre>{map.size}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -59,12 +60,13 @@ describe('RippleMap', () => {
 	});
 
 	it('handles has operation and tracks reactive $has', () => {
-		component MapTest() {
-			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[has] = track(() => map.has('b'));
-
-			<button onClick={() => map.delete('b')}>{'delete'}</button>
-			<pre>{has}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+				let &[has] = track(() => map.has('b'));
+				<button onClick={() => map.delete('b')}>{'delete'}</button>
+				<pre>{has}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -79,17 +81,17 @@ describe('RippleMap', () => {
 	});
 
 	it('handles reactivity of keys, values, and entries', () => {
-		component MapTest() {
-			let map = 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()));
-
-			<button onClick={() => map.delete('x')}>{'delete'}</button>
-
-			<pre>{JSON.stringify(keys)}</pre>
-			<pre>{JSON.stringify(values)}</pre>
-			<pre>{JSON.stringify(entries)}</pre>
+		function MapTest() {
+			return <>
+				let map = 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()));
+				<button onClick={() => map.delete('x')}>{'delete'}</button>
+				<pre>{JSON.stringify(keys)}</pre>
+				<pre>{JSON.stringify(values)}</pre>
+				<pre>{JSON.stringify(entries)}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -109,10 +111,11 @@ describe('RippleMap', () => {
 	});
 
 	it('toJSON returns correct object', () => {
-		component MapTest() {
-			let map = RippleMap([['foo', 1], ['bar', 2]]);
-
-			<pre>{JSON.stringify(map)}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['foo', 1], ['bar', 2]]);
+				<pre>{JSON.stringify(map)}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -121,11 +124,12 @@ describe('RippleMap', () => {
 	});
 
 	it('creates empty RippleMap using RippleMap() shorthand syntax', () => {
-		component MapTest() {
-			let map = RippleMap();
-
-			<button onClick={() => map.set('a', 1)}>{'add'}</button>
-			<pre>{map.size}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap();
+				<button onClick={() => map.set('a', 1)}>{'add'}</button>
+				<pre>{map.size}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -140,13 +144,14 @@ describe('RippleMap', () => {
 	});
 
 	it('creates RippleMap with initial entries using RippleMap() shorthand syntax', () => {
-		component MapTest() {
-			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let &[value] = track(() => map.get('b'));
-
-			<button onClick={() => map.set('b', 10)}>{'update'}</button>
-			<pre>{map.size}</pre>
-			<pre>{value}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+				let &[value] = track(() => map.get('b'));
+				<button onClick={() => map.set('b', 10)}>{'update'}</button>
+				<pre>{map.size}</pre>
+				<pre>{value}</pre>
+			</>;
 		}
 
 		render(MapTest);
@@ -162,16 +167,16 @@ describe('RippleMap', () => {
 	});
 
 	it('handles all operations with RippleMap() shorthand syntax', () => {
-		component MapTest() {
-			let map = RippleMap([['x', 100], ['y', 200]]);
-			let &[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>{map.size}</pre>
+		function MapTest() {
+			return <>
+				let map = RippleMap([['x', 100], ['y', 200]]);
+				let &[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>{map.size}</pre>
+			</>;
 		}
 
 		render(MapTest);

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

@@ -50,12 +50,13 @@ describe('MediaQuery', () => {
 	it('should be reactive if matchMedia changes', () => {
 		const media = '(min-width: 600px)';
 
-		component App() {
-			let &[medium] = MediaQuery(media);
-
-			<div>
-				<p>{medium}</p>
-			</div>
+		function App() {
+			return <>
+				let &[medium] = MediaQuery(media);
+				<div>
+					<p>{medium}</p>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -85,22 +86,23 @@ describe('MediaQuery', () => {
 	it('should have cleared event listeners after unmount', async () => {
 		const media = '(min-width: 600px)';
 
-		component App() {
-			let &[show] = track(true);
-
-			if (show) {
-				<Child />
-			}
-
-			<button onClick={() => (show = !show)}>{'Toggle Child'}</button>
+		function App() {
+			return <>
+				let &[show] = track(true);
+				if (show) {
+					<Child />
+				}
+				<button onClick={() => (show = !show)}>{'Toggle Child'}</button>
+			</>;
 		}
 
-		component Child() {
-			let &[medium] = MediaQuery(media);
-
-			<div>
-				<p>{medium}</p>
-			</div>
+		function Child() {
+			return <>
+				let &[medium] = MediaQuery(media);
+				<div>
+					<p>{medium}</p>
+				</div>
+			</>;
 		}
 
 		render(App);

package/tests/client/object.test.tsrx

@@ -3,19 +3,19 @@ import { TRACKED_OBJECT } from '../../src/runtime/internal/client/constants.js';
 
 describe('RippleObject', () => {
 	it('makes new properties reactive', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: -1 });
-
-			obj.a = 0;
-
-			<pre>{obj.a}</pre>
-			<button
-				onClick={() => {
-					obj.a++;
-				}}
-			>
-				{'Increment A'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: -1 });
+				obj.a = 0;
+				<pre>{obj.a}</pre>
+				<button
+					onClick={() => {
+						obj.a++;
+					}}
+				>
+					{'Increment A'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -32,17 +32,18 @@ describe('RippleObject', () => {
 	});
 
 	it('makes existing object properties reactive', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: 0 });
-
-			<pre>{obj.a}</pre>
-			<button
-				onClick={() => {
-					obj.a++;
-				}}
-			>
-				{'Increment A'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: 0 });
+				<pre>{obj.a}</pre>
+				<button
+					onClick={() => {
+						obj.a++;
+					}}
+				>
+					{'Increment A'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -59,12 +60,12 @@ describe('RippleObject', () => {
 	});
 
 	it('checks if property exists via the has trap', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: -1, b: 1 });
-
-			obj.a = 0;
-
-			<pre>{'a' in obj && 'b' in obj}</pre>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: -1, b: 1 });
+				obj.a = 0;
+				<pre>{'a' in obj && 'b' in obj}</pre>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -75,17 +76,18 @@ describe('RippleObject', () => {
 	});
 
 	it('deletes properties via the delete trap', () => {
-		component ObjectTest() {
-			const obj = new RippleObject<{ a?: number; b: number }>({ a: 0, b: 1 });
-
-			<pre>{String(obj.a)}</pre>
-			<button
-				onClick={() => {
-					delete obj.a;
-				}}
-			>
-				{'Delete A'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject<{ a?: number; b: number }>({ a: 0, b: 1 });
+				<pre>{String(obj.a)}</pre>
+				<button
+					onClick={() => {
+						delete obj.a;
+					}}
+				>
+					{'Delete A'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -102,17 +104,18 @@ describe('RippleObject', () => {
 	});
 
 	it('checks if non-existent property is reactive when added later', () => {
-		component ObjectTest() {
-			const obj = new RippleObject<{ a?: number }>({});
-
-			<pre>{String(obj.a)}</pre>
-			<button
-				onClick={() => {
-					obj.a = 1;
-				}}
-			>
-				{'Add A'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject<{ a?: number }>({});
+				<pre>{String(obj.a)}</pre>
+				<button
+					onClick={() => {
+						obj.a = 1;
+					}}
+				>
+					{'Add A'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -129,17 +132,18 @@ describe('RippleObject', () => {
 	});
 
 	it('checks that deeply nested objects are not proxied or reactive', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: { b: 1 } });
-
-			<pre>{String(obj.a.b)}</pre>
-			<button
-				onClick={() => {
-					obj.a.b++;
-				}}
-			>
-				{'Increment B'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: { b: 1 } });
+				<pre>{String(obj.a.b)}</pre>
+				<button
+					onClick={() => {
+						obj.a.b++;
+					}}
+				>
+					{'Increment B'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);
@@ -157,28 +161,30 @@ describe('RippleObject', () => {
 	});
 
 	it('checks if TRACKED_OBJECT symbol is present on RippleObject instances', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: 0 });
-
-			// @ts-expect-error TRACKED_OBJECT is internal
-			expect(obj[TRACKED_OBJECT]).toBe(true);
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: 0 });
+				// @ts-expect-error TRACKED_OBJECT is internal
+				expect(obj[TRACKED_OBJECT]).toBe(true);
+			</>;
 		}
 	});
 
 	it('uses the hash syntax for creating RippleObject', () => {
-		component ObjectTest() {
-			const obj = new RippleObject({ a: 0, b: 1, c: { d: { e: 8 } } });
-
-			<pre>{obj.a}</pre>
-			<pre>{TRACKED_OBJECT in obj}</pre>
-			<pre>{JSON.stringify(obj)}</pre>
-			<button
-				onClick={() => {
-					obj.a++;
-				}}
-			>
-				{'Increment A'}
-			</button>
+		function ObjectTest() {
+			return <>
+				const obj = new RippleObject({ a: 0, b: 1, c: { d: { e: 8 } } });
+				<pre>{obj.a}</pre>
+				<pre>{TRACKED_OBJECT in obj}</pre>
+				<pre>{JSON.stringify(obj)}</pre>
+				<button
+					onClick={() => {
+						obj.a++;
+					}}
+				>
+					{'Increment A'}
+				</button>
+			</>;
 		}
 
 		render(ObjectTest);

package/tests/client/portal.test.tsrx

@@ -11,10 +11,12 @@ describe('Portal', () => {
 		const target = document.createElement('div');
 		document.body.appendChild(target);
 
-		component TestPortal() {
-			<Portal {target}>
-				<div class="test-portal">{'Portal works!'}</div>
-			</Portal>
+		function TestPortal() {
+			return <>
+				<Portal {target}>
+					<div class="test-portal">{'Portal works!'}</div>
+				</Portal>
+			</>;
 		}
 
 		render(TestPortal);
@@ -28,10 +30,12 @@ describe('Portal', () => {
 	});
 
 	it('renders portal content to document.body', () => {
-		component TestPortal() {
-			<Portal target={document.body}>
-				<div class="test-portal">{'In document.body!'}</div>
-			</Portal>
+		function TestPortal() {
+			return <>
+				<Portal target={document.body}>
+					<div class="test-portal">{'In document.body!'}</div>
+				</Portal>
+			</>;
 		}
 
 		render(TestPortal);
@@ -45,16 +49,16 @@ describe('Portal', () => {
 	});
 
 	it('cleans up portal content when destroyed via conditional rendering', () => {
-		component TestPortal() {
-			let &[open] = track(true);
-
-			if (open) {
-				<Portal target={document.body}>
-					<div class="test-portal">{'Conditional content'}</div>
-				</Portal>
-			}
-
-			<button onClick={() => (open = false)}>{'Close'}</button>
+		function TestPortal() {
+			return <>
+				let &[open] = track(true);
+				if (open) {
+					<Portal target={document.body}>
+						<div class="test-portal">{'Conditional content'}</div>
+					</Portal>
+				}
+				<button onClick={() => (open = false)}>{'Close'}</button>
+			</>;
 		}
 
 		render(TestPortal);
@@ -71,21 +75,21 @@ describe('Portal', () => {
 	});
 
 	it('opens and closes portal via conditional rendering', () => {
-		component TestPortal() {
-			let &[open] = track(false);
-
-			if (open) {
-				<Portal target={document.body}>
-					<div class="test-portal">
-						{'Content'}
-						<button onClick={() => (open = false)}>{'Close'}</button>
-					</div>
-				</Portal>
-			}
-
-			if (!open) {
-				<button onClick={() => (open = true)}>{'Open'}</button>
-			}
+		function TestPortal() {
+			return <>
+				let &[open] = track(false);
+				if (open) {
+					<Portal target={document.body}>
+						<div class="test-portal">
+							{'Content'}
+							<button onClick={() => (open = false)}>{'Close'}</button>
+						</div>
+					</Portal>
+				}
+				if (!open) {
+					<button onClick={() => (open = true)}>{'Open'}</button>
+				}
+			</>;
 		}
 
 		render(TestPortal);
@@ -113,14 +117,15 @@ describe('Portal', () => {
 		document.body.appendChild(target1);
 		document.body.appendChild(target2);
 
-		component TestMultiPortal() {
-			<Portal target={target1}>
-				<div class="test-portal">{'Portal 1 content'}</div>
-			</Portal>
-
-			<Portal target={target2}>
-				<div class="test-portal">{'Portal 2 content'}</div>
-			</Portal>
+		function TestMultiPortal() {
+			return <>
+				<Portal target={target1}>
+					<div class="test-portal">{'Portal 1 content'}</div>
+				</Portal>
+				<Portal target={target2}>
+					<div class="test-portal">{'Portal 2 content'}</div>
+				</Portal>
+			</>;
 		}
 
 		render(TestMultiPortal);
@@ -137,16 +142,17 @@ describe('Portal', () => {
 	});
 
 	it('handles portal with reactive content', () => {
-		component TestReactivePortal() {
-			let &[count] = track(0);
-
-			<Portal target={document.body}>
-				<div class="test-portal">
-					{'Count: '}
-					{String(count)}
-					<button onClick={() => count++}>{'Increment'}</button>
-				</div>
-			</Portal>
+		function TestReactivePortal() {
+			return <>
+				let &[count] = track(0);
+				<Portal target={document.body}>
+					<div class="test-portal">
+						{'Count: '}
+						{String(count)}
+						<button onClick={() => count++}>{'Increment'}</button>
+					</div>
+				</Portal>
+			</>;
 		}
 
 		render(TestReactivePortal);