ripple 0.2.115 → 0.2.118

package/tests/client/computed-properties.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, TrackedArray, TrackedMap, effect } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('computed tracked properties', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
   it('should update a property using assignment', () => {
     component App() {
       let obj = {
@@ -61,4 +42,4 @@ describe('computed tracked properties', () => {
 
     expect(container).toMatchSnapshot();
   });
-});
+});

package/tests/client/context.test.ripple

@@ -1,26 +1,9 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, Context, flushSync, track } from 'ripple';
+import { describe, it, expect } from 'vitest';
+import { Context, flushSync } from 'ripple';
 
 describe('context', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-	});
-
 	it('creates a reactive ref with initial value', () => {
-		const MyContext = new Context(null);
+		const MyContext = new Context<string | null>(null);
 
 		component Child() {
 			const value = MyContext.get();
@@ -43,10 +26,10 @@ describe('context', () => {
 
 	it('handles context captured inside a computed tracked', () => {
 
-		const MyContext = new Context(null)
+		const MyContext = new Context<number | null>(null)
 
 		const doubleContext = () => {
-			const value = MyContext.get()
+			const value = MyContext.get() as number
 			return value * 2
 		}
 

package/tests/client/date.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedDate, track } from 'ripple';
+import { flushSync, TrackedDate, track } from 'ripple';
 
 describe('TrackedDate', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container,
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
 	it('handles getTime() with reactive updates', () => {
 		component DateTest() {
 			let date = new TrackedDate(2025, 0, 1);

package/tests/client/dynamic-elements.test.ripple

@@ -1,23 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, createRefKey } from 'ripple';
+import { flushSync, track, createRefKey } from 'ripple';
 
 describe('dynamic DOM elements', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container,
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
 	it('renders static dynamic element', () => {
 		component App() {
 			let tag = track('div');
@@ -30,6 +13,7 @@ describe('dynamic DOM elements', () => {
 		expect(element).toBeTruthy();
 		expect(element.textContent).toBe('Hello World');
 	});
+
 	it('renders reactive dynamic element', () => {
 		component App() {
 			let tag = track('div');
@@ -53,6 +37,7 @@ describe('dynamic DOM elements', () => {
 		expect(dynamicElement.tagName).toBe('SPAN');
 		expect(dynamicElement.textContent).toBe('Hello World');
 	});
+
 	it('renders self-closing dynamic element', () => {
 		component App() {
 			let tag = track('input');
@@ -61,11 +46,12 @@ describe('dynamic DOM elements', () => {
 		}
 		render(App);
 
-		const element = container.querySelector('input');
+		const element = container.querySelector('input') as HTMLInputElement;
 		expect(element).toBeTruthy();
 		expect(element.type).toBe('text');
 		expect(element.value).toBe('test');
 	});
+
 	it('handles dynamic element with attributes', () => {
 		component App() {
 			let tag = track('div');
@@ -81,6 +67,7 @@ describe('dynamic DOM elements', () => {
 		expect(element.getAttribute('data-testid')).toBe('dynamic-element');
 		expect(element.textContent).toBe('Content');
 	});
+
 	it('handles nested dynamic elements', () => {
 		component App() {
 			let outerTag = track('div');
@@ -100,6 +87,7 @@ describe('dynamic DOM elements', () => {
 		expect(inner.textContent).toBe('Nested content');
 		expect(outer.contains(inner)).toBe(true);
 	});
+
 	it('handles dynamic element with class object', () => {
 		component App() {
 			let tag = track('div');
@@ -116,12 +104,13 @@ describe('dynamic DOM elements', () => {
 		expect(element.classList.contains('active')).toBe(true);
 		expect(element.classList.contains('dynamic-element')).toBe(true);
 	});
+
 	it('handles dynamic element with style object', () => {
 		component App() {
 			let tag = track('span');
 
-			<@tag style={{ 
-				color: 'red', 
+			<@tag style={{
+				color: 'red',
 				fontSize: '16px',
 				fontWeight: 'bold'
 			}}>
@@ -136,6 +125,7 @@ describe('dynamic DOM elements', () => {
 		expect(element.style.fontSize).toBe('16px');
 		expect(element.style.fontWeight).toBe('bold');
 	});
+
 	it('handles dynamic element with spread attributes', () => {
 		component App() {
 			let tag = track('section');
@@ -158,13 +148,14 @@ describe('dynamic DOM elements', () => {
 		expect(element.className).toBe('spread-class');
 		expect(element.getAttribute('data-extra')).toBe('additional');
 	});
+
 	it('handles dynamic element with ref', () => {
-		let capturedElement = null;
+		let capturedElement: HTMLArticleElement | undefined;
 
 		component App() {
 			let tag = track('article');
 
-			<@tag {ref (node) => { capturedElement = node; }} id="ref-test">
+			<@tag {ref (node: HTMLArticleElement) => { capturedElement = node; }} id="ref-test">
 				{'Element with ref'}
 			</@tag>
 		}
@@ -175,11 +166,12 @@ describe('dynamic DOM elements', () => {
 		expect(capturedElement.id).toBe('ref-test');
 		expect(capturedElement.textContent).toBe('Element with ref');
 	});
+
 	it('handles dynamic element with createRefKey in spread', () => {
 		component App() {
 			let tag = track('header');
 
-			function elementRef(node) {
+			function elementRef(node: HTMLHeaderElement) {
 				// Set an attribute on the element to prove ref was called
 				node.setAttribute('data-spread-ref-called', 'true');
 				node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());

package/tests/client/for.test.ripple

@@ -1,26 +1,7 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedArray, track } from 'ripple';
+import { flushSync, TrackedArray, track } from 'ripple';
 
 describe('for statements', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
-	it('render a simple static array', () => {
+	it('renders a simple static array', () => {
 		component App() {
 			const items = ['Item 1', 'Item 2', 'Item 3'];
 
@@ -34,7 +15,7 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('render a simple dynamic array', () => {
+	it('renders a simple dynamic array', () => {
 		component App() {
 			const items = new TrackedArray('Item 1', 'Item 2', 'Item 3');
 
@@ -76,7 +57,7 @@ describe('for statements', () => {
 		render(App);
 
 		expect(container).toMatchSnapshot();
-		
+
 		const button = container.querySelector('button');
 
 		button.click();

package/tests/client/head.test.ripple

@@ -1,26 +1,14 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('head elements', () => {
-	let container;
-	let originalTitle;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
+	let originalTitle: string;
 
 	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
 		// Store original title to restore later
 		originalTitle = document.title;
 	});
 
 	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
 		// Restore original title
 		document.title = originalTitle;
 	});
@@ -34,7 +22,7 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('Static Test Title');
 		expect(container.querySelector('div').textContent).toBe('Content');
 	});
@@ -53,7 +41,7 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('Initial Title');
 		expect(container.querySelector('span').textContent).toBe('Initial Title');
 
@@ -78,7 +66,7 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('Hello World!');
 
 		const button = container.querySelector('button');
@@ -103,7 +91,7 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('Count: 0');
 
 		const button = container.querySelector('button');
@@ -127,11 +115,11 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('Step 1 of 3');
 
 		const button = container.querySelector('button');
-		
+
 		button.click();
 		flushSync();
 		expect(document.title).toBe('Step 2 of 3');
@@ -154,7 +142,7 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('');
 	});
 
@@ -173,11 +161,11 @@ describe('head elements', () => {
 		}
 
 		render(App);
-		
+
 		expect(document.title).toBe('App - Main Page');
 
 		const buttons = container.querySelectorAll('button');
-		
+
 		// Toggle prefix off
 		buttons[0].click();
 		flushSync();

package/tests/client/html.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('html directive', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
   it('renders static html', () => {
     component App() {
       let str = '<div>Test</div>';

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

@@ -1,28 +1,8 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, effect } from 'ripple';
-import { bindValue, bindChecked } from 'ripple';
+import { flushSync, track, effect, bindValue, bindChecked } from 'ripple';
 
 describe('use value()', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container,
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
 	it('should update value on input', () => {
-		const logs = [];
+		const logs: string[] = [];
 
 		component App() {
 			const text = track('');
@@ -36,7 +16,7 @@ describe('use value()', () => {
 		render(App);
 		flushSync();
 
-		const input = container.querySelector('input');
+		const input = container.querySelector('input') as HTMLInputElement;
 		input.value = 'Hello';
 		input.dispatchEvent(new Event('input'));
 		flushSync();
@@ -45,7 +25,7 @@ describe('use value()', () => {
 	});
 
 		it('should update value on input with a predefined value', () => {
-		const logs = [];
+		const logs: string[] = [];
 
 		component App() {
 			const text = track('foo');
@@ -59,8 +39,8 @@ describe('use value()', () => {
 		render(App);
 		flushSync();
 
-		expect(container.querySelector('input').value).toBe('foo');
-		const input = container.querySelector('input');
+		const input = container.querySelector('input') as HTMLInputElement;
+		expect(input.value).toBe('foo');
 		input.value = 'Hello';
 		input.dispatchEvent(new Event('input'));
 		flushSync();
@@ -69,7 +49,7 @@ describe('use value()', () => {
 	});
 
 	it('should update checked on input', () => {
-		const logs = [];
+		const logs: string[] = [];
 
 		component App() {
 			const value = track(false);
@@ -83,17 +63,17 @@ describe('use value()', () => {
 		render(App);
 		flushSync();
 
-		const input = container.querySelector('input');
+		const input = container.querySelector('input') as HTMLInputElement;
 		input.checked = true;
 		input.dispatchEvent(new Event('change'));
 		flushSync();
-		
+
 		expect(input.checked).toBe(true);
 		expect(logs).toEqual(['checked changed', false, 'checked changed', true]);
 	});
 
 	it('should update select value on change', () => {
-		const logs = [];
+		const logs: string[] = [];
 
 		component App() {
 			const select = track('2');
@@ -112,7 +92,7 @@ describe('use value()', () => {
 		render(App);
 		flushSync();
 
-		const select = container.querySelector('select');
+		const select = container.querySelector('select') as HTMLSelectElement;
 		select.value = '3';
 		select.dispatchEvent(new Event('change'));
 		flushSync();

package/tests/client/map.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedMap, track } from 'ripple';
+import { flushSync, TrackedMap, track } from 'ripple';
 
 describe('TrackedMap', () => {
-    let container;
-
-    function render(component) {
-        mount(component, {
-            target: container
-        });
-    }
-
-    beforeEach(() => {
-        container = document.createElement('div');
-        document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-        document.body.removeChild(container);
-        container = null;
-    });
-
     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]]);
@@ -138,4 +119,85 @@ describe('TrackedMap', () => {
 
         expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
     });
+
+    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>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelector('pre').textContent).toBe('0');
+
+        const addButton = container.querySelector('button');
+        addButton.click();
+        flushSync();
+
+        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'));
+
+            <button onClick={() => map.set('b', 10)}>{'update'}</button>
+            <pre>{map.size}</pre>
+            <pre>{@value}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        const updateButton = container.querySelector('button');
+        updateButton.click();
+        flushSync();
+
+        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()));
+
+            <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);
+
+        const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        addButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        clearButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+    });
 });

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

@@ -1,25 +1,26 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { mount, flushSync, MediaQuery, track } from 'ripple';
+import { flushSync, MediaQuery, track } from 'ripple';
+
+type Callback = (event: MediaQueryListEvent) => void;
 
 function setupMatchMedia() {
-  let listeners = new Set();
+  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, cb) => {
+      addEventListener: (type: string, cb: Callback) => {
         if (type === 'change') listeners.add(cb);
       },
-      removeEventListener: (type, cb) => {
+      removeEventListener: (type: string, cb: Callback) => {
         if (type === 'change') listeners.delete(cb);
       },
       /** @param {function(MediaQueryListEvent): void} cb */
-      addListener: (cb) => listeners.add(cb),
+      addListener: (cb: Callback) => listeners.add(cb),
       /** @param {function(MediaQueryListEvent): void} cb */
-      removeListener: (cb) => listeners.delete(cb),
-      dispatch: (event) => {
+      removeListener: (cb: Callback) => listeners.delete(cb),
+      dispatch: (event: MediaQueryListEvent) => {
         listeners.forEach((cb) => cb(event));
       },
 			listenersCount: () => listeners.size,
@@ -35,24 +36,10 @@ function setupMatchMedia() {
 }
 
 describe('MediaQuery', () => {
-	let container;
-	let mm;
-
-	function render(component) {
-			mount(component, {
-					target: container
-			});
-	}
+	let mm: ReturnType<typeof setupMatchMedia>;
 
 	beforeEach(() => {
 			mm = setupMatchMedia();
-			container = document.createElement('div');
-			document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-			document.body.removeChild(container);
-			container = null;
 	});
 
 	it('should be reactive if matchMedia changes', () => {