ripple 0.3.72 → 0.3.76

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', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-				let &[value] = track(() => map.get('a'));
-				let &[size] = track(() => map.size);
+		function MapTest() @{
+			let map = new 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,12 +41,12 @@ describe('RippleMap', () => {
 	});
 
 	it('handles clear operation', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+		function MapTest() @{
+			let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+			<>
 				<button onClick={() => map.clear()}>{'clear'}</button>
 				<pre>{map.size}</pre>
-			</>;
+			</>
 		}
 
 		render(MapTest);
@@ -60,13 +60,13 @@ describe('RippleMap', () => {
 	});
 
 	it('handles has operation and tracks reactive $has', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-				let &[has] = track(() => map.has('b'));
+		function MapTest() @{
+			let map = new 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);
@@ -81,17 +81,17 @@ describe('RippleMap', () => {
 	});
 
 	it('handles reactivity of keys, values, and entries', () => {
-		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()));
+		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()));
+			<>
 				<button onClick={() => map.delete('x')}>{'delete'}</button>
 				<pre>{JSON.stringify(keys)}</pre>
 				<pre>{JSON.stringify(values)}</pre>
 				<pre>{JSON.stringify(entries)}</pre>
-			</>;
+			</>
 		}
 
 		render(MapTest);
@@ -111,11 +111,9 @@ describe('RippleMap', () => {
 	});
 
 	it('toJSON returns correct object', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['foo', 1], ['bar', 2]]);
-				<pre>{JSON.stringify(map)}</pre>
-			</>;
+		function MapTest() @{
+			let map = new RippleMap([['foo', 1], ['bar', 2]]);
+			<pre>{JSON.stringify(map)}</pre>
 		}
 
 		render(MapTest);
@@ -124,12 +122,12 @@ describe('RippleMap', () => {
 	});
 
 	it('creates empty RippleMap using RippleMap() shorthand syntax', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap();
+		function MapTest() @{
+			let map = new RippleMap();
+			<>
 				<button onClick={() => map.set('a', 1)}>{'add'}</button>
 				<pre>{map.size}</pre>
-			</>;
+			</>
 		}
 
 		render(MapTest);
@@ -144,14 +142,14 @@ describe('RippleMap', () => {
 	});
 
 	it('creates RippleMap with initial entries using RippleMap() shorthand syntax', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-				let &[value] = track(() => map.get('b'));
+		function MapTest() @{
+			let map = new 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);
@@ -167,16 +165,16 @@ describe('RippleMap', () => {
 	});
 
 	it('handles all operations with RippleMap() shorthand syntax', () => {
-		function MapTest() {
-			return <>
-				let map = RippleMap([['x', 100], ['y', 200]]);
-				let &[keys] = track(() => Array.from(map.keys()));
+		function MapTest() @{
+			let map = new 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,13 +50,11 @@ describe('MediaQuery', () => {
 	it('should be reactive if matchMedia changes', () => {
 		const media = '(min-width: 600px)';
 
-		function App() {
-			return <>
-				let &[medium] = MediaQuery(media);
-				<div>
-					<p>{medium}</p>
-				</div>
-			</>;
+		function App() @{
+			let &[medium] = new MediaQuery(media);
+			<div>
+				<p>{medium}</p>
+			</div>
 		}
 
 		render(App);
@@ -86,23 +84,21 @@ describe('MediaQuery', () => {
 	it('should have cleared event listeners after unmount', async () => {
 		const media = '(min-width: 600px)';
 
-		function App() {
-			return <>
-				let &[show] = track(true);
-				if (show) {
+		function App() @{
+			let &[show] = track(true);
+			<>
+				@if (show) {
 					<Child />
 				}
 				<button onClick={() => (show = !show)}>{'Toggle Child'}</button>
-			</>;
+			</>
 		}
 
-		function Child() {
-			return <>
-				let &[medium] = MediaQuery(media);
-				<div>
-					<p>{medium}</p>
-				</div>
-			</>;
+		function Child() @{
+			let &[medium] = new MediaQuery(media);
+			<div>
+				<p>{medium}</p>
+			</div>
 		}
 
 		render(App);

package/tests/client/object.test.tsrx

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

package/tests/client/portal.test.tsrx

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