ripple 0.2.115 → 0.2.118

package/tests/client/object.test.ripple

@@ -1,29 +1,10 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedObject, track } from 'ripple';
+import { flushSync, TrackedObject } from 'ripple';
 import { TRACKED_OBJECT } from '../../src/runtime/internal/client/constants.js';
 
 describe('TrackedObject', () => {
-	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('makes new properties reactive', () => {
     component ObjectTest() {
-      const obj = new TrackedObject({});
+      const obj = new TrackedObject<{ a: number; }>({});
 
       obj.a = 0;
 
@@ -67,7 +48,7 @@ describe('TrackedObject', () => {
 
   it('checks if property exists via the has trap', () => {
     component ObjectTest() {
-      const obj = new TrackedObject({b: 1});
+      const obj = new TrackedObject<{ a: number; b: number; }>({b: 1});
 
       obj.a = 0;
 
@@ -83,7 +64,7 @@ describe('TrackedObject', () => {
 
   it('deletes properties via the delete trap', () => {
     component ObjectTest() {
-      const obj = new TrackedObject({a: 0, b: 1});
+      const obj = new TrackedObject<{ a?: number; b: number; }>({a: 0, b: 1});
 
       <pre>{String(obj.a)}</pre>
       <button onClick={() => { delete obj.a; }}>{'Delete A'}</button>
@@ -104,7 +85,7 @@ describe('TrackedObject', () => {
 
   it('checks if non-existent property is reactive when added later', () => {
     component ObjectTest() {
-      const obj = new TrackedObject({});
+      const obj = new TrackedObject<{ a?: number; }>({});
 
       <pre>{String(obj.a)}  </pre>
       <button onClick={() => { obj.a = 1; }}>{'Add A'}</button>

package/tests/client/portal.test.ripple

@@ -1,24 +1,7 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, Portal, track, flushSync } from 'ripple';
+import { Portal, track, flushSync } from 'ripple';
 
 describe('Portal', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container,
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
 	afterEach(() => {
-		// Remove container
-		document.body.removeChild(container);
-
 		// Clean up any leftover portal content from document.body
 		const portals = document.body.querySelectorAll('.test-portal');
 		portals.forEach(el => el.remove());
@@ -164,4 +147,4 @@ describe('Portal', () => {
 
 		expect(portalElement.textContent).toContain('Count: 1');
 	});
-});
+});

package/tests/client/ref.test.ripple

@@ -1,50 +1,32 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedArray, track, createRefKey } from 'ripple';
+import { describe, it, expect } from 'vitest';
+import { flushSync, TrackedArray, track, createRefKey } from 'ripple';
 
 describe('refs', () => {
-	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('capture a <div>', () => {
-		let div;
+		let div: HTMLDivElement | undefined;
 
 		component Component() {
-			<div {ref (node) => { div = node; }}>{'Hello World'}</div>
+			<div {ref (node: HTMLDivElement) => { div = node; }}>{'Hello World'}</div>
 		}
 		render(Component);
 		flushSync();
-		expect(div.textContent).toBe('Hello World');
+		expect(div?.textContent).toBe('Hello World');
 	});
 
 	it('works with spreading from composite component', () => {
-		let _node;
+		let _node: Child | undefined;
 
 		component Component() {
 			let items = TrackedArray.from([1, 2, 3]);
 
-			function componentRef(node) {
+			function componentRef(node: Child) {
 				_node = node;
 			}
 
 			<Child {ref componentRef} {items} />
 		}
 
-		component Child(props) {
+		component Child(props: { items: TrackedArray<number> }) {
 			const { items, ...rest } = props;
 			<pre {...rest}>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>

package/tests/client/set.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedSet, track } from 'ripple';
+import { flushSync, TrackedSet, track } from 'ripple';
 
 describe('TrackedSet', () => {
-  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 add and delete operations', () => {
     component SetTest() {
       let items = new TrackedSet([1, 2, 3]);
@@ -29,7 +10,7 @@ describe('TrackedSet', () => {
       <Child items={items} />
     }
 
-    component Child({ items }) {
+    component Child({ items }: { items: TrackedSet<number> }) {
       <pre>{JSON.stringify(items)}</pre>
       <pre>{items.size}</pre>
     }
@@ -60,7 +41,7 @@ describe('TrackedSet', () => {
       <Child items={items} />
     }
 
-    component Child({ items }) {
+    component Child({ items }: { items: TrackedSet<number> }) {
       <pre>{JSON.stringify(items)}</pre>
       <pre>{items.size}</pre>
     }
@@ -96,4 +77,85 @@ describe('TrackedSet', () => {
 
     expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
   });
+
+  it('creates empty TrackedSet using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set();
+
+      <button onClick={() => items.add(1)}>{'add'}</button>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelector('pre').textContent).toBe('0');
+
+    const addButton = container.querySelector('button');
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelector('pre').textContent).toBe('1');
+  });
+
+  it('creates TrackedSet with initial values using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([1, 2, 3, 4]);
+      let hasValue = track(() => items.has(3));
+
+      <button onClick={() => items.delete(3)}>{'delete'}</button>
+      <pre>{items.size}</pre>
+      <pre>{@hasValue}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+
+    const deleteButton = container.querySelector('button');
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+  });
+
+  it('handles all operations with #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([10, 20, 30]);
+      let values = track(() => Array.from(items.values()));
+
+      <button onClick={() => items.add(40)}>{'add'}</button>
+      <button onClick={() => items.delete(20)}>{'delete'}</button>
+      <button onClick={() => items.clear()}>{'clear'}</button>
+
+      <pre>{JSON.stringify(@values)}</pre>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    clearButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+  });
 });

package/tests/client/svg.test.ripple

@@ -1,25 +1,4 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync } from 'ripple';
-
 describe('SVG namespace handling', () => {
-	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 render static SVG elements with correct namespace', () => {
 		component App() {
 			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
@@ -143,7 +122,7 @@ describe('SVG namespace handling', () => {
 		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		expect(rects.length).toBe(2);
-		
+
 		rects.forEach(rect => {
 			expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		});

package/tests/client/switch.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('switch 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('renders simple switch with literal cases', () => {
 		component App() {
 			let value = track('b');
@@ -115,19 +96,19 @@ describe('switch statements', () => {
 
 			switch (@status) {
 				case 'active':
-					message = 'Currently active.';
+					@message = 'Currently active.';
 					<div>{'Status: ' + @message}</div>
 					break;
 				case 'pending':
-					message = 'Waiting for completion.';
+					@message = 'Waiting for completion.';
 					<div>{'Status: ' + @message}</div>
 					break;
 				case 'completed':
-					message = 'Task finished!';
+					@message = 'Task finished!';
 					<div class="success">{'Status: ' + @message}</div>
 					break;
 				default:
-					message = 'An error occurred.';
+					@message = 'An error occurred.';
 					<div class="error">{'Status: ' + @message}</div>
 			}
 		}
@@ -149,4 +130,4 @@ describe('switch statements', () => {
 		expect(container.textContent).toBe('PendingCompletedErrorStatus: An error occurred.');
 		expect(container.querySelector('.error')).toBeTruthy();
 	});
-});
+});

package/tests/client/tracked-expression.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedSet, track } from 'ripple';
+import { track } from 'ripple';
 
 describe('TrackedExpression tests', () => {
-	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 handle the syntax correctly', () => {
 		component App() {
       let count = track(0);
@@ -43,4 +24,4 @@ describe('TrackedExpression tests', () => {
     render(App);
     expect(container).toMatchSnapshot();
 	});
-});
+});

package/tests/client/typescript-generics.test.ripple

@@ -1,25 +1,4 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount } from 'ripple';
-
 describe('generic patterns', () => {
-	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('tests simple generic function', () => {
 		component App() {
 			const e = new Map<string, Promise<number>>();

package/tests/client/url/url.derived.test.ripple

@@ -0,0 +1,83 @@
+import { track, flushSync, TrackedURL } from 'ripple';
+
+describe('TrackedURL > derived', () => {
+	it('handles reactive computed properties based on URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/users/123?tab=profile');
+			let userId = track(() => url.pathname.split('/').pop());
+			let activeTab = track(() => url.searchParams.get('tab'));
+
+			<button onClick={() => url.pathname = '/users/456'}>{'Change User'}</button>
+			<button onClick={() => url.searchParams.set('tab', 'settings')}>{'Change Tab'}</button>
+			<pre>{`User ID: ${@userId}`}</pre>
+			<pre>{`Active Tab: ${@activeTab}`}</pre>
+		}
+
+		render(URLTest);
+
+		const changeUserBtn = container.querySelectorAll('button')[0];
+		const changeTabBtn = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 123');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: profile');
+
+		// Change user
+		changeUserBtn.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 456');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: profile');
+
+		// Change tab
+		changeTabBtn.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 456');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: settings');
+	});
+
+	it('maintains reactivity across multiple components', () => {
+		component ParentTest() {
+			const url = new TrackedURL('https://example.com/path?count=0');
+
+			<ChildA url={url} />
+			<ChildB url={url} />
+		}
+
+		component ChildA({ url }: { url: TrackedURL }) {
+			<button onClick={() => {
+				const current = parseInt(url.searchParams.get('count') || '0', 10);
+				url.searchParams.set('count', String(current + 1));
+			}}>{'Increment Count'}</button>
+		}
+
+		component ChildB({ url }: { url: TrackedURL }) {
+			let count = track(() => url.searchParams.get('count'));
+
+			<pre>{url.href}</pre>
+			<pre>{@count}</pre>
+		}
+
+		render(ParentTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=0');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Increment from child
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=2');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+});

package/tests/client/url/url.parsing.test.ripple

@@ -0,0 +1,165 @@
+import { flushSync, TrackedURL } from 'ripple';
+
+describe('TrackedURL > parsing', () => {
+	it('creates URL from string with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path?foo=bar#section');
+
+			<pre>{url.href}</pre>
+			<pre>{url.protocol}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+			<pre>{url.pathname}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.hash}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path?foo=bar#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('8080');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('/path');
+		expect(container.querySelectorAll('pre')[5].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[6].textContent).toBe('#section');
+	});
+
+	it('creates URL from string with base URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('/path?query=value', 'https://example.com');
+
+			<pre>{url.href}</pre>
+			<pre>{url.origin}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?query=value');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com');
+	});
+
+	it('handles URL encoding correctly', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path with spaces?key=value with spaces');
+
+			<pre>{url.pathname}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/path%20with%20spaces');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?key=value%20with%20spaces');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('https://example.com/path%20with%20spaces?key=value%20with%20spaces');
+	});
+
+	it('handles URL with file protocol', () => {
+		component URLTest() {
+			const url = new TrackedURL('file:///Users/username/documents/file.txt');
+
+			<pre>{url.protocol}</pre>
+			<pre>{url.pathname}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('file:');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/Users/username/documents/file.txt');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('file:///Users/username/documents/file.txt');
+	});
+
+	it('handles URL with IPv4 address', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://192.168.1.1:8080/path');
+
+			<button onClick={() => url.hostname = '10.0.0.1'}>{'Change IP'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hostname}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://192.168.1.1:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('192.168.1.1');
+
+		// Change IP
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://10.0.0.1:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('10.0.0.1');
+	});
+
+	it('handles URL with localhost', () => {
+		component URLTest() {
+			const url = new TrackedURL('http://localhost:3000/api/data');
+
+			<button onClick={() => url.port = '8080'}>{'Change Port'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('http://localhost:3000/api/data');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('localhost');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3000');
+
+		// Change port
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('http://localhost:8080/api/data');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('localhost');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('8080');
+	});
+
+	it('handles URL with multiple path segments', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/api/v1/users/123/profile');
+
+			<button onClick={() => url.pathname = '/api/v2/users/456/settings'}>{'Change Path'}</button>
+			<pre>{url.pathname}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/api/v1/users/123/profile');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/api/v1/users/123/profile');
+
+		// Change path
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/api/v2/users/456/settings');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/api/v2/users/456/settings');
+	});
+
+	it('handles relative URL paths correctly', () => {
+		component URLTest() {
+			const url = new TrackedURL('../sibling/path', 'https://example.com/parent/current');
+
+			<pre>{url.href}</pre>
+			<pre>{url.pathname}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/sibling/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/sibling/path');
+	});
+});