ripple 0.3.2 → 0.3.4

package/tests/client/compiler/compiler.tracked-access.test.ripple

@@ -3,8 +3,9 @@ import { compile } from 'ripple/compiler';
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let count = #ripple.track(0);
+                let count = track(0);
                 console.log(count.__v);
             }
         `;
@@ -15,8 +16,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should error on direct access to "a" (get/set config) of a tracked object', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let myTracked = #ripple.track(0);
+                let myTracked = track(0);
                 console.log(myTracked.a);
             }
         `;
@@ -27,8 +29,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should error on direct access to "b" (block) of a tracked object', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let myTracked = #ripple.track(0);
+                let myTracked = track(0);
                 console.log(myTracked.b);
             }
         `;
@@ -39,8 +42,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should error on direct access to "c" (clock) of a tracked object', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let myTracked = #ripple.track(0);
+                let myTracked = track(0);
                 console.log(myTracked.c);
             }
         `;
@@ -51,8 +55,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should error on direct access to "f" (flags) of a tracked object', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let myTracked = #ripple.track(0);
+                let myTracked = track(0);
                 console.log(myTracked.f);
             }
         `;
@@ -63,8 +68,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should compile successfully with correct @ syntax access', () => {
 		const code = `
+import { track } from 'ripple';
             export default component App() {
-                let count = #ripple.track(0);
+                let count = track(0);
                 console.log(@count);
             }
         `;
@@ -73,9 +79,9 @@ describe('Compiler: Tracked Object Direct Access Checks', () => {
 
 	it('should compile successfully with correct get() function access', () => {
 		const code = `
-import { get } from 'ripple';
+import { get, track } from 'ripple';
             export default component App() {
-                let count = #ripple.track(0);
+                let count = track(0);
                 console.log(get(count));
             }
         `;

package/tests/client/compiler/compiler.typescript.test.ripple

@@ -25,4 +25,35 @@ function getString(e: string = 'test') {
 
 		expect(result.js.code).toMatchSnapshot();
 	});
+
+	it('removes class TypeScript syntax from JS output', () => {
+		const source = `interface BaseEvent {}
+
+class PrintEvent implements BaseEvent {
+	text: string;
+
+	constructor(text: string) {
+		this.text = text;
+	}
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).not.toContain('implements');
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('removes class extends type arguments from JS output', () => {
+		const source = `class StringMap extends Map<string, string> {
+	constructor() {
+		super();
+	}
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).not.toContain('Map<string, string>');
+		expect(result.js.code).toContain('class StringMap extends Map');
+		expect(result.js.code).toMatchSnapshot();
+	});
 });

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { Props, Tracked } from 'ripple';
-import { flushSync } from 'ripple';
+import { RippleObject, effect, flushSync, track, trackSplit } 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: #ripple.track(0),
+					count: track(0),
 				};
 
 				<span class="count">{obj.@count}</span>
@@ -55,7 +55,7 @@ describe('composite > reactivity', () => {
 		component App() {
 			<div>
 				let obj = {
-					count: #ripple.track(0),
+					count: 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 = #ripple.track(() => props.count);
+			let count = track(() => props.count);
 			<button
 				onClick={() => {
 					@count++;
@@ -96,7 +96,7 @@ describe('composite > reactivity', () => {
 
 		component App() {
 			<div>
-				let count = #ripple.track(0);
+				let count = track(0);
 
 				<button
 					onClick={() => {
@@ -130,8 +130,8 @@ describe('composite > reactivity', () => {
 	});
 
 	it('parents and children have isolated connected state (destructured props)', () => {
-		component Button({ count }: { count: number }) {
-			let local_count = #ripple.track(() => count);
+		component Button(&{ count }: { count: number }) {
+			let local_count = track(() => count);
 			<button
 				onClick={() => {
 					@local_count++;
@@ -143,7 +143,7 @@ describe('composite > reactivity', () => {
 
 		component App() {
 			<div>
-				let count = #ripple.track(0);
+				let count = track(0);
 
 				<button
 					onClick={() => {
@@ -180,11 +180,11 @@ describe('composite > reactivity', () => {
 		let logs: string[] = [];
 
 		component App() {
-			const a = #ripple.track(1);
-			const b = #ripple.track(2);
-			const c = #ripple.track(3);
+			const a = track(1);
+			const b = track(2);
+			const c = track(3);
 
-			const obj = #ripple.track(
+			const obj = track(
 				() => ({
 					@a,
 					@b,
@@ -205,8 +205,8 @@ describe('composite > reactivity', () => {
 			</button>
 		}
 
-		component Child({ a, b, c }: { a: number; b: number; c: number }) {
-			#ripple.effect(() => {
+		component Child(&{ a, b, c }: { a: number; b: number; c: number }) {
+			effect(() => {
 				logs.push(`Child effect: ${a}, ${b}, ${c}`);
 			});
 
@@ -228,10 +228,10 @@ describe('composite > reactivity', () => {
 	});
 
 	it(
-		'keeps reactivity for spread props via intermediate components and usage of #ripple.trackSplit()',
+		'keeps reactivity for spread props via intermediate components and usage of trackSplit()',
 		() => {
 			component App() {
-				const count = #ripple.track(0);
+				const count = track(0);
 				<CounterWrapper {@count} up={() => @count++} down={() => @count--} />
 			}
 
@@ -242,7 +242,7 @@ describe('composite > reactivity', () => {
 			}
 
 			component Counter(props: Props) {
-				const [count, up, down, rest] = #ripple.trackSplit(props, ['count', 'up', 'down']);
+				const [count, up, down, rest] = 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 = #ripple.track(0);
+			const count = track(0);
 			<CounterWrapper {@count} up={() => @count++} />
 		}
 
 		component CounterWrapper(props: { count: number; up: () => void }) {
-			const more: { double: Tracked<number>; another?: number; extra: number } = #ripple{
-				double: #ripple.track(() => props.count * 2),
+			const more: { double: Tracked<number>; another?: number; extra: number } = new RippleObject({
+				double: track(() => props.count * 2),
 				another: 0,
 				extra: 100,
-			};
+			});
 
-			#ripple.effect(() => {
+			effect(() => {
 				props.count;
 				if (props.count === 1) {
 					delete more.another;
@@ -302,7 +302,7 @@ describe('composite > reactivity', () => {
 			another?: number;
 			extra: number;
 		}) {
-			const [count, up, rest] = #ripple.trackSplit(props, ['count', 'up']);
+			const [count, up, rest] = 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,13 +1,13 @@
-import { flushSync, RippleArray, type Component } from 'ripple';
+import { RippleArray, flushSync, track, type Component } from 'ripple';
 
 describe('composite > render', () => {
 	it('renders composite components', () => {
-		component Button({ count }: { count: number }) {
+		component Button(&{ count }: { count: number }) {
 			<div>{count}</div>
 		}
 
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			<button onClick={() => @count++}>{'Increment'}</button>
 			<Button {@count} />
@@ -71,6 +71,54 @@ describe('composite > render', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('preserves distinct scoped ripple hashes for wrapper and child content', () => {
+		component App() {
+			component Wrapper({ children }) {
+				<div class="green">
+					{'Wrapper'}
+					<children />
+				</div>
+
+				<style>
+					.green {
+						color: green;
+					}
+				</style>
+			}
+
+			component Child() {
+				<div class="red">{'Child'}</div>
+
+				<style>
+					.red {
+						color: red;
+					}
+				</style>
+			}
+
+			<Wrapper>
+				<Child />
+			</Wrapper>
+		}
+
+		render(App);
+
+		const wrapper = container.querySelector('.green');
+		const child = container.querySelector('.red');
+		const wrapper_scopes = Array.from(wrapper.classList).filter(
+			(name) => name.startsWith('ripple-'),
+		);
+		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('ripple-'));
+
+		expect(wrapper_scopes).toHaveLength(1);
+		expect(child_scopes).toHaveLength(1);
+
+		const wrapper_scope = wrapper_scopes[0];
+		const child_scope = child_scopes.find((name) => name !== wrapper_scope) || child_scopes[0];
+
+		expect(wrapper_scope).not.toBe(child_scope);
+	});
+
 	it('handles generics', () => {
 		component ArrayTest() {
 			let items = new RippleArray<number>();
@@ -83,7 +131,7 @@ describe('composite > render', () => {
 	});
 
 	it('should not render <undefined> tag when a passed in component is undefined', () => {
-		component Child({
+		component Child(&{
 			children,
 			NonExistent,
 			...props

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

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

package/tests/client/context.test.ripple

@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync } from 'ripple';
+import { Context, flushSync } from 'ripple';
 
 describe('context', () => {
 	it('creates a reactive ref with initial value', () => {
-		const MyContext = #ripple.context<string | null>(null);
+		const MyContext = 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 = #ripple.context<number | null>(null);
+		const MyContext = Context<number | null>(null);
 
 		const doubleContext = () => {
 			const value = MyContext.get() as number;

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

@@ -1,3 +1,4 @@
+import { track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('CSS :global additional use cases', () => {
@@ -428,9 +429,10 @@ 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 = #ripple.track(() => Child1);
+	const DynamicComponent = track(() => Child1);
 	<div>
 		<p class="before">{'before'}</p>
 
@@ -474,9 +476,10 @@ 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 = #ripple.track('div');
+	const dynamicElement = track('div');
 	<div>
 		<p class="before">{'before'}</p>
 		// Use Dynamic Element but it's the same with a regular one