ripple 0.2.152 → 0.2.154

package/tests/client/set.test.ripple

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

@@ -3,25 +3,24 @@ import { track } from 'ripple';
 describe('TrackedExpression tests', () => {
 	it('should handle the syntax correctly', () => {
 		component App() {
-      let count = track(0);
+			let count = track(0);
 
-      function get_count() {
-        return count;
-      }
+			function get_count() {
+				return count;
+			}
 
+			<div>{@(count)}</div>
+			<div>{@(get_count())}</div>
+			<div>{++@(count)}</div>
+			<div>{++@(get_count())}</div>
+			<div>{@(count)++}</div>
+			<div>{@(get_count())++}</div>
+			<div>{@(count)}</div>
+			<div>{!@(count)}</div>
+			<div>{!!@(count)}</div>
+		}
 
-      <div>{@(count)}</div>
-      <div>{@(get_count())}</div>
-      <div>{++@(count)}</div>
-      <div>{++@(get_count())}</div>
-      <div>{@(count)++}</div>
-      <div>{@(get_count())++}</div>
-      <div>{@(count)}</div>
-      <div>{!@(count)}</div>
-      <div>{!!@(count)}</div>
-    }
-
-    render(App);
-    expect(container).toMatchSnapshot();
+		render(App);
+		expect(container).toMatchSnapshot();
 	});
 });

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

@@ -41,15 +41,19 @@ describe('TrackedURL > derived', () => {
 		component ParentTest() {
 			const url = new TrackedURL('https://example.com/path?count=0');
 
-			<ChildA url={url} />
-			<ChildB url={url} />
+			<ChildA {url} />
+			<ChildB {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>
+			<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 }) {
@@ -64,20 +68,26 @@ describe('TrackedURL > derived', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=0');
+		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')[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')[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

@@ -16,7 +16,9 @@ describe('TrackedURL > parsing', () => {
 
 		render(URLTest);
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path?foo=bar#section');
+		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');
@@ -35,7 +37,9 @@ describe('TrackedURL > parsing', () => {
 
 		render(URLTest);
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?query=value');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'https://example.com/path?query=value',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com');
 	});
 
@@ -52,7 +56,9 @@ describe('TrackedURL > parsing', () => {
 
 		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');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe(
+			'https://example.com/path%20with%20spaces?key=value%20with%20spaces',
+		);
 	});
 
 	it('handles URL with file protocol', () => {
@@ -67,8 +73,12 @@ describe('TrackedURL > parsing', () => {
 		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');
+		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', () => {
@@ -139,14 +149,18 @@ describe('TrackedURL > parsing', () => {
 
 		// 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');
+		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');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe(
+			'https://example.com/api/v2/users/456/settings',
+		);
 	});
 
 	it('handles relative URL paths correctly', () => {
@@ -159,7 +173,9 @@ describe('TrackedURL > parsing', () => {
 
 		render(URLTest);
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/sibling/path');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'https://example.com/sibling/path',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('/sibling/path');
 	});
 });

package/tests/client/url/url.partial-removal.test.ripple

@@ -112,7 +112,9 @@ describe('TrackedURL > partials/removal', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path#section');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'https://example.com/path#section',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('#section');
 
 		// Remove hash
@@ -138,7 +140,9 @@ describe('TrackedURL > partials/removal', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'https://example.com/path?foo=bar',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=bar');
 		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
 
@@ -172,7 +176,9 @@ describe('TrackedURL > partials/removal', () => {
 		flushSync();
 
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('#section');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/path#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe(
+			'https://example.com/path#section',
+		);
 	});
 
 	it('handles search without leading ? character', () => {
@@ -193,6 +199,8 @@ describe('TrackedURL > partials/removal', () => {
 		flushSync();
 
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe(
+			'https://example.com/path?foo=bar',
+		);
 	});
 });