ripple 0.2.215 → 0.3.0

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} />
 		}
 

package/tests/server/composite.test.ripple

@@ -1,4 +1,4 @@
-import { TrackedArray, TrackedMap } from 'ripple';
+import { RippleArray, RippleMap } from 'ripple';
 
 describe('generics', () => {
 	it('handles advanced generic ambiguity and edge cases', () => {
@@ -143,10 +143,10 @@ describe('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('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/server/context.test.ripple

@@ -1,8 +1,6 @@
-import { Context } from 'ripple';
-
 describe('Context API', () => {
 	it('handles context override in nested components', async () => {
-		const MessageContext = new Context('default');
+		const MessageContext = #ripple.context('default');
 
 		component Inner() {
 			const msg = MessageContext.get();

package/tests/server/dynamic-elements.test.ripple

@@ -1,10 +1,10 @@
 import type { PropsWithExtras } from 'ripple';
-import { track, createRefKey, trackSplit } from 'ripple';
+import { createRefKey } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element', async () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag>{'Hello World'}</@tag>
 		}
@@ -18,7 +18,7 @@ describe('server dynamic DOM elements', () => {
 	// They can be ignored for now. But we'll fix them via jsx() vs <jsx>
 	it('renders static dynamic element from a plain object with a tracked property', async () => {
 		component App() {
-			let obj = { tag: track('div') };
+			let obj = { tag: #ripple.track('div') };
 
 			<obj.@tag>{'Hello World'}</obj.@tag>
 		}
@@ -30,7 +30,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('renders static dynamic element from a tracked object with a tracked property', async () => {
 		component App() {
-			let obj = track({ tag: track('div') });
+			let obj = #ripple.track({ tag: #ripple.track('div') });
 
 			<@obj.@tag>{'Hello World'}</@obj.@tag>
 		}
@@ -44,7 +44,7 @@ describe('server dynamic DOM elements', () => {
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		async () => {
 			component App() {
-				let obj = track({ tag: track('div') });
+				let obj = #ripple.track({ tag: #ripple.track('div') });
 
 				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
 			}
@@ -57,7 +57,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('renders self-closing dynamic element', async () => {
 		component App() {
-			let tag = track('input');
+			let tag = #ripple.track('input');
 
 			<@tag type="text" value="test" />
 		}
@@ -69,8 +69,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with attributes', async () => {
 		component App() {
-			let tag = track('div');
-			let className = track('test-class');
+			let tag = #ripple.track('div');
+			let className = #ripple.track('test-class');
 
 			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
@@ -87,8 +87,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles nested dynamic elements', async () => {
 		component App() {
-			let outerTag = track('div');
-			let innerTag = track('span');
+			let outerTag = #ripple.track('div');
+			let innerTag = #ripple.track('span');
 
 			<@outerTag class="outer">
 				<@innerTag class="inner">{'Nested content'}</@innerTag>
@@ -108,8 +108,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with class object', async () => {
 		component App() {
-			let tag = track('div');
-			let active = track(true);
+			let tag = #ripple.track('div');
+			let active = #ripple.track(true);
 
 			<@tag class={{ active: @active, 'dynamic-element': true }}>
 				{'Element with class object'}
@@ -127,7 +127,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with style object', async () => {
 		component App() {
-			let tag = track('span');
+			let tag = #ripple.track('span');
 
 			<@tag
 				style={{
@@ -152,7 +152,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with spread attributes', async () => {
 		component App() {
-			let tag = track('section');
+			let tag = #ripple.track('section');
 			const attrs = {
 				id: 'spread-section',
 				'data-testid': 'spread-test',
@@ -176,7 +176,7 @@ describe('server dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 
 		component App() {
-			let tag = track('article');
+			let tag = #ripple.track('article');
 
 			<@tag
 				{ref (node: HTMLElement) => {
@@ -202,7 +202,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with createRefKey in spread', async () => {
 		component App() {
-			let tag = track('header');
+			let tag = #ripple.track('header');
 
 			function elementRef(node: HTMLElement) {
 				// Set an attribute on the element to prove ref was called
@@ -233,7 +233,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('applies scoped CSS to dynamic elements', async () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="test-class">{'Dynamic element'}</@tag>
 
@@ -261,8 +261,8 @@ describe('server dynamic DOM elements', () => {
 			class: string;
 			id: string;
 		}>) {
-			const tag = track('button');
-			const [rest] = trackSplit(props, []);
+			const tag = #ripple.track('button');
+			const [rest] = #ripple.trackSplit(props, []);
 			<@tag {...@rest}>{@rest.class}</@tag>
 
 			<style>
@@ -276,7 +276,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = track(0);
+			const count = #ripple.track(0);
 			<DynamicButton class={@count % 2 ? 'even' : 'odd'} id={@count % 2 ? 'even' : 'odd'} />
 		}
 
@@ -298,7 +298,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('adds scoping class to dynamic elements', async () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -327,7 +327,7 @@ describe('server dynamic DOM elements', () => {
 			// NOTE: We always add the class scoping hash if there is css
 			// but the tag selector will be marked as unused if it's not explicitly seen in the template.
 			component App() {
-				let tag = track('div');
+				let tag = #ripple.track('div');
 
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
@@ -365,7 +365,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -412,7 +412,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = track(() => Child);
+			let tag = #ripple.track(() => Child);
 
 			<@tag />
 

package/tests/server/head.test.ripple

@@ -1,5 +1,3 @@
-import { track } from 'ripple';
-
 describe('head elements', () => {
 	it('renders static title element', async () => {
 		component App() {
@@ -19,7 +17,7 @@ describe('head elements', () => {
 
 	it('renders reactive title element', async () => {
 		component App() {
-			let title = track('Initial Title');
+			let title = #ripple.track('Initial Title');
 
 			<head>
 				<title>{@title}</title>
@@ -38,7 +36,7 @@ describe('head elements', () => {
 
 	it('renders title with template literal', async () => {
 		component App() {
-			let name = track('World');
+			let name = #ripple.track('World');
 
 			<head>
 				<title>{`Hello ${@name}!`}</title>
@@ -53,7 +51,7 @@ describe('head elements', () => {
 
 	it('renders title with computed value', async () => {
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 			let prefix = 'Count: ';
 
 			<head>
@@ -86,8 +84,8 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', async () => {
 		component App() {
-			let showPrefix = track(true);
-			let title = track('Main Page');
+			let showPrefix = #ripple.track(true);
+			let title = #ripple.track('Main Page');
 
 			<head>
 				<title>{@showPrefix ? 'App - ' + @title : @title}</title>

package/tests/server/style-identifier.test.ripple

@@ -1,15 +1,14 @@
 import { compile } from 'ripple/compiler';
-import { track } from 'ripple';
 
-describe('#style identifier (server)', () => {
+describe('#ripple.style identifier (server)', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #style', async () => {
+		it('passes scoped class to a child component via #ripple.style', async () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#style.highlight} />
+				<Child className={#ripple.style.highlight} />
 
 				<style>
 					.highlight {
@@ -29,14 +28,14 @@ describe('#style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #style classes to a child component', async () => {
+		it('passes multiple #ripple.style classes to a child component', async () => {
 			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 {
@@ -68,13 +67,13 @@ describe('#style identifier (server)', () => {
 	});
 
 	describe('parent styling applied to child', () => {
-		it('allows parent to style child elements via #style prop', async () => {
+		it('allows parent to style child elements via #ripple.style prop', async () => {
 			component Button({ extraClass }: { extraClass?: string }) {
 				<button class={extraClass ?? ''}>{'Click me'}</button>
 			}
 
 			component App() {
-				<Button extraClass={#style.fancy} />
+				<Button extraClass={#ripple.style.fancy} />
 
 				<style>
 					.fancy {
@@ -93,7 +92,7 @@ describe('#style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'fancy')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #style class', async () => {
+		it('child can combine its own classes with parent #ripple.style class', async () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -105,7 +104,7 @@ describe('#style identifier (server)', () => {
 			}
 
 			component App() {
-				<Card className={#style.themed} />
+				<Card className={#ripple.style.themed} />
 
 				<style>
 					.themed {
@@ -133,7 +132,7 @@ describe('#style identifier (server)', () => {
 
 				component App() {
 					<div class="parent">
-						<Child cls={#style.dual} />
+						<Child cls={#ripple.style.dual} />
 					</div>
 
 					<style>
@@ -158,15 +157,15 @@ describe('#style identifier (server)', () => {
 		);
 	});
 
-	it('passes scoped class to a dynamic child component via #style', async () => {
+	it('passes scoped class to a dynamic child component via #ripple.style', async () => {
 		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>
@@ -187,13 +186,13 @@ describe('#style identifier (server)', () => {
 	});
 
 	describe('server compiler output', () => {
-		it('generates #style object with standalone classes', () => {
+		it('generates #ripple.style object with standalone classes', () => {
 			const source = `
 component Child({ cls }: { cls: string }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={#ripple.style.highlight} />
 
 	<style>
 		.highlight {
@@ -214,7 +213,7 @@ export component App() {
 			}
 
 			component App() {
-				<Child cls={#style.styled} />
+				<Child cls={#ripple.style.styled} />
 
 				<style>
 					.styled {