ripple 0.2.215 → 0.3.0

package/tests/client/date.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, TrackedDate, track } from 'ripple';
+import { flushSync } from 'ripple';
 
-describe('TrackedDate', () => {
+describe('RippleDate', () => {
 	it('handles getTime() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1);
-			let time = track(() => date.getTime());
+			let date = #ripple.date(2025, 0, 1);
+			let time = #ripple.track(() => date.getTime());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
 			<pre>{@time}</pre>
@@ -25,8 +25,8 @@ describe('TrackedDate', () => {
 
 	it('handles getFullYear() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 5, 15);
-			let year = track(() => date.getFullYear());
+			let date = #ripple.date(2025, 5, 15);
+			let year = #ripple.track(() => date.getFullYear());
 
 			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
 			<pre>{@year}</pre>
@@ -46,8 +46,8 @@ describe('TrackedDate', () => {
 
 	it('handles getMonth() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 15);
-			let month = track(() => date.getMonth());
+			let date = #ripple.date(2025, 0, 15);
+			let month = #ripple.track(() => date.getMonth());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
 			<pre>{@month}</pre>
@@ -67,8 +67,8 @@ describe('TrackedDate', () => {
 
 	it('handles getDate() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1);
-			let day = track(() => date.getDate());
+			let date = #ripple.date(2025, 0, 1);
+			let day = #ripple.track(() => date.getDate());
 
 			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
 			<pre>{@day}</pre>
@@ -88,8 +88,8 @@ describe('TrackedDate', () => {
 
 	it('handles getDay() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1);
-			let dayOfWeek = track(() => date.getDay());
+			let date = #ripple.date(2025, 0, 1);
+			let dayOfWeek = #ripple.track(() => date.getDay());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
 			<pre>{@dayOfWeek}</pre>
@@ -109,8 +109,8 @@ describe('TrackedDate', () => {
 
 	it('handles getHours() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1, 10, 30, 0);
-			let hours = track(() => date.getHours());
+			let date = #ripple.date(2025, 0, 1, 10, 30, 0);
+			let hours = #ripple.track(() => date.getHours());
 
 			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
 			<pre>{@hours}</pre>
@@ -130,8 +130,8 @@ describe('TrackedDate', () => {
 
 	it('handles getMinutes() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1, 10, 15, 0);
-			let minutes = track(() => date.getMinutes());
+			let date = #ripple.date(2025, 0, 1, 10, 15, 0);
+			let minutes = #ripple.track(() => date.getMinutes());
 
 			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
 			<pre>{@minutes}</pre>
@@ -151,8 +151,8 @@ describe('TrackedDate', () => {
 
 	it('handles getSeconds() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1, 10, 15, 30);
-			let seconds = track(() => date.getSeconds());
+			let date = #ripple.date(2025, 0, 1, 10, 15, 30);
+			let seconds = #ripple.track(() => date.getSeconds());
 
 			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
 			<pre>{@seconds}</pre>
@@ -172,8 +172,8 @@ describe('TrackedDate', () => {
 
 	it('handles toISOString() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1, 12, 0, 0);
-			let isoString = track(() => date.toISOString());
+			let date = #ripple.date(2025, 0, 1, 12, 0, 0);
+			let isoString = #ripple.track(() => date.toISOString());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
 			<pre>{@isoString}</pre>
@@ -198,8 +198,8 @@ describe('TrackedDate', () => {
 
 	it('handles toDateString() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1);
-			let dateString = track(() => date.toDateString());
+			let date = #ripple.date(2025, 0, 1);
+			let dateString = #ripple.track(() => date.toDateString());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
 			<pre>{@dateString}</pre>
@@ -222,8 +222,8 @@ describe('TrackedDate', () => {
 
 	it('handles valueOf() with reactive updates', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1);
-			let valueOf = track(() => date.valueOf());
+			let date = #ripple.date(2025, 0, 1);
+			let valueOf = #ripple.track(() => date.valueOf());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
 			<pre>{@valueOf}</pre>
@@ -244,11 +244,11 @@ describe('TrackedDate', () => {
 
 	it('handles multiple get methods reacting to same setTime change', () => {
 		component DateTest() {
-			let date = new TrackedDate(2025, 0, 1, 10, 30, 15);
-			let year = track(() => date.getFullYear());
-			let month = track(() => date.getMonth());
-			let day = track(() => date.getDate());
-			let hours = track(() => date.getHours());
+			let date = #ripple.date(2025, 0, 1, 10, 30, 15);
+			let year = #ripple.track(() => date.getFullYear());
+			let month = #ripple.track(() => date.getMonth());
+			let day = #ripple.track(() => date.getDate());
+			let hours = #ripple.track(() => date.getHours());
 
 			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>
 				{'Change All'}
@@ -292,15 +292,15 @@ describe('TrackedDate', () => {
 
 	it('handles constructor with different parameter combinations', () => {
 		component DateTest() {
-			let dateNow = new TrackedDate();
-			let dateFromString = new TrackedDate('2025-01-01');
-			let dateFromNumbers = new TrackedDate(2025, 0, 1);
-			let dateFromTimestamp = new TrackedDate(1735689600000);
+			let dateNow = #ripple.date();
+			let dateFromString = #ripple.date('2025-01-01');
+			let dateFromNumbers = #ripple.date(2025, 0, 1);
+			let dateFromTimestamp = #ripple.date(1735689600000);
 
-			let nowYear = track(() => dateNow.getFullYear());
-			let stringYear = track(() => dateFromString.getFullYear());
-			let numbersYear = track(() => dateFromNumbers.getFullYear());
-			let timestampYear = track(() => dateFromTimestamp.getFullYear());
+			let nowYear = #ripple.track(() => dateNow.getFullYear());
+			let stringYear = #ripple.track(() => dateFromString.getFullYear());
+			let numbersYear = #ripple.track(() => dateFromNumbers.getFullYear());
+			let timestampYear = #ripple.track(() => dateFromTimestamp.getFullYear());
 
 			<div>
 				{'Now: '}
@@ -341,9 +341,9 @@ describe('TrackedDate', () => {
 
 	it('handles get methods with arguments non-memoized', () => {
 		component DateTest() {
-			let date = new TrackedDate();
-			let localeDateString = track(() => date.toLocaleDateString('en-US'));
-			let localeTimeString = track(() => date.toLocaleTimeString('en-US'));
+			let date = #ripple.date();
+			let localeDateString = #ripple.track(() => date.toLocaleDateString('en-US'));
+			let localeTimeString = #ripple.track(() => date.toLocaleTimeString('en-US'));
 
 			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
 			<div>

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

@@ -1,10 +1,10 @@
 import type { PropsWithExtras } from 'ripple';
-import { flushSync, track, createRefKey, trackSplit } from 'ripple';
+import { flushSync, createRefKey } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag>{'Hello World'}</@tag>
 		}
@@ -19,7 +19,7 @@ describe('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', () => {
 		component App() {
-			let obj = { tag: track('div') };
+			let obj = { tag: #ripple.track('div') };
 
 			<obj.@tag>{'Hello World'}</obj.@tag>
 		}
@@ -32,7 +32,7 @@ describe('dynamic DOM elements', () => {
 
 	it('renders static dynamic element from a tracked object with a tracked property', () => {
 		component App() {
-			let obj = track({ tag: track('div') });
+			let obj = #ripple.track({ tag: #ripple.track('div') });
 
 			<@obj.@tag>{'Hello World'}</@obj.@tag>
 		}
@@ -47,7 +47,7 @@ describe('dynamic DOM elements', () => {
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		() => {
 			component App() {
-				let obj = track({ tag: track('div') });
+				let obj = #ripple.track({ tag: #ripple.track('div') });
 
 				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
 			}
@@ -61,7 +61,7 @@ describe('dynamic DOM elements', () => {
 
 	it('renders reactive dynamic element', () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<button
 				onClick={() => {
@@ -92,7 +92,7 @@ describe('dynamic DOM elements', () => {
 
 	it('renders self-closing dynamic element', () => {
 		component App() {
-			let tag = track('input');
+			let tag = #ripple.track('input');
 
 			<@tag type="text" value="test" />
 		}
@@ -106,8 +106,8 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with attributes', () => {
 		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>
 		}
@@ -122,8 +122,8 @@ describe('dynamic DOM elements', () => {
 
 	it('handles nested dynamic elements', () => {
 		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>
@@ -142,8 +142,8 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with class object', () => {
 		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'}
@@ -159,7 +159,7 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with style object', () => {
 		component App() {
-			let tag = track('span');
+			let tag = #ripple.track('span');
 
 			<@tag
 				style={{
@@ -182,7 +182,7 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with spread attributes', () => {
 		component App() {
-			let tag = track('section');
+			let tag = #ripple.track('section');
 			const attrs = {
 				id: 'spread-section',
 				'data-testid': 'spread-test',
@@ -205,7 +205,7 @@ describe('dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 
 		component App() {
-			let tag = track('article');
+			let tag = #ripple.track('article');
 
 			<@tag
 				{ref (node: HTMLElement) => {
@@ -227,7 +227,7 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with createRefKey in spread', () => {
 		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
@@ -257,8 +257,8 @@ describe('dynamic DOM elements', () => {
 
 	it('has reactive attributes on dynamic elements', () => {
 		component App() {
-			let tag = track('div');
-			let count = track(0);
+			let tag = #ripple.track('div');
+			let count = #ripple.track(0);
 
 			<button
 				onClick={() => {
@@ -311,7 +311,7 @@ describe('dynamic DOM elements', () => {
 
 	it('applies scoped CSS to dynamic elements', () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="test-class">{'Dynamic element'}</@tag>
 
@@ -336,8 +336,8 @@ describe('dynamic DOM elements', () => {
 
 	it('applies scoped CSS to dynamic elements with reactive classes', () => {
 		component App() {
-			let tag = track('button');
-			let count = track(0);
+			let tag = #ripple.track('button');
+			let count = #ripple.track(0);
 
 			<@tag
 				class={@count % 2 ? 'even' : 'odd'}
@@ -410,8 +410,8 @@ describe('dynamic DOM elements', () => {
 			id: string;
 			onClick: EventListener;
 		}>) {
-			const tag = track('button');
-			const [rest] = trackSplit(props, []);
+			const tag = #ripple.track('button');
+			const [rest] = #ripple.trackSplit(props, []);
 			<@tag {...@rest}>{@rest.class}</@tag>
 
 			<style>
@@ -425,7 +425,7 @@ describe('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'}
@@ -468,7 +468,7 @@ describe('dynamic DOM elements', () => {
 
 	it('adds scoping class to dynamic elements', () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -491,7 +491,7 @@ describe('dynamic DOM elements', () => {
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -526,7 +526,7 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = track('div');
+			let tag = #ripple.track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -571,7 +571,7 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = track(() => Child);
+			let tag = #ripple.track(() => Child);
 
 			<@tag />
 
@@ -593,9 +593,144 @@ describe('dynamic DOM elements', () => {
 		expect(innerScopes).toHaveLength(0);
 	});
 
+	it('handles ref on dynamic element passed through component with reactive props', () => {
+		let capturedElement: HTMLElement | null = null;
+		let refCallCount = 0;
+
+		component Button(props: any) {
+			const el = #ripple.track('button');
+			<@el {...props} />
+		}
+
+		component App() {
+			let active = #ripple.track(false);
+
+			<Button
+				data-active={String(@active)}
+				onClick={() => {
+					@active = !@active;
+				}}
+				{ref (el: HTMLElement) => {
+					capturedElement = el;
+					refCallCount++;
+				}}
+			>
+				{'content'}
+			</Button>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(capturedElement).toBeTruthy();
+		expect(capturedElement!.tagName).toBe('BUTTON');
+		expect(capturedElement!.getAttribute('data-active')).toBe('false');
+		const initialRefCount = refCallCount;
+
+		// Click the button to trigger reactive prop update
+		capturedElement!.click();
+		flushSync();
+
+		// After clicking, the reactive prop should update without error
+		expect(capturedElement!.getAttribute('data-active')).toBe('true');
+		// Ref block should not have been recreated on prop update
+		expect(refCallCount).toBe(initialRefCount);
+	});
+
+	it('handles ref on dynamic element with spread props containing reactive values', () => {
+		let capturedElement: HTMLElement | null = null;
+
+		component Button(props: any) {
+			const el = #ripple.track('button');
+			<@el {...props} />
+		}
+
+		component App() {
+			let active = #ripple.track(false);
+
+			let buttonProps = #ripple.track(
+				() => ({
+					'data-active': @active,
+				}),
+			);
+
+			<Button
+				{...@buttonProps}
+				onClick={() => {
+					@active = !@active;
+				}}
+				{ref (el: HTMLElement) => {
+					capturedElement = el;
+				}}
+			>
+				{'content: '}
+				{@active}
+			</Button>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(capturedElement).toBeTruthy();
+		expect(capturedElement!.tagName).toBe('BUTTON');
+
+		// Click the button to trigger reactive update
+		capturedElement!.click();
+		flushSync();
+
+		// Should not throw, and ref should still be valid
+		expect(capturedElement!.tagName).toBe('BUTTON');
+	});
+
+	it('re-establishes ref with cleanup after parent block re-runs', () => {
+		let cleanupCount = 0;
+		let refCallCount = 0;
+		let capturedElement: HTMLElement | null = null;
+
+		component Button(props: any) {
+			const el = #ripple.track('button');
+			<@el {...props} />
+		}
+
+		component App() {
+			let active = #ripple.track(false);
+
+			<Button
+				data-active={String(@active)}
+				onClick={() => {
+					@active = !@active;
+				}}
+				{ref (el: HTMLElement) => {
+					capturedElement = el;
+					refCallCount++;
+					return () => {
+						cleanupCount++;
+					};
+				}}
+			>
+				{'content'}
+			</Button>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(capturedElement).toBeTruthy();
+		expect(refCallCount).toBe(1);
+		expect(cleanupCount).toBe(0);
+
+		// Click to trigger reactive prop update
+		capturedElement!.click();
+		flushSync();
+
+		// Ref with cleanup should be re-established after parent teardown cycle
+		expect(capturedElement!.getAttribute('data-active')).toBe('true');
+		expect(refCallCount).toBeGreaterThanOrEqual(1);
+	});
+
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
 		component App() {
-			let b = track(true);
+			let b = #ripple.track(true);
 			<div>
 				if (@b) {
 					{'Inside if'}

package/tests/client/events.test.ripple

@@ -1,11 +1,11 @@
 import type { OnEventListenerRemover } from 'ripple';
-import { track, flushSync, on, effect } from 'ripple';
+import { flushSync, on } from 'ripple';
 
 describe('on() event handler', () => {
 	it('should attach multiple handlers via onClick attribute (delegated)', () => {
 		component Basic() {
-			let count1 = track(0);
-			let count2 = track(0);
+			let count1 = #ripple.track(0);
+			let count2 = #ripple.track(0);
 
 			<button
 				onClick={() => {
@@ -36,7 +36,7 @@ describe('on() event handler', () => {
 
 	it('should attach and remove a single event handler', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const setupListener = (node: HTMLButtonElement) => {
 				const remove = on(node, 'click', () => {
@@ -67,8 +67,8 @@ describe('on() event handler', () => {
 
 	it('should handle multiple different event types on same element', () => {
 		component Basic() {
-			let clickCount = track(0);
-			let mousedownCount = track(0);
+			let clickCount = #ripple.track(0);
+			let mousedownCount = #ripple.track(0);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const remove1 = on(node, 'click', () => {
@@ -116,7 +116,7 @@ describe('on() event handler', () => {
 
 	it('should handle multiple handlers for same event type on same element', () => {
 		component Basic() {
-			let callOrder = track<number[]>([]);
+			let callOrder = #ripple.track<number[]>([]);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const remove1 = on(node, 'click', () => {
@@ -158,9 +158,9 @@ describe('on() event handler', () => {
 
 	it('should remove specific handler without affecting others', () => {
 		component Basic() {
-			let handler1Called = track(0);
-			let handler2Called = track(0);
-			let handler3Called = track(0);
+			let handler1Called = #ripple.track(0);
+			let handler2Called = #ripple.track(0);
+			let handler3Called = #ripple.track(0);
 			let removeHandler2: OnEventListenerRemover | undefined;
 
 			const setupListeners = (node: HTMLButtonElement) => {
@@ -235,8 +235,8 @@ describe('on() event handler', () => {
 		'should handle change event with multiple handlers (like bindChecked and bindIndeterminate)',
 		() => {
 			component Basic() {
-				let checked = track(false);
-				let indeterminate = track(true);
+				let checked = #ripple.track(false);
+				let indeterminate = #ripple.track(true);
 
 				const setupListeners = (node: HTMLInputElement) => {
 					node.indeterminate = @indeterminate;
@@ -283,7 +283,7 @@ describe('on() event handler', () => {
 
 	it('should support non-delegated events', () => {
 		component Basic() {
-			let focusCount = track(0);
+			let focusCount = #ripple.track(0);
 
 			const setupListener = (node: HTMLInputElement) => {
 				const remove = on(node, 'focus', () => {
@@ -315,7 +315,7 @@ describe('on() event handler', () => {
 
 	it('should handle removal of all handlers for same event type', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 			let remove1: OnEventListenerRemover | undefined;
 			let remove2: OnEventListenerRemover | undefined;
 			let remove3: OnEventListenerRemover | undefined;
@@ -379,7 +379,7 @@ describe('on() event handler', () => {
 
 	it('should not add duplicate handlers when same handler is attached multiple times', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const sharedHandler = () => {
 				@count++;
@@ -422,7 +422,7 @@ describe('on() event handler', () => {
 
 	it('should allow duplicate handlers when delegated is false (no deduplication)', () => {
 		component Basic() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
 			const sharedHandler = () => {
 				@count++;
@@ -466,7 +466,7 @@ describe('on() event handler', () => {
 
 	it('should fire capture event on parent before bubbling event on child', () => {
 		component Basic() {
-			let callOrder = track<string[]>([]);
+			let callOrder = #ripple.track<string[]>([]);
 
 			const parentCaptureHandler = () => {
 				@callOrder = [...@callOrder, 'parent-capture'];
@@ -511,8 +511,8 @@ describe('on() event handler', () => {
 
 	it('should fire handler only once when once option is true', () => {
 		component Basic() {
-			let count = track(0);
-			let permanentCount = track(0);
+			let count = #ripple.track(0);
+			let permanentCount = #ripple.track(0);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const onceHandler = on(node, 'click', () => {
@@ -565,9 +565,9 @@ describe('on() event handler', () => {
 
 	it('should handle click events on window', () => {
 		component Basic() {
-			let windowClickCount = track(0);
+			let windowClickCount = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				const removeWindowListener = on(window, 'click', () => {
 					@windowClickCount++;
 				});
@@ -601,9 +601,9 @@ describe('on() event handler', () => {
 
 	it('should handle click events on document', () => {
 		component Basic() {
-			let documentClickCount = track(0);
+			let documentClickCount = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				const removeDocumentListener = on(document, 'click', () => {
 					@documentClickCount++;
 				});
@@ -637,9 +637,9 @@ describe('on() event handler', () => {
 
 	it('should handle click events on body', () => {
 		component Basic() {
-			let bodyClickCount = track(0);
+			let bodyClickCount = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				const removeBodyListener = on(document.body, 'click', () => {
 					@bodyClickCount++;
 				});