ripple 0.3.127 → 0.4.0

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

@@ -1,4 +1,5 @@
 import type {
+	Derived,
 	Tracked,
 	PropsWithChildren,
 	PropsWithExtras,
@@ -74,11 +75,11 @@ describe('basic client > components & composition', () => {
 		}
 
 		function Basic() @{
-			let &[test] = track(false);
+			const test = track(false);
 			<>
 				<Card test={TestSlot} />
 				<div>
-					{test ? 'yes' : 'no'}
+					{test.value ? 'yes' : 'no'}
 				</div>
 			</>
 		}
@@ -210,16 +211,16 @@ describe('basic client > 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>
 			</>
 		}
@@ -256,14 +257,14 @@ describe('basic client > 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>
 			</>
@@ -292,15 +293,15 @@ describe('basic client > components & composition', () => {
 	});
 
 	it('updates explicit text children props reactively', () => {
-		function TextProp(&{ children }: PropsWithChildren<{}>) @{
-			<div class="text-prop">{children}</div>
+		function TextProp({ children }: { children: Derived<string> }) @{
+			<div class="text-prop">{children.value}</div>
 		}
 
 		function Basic() @{
-			let &[show] = track(false);
+			const show = track(false);
 			<>
-				<TextProp children={show ? 'hello' : ''} />
-				<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+				<TextProp children={track(() => (show.value ? 'hello' : ''))} />
+				<button class="show-text" onClick={() => (show.value = true)}>{'Show'}</button>
 			</>
 		}
 
@@ -317,7 +318,7 @@ describe('basic client > components & composition', () => {
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		function App() @{
 			const SYMBOL_PROP = Symbol();
-			let &[hasError] = track(false);
+			const hasError = track(false);
 			const obj: {
 				count: Tracked<number>;
 				increment: () => void;
@@ -337,28 +338,28 @@ describe('basic client > components & composition', () => {
 			const obj2 = null;
 
 			function trigger_nonexistent() {
-				hasError = did_error(() => {
+				hasError.value = did_error(() => {
 					// @ts-ignore
 					obj['nonexistent']();
 				});
 			}
 
 			function trigger_nonexistent_chaining() {
-				hasError = did_error(() => {
+				hasError.value = did_error(() => {
 					// @ts-ignore
 					obj['nonexistent']?.();
 				});
 			}
 
 			function trigger_object_null() {
-				hasError = did_error(() => {
+				hasError.value = did_error(() => {
 					// @ts-ignore
 					obj2['nonexistent']();
 				});
 			}
 
 			function trigger_object_null_chained() {
-				hasError = did_error(() => {
+				hasError.value = did_error(() => {
 					// @ts-ignore
 					obj2?.['nonexistent']?.();
 				});
@@ -373,7 +374,7 @@ describe('basic client > components & composition', () => {
 				<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
 				<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 				<span>{obj.count.value}</span>
-				<span>{hasError}</span>
+				<span>{hasError.value}</span>
 			</>
 		}
 
@@ -501,10 +502,10 @@ describe('basic client > components & composition', () => {
 		}
 
 		function App() @{
-			let &[Content] = track(() => Noop);
+			const Content = track(() => Noop, undefined, true);
 			<>
-				<{Content} />
-				<button onClick={() => (Content = Op)}>{'Show Op'}</button>
+				<{Content.value} />
+				<button onClick={() => (Content.value = Op)}>{'Show Op'}</button>
 			</>
 		}
 
@@ -648,7 +649,7 @@ describe('basic client > components & composition', () => {
 			<div class="z">{'I am Z'}</div>
 		}
 
-		function Child(&{ Z }: { Z: Component }) @{
+		function Child({ Z }: { Z: Component }) @{
 			<div class="child">
 				{'Child Component: '}
 				<Z />
@@ -666,3 +667,76 @@ describe('basic client > components & composition', () => {
 		expect(container.querySelector('.wrapper .z').textContent).toBe('I am Z');
 	});
 });
+
+describe('all-component children', () => {
+	// Children that are all static components render into their parent through
+	// an append-into sentinel instead of a `<!>` placeholder per child. A child
+	// whose root is control flow must still re-render at its own position.
+	it('re-renders a root @if child in place, before its siblings', () => {
+		function Toggle(props: { on: Tracked<boolean> }) @{
+			@if (props.on.value) {
+				<span>{'A'}</span>
+			} @else {
+				<span>{'a'}</span>
+			}
+		}
+
+		function Trailing() @{
+			<span>{'B'}</span>
+		}
+
+		function App() @{
+			const on = track(true);
+			<>
+				<div class="host">
+					<Toggle on={on} />
+					<Trailing />
+				</div>
+				<button onClick={() => (on.value = !on.value)}>{'Toggle'}</button>
+			</>
+		}
+
+		render(App);
+
+		const host = container.querySelector('.host');
+		expect(host.textContent).toBe('AB');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(host.textContent).toBe('aB');
+	});
+
+	it('moves a root keyed @for child item to the end of its own list', () => {
+		function List(props: { items: Tracked<number[]> }) @{
+			@for (const item of props.items.value; key item) {
+				<span>{item}</span>
+			}
+		}
+
+		function Trailing() @{
+			<span>{'end'}</span>
+		}
+
+		function App() @{
+			const items = track([1, 2, 3]);
+			<>
+				<div class="host">
+					<List items={items} />
+					<Trailing />
+				</div>
+				<button
+					onClick={() => (items.value = [items.value[1], items.value[2], items.value[0]])}
+				>{'Rotate'}</button>
+			</>
+		}
+
+		render(App);
+
+		const host = container.querySelector('.host');
+		expect(host.textContent).toBe('123end');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(host.textContent).toBe('231end');
+	});
+});

package/tests/client/basic/basic.errors.test.tsrx

@@ -4,20 +4,20 @@ import { compile } from '@tsrx/ripple';
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {
 		function Basic() @{
-			let &[hasError] = track(false);
-			let &[errorMessage] = track('');
+			const hasError = track(false);
+			const errorMessage = track('');
 			const triggerError = () => {
 				try {
 					throw new Error('Test error');
 				} catch (e) {
-					hasError = true;
-					errorMessage = (e as Error).message;
+					hasError.value = true;
+					errorMessage.value = (e as Error).message;
 				}
 			};
 			<div>
 				<button onClick={triggerError}>{'Trigger Error'}</button>
-				@if (hasError) {
-					<div class="error">{'Error caught: ' + errorMessage}</div>
+				@if (hasError.value) {
+					<div class="error">{'Error caught: ' + errorMessage.value}</div>
 				} @else {
 					<div class="success">{'No error'}</div>
 				}
@@ -113,15 +113,15 @@ describe('basic client > errors', () => {
 
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
 		function Basic() @{
-			let &[count] = track(0);
-			const &[doubled] = track(() => {
+			const count = track(0);
+			const doubled = track(() => {
 				try {
-					count *= 2;
+					count.value *= 2;
 				} catch (e) {
 					error = (e as Error).message;
 				}
 			});
-			<p>{doubled}</p>
+			<p>{doubled.value}</p>
 		}
 
 		render(Basic);
@@ -133,17 +133,17 @@ describe('basic client > errors', () => {
 
 	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
 		function Basic() @{
-			let &[count] = track(0);
-			const &[doubled] = track(() => {
+			const count = track(0);
+			const doubled = track(() => {
 				try {
 					untrack(() => {
-						count *= 2;
+						count.value *= 2;
 					});
 				} catch (e) {
 					error = (e as Error).message;
 				}
 			});
-			<p>{doubled}</p>
+			<p>{doubled.value}</p>
 		}
 
 		render(Basic);
@@ -155,16 +155,16 @@ describe('basic client > errors', () => {
 
 	it('errors on mutating a tracked variable in track() getter', () => {
 		function Basic() @{
-			let &[count] = track(0);
-			const &[doubled] = track(0, (value) => {
+			const count = track(0);
+			const doubled = track(0, (value) => {
 				try {
-					count += 1;
+					count.value += 1;
 				} catch (e) {
 					error = (e as Error).message;
 				}
 				return value;
 			});
-			<p>{doubled}</p>
+			<p>{doubled.value}</p>
 		}
 
 		render(Basic);

package/tests/client/basic/basic.events.test.tsrx

@@ -4,19 +4,19 @@ import { flushSync, track } from 'ripple';
 describe('basic client > events', () => {
 	it('renders with different event types', () => {
 		function Basic() @{
-			let &[focusCount] = track(0);
-			let &[clickCount] = track(0);
+			const focusCount = track(0);
+			const clickCount = track(0);
 			<>
 				<button
 					onFocus={() => {
-						focusCount++;
+						focusCount.value++;
 					}}
 					onClick={() => {
-						clickCount++;
+						clickCount.value++;
 					}}
 				>{'Test Button'}</button>
-				<div class="focus-count">{focusCount}</div>
-				<div class="click-count">{clickCount}</div>
+				<div class="focus-count">{focusCount.value}</div>
+				<div class="click-count">{clickCount.value}</div>
 			</>
 		}
 
@@ -37,24 +37,24 @@ describe('basic client > events', () => {
 
 	it('renders with capture events', () => {
 		function Basic() @{
-			let &[captureClicks] = track(0);
-			let &[bubbleClicks] = track(0);
+			const captureClicks = track(0);
+			const bubbleClicks = track(0);
 			<>
 				<div
 					onClick={{
 						handleEvent: () => {
-							captureClicks++;
+							captureClicks.value++;
 						},
 						capture: true,
 					}}
 				>
 					<button
 						onClick={() => {
-							bubbleClicks++;
+							bubbleClicks.value++;
 						}}
 					>{'Click me'}</button>
-					<div class="capture-count">{captureClicks}</div>
-					<div class="bubble-count">{bubbleClicks}</div>
+					<div class="capture-count">{captureClicks.value}</div>
+					<div class="bubble-count">{bubbleClicks.value}</div>
 				</div>
 			</>
 		}
@@ -74,20 +74,20 @@ describe('basic client > events', () => {
 
 	it('renders with event listeners in spread props', () => {
 		function Basic() @{
-			let &[count] = track(0);
+			const count = track(0);
 			const minus = {
 				onClick() {
-					count--;
+					count.value--;
 				},
 			};
 			const plus = {
 				onClick() {
-					count++;
+					count.value++;
 				},
 			};
 			<div>
 				<button {...minus} class="minus">{'-'}</button>
-				<span class="count">{count}</span>
+				<span class="count">{count.value}</span>
 				<button {...plus} class="plus">{'+'}</button>
 			</div>
 		}
@@ -120,15 +120,15 @@ describe('basic client > events', () => {
 
 	it('removes event listeners from spread props when they are replaced by another prop', () => {
 		function Basic() @{
-			let &[enabled] = track(true);
-			let &[count] = track(0);
+			const enabled = track(true);
+			const count = track(0);
 			<>
 				<button
 					class="target"
-					{...(enabled ? { onClick: () => count++ } : { title: 'disabled' })}
+					{...(enabled.value ? { onClick: () => count.value++ } : { title: 'disabled' })}
 				>{'target'}</button>
-				<button class="toggle" onClick={() => (enabled = false)}>{'toggle'}</button>
-				<span class="count">{count}</span>
+				<button class="toggle" onClick={() => (enabled.value = false)}>{'toggle'}</button>
+				<span class="count">{count.value}</span>
 			</>
 		}
 
@@ -152,22 +152,22 @@ describe('basic client > events', () => {
 
 	it('handles both delegated and non-delegated events in spread props', () => {
 		function Basic() @{
-			let &[clickCount] = track(0);
-			let &[focusCount] = track(0);
+			const clickCount = track(0);
+			const focusCount = track(0);
 			const mixedHandler = {
 				onClick() {
 					// Delegated event
-					clickCount++;
+					clickCount.value++;
 				},
 				onFocus() {
 					// Non-delegated event
-					focusCount++;
+					focusCount.value++;
 				},
 			};
 			<div>
 				<button {...mixedHandler} class="mixed-button">{'Test'}</button>
-				<span class="click-count">{clickCount}</span>
-				<span class="focus-count">{focusCount}</span>
+				<span class="click-count">{clickCount.value}</span>
+				<span class="focus-count">{focusCount.value}</span>
 			</div>
 		}
 
@@ -193,30 +193,30 @@ describe('basic client > events', () => {
 
 	it('renders with complex event handling and state updates', () => {
 		function Basic() @{
-			let &[counter] = track(0);
-			let &[history] = track<string[]>([]);
-			let &[isEven] = track(true);
+			const counter = track(0);
+			const history = track<string[]>([]);
+			const isEven = track(true);
 			const handleIncrement = () => {
-				counter++;
-				history = [...history, `Inc to ${counter}`];
-				isEven = counter % 2 === 0;
+				counter.value++;
+				history.value = [...history.value, `Inc to ${counter.value}`];
+				isEven.value = counter.value % 2 === 0;
 			};
 			const handleDecrement = () => {
-				counter--;
-				history = [...history, `Dec to ${counter}`];
-				isEven = counter % 2 === 0;
+				counter.value--;
+				history.value = [...history.value, `Dec to ${counter.value}`];
+				isEven.value = counter.value % 2 === 0;
 			};
 			const handleReset = () => {
-				counter = 0;
-				history = [...history, 'Reset'];
-				isEven = true;
+				counter.value = 0;
+				history.value = [...history.value, 'Reset'];
+				isEven.value = true;
 			};
 			<>
-				<div class="counter">{counter}</div>
+				<div class="counter">{counter.value}</div>
 				<div class="parity">
-					{isEven ? 'Even' : 'Odd'}
+					{isEven.value ? 'Even' : 'Odd'}
 				</div>
-				<div class="history-count">{history.length}</div>
+				<div class="history-count">{history.value.length}</div>
 				<button class="inc-btn" onClick={handleIncrement}>{'+'}</button>
 				<button class="dec-btn" onClick={handleDecrement}>{'-'}</button>
 				<button class="reset-btn" onClick={handleReset}>{'Reset'}</button>

package/tests/client/basic/basic.get-set.test.tsrx

@@ -15,10 +15,10 @@ describe('basic client > tracked value access', () => {
 
 	it('gets tracked value after mutation', () => {
 		function Test() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<>
-				<p>{count}</p>
-				<button onClick={() => count++}>{'increment'}</button>
+				<p>{count.value}</p>
+				<button onClick={() => count.value++}>{'increment'}</button>
 			</>
 		}
 
@@ -36,14 +36,14 @@ describe('basic client > tracked value access', () => {
 
 	it('gets tracked value after multiple mutations', () => {
 		function Test() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<>
-				<p>{count}</p>
+				<p>{count.value}</p>
 				<button
 					onClick={() => {
-						count++;
-						count++;
-						count++;
+						count.value++;
+						count.value++;
+						count.value++;
 					}}
 				>{'increment'}</button>
 			</>