ripple 0.2.216 → 0.3.0

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 {