ripple 0.3.128 → 0.4.1

package/tests/hydration/tsconfig.text-types.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true
+  },
+  "include": ["components/typed-text.tsrx", "components/text-types.ts"]
+}

package/tests/hydration/typed-text.test.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { flushSync as flush_sync, hydrate } from 'ripple';
+import { render } from 'ripple/server';
+import { container } from '../setup-hydration.js';
+import { TypedText as server_typed_text } from './compiled/server/typed-text.js';
+import { TypedText as client_typed_text } from './compiled/client/typed-text.js';
+
+describe('typed text hydration', () => {
+	it('reuses server text nodes and updates imported primitive types', async () => {
+		const { body } = await render(server_typed_text);
+		expect(body).toContain('<first>');
+		container.innerHTML = body;
+		const run = container.querySelector('.typed-run');
+		const text = run.firstChild;
+		const number = container.querySelector('.typed-number').firstChild;
+		const tail = run.querySelector('span');
+		const unmount = hydrate(client_typed_text, { target: container });
+		try {
+			expect(container.querySelector('.typed-run')).toBe(run);
+			expect(run.firstChild).toBe(text);
+			expect(run.textContent).toBe('value: <first>2tail');
+			expect(container.querySelector('.typed-number').firstChild).toBe(number);
+			container.querySelector('button').click();
+			flush_sync();
+			expect(run.textContent).toBe('value: &next3tail');
+			expect(run.firstChild).toBe(text);
+			expect(run.querySelector('span')).toBe(tail);
+			expect(container.querySelector('.typed-number').firstChild).toBe(number);
+			expect(number.textContent).toBe('3');
+		} finally {
+			unmount();
+		}
+	});
+});

package/tests/server/await.test.tsrx

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

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

@@ -19,9 +19,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class attribute', async () => {
 		function Basic() @{
-			let &[active] = track(false);
+			const active = track(false);
 			<>
-				<div class={active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+				<div class={active.value ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 				<style>
 					.active {
 						color: green;
@@ -135,9 +135,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class object', async () => {
 		function Basic() @{
-			let &[active] = track(false);
+			const active = track(false);
 			<>
-				<div class={{ active: active, inactive: !active }}>{'Dynamic Class'}</div>
+				<div class={{ active: active.value, inactive: !active.value }}>{'Dynamic Class'}</div>
 				<style>
 					.active {
 						color: green;
@@ -162,10 +162,10 @@ describe('basic server > attribute rendering', () => {
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
 			function Basic() @{
-				let &[selected] = track(1);
+				const selected = track(1);
 				<>
-					<div class={selected === 0 ? 'selected' : ''}>{`div 1`}</div>
-					<div class={selected === 0 ? 'selected' : ''}>{`div 2`}</div>
+					<div class={selected.value === 0 ? 'selected' : ''}>{`div 1`}</div>
+					<div class={selected.value === 0 ? 'selected' : ''}>{`div 2`}</div>
 					<style>
 						div {
 							background: green;
@@ -193,8 +193,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic id attribute', async () => {
 		function Basic() @{
-			let &[count] = track(0);
-			<div id={`item-${count}`}>{'Dynamic ID'}</div>
+			const count = track(0);
+			<div id={`item-${count.value}`}>{'Dynamic ID'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -207,8 +207,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic style attribute', async () => {
 		function Basic() @{
-			let &[color] = track('red');
-			<div style={`color: ${color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+			const color = track('red');
+			<div style={`color: ${color.value}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -222,8 +222,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', async () => {
 		function Basic() @{
-			let &[color] = track('red');
-			<div style={{ color: color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
+			const color = track('red');
+			<div style={{ color: color.value, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -235,10 +235,38 @@ describe('basic server > attribute rendering', () => {
 		expect(div.style.fontWeight).toBe('bold');
 	});
 
+	it.each([undefined, null])('omits %s style values from HTML and SVG attributes', async (
+		empty,
+	) => {
+		function Basic() @{
+			const styles = {
+				width: empty,
+				'--scale': empty,
+				margin: 0,
+				opacity: 0,
+				'--literal': 'undefined',
+				'--literal-null': 'null',
+			};
+			<>
+				<div style={styles} />
+				<svg {...{ style: styles }} />
+			</>
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+
+		for (const element of document.querySelectorAll('div, svg')) {
+			expect(element.getAttribute('style')).toBe(
+				'margin: 0; opacity: 0; --literal: undefined; --literal-null: null;',
+			);
+		}
+	});
+
 	it('render tracked variable as style attribute', async () => {
 		function Basic() @{
-			let &[style] = track({ color: 'red', fontWeight: 'bold' });
-			<div {style}>{'Dynamic Style'}</div>
+			const style = track({ color: 'red', fontWeight: 'bold' });
+			<div style={style.value}>{'Dynamic Style'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -363,9 +391,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as false', async () => {
 		function Basic() @{
-			let &[disabled] = track(false);
-			let &[checked] = track(false);
-			<input type="checkbox" {disabled} {checked} />
+			const disabled = track(false);
+			const checked = track(false);
+			<input type="checkbox" disabled={disabled.value} checked={checked.value} />
 		}
 
 		const { body } = await render(Basic);
@@ -396,9 +424,9 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as true', async () => {
 		function Basic() @{
-			let &[disabled] = track(true);
-			let &[checked] = track(true);
-			<input type="checkbox" {disabled} {checked} />
+			const disabled = track(true);
+			const checked = track(true);
+			<input type="checkbox" disabled={disabled.value} checked={checked.value} />
 		}
 
 		const { body } = await render(Basic);
@@ -429,8 +457,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders formnovalidate as a boolean attribute', async () => {
 		function Basic() @{
-			let &[formnovalidate] = track(true);
-			<button {formnovalidate}>{'Submit'}</button>
+			const formnovalidate = track(true);
+			<button formnovalidate={formnovalidate.value}>{'Submit'}</button>
 		}
 
 		const { body } = await render(Basic);
@@ -445,8 +473,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders hidden as a boolean attribute when true', async () => {
 		function Basic() @{
-			let &[hidden] = track(true);
-			<div {hidden}>{'Hidden content'}</div>
+			const hidden = track(true);
+			<div hidden={hidden.value}>{'Hidden content'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -461,8 +489,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('does not render hidden when false', async () => {
 		function Basic() @{
-			let &[hidden] = track(false);
-			<div {hidden}>{'Visible content'}</div>
+			const hidden = track(false);
+			<div hidden={hidden.value}>{'Visible content'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -476,12 +504,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', async () => {
 		function Basic() @{
-			let &[theme] = track('light');
-			let &[size] = track('medium');
+			const theme = track('light');
+			const size = track('medium');
 			<div
-				class={`theme-${theme} size-${size}`}
-				data-theme={theme}
-				data-size={size}
+				class={`theme-${theme.value} size-${size.value}`}
+				data-theme={theme.value}
+				data-size={size.value}
 			>{'Multiple Dynamic Attributes'}</div>
 		}
 
@@ -497,11 +525,11 @@ describe('basic server > attribute rendering', () => {
 
 	it('render conditional attributes', async () => {
 		function Basic() @{
-			let &[showTitle] = track(false);
-			let &[showAria] = track(false);
+			const showTitle = track(false);
+			const showAria = track(false);
 			<div
-				title={showTitle ? 'This is a title' : undefined}
-				aria-label={showAria ? 'Accessible label' : undefined}
+				title={showTitle.value ? 'This is a title' : undefined}
+				aria-label={showAria.value ? 'Accessible label' : undefined}
 			>{'Conditional Attributes'}</div>
 		}
 
@@ -516,11 +544,11 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		function Basic() @{
-			let &[attrs] = track<TestAttributes>({
+			const attrs = track<TestAttributes>({
 				class: 'initial',
 				id: 'test-1',
 			});
-			<div {...attrs}>{'Spread Attributes'}</div>
+			<div {...attrs.value}>{'Spread Attributes'}</div>
 		}
 
 		const { body } = await render(Basic);
@@ -535,12 +563,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
 		function Basic() @{
-			let &[value] = track('parent-class');
-			let &[nested] = track('nested-class');
+			const value = track('parent-class');
+			const nested = track('nested-class');
 			<>
-				<p class={value}>{'Colored parent value'}</p>
+				<p class={value.value}>{'Colored parent value'}</p>
 				<div>
-					<p class={nested}>{'Colored nested value'}</p>
+					<p class={nested.value}>{'Colored nested value'}</p>
 				</div>
 			</>
 		}

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

@@ -1,5 +1,6 @@
 import { track } from 'ripple';
 import type {
+	Derived,
 	Tracked,
 	PropsWithChildren,
 	PropsWithExtras,
@@ -8,6 +9,61 @@ import type {
 } from 'ripple';
 
 describe('basic server > components & composition', () => {
+	it('renders a read-only view passed through readOnly()', async () => {
+		function Child({ count }: { count: Derived<number> }) @{
+			<span>{count.value}</span>
+		}
+
+		function App() @{
+			const count = track(5);
+			<div>
+				<Child count={count.readOnly()} />
+			</div>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<div><span>5</span></div>');
+	});
+
+	it('renders rest and default pattern names in a keyed loop', async () => {
+		function App() @{
+			const rows = [
+				{ id: 1, name: 'one', tags: ['a', 'b'] },
+			];
+			<ul>
+				@for (const { id, ...rest } of rows; key id) {
+					<li>{rest.name}</li>
+				}
+				@for (const [head, second = 'none', ...others] of rows.map((row) => row.tags); key head) {
+					<li>{head + ':' + second + ':' + others.length}</li>
+				}
+			</ul>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<ul><li>one</li><li>a:b:0</li></ul>');
+	});
+
+	it('renders nothing for a component prop that is undefined', async () => {
+		function Child({ Comp }: { Comp?: Component }) @{
+			<div>
+				{'before'}
+				<Comp />
+				{'after'}
+			</div>
+		}
+
+		function App() @{
+			<Child />
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<div>beforeafter</div>');
+	});
+
 	async function render_expected_invalid_component(App: Component) {
 		const console_error_spy = vi.spyOn(console, 'error').mockImplementation(() => {});
 		try {
@@ -186,16 +242,16 @@ describe('basic server > components & composition', () => {
 		}
 
 		function Basic() @{
-			let &[clicked] = track(false);
+			const clicked = track(false);
 			<>
 				<Card
 					title="Test Card"
 					content="This is a test card"
 					buttonText="Click me"
-					onAction={() => (clicked = true)}
+					onAction={() => (clicked.value = true)}
 				/>
 				<div class="status">
-					{clicked ? 'Clicked' : 'Not clicked'}
+					{clicked.value ? 'Clicked' : 'Not clicked'}
 				</div>
 			</>
 		}
@@ -228,14 +284,14 @@ describe('basic server > components & composition', () => {
 		}
 
 		function Basic() @{
-			let &[message, messageTracked] = track('Hello');
-			let &[number, numberTracked] = track(1);
+			const message = track('Hello');
+			const number = track(1);
 			<>
-				<ChildComponent text={messageTracked} count={numberTracked} />
+				<ChildComponent text={message} count={number} />
 				<button
 					onClick={() => {
-						message = message === 'Hello' ? 'Goodbye' : 'Hello';
-						number++;
+						message.value = message.value === 'Hello' ? 'Goodbye' : 'Hello';
+						number.value++;
 					}}
 				>{'Update Props'}</button>
 			</>

package/tests/server/basic.test.tsrx

@@ -397,10 +397,10 @@ second
 
 	it('renders tracked state updates', async () => {
 		function Counter() @{
-			let &[count] = track(0);
-			count++;
-			count = count + 5;
-			<div>{count}</div>
+			const count = track(0);
+			count.value++;
+			count.value = count.value + 5;
+			<div>{count.value}</div>
 		}
 
 		const { body } = await render(Counter);
@@ -445,10 +445,12 @@ second
 
 	it('renders spread props with tracked values', async () => {
 		function SpreadProps() @{
-			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>
+			const id = track('unique-id');
+			const isActive = track(true);
+			const styles = track({ color: 'red', fontSize: '16px' });
+			<div
+				{...{ id: id.value, class: { active: isActive.value }, style: styles.value }}
+			>{'Spread Props'}</div>
 		}
 
 		const { body } = await render(SpreadProps);
@@ -460,12 +462,12 @@ second
 
 	it('handles AssignExpressions with tracked values or properties correctly', async () => {
 		function Assignments() @{
-			let &[count] = track(0);
+			const count = track(0);
 			const obj = { value: track(5) };
-			count += 10;
+			count.value += 10;
 			obj.value.value *= 2;
 			<>
-				<div>{count}</div>
+				<div>{count.value}</div>
 				<div>{obj.value.value}</div>
 			</>
 		}
@@ -477,12 +479,12 @@ second
 
 	it(`handles derived changes via tracked dependencies' changes`, async () => {
 		function Derived() @{
-			let &[base] = track(5);
-			let &[multiplier] = track(3);
-			let &[derived] = track(() => base * multiplier);
-			const before = derived;
-			base += 2;
-			const after = derived;
+			const base = track(5);
+			const multiplier = track(3);
+			const derived = track(() => base.value * multiplier.value);
+			const before = derived.value;
+			base.value += 2;
+			const after = derived.value;
 			<>
 				<div>{before}</div>
 				<div>{after}</div>
@@ -496,13 +498,13 @@ second
 
 	it(`handles derived changes based on another derived's dependencies' changes`, async () => {
 		function NestedDerived() @{
-			let &[a] = track(2);
-			let &[b] = track(3);
-			let &[sum] = track(() => a + b);
-			let &[product] = track(() => sum * 2);
-			const before = product;
-			a = 4;
-			const after = product;
+			const a = track(2);
+			const b = track(3);
+			const sum = track(() => a.value + b.value);
+			const product = track(() => sum.value * 2);
+			const before = product.value;
+			a.value = 4;
+			const after = product.value;
 			<>
 				<div>{before}</div>
 				<div>{after}</div>
@@ -516,24 +518,24 @@ second
 
 	it('handles lexical scopes correctly', async () => {
 		function LexicalScopes() @{
-			let &[x] = track(1);
+			const x = track(1);
 			let nested = '';
 			let deep = '';
 			let deeper = '';
 			{
-				let &[x] = track(10);
-				nested = String(x);
+				const x = track(10);
+				nested = String(x.value);
 			}
 			{
-				let &[x] = track(12);
-				deep = String(x);
+				const x = track(12);
+				deep = String(x.value);
 				{
-					let &[x] = track(15);
-					deeper = String(x);
+					const x = track(15);
+					deeper = String(x.value);
 				}
 			}
 			<>
-				<div>{x}</div>
+				<div>{x.value}</div>
 				<div>{nested}</div>
 				<div>
 					{deep}

package/tests/server/compiler.test.tsrx

@@ -47,52 +47,6 @@ beforeAll(() => {
 		expect(code).not.toContain('!');
 	});
 
-	it(
-		'compiles writes to unknown lazy array index 1 through lazy array helpers in SSR output',
-		() => {
-			const source = `function Child({ pair: &[first, second] }) @{
-	second = 10;
-	<div>{first}</div>
-			}
-function App() @{
-	<Child pair={[0, 1]} />
-}`;
-			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
-
-			expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
-			expect(code).not.toContain('lazy[1] =');
-		},
-	);
-
-	it('does not double-wrap member access on lazy array value bindings in SSR output', () => {
-		const source = `function Child({ pair: &[first] }) @{
-	let value = first[0];
-	<div>{value}</div>
-		}
-function App() @{
-	<Child pair={[{ 0: 'x' }]} />
-}`;
-		const { code } = compile(source, 'test.tsrx', { mode: 'server' });
-
-		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
-		expect(code).not.toContain('_$_.lazy_array_get(_$_.lazy_array_get(lazy, 0), 0)');
-	});
-
-	it('throws on indexed access through known tracked lazy destructures in SSR output', () => {
-		const source = `import { track } from 'ripple';
-function App() @{
-	let &[value, tracked_ref] = track({ 0: 'x' });
-	let nested = value[0];
-	tracked_ref[0] = { 0: 'y' };
-	let next = value[0];
-	<div>{nested}{next}</div>
-}`;
-
-		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
-			/Use \.value or &\[\] lazy destructuring/,
-		);
-	});
-
 	it('throws on known tracked indexed access in SSR output', () => {
 		const source = `import { track } from 'ripple';
 function App() @{
@@ -106,33 +60,10 @@ function App() @{
 }`;
 
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
-			/Use \.value or &\[\] lazy destructuring/,
+			/Accessing a tracked object directly is not allowed, use `\.value`/,
 		);
 	});
 
-	it(
-		'compiles indexed access on unknown lazy tracked refs through lazy array helpers in SSR output',
-		() => {
-			const source = `import { track } from 'ripple';
-function Child({ pair: &[value, tracked_ref] }) @{
-	++tracked_ref[0];
-	tracked_ref[0]++;
-	<div>{value}</div>
-}
-function App() @{
-	let tracked = track(0);
-	<Child pair={tracked} />
-}`;
-			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
-
-			expect(code).toContain('_$_.lazy_array_get(lazy, 1)');
-			expect(code).toContain('_$_.lazy_array_update_pre(_$_.lazy_array_get(lazy, 1), 0)');
-			expect(code).toContain('_$_.lazy_array_update(_$_.lazy_array_get(lazy, 1), 0)');
-			expect(code).not.toContain('lazy[1][0]');
-			expect(code).not.toContain('lazy_array_get(lazy, 1)[0]');
-		},
-	);
-
 	it('removes class TypeScript syntax from JS output', () => {
 		const source = `interface BaseEvent {}
 

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

@@ -8,10 +8,10 @@ describe('composite > props', () => {
 		}
 
 		function App() @{
-			let &[foo] = track(123);
+			const foo = track(123);
 			<>
 				<Child />
-				<Child {foo} />
+				<Child foo={foo.value} />
 			</>
 		}
 
@@ -70,10 +70,10 @@ describe('composite > props', () => {
 		}
 
 		function App() @{
-			let &[foo] = track(123);
+			const foo = track(123);
 			<>
 				<Child />
-				<Child {foo} />
+				<Child foo={foo.value} />
 			</>
 		}
 
@@ -85,7 +85,7 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
-		function Button(&{ children, ...rest }: Props) @{
+		function Button({ children, ...rest }: Props) @{
 			<>
 				<button {...rest}>{children}</button>
 				<style>
@@ -99,7 +99,7 @@ describe('composite > props', () => {
 			</>
 		}
 
-		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) @{
+		function Toggle({ pressed, ...rest }: { pressed: Tracked<boolean> }) @{
 			const onClick = () => (pressed.value = !pressed.value);
 			<>
 				<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>