ripple 0.2.216 → 0.3.1

package/tests/hydration/components/if.ripple

@@ -1,5 +1,4 @@
 // If block components for hydration testing
-import { track } from 'ripple';
 
 export component IfTruthy() {
 	const show = true;
@@ -25,7 +24,7 @@ export component IfElse() {
 }
 
 export component ReactiveIf() {
-	let show = track(true);
+	let show = #ripple.track(true);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -40,7 +39,7 @@ export component ReactiveIf() {
 }
 
 export component ReactiveIfElse() {
-	let isOn = track(false);
+	let isOn = #ripple.track(false);
 	<button
 		class="toggle"
 		onClick={() => {
@@ -57,8 +56,8 @@ export component ReactiveIfElse() {
 }
 
 export component NestedIf() {
-	let outer = track(true);
-	let inner = track(true);
+	let outer = #ripple.track(true);
+	let inner = #ripple.track(true);
 	<button
 		class="outer-toggle"
 		onClick={() => {
@@ -86,7 +85,7 @@ export component NestedIf() {
 }
 
 export component IfElseIfChain() {
-	let status = track<'loading' | 'success' | 'error'>('loading');
+	let status = #ripple.track<'loading' | 'success' | 'error'>('loading');
 	<div>
 		<button
 			class="success"

package/tests/hydration/components/mixed-control-flow.ripple

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 export component MixedControlFlowStatic() {
 	const rows = [
 		{ id: 1, kind: 'a', enabled: true },
@@ -31,9 +29,9 @@ export component MixedControlFlowStatic() {
 }
 
 export component MixedControlFlowReactive() {
-	let show = track(true);
-	let mode = track<'a' | 'b'>('a');
-	let items = track([
+	let show = #ripple.track(true);
+	let mode = #ripple.track<'a' | 'b'>('a');
+	let items = #ripple.track([
 		{ id: 1, label: 'One' },
 		{ id: 2, label: 'Two' },
 	]);
@@ -108,7 +106,7 @@ export component MixedControlFlowAsyncPending() {
 	}
 }
 
-component AsyncRow({ label }) {
+component AsyncRow({ label }: { label: string }) {
 	let value = await Promise.resolve(label);
 	<div class="resolved-row">{value}</div>
 }

package/tests/hydration/components/portal.ripple

@@ -13,7 +13,7 @@ export component SimplePortal() {
 
 // Portal with conditional rendering
 export component ConditionalPortal() {
-	let show = @true;
+	let show = #ripple.track(true);
 
 	<div class="container">
 		<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>

package/tests/hydration/components/reactivity.ripple

@@ -1,13 +1,12 @@
 // Reactive components for hydration testing
-import { track } from 'ripple';
 
 export component TrackedState() {
-	let count = track(0);
+	let count = #ripple.track(0);
 	<div class="count">{@count}</div>
 }
 
 export component CounterWithInitial(props: { initial: number }) {
-	let count = track(props.initial);
+	let count = #ripple.track(props.initial);
 	<div>
 		<span class="count">{@count}</span>
 	</div>
@@ -18,24 +17,24 @@ export component CounterWrapper() {
 }
 
 export component ComputedValues() {
-	let a = track(2);
-	let b = track(3);
+	let a = #ripple.track(2);
+	let b = #ripple.track(3);
 	const sum = () => @a + @b;
 	<div class="sum">{sum()}</div>
 }
 
 export component MultipleTracked() {
-	let x = track(10);
-	let y = track(20);
-	let z = track(30);
+	let x = #ripple.track(10);
+	let y = #ripple.track(20);
+	let z = #ripple.track(30);
 	<div class="x">{@x}</div>
 	<div class="y">{@y}</div>
 	<div class="z">{@z}</div>
 }
 
 export component DerivedState() {
-	let firstName = track('John');
-	let lastName = track('Doe');
+	let firstName = #ripple.track('John');
+	let lastName = #ripple.track('Doe');
 	const fullName = () => `${@firstName} ${@lastName}`;
 	<div class="name">{fullName()}</div>
 }

package/tests/hydration/components/return.ripple

@@ -1,5 +1,4 @@
 // Return statement components for hydration testing
-import { track } from 'ripple';
 
 // Basic return - skips content after direct return
 export component DirectReturn() {
@@ -265,7 +264,7 @@ export component ReturnWithElseBothReturn() {
 
 // Reactive return - starts true, can toggle to false
 export component ReactiveReturnTrueToFalse() {
-	let condition = track(true);
+	let condition = #ripple.track(true);
 
 	<button
 		class="toggle"
@@ -284,7 +283,7 @@ export component ReactiveReturnTrueToFalse() {
 
 // Reactive return - starts false, can toggle to true
 export component ReactiveReturnFalseToTrue() {
-	let condition = track(false);
+	let condition = #ripple.track(false);
 
 	<button
 		class="toggle"
@@ -304,7 +303,7 @@ export component ReactiveReturnFalseToTrue() {
 // Reactive nested return - only inner condition (b) is tracked
 export component ReactiveNestedReturn() {
 	let a = true;
-	let b = track(true);
+	let b = #ripple.track(true);
 
 	<button
 		class="toggle"
@@ -397,7 +396,7 @@ export component MultipleSiblingReturns() {
 
 // Reactive sibling returns - cycles first -> second -> fallback
 export component ReactiveSiblingReturns() {
-	let mode = track('first');
+	let mode = #ripple.track('first');
 
 	<button
 		class="toggle"
@@ -429,8 +428,8 @@ export component ReactiveSiblingReturns() {
 
 // Reactive nested returns with tracked outer and inner conditions
 export component ReactiveOuterInnerReturns() {
-	let a = track(true);
-	let b = track(true);
+	let a = #ripple.track(true);
+	let b = #ripple.track(true);
 
 	<button
 		class="toggle-a"
@@ -463,7 +462,7 @@ export component ReactiveOuterInnerReturns() {
 
 // Reactive else-if return chain that transitions between return and non-return states
 export component ReactiveElseIfReturns() {
-	let status = track(0);
+	let status = #ripple.track(0);
 
 	<button
 		class="toggle"
@@ -488,10 +487,10 @@ export component ReactiveElseIfReturns() {
 
 // Deeply nested independent return guards with multiple root-level siblings
 export component ReactiveDeepNestedIndependentReturns() {
-	let c1 = track(false);
-	let c2 = track(false);
-	let c3 = track(false);
-	let c4 = track(false);
+	let c1 = #ripple.track(false);
+	let c2 = #ripple.track(false);
+	let c3 = #ripple.track(false);
+	let c4 = #ripple.track(false);
 
 	<button
 		class="toggle-c1"

package/tests/hydration/components/switch.ripple

@@ -1,7 +1,5 @@
-import { track } from 'ripple';
-
 export component SwitchStatic() {
-	const status = 'success';
+	const status: string = 'success';
 	switch (status) {
 		case 'success':
 			<div class="status-success">{'Success'}</div>
@@ -15,7 +13,7 @@ export component SwitchStatic() {
 }
 
 export component SwitchReactive() {
-	let status = track<'a' | 'b' | 'c'>('a');
+	let status = #ripple.track<'a' | 'b' | 'c'>('a');
 	<button
 		class="toggle"
 		onClick={() => {
@@ -39,7 +37,7 @@ export component SwitchReactive() {
 }
 
 export component SwitchFallthrough() {
-	const val = 1;
+	const val: number = 1;
 	switch (val) {
 		case 1:
 		case 2:
@@ -51,7 +49,7 @@ export component SwitchFallthrough() {
 }
 
 export component SwitchNumericLevels() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="level-toggle"
 		onClick={() => {
@@ -76,7 +74,7 @@ export component SwitchNumericLevels() {
 }
 
 export component SwitchBlockScoped() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="block-toggle"
 		onClick={() => {
@@ -104,7 +102,7 @@ export component SwitchBlockScoped() {
 }
 
 export component SwitchNoBreak() {
-	let level = track<1 | 2 | 3>(1);
+	let level = #ripple.track<1 | 2 | 3>(1);
 	<button
 		class="nobreak-toggle"
 		onClick={() => {

package/tests/server/await.test.ripple

@@ -1,4 +1,4 @@
-import { track, set, get } from 'ripple';
+import { set, get } from 'ripple';
 
 describe('await in control flow', () => {
 	it('all tests are commented out for now as await in control flow is not yet supported', () => {
@@ -8,7 +8,7 @@ describe('await in control flow', () => {
 	// it('should handle await inside if statement', async () => {
 	// 	component App() {
 	// 		let condition = true;
-	// 		let data = track('loading');
+	// 		let data = #ripple.track('loading');
 
 	// 		if (condition) {
 	// 			await new Promise((resolve) => setTimeout(() => {

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

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 describe('basic server > attribute rendering', () => {
 	it('render static attributes', async () => {
 		component Basic() {
@@ -19,7 +17,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class attribute', async () => {
 		component Basic() {
-			let active = track(false);
+			let active = #ripple.track(false);
 
 			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
@@ -89,7 +87,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class object', async () => {
 		component Basic() {
-			let active = track(false);
+			let active = #ripple.track(false);
 
 			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
 
@@ -116,7 +114,7 @@ describe('basic server > attribute rendering', () => {
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
 			component Basic() {
-				let selected = track(1);
+				let selected = #ripple.track(1);
 
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
@@ -147,7 +145,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic id attribute', async () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
 		}
@@ -162,7 +160,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic style attribute', async () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
@@ -178,7 +176,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', async () => {
 		component Basic() {
-			let color = track('red');
+			let color = #ripple.track('red');
 
 			<div style={{ color: @color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
@@ -194,7 +192,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', async () => {
 		component Basic() {
-			let style = track({ color: 'red', fontWeight: 'bold' });
+			let style = #ripple.track({ color: 'red', fontWeight: 'bold' });
 
 			<div {@style}>{'Dynamic Style'}</div>
 		}
@@ -210,7 +208,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked object as style attribute', async () => {
 		component Basic() {
-			let style = #{ color: 'red', fontWeight: 'bold' };
+			let style = #ripple{ color: 'red', fontWeight: 'bold' };
 
 			<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
 		}
@@ -277,8 +275,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as false', async () => {
 		component Basic() {
-			let disabled = track(false);
-			let checked = track(false);
+			let disabled = #ripple.track(false);
+			let checked = #ripple.track(false);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -312,8 +310,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as true', async () => {
 		component Basic() {
-			let disabled = track(true);
-			let checked = track(true);
+			let disabled = #ripple.track(true);
+			let checked = #ripple.track(true);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -347,8 +345,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', async () => {
 		component Basic() {
-			let theme = track('light');
-			let size = track('medium');
+			let theme = #ripple.track('light');
+			let size = #ripple.track('medium');
 
 			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>
 				{'Multiple Dynamic Attributes'}
@@ -367,8 +365,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render conditional attributes', async () => {
 		component Basic() {
-			let showTitle = track(false);
-			let showAria = track(false);
+			let showTitle = #ripple.track(false);
+			let showAria = #ripple.track(false);
 
 			<div
 				title={@showTitle ? 'This is a title' : undefined}
@@ -389,7 +387,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		component Basic() {
-			let attrs = track<TestAttributes>(
+			let attrs = #ripple.track<TestAttributes>(
 				{
 					class: 'initial',
 					id: 'test-1',
@@ -411,12 +409,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
 		component Basic() {
-			let value = track('parent-class');
+			let value = #ripple.track('parent-class');
 
 			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = track('nested-class');
+				let nested = #ripple.track('nested-class');
 
 				<p class={@nested}>{'Colored nested value'}</p>
 			</div>

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

@@ -1,5 +1,10 @@
-import type { Tracked, PropsWithChildren, PropsWithExtras } from 'ripple';
-import { track } from 'ripple';
+import type {
+	Tracked,
+	PropsWithChildren,
+	PropsWithExtras,
+	Component,
+	PropsWithChildrenOptional,
+} from 'ripple';
 
 describe('basic server > components & composition', () => {
 	it('renders with component composition and children', async () => {
@@ -28,8 +33,9 @@ describe('basic server > components & composition', () => {
 	});
 
 	it('does not render a falsy component call', async () => {
-		component Card(props: PropsWithChildren<{}>) {
+		component Card(props: PropsWithChildrenOptional<{ test: Component }>) {
 			<div class="card">
+				// @ts-expect-error - ripple automatically handles falsy children
 				<props.children />
 			</div>
 		}
@@ -100,7 +106,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = track(false);
+			let clicked = #ripple.track(false);
 
 			<Card
 				title="Test Card"
@@ -137,8 +143,8 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let message = track('Hello');
-			let number = track(1);
+			let message = #ripple.track('Hello');
+			let number = #ripple.track(1);
 
 			<ChildComponent text={message} count={number} />
 			<button
@@ -225,7 +231,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component App() {
-			let Content = track(() => Noop);
+			let Content = #ripple.track(() => Noop);
 			<@Content />
 		}
 

package/tests/server/basic.test.ripple

@@ -1,5 +1,4 @@
 import type { Tracked, PropsNoChildren } from 'ripple';
-import { track } from 'ripple';
 
 describe('basic client', () => {
 	it('render static text', async () => {
@@ -15,7 +14,7 @@ describe('basic client', () => {
 
 	it('renders tracked state updates', async () => {
 		component Counter() {
-			const count = track(0);
+			const count = #ripple.track(0);
 
 			@count++;
 			@count = @count + 5;
@@ -38,8 +37,8 @@ describe('basic client', () => {
 		}
 
 		component Parent() {
-			const count = track(10);
-			let Dynamic = track(() => Child);
+			const count = #ripple.track(10);
+			let Dynamic = #ripple.track(() => Child);
 
 			<@Dynamic {count} class={{ test: true }} />
 		}
@@ -51,7 +50,7 @@ describe('basic client', () => {
 
 	it('renders tracked object properties', async () => {
 		component ObjCounter() {
-			const obj = { count: track(2) };
+			const obj = { count: #ripple.track(2) };
 
 			obj.@count += 3;
 			obj.@count = obj.@count + 1;
@@ -66,9 +65,9 @@ describe('basic client', () => {
 
 	it('renders spread props with tracked values', async () => {
 		component SpreadProps() {
-			const id = track('unique-id');
-			const isActive = track(true);
-			const styles = track({ color: 'red', fontSize: '16px' });
+			const id = #ripple.track('unique-id');
+			const isActive = #ripple.track(true);
+			const styles = #ripple.track({ color: 'red', fontSize: '16px' });
 
 			<div {...{ id: @id, class: { active: @isActive }, style: @styles }}>{'Spread Props'}</div>
 		}
@@ -82,8 +81,8 @@ describe('basic client', () => {
 
 	it('handles AssignExpressions with tracked values or properties correctly', async () => {
 		component Assignments() {
-			const count = track(0);
-			const obj = { value: track(5) };
+			const count = #ripple.track(0);
+			const obj = { value: #ripple.track(5) };
 
 			@count += 10;
 			obj.@value *= 2;
@@ -99,9 +98,9 @@ describe('basic client', () => {
 
 	it(`handles derived changes via tracked dependencies' changes`, async () => {
 		component Derived() {
-			let base = track(5);
-			let multiplier = track(3);
-			const derived = track(() => @base * @multiplier);
+			let base = #ripple.track(5);
+			let multiplier = #ripple.track(3);
+			const derived = #ripple.track(() => @base * @multiplier);
 
 			<div>{@derived}</div>
 
@@ -118,10 +117,10 @@ describe('basic client', () => {
 
 	it(`handles derived changes based on another derived's dependencies' changes`, async () => {
 		component NestedDerived() {
-			let a = track(2);
-			let b = track(3);
-			const sum = track(() => @a + @b);
-			const product = track(() => @sum * 2);
+			let a = #ripple.track(2);
+			let b = #ripple.track(3);
+			const sum = #ripple.track(() => @a + @b);
+			const product = #ripple.track(() => @sum * 2);
 
 			<div>{@product}</div>
 
@@ -138,19 +137,19 @@ describe('basic client', () => {
 
 	it('handles lexical scopes correctly', async () => {
 		component LexicalScopes() {
-			let x = track(1);
+			let x = #ripple.track(1);
 			<div>{@x}</div>
 
 			<div>
-				let x = track(10);
+				let x = #ripple.track(10);
 				{@x}
 			</div>
 
 			<div>
-				let x = track(12);
+				let x = #ripple.track(12);
 				{@x}
 				<span>
-					let x = track(15);
+					let x = #ripple.track(15);
 					{@x}
 				</span>
 			</div>

package/tests/server/compiler.test.ripple

@@ -67,7 +67,7 @@ export component Layout(props) {
 describe('compiler server block tests', () => {
 	it('compiles server block with with only supported types', () => {
 		const source = `
-#server {
+#ripple.server {
 	function something() {
 		return 'unexported function';
 	}
@@ -105,7 +105,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported object pattern in server block', () => {
 		const source = `
-#server {
+#ripple.server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const { fn1, fn2 } = obj;
@@ -116,7 +116,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported array pattern in server block', () => {
 		const source = `
-#server {
+#ripple.server {
 		const arr = [() => {}, () => {}];
 
 		export const [fnarr1, fnarr2] = arr;
@@ -127,7 +127,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported member expression via object in server block', () => {
 		const source = `
-#server {
+#ripple.server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const objProp = obj.fn1;
@@ -138,7 +138,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported member expression via array in server block', () => {
 		const source = `
-#server {
+#ripple.server {
 		const arr = [() => {}, () => {}];
 
 		export const arrIndex0 = arr[0];

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

@@ -1,5 +1,4 @@
 import type { Tracked, Props } from 'ripple';
-import { track, trackSplit } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', async () => {
@@ -8,7 +7,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -46,7 +45,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {foo} />
@@ -65,7 +64,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -80,7 +79,7 @@ describe('composite > props', () => {
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
 		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
+			const [children, rest] = #ripple.trackSplit(props, ['children']);
 			<button {...@rest}>
 				<@children />
 			</button>
@@ -95,14 +94,14 @@ describe('composite > props', () => {
 		}
 
 		component Toggle(props: { pressed: Tracked<boolean> }) {
-			const [pressed, rest] = trackSplit(props, ['pressed']);
+			const [pressed, rest] = #ripple.trackSplit(props, ['pressed']);
 			const onClick = () => (@pressed = !@pressed);
 			<Button {...@rest} class={@pressed ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
 			<Button class={@pressed ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}
 
 		component App() {
-			const pressed = track(true);
+			const pressed = #ripple.track(true);
 			<Toggle {pressed} />
 		}