ripple 0.3.3 → 0.3.4

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

@@ -1,10 +1,10 @@
 import type { PropsWithExtras } from 'ripple';
-import { flushSync, createRefKey } from 'ripple';
+import { createRefKey, flushSync, track, trackSplit } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = 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: #ripple.track('div') };
+			let obj = { tag: 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 = #ripple.track({ tag: #ripple.track('div') });
+			let obj = track({ tag: 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 = #ripple.track({ tag: #ripple.track('div') });
+				let obj = track({ tag: 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 = #ripple.track('div');
+			let tag = track('div');
 
 			<button
 				onClick={() => {
@@ -92,7 +92,7 @@ describe('dynamic DOM elements', () => {
 
 	it('renders self-closing dynamic element', () => {
 		component App() {
-			let tag = #ripple.track('input');
+			let tag = 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 = #ripple.track('div');
-			let className = #ripple.track('test-class');
+			let tag = track('div');
+			let className = 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 = #ripple.track('div');
-			let innerTag = #ripple.track('span');
+			let outerTag = track('div');
+			let innerTag = 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 = #ripple.track('div');
-			let active = #ripple.track(true);
+			let tag = track('div');
+			let active = 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 = #ripple.track('span');
+			let tag = track('span');
 
 			<@tag
 				style={{
@@ -182,7 +182,7 @@ describe('dynamic DOM elements', () => {
 
 	it('handles dynamic element with spread attributes', () => {
 		component App() {
-			let tag = #ripple.track('section');
+			let tag = 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 = #ripple.track('article');
+			let tag = 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 = #ripple.track('header');
+			let tag = 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 = #ripple.track('div');
-			let count = #ripple.track(0);
+			let tag = track('div');
+			let count = track(0);
 
 			<button
 				onClick={() => {
@@ -311,7 +311,7 @@ describe('dynamic DOM elements', () => {
 
 	it('applies scoped CSS to dynamic elements', () => {
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = 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 = #ripple.track('button');
-			let count = #ripple.track(0);
+			let tag = track('button');
+			let count = track(0);
 
 			<@tag
 				class={@count % 2 ? 'even' : 'odd'}
@@ -410,8 +410,8 @@ describe('dynamic DOM elements', () => {
 			id: string;
 			onClick: EventListener;
 		}>) {
-			const tag = #ripple.track('button');
-			const [rest] = #ripple.trackSplit(props, []);
+			const tag = track('button');
+			const [rest] = trackSplit(props, []);
 			<@tag {...@rest}>{@rest.class}</@tag>
 
 			<style>
@@ -425,7 +425,7 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = #ripple.track(0);
+			const count = 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 = #ripple.track('div');
+			let tag = 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 = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -526,7 +526,7 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -571,7 +571,7 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = #ripple.track(() => Child);
+			let tag = track(() => Child);
 
 			<@tag />
 
@@ -598,12 +598,12 @@ describe('dynamic DOM elements', () => {
 		let refCallCount = 0;
 
 		component Button(props: any) {
-			const el = #ripple.track('button');
+			const el = track('button');
 			<@el {...props} />
 		}
 
 		component App() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<Button
 				data-active={String(@active)}
@@ -641,14 +641,14 @@ describe('dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 
 		component Button(props: any) {
-			const el = #ripple.track('button');
+			const el = track('button');
 			<@el {...props} />
 		}
 
 		component App() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
-			let buttonProps = #ripple.track(
+			let buttonProps = track(
 				() => ({
 					'data-active': @active,
 				}),
@@ -688,12 +688,12 @@ describe('dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 
 		component Button(props: any) {
-			const el = #ripple.track('button');
+			const el = track('button');
 			<@el {...props} />
 		}
 
 		component App() {
-			let active = #ripple.track(false);
+			let active = track(false);
 
 			<Button
 				data-active={String(@active)}
@@ -730,7 +730,7 @@ describe('dynamic DOM elements', () => {
 
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
 		component App() {
-			let b = #ripple.track(true);
+			let b = track(true);
 			<div>
 				if (@b) {
 					{'Inside if'}

package/tests/client/events.test.ripple

@@ -1,11 +1,11 @@
 import type { OnEventListenerRemover } from 'ripple';
-import { flushSync, on } from 'ripple';
+import { effect, flushSync, on, track } from 'ripple';
 
 describe('on() event handler', () => {
 	it('should attach multiple handlers via onClick attribute (delegated)', () => {
 		component Basic() {
-			let count1 = #ripple.track(0);
-			let count2 = #ripple.track(0);
+			let count1 = track(0);
+			let count2 = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
-			let mousedownCount = #ripple.track(0);
+			let clickCount = track(0);
+			let mousedownCount = 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 = #ripple.track<number[]>([]);
+			let callOrder = 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 = #ripple.track(0);
-			let handler2Called = #ripple.track(0);
-			let handler3Called = #ripple.track(0);
+			let handler1Called = track(0);
+			let handler2Called = track(0);
+			let handler3Called = 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 = #ripple.track(false);
-				let indeterminate = #ripple.track(true);
+				let checked = track(false);
+				let indeterminate = 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 = #ripple.track(0);
+			let focusCount = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track(0);
+			let count = 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 = #ripple.track<string[]>([]);
+			let callOrder = 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 = #ripple.track(0);
-			let permanentCount = #ripple.track(0);
+			let count = track(0);
+			let permanentCount = 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 = #ripple.track(0);
+			let windowClickCount = track(0);
 
-			#ripple.effect(() => {
+			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 = #ripple.track(0);
+			let documentClickCount = track(0);
 
-			#ripple.effect(() => {
+			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 = #ripple.track(0);
+			let bodyClickCount = track(0);
 
-			#ripple.effect(() => {
+			effect(() => {
 				const removeBodyListener = on(document.body, 'click', () => {
 					@bodyClickCount++;
 				});

package/tests/client/for.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, RippleArray } from 'ripple';
+import { RippleArray, flushSync, track } from 'ripple';
 
 describe('for statements', () => {
 	it('renders a simple static array', () => {
@@ -17,7 +17,7 @@ describe('for statements', () => {
 
 	it('renders a simple dynamic array', () => {
 		component App() {
-			const items = #ripple['Item 1', 'Item 2', 'Item 3'];
+			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');
 
 			for (const item of items) {
 				<div class={item}>{item}</div>
@@ -39,7 +39,7 @@ describe('for statements', () => {
 
 	it('correctly handles intermediate statements in for block', () => {
 		component App() {
-			const items = #ripple[1, 2, 3];
+			const items = new RippleArray(1, 2, 3);
 
 			<div>
 				for (const item of items) {
@@ -68,7 +68,7 @@ describe('for statements', () => {
 
 	it('correctly handles the index in a for...of loop', () => {
 		component App() {
-			const items = #ripple['a', 'b', 'c'];
+			const items = new RippleArray('a', 'b', 'c');
 
 			<div>
 				for (let item of items; index i) {
@@ -101,7 +101,7 @@ describe('for statements', () => {
 
 	it('correctly handles keyed for...of loops', () => {
 		component App() {
-			let items = #ripple.track([
+			let items = track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },
@@ -134,9 +134,9 @@ describe('for statements', () => {
 
 	it('keyed for over derived updates sibling text nodes', () => {
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
-			const items = #ripple.track(
+			const items = track(
 				() => Array.from({ length: @count }).map((_, id) => ({ id, label: `Item ${id}` })),
 			);
 
@@ -208,7 +208,7 @@ describe('for statements', () => {
 
 	it('handles updating with new objects with same key', () => {
 		component App() {
-			let items = #ripple.track([
+			let items = track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },

package/tests/client/head.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('head elements', () => {
 	let originalTitle: string;
@@ -29,7 +29,7 @@ describe('head elements', () => {
 
 	it('renders reactive title element', () => {
 		component App() {
-			let title = #ripple.track('Initial Title');
+			let title = track('Initial Title');
 
 			<head>
 				<title>{@title}</title>
@@ -61,7 +61,7 @@ describe('head elements', () => {
 
 	it('renders title with template literal', () => {
 		component App() {
-			let name = #ripple.track('World');
+			let name = track('World');
 
 			<head>
 				<title>{`Hello ${@name}!`}</title>
@@ -90,7 +90,7 @@ describe('head elements', () => {
 
 	it('renders title with computed value', () => {
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 			let prefix = 'Count: ';
 
 			<head>
@@ -122,7 +122,7 @@ describe('head elements', () => {
 
 	it('handles multiple title updates', () => {
 		component App() {
-			let step = #ripple.track(1);
+			let step = track(1);
 
 			<head>
 				<title>{`Step ${@step} of 3`}</title>
@@ -172,8 +172,8 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', () => {
 		component App() {
-			let showPrefix = #ripple.track(true);
-			let title = #ripple.track('Main Page');
+			let showPrefix = track(true);
+			let title = track('Main Page');
 
 			<head>
 				<title>{@showPrefix ? 'App - ' + @title : @title}</title>

package/tests/client/html.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('html directive', () => {
 	it('renders static html', () => {
@@ -14,7 +14,7 @@ describe('html directive', () => {
 
 	it('renders dynamic html', () => {
 		component App() {
-			let str = #ripple.track('<div>Test</div>');
+			let str = track('<div>Test</div>');
 
 			{html @str}