ripple 0.3.7 → 0.3.8

package/tests/client/set.test.ripple

@@ -60,10 +60,10 @@ describe('RippleSet', () => {
 	it('handles has operation', () => {
 		component SetTest() {
 			let items = new RippleSet([1, 2, 3]);
-			let hasValue = track(() => items.has(2));
+			let &[hasValue] = track(() => items.has(2));
 
 			<button onClick={() => items.delete(2)}>{'delete'}</button>
-			<pre>{@hasValue}</pre>
+			<pre>{hasValue}</pre>
 		}
 
 		render(SetTest);
@@ -100,11 +100,11 @@ describe('RippleSet', () => {
 	it('creates RippleSet with initial values using RippleSet() shorthand syntax', () => {
 		component SetTest() {
 			let items = RippleSet([1, 2, 3, 4]);
-			let hasValue = track(() => items.has(3));
+			let &[hasValue] = track(() => items.has(3));
 
 			<button onClick={() => items.delete(3)}>{'delete'}</button>
 			<pre>{items.size}</pre>
-			<pre>{@hasValue}</pre>
+			<pre>{hasValue}</pre>
 		}
 
 		render(SetTest);
@@ -123,13 +123,13 @@ describe('RippleSet', () => {
 	it('handles all operations with RippleSet() shorthand syntax', () => {
 		component SetTest() {
 			let items = RippleSet([10, 20, 30]);
-			let values = track(() => Array.from(items.values()));
+			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>{JSON.stringify(values)}</pre>
 			<pre>{items.size}</pre>
 		}
 

package/tests/client/svg.test.ripple

@@ -290,7 +290,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let dynTag = track('polygon');
+			let &[dynTag] = track('polygon');
 			<SVG>
 				<@dynTag points="0,0 30,0 15,10" />
 			</SVG>
@@ -317,7 +317,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let &[Component] = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>
@@ -334,19 +334,19 @@ describe('SVG namespace handling', () => {
 
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
-			const tag = track('svg');
+			let &[tag] = track('svg');
 			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
 				<children />
 			</@tag>
 		}
 
 		component Polygon({ points }: PropsWithExtras<{ points: string }>) {
-			let dynTag = track('polygon');
+			let &[dynTag] = track('polygon');
 			<@dynTag {points} />
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let &[Component] = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>

package/tests/client/switch.test.ripple

@@ -3,12 +3,12 @@ import { flushSync, track } from 'ripple';
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
 		component App() {
-			let value = track('b');
+			let &[value] = track('b');
 
-			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
-			<button onClick={() => (@value = 'a')}>{'Change to A'}</button>
+			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
+			<button onClick={() => (value = 'a')}>{'Change to A'}</button>
 
-			switch (@value) {
+			switch (value) {
 				case 'a':
 					<div>{'Case A'}</div>
 					break;
@@ -38,11 +38,11 @@ describe('switch statements', () => {
 
 	it('renders switch with reactive discriminant', () => {
 		component App() {
-			let count = track(1);
+			let &[count] = track(1);
 
-			<button onClick={() => @count++}>{'Increment'}</button>
+			<button onClick={() => count++}>{'Increment'}</button>
 
-			switch (@count) {
+			switch (count) {
 				case 1:
 					<div>{'Count is 1'}</div>
 					break;
@@ -70,13 +70,13 @@ describe('switch statements', () => {
 
 	it('renders switch with default clause only', () => {
 		component App() {
-			let value = track('x');
+			let &[value] = track('x');
 
-			<button onClick={() => (@value = 'y')}>{'Change Value'}</button>
+			<button onClick={() => (value = 'y')}>{'Change Value'}</button>
 
-			switch (@value) {
+			switch (value) {
 				default:
-					<div>{'Default for ' + @value}</div>
+					<div>{'Default for ' + value}</div>
 			}
 		}
 
@@ -91,12 +91,12 @@ describe('switch statements', () => {
 
 	it('renders switch using empty case fall-through', () => {
 		component App() {
-			let value = track('a');
+			let &[value] = track('a');
 
-			<button onClick={() => (@value = 'b')}>{'Change to B'}</button>
-			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
+			<button onClick={() => (value = 'b')}>{'Change to B'}</button>
+			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
 
-			switch (@value) {
+			switch (value) {
 				case 'a':
 					<div>{'Case A'}</div>
 					break;
@@ -133,29 +133,29 @@ describe('switch statements', () => {
 
 	it('renders switch with template content and reacts to tracked changes', () => {
 		component App() {
-			let status = track('active');
-			let message = track('');
+			let &[status] = track('active');
+			let &[message] = track('');
 
-			<button onClick={() => (@status = 'pending')}>{'Pending'}</button>
-			<button onClick={() => (@status = 'completed')}>{'Completed'}</button>
-			<button onClick={() => (@status = 'error')}>{'Error'}</button>
+			<button onClick={() => (status = 'pending')}>{'Pending'}</button>
+			<button onClick={() => (status = 'completed')}>{'Completed'}</button>
+			<button onClick={() => (status = 'error')}>{'Error'}</button>
 
-			switch (@status) {
+			switch (status) {
 				case 'active':
-					@message = 'Currently active.';
-					<div>{'Status: ' + @message}</div>
+					message = 'Currently active.';
+					<div>{'Status: ' + message}</div>
 					break;
 				case 'pending':
-					@message = 'Waiting for completion.';
-					<div>{'Status: ' + @message}</div>
+					message = 'Waiting for completion.';
+					<div>{'Status: ' + message}</div>
 					break;
 				case 'completed':
-					@message = 'Task finished!';
-					<div class="success">{'Status: ' + @message}</div>
+					message = 'Task finished!';
+					<div class="success">{'Status: ' + message}</div>
 					break;
 				default:
-					@message = 'An error occurred.';
-					<div class="error">{'Status: ' + @message}</div>
+					message = 'An error occurred.';
+					<div class="error">{'Status: ' + message}</div>
 			}
 		}
 
@@ -185,9 +185,9 @@ 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 = track(0);
+				let &[status] = track(0);
 				<div>
-					switch (@status) {
+					switch (status) {
 						case -1:
 						case 0:
 							<p>{' Idle'}</p>
@@ -208,7 +208,7 @@ describe('switch statements', () => {
 				</div>
 				<button
 					onClick={() => {
-						@status = (@status + 1) % 5;
+						status = (status + 1) % 5;
 					}}
 				>
 					{'Next Status'}
@@ -253,15 +253,15 @@ 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 = track('x');
+				let &[value] = track('x');
 
-				<button onClick={() => (@value = 'a')}>{'Set A'}</button>
-				<button onClick={() => (@value = 'b')}>{'Set B'}</button>
-				<button onClick={() => (@value = 'c')}>{'Set C'}</button>
-				<button onClick={() => (@value = 'x')}>{'Set X'}</button>
+				<button onClick={() => (value = 'a')}>{'Set A'}</button>
+				<button onClick={() => (value = 'b')}>{'Set B'}</button>
+				<button onClick={() => (value = 'c')}>{'Set C'}</button>
+				<button onClick={() => (value = 'x')}>{'Set X'}</button>
 
 				<div>
-					switch (@value) {
+					switch (value) {
 						case 'a':
 							<div>{' Case A'}</div>
 							break;
@@ -271,7 +271,7 @@ describe('switch statements', () => {
 						// The browser works correctly.
 						// So, we're just using a defined case in the middle to simulate default.
 						case 'x':
-							<div>{' Default Case for ' + @value}</div>
+							<div>{' Default Case for ' + value}</div>
 						case 'b':
 							<div>{' Case B'}</div>
 							break;
@@ -359,19 +359,19 @@ describe('switch statements', () => {
 
 	it('renders switch with block-scoped cases and break inside blocks', () => {
 		component App() {
-			let level = track(1);
+			let &[level] = track(1);
 
 			<button
 				onClick={() => {
-					if (@level === 1) @level = 2;
-					else if (@level === 2) @level = 3;
-					else @level = 1;
+					if (level === 1) level = 2;
+					else if (level === 2) level = 3;
+					else level = 1;
 				}}
 			>
 				{'Toggle'}
 			</button>
 
-			switch (@level) {
+			switch (level) {
 				case 1: {
 					<div class="level">{'Level 1'}</div>
 					break;

package/tests/client/try.test.ripple

@@ -88,10 +88,10 @@ describe('try block', () => {
 			}
 
 			component Child() {
-				let value = track(1);
-				await Promise.resolve(@value + 1);
+				let &[value, valueTracked] = track(1);
+				await Promise.resolve(value + 1);
 
-				<input type="number" {ref bindValue(value)} />
+				<input type="number" {ref bindValue(valueTracked)} />
 			}
 
 			render(App);
@@ -152,10 +152,10 @@ describe('try block', () => {
 			component FilteredList({ query }: { query: any }) {
 				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
 				let list = RippleArray.from(items);
-				let filtered = track(() => list.filter((item: string) => item.includes(@query)));
+				let &[filtered] = track(() => list.filter((item: string) => item.includes(query.value)));
 
 				<ul>
-					for (let item of @filtered) {
+					for (let item of filtered) {
 						<li>{item}</li>
 					}
 				</ul>

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

@@ -4,13 +4,13 @@ describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
 		component URLTest() {
 			const url = RippleURL('https://example.com/users/123?tab=profile');
-			let userId = track(() => url.pathname.split('/').pop());
-			let activeTab = track(() => url.searchParams.get('tab'));
+			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>
+			<pre>{`User ID: ${userId}`}</pre>
+			<pre>{`Active Tab: ${activeTab}`}</pre>
 		}
 
 		render(URLTest);
@@ -57,10 +57,10 @@ describe('RippleURL > derived', () => {
 		}
 
 		component ChildB({ url }: { url: RippleURL }) {
-			let count = track(() => url.searchParams.get('count'));
+			let &[count] = track(() => url.searchParams.get('count'));
 
 			<pre>{url.href}</pre>
-			<pre>{@count}</pre>
+			<pre>{count}</pre>
 		}
 
 		render(ParentTest);

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

@@ -4,15 +4,15 @@ describe('RippleURLSearchParams > derived', () => {
 	it('handles reactive computed properties based on search params', () => {
 		component URLTest() {
 			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);
+			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>
-			<pre>{`Page: ${@page}`}</pre>
-			<pre>{`Limit: ${@limit}`}</pre>
-			<pre>{`Offset: ${@offset}`}</pre>
+			<pre>{`Page: ${page}`}</pre>
+			<pre>{`Limit: ${limit}`}</pre>
+			<pre>{`Offset: ${offset}`}</pre>
 		}
 
 		render(URLTest);
@@ -62,9 +62,9 @@ describe('RippleURLSearchParams > derived', () => {
 		}
 
 		component ChildB({ params }: { params: RippleURLSearchParams }) {
-			let count = track(() => params.get('count'));
+			let &[count] = track(() => params.get('count'));
 
-			<pre>{@count}</pre>
+			<pre>{count}</pre>
 		}
 
 		render(ParentTest);

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

@@ -4,10 +4,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let keys = track(() => Array.from(params.keys()));
+			let &[keys] = track(() => Array.from(params.keys()));
 
 			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
-			<pre>{JSON.stringify(@keys)}</pre>
+			<pre>{JSON.stringify(keys)}</pre>
 		}
 
 		render(URLTest);
@@ -27,10 +27,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles values method with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let values = track(() => Array.from(params.values()));
+			let &[values] = track(() => Array.from(params.values()));
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
-			<pre>{JSON.stringify(@values)}</pre>
+			<pre>{JSON.stringify(values)}</pre>
 		}
 
 		render(URLTest);
@@ -50,10 +50,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let entries = track(() => Array.from(params.entries()));
+			let &[entries] = track(() => Array.from(params.entries()));
 
 			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
-			<pre>{JSON.stringify(@entries)}</pre>
+			<pre>{JSON.stringify(entries)}</pre>
 		}
 
 		render(URLTest);
@@ -75,10 +75,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let entries = track(() => Array.from(params));
+			let &[entries] = track(() => Array.from(params));
 
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
-			<pre>{JSON.stringify(@entries)}</pre>
+			<pre>{JSON.stringify(entries)}</pre>
 		}
 
 		render(URLTest);
@@ -126,7 +126,7 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles forEach iteration', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('a=1&b=2&c=3');
-			let sum = track(() => {
+			let &[sum] = track(() => {
 				let total = 0;
 				// Access the params reactively through entries
 				for (const [key, value] of params.entries()) {
@@ -136,7 +136,7 @@ describe('RippleURLSearchParams > iteration', () => {
 			});
 
 			<button onClick={() => params.append('d', '4')}>{'add d=4'}</button>
-			<pre>{@sum}</pre>
+			<pre>{sum}</pre>
 		}
 
 		render(URLTest);

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

@@ -29,11 +29,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles append with multiple values for same key', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let allFoo = track(() => params.getAll('foo'));
+			let &[allFoo] = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
 			<pre>{params.toString()}</pre>
-			<pre>{JSON.stringify(@allFoo)}</pre>
+			<pre>{JSON.stringify(allFoo)}</pre>
 		}
 
 		render(URLTest);
@@ -108,11 +108,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles delete when key does not exist', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let reactiveSize = track(() => params.size);
+			let &[reactiveSize] = track(() => params.size);
 
 			<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
 			<pre>{params.toString()}</pre>
-			<pre>{@reactiveSize}</pre>
+			<pre>{reactiveSize}</pre>
 		}
 
 		render(URLTest);
@@ -168,11 +168,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles set with multiple existing values', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&foo=baz&foo=qux');
-			let allFoo = track(() => params.getAll('foo'));
+			let &[allFoo] = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
 			<pre>{params.toString()}</pre>
-			<pre>{JSON.stringify(@allFoo)}</pre>
+			<pre>{JSON.stringify(allFoo)}</pre>
 		}
 
 		render(URLTest);
@@ -194,10 +194,10 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles set when value is the same', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let reactiveString = track(() => params.toString());
+			let &[reactiveString] = track(() => params.toString());
 
 			<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
-			<pre>{@reactiveString}</pre>
+			<pre>{reactiveString}</pre>
 			<pre>{params.size}</pre>
 		}
 
@@ -312,12 +312,12 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles duplicate keys with different values', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams();
-			let tags = track(() => params.getAll('tag'));
+			let &[tags] = track(() => params.getAll('tag'));
 
 			<button onClick={() => params.append('tag', 'javascript')}>{'add js'}</button>
 			<button onClick={() => params.append('tag', 'typescript')}>{'add ts'}</button>
 			<button onClick={() => params.append('tag', 'ripple')}>{'add ripple'}</button>
-			<pre>{JSON.stringify(@tags)}</pre>
+			<pre>{JSON.stringify(tags)}</pre>
 			<pre>{params.size}</pre>
 		}
 

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

@@ -4,12 +4,12 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get operation with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let foo = track(() => params.get('foo'));
-			let baz = track(() => params.get('baz'));
+			let &[foo] = track(() => params.get('foo'));
+			let &[baz] = track(() => params.get('baz'));
 
 			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
-			<pre>{@foo}</pre>
-			<pre>{@baz}</pre>
+			<pre>{foo}</pre>
+			<pre>{baz}</pre>
 		}
 
 		render(URLTest);
@@ -31,9 +31,9 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get for nonexistent key', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let nonexistent = track(() => params.get('nonexistent'));
+			let &[nonexistent] = track(() => params.get('nonexistent'));
 
-			<pre>{String(@nonexistent)}</pre>
+			<pre>{String(nonexistent)}</pre>
 		}
 
 		render(URLTest);
@@ -44,10 +44,10 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles getAll operation with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&foo=baz');
-			let allFoo = track(() => params.getAll('foo'));
+			let &[allFoo] = track(() => params.getAll('foo'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
-			<pre>{JSON.stringify(@allFoo)}</pre>
+			<pre>{JSON.stringify(allFoo)}</pre>
 		}
 
 		render(URLTest);
@@ -67,13 +67,13 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles has operation with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let hasFoo = track(() => params.has('foo'));
-			let hasBaz = track(() => params.has('baz'));
+			let &[hasFoo] = track(() => params.has('foo'));
+			let &[hasBaz] = track(() => params.has('baz'));
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add baz'}</button>
 			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
-			<pre>{@hasFoo.toString()}</pre>
-			<pre>{@hasBaz.toString()}</pre>
+			<pre>{hasFoo.toString()}</pre>
+			<pre>{hasBaz.toString()}</pre>
 		}
 
 		render(URLTest);
@@ -103,12 +103,12 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles has with specific value', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar&foo=baz');
-			let hasBarValue = track(() => params.has('foo', 'bar'));
-			let hasQuxValue = track(() => params.has('foo', 'qux'));
+			let &[hasBarValue] = track(() => params.has('foo', 'bar'));
+			let &[hasQuxValue] = track(() => params.has('foo', 'qux'));
 
 			<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
-			<pre>{@hasBarValue.toString()}</pre>
-			<pre>{@hasQuxValue.toString()}</pre>
+			<pre>{hasBarValue.toString()}</pre>
+			<pre>{hasQuxValue.toString()}</pre>
 		}
 
 		render(URLTest);
@@ -130,11 +130,11 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles size property with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let size = track(() => params.size);
+			let &[size] = track(() => params.size);
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
 			<button onClick={() => params.delete('foo')}>{'delete'}</button>
-			<pre>{@size}</pre>
+			<pre>{size}</pre>
 		}
 
 		render(URLTest);

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

@@ -4,10 +4,10 @@ describe('RippleURLSearchParams > serialization', () => {
 	it('handles toString method with reactivity', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('foo=bar');
-			let string = track(() => params.toString());
+			let &[string] = track(() => params.toString());
 
 			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
-			<pre>{@string}</pre>
+			<pre>{string}</pre>
 		}
 
 		render(URLTest);