ripple 0.2.115 → 0.2.118

package/tests/client/basic.test.ripple

@@ -1,1892 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, track, trackSplit, untrack, tick } from 'ripple';
-import { compile } from 'ripple/compiler';
-import { TRACKED_ARRAY } from '../../src/runtime/internal/client/constants.js';
-
-describe('basic client', () => {
-	let container;
-	let error;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-		error = undefined;
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-		error = undefined;
-	});
-
-	it('render static text', () => {
-		component Basic() {
-			<div>{'Hello World'}</div>
-		}
-
-		render(Basic);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render static attributes', () => {
-		component Basic() {
-			<div class='foo' id='bar' style='color: red;'>{'Hello World'}</div>
-		}
-
-		render(Basic);
-
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render semi-dynamic text', () => {
-		component Basic() {
-			let text = 'Hello World';
-
-			<div>{text}</div>
-		}
-
-		render(Basic);
-
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render dynamic text', () => {
-		component Basic() {
-			let text = track('Hello World');
-
-			<button onClick={() => { @text = 'Hello Ripple' }}>{'Change Text'}</button>
-			<div>{@text}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-
-		button.click();
-		flushSync();
-
-		expect(container.querySelector('div').textContent).toEqual('Hello Ripple');
-	});
-
-	it('render empty string literal', () => {
-		component Basic() {
-			<div>{''}</div>
-		}
-
-		render(Basic);
-		expect(container.querySelector('div').textContent).toEqual('');
-	});
-
-	it('render empty template literal', () => {
-		component Basic() {
-			<div>{``}</div>
-		}
-
-		render(Basic);
-		expect(container.querySelector('div').textContent).toEqual('');
-	});
-
-	it('render tick template literal for nested children', () => {
-		component Child({ level, children }) {
-			if(level == 1) {
-				<h1><children /></h1>
-			}
-			if(level == 2) {
-				<h2><children /></h2>
-			}
-			if(level == 3) {
-				<h3><children /></h3>
-			}
-		}
-
-		component App() {
-			<Child level={1}>{`Heading 1`}</Child>
-		}
-
-		render(App);
-		expect(container.querySelector('h1').textContent).toEqual('Heading 1');
-	});
-
-	it('render dynamic class attribute', () => {
-		component Basic() {
-			let active = track(false);
-
-			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
-			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
-
-			<style>
-				.active {
-					color: green;
-				}
-			</style>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
-		expect(div.classList.contains('inactive')).toBe(true);
-
-		button.click();
-		flushSync();
-		expect(div.classList.contains('active')).toBe(true);
-
-		button.click();
-		flushSync();
-
-		expect(div.classList.contains('inactive')).toBe(true);
-	});
-
-	it('render class attribute with array, nested array, nested object', () => {
-		component Basic() {
-			<div class={[
-				'foo',
-				'bar',
-				true && 'baz',
-				false && 'aaa',
-				null && 'bbb',
-				[
-					'ccc',
-					'ddd',
-					{ eee: true, fff: false }
-				]
-			]}>
-				{'Class Array'}
-			</div>
-
-			<style>
-				.foo {
-				  color: red;
-				}
-			</style>
-		}
-
-		render(Basic);
-
-		const div = container.querySelector('div');
-
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
-		expect(div.classList.contains('foo')).toBe(true);
-		expect(div.classList.contains('bar')).toBe(true);
-		expect(div.classList.contains('baz')).toBe(true);
-		expect(div.classList.contains('aaa')).toBe(false);
-		expect(div.classList.contains('bbb')).toBe(false);
-		expect(div.classList.contains('ccc')).toBe(true);
-		expect(div.classList.contains('ddd')).toBe(true);
-		expect(div.classList.contains('eee')).toBe(true);
-		expect(div.classList.contains('fff')).toBe(false);
-	});
-
-	it('render dynamic class object', () => {
-		component Basic() {
-			let active = track(false);
-
-			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
-			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
-
-			<style>
-				.active {
-					color: green;
-				}
-			</style>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
-		expect(div.classList.contains('inactive')).toBe(true);
-		expect(div.classList.contains('active')).toBe(false);
-
-		button.click();
-		flushSync();
-		expect(div.classList.contains('inactive')).toBe(false);
-		expect(div.classList.contains('active')).toBe(true);
-
-		button.click();
-		flushSync();
-
-		expect(div.classList.contains('inactive')).toBe(true);
-		expect(div.classList.contains('active')).toBe(false);
-	});
-
-	it('render dynamic id attribute', () => {
-		component Basic() {
-			let count = track(0);
-
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
-			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.id).toBe('item-0');
-
-		button.click();
-		flushSync();
-
-		expect(div.id).toBe('item-1');
-
-		button.click();
-		flushSync();
-
-		expect(div.id).toBe('item-2');
-	});
-
-	it('render dynamic style attribute', () => {
-		component Basic() {
-			let color = track('red');
-
-			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
-			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.style.color).toBe('red');
-		expect(div.style.fontWeight).toBe('bold');
-
-		button.click();
-		flushSync();
-
-		expect(div.style.color).toBe('blue');
-		expect(div.style.fontWeight).toBe('bold');
-	});
-
-	it('render style attribute as dynamic object', () => {
-		component Basic() {
-			let color = track('red');
-
-			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
-			<div style={{
-				color: @color,
-				fontWeight: 'bold',
-			}}>{'Dynamic Style'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.style.color).toBe('red');
-		expect(div.style.fontWeight).toBe('bold');
-
-		button.click();
-		flushSync();
-
-		expect(div.style.color).toBe('blue');
-		expect(div.style.fontWeight).toBe('bold');
-	});
-
-	it('render tracked variable as style attribute', () => {
-		component Basic() {
-			let style = track({ color: 'red', fontWeight: 'bold' });
-
-			function toggleColor() {
-				@style = { ...@style, color: @style.color === 'red' ? 'blue' : 'red' };
-			}
-
-			<button onClick={toggleColor}>{'Change Color'}</button>
-			<div style={@style}>{'Dynamic Style'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.style.color).toBe('red');
-		expect(div.style.fontWeight).toBe('bold');
-
-		button.click();
-		flushSync();
-
-		expect(div.style.color).toBe('blue');
-		expect(div.style.fontWeight).toBe('bold');
-	});
-
-	it('render tracked object as style attribute', () => {
-		component Basic() {
-			let style = #{ color: 'red', fontWeight: 'bold' };
-
-			function toggleColor() {
-				@style.color = @style.color === 'red' ? 'blue' : 'red';
-			}
-
-			<button onClick={toggleColor}>{'Change Color'}</button>
-			<div style={{ ...@style }}>{'Dynamic Style'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.style.color).toBe('red');
-		expect(div.style.fontWeight).toBe('bold');
-
-		button.click();
-		flushSync();
-
-		expect(div.style.color).toBe('blue');
-		expect(div.style.fontWeight).toBe('bold');
-	});
-
-	it('render spread attributes with style and class', () => {
-		component Basic() {
-			const attributes = {
-				style: { color: 'red', fontWeight: 'bold' },
-				class: ['foo', false && 'bar'],
-			};
-
-			<div {...attributes}>{'Attributes with style and class'}</div>
-		}
-
-		render(Basic);
-
-		const div = container.querySelector('div');
-
-		expect(div.style.color).toBe('red');
-		expect(div.style.fontWeight).toBe('bold');
-
-		expect(div.classList.contains('foo')).toBe(true);
-		expect(div.classList.contains('bar')).toBe(false);
-	});
-
-	it('render spread props without duplication', () => {
-		component App() {
-			const checkBoxProp = {name:'car'}
-
-			<div>
-				<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
-			</div>
-		}
-
-		render(App);
-
-		const input = container.querySelector('input');
-		const html = container.innerHTML;
-
-		expect(input.getAttribute('name')).toBe('car');
-		expect(input.getAttribute('type')).toBe('checkbox');
-		expect(input.getAttribute('id')).toBe('vehicle1');
-		expect(input.getAttribute('value')).toBe('Bike');
-
-		expect(html).not.toContain('type="checkbox"type="checkbox"');
-		expect(html).not.toContain('value="Bike"value="Bike"');
-
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render dynamic boolean attributes', () => {
-		component Basic() {
-			let disabled = track(false);
-			let checked = track(false);
-
-			<button onClick={() => {
-				@disabled = !@disabled;
-				@checked = !@checked;
-			}}>{'Toggle'}</button>
-			<input type='checkbox' disabled={@disabled} checked={@checked} />
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const input = container.querySelector('input');
-
-		expect(input.disabled).toBe(false);
-		expect(input.checked).toBe(false);
-
-		button.click();
-		flushSync();
-
-		expect(input.disabled).toBe(true);
-		expect(input.checked).toBe(true);
-	});
-
-	it('render multiple dynamic attributes', () => {
-		component Basic() {
-			let theme = track('light');
-			let size = track('medium');
-
-			<button
-				onClick={() => {
-				@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>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.className).toBe('theme-light size-medium');
-		expect(div.getAttribute('data-theme')).toBe('light');
-		expect(div.getAttribute('data-size')).toBe('medium');
-
-		button.click();
-		flushSync();
-
-		expect(div.className).toBe('theme-dark size-large');
-		expect(div.getAttribute('data-theme')).toBe('dark');
-		expect(div.getAttribute('data-size')).toBe('large');
-	});
-
-	it('render conditional attributes', () => {
-		component Basic() {
-			let showTitle = track(false);
-			let showAria = track(false);
-
-			<button onClick={() => {
-				@showTitle = !@showTitle;
-				@showAria = !@showAria;
-			}}>{'Toggle Attributes'}</button>
-			<div
-				title={@showTitle ? 'This is a title' : null}
-				aria-label={@showAria ? 'Accessible label' : null}
-			>{'Conditional Attributes'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.hasAttribute('title')).toBe(false);
-		expect(div.hasAttribute('aria-label')).toBe(false);
-
-		button.click();
-		flushSync();
-
-		expect(div.getAttribute('title')).toBe('This is a title');
-		expect(div.getAttribute('aria-label')).toBe('Accessible label');
-
-		button.click();
-		flushSync();
-
-		expect(div.hasAttribute('title')).toBe(false);
-		expect(div.hasAttribute('aria-label')).toBe(false);
-	});
-
-	it('render spread attributes', () => {
-		component Basic() {
-			let attrs = track({
-				class: 'initial',
-				id: 'test-1'
-			});
-
-			<button
-				onClick={() => {
-				@attrs = {
-					class: 'updated',
-					id: 'test-2',
-					'data-extra': 'value'
-				};
-			}}
-			>{'Update Attributes'}</button>
-			<div {...@attrs}>{'Spread Attributes'}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const div = container.querySelector('div');
-
-		expect(div.className).toBe('initial');
-		expect(div.id).toBe('test-1');
-		expect(div.hasAttribute('data-extra')).toBe(false);
-
-		button.click();
-		flushSync();
-
-		expect(div.className).toBe('updated');
-		expect(div.id).toBe('test-2');
-		expect(div.getAttribute('data-extra')).toBe('value');
-	});
-
-	it('renders multiple reactive lexical blocks', () => {
-		component Basic() {
-			<div>
-				let obj = {
-					count: track(0)
-				};
-
-				<span>{obj.@count}</span>
-			</div>
-			<div>
-				let b = {
-					count: track(0)
-				};
-
-				<button onClick={() => { b.@count-- }}>{'-'}</button>
-				<span class='count'>{b.@count}</span>
-				<button onClick={() => { b.@count++ }}>{'+'}</button>
-			</div>
-		}
-		render(Basic);
-
-		const buttons = container.querySelectorAll('button');
-
-		buttons[0].click();
-		flushSync();
-
-		expect(container.querySelector('.count').textContent).toBe('-1');
-
-		buttons[1].click();
-		flushSync();
-
-		expect(container.querySelector('.count').textContent).toBe('0');
-	});
-
-	it('renders multiple reactive lexical blocks with complexity', () => {
-
-		component Basic() {
-			const count = 'count';
-
-			<div>
-				let obj = {
-					count: track(0)
-				};
-
-				<span>{obj[@count]}</span>
-			</div>
-			<div>
-				let b = {
-					count: track(0)
-				};
-
-				<button onClick={() => { b[@count]-- }}>{'-'}</button>
-				<span class='count'>{b[@count]}</span>
-				<button onClick={() => { b[@count]++ }}>{'+'}</button>
-			</div>
-		}
-		render(Basic);
-
-		const buttons = container.querySelectorAll('button');
-
-		buttons[0].click();
-		flushSync();
-
-		expect(container.querySelector('.count').textContent).toBe('-1');
-
-		buttons[1].click();
-		flushSync();
-
-		expect(container.querySelector('.count').textContent).toBe('0');
-	});
-
-	it('renders with different event types', () => {
-		component Basic() {
-			let focusCount = track(0);
-			let clickCount = track(0);
-
-			<button
-				onFocus={() => { @focusCount++ }}
-				onClick={() => { @clickCount++ }}
-			>{'Test Button'}</button>
-			<div class='focus-count'>{@focusCount}</div>
-			<div class='click-count'>{@clickCount}</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const focusDiv = container.querySelector('.focus-count');
-		const clickDiv = container.querySelector('.click-count');
-
-		button.dispatchEvent(new Event('focus'));
-		flushSync();
-		expect(focusDiv.textContent).toBe('1');
-
-		button.click();
-		flushSync();
-		expect(clickDiv.textContent).toBe('1');
-	});
-
-	it('renders with capture events', () => {
-		component Basic() {
-			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>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const captureDiv = container.querySelector('.capture-count');
-		const bubbleDiv = container.querySelector('.bubble-count');
-
-		button.click();
-		flushSync();
-
-		expect(captureDiv.textContent).toBe('1');
-		expect(bubbleDiv.textContent).toBe('1');
-	});
-
-	it('renders with event listeners in spread props', () => {
-		component Basic() {
-			let count = track(0);
-
-			const minus = {
-				onClick() {
-					@count--
-				}
-			}
-
-			const plus = {
-				onClick() {
-					@count++
-				}
-			}
-
-			<div>
-				<button {...minus} class='minus'>{'-'}</button>
-				<span class='count'>{@count}</span>
-				<button {...plus} class='plus'>{'+'}</button>
-			</div>
-		}
-
-		render(Basic);
-
-		const minusButton = container.querySelector('.minus');
-		const plusButton = container.querySelector('.plus');
-		const countSpan = container.querySelector('.count');
-
-		expect(countSpan.textContent).toBe('0');
-
-		// Test that the buttons don't have string onclick attributes
-		expect(minusButton.getAttribute('onclick')).toBe(null);
-		expect(plusButton.getAttribute('onclick')).toBe(null);
-
-		// Test that the event handlers work
-		minusButton.click();
-		flushSync();
-		expect(countSpan.textContent).toBe('-1');
-
-		plusButton.click();
-		flushSync();
-		expect(countSpan.textContent).toBe('0');
-
-		plusButton.click();
-		flushSync();
-		expect(countSpan.textContent).toBe('1');
-	});
-
-	it('handles both delegated and non-delegated events in spread props', () => {
-		component Basic() {
-			let clickCount = track(0);
-			let focusCount = track(0);
-
-			const mixedHandler = {
-				onClick() {  // Delegated event
-					@clickCount++
-				},
-				onFocus() { // Non-delegated event
-					@focusCount++
-				}
-			}
-
-			<div>
-				<button {...mixedHandler} class='mixed-button'>{'Test'}</button>
-				<span class='click-count'>{@clickCount}</span>
-				<span class='focus-count'>{@focusCount}</span>
-			</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('.mixed-button');
-		const clickSpan = container.querySelector('.click-count');
-		const focusSpan = container.querySelector('.focus-count');
-
-		expect(clickSpan.textContent).toBe('0');
-		expect(focusSpan.textContent).toBe('0');
-
-		// Test delegated event (click)
-		button.click();
-		flushSync();
-		expect(clickSpan.textContent).toBe('1');
-
-		// Test non-delegated event (focus)
-		button.dispatchEvent(new Event('focus'));
-		flushSync();
-		expect(focusSpan.textContent).toBe('1');
-	});
-
-	it('renders with component composition and children', () => {
-		component Card(props) {
-			<div class='card'>
-				<props.children />
-			</div>
-		}
-
-		component Basic() {
-			<Card>
-				component children() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
-		}
-
-		render(Basic);
-
-		const card = container.querySelector('.card');
-		const paragraph = card.querySelector('p');
-
-		expect(card).toBeTruthy();
-		expect(paragraph.textContent).toBe('Card content here');
-	});
-
-	it('renders with error handling simulation', () => {
-		component Basic() {
-			let hasError = track(false);
-			let errorMessage = track('');
-
-			const triggerError = () => {
-				try {
-					throw new Error('Test error');
-				} catch (e) {
-					@hasError = true;
-					@errorMessage = e.message;
-				}
-			};
-
-			<div>
-				<button onClick={triggerError}>{'Trigger Error'}</button>
-				if (@hasError) {
-					<div class='error'>{'Error caught: ' + @errorMessage}</div>
-				} else {
-					<div class='success'>{'No error'}</div>
-				}
-			</div>
-		}
-
-		render(Basic);
-
-		const button = container.querySelector('button');
-		const successDiv = container.querySelector('.success');
-
-		expect(successDiv).toBeTruthy();
-		expect(successDiv.textContent).toBe('No error');
-
-		button.click();
-		flushSync();
-
-		const errorDiv = container.querySelector('.error');
-		expect(errorDiv).toBeTruthy();
-		expect(errorDiv.textContent).toBe('Error caught: Test error');
-	});
-
-	it('renders with computed reactive state', () => {
-		component Basic() {
-			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>
-		}
-
-		render(Basic);
-
-		const countDiv = container.querySelector('.count');
-		const doubledDiv = container.querySelector('.doubled');
-		const evenDiv = container.querySelector('.is-even');
-		const button = container.querySelector('button');
-
-		expect(countDiv.textContent).toBe('5');
-		expect(doubledDiv.textContent).toBe('10');
-		expect(evenDiv.textContent).toBe('Odd');
-
-		button.click();
-		flushSync();
-
-		expect(countDiv.textContent).toBe('6');
-		expect(doubledDiv.textContent).toBe('12');
-		expect(evenDiv.textContent).toBe('Even');
-	});
-
-	it('renders simple JS expression logic correctly', () => {
-		component Example() {
-			let test = {}
-			let counter = 0;
-			test[counter++] = 'Test';
-
-			<div>{JSON.stringify(test)}</div>
-			<div>{JSON.stringify(counter)}</div>
-		}
-		render(Example);
-
-		expect(container).toMatchSnapshot();
-	});
-
-	it('renders with simple reactive objects', () => {
-		component Basic() {
-			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>
-			<button onClick={() => {
-				@user.@name = 'Jane';
-				@user.@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 conditional rendering using if statements', () => {
-		component Basic() {
-			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>
-
-			<div class='content'>
-				if (@showContent) {
-					if (@userRole === 'admin') {
-						<div class='admin-content'>{'Admin content'}</div>
-					} else {
-						<div class='user-content'>{'User content'}</div>
-					}
-				} else {
-					<div class='no-content'>{'No content'}</div>
-				}
-			</div>
-		}
-
-		render(Basic);
-
-		const buttons = container.querySelectorAll('button');
-		const contentDiv = container.querySelector('.content');
-
-		expect(contentDiv.querySelector('.no-content')).toBeTruthy();
-		expect(contentDiv.querySelector('.admin-content')).toBeFalsy();
-		expect(contentDiv.querySelector('.user-content')).toBeFalsy();
-
-		buttons[0].click();
-		flushSync();
-
-		expect(contentDiv.querySelector('.no-content')).toBeFalsy();
-		expect(contentDiv.querySelector('.user-content')).toBeTruthy();
-		expect(contentDiv.querySelector('.admin-content')).toBeFalsy();
-
-		buttons[1].click();
-		flushSync();
-
-		expect(contentDiv.querySelector('.no-content')).toBeFalsy();
-		expect(contentDiv.querySelector('.user-content')).toBeFalsy();
-		expect(contentDiv.querySelector('.admin-content')).toBeTruthy();
-	});
-
-	it('renders with nested components and prop passing', () => {
-		component Button(props) {
-			<button class={props.variant} onClick={props.onClick}>
-				{props.label}
-			</button>
-		}
-
-		component Card(props) {
-			<div class='card'>
-				<h3>{props.title}</h3>
-				<p>{props.content}</p>
-				<Button variant='primary' label={props.buttonText} onClick={props.onAction} />
-			</div>
-		}
-
-		component Basic() {
-			let clicked = track(false);
-
-			<Card
-				title='Test Card'
-				content='This is a test card'
-				buttonText='Click me'
-				onAction={() => @clicked = true}
-			/>
-			<div class='status'>{@clicked ? 'Clicked' : 'Not clicked'}</div>
-		}
-
-		render(Basic);
-
-		const card = container.querySelector('.card');
-		const title = card.querySelector('h3');
-		const content = card.querySelector('p');
-		const button = card.querySelector('button');
-		const status = container.querySelector('.status');
-
-		expect(title.textContent).toBe('Test Card');
-		expect(content.textContent).toBe('This is a test card');
-		expect(button.textContent).toBe('Click me');
-		expect(button.className).toBe('primary');
-		expect(status.textContent).toBe('Not clicked');
-
-		button.click();
-		flushSync();
-
-		expect(status.textContent).toBe('Clicked');
-	});
-
-	it('renders with complex event handling and state updates', () => {
-		component Basic() {
-			let counter = track(0);
-			let history = track([]);
-			let isEven = track(true);
-
-			const handleIncrement = () => {
-				@counter++;
-				@history = [...@history, `Inc to ${@counter}`];
-				@isEven = @counter % 2 === 0;
-			};
-
-			const handleDecrement = () => {
-				@counter--;
-				@history = [...@history, `Dec to ${@counter}`];
-				@isEven = @counter % 2 === 0;
-			};
-
-			const handleReset = () => {
-				@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>
-
-			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
-			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
-			<button class='reset-btn' onClick={handleReset}>{'Reset'}</button>
-		}
-
-		render(Basic);
-
-		const counterDiv = container.querySelector('.counter');
-		const parityDiv = container.querySelector('.parity');
-		const historyDiv = container.querySelector('.history-count');
-		const incBtn = container.querySelector('.inc-btn');
-		const decBtn = container.querySelector('.dec-btn');
-		const resetBtn = container.querySelector('.reset-btn');
-
-		expect(counterDiv.textContent).toBe('0');
-		expect(parityDiv.textContent).toBe('Even');
-		expect(historyDiv.textContent).toBe('0');
-
-		incBtn.click();
-		flushSync();
-
-		expect(counterDiv.textContent).toBe('1');
-		expect(parityDiv.textContent).toBe('Odd');
-		expect(historyDiv.textContent).toBe('1');
-
-		incBtn.click();
-		flushSync();
-
-		expect(counterDiv.textContent).toBe('2');
-		expect(parityDiv.textContent).toBe('Even');
-		expect(historyDiv.textContent).toBe('2');
-
-		decBtn.click();
-		flushSync();
-
-		expect(counterDiv.textContent).toBe('1');
-		expect(parityDiv.textContent).toBe('Odd');
-		expect(historyDiv.textContent).toBe('3');
-
-		resetBtn.click();
-		flushSync();
-
-		expect(counterDiv.textContent).toBe('0');
-		expect(parityDiv.textContent).toBe('Even');
-		expect(historyDiv.textContent).toBe('4');
-	});
-
-	it('renders with reactive component props', () => {
-		component ChildComponent(props) {
-			<div class='child-content'>{props.@text}</div>
-			<div class='child-count'>{props.@count}</div>
-		}
-
-		component Basic() {
-			let message = track('Hello');
-			let number = track(1);
-
-			<ChildComponent text={message} count={number} />
-			<button onClick={() => {
-				@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
-				@number++;
-			}}>{'Update Props'}</button>
-		}
-
-		render(Basic);
-
-		const contentDiv = container.querySelector('.child-content');
-		const countDiv = container.querySelector('.child-count');
-		const button = container.querySelector('button');
-
-		expect(contentDiv.textContent).toBe('Hello');
-		expect(countDiv.textContent).toBe('1');
-
-		button.click();
-		flushSync();
-
-		expect(contentDiv.textContent).toBe('Goodbye');
-		expect(countDiv.textContent).toBe('2');
-
-		button.click();
-		flushSync();
-
-		expect(contentDiv.textContent).toBe('Hello');
-		expect(countDiv.textContent).toBe('3');
-	});
-
-	it('renders with styling scoped to component', () => {
-		component Basic() {
-			<div class='styled-container'>
-				<h1>{'Styled heading'}</h1>
-				<p class='text'>{'Styled paragraph'}</p>
-			</div>
-
-			<style>
-				.styled-container {
-					background-color: rgb(0, 0, 255);
-					padding: 16px;
-				}
-
-				h1 {
-					color: rgb(255, 255, 255);
-					font-size: 32px;
-				}
-
-				.text {
-					color: rgb(200, 200, 200);
-					font-size: 14px;
-				}
-			</style>
-		}
-
-		render(Basic);
-
-		const styledContainer = container.querySelector('.styled-container');
-		const heading = styledContainer.querySelector('h1');
-		const paragraph = styledContainer.querySelector('.text');
-
-		expect(styledContainer).toBeTruthy();
-		expect(heading.textContent).toBe('Styled heading');
-		expect(paragraph.textContent).toBe('Styled paragraph');
-	});
-
-	it('renders with keyframes in styling scoped to component', () => {
-		const source = `export component Basic() {
-			<div>
-				<p>{'Styled paragraph'}</p>
-			</div>
-
-			<style>
-				div {
-					animation-name: anim;
-				}
-
-				@keyframes anim {}
-
-				p {
-					animation-name: anim;
-				}
-			</style>
-		}`;
-
-		const { css } = compile(source, 'test.ripple');
-		const name = css.match(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{/)[1];
-		expect(css.match(new RegExp(name, 'g'))?.length).toEqual(3);
-	});
-
-	it('renders with mixed static and dynamic content', () => {
-		component Basic() {
-			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>
-			</div>
-		}
-
-		render(Basic);
-
-		const heading = container.querySelector('h1');
-		const greetingP = container.querySelector('.greeting');
-		const notificationsP = container.querySelector('.notifications');
-		const buttons = container.querySelectorAll('button');
-
-		expect(heading.textContent).toBe('Welcome to Ripple!');
-		expect(greetingP.textContent).toBe('Hello, World!');
-		expect(notificationsP.textContent).toBe('You have 0 notifications');
-
-		buttons[0].click();
-		flushSync();
-		expect(notificationsP.textContent).toBe('You have 1 notifications');
-
-		buttons[1].click();
-		flushSync();
-		expect(greetingP.textContent).toBe('Hello, User!');
-	});
-
-	it('renders with reactive attributes with nested reactive attributes', () => {
-		component App() {
-			let value = track('parent-class');
-
-			<p class={@value}>{'Colored parent value'}</p>
-
-			<div>
-				let nested = track('nested-class');
-
-				<p class={@nested}>{'Colored nested value'}</p>
-			</div>
-		}
-
-		render(App);
-
-		const paragraphs = container.querySelectorAll('p');
-
-		expect(paragraphs[0].className).toBe('parent-class');
-		expect(paragraphs[1].className).toBe('nested-class');
-	});
-
-	it('should throw error for unclosed tag', () => {
-		const malformedCode = `export default component Example() {
-	<div></span>
-}`;
-		expect(() => {
-			compile(malformedCode, 'test.ripple', 'test.ripple');
-		}).toThrow('Expected closing tag to match opening tag');
-	});
-
-	it('should throw error for completely unclosed tag', () => {
-		const malformedCode = `export default component Example() {
-	<div>content
-}`;
-
-		expect(() => {
-			compile(malformedCode, 'test.ripple', 'test.ripple');
-		}).toThrow('Unclosed tag');
-	});
-
-	it('basic reactivity with standard arrays should work', () => {
-		let logs = [];
-
-		component App() {
-			let first = track(0);
-			let second = track(0);
-			const arr = [first, second];
-
-			const total = track(() => arr.reduce((a, b) => a + @b, 0));
-
-			<button onClick={() => { @first++; }}>{'first:' + @first}</button>
-			<button onClick={() => { @second++; }}>{'second: ' + @second}</button>
-
-			effect(() => {
-				let _arr = [];
-
-				arr.forEach((item) => {
-					_arr.push(@item);
-				});
-
-				logs.push(_arr.join(', '));
-			});
-
-			effect(() => {
-				if (arr.map(a => @a).includes(1)) {
-					logs.push('arr includes 1');
-				}
-			});
-
-			<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);
-		flushSync();
-
-		const buttons = container.querySelectorAll('button');
-		const divs = container.querySelectorAll('div');
-
-		expect(divs[0].textContent).toBe('Sum: 0');
-		expect(divs[1].textContent).toBe('Comma Separated: 0, 0');
-		expect(divs[2].textContent).toBe('Number to string: 0,0');
-		expect(divs[3].textContent).toBe('Even numbers: 0,0');
-		expect(logs).toEqual(['0, 0']);
-
-		buttons[0].click();
-		flushSync();
-
-		expect(divs[0].textContent).toBe('Sum: 1');
-		expect(divs[1].textContent).toBe('Comma Separated: 1, 0');
-		expect(divs[2].textContent).toBe('Number to string: 1,0');
-		expect(divs[3].textContent).toBe('Even numbers: 0');
-		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1']);
-
-		buttons[1].click();
-		flushSync();
-
-		expect(divs[0].textContent).toBe('Sum: 2');
-		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', 'arr includes 1']);
-	});
-
-	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
-		component App() {
-			const SYMBOL_PROP = Symbol();
-			let hasError = track(false);
-			const obj = {
-				count: track(0),
-				increment() {
-					this.@count++;
-				},
-				[SYMBOL_PROP]() {
-					this.@count++;
-				},
-				arr: [() => obj.@count++, () => obj.@count--],
-			};
-
-			const obj2 = null;
-
-			<button onClick={() => obj['increment']()}>{'Increment'}</button>
-			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
-			<button
-				onClick={() => {
-					@hasError = false;
-					try {
-						obj['nonexistent']();
-					} catch {
-						@hasError = true;
-					}
-				}}
-			>{'Nonexistent'}</button>
-			<button
-				onClick={() => {
-					@hasError = false;
-					try {
-						obj['nonexistent']?.();
-					} catch {
-						@hasError = true;
-					}
-				}}
-			>{'Nonexistent chaining'}</button>
-			<button
-				onClick={() => {
-					@hasError = false;
-					try {
-						obj2['nonexistent']();
-					} catch {
-						@hasError = true;
-					}
-				}}
-			>{'Object null'}</button>
-			<button
-				onClick={() => {
-					@hasError = false;
-					try {
-						obj2?.['nonexistent']?.();
-					} catch {
-						@hasError = true;
-					}
-				}}
-			>{'Object null chained'}</button>
-			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
-
-			<span>{obj.@count}</span>
-			<span>{@hasError}</span>
-		}
-
-		render(App);
-
-		const button1 = container.querySelectorAll('button')[0];
-		const button2 = container.querySelectorAll('button')[1];
-		const button3 = container.querySelectorAll('button')[2];
-		const button4 = container.querySelectorAll('button')[3];
-		const button5 = container.querySelectorAll('button')[4];
-		const button6 = container.querySelectorAll('button')[5];
-		const button7 = container.querySelectorAll('button')[6];
-
-		const countSpan = container.querySelectorAll('span')[0];
-		const errorSpan = container.querySelectorAll('span')[1];
-
-		expect(countSpan.textContent).toBe('0');
-		expect(errorSpan.textContent).toBe('false');
-
-		button1.click();
-		flushSync();
-
-		expect(countSpan.textContent).toBe('1');
-
-		button2.click();
-		flushSync();
-
-		expect(countSpan.textContent).toBe('2');
-
-		button3.click();
-		flushSync();
-		expect(errorSpan.textContent).toBe('true');
-
-		button4.click();
-		flushSync();
-		expect(errorSpan.textContent).toBe('false');
-
-		button5.click();
-		flushSync();
-		expect(errorSpan.textContent).toBe('true');
-
-		button6.click();
-		flushSync();
-		expect(errorSpan.textContent).toBe('false');
-
-		button7.click();
-		flushSync();
-		expect(countSpan.textContent).toBe('1');
-	});
-
-	it('handles boolean attributes with no prop value provides', () => {
-		component App() {
-			<div class="container">
-				<button onClick={() => console.log("clicked!")} disabled>{"Button"}</button>
-				<input type="checkbox" checked />
-			</div>
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('basic operations', () => {
-		component App() {
-			let count = track(0)
-			<div>{@count++}</div>
-			<div>{++@count}</div>
-			<div>{5}</div>
-			<div>{@count}</div>
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('can retain reactivity for destructure rest via track trackSplit', () => {
-		let logs = [];
-
-		component App() {
-			let count = track(0);
-			let name = track('Click Me');
-
-			function buttonRef(el) {
-				logs.push('ref called');
-				return () => {
-					logs.push('cleanup ref');
-				};
-			}
-
-			<Child
-				class="my-button"
-				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-				{@count}
-				{ref buttonRef}
-			>{@name}</Child>
-
-			<button onClick={() => @count++}>{'Increment Count'}</button>
-		}
-
-		component Child(props: PropsWithChildren<{ count: Tracked<number> }>) {
-			const [children, count, rest] = trackSplit(props, ['children', 'count']);
-
-			if (@count < 2) {
-				<button {...@rest}><@children /></button>
-			}
-			<pre>{@count}</pre>
-		}
-
-		render(App);
-		flushSync();
-
-		const buttonClickMe = container.querySelectorAll('button')[0];
-		const buttonIncrement = container.querySelectorAll('button')[1];
-		const countPre = container.querySelector('pre');
-
-		expect(buttonClickMe.textContent).toBe('Click Me');
-		expect(countPre.textContent).toBe('0');
-		expect(logs).toEqual(['ref called']);
-
-
-		buttonClickMe.click();
-		buttonIncrement.click();
-		flushSync();
-
-		expect(buttonClickMe.textContent).toBe('Clicked');
-		expect(countPre.textContent).toBe('1');
-
-		buttonIncrement.click();
-		flushSync();
-
-		expect(logs).toEqual(['ref called','cleanup ref']);
-	});
-
-	it('errors on invalid value as null for track with trackSplit', () => {
-		component App() {
-			let message = track('');
-
-			try{
-				const [a, b, rest] = trackSplit(null, ['a', 'b']);
-			} catch(e) {
-				@message = e.message;
-			}
-
-			<pre>{@message}</pre>
-		}
-
-		render(App);
-
-		const pre = container.querySelectorAll('pre')[0];
-		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-	});
-
-	it('errors on invalid value as array for track with trackSplit', () => {
-		component App() {
-			let message = track('');
-
-			try{
-				const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
-			} catch(e) {
-				@message = e.message;
-			}
-
-			<pre>{@message}</pre>
-		}
-
-		render(App);
-
-		const pre = container.querySelectorAll('pre')[0];
-		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-	});
-
-	it('errors on invalid value as tracked for track with trackSplit', () => {
-		component App() {
-			const t = track({a: 1, b: 2, c: 3});
-			let message = track('');
-
-			try{
-				const [a, b, rest] = trackSplit(t, ['a', 'b']);
-			} catch(e) {
-				@message = e.message;
-			}
-
-			<pre>{@message}</pre>
-		}
-
-		render(App);
-
-		const pre = container.querySelectorAll('pre')[0];
-		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-	});
-
-	it('returns undefined for non-existent props in track with trackSplit', () => {
-		component App() {
-			const [a, b, rest] = trackSplit({a: 1, c: 1}, ['a', 'b']);
-
-			<pre>{@a}</pre>
-			<pre>{String(@b)}</pre>
-			<pre>{@rest.c}</pre>
-		}
-
-		render(App);
-
-		const preA = container.querySelectorAll('pre')[0];
-		const preB = container.querySelectorAll('pre')[1];
-		const preC = container.querySelectorAll('pre')[2];
-
-		expect(preA.textContent).toBe('1');
-		expect(preB.textContent).toBe('undefined');
-		expect(preC.textContent).toBe('1');
-	});
-
-	it('returns the same tracked object if plain track is called with a tracked object', () => {
-		component App() {
-			const t = track({a: 1, b: 2, c: 3});
-			const doublet = track(t);
-
-			<pre>{t === doublet}</pre>
-		}
-
-		render(App);
-
-		const pre = container.querySelectorAll('pre')[0];
-		expect(pre.textContent).toBe('true');
-	});
-
-	it('should handle lexical scopes correctly', () => {
-		component App() {
-			<section>
-				let sectionData = 'Nested scope variable';
-
-				{sectionData}
-			</section>
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('uses track get and set where both mutate value', () => {
-		component App() {
-			let count = track(0, v => v + 1, v => v * 2);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
-		}
-
-		render(App);
-
-		const countDiv = container.querySelector('.count');
-		const button = container.querySelector('button');
-
-		expect(countDiv.textContent).toBe('1');
-
-		button.click();
-		flushSync();
-		expect(countDiv.textContent).toBe('5');
-	});
-
-	it('uses track get and set where set only mutates value', () => {
-		component App() {
-			let count = track(1, v => v, v => v * 2);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
-		}
-
-		render(App);
-
-		const countDiv = container.querySelector('.count');
-		const button = container.querySelector('button');
-
-		expect(countDiv.textContent).toBe('1');
-
-		button.click();
-		flushSync();
-		expect(countDiv.textContent).toBe('4');
-	});
-
-	it('uses track get and set where get only mutates value', () => {
-		component App() {
-			let count = track(0, v => v + 1, v => v);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
-		}
-
-		render(App);
-
-		const countDiv = container.querySelector('.count');
-		const button = container.querySelector('button');
-
-		expect(countDiv.textContent).toBe('1');
-
-		button.click();
-		flushSync();
-		expect(countDiv.textContent).toBe('3');
-	});
-
-	it('passes in next and prev to track set function', () => {
-		let logs = [];
-
-		component App() {
-			let count = track(0, v => v, (next, prev) => {
-				logs.push(prev, next);
-				return next;
-			});
-
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
-		}
-
-		render(App);
-
-		const button = container.querySelector('button');
-		button.click();
-		flushSync();
-
-		expect(logs).toEqual([0, 1]);
-	});
-
-	it('works as a reactive TrackedArray when constructed using # syntactic sugar', () => {
-		component App() {
-			const array = #[1, 2, 3];
-
-			<pre>{String(array[3])}</pre>
-			<pre>{array[0]}</pre>
-			<pre>{TRACKED_ARRAY in array}</pre>
-
-			<button onClick={() => { array.push(array.length + 1); array[0] = array[0] + 1 }}>{'Add'}</button>
-		}
-
-		render(App);
-
-		const pre1 = container.querySelectorAll('pre')[0];
-		const pre2 = container.querySelectorAll('pre')[1];
-		const pre3 = container.querySelectorAll('pre')[2];
-		const button = container.querySelector('button');
-
-		expect(pre1.textContent).toBe('undefined');
-		expect(pre2.textContent).toBe('1');
-		expect(pre3.textContent).toBe('true');
-
-		button.click();
-		flushSync();
-
-		expect(pre1.textContent).toBe('4');
-		expect(pre2.textContent).toBe('2');
-	});
-
-	it('handles boolean props correctly', () => {
-		component App() {
-			<div data-disabled />
-
-			<Child isDisabled />
-		}
-
-		component Child({ isDisabled }) {
-			<input disabled={isDisabled} />
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('tick function', async () => {
-		let resolve;
-		const promise = new Promise((res) => (resolve = res));
-
-		component Basic() {
-			let value = track(0);
-			effect(() => {
-				untrack(() => {
-					@value++;
-					tick().then(() => resolve());
-				});
-			});
-			<p>{@value}</p>
-		}
-		render(Basic);
-
-		const p = container.querySelector('p');
-		expect(p.textContent).toBe('0');
-		await promise;
-		expect(p.textContent).toBe('1');
-	});
-
-	it('errors on mutating tracked value inside computed track() evaluation', () => {
-		component Basic() {
-			let count = track(0);
-
-			const doubled = track(() => {
-				try {
-					@count *= 2;
-				} catch (e) {
-					error = e.message;
-				}
-			});
-
-			<p>{@doubled}</p>
-		}
-
-		render(Basic);
-
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
-	});
-
-	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
-		component Basic() {
-			let count = track(0);
-
-			const doubled = track(() => {
-				try {
-					untrack(() => {
-						@count *= 2;
-					});
-				} catch (e) {
-					error = e.message;
-				}
-			});
-
-			<p>{@doubled}</p>
-		}
-
-		render(Basic);
-
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
-	});
-
-	it("errors on mutating a tracked variable in track() getter", () => {
-		component Basic() {
-			let count = track(0);
-
-			const doubled = track(0, (value) => {
-				try {
-					@count += 1;
-				} catch (e) {
-					error = e.message;
-				}
-				return value;
-			});
-
-			<p>{@doubled}</p>
-		}
-
-		render(Basic);
-
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
-	});
-
-	it("doesn't error on mutating a tracked variable in track() setter", () => {
-		component Basic() {
-			let count = track(0);
-
-			const doubled = track(0, undefined, (value) => {
-				@count += value;
-				return value;
-			});
-
-			<p>{@doubled}</p>
-		}
-
-		render(Basic);
-
-		expect(error).toBe(undefined);
-	});
-
-	it('unwraps tracked values inside effect', () => {
-		let state = {};
-
-		component Basic() {
-			let count = track(0);
-
-			effect(() => {
-				state.count = @count;
-			})
-		}
-
-		render(Basic);
-		flushSync();
-
-		expect(state.count).toBe(0);
-	});
-
-	it('does not unwrap values with update expressions inside effect', () => {
-		let state = {};
-
-		component Basic() {
-			let count = track(5);
-
-			effect(() => {
-				untrack(() => {
-					state.initialValue = @count;
-					state.preIncrement = ++@count;
-					state.postIncrement = @count++;
-					state.preDecrement = --@count;
-					state.postDecrement = @count--;
-					state.finalValue = @count;
-				});
-			})
-		}
-
-		render(Basic);
-		flushSync();
-
-		expect(state.initialValue).toBe(5);
-		expect(state.preIncrement).toBe(6);
-		expect(state.postIncrement).toBe(6);
-		expect(state.preDecrement).toBe(6);
-		expect(state.postDecrement).toBe(6);
-		expect(state.finalValue).toBe(5);
-	});
-});