ripple 0.2.152 → 0.2.154

package/tests/client/input-value.test.ripple

@@ -24,7 +24,7 @@ describe('use value()', () => {
 		expect(logs).toEqual(['text changed', '', 'text changed', 'Hello']);
 	});
 
-		it('should update value on input with a predefined value', () => {
+	it('should update value on input with a predefined value', () => {
 		const logs: string[] = [];
 
 		component App() {
@@ -83,9 +83,9 @@ describe('use value()', () => {
 			});
 
 			<select {ref bindValue(select)}>
-				<option value="1">{"One"}</option>
-				<option value="2">{"Two"}</option>
-				<option value="3">{"Three"}</option>
+				<option value="1">{'One'}</option>
+				<option value="2">{'Two'}</option>
+				<option value="3">{'Three'}</option>
 			</select>
 		}
 

package/tests/client/map.test.ripple

@@ -1,203 +1,202 @@
 import { flushSync, TrackedMap, track } from 'ripple';
 
 describe('TrackedMap', () => {
-    it('handles set with update and delete operations with a reactive size var', () => {
-        component MapTest() {
-            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
-            let value = track(() => map.get('a'));
-            let size = track(() => map.size);
+	it('handles set with update and delete operations with a reactive size var', () => {
+		component MapTest() {
+			let map = new TrackedMap([['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>
+			<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>{map.get('d')}</pre>
+			<pre>{@size}</pre>
+			<pre>{@value}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        const setButton = container.querySelectorAll('button')[0];
-        const deleteButton = container.querySelectorAll('button')[1];
-        const updateButton = container.querySelectorAll('button')[2];
+		const setButton = container.querySelectorAll('button')[0];
+		const deleteButton = container.querySelectorAll('button')[1];
+		const updateButton = container.querySelectorAll('button')[2];
 
-        setButton.click();
-        flushSync();
+		setButton.click();
+		flushSync();
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-        expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
 
-        deleteButton.click();
-        flushSync();
+		deleteButton.click();
+		flushSync();
 
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
 
-        updateButton.click();
-        flushSync();
+		updateButton.click();
+		flushSync();
 
-        expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
-    });
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
+	});
 
-    it('handles clear operation', () => {
-        component MapTest() {
-            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
+	it('handles clear operation', () => {
+		component MapTest() {
+			let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
 
-            <button onClick={() => map.clear()}>{'clear'}</button>
-            <pre>{map.size}</pre>
-        }
+			<button onClick={() => map.clear()}>{'clear'}</button>
+			<pre>{map.size}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        const clearButton = container.querySelector('button');
+		const clearButton = container.querySelector('button');
 
-        clearButton.click();
-        flushSync();
+		clearButton.click();
+		flushSync();
 
-        expect(container.querySelector('pre').textContent).toBe('0');
-    });
+		expect(container.querySelector('pre').textContent).toBe('0');
+	});
 
-    it('handles has operation and tracks reactive $has', () => {
-        component MapTest() {
-            let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
-            let has = track(() => map.has('b'));
+	it('handles has operation and tracks reactive $has', () => {
+		component MapTest() {
+			let map = new TrackedMap([['a', 1], ['b', 2], ['c', 3]]);
+			let has = track(() => map.has('b'));
 
-            <button onClick={() => map.delete('b')}>{'delete'}</button>
-            <pre>{@has}</pre>
-        }
+			<button onClick={() => map.delete('b')}>{'delete'}</button>
+			<pre>{@has}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        const deleteButton = container.querySelector('button');
-        expect(container.querySelector('pre').textContent).toBe('true');
+		const deleteButton = container.querySelector('button');
+		expect(container.querySelector('pre').textContent).toBe('true');
 
-        deleteButton.click();
-        flushSync();
+		deleteButton.click();
+		flushSync();
 
-        expect(container.querySelector('pre').textContent).toBe('false');
-    });
+		expect(container.querySelector('pre').textContent).toBe('false');
+	});
 
-    it('handles reactivity of keys, values, and entries', () => {
-        component MapTest() {
-            let map = new TrackedMap([['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()));
+	it('handles reactivity of keys, values, and entries', () => {
+		component MapTest() {
+			let map = new TrackedMap([['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>
+			<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)}</pre>
+			<pre>{JSON.stringify(@values)}</pre>
+			<pre>{JSON.stringify(@entries)}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        const deleteButton = container.querySelector('button');
+		const deleteButton = container.querySelector('button');
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('[10,20]');
-        expect(container.querySelectorAll('pre')[2].textContent).toBe('[["x",10],["y",20]]');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[10,20]');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('[["x",10],["y",20]]');
 
-        deleteButton.click();
-        flushSync();
+		deleteButton.click();
+		flushSync();
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y"]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('[20]');
-        expect(container.querySelectorAll('pre')[2].textContent).toBe('[["y",20]]');
-    });
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["y"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[20]');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('[["y",20]]');
+	});
 
-    it('toJSON returns correct object', () => {
-        component MapTest() {
-            let map = new TrackedMap([['foo', 1], ['bar', 2]]);
+	it('toJSON returns correct object', () => {
+		component MapTest() {
+			let map = new TrackedMap([['foo', 1], ['bar', 2]]);
 
-            <pre>{JSON.stringify(map)}</pre>
-        }
+			<pre>{JSON.stringify(map)}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
-    });
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
+	});
 
-    it('creates empty TrackedMap using #Map() shorthand syntax', () => {
-        component MapTest() {
-            let map = #Map();
+	it('creates empty TrackedMap using #Map() shorthand syntax', () => {
+		component MapTest() {
+			let map = #Map();
 
-            <button onClick={() => map.set('a', 1)}>{'add'}</button>
-            <pre>{map.size}</pre>
-        }
+			<button onClick={() => map.set('a', 1)}>{'add'}</button>
+			<pre>{map.size}</pre>
+		}
 
-        render(MapTest);
+		render(MapTest);
 
-        expect(container.querySelector('pre').textContent).toBe('0');
+		expect(container.querySelector('pre').textContent).toBe('0');
 
-        const addButton = container.querySelector('button');
-        addButton.click();
-        flushSync();
+		const addButton = container.querySelector('button');
+		addButton.click();
+		flushSync();
 
-        expect(container.querySelector('pre').textContent).toBe('1');
-    });
+		expect(container.querySelector('pre').textContent).toBe('1');
+	});
 
+	it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
+		component MapTest() {
+			let map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+			let value = track(() => map.get('b'));
 
-    it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
-        component MapTest() {
-            let map = #Map([['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>
+		}
 
-            <button onClick={() => map.set('b', 10)}>{'update'}</button>
-            <pre>{map.size}</pre>
-            <pre>{@value}</pre>
-        }
+		render(MapTest);
 
-        render(MapTest);
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		const updateButton = container.querySelector('button');
+		updateButton.click();
+		flushSync();
 
-        const updateButton = container.querySelector('button');
-        updateButton.click();
-        flushSync();
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
+	});
 
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
-    });
+	it('handles all operations with #Map() shorthand syntax', () => {
+		component MapTest() {
+			let map = #Map([['x', 100], ['y', 200]]);
+			let keys = track(() => Array.from(map.keys()));
 
-    it('handles all operations with #Map() shorthand syntax', () => {
-        component MapTest() {
-            let map = #Map([['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>
 
-            <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>
+		}
 
-            <pre>{JSON.stringify(@keys)}</pre>
-            <pre>{map.size}</pre>
-        }
+		render(MapTest);
 
-        render(MapTest);
+		const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
 
-        const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		addButton.click();
+		flushSync();
 
-        addButton.click();
-        flushSync();
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y","z"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y","z"]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		deleteButton.click();
+		flushSync();
 
-        deleteButton.click();
-        flushSync();
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["y","z"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
 
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y","z"]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		clearButton.click();
+		flushSync();
 
-        clearButton.click();
-        flushSync();
-
-        expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
-        expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
-    });
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+	});
 });

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

@@ -3,43 +3,45 @@ import { flushSync, MediaQuery, track } from 'ripple';
 type Callback = (event: MediaQueryListEvent) => void;
 
 function setupMatchMedia() {
-  let listeners = new Set<Callback>();
-
-  // A mock implementation of matchMedia
-  const mockMatchMedia = vi.fn().mockImplementation(query => {
-    return {
-      media: query,
-      matches: false, // default value
-      addEventListener: (type: string, cb: Callback) => {
-        if (type === 'change') listeners.add(cb);
-      },
-      removeEventListener: (type: string, cb: Callback) => {
-        if (type === 'change') listeners.delete(cb);
-      },
-      /** @param {function(MediaQueryListEvent): void} cb */
-      addListener: (cb: Callback) => listeners.add(cb),
-      /** @param {function(MediaQueryListEvent): void} cb */
-      removeListener: (cb: Callback) => listeners.delete(cb),
-      dispatch: (event: MediaQueryListEvent) => {
-        listeners.forEach((cb) => cb(event));
-      },
+	let listeners = new Set<Callback>();
+
+	// A mock implementation of matchMedia
+	const mockMatchMedia = vi.fn().mockImplementation((query) => {
+		return {
+			media: query,
+			matches: false, // default value
+			addEventListener: (type: string, cb: Callback) => {
+				if (type === 'change') listeners.add(cb);
+			},
+			removeEventListener: (type: string, cb: Callback) => {
+				if (type === 'change') listeners.delete(cb);
+			},
+
+			/** @param {function(MediaQueryListEvent): void} cb */
+			addListener: (cb: Callback) => listeners.add(cb),
+
+			/** @param {function(MediaQueryListEvent): void} cb */
+			removeListener: (cb: Callback) => listeners.delete(cb),
+			dispatch: (event: MediaQueryListEvent) => {
+				listeners.forEach((cb) => cb(event));
+			},
 			listenersCount: () => listeners.size,
-    };
-  });
+		};
+	});
 
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: mockMatchMedia
-  });
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: mockMatchMedia,
+	});
 
-  return { mockMatchMedia, listeners };
+	return { mockMatchMedia, listeners };
 }
 
 describe('MediaQuery', () => {
 	let mm: ReturnType<typeof setupMatchMedia>;
 
 	beforeEach(() => {
-			mm = setupMatchMedia();
+		mm = setupMatchMedia();
 	});
 
 	it('should be reactive if matchMedia changes', () => {
@@ -62,7 +64,6 @@ describe('MediaQuery', () => {
 		const p = container.querySelector('p');
 		expect(p.textContent).toBe('false');
 
-
 		mm.mockMatchMedia.mock.results[0].value.matches = true;
 		mm.mockMatchMedia.mock.results[0].value.dispatch(event);
 		flushSync();
@@ -78,7 +79,6 @@ describe('MediaQuery', () => {
 		expect(p.textContent).toBe('false');
 	});
 
-
 	it('should have cleared event listeners after unmount', async () => {
 		const media = '(min-width: 600px)';
 
@@ -110,7 +110,7 @@ describe('MediaQuery', () => {
 		flushSync();
 
 		// wait for microtask queue to flush
-		await new Promise(resolve => setTimeout(resolve, 0));
+		await new Promise((resolve) => setTimeout(resolve, 0));
 
 		expect(mm.mockMatchMedia.mock.results[0].value.listenersCount()).toBe(0);
 	});