ripple 0.3.6 → 0.3.8

package/tests/hydration/components/switch.ripple

@@ -15,18 +15,18 @@ export component SwitchStatic() {
 }
 
 export component SwitchReactive() {
-	let status = track<'a' | 'b' | 'c'>('a');
+	let &[status] = track<'a' | 'b' | 'c'>('a');
 	<button
 		class="toggle"
 		onClick={() => {
-			if (@status === 'a') @status = 'b';
-			else if (@status === 'b') @status = 'c';
-			else @status = 'a';
+			if (status === 'a') status = 'b';
+			else if (status === 'b') status = 'c';
+			else status = 'a';
 		}}
 	>
 		{'Toggle'}
 	</button>
-	switch (@status) {
+	switch (status) {
 		case 'a':
 			<div class="case-a">{'Case A'}</div>
 			break;
@@ -51,18 +51,18 @@ export component SwitchFallthrough() {
 }
 
 export component SwitchNumericLevels() {
-	let level = track<1 | 2 | 3>(1);
+	let &[level] = track<1 | 2 | 3>(1);
 	<button
 		class="level-toggle"
 		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 Level'}
 	</button>
-	switch (@level) {
+	switch (level) {
 		case 1:
 			<div class="level-1">{'Level 1'}</div>
 			break;
@@ -76,18 +76,18 @@ export component SwitchNumericLevels() {
 }
 
 export component SwitchBlockScoped() {
-	let level = track<1 | 2 | 3>(1);
+	let &[level] = track<1 | 2 | 3>(1);
 	<button
 		class="block-toggle"
 		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="block-1">{'Block 1'}</div>
 			break;
@@ -104,18 +104,18 @@ export component SwitchBlockScoped() {
 }
 
 export component SwitchNoBreak() {
-	let level = track<1 | 2 | 3>(1);
+	let &[level] = track<1 | 2 | 3>(1);
 	<button
 		class="nobreak-toggle"
 		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="nobreak-1">{'NoBreak 1'}</div>
 		}

package/tests/server/await.test.ripple

@@ -8,16 +8,16 @@ describe('await in control flow', () => {
 	// it('should handle await inside if statement', async () => {
 	// 	component App() {
 	// 		let condition = true;
-	// 		let data = track('loading');
+	// 		let &[data] = track('loading');
 
 	// 		if (condition) {
 	// 			await new Promise((resolve) => setTimeout(() => {
-	// 				@data = 'loaded';
+	// 				data = 'loaded';
 	// 				resolve();
 	// 			}, 10));
 	// 		}
 
-	// 		<div>{@data}</div>
+	// 		<div>{data}</div>
 	// 	}
 
 	// 	const { body } = await render(App);

package/tests/server/basic.attributes.test.ripple

@@ -19,9 +19,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class attribute', async () => {
 		component Basic() {
-			let active = track(false);
+			let &[active] = track(false);
 
-			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+			<div class={active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
 			<style>
 				.active {
@@ -89,9 +89,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class object', async () => {
 		component Basic() {
-			let active = track(false);
+			let &[active] = track(false);
 
-			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
+			<div class={{ active: active, inactive: !active }}>{'Dynamic Class'}</div>
 
 			<style>
 				.active {
@@ -116,10 +116,10 @@ describe('basic server > attribute rendering', () => {
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
 			component Basic() {
-				let selected = track(1);
+				let &[selected] = track(1);
 
-				<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
-				<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
+				<div class={selected === 0 ? 'selected' : ''}>{`div 1`}</div>
+				<div class={selected === 0 ? 'selected' : ''}>{`div 2`}</div>
 
 				<style>
 					div {
@@ -147,9 +147,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic id attribute', async () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
+			<div id={`item-${count}`}>{'Dynamic ID'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -162,9 +162,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic style attribute', async () => {
 		component Basic() {
-			let color = track('red');
+			let &[color] = track('red');
 
-			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+			<div style={`color: ${color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -178,9 +178,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', async () => {
 		component Basic() {
-			let color = track('red');
+			let &[color] = track('red');
 
-			<div style={{ color: @color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
+			<div style={{ color: color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -194,9 +194,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', async () => {
 		component Basic() {
-			let style = track({ color: 'red', fontWeight: 'bold' });
+			let &[style] = track({ color: 'red', fontWeight: 'bold' });
 
-			<div {@style}>{'Dynamic Style'}</div>
+			<div {style}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -277,10 +277,10 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as false', async () => {
 		component Basic() {
-			let disabled = track(false);
-			let checked = track(false);
+			let &[disabled] = track(false);
+			let &[checked] = track(false);
 
-			<input type="checkbox" {@disabled} {@checked} />
+			<input type="checkbox" {disabled} {checked} />
 		}
 
 		const { body } = await render(Basic);
@@ -312,10 +312,10 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as true', async () => {
 		component Basic() {
-			let disabled = track(true);
-			let checked = track(true);
+			let &[disabled] = track(true);
+			let &[checked] = track(true);
 
-			<input type="checkbox" {@disabled} {@checked} />
+			<input type="checkbox" {disabled} {checked} />
 		}
 
 		const { body } = await render(Basic);
@@ -347,10 +347,10 @@ describe('basic server > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', async () => {
 		component Basic() {
-			let theme = track('light');
-			let size = track('medium');
+			let &[theme] = track('light');
+			let &[size] = track('medium');
 
-			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>
+			<div class={`theme-${theme} size-${size}`} data-theme={theme} data-size={size}>
 				{'Multiple Dynamic Attributes'}
 			</div>
 		}
@@ -367,12 +367,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('render conditional attributes', async () => {
 		component Basic() {
-			let showTitle = track(false);
-			let showAria = track(false);
+			let &[showTitle] = track(false);
+			let &[showAria] = track(false);
 
 			<div
-				title={@showTitle ? 'This is a title' : undefined}
-				aria-label={@showAria ? 'Accessible label' : undefined}
+				title={showTitle ? 'This is a title' : undefined}
+				aria-label={showAria ? 'Accessible label' : undefined}
 			>
 				{'Conditional Attributes'}
 			</div>
@@ -389,14 +389,14 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		component Basic() {
-			let attrs = track<TestAttributes>(
+			let &[attrs] = track<TestAttributes>(
 				{
 					class: 'initial',
 					id: 'test-1',
 				},
 			);
 
-			<div {...@attrs}>{'Spread Attributes'}</div>
+			<div {...attrs}>{'Spread Attributes'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -411,14 +411,14 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
 		component Basic() {
-			let value = track('parent-class');
+			let &[value] = track('parent-class');
 
-			<p class={@value}>{'Colored parent value'}</p>
+			<p class={value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = track('nested-class');
+				let &[nested] = track('nested-class');
 
-				<p class={@nested}>{'Colored nested value'}</p>
+				<p class={nested}>{'Colored nested value'}</p>
 			</div>
 		}
 

package/tests/server/basic.components.test.ripple

@@ -107,15 +107,15 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = track(false);
+			let &[clicked] = track(false);
 
 			<Card
 				title="Test Card"
 				content="This is a test card"
 				buttonText="Click me"
-				onAction={() => (@clicked = true)}
+				onAction={() => (clicked = true)}
 			/>
-			<div class="status">{@clicked ? 'Clicked' : 'Not clicked'}</div>
+			<div class="status">{clicked ? 'Clicked' : 'Not clicked'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -139,19 +139,19 @@ describe('basic server > components & composition', () => {
 			text: Tracked<string>;
 			count: Tracked<number>;
 		}>) {
-			<div class="child-content">{props.@text}</div>
-			<div class="child-count">{props.@count}</div>
+			<div class="child-content">{props.text.value}</div>
+			<div class="child-count">{props.count.value}</div>
 		}
 
 		component Basic() {
-			let message = track('Hello');
-			let number = track(1);
+			let &[message, messageTracked] = track('Hello');
+			let &[number, numberTracked] = track(1);
 
-			<ChildComponent text={message} count={number} />
+			<ChildComponent text={messageTracked} count={numberTracked} />
 			<button
 				onClick={() => {
-					@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
-					@number++;
+					message = message === 'Hello' ? 'Goodbye' : 'Hello';
+					number++;
 				}}
 			>
 				{'Update Props'}

package/tests/server/basic.test.ripple

@@ -15,12 +15,12 @@ describe('basic client', () => {
 
 	it('renders tracked state updates', async () => {
 		component Counter() {
-			const count = track(0);
+			let &[count] = track(0);
 
-			@count++;
-			@count = @count + 5;
+			count++;
+			count = count + 5;
 
-			<div>{@count}</div>
+			<div>{count}</div>
 		}
 
 		const { body } = await render(Counter);
@@ -34,7 +34,7 @@ describe('basic client', () => {
 			class: { test: boolean };
 		}>) {
 			<div {...rest}>{'Child Component'}</div>
-			<div>{@count}</div>
+			<div>{count.value}</div>
 		}
 
 		component Parent() {
@@ -53,10 +53,10 @@ describe('basic client', () => {
 		component ObjCounter() {
 			const obj = { count: track(2) };
 
-			obj.@count += 3;
-			obj.@count = obj.@count + 1;
+			obj.count.value += 3;
+			obj.count.value = obj.count.value + 1;
 
-			<div>{obj.@count}</div>
+			<div>{obj.count.value}</div>
 		}
 
 		const { body } = await render(ObjCounter);
@@ -66,11 +66,11 @@ describe('basic client', () => {
 
 	it('renders spread props with tracked values', async () => {
 		component SpreadProps() {
-			const id = track('unique-id');
-			const isActive = track(true);
-			const styles = track({ color: 'red', fontSize: '16px' });
+			let &[id] = track('unique-id');
+			let &[isActive] = track(true);
+			let &[styles] = track({ color: 'red', fontSize: '16px' });
 
-			<div {...{ id: @id, class: { active: @isActive }, style: @styles }}>{'Spread Props'}</div>
+			<div {...{ id: id, class: { active: isActive }, style: styles }}>{'Spread Props'}</div>
 		}
 
 		const { body } = await render(SpreadProps);
@@ -82,14 +82,14 @@ describe('basic client', () => {
 
 	it('handles AssignExpressions with tracked values or properties correctly', async () => {
 		component Assignments() {
-			const count = track(0);
+			let &[count] = track(0);
 			const obj = { value: track(5) };
 
-			@count += 10;
-			obj.@value *= 2;
+			count += 10;
+			obj.value.value *= 2;
 
-			<div>{@count}</div>
-			<div>{obj.@value}</div>
+			<div>{count}</div>
+			<div>{obj.value.value}</div>
 		}
 
 		const { body } = await render(Assignments);
@@ -99,16 +99,15 @@ describe('basic client', () => {
 
 	it(`handles derived changes via tracked dependencies' changes`, async () => {
 		component Derived() {
-			let base = track(5);
-			let multiplier = track(3);
-			const derived = track(() => @base * @multiplier);
+			let &[base] = track(5);
+			let &[multiplier] = track(3);
+			let &[derived] = track(() => base * multiplier);
 
-			<div>{@derived}</div>
+			<div>{derived}</div>
 
-			@base += 2;
+			base += 2;
 
-
-			<div>{@derived}</div>
+			<div>{derived}</div>
 		}
 
 		const { body } = await render(Derived);
@@ -118,17 +117,16 @@ describe('basic client', () => {
 
 	it(`handles derived changes based on another derived's dependencies' changes`, async () => {
 		component NestedDerived() {
-			let a = track(2);
-			let b = track(3);
-			const sum = track(() => @a + @b);
-			const product = track(() => @sum * 2);
-
-			<div>{@product}</div>
+			let &[a] = track(2);
+			let &[b] = track(3);
+			let &[sum] = track(() => a + b);
+			let &[product] = track(() => sum * 2);
 
-			@a = 4;
+			<div>{product}</div>
 
+			a = 4;
 
-			<div>{@product}</div>
+			<div>{product}</div>
 		}
 
 		const { body } = await render(NestedDerived);
@@ -138,20 +136,20 @@ describe('basic client', () => {
 
 	it('handles lexical scopes correctly', async () => {
 		component LexicalScopes() {
-			let x = track(1);
-			<div>{@x}</div>
+			let &[x] = track(1);
+			<div>{x}</div>
 
 			<div>
-				let x = track(10);
-				{@x}
+				let &[x] = track(10);
+				{x}
 			</div>
 
 			<div>
-				let x = track(12);
-				{@x}
+				let &[x] = track(12);
+				{x}
 				<span>
-					let x = track(15);
-					{@x}
+					let &[x] = track(15);
+					{x}
 				</span>
 			</div>
 		}

package/tests/server/composite.props.test.ripple

@@ -8,10 +8,10 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let &[foo] = track(123);
 
 			<Child />
-			<Child {@foo} />
+			<Child {foo} />
 		}
 
 		const { body } = await render(App);
@@ -42,7 +42,7 @@ describe('composite > props', () => {
 
 	it('correctly handles no props', async () => {
 		component Child(props: { foo?: Tracked<number> }) {
-			<div>{props.@foo}</div>
+			<div>{props.foo?.value}</div>
 		}
 
 		component App() {
@@ -65,10 +65,10 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let &[foo] = track(123);
 
 			<Child />
-			<Child {@foo} />
+			<Child {foo} />
 		}
 
 		const { body } = await render(App);
@@ -81,7 +81,7 @@ describe('composite > props', () => {
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
 		component Button(props: Props) {
 			const [children, rest] = trackSplit(props, ['children']);
-			<button {...@rest}>
+			<button {...rest.value}>
 				<@children />
 			</button>
 			<style>
@@ -96,9 +96,9 @@ describe('composite > props', () => {
 
 		component Toggle(props: { pressed: Tracked<boolean> }) {
 			const [pressed, rest] = trackSplit(props, ['pressed']);
-			const onClick = () => (@pressed = !@pressed);
-			<Button {...@rest} class={@pressed ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
-			<Button class={@pressed ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
+			const onClick = () => (pressed.value = !pressed.value);
+			<Button {...rest.value} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
+			<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}
 
 		component App() {

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

@@ -19,8 +19,9 @@ describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element from a plain object with a tracked property', async () => {
 		component App() {
 			let obj = { tag: track('div') };
+			let tag = obj.tag;
 
-			<obj.@tag>{'Hello World'}</obj.@tag>
+			<@tag>{'Hello World'}</@tag>
 		}
 
 		const { body } = await render(App);
@@ -31,8 +32,9 @@ describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element from a tracked object with a tracked property', async () => {
 		component App() {
 			let obj = track({ tag: track('div') });
+			let tag = obj.value.tag;
 
-			<@obj.@tag>{'Hello World'}</@obj.@tag>
+			<@tag>{'Hello World'}</@tag>
 		}
 
 		const { body } = await render(App);
@@ -45,8 +47,9 @@ describe('server dynamic DOM elements', () => {
 		async () => {
 			component App() {
 				let obj = track({ tag: track('div') });
+				let tag = obj.value['tag'];
 
-				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
+				<@tag>{'Hello World'}</@tag>
 			}
 
 			const { body } = await render(App);
@@ -70,9 +73,9 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with attributes', async () => {
 		component App() {
 			let tag = track('div');
-			let className = track('test-class');
+			let &[className] = track('test-class');
 
-			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -109,11 +112,9 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with class object', async () => {
 		component App() {
 			let tag = track('div');
-			let active = track(true);
+			let &[active] = track(true);
 
-			<@tag class={{ active: @active, 'dynamic-element': true }}>
-				{'Element with class object'}
-			</@tag>
+			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
 		}
 
 		const { body } = await render(App);
@@ -263,7 +264,7 @@ describe('server dynamic DOM elements', () => {
 		}>) {
 			const tag = track('button');
 			const [rest] = trackSplit(props, []);
-			<@tag {...@rest}>{@rest.class}</@tag>
+			<@tag {...rest.value}>{rest.value.class}</@tag>
 
 			<style>
 				.even {
@@ -276,8 +277,8 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = track(0);
-			<DynamicButton class={@count % 2 ? 'even' : 'odd'} id={@count % 2 ? 'even' : 'odd'} />
+			let &[count] = track(0);
+			<DynamicButton class={count % 2 ? 'even' : 'odd'} id={count % 2 ? 'even' : 'odd'} />
 		}
 
 		const { body } = await render(App);