ripple 0.2.215 → 0.3.0

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

package/tests/client/css/style-identifier.test.ripple

@@ -1,15 +1,14 @@
 import { compile } from 'ripple/compiler';
-import { track } from 'ripple';
 
-describe('#style identifier', () => {
+describe('#ripple.style identifier', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #style', () => {
+		it('passes scoped class to a child component via #ripple.style', () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#style.highlight} />
+				<Child className={#ripple.style.highlight} />
 
 				<style>
 					.highlight {
@@ -28,14 +27,14 @@ describe('#style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #style classes to a child component', () => {
+		it('passes multiple #ripple.style classes to a child component', () => {
 			component Child({ primary, secondary }: { primary: string; secondary: string }) {
 				<div class={primary}>{'primary'}</div>
 				<span class={secondary}>{'secondary'}</span>
 			}
 
 			component Parent() {
-				<Child primary={#style.primary} secondary={#style.secondary} />
+				<Child primary={#ripple.style.primary} secondary={#ripple.style.secondary} />
 
 				<style>
 					.primary {
@@ -64,15 +63,15 @@ describe('#style identifier', () => {
 			expect(spanClasses.some((cls: string) => cls === 'secondary')).toBe(true);
 		});
 
-		it('passes scoped class to a dynamic child component via #style', () => {
+		it('passes scoped class to a dynamic child component via #ripple.style', () => {
 			component Child({ cls }: { cls: string }) {
 				<span class={cls}>{'text'}</span>
 			}
 
 			component Parent() {
-				let dynamic = track(() => Child);
+				let dynamic = #ripple.track(() => Child);
 				<div class="wrapper">
-					<@dynamic cls={#style.text} />
+					<@dynamic cls={#ripple.style.text} />
 				</div>
 
 				<style>
@@ -91,7 +90,7 @@ describe('#style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #style class', () => {
+		it('child can combine its own classes with parent #ripple.style class', () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -103,7 +102,7 @@ describe('#style identifier', () => {
 			}
 
 			component App() {
-				<Card className={#style.themed} />
+				<Card className={#ripple.style.themed} />
 
 				<style>
 					.themed {
@@ -128,7 +127,7 @@ describe('#style identifier', () => {
 
 			component App() {
 				<div class="parent">
-					<Child cls={#style.dual} />
+					<Child cls={#ripple.style.dual} />
 				</div>
 
 				<style>
@@ -152,10 +151,10 @@ describe('#style identifier', () => {
 	});
 
 	describe('compile errors', () => {
-		it('errors when #style is used directly on a DOM element', () => {
+		it('errors when #ripple.style is used directly on a DOM element', () => {
 			const source = `
 component App() {
-	<div class={#style.box}>{'content'}</div>
+	<div class={#ripple.style.box}>{'content'}</div>
 
 	<style>
 		.box {
@@ -168,10 +167,10 @@ component App() {
 			);
 		});
 
-		it('errors when #style bracket notation is used directly on a DOM element', () => {
+		it('errors when #ripple.style bracket notation is used directly on a DOM element', () => {
 			const source = `
 component App() {
-	<div class={#style['container']}>{'content'}</div>
+	<div class={#ripple.style['container']}>{'content'}</div>
 
 	<style>
 		.container {
@@ -184,13 +183,15 @@ component App() {
 			);
 		});
 
-		it('errors when #style references a class in a compound selector passed to component', () => {
-			const source = `
+		it(
+			'errors when #ripple.style references a class in a compound selector passed to component',
+			() => {
+				const source = `
 component Child({ cls }) {
 	<span class={cls}>{'text'}</span>
 }
 component App() {
-	<Child cls={#style.special} />
+	<Child cls={#ripple.style.special} />
 
 	<style>
 		span.special {
@@ -198,8 +199,11 @@ component App() {
 		}
 	</style>
 }`;
-			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
-		});
+				expect(() => compile(source, 'test.ripple')).toThrow(
+					/does not exist as a stand-alone class/,
+				);
+			},
+		);
 
 		it('errors if descendant class is attempted to be passed in to child component', () => {
 			const source = `
@@ -210,7 +214,7 @@ component App() {
 				component App() {
 					<div class="wrapper">
 						<Child
-							cls={#style.nested}
+							cls={#ripple.style.nested}
 						/>
 					</div>
 
@@ -238,7 +242,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use child combinator class as standalone
 							// @ripple-expect-error - cannot use child combinator class as standalone
-							cls={#style.child}
+							cls={#ripple.style.child}
 						/>
 					</div>
 
@@ -265,7 +269,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use compound class as standalone
 							// @ripple-expect-error - cannot use compound class as standalone
-							cls={#style.child}
+							cls={#ripple.style.child}
 						/>
 					</div>
 
@@ -281,18 +285,17 @@ component App() {
 			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors if descendant #style class is used on a dynamic component', () => {
+		it('errors if descendant #ripple.style class is used on a dynamic component', () => {
 			const source = `
-				import { track } from 'ripple';
 
 				component Child({ cls }) {
 					<span class={cls}>{'text'}</span>
 				}
 
 				component App() {
-					let dynamic = track(() => Child);
+					let dynamic = #ripple.track(() => Child);
 					<div class="wrapper">
-						<@dynamic cls={#style.nested} />
+						<@dynamic cls={#ripple.style.nested} />
 					</div>
 
 					<style>
@@ -307,13 +310,15 @@ component App() {
 			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors when #style references a class that does not exist in the style block', () => {
-			const source = `
+		it(
+			'errors when #ripple.style references a class that does not exist in the style block',
+			() => {
+				const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 component App() {
-	<Child cls={#style.missing} />
+	<Child cls={#ripple.style.missing} />
 
 	<style>
 		.other {
@@ -321,17 +326,20 @@ component App() {
 		}
 	</style>
 }`;
-			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
-		});
+				expect(() => compile(source, 'test.ripple')).toThrow(
+					/does not exist as a stand-alone class/,
+				);
+			},
+		);
 
-		it('errors when #style is used with a dynamic expression', () => {
+		it('errors when #ripple.style is used with a dynamic expression', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 component App() {
 	const key = 'highlight';
-	<Child cls={#style[key]} />
+	<Child cls={#ripple.style[key]} />
 
 	<style>
 		.highlight {
@@ -344,22 +352,22 @@ component App() {
 			);
 		});
 
-		it('errors when #style is used outside of a component', () => {
+		it('errors when #ripple.style is used outside of a component', () => {
 			const source = `function notAComponent() {
-	const cls = #style.foo;
+	const cls = #ripple.style.foo;
 }`;
 			expect(() => compile(source, 'test.ripple')).toThrow(/can only be used within a component/);
 		});
 	});
 
 	describe('compiler output', () => {
-		it('generates #style object with standalone classes for client mode', () => {
+		it('generates #ripple.style object with standalone classes for client mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={#ripple.style.highlight} />
 
 	<style>
 		.highlight {
@@ -373,13 +381,13 @@ export component App() {
 			expect(js.code).toMatch(/ripple-[a-z0-9]+/);
 		});
 
-		it('generates #style object with standalone classes for server mode', () => {
+		it('generates #ripple.style object with standalone classes for server mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={#ripple.style.highlight} />
 
 	<style>
 		.highlight {