ripple 0.2.216 → 0.3.1

package/tests/client/composite/composite.dynamic-components.test.ripple

@@ -1,13 +1,13 @@
-import { track, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('composite > dynamic components', () => {
-	it('supports rendering compositie components using <@component> syntax', () => {
+	it('supports rendering composite components using <@component> syntax', () => {
 		component App() {
 			component basic() {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			<@tracked_basic />
 		}
@@ -24,7 +24,7 @@ describe('composite > dynamic components', () => {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			const obj = {
 				tracked_basic,
@@ -45,15 +45,15 @@ describe('composite > dynamic components', () => {
 				<div>{'Basic Component'}</div>
 			}
 
-			const tracked_basic = track(() => basic);
+			const tracked_basic = #ripple.track(() => basic);
 
 			const obj = {
 				tracked_basic,
 			};
 
-			const tracked_object = track(obj);
+			const ripple_object = #ripple.track(obj);
 
-			<@tracked_object.@tracked_basic />
+			<@ripple_object.@tracked_basic />
 		}
 
 		render(App);
@@ -72,7 +72,7 @@ describe('composite > dynamic components', () => {
 		}
 
 		component App() {
-			let thing = track(() => Child1);
+			let thing = #ripple.track(() => Child1);
 
 			<div id="container">
 				<@thing />

package/tests/client/composite/composite.generics.test.ripple

@@ -1,4 +1,4 @@
-import { TrackedArray, TrackedMap } from 'ripple';
+import { RippleArray, RippleMap } from 'ripple';
 
 describe('composite > generics', () => {
 	it('handles advanced generic ambiguity and edge cases', () => {
@@ -143,10 +143,10 @@ describe('composite > generics', () => {
 			const s = flag ? new Box<number>(1) : new Box<string>('string');
 
 			// 20. Generic inside template expression
-			const t = `length=${new TrackedArray<number>().length}`;
+			const t = `length=${new RippleArray<number>().length}`;
 
 			// 21. Optional chaining + generic + property access
-			const registry = new TrackedMap<string, number>();
+			const registry = new RippleMap<string, number>();
 			const u = registry.get('id')?.toString();
 
 			// 22. Generic call used as callee for another call
@@ -208,7 +208,7 @@ describe('composite > generics', () => {
 			>();
 
 			// 33. Map of generic instance as key
-			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
+			const mm = new Map<RippleArray<number>, RippleArray<string>>();
 		}
 
 		render(App);

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

@@ -1,5 +1,5 @@
 import type { Tracked, Props } from 'ripple';
-import { track, trackSplit, effect, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -8,7 +8,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -44,7 +44,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {foo} />
@@ -62,7 +62,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let foo = #ripple.track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -78,7 +78,7 @@ describe('composite > props', () => {
 		const logs: number[] = [];
 
 		component Counter({ count }: { count: Tracked<number> }) {
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@count);
 			});
 
@@ -86,7 +86,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			const count = track(0);
+			const count = #ripple.track(0);
 
 			<div>
 				<Counter {count} />
@@ -107,7 +107,7 @@ describe('composite > props', () => {
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
 		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
+			const [children, rest] = #ripple.trackSplit(props, ['children']);
 			<button {...@rest}>
 				<@children />
 			</button>
@@ -122,14 +122,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} />
 		}
 

package/tests/client/composite/composite.reactivity.test.ripple

@@ -1,5 +1,5 @@
-import type { Tracked } from 'ripple';
-import { track, trackSplit, flushSync, effect } from 'ripple';
+import type { Props, Tracked } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('composite > reactivity', () => {
 	it('renders composite components with object state', () => {
@@ -17,7 +17,7 @@ describe('composite > reactivity', () => {
 		component App() {
 			<div>
 				let obj = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
 				<span class="count">{obj.@count}</span>
@@ -55,7 +55,7 @@ describe('composite > reactivity', () => {
 		component App() {
 			<div>
 				let obj = {
-					count: track(0),
+					count: #ripple.track(0),
 				};
 
 				<span class="count">{obj.@count}</span>
@@ -84,7 +84,7 @@ describe('composite > reactivity', () => {
 
 	it('parents and children have isolated state', () => {
 		component Button(props: { count: number }) {
-			let count = track(() => props.count);
+			let count = #ripple.track(() => props.count);
 			<button
 				onClick={() => {
 					@count++;
@@ -96,7 +96,7 @@ describe('composite > reactivity', () => {
 
 		component App() {
 			<div>
-				let count = track(0);
+				let count = #ripple.track(0);
 
 				<button
 					onClick={() => {
@@ -131,7 +131,7 @@ describe('composite > reactivity', () => {
 
 	it('parents and children have isolated connected state (destructured props)', () => {
 		component Button({ count }: { count: number }) {
-			let local_count = track(() => count);
+			let local_count = #ripple.track(() => count);
 			<button
 				onClick={() => {
 					@local_count++;
@@ -143,7 +143,7 @@ describe('composite > reactivity', () => {
 
 		component App() {
 			<div>
-				let count = track(0);
+				let count = #ripple.track(0);
 
 				<button
 					onClick={() => {
@@ -180,11 +180,11 @@ describe('composite > reactivity', () => {
 		let logs: string[] = [];
 
 		component App() {
-			const a = track(1);
-			const b = track(2);
-			const c = track(3);
+			const a = #ripple.track(1);
+			const b = #ripple.track(2);
+			const c = #ripple.track(3);
 
-			const obj = track(
+			const obj = #ripple.track(
 				() => ({
 					@a,
 					@b,
@@ -206,7 +206,7 @@ describe('composite > reactivity', () => {
 		}
 
 		component Child({ a, b, c }: { a: number; b: number; c: number }) {
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(`Child effect: ${a}, ${b}, ${c}`);
 			});
 
@@ -228,21 +228,21 @@ describe('composite > reactivity', () => {
 	});
 
 	it(
-		'keeps reactivity for spread props via intermediate components and usage of trackSplit()',
+		'keeps reactivity for spread props via intermediate components and usage of #ripple.trackSplit()',
 		() => {
 			component App() {
-				const count = track(0);
+				const count = #ripple.track(0);
 				<CounterWrapper {@count} up={() => @count++} down={() => @count--} />
 			}
 
-			component CounterWrapper(props) {
+			component CounterWrapper(props: Props) {
 				<div>
 					<Counter {...props} />
 				</div>
 			}
 
-			component Counter(props) {
-				const [count, up, down, rest] = trackSplit(props, ['count', 'up', 'down']);
+			component Counter(props: Props) {
+				const [count, up, down, rest] = #ripple.trackSplit(props, ['count', 'up', 'down']);
 				<button onClick={() => @up()}>{'UP'}</button>
 				<button onClick={() => @down()}>{'DOWN'}</button>
 				<span {...@rest}>{`Counter: ${@count}`}</span>
@@ -270,18 +270,18 @@ describe('composite > reactivity', () => {
 
 	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
 		component App() {
-			const count = track(0);
+			const count = #ripple.track(0);
 			<CounterWrapper {@count} up={() => @count++} />
 		}
 
-		component CounterWrapper(props) {
-			const more = #{
-				double: track(() => props.@count * 2),
-				another: track(0),
+		component CounterWrapper(props: { count: number; up: () => void }) {
+			const more: { double: Tracked<number>; another?: number; extra: number } = #ripple{
+				double: #ripple.track(() => props.count * 2),
+				another: 0,
 				extra: 100,
 			};
 
-			effect(() => {
+			#ripple.effect(() => {
 				props.count;
 				if (props.count === 1) {
 					delete more.another;
@@ -295,8 +295,14 @@ describe('composite > reactivity', () => {
 			</div>
 		}
 
-		component Counter(props) {
-			const [count, up, rest] = trackSplit(props, ['count', 'up']);
+		component Counter(props: {
+			count: number;
+			up: () => void;
+			double: Tracked<number>;
+			another?: number;
+			extra: number;
+		}) {
+			const [count, up, rest] = #ripple.trackSplit(props, ['count', 'up']);
 			<div {...@rest}>{`Counter: ${@count} Double: ${props.@double}`}</div>
 			<button onClick={() => @up()}>{'UP'}</button>
 		}

package/tests/client/composite/composite.render.test.ripple

@@ -1,4 +1,4 @@
-import { track, flushSync, TrackedArray } from 'ripple';
+import { flushSync, RippleArray, type Component } from 'ripple';
 
 describe('composite > render', () => {
 	it('renders composite components', () => {
@@ -7,7 +7,7 @@ describe('composite > render', () => {
 		}
 
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			<button onClick={() => @count++}>{'Increment'}</button>
 			<Button {@count} />
@@ -73,7 +73,7 @@ describe('composite > render', () => {
 
 	it('handles generics', () => {
 		component ArrayTest() {
-			let items = new TrackedArray<number>();
+			let items = new RippleArray<number>();
 			items.push.apply(items, [1, 2, 3, 4, 5]);
 
 			<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
@@ -83,9 +83,18 @@ describe('composite > render', () => {
 	});
 
 	it('should not render <undefined> tag when a passed in component is undefined', () => {
-		component Child({ children, NonExistent, ...props }) {
+		component Child({
+			children,
+			NonExistent,
+			...props
+		}: {
+			children?: Component;
+			NonExistent?: Component;
+			[key: string]: any;
+		}) {
 			<div {...props}>
 				<children />
+				// @ts-expect-error - intentionally testing behavior when a component is undefined
 				<NonExistent />
 			</div>
 		}

package/tests/client/computed-properties.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, track } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('computed tracked properties', () => {
 	it('should update a property using assignment', () => {
 		component App() {
 			let obj = {
-				[0]: track(0),
+				[0]: #ripple.track(0),
 			};
 
 			<div>{obj.@[0]}</div>
@@ -31,7 +31,7 @@ describe('computed tracked properties', () => {
 	it('should update a property using update expressions', () => {
 		component App() {
 			let obj = {
-				[0]: track(0),
+				[0]: #ripple.track(0),
 			};
 
 			<div>{obj.@[0]}</div>

package/tests/client/context.test.ripple

@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { Context, flushSync } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('context', () => {
 	it('creates a reactive ref with initial value', () => {
-		const MyContext = new Context<string | null>(null);
+		const MyContext = #ripple.context<string | null>(null);
 
 		component Child() {
 			const value = MyContext.get();
@@ -25,7 +25,7 @@ describe('context', () => {
 	});
 
 	it('handles context captured inside a computed tracked', () => {
-		const MyContext = new Context<number | null>(null);
+		const MyContext = #ripple.context<number | null>(null);
 
 		const doubleContext = () => {
 			const value = MyContext.get() as number;

package/tests/client/css/global-additional-cases.test.ripple

@@ -428,9 +428,9 @@ component Child1() {
 		'handles sibling combinators with dynamic component and :global before scoped elements',
 		() => {
 			const source = `
-import { track } from 'ripple';
+
 export component Test({ children }) {
-	const DynamicComponent = track(() => Child1);
+	const DynamicComponent = #ripple.track(() => Child1);
 	<div>
 		<p class="before">{'before'}</p>
 
@@ -474,9 +474,9 @@ component Child1() {
 		'handles sibling combinators with dynamic element or regular element and :global before scoped elements',
 		() => {
 			const source = `
-import { track } from 'ripple';
+
 export component Test({ children, classes }) {
-	const dynamicElement = track('div');
+	const dynamicElement = #ripple.track('div');
 	<div>
 		<p class="before">{'before'}</p>
 		// Use Dynamic Element but it's the same with a regular one