ripple 0.3.3 → 0.3.4

package/tests/client/switch.test.ripple

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
 		component App() {
-			let value = #ripple.track('b');
+			let value = track('b');
 
 			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
 			<button onClick={() => (@value = 'a')}>{'Change to A'}</button>
@@ -38,7 +38,7 @@ describe('switch statements', () => {
 
 	it('renders switch with reactive discriminant', () => {
 		component App() {
-			let count = #ripple.track(1);
+			let count = track(1);
 
 			<button onClick={() => @count++}>{'Increment'}</button>
 
@@ -70,7 +70,7 @@ describe('switch statements', () => {
 
 	it('renders switch with default clause only', () => {
 		component App() {
-			let value = #ripple.track('x');
+			let value = track('x');
 
 			<button onClick={() => (@value = 'y')}>{'Change Value'}</button>
 
@@ -91,7 +91,7 @@ describe('switch statements', () => {
 
 	it('renders switch using empty case fall-through', () => {
 		component App() {
-			let value = #ripple.track('a');
+			let value = track('a');
 
 			<button onClick={() => (@value = 'b')}>{'Change to B'}</button>
 			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
@@ -133,8 +133,8 @@ describe('switch statements', () => {
 
 	it('renders switch with template content and reacts to tracked changes', () => {
 		component App() {
-			let status = #ripple.track('active');
-			let message = #ripple.track('');
+			let status = track('active');
+			let message = track('');
 
 			<button onClick={() => (@status = 'pending')}>{'Pending'}</button>
 			<button onClick={() => (@status = 'completed')}>{'Completed'}</button>
@@ -185,7 +185,7 @@ describe('switch statements', () => {
 		'renders switch with multiple non-empty fall-through cases and reacts to tracked changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let status = #ripple.track(0);
+				let status = track(0);
 				<div>
 					switch (@status) {
 						case -1:
@@ -253,7 +253,7 @@ describe('switch statements', () => {
 		'renders a fall-through default in the middle of switch cases and reacts to changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let value = #ripple.track('x');
+				let value = track('x');
 
 				<button onClick={() => (@value = 'a')}>{'Set A'}</button>
 				<button onClick={() => (@value = 'b')}>{'Set B'}</button>
@@ -359,7 +359,7 @@ describe('switch statements', () => {
 
 	it('renders switch with block-scoped cases and break inside blocks', () => {
 		component App() {
-			let level = #ripple.track(1);
+			let level = track(1);
 
 			<button
 				onClick={() => {

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

@@ -1,7 +1,9 @@
+import { track } from 'ripple';
+
 describe('TrackedExpression tests', () => {
 	it('should handle the syntax correctly', () => {
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			function get_count() {
 				return count;

package/tests/client/try.test.ripple

@@ -1,4 +1,4 @@
-import { bindValue, flushSync, RippleArray } from 'ripple';
+import { RippleArray, bindValue, flushSync, track } from 'ripple';
 
 describe('try block with catch and pending', () => {
 	it('catch block works when component throws before await with pending block', async () => {
@@ -88,7 +88,7 @@ describe('try block', () => {
 			}
 
 			component Child() {
-				let value = #ripple.track(1);
+				let value = track(1);
 				await Promise.resolve(@value + 1);
 
 				<input type="number" {ref bindValue(value)} />
@@ -140,7 +140,7 @@ describe('try block', () => {
 		'does not crash when async component with tracked state is used inside try/pending',
 		async () => {
 			component App() {
-				let query = #ripple.track('');
+				let query = track('');
 
 				try {
 					<FilteredList {query} />
@@ -152,7 +152,7 @@ describe('try block', () => {
 			component FilteredList({ query }: { query: any }) {
 				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
 				let list = RippleArray.from(items);
-				let filtered = #ripple.track(() => list.filter((item: string) => item.includes(@query)));
+				let filtered = track(() => list.filter((item: string) => item.includes(@query)));
 
 				<ul>
 					for (let item of @filtered) {

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

@@ -1,12 +1,11 @@
-import type { RippleURL } from 'ripple';
-import { flushSync } from 'ripple';
+import { RippleURL, flushSync, track } from 'ripple';
 
 describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/users/123?tab=profile');
-			let userId = #ripple.track(() => url.pathname.split('/').pop());
-			let activeTab = #ripple.track(() => url.searchParams.get('tab'));
+			const url = RippleURL('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>
@@ -40,7 +39,7 @@ describe('RippleURL > derived', () => {
 
 	it('maintains reactivity across multiple components', () => {
 		component ParentTest() {
-			const url = #ripple.url('https://example.com/path?count=0');
+			const url = RippleURL('https://example.com/path?count=0');
 
 			<ChildA {url} />
 			<ChildB {url} />
@@ -58,7 +57,7 @@ describe('RippleURL > derived', () => {
 		}
 
 		component ChildB({ url }: { url: RippleURL }) {
-			let count = #ripple.track(() => url.searchParams.get('count'));
+			let count = track(() => url.searchParams.get('count'));
 
 			<pre>{url.href}</pre>
 			<pre>{@count}</pre>

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

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > parsing', () => {
 	it('creates URL from string with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com:8080/path?foo=bar#section');
+			const url = RippleURL('https://example.com:8080/path?foo=bar#section');
 
 			<pre>{url.href}</pre>
 			<pre>{url.protocol}</pre>
@@ -29,7 +29,7 @@ describe('RippleURL > parsing', () => {
 
 	it('creates URL from string with base URL', () => {
 		component URLTest() {
-			const url = #ripple.url('/path?query=value', 'https://example.com');
+			const url = RippleURL('/path?query=value', 'https://example.com');
 
 			<pre>{url.href}</pre>
 			<pre>{url.origin}</pre>
@@ -45,7 +45,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles URL encoding correctly', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path with spaces?key=value with spaces');
+			const url = RippleURL('https://example.com/path with spaces?key=value with spaces');
 
 			<pre>{url.pathname}</pre>
 			<pre>{url.search}</pre>
@@ -63,7 +63,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles URL with file protocol', () => {
 		component URLTest() {
-			const url = #ripple.url('file:///Users/username/documents/file.txt');
+			const url = RippleURL('file:///Users/username/documents/file.txt');
 
 			<pre>{url.protocol}</pre>
 			<pre>{url.pathname}</pre>
@@ -83,7 +83,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles URL with IPv4 address', () => {
 		component URLTest() {
-			const url = #ripple.url('https://192.168.1.1:8080/path');
+			const url = RippleURL('https://192.168.1.1:8080/path');
 
 			<button onClick={() => (url.hostname = '10.0.0.1')}>{'Change IP'}</button>
 			<pre>{url.href}</pre>
@@ -108,7 +108,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles URL with localhost', () => {
 		component URLTest() {
-			const url = #ripple.url('http://localhost:3000/api/data');
+			const url = RippleURL('http://localhost:3000/api/data');
 
 			<button onClick={() => (url.port = '8080')}>{'Change Port'}</button>
 			<pre>{url.href}</pre>
@@ -136,7 +136,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles URL with multiple path segments', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/api/v1/users/123/profile');
+			const url = RippleURL('https://example.com/api/v1/users/123/profile');
 
 			<button onClick={() => (url.pathname = '/api/v2/users/456/settings')}>{'Change Path'}</button>
 			<pre>{url.pathname}</pre>
@@ -165,7 +165,7 @@ describe('RippleURL > parsing', () => {
 
 	it('handles relative URL paths correctly', () => {
 		component URLTest() {
-			const url = #ripple.url('../sibling/path', 'https://example.com/parent/current');
+			const url = RippleURL('../sibling/path', 'https://example.com/parent/current');
 
 			<pre>{url.href}</pre>
 			<pre>{url.pathname}</pre>

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

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > partials/removal', () => {
 	it('handles URL with no port specified', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<pre>{url.port}</pre>
 			<pre>{url.host}</pre>
@@ -28,7 +28,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles URL with no search params', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<pre>{url.search}</pre>
 			<pre>{url.searchParams.size}</pre>
@@ -53,7 +53,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles URL with no hash', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<pre>{url.hash}</pre>
 			<button onClick={() => (url.hash = '#section')}>{'Add Hash'}</button>
@@ -75,7 +75,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles removing port by setting empty string', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com:8080/path');
+			const url = RippleURL('https://example.com:8080/path');
 
 			<button onClick={() => (url.port = '')}>{'Remove Port'}</button>
 			<pre>{url.href}</pre>
@@ -100,7 +100,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles removing hash by setting empty string', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path#section');
+			const url = RippleURL('https://example.com/path#section');
 
 			<button onClick={() => (url.hash = '')}>{'Remove Hash'}</button>
 			<pre>{url.href}</pre>
@@ -127,7 +127,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles removing search by setting empty string', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar');
+			const url = RippleURL('https://example.com/path?foo=bar');
 
 			<button onClick={() => (url.search = '')}>{'Remove Search'}</button>
 			<pre>{url.href}</pre>
@@ -157,7 +157,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles hash without leading # character', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<button onClick={() => (url.hash = 'section')}>{'Set Hash'}</button>
 			<pre>{url.hash}</pre>
@@ -183,7 +183,7 @@ describe('RippleURL > partials/removal', () => {
 
 	it('handles search without leading ? character', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<button onClick={() => (url.search = 'foo=bar')}>{'Set Search'}</button>
 			<pre>{url.search}</pre>

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

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > reactivity', () => {
 	it('handles protocol changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
 			<pre>{url.href}</pre>
@@ -31,7 +31,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles hostname changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
 			<pre>{url.href}</pre>
@@ -59,7 +59,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles port changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com:8080/path');
+			const url = RippleURL('https://example.com:8080/path');
 
 			<button onClick={() => (url.port = '9090')}>{'Change Port'}</button>
 			<pre>{url.href}</pre>
@@ -87,7 +87,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles host changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com:8080/path');
+			const url = RippleURL('https://example.com:8080/path');
 
 			<button onClick={() => (url.host = 'newdomain.com:9090')}>{'Change Host'}</button>
 			<pre>{url.href}</pre>
@@ -120,7 +120,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles pathname changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/old-path');
+			const url = RippleURL('https://example.com/old-path');
 
 			<button onClick={() => (url.pathname = '/new-path')}>{'Change Pathname'}</button>
 			<pre>{url.href}</pre>
@@ -145,7 +145,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles search changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar');
+			const url = RippleURL('https://example.com/path?foo=bar');
 
 			<button onClick={() => (url.search = '?baz=qux')}>{'Change Search'}</button>
 			<pre>{url.href}</pre>
@@ -174,7 +174,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles hash changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path#section1');
+			const url = RippleURL('https://example.com/path#section1');
 
 			<button onClick={() => (url.hash = '#section2')}>{'Change Hash'}</button>
 			<pre>{url.href}</pre>
@@ -203,7 +203,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles username changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://user:pass@example.com/path');
+			const url = RippleURL('https://user:pass@example.com/path');
 
 			<button onClick={() => (url.username = 'newuser')}>{'Change Username'}</button>
 			<pre>{url.href}</pre>
@@ -232,7 +232,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles password changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://user:pass@example.com/path');
+			const url = RippleURL('https://user:pass@example.com/path');
 
 			<button onClick={() => (url.password = 'newpass')}>{'Change Password'}</button>
 			<pre>{url.href}</pre>
@@ -261,7 +261,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles href changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar#section');
+			const url = RippleURL('https://example.com/path?foo=bar#section');
 
 			<button onClick={() => (url.href = 'https://newdomain.com:9090/newpath?baz=qux#newsection')}>
 				{'Change Href'}
@@ -307,7 +307,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles origin property reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com:8080/path');
+			const url = RippleURL('https://example.com:8080/path');
 
 			<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
 			<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
@@ -339,7 +339,7 @@ describe('RippleURL > reactivity', () => {
 	});
 	it('handles searchParams changes with reactivity', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar');
+			const url = RippleURL('https://example.com/path?foo=bar');
 			const params = url.searchParams;
 
 			<button onClick={() => params.set('foo', 'updated')}>{'Update Foo'}</button>
@@ -383,7 +383,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles search property updates reflected in searchParams', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar');
+			const url = RippleURL('https://example.com/path?foo=bar');
 			const params = url.searchParams;
 
 			<button onClick={() => (url.search = '?baz=qux&test=value')}>{'Change Search'}</button>
@@ -418,7 +418,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles multiple URL property changes in sequence', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path');
+			const url = RippleURL('https://example.com/path');
 
 			<button
 				onClick={() => {
@@ -453,7 +453,7 @@ describe('RippleURL > reactivity', () => {
 
 	it('handles href change updates all properties and searchParams', () => {
 		component URLTest() {
-			const url = #ripple.url('https://old.com/old?foo=bar#old');
+			const url = RippleURL('https://old.com/old?foo=bar#old');
 			const params = url.searchParams;
 
 			<button onClick={() => (url.href = 'https://new.com:9090/new?baz=qux#new')}>

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

@@ -1,9 +1,9 @@
-import { flushSync } from 'ripple';
+import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > serialization', () => {
 	it('handles toString method', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar#section');
+			const url = RippleURL('https://example.com/path?foo=bar#section');
 
 			<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
 			<pre>{url.toString()}</pre>
@@ -29,7 +29,7 @@ describe('RippleURL > serialization', () => {
 
 	it('handles toJSON method', () => {
 		component URLTest() {
-			const url = #ripple.url('https://example.com/path?foo=bar');
+			const url = RippleURL('https://example.com/path?foo=bar');
 
 			<button onClick={() => (url.pathname = '/api')}>{'Change Pathname'}</button>
 			<pre>{url.toJSON()}</pre>

package/tests/client/url-search-params/url-search-params.derived.test.ripple

@@ -1,13 +1,12 @@
-import type { RippleURLSearchParams } from 'ripple';
-import { flushSync } from 'ripple';
+import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > derived', () => {
 	it('handles reactive computed properties based on search params', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('page=1&limit=10');
-			let page = #ripple.track(() => parseInt(params.get('page') || '1', 10));
-			let limit = #ripple.track(() => parseInt(params.get('limit') || '10', 10));
-			let offset = #ripple.track(() => (@page - 1) * @limit);
+			const params = RippleURLSearchParams('page=1&limit=10');
+			let page = track(() => parseInt(params.get('page') || '1', 10));
+			let limit = track(() => parseInt(params.get('limit') || '10', 10));
+			let offset = track(() => (@page - 1) * @limit);
 
 			<button onClick={() => params.set('page', '2')}>{'next page'}</button>
 			<button onClick={() => params.set('page', '1')}>{'first page'}</button>
@@ -45,7 +44,7 @@ describe('RippleURLSearchParams > derived', () => {
 
 	it('maintains reactivity across multiple components', () => {
 		component ParentTest() {
-			const params = #ripple.urlSearchParams('count=0');
+			const params = RippleURLSearchParams('count=0');
 
 			<ChildA {params} />
 			<ChildB {params} />
@@ -63,7 +62,7 @@ describe('RippleURLSearchParams > derived', () => {
 		}
 
 		component ChildB({ params }: { params: RippleURLSearchParams }) {
-			let count = #ripple.track(() => params.get('count'));
+			let count = track(() => params.get('count'));
 
 			<pre>{@count}</pre>
 		}

package/tests/client/url-search-params/url-search-params.initialization.test.ripple

@@ -1,7 +1,9 @@
+import { RippleURL, RippleURLSearchParams } from 'ripple';
+
 describe('RippleURLSearchParams > initialization', () => {
 	it('creates empty URLSearchParams with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams();
+			const params = RippleURLSearchParams();
 
 			<pre>{params.toString()}</pre>
 			<pre>{params.size}</pre>
@@ -15,7 +17,7 @@ describe('RippleURLSearchParams > initialization', () => {
 
 	it('creates URLSearchParams from string with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
 
 			<pre>{params.toString()}</pre>
 			<pre>{params.size}</pre>
@@ -31,7 +33,7 @@ describe('RippleURLSearchParams > initialization', () => {
 
 	it('creates URLSearchParams from object with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams({ foo: 'bar', baz: 'qux' });
+			const params = RippleURLSearchParams({ foo: 'bar', baz: 'qux' });
 
 			<pre>{params.toString()}</pre>
 			<pre>{params.size}</pre>
@@ -45,7 +47,7 @@ describe('RippleURLSearchParams > initialization', () => {
 
 	it('handles URL-encoded characters correctly', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('name=John+Doe&email=john%40example.com');
+			const params = RippleURLSearchParams('name=John+Doe&email=john%40example.com');
 
 			<pre>{params.get('name')}</pre>
 			<pre>{params.get('email')}</pre>

package/tests/client/url-search-params/url-search-params.iteration.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync } from 'ripple';
+import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
-			let keys = #ripple.track(() => Array.from(params.keys()));
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
+			let keys = track(() => Array.from(params.keys()));
 
 			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
 			<pre>{JSON.stringify(@keys)}</pre>
@@ -26,8 +26,8 @@ describe('RippleURLSearchParams > iteration', () => {
 
 	it('handles values method with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
-			let values = #ripple.track(() => Array.from(params.values()));
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
+			let values = track(() => Array.from(params.values()));
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
 			<pre>{JSON.stringify(@values)}</pre>
@@ -49,8 +49,8 @@ describe('RippleURLSearchParams > iteration', () => {
 
 	it('handles entries method with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
-			let entries = #ripple.track(() => Array.from(params.entries()));
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
+			let entries = track(() => Array.from(params.entries()));
 
 			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
 			<pre>{JSON.stringify(@entries)}</pre>
@@ -74,8 +74,8 @@ describe('RippleURLSearchParams > iteration', () => {
 
 	it('handles Symbol.iterator with reactivity', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
-			let entries = #ripple.track(() => Array.from(params));
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
+			let entries = track(() => Array.from(params));
 
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
 			<pre>{JSON.stringify(@entries)}</pre>
@@ -97,7 +97,7 @@ describe('RippleURLSearchParams > iteration', () => {
 
 	it('handles iteration with for...of', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('foo=bar&baz=qux');
+			const params = RippleURLSearchParams('foo=bar&baz=qux');
 
 			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
 
@@ -125,8 +125,8 @@ describe('RippleURLSearchParams > iteration', () => {
 
 	it('handles forEach iteration', () => {
 		component URLTest() {
-			const params = #ripple.urlSearchParams('a=1&b=2&c=3');
-			let sum = #ripple.track(() => {
+			const params = RippleURLSearchParams('a=1&b=2&c=3');
+			let sum = track(() => {
 				let total = 0;
 				// Access the params reactively through entries
 				for (const [key, value] of params.entries()) {