ripple 0.2.48 → 0.2.50

package/tests/basic.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect } from 'ripple';
+import { mount, flushSync, effect, track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('basic', () => {
@@ -54,10 +54,10 @@ describe('basic', () => {
 
 	it('render dynamic text', () => {
 		component Basic() {
-			let $text = 'Hello World';
+			let text = track('Hello World');
 
-			<button onClick={() => $text = 'Hello Ripple'}>{'Change Text'}</button>
-			<div>{$text}</div>
+			<button onClick={() => { @text = 'Hello Ripple' }}>{'Change Text'}</button>
+			<div>{@text}</div>
 		}
 
 		render(Basic);
@@ -89,20 +89,20 @@ describe('basic', () => {
 	});
 
 	it('render tick template literal for nested children', () => {
-		component Child({ $level, children }) {
-			if($level == 1) {
+		component Child({ level, children }) {
+			if(level == 1) {
 				<h1><children /></h1>
 			}
-			if($level == 2) {
+			if(level == 2) {
 				<h2><children /></h2>
 			}
-			if($level == 3) {
+			if(level == 3) {
 				<h3><children /></h3>
 			}
 		}
 
 		component App() {
-			<Child $level={1}>{`Heading 1`} </Child>
+			<Child level={1}>{`Heading 1`}</Child>
 		}
 
 		render(App);
@@ -111,10 +111,10 @@ describe('basic', () => {
 
 	it('render dynamic class attribute', () => {
 		component Basic() {
-			let $active = false;
+			let active = track(false);
 
-			<button onClick={() => $active = !$active}>{'Toggle'}</button>
-			<div $class={$active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
+			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
 			<style>
 				.active {
@@ -143,10 +143,10 @@ describe('basic', () => {
 
 	it('render dynamic id attribute', () => {
 		component Basic() {
-			let $count = 0;
+			let count = track(0);
 
-			<button onClick={() => $count++}>{'Increment'}</button>
-			<div $id={`item-${$count}`}>{'Dynamic ID'}</div>
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
 		}
 
 		render(Basic);
@@ -169,10 +169,10 @@ describe('basic', () => {
 
 	it('render dynamic style attribute', () => {
 		component Basic() {
-			let $color = 'red';
+			let color = track('red');
 
-			<button onClick={() => $color = $color === 'red' ? 'blue' : 'red'}>{'Change Color'}</button>
-			<div $style={`color: ${$color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
+			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);
@@ -217,14 +217,14 @@ describe('basic', () => {
 
 	it('render dynamic boolean attributes', () => {
 		component Basic() {
-			let $disabled = false;
-			let $checked = false;
+			let disabled = track(false);
+			let checked = track(false);
 
 			<button onClick={() => {
-				$disabled = !$disabled;
-				$checked = !$checked;
+				@disabled = !@disabled;
+				@checked = !@checked;
 			}}>{'Toggle'}</button>
-			<input type='checkbox' $disabled={$disabled} $checked={$checked} />
+			<input type='checkbox' disabled={@disabled} checked={@checked} />
 		}
 
 		render(Basic);
@@ -244,16 +244,16 @@ describe('basic', () => {
 
 	it('render multiple dynamic attributes', () => {
 		component Basic() {
-			let $theme = 'light';
-			let $size = 'medium';
+			let theme = track('light');
+			let size = track('medium');
 
 			<button
 				onClick={() => {
-				$theme = $theme === 'light' ? 'dark' : 'light';
-				$size = $size === 'medium' ? 'large' : 'medium';
+				@theme = @theme === 'light' ? 'dark' : 'light';
+				@size = @size === 'medium' ? 'large' : 'medium';
 			}}
 			>{'Toggle Theme & Size'}</button>
-			<div $class={`theme-${$theme} size-${$size}`} $data-theme={$theme} $data-size={$size}>{'Multiple Dynamic Attributes'}</div>
+			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>{'Multiple Dynamic Attributes'}</div>
 		}
 
 		render(Basic);
@@ -275,16 +275,16 @@ describe('basic', () => {
 
 	it('render conditional attributes', () => {
 		component Basic() {
-			let $showTitle = false;
-			let $showAria = false;
+			let showTitle = track(false);
+			let showAria = track(false);
 
 			<button onClick={() => {
-				$showTitle = !$showTitle;
-				$showAria = !$showAria;
+				@showTitle = !@showTitle;
+				@showAria = !@showAria;
 			}}>{'Toggle Attributes'}</button>
 			<div
-				$title={$showTitle ? 'This is a title' : null}
-				$aria-label={$showAria ? 'Accessible label' : null}
+				title={@showTitle ? 'This is a title' : null}
+				aria-label={@showAria ? 'Accessible label' : null}
 			>{'Conditional Attributes'}</div>
 		}
 
@@ -311,21 +311,21 @@ describe('basic', () => {
 
 	it('render spread attributes', () => {
 		component Basic() {
-			let $attrs = {
+			let attrs = track({
 				class: 'initial',
 				id: 'test-1'
-			};
+			});
 
 			<button
 				onClick={() => {
-				$attrs = {
+				@attrs = {
 					class: 'updated',
 					id: 'test-2',
 					'data-extra': 'value'
 				};
 			}}
 			>{'Update Attributes'}</button>
-			<div {...$attrs}>{'Spread Attributes'}</div>
+			<div {...@attrs}>{'Spread Attributes'}</div>
 		}
 
 		render(Basic);
@@ -349,19 +349,19 @@ describe('basic', () => {
 		component Basic() {
 			<div>
 				let obj = {
-					$count: 0
+					count: track(0)
 				};
 
-				<span>{obj.$count}</span>
+				<span>{obj.@count}</span>
 			</div>
 			<div>
 				let b = {
-					$count: 0
+					count: track(0)
 				};
 
-				<button onClick={() => b.$count--}>{'-'}</button>
-				<span class='count'>{b.$count}</span>
-				<button onClick={() => b.$count++}>{'+'}</button>
+				<button onClick={() => { b.@count-- }}>{'-'}</button>
+				<span class='count'>{b.@count}</span>
+				<button onClick={() => { b.@count++ }}>{'+'}</button>
 			</div>
 		}
 		render(Basic);
@@ -379,25 +379,27 @@ describe('basic', () => {
 		expect(container.querySelector('.count').textContent).toBe('0');
 	});
 
-	it('renders multiple reactive lexical blocks with complexity', () => {
+	// TODO
+	it.skip('renders multiple reactive lexical blocks with complexity', () => {
+		
 		component Basic() {
-			const count = '$count';
+			const count = 'count';
 
 			<div>
 				let obj = {
-					$count: 0
+					count: track(0)
 				};
 
 				<span>{obj[count]}</span>
 			</div>
 			<div>
 				let b = {
-					$count: 0
+					count: track(0)
 				};
 
-				<button onClick={() => b[count]--}>{'-'}</button>
+				<button onClick={() => { b[count]-- }}>{'-'}</button>
 				<span class='count'>{b[count]}</span>
-				<button onClick={() => b[count]++}>{'+'}</button>
+				<button onClick={() => { b[count]++ }}>{'+'}</button>
 			</div>
 		}
 		render(Basic);
@@ -417,15 +419,15 @@ describe('basic', () => {
 
 	it('renders with different event types', () => {
 		component Basic() {
-			let $focusCount = 0;
-			let $clickCount = 0;
+			let focusCount = track(0);
+			let clickCount = track(0);
 
 			<button
-				onFocus={() => $focusCount++}
-				onClick={() => $clickCount++}
+				onFocus={() => { @focusCount++ }}
+				onClick={() => { @clickCount++ }}
 			>{'Test Button'}</button>
-			<div class='focus-count'>{$focusCount}</div>
-			<div class='click-count'>{$clickCount}</div>
+			<div class='focus-count'>{@focusCount}</div>
+			<div class='click-count'>{@clickCount}</div>
 		}
 
 		render(Basic);
@@ -445,13 +447,13 @@ describe('basic', () => {
 
 	it('renders with capture events', () => {
 		component Basic() {
-			let $captureClicks = 0;
-			let $bubbleClicks = 0;
+			let captureClicks = track(0);
+			let bubbleClicks = track(0);
 
-			<div onClickCapture={() => $captureClicks++}>
-				<button onClick={() => $bubbleClicks++}>{'Click me'}</button>
-				<div class='capture-count'>{$captureClicks}</div>
-				<div class='bubble-count'>{$bubbleClicks}</div>
+			<div onClickCapture={() => { @captureClicks++ }}>
+				<button onClick={() => { @bubbleClicks++ }}>{'Click me'}</button>
+				<div class='capture-count'>{@captureClicks}</div>
+				<div class='bubble-count'>{@bubbleClicks}</div>
 			</div>
 		}
 
@@ -471,13 +473,13 @@ describe('basic', () => {
 	it('renders with component composition and children', () => {
 		component Card(props) {
 			<div class='card'>
-				<props.$children />
+				<props.children />
 			</div>
 		}
 
 		component Basic() {
 			<Card>
-				component $children() {
+				component children() {
 					<p>{'Card content here'}</p>
 				}
 			</Card>
@@ -494,22 +496,22 @@ describe('basic', () => {
 
 	it('renders with error handling simulation', () => {
 		component Basic() {
-			let $hasError = false;
-			let $errorMessage = '';
+			let hasError = track(false);
+			let errorMessage = track('');
 
 			const triggerError = () => {
 				try {
 					throw new Error('Test error');
 				} catch (e) {
-					$hasError = true;
-					$errorMessage = e.message;
+					@hasError = true;
+					@errorMessage = e.message;
 				}
 			};
 
 			<div>
 				<button onClick={triggerError}>{'Trigger Error'}</button>
-				if ($hasError) {
-					<div class='error'>{'Error caught: ' + $errorMessage}</div>
+				if (@hasError) {
+					<div class='error'>{'Error caught: ' + @errorMessage}</div>
 				} else {
 					<div class='success'>{'No error'}</div>
 				}
@@ -534,12 +536,12 @@ describe('basic', () => {
 
 	it('renders with computed reactive state', () => {
 		component Basic() {
-			let $count = 5;
+			let count = track(5);
 
-			<div class='count'>{$count}</div>
-			<div class='doubled'>{$count * 2}</div>
-			<div class='is-even'>{$count % 2 === 0 ? 'Even' : 'Odd'}</div>
-			<button onClick={() => $count++}>{'Increment'}</button>
+			<div class='count'>{@count}</div>
+			<div class='doubled'>{@count * 2}</div>
+			<div class='is-even'>{@count % 2 === 0 ? 'Even' : 'Odd'}</div>
+			<button onClick={() => { @count++ }}>{'Increment'}</button>
 		}
 
 		render(Basic);
@@ -577,16 +579,46 @@ describe('basic', () => {
 
 	it('renders with simple reactive objects', () => {
 		component Basic() {
-			let $user = {
-				$name: 'John',
-				$age: 25
-			};
+			let user = track({
+				name: 'John',
+				age: 25
+			});
+
+			<div class='name'>{@user.name}</div>
+			<div class='age'>{@user.age}</div>
+			<button onClick={() => {
+				@user = {...@user, name: 'Jane', age: 30}
+			}}>{'Update User'}</button>
+		}
+
+		render(Basic);
+
+		const nameDiv = container.querySelector('.name');
+		const ageDiv = container.querySelector('.age');
+		const button = container.querySelector('button');
+
+		expect(nameDiv.textContent).toBe('John');
+		expect(ageDiv.textContent).toBe('25');
+
+		button.click();
+		flushSync();
+
+		expect(nameDiv.textContent).toBe('Jane');
+		expect(ageDiv.textContent).toBe('30');
+	});
+
+	it('renders with nested reactive objects', () => {
+		component Basic() {
+			let user = track({
+				name: track('John'),
+				age: track(25)
+			});
 
-			<div class='name'>{$user.$name}</div>
-			<div class='age'>{$user.$age}</div>
+			<div class='name'>{@user.@name}</div>
+			<div class='age'>{@user.@age}</div>
 			<button onClick={() => {
-				$user.$name = 'Jane';
-				$user.$age = 30;
+				@user.@name = 'Jane';
+				@user.@age = 30;
 			}}>{'Update User'}</button>
 		}
 
@@ -608,15 +640,15 @@ describe('basic', () => {
 
 	it('renders with conditional rendering using if statements', () => {
 		component Basic() {
-			let $showContent = false;
-			let $userRole = 'guest';
+			let showContent = track(false);
+			let userRole = track('guest');
 
-			<button onClick={() => $showContent = !$showContent}>{'Toggle Content'}</button>
-			<button onClick={() => $userRole = $userRole === 'guest' ? 'admin' : 'guest'}>{'Toggle Role'}</button>
+			<button onClick={() => { @showContent = !@showContent }}>{'Toggle Content'}</button>
+			<button onClick={() => { @userRole = @userRole === 'guest' ? 'admin' : 'guest' }}>{'Toggle Role'}</button>
 
 			<div class='content'>
-				if ($showContent) {
-					if ($userRole === 'admin') {
+				if (@showContent) {
+					if (@userRole === 'admin') {
 						<div class='admin-content'>{'Admin content'}</div>
 					} else {
 						<div class='user-content'>{'User content'}</div>
@@ -667,15 +699,15 @@ describe('basic', () => {
 		}
 
 		component Basic() {
-			let $clicked = 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>
 		}
 
 		render(Basic);
@@ -700,31 +732,31 @@ describe('basic', () => {
 
 	it('renders with complex event handling and state updates', () => {
 		component Basic() {
-			let $counter = 0;
-			let $history = [];
-			let $isEven = true;
+			let counter = track(0);
+			let history = track([]);
+			let isEven = track(true);
 
 			const handleIncrement = () => {
-				$counter++;
-				$history = [...$history, `Inc to ${$counter}`];
-				$isEven = $counter % 2 === 0;
+				@counter++;
+				@history = [...@history, `Inc to ${@counter}`];
+				@isEven = @counter % 2 === 0;
 			};
 
 			const handleDecrement = () => {
-				$counter--;
-				$history = [...$history, `Dec to ${$counter}`];
-				$isEven = $counter % 2 === 0;
+				@counter--;
+				@history = [...@history, `Dec to ${@counter}`];
+				@isEven = @counter % 2 === 0;
 			};
 
 			const handleReset = () => {
-				$counter = 0;
-				$history = [...$history, 'Reset'];
-				$isEven = true;
+				@counter = 0;
+				@history = [...@history, 'Reset'];
+				@isEven = true;
 			};
 
-			<div class='counter'>{$counter}</div>
-			<div class='parity'>{$isEven ? 'Even' : 'Odd'}</div>
-			<div class='history-count'>{$history.length}</div>
+			<div class='counter'>{@counter}</div>
+			<div class='parity'>{@isEven ? 'Even' : 'Odd'}</div>
+			<div class='history-count'>{@history.length}</div>
 
 			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
 			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
@@ -775,18 +807,18 @@ describe('basic', () => {
 
 	it('renders with reactive component props', () => {
 		component ChildComponent(props) {
-			<div class='child-content'>{props.$text}</div>
-			<div class='child-count'>{props.$count}</div>
+			<div class='child-content'>{props.@text}</div>
+			<div class='child-count'>{props.@count}</div>
 		}
 
 		component Basic() {
-			let $message = 'Hello';
-			let $number = 1;
+			let message = track('Hello');
+			let number = track(1);
 
-			<ChildComponent $text={$message} $count={$number} />
+			<ChildComponent text={message} count={number} />
 			<button onClick={() => {
-				$message = $message === 'Hello' ? 'Goodbye' : 'Hello';
-				$number++;
+				@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
+				@number++;
 			}}>{'Update Props'}</button>
 		}
 
@@ -850,16 +882,16 @@ describe('basic', () => {
 
 	it('renders with mixed static and dynamic content', () => {
 		component Basic() {
-			let $name = 'World';
-			let $count = 0;
+			let name = track('World');
+			let count = track(0);
 			const staticMessage = 'Welcome to Ripple!';
 
 			<div class='mixed-content'>
 				<h1>{staticMessage}</h1>
-				<p class='greeting'>{'Hello, ' + $name + '!'}</p>
-				<p class='notifications'>{'You have ' + $count + ' notifications'}</p>
-				<button onClick={() => $count++}>{'Add Notification'}</button>
-				<button onClick={() => $name = $name === 'World' ? 'User' : 'World'}>{'Toggle Name'}</button>
+				<p class='greeting'>{'Hello, ' + @name + '!'}</p>
+				<p class='notifications'>{'You have ' + @count + ' notifications'}</p>
+				<button onClick={() => { @count++ }}>{'Add Notification'}</button>
+				<button onClick={() => { @name = @name === 'World' ? 'User' : 'World' }}>{'Toggle Name'}</button>
 			</div>
 		}
 
@@ -885,14 +917,14 @@ describe('basic', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', () => {
 		component App() {
-			let $value = 'parent-class';
+			let value = track('parent-class');
 
-			<p $class={$value}>{'Colored parent value'}</p>
+			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let $nested = 'nested-class';
+				let nested = track('nested-class');
 
-				<p $class={$nested}>{'Colored nested value'}</p>
+				<p class={@nested}>{'Colored nested value'}</p>
 			</div>
 		}
 
@@ -927,35 +959,35 @@ describe('basic', () => {
 		let logs = [];
 
 		component App() {
-			let $first = 0;
-			let $second = 0;
-			const arr = [$first, $second];
+			let first = track(0);
+			let second = track(0);
+			const arr = [first, second];
 
-			const $total = arr.reduce((a, b) => a + b, 0);
+			const total = track(() => arr.reduce((a, b) => a + @b, 0));
 
-			<button onClick={() => { $first++; }}>{'first:' + $first}</button>
-			<button onClick={() => { $second++; }}>{'second: ' + $second}</button>
+			<button onClick={() => { @first++; }}>{'first:' + @first}</button>
+			<button onClick={() => { @second++; }}>{'second: ' + @second}</button>
 
 			effect(() => {
 				let _arr = [];
 
 				arr.forEach((item) => {
-					_arr.push(item);
+					_arr.push(@item);
 				});
 
 				logs.push(_arr.join(', '));
 			});
 
 			effect(() => {
-				if (arr.includes(1)) {
+				if (arr.map(a => @a).includes(1)) {
 					logs.push('arr includes 1');
 				}
 			});
 
-			<div>{'Sum: ' + $total}</div>
-			<div>{'Comma Separated: ' + arr.join(', ')}</div>
-			<div>{'Number to string: ' + arr.map(a => String(a))}</div>
-			<div>{'Even numbers: ' + arr.filter(a => a % 2 === 0)}</div>
+			<div>{'Sum: ' + @total}</div>
+			<div>{'Comma Separated: ' + arr.map(a => @a).join(', ')}</div>
+			<div>{'Number to string: ' + arr.map(a => String(@a))}</div>
+			<div>{'Even numbers: ' + arr.map(a => @a).filter(a => a % 2 === 0)}</div>
 		}
 
 		render(App);
@@ -986,22 +1018,22 @@ describe('basic', () => {
 		expect(divs[1].textContent).toBe('Comma Separated: 1, 1');
 		expect(divs[2].textContent).toBe('Number to string: 1,1');
 		expect(divs[3].textContent).toBe('Even numbers: ');
-		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1']);
+		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1', 'arr includes 1']);
 	});
 
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		component App() {
 			const SYMBOL_PROP = Symbol();
-			let $hasError = false;
+			let hasError = track(false);
 			const obj = {
-				$count: 0,
+				count: track(0),
 				increment() {
-					this.$count++;
+					this.@count++;
 				},
 				[SYMBOL_PROP]() {
-					this.$count++;
+					this.@count++;
 				},
-				arr: [() => obj.$count++, () => obj.$count--],
+				arr: [() => obj.@count++, () => obj.@count--],
 			};
 
 			const obj2 = null;
@@ -1010,48 +1042,48 @@ describe('basic', () => {
 			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
 			<button
 				onClick={() => {
-					$hasError = false;
+					@hasError = false;
 					try {
 						obj['nonexistent']();
 					} catch {
-						$hasError = true;
+						@hasError = true;
 					}
 				}}
 			>{'Nonexistent'}</button>
 			<button
 				onClick={() => {
-					$hasError = false;
+					@hasError = false;
 					try {
 						obj['nonexistent']?.();
 					} catch {
-						$hasError = true;
+						@hasError = true;
 					}
 				}}
 			>{'Nonexistent chaining'}</button>
 			<button
 				onClick={() => {
-					$hasError = false;
+					@hasError = false;
 					try {
 						obj2['nonexistent']();
 					} catch {
-						$hasError = true;
+						@hasError = true;
 					}
 				}}
 			>{'Object null'}</button>
 			<button
 				onClick={() => {
-					$hasError = false;
+					@hasError = false;
 					try {
 						obj2?.['nonexistent']?.();
 					} catch {
-						$hasError = true;
+						@hasError = true;
 					}
 				}}
 			>{'Object null chained'}</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
-			<span>{obj.$count}</span>
-			<span>{$hasError}</span>
+			<span>{obj.@count}</span>
+			<span>{@hasError}</span>
 		}
 
 		render(App);