ripple 0.3.3 → 0.3.4

package/tests/hydration/components/mixed-control-flow.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 export component MixedControlFlowStatic() {
 	const rows = [
 		{ id: 1, kind: 'a', enabled: true },
@@ -29,9 +31,9 @@ export component MixedControlFlowStatic() {
 }
 
 export component MixedControlFlowReactive() {
-	let show = #ripple.track(true);
-	let mode = #ripple.track<'a' | 'b'>('a');
-	let items = #ripple.track([
+	let show = track(true);
+	let mode = track<'a' | 'b'>('a');
+	let items = track([
 		{ id: 1, label: 'One' },
 		{ id: 2, label: 'Two' },
 	]);

package/tests/hydration/components/portal.ripple

@@ -1,5 +1,5 @@
 // Portal components for hydration testing
-import { Portal } from 'ripple';
+import { Portal, track } from 'ripple';
 
 // Simple portal with static content
 export component SimplePortal() {
@@ -13,7 +13,7 @@ export component SimplePortal() {
 
 // Portal with conditional rendering
 export component ConditionalPortal() {
-	let show = #ripple.track(true);
+	let show = track(true);
 
 	<div class="container">
 		<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>

package/tests/hydration/components/reactivity.ripple

@@ -1,12 +1,14 @@
+import { track } from 'ripple';
+
 // Reactive components for hydration testing
 
 export component TrackedState() {
-	let count = #ripple.track(0);
+	let count = track(0);
 	<div class="count">{@count}</div>
 }
 
 export component CounterWithInitial(props: { initial: number }) {
-	let count = #ripple.track(props.initial);
+	let count = track(props.initial);
 	<div>
 		<span class="count">{@count}</span>
 	</div>
@@ -17,24 +19,24 @@ export component CounterWrapper() {
 }
 
 export component ComputedValues() {
-	let a = #ripple.track(2);
-	let b = #ripple.track(3);
+	let a = track(2);
+	let b = track(3);
 	const sum = () => @a + @b;
 	<div class="sum">{sum()}</div>
 }
 
 export component MultipleTracked() {
-	let x = #ripple.track(10);
-	let y = #ripple.track(20);
-	let z = #ripple.track(30);
+	let x = track(10);
+	let y = track(20);
+	let z = track(30);
 	<div class="x">{@x}</div>
 	<div class="y">{@y}</div>
 	<div class="z">{@z}</div>
 }
 
 export component DerivedState() {
-	let firstName = #ripple.track('John');
-	let lastName = #ripple.track('Doe');
+	let firstName = track('John');
+	let lastName = track('Doe');
 	const fullName = () => `${@firstName} ${@lastName}`;
 	<div class="name">{fullName()}</div>
 }

package/tests/hydration/components/return.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 // Return statement components for hydration testing
 
 // Basic return - skips content after direct return
@@ -264,7 +266,7 @@ export component ReturnWithElseBothReturn() {
 
 // Reactive return - starts true, can toggle to false
 export component ReactiveReturnTrueToFalse() {
-	let condition = #ripple.track(true);
+	let condition = track(true);
 
 	<button
 		class="toggle"
@@ -283,7 +285,7 @@ export component ReactiveReturnTrueToFalse() {
 
 // Reactive return - starts false, can toggle to true
 export component ReactiveReturnFalseToTrue() {
-	let condition = #ripple.track(false);
+	let condition = track(false);
 
 	<button
 		class="toggle"
@@ -303,7 +305,7 @@ export component ReactiveReturnFalseToTrue() {
 // Reactive nested return - only inner condition (b) is tracked
 export component ReactiveNestedReturn() {
 	let a = true;
-	let b = #ripple.track(true);
+	let b = track(true);
 
 	<button
 		class="toggle"
@@ -396,7 +398,7 @@ export component MultipleSiblingReturns() {
 
 // Reactive sibling returns - cycles first -> second -> fallback
 export component ReactiveSiblingReturns() {
-	let mode = #ripple.track('first');
+	let mode = track('first');
 
 	<button
 		class="toggle"
@@ -428,8 +430,8 @@ export component ReactiveSiblingReturns() {
 
 // Reactive nested returns with tracked outer and inner conditions
 export component ReactiveOuterInnerReturns() {
-	let a = #ripple.track(true);
-	let b = #ripple.track(true);
+	let a = track(true);
+	let b = track(true);
 
 	<button
 		class="toggle-a"
@@ -462,7 +464,7 @@ export component ReactiveOuterInnerReturns() {
 
 // Reactive else-if return chain that transitions between return and non-return states
 export component ReactiveElseIfReturns() {
-	let status = #ripple.track(0);
+	let status = track(0);
 
 	<button
 		class="toggle"
@@ -487,10 +489,10 @@ export component ReactiveElseIfReturns() {
 
 // Deeply nested independent return guards with multiple root-level siblings
 export component ReactiveDeepNestedIndependentReturns() {
-	let c1 = #ripple.track(false);
-	let c2 = #ripple.track(false);
-	let c3 = #ripple.track(false);
-	let c4 = #ripple.track(false);
+	let c1 = track(false);
+	let c2 = track(false);
+	let c3 = track(false);
+	let c4 = track(false);
 
 	<button
 		class="toggle-c1"

package/tests/hydration/components/switch.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 export component SwitchStatic() {
 	const status: string = 'success';
 	switch (status) {
@@ -13,7 +15,7 @@ export component SwitchStatic() {
 }
 
 export component SwitchReactive() {
-	let status = #ripple.track<'a' | 'b' | 'c'>('a');
+	let status = track<'a' | 'b' | 'c'>('a');
 	<button
 		class="toggle"
 		onClick={() => {
@@ -49,7 +51,7 @@ export component SwitchFallthrough() {
 }
 
 export component SwitchNumericLevels() {
-	let level = #ripple.track<1 | 2 | 3>(1);
+	let level = track<1 | 2 | 3>(1);
 	<button
 		class="level-toggle"
 		onClick={() => {
@@ -74,7 +76,7 @@ export component SwitchNumericLevels() {
 }
 
 export component SwitchBlockScoped() {
-	let level = #ripple.track<1 | 2 | 3>(1);
+	let level = track<1 | 2 | 3>(1);
 	<button
 		class="block-toggle"
 		onClick={() => {
@@ -102,7 +104,7 @@ export component SwitchBlockScoped() {
 }
 
 export component SwitchNoBreak() {
-	let level = #ripple.track<1 | 2 | 3>(1);
+	let level = track<1 | 2 | 3>(1);
 	<button
 		class="nobreak-toggle"
 		onClick={() => {

package/tests/server/__snapshots__/compiler.test.ripple.snap

@@ -96,6 +96,28 @@ export async function App(__output) {
 App.async = true;"
 `;
 
+exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class PrintEvent {
+	text;
+
+	constructor(text) {
+		this.text = text;
+	}
+}"
+`;
+
+exports[`compiler typescript tests > removes class extends type arguments from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class StringMap extends Map {
+	constructor() {
+		super();
+	}
+}"
+`;
+
 exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
 "import * as _$_ from 'ripple/internal/server';
 

package/tests/server/await.test.ripple

@@ -1,4 +1,4 @@
-import { set, get } from 'ripple';
+import { get, set, track } from 'ripple';
 
 describe('await in control flow', () => {
 	it('all tests are commented out for now as await in control flow is not yet supported', () => {
@@ -8,7 +8,7 @@ describe('await in control flow', () => {
 	// it('should handle await inside if statement', async () => {
 	// 	component App() {
 	// 		let condition = true;
-	// 		let data = #ripple.track('loading');
+	// 		let data = track('loading');
 
 	// 		if (condition) {
 	// 			await new Promise((resolve) => setTimeout(() => {

package/tests/server/basic.attributes.test.ripple

@@ -1,3 +1,5 @@
+import { RippleObject, track } from 'ripple';
+
 describe('basic server > attribute rendering', () => {
 	it('render static attributes', async () => {
 		component Basic() {
@@ -17,7 +19,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class attribute', async () => {
 		component Basic() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
@@ -87,7 +89,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic class object', async () => {
 		component Basic() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
 
@@ -114,7 +116,7 @@ describe('basic server > attribute rendering', () => {
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
 			component Basic() {
-				let selected = #ripple.track(1);
+				let selected = track(1);
 
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
 				<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
@@ -145,7 +147,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic id attribute', async () => {
 		component Basic() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
 		}
@@ -160,7 +162,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic style attribute', async () => {
 		component Basic() {
-			let color = #ripple.track('red');
+			let color = track('red');
 
 			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
@@ -176,7 +178,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render style attribute as dynamic object', async () => {
 		component Basic() {
-			let color = #ripple.track('red');
+			let color = track('red');
 
 			<div style={{ color: @color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
@@ -192,7 +194,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked variable as style attribute', async () => {
 		component Basic() {
-			let style = #ripple.track({ color: 'red', fontWeight: 'bold' });
+			let style = track({ color: 'red', fontWeight: 'bold' });
 
 			<div {@style}>{'Dynamic Style'}</div>
 		}
@@ -208,7 +210,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render tracked object as style attribute', async () => {
 		component Basic() {
-			let style = #ripple{ color: 'red', fontWeight: 'bold' };
+			let style = new RippleObject({ color: 'red', fontWeight: 'bold' });
 
 			<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
 		}
@@ -275,8 +277,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as false', async () => {
 		component Basic() {
-			let disabled = #ripple.track(false);
-			let checked = #ripple.track(false);
+			let disabled = track(false);
+			let checked = track(false);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -310,8 +312,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render dynamic boolean attributes as true', async () => {
 		component Basic() {
-			let disabled = #ripple.track(true);
-			let checked = #ripple.track(true);
+			let disabled = track(true);
+			let checked = track(true);
 
 			<input type="checkbox" {@disabled} {@checked} />
 		}
@@ -345,8 +347,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render multiple dynamic attributes', async () => {
 		component Basic() {
-			let theme = #ripple.track('light');
-			let size = #ripple.track('medium');
+			let theme = track('light');
+			let size = track('medium');
 
 			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>
 				{'Multiple Dynamic Attributes'}
@@ -365,8 +367,8 @@ describe('basic server > attribute rendering', () => {
 
 	it('render conditional attributes', async () => {
 		component Basic() {
-			let showTitle = #ripple.track(false);
-			let showAria = #ripple.track(false);
+			let showTitle = track(false);
+			let showAria = track(false);
 
 			<div
 				title={@showTitle ? 'This is a title' : undefined}
@@ -387,7 +389,7 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		component Basic() {
-			let attrs = #ripple.track<TestAttributes>(
+			let attrs = track<TestAttributes>(
 				{
 					class: 'initial',
 					id: 'test-1',
@@ -409,12 +411,12 @@ describe('basic server > attribute rendering', () => {
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
 		component Basic() {
-			let value = #ripple.track('parent-class');
+			let value = track('parent-class');
 
 			<p class={@value}>{'Colored parent value'}</p>
 
 			<div>
-				let nested = #ripple.track('nested-class');
+				let nested = track('nested-class');
 
 				<p class={@nested}>{'Colored nested value'}</p>
 			</div>

package/tests/server/basic.components.test.ripple

@@ -1,3 +1,4 @@
+import { track } from 'ripple';
 import type {
 	Tracked,
 	PropsWithChildren,
@@ -106,7 +107,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let clicked = #ripple.track(false);
+			let clicked = track(false);
 
 			<Card
 				title="Test Card"
@@ -143,8 +144,8 @@ describe('basic server > components & composition', () => {
 		}
 
 		component Basic() {
-			let message = #ripple.track('Hello');
-			let number = #ripple.track(1);
+			let message = track('Hello');
+			let number = track(1);
 
 			<ChildComponent text={message} count={number} />
 			<button
@@ -231,7 +232,7 @@ describe('basic server > components & composition', () => {
 		}
 
 		component App() {
-			let Content = #ripple.track(() => Noop);
+			let Content = track(() => Noop);
 			<@Content />
 		}
 

package/tests/server/basic.test.ripple

@@ -1,3 +1,4 @@
+import { track } from 'ripple';
 import type { Tracked, PropsNoChildren } from 'ripple';
 
 describe('basic client', () => {
@@ -14,7 +15,7 @@ describe('basic client', () => {
 
 	it('renders tracked state updates', async () => {
 		component Counter() {
-			const count = #ripple.track(0);
+			const count = track(0);
 
 			@count++;
 			@count = @count + 5;
@@ -37,8 +38,8 @@ describe('basic client', () => {
 		}
 
 		component Parent() {
-			const count = #ripple.track(10);
-			let Dynamic = #ripple.track(() => Child);
+			const count = track(10);
+			let Dynamic = track(() => Child);
 
 			<@Dynamic {count} class={{ test: true }} />
 		}
@@ -50,7 +51,7 @@ describe('basic client', () => {
 
 	it('renders tracked object properties', async () => {
 		component ObjCounter() {
-			const obj = { count: #ripple.track(2) };
+			const obj = { count: track(2) };
 
 			obj.@count += 3;
 			obj.@count = obj.@count + 1;
@@ -65,9 +66,9 @@ describe('basic client', () => {
 
 	it('renders spread props with tracked values', async () => {
 		component SpreadProps() {
-			const id = #ripple.track('unique-id');
-			const isActive = #ripple.track(true);
-			const styles = #ripple.track({ color: 'red', fontSize: '16px' });
+			const id = track('unique-id');
+			const isActive = track(true);
+			const styles = track({ color: 'red', fontSize: '16px' });
 
 			<div {...{ id: @id, class: { active: @isActive }, style: @styles }}>{'Spread Props'}</div>
 		}
@@ -81,8 +82,8 @@ describe('basic client', () => {
 
 	it('handles AssignExpressions with tracked values or properties correctly', async () => {
 		component Assignments() {
-			const count = #ripple.track(0);
-			const obj = { value: #ripple.track(5) };
+			const count = track(0);
+			const obj = { value: track(5) };
 
 			@count += 10;
 			obj.@value *= 2;
@@ -98,9 +99,9 @@ describe('basic client', () => {
 
 	it(`handles derived changes via tracked dependencies' changes`, async () => {
 		component Derived() {
-			let base = #ripple.track(5);
-			let multiplier = #ripple.track(3);
-			const derived = #ripple.track(() => @base * @multiplier);
+			let base = track(5);
+			let multiplier = track(3);
+			const derived = track(() => @base * @multiplier);
 
 			<div>{@derived}</div>
 
@@ -117,10 +118,10 @@ describe('basic client', () => {
 
 	it(`handles derived changes based on another derived's dependencies' changes`, async () => {
 		component NestedDerived() {
-			let a = #ripple.track(2);
-			let b = #ripple.track(3);
-			const sum = #ripple.track(() => @a + @b);
-			const product = #ripple.track(() => @sum * 2);
+			let a = track(2);
+			let b = track(3);
+			const sum = track(() => @a + @b);
+			const product = track(() => @sum * 2);
 
 			<div>{@product}</div>
 
@@ -137,19 +138,19 @@ describe('basic client', () => {
 
 	it('handles lexical scopes correctly', async () => {
 		component LexicalScopes() {
-			let x = #ripple.track(1);
+			let x = track(1);
 			<div>{@x}</div>
 
 			<div>
-				let x = #ripple.track(10);
+				let x = track(10);
 				{@x}
 			</div>
 
 			<div>
-				let x = #ripple.track(12);
+				let x = track(12);
 				{@x}
 				<span>
-					let x = #ripple.track(15);
+					let x = track(15);
 					{@x}
 				</span>
 			</div>

package/tests/server/compiler.test.ripple

@@ -41,6 +41,37 @@ 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: 'server' });
+
+		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: 'server' });
+
+		expect(result.js.code).not.toContain('Map<string, string>');
+		expect(result.js.code).toContain('class StringMap extends Map');
+		expect(result.js.code).toMatchSnapshot();
+	});
+
 	it('throws error for interpolating children as text in SSR mode', () => {
 		const source = `
 export component Layout({ children }) {
@@ -67,7 +98,7 @@ export component Layout(props) {
 describe('compiler server block tests', () => {
 	it('compiles server block with with only supported types', () => {
 		const source = `
-#ripple.server {
+#server {
 	function something() {
 		return 'unexported function';
 	}
@@ -105,7 +136,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported object pattern in server block', () => {
 		const source = `
-#ripple.server {
+#server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const { fn1, fn2 } = obj;
@@ -116,7 +147,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported array pattern in server block', () => {
 		const source = `
-#ripple.server {
+#server {
 		const arr = [() => {}, () => {}];
 
 		export const [fnarr1, fnarr2] = arr;
@@ -127,7 +158,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported member expression via object in server block', () => {
 		const source = `
-#ripple.server {
+#server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const objProp = obj.fn1;
@@ -138,7 +169,7 @@ describe('compiler server block tests', () => {
 
 	it('throws error for unsupported exported member expression via array in server block', () => {
 		const source = `
-#ripple.server {
+#server {
 		const arr = [() => {}, () => {}];
 
 		export const arrIndex0 = arr[0];

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

@@ -1,3 +1,4 @@
+import { track, trackSplit } from 'ripple';
 import type { Tracked, Props } from 'ripple';
 
 describe('composite > props', () => {
@@ -7,7 +8,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = #ripple.track(123);
+			let foo = track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -45,7 +46,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = #ripple.track(123);
+			let foo = track(123);
 
 			<Child />
 			<Child {foo} />
@@ -64,7 +65,7 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = #ripple.track(123);
+			let foo = track(123);
 
 			<Child />
 			<Child {@foo} />
@@ -79,7 +80,7 @@ describe('composite > props', () => {
 
 	it('correctly retains prop accessors and reactivity when using rest props', async () => {
 		component Button(props: Props) {
-			const [children, rest] = #ripple.trackSplit(props, ['children']);
+			const [children, rest] = trackSplit(props, ['children']);
 			<button {...@rest}>
 				<@children />
 			</button>
@@ -94,14 +95,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/server/context.test.ripple

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