ripple 0.2.216 → 0.3.0

package/src/runtime/url.js

@@ -1,14 +1,14 @@
-import { get, set, safe_scope, tracked } from './internal/client/runtime.js';
-import { REPLACE, TrackedURLSearchParams } from './url-search-params.js';
+import { get, set, safe_scope, tracked, with_scope } from './internal/client/runtime.js';
+import { REPLACE, RippleURLSearchParams } from './url-search-params.js';
 
-/** @type {TrackedURL | null} */
+/** @type {RippleURL | null} */
 let current_url = null;
 
 export function get_current_url() {
 	return current_url;
 }
 
-export class TrackedURL extends URL {
+export class RippleURL extends URL {
 	#block = safe_scope();
 	#protocol = tracked(super.protocol, this.#block);
 	#username = tracked(super.username, this.#block);
@@ -29,7 +29,7 @@ export class TrackedURL extends URL {
 		super(url);
 
 		current_url = this;
-		this.#searchParams = new TrackedURLSearchParams(url.searchParams);
+		this.#searchParams = new RippleURLSearchParams(url.searchParams);
 		current_url = null;
 	}
 
@@ -162,3 +162,13 @@ export class TrackedURL extends URL {
 		return this.href;
 	}
 }
+
+/**
+ * @param {import('#client').Block} block
+ * @param {string | URL} url
+ * @param {string | URL} [base]
+ * @returns {RippleURL}
+ */
+export function ripple_url(block, url, base) {
+	return with_scope(block, () => new RippleURL(url, base));
+}

package/src/utils/builders.js

@@ -325,7 +325,13 @@ export function get(name, body) {
  */
 export function id(name, loc_info) {
 	/** @type {AST.Identifier} */
-	const node = { type: 'Identifier', name, metadata: { path: [] } };
+	const node = {
+		type: 'Identifier',
+		name,
+		optional: false,
+		decorators: [],
+		metadata: { path: [] },
+	};
 
 	return set_location(node, loc_info);
 }
@@ -414,10 +420,14 @@ export function member_id(path) {
 
 /**
  * @param {Array<AST.Property | AST.SpreadElement>} properties
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.ObjectExpression}
  */
-export function object(properties) {
-	return { type: 'ObjectExpression', properties, metadata: { path: [] } };
+export function object(properties, loc_info) {
+	/** @type {AST.ObjectExpression} */
+	const node = { type: 'ObjectExpression', properties, metadata: { path: [] } };
+
+	return set_location(node, loc_info);
 }
 
 /**

package/tests/client/array/array.copy-within.test.ripple

@@ -1,12 +1,12 @@
-import { track, flushSync, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
-describe('TrackedArray copyWithin', () => {
+describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let firstItem = track(() => items[0]);
-			let thirdItem = track(() => items[2]);
-			let fourthItem = track(() => items[3]);
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let firstItem = #ripple.track(() => items[0]);
+			let thirdItem = #ripple.track(() => items[2]);
+			let fourthItem = #ripple.track(() => items[3]);
 
 			<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
 			<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
@@ -48,9 +48,9 @@ describe('TrackedArray copyWithin', () => {
 
 	it('handles copyWithin with negative indexes and reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let secondItem = track(() => items[1]);
-			let thirdItem = track(() => items[2]);
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let secondItem = #ripple.track(() => items[1]);
+			let thirdItem = #ripple.track(() => items[2]);
 
 			<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -79,8 +79,8 @@ describe('TrackedArray copyWithin', () => {
 
 	it('handles copyWithin with overlapping ranges', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let entries = track(() => Array.from(items.entries()));
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let entries = #ripple.track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 			<pre>{JSON.stringify(items)}</pre>

package/tests/client/array/array.derived.test.ripple

@@ -1,13 +1,13 @@
-import { flushSync, track, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
-describe('TrackedArray > derived', () => {
+describe('RippleArray > derived', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let doubled = track(() => items.map((x) => x * 2));
-			let filtered = track(() => items.filter((x) => x % 2 === 0));
-			let reduced = track(() => items.reduce((acc, val) => acc + val, 0));
-			let includes = track(() => items.includes(3));
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let doubled = #ripple.track(() => items.map((x) => x * 2));
+			let filtered = #ripple.track(() => items.filter((x) => x % 2 === 0));
+			let reduced = #ripple.track(() => items.reduce((acc, val) => acc + val, 0));
+			let includes = #ripple.track(() => items.includes(3));
 
 			<button onClick={() => items.push(6)}>{'add item'}</button>
 			<pre>{JSON.stringify(@doubled)}</pre>
@@ -38,8 +38,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles concat method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
+			let items = new RippleArray(1, 2, 3);
+			let concatenated = #ripple.track(() => items.concat([4, 5], 6, [7, 8]));
 
 			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -64,8 +64,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles array slice method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let sliced = track(() => items.slice(1, 4));
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			let sliced = #ripple.track(() => items.slice(1, 4));
 
 			<button onClick={() => (items[2] = 30)}>{'change middle'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -90,9 +90,9 @@ describe('TrackedArray > derived', () => {
 
 	it('handles find and findIndex methods with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(5, 10, 15, 20, 25);
-			let found = track(() => items.find((x) => x > 12));
-			let foundIndex = track(() => items.findIndex((x) => x > 12));
+			let items = new RippleArray(5, 10, 15, 20, 25);
+			let found = #ripple.track(() => items.find((x) => x > 12));
+			let foundIndex = #ripple.track(() => items.findIndex((x) => x > 12));
 
 			<button
 				onClick={() => {
@@ -124,9 +124,9 @@ describe('TrackedArray > derived', () => {
 
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(5, 15, 10, 20, 15);
-			let foundLast = track(() => items.findLast((x) => x === 15));
-			let foundLastIndex = track(() => items.findLastIndex((x) => x === 15));
+			let items = new RippleArray(5, 15, 10, 20, 15);
+			let foundLast = #ripple.track(() => items.findLast((x) => x === 15));
+			let foundLastIndex = #ripple.track(() => items.findLastIndex((x) => x === 15));
 
 			<button
 				onClick={() => {
@@ -158,8 +158,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles every method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(2, 4, 6, 8);
-			let allEven = track(() => items.every((x) => x % 2 === 0));
+			let items = new RippleArray(2, 4, 6, 8);
+			let allEven = #ripple.track(() => items.every((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(3)}>{'add odd'}</button>
 			<button
@@ -194,8 +194,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles flat method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray<number | number[]>([1, 2], [3, 4], 5);
-			let flattened = track(() => items.flat());
+			let items = new RippleArray<number | number[]>([1, 2], [3, 4], 5);
+			let flattened = #ripple.track(() => items.flat());
 
 			<button onClick={() => (items[0] = [6, 7, 8])}>{'change nested'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -220,8 +220,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles flatMap method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let flatMapped = track(() => items.flatMap((x) => [x, x * 2]));
+			let items = new RippleArray(1, 2, 3);
+			let flatMapped = #ripple.track(() => items.flatMap((x) => [x, x * 2]));
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -246,8 +246,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles join method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray('apple', 'banana', 'cherry');
-			let joined = track(() => items.join(', '));
+			let items = new RippleArray('apple', 'banana', 'cherry');
+			let joined = #ripple.track(() => items.join(', '));
 
 			<button onClick={() => items.push('date')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -274,8 +274,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles lastIndexOf method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 2, 1);
-			let lastIndex = track(() => items.lastIndexOf(2));
+			let items = new RippleArray(1, 2, 3, 2, 1);
+			let lastIndex = #ripple.track(() => items.lastIndexOf(2));
 
 			<button
 				onClick={() => {
@@ -306,8 +306,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles reduceRight method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
+			let items = new RippleArray('a', 'b', 'c');
+			let reduced = #ripple.track(() => items.reduceRight((acc, val) => acc + val, ''));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -332,8 +332,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles some method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 3, 5, 7);
-			let hasEven = track(() => items.some((x) => x % 2 === 0));
+			let items = new RippleArray(1, 3, 5, 7);
+			let hasEven = #ripple.track(() => items.some((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(2)}>{'add even'}</button>
 			<button
@@ -368,8 +368,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles toLocaleString method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1000, 2000, 3000);
-			let localized = track(() => items.toLocaleString('en-US'));
+			let items = new RippleArray(1000, 2000, 3000);
+			let localized = #ripple.track(() => items.toLocaleString('en-US'));
 
 			<button
 				onClick={() => {
@@ -400,8 +400,8 @@ describe('TrackedArray > derived', () => {
 
 	it('handles toString method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let string = track(() => items.toString());
+			let items = new RippleArray(1, 2, 3);
+			let string = #ripple.track(() => items.toString());
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -430,8 +430,8 @@ describe('TrackedArray > derived', () => {
 		}
 
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4);
-			let withReplaced = track(() => items.with(2, 30));
+			let items = new RippleArray(1, 2, 3, 4);
+			let withReplaced = #ripple.track(() => items.with(2, 30));
 
 			<button onClick={() => (items[2] = 50)}>{'change original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -456,7 +456,7 @@ describe('TrackedArray > derived', () => {
 
 	it('handles toJSON method', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
+			let items = new RippleArray(1, 2, 3);
 
 			<button onClick={() => items.push(4)}>{'add'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -478,10 +478,10 @@ describe('TrackedArray > derived', () => {
 
 	it('handles at method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(10, 20, 30, 40, 50);
-			let atIndex2 = track(() => items.at(2));
-			let atNegative1 = track(() => items.at(-1));
-			let atNegative2 = track(() => items.at(-2));
+			let items = new RippleArray(10, 20, 30, 40, 50);
+			let atIndex2 = #ripple.track(() => items.at(2));
+			let atNegative1 = #ripple.track(() => items.at(-1));
+			let atNegative2 = #ripple.track(() => items.at(-2));
 
 			<button onClick={() => (items[2] = 300)}>{'change index 2'}</button>
 			<button onClick={() => (items[items.length - 1] = 500)}>{'change last'}</button>

package/tests/client/array/array.iteration.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, track, effect, untrack, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
-describe('TrackedArray > iteration', () => {
+describe('RippleArray > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let entries = track(() => Array.from(items.entries()));
+			let items = new RippleArray('a', 'b', 'c');
+			let entries = #ripple.track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -31,8 +31,8 @@ describe('TrackedArray > iteration', () => {
 
 	it('handles keys method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let keys = track(() => Array.from(items.keys()));
+			let items = new RippleArray('a', 'b', 'c');
+			let keys = #ripple.track(() => Array.from(items.keys()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -57,8 +57,8 @@ describe('TrackedArray > iteration', () => {
 
 	it('handles values method with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let values = track(() => Array.from(items.values()));
+			let items = new RippleArray('a', 'b', 'c');
+			let values = #ripple.track(() => Array.from(items.values()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -83,13 +83,13 @@ describe('TrackedArray > iteration', () => {
 
 	it('handles Symbol.iterator with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let sum = track(0);
+			let items = new RippleArray(1, 2, 3);
+			let sum = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				@sum = 0;
 				for (const item of items) {
-					untrack(() => {
+					#ripple.untrack(() => {
 						@sum += item;
 					});
 				}

package/tests/client/array/array.mutations.test.ripple

@@ -1,16 +1,16 @@
-import { flushSync, track, TrackedArray } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
-describe('TrackedArray > mutations', () => {
+describe('RippleArray > mutations', () => {
 	it('handles direct assignment and length tracking', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
+			let items = #ripple[1, 2, 3];
 
 			<button onClick={() => (items[items.length] = items.length + 1)}>{'increment'}</button>
 
 			<Child {items} />
 		}
 
-		component Child({ items }: { items: TrackedArray<number> }) {
+		component Child({ items }: { items: RippleArray<number> }) {
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
 		}
@@ -34,8 +34,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles push and pop operations with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let lastItem = track(() => items[items.length - 1]);
+			let items = #ripple[1, 2, 3];
+			let lastItem = #ripple.track(() => items[items.length - 1]);
 
 			<button onClick={() => items.push(4)}>{'push'}</button>
 			<button onClick={() => items.pop()}>{'pop'}</button>
@@ -73,8 +73,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles shift and unshift operations with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(2, 3, 4);
-			let firstItem = track(() => items[0]);
+			let items = #ripple[2, 3, 4];
+			let firstItem = #ripple.track(() => items[0]);
 
 			<button onClick={() => items.unshift(1)}>{'unshift'}</button>
 			<button onClick={() => items.shift()}>{'shift'}</button>
@@ -112,8 +112,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles splice operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray<number | string>(1, 2, 3, 4, 5);
-			let middleItem = track(() => items[2]);
+			let items: RippleArray<number | string> = #ripple[1, 2, 3, 4, 5];
+			let middleItem = #ripple.track(() => items[2]);
 
 			<button onClick={() => items.splice(1, 2, 'a', 'b')}>{'splice'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -141,8 +141,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles fill operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let secondItem = track(() => items[1]);
+			let items = #ripple[1, 2, 3, 4, 5];
+			let secondItem = #ripple.track(() => items[1]);
 
 			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -167,9 +167,9 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles reverse operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let firstItem = track(() => items[0]);
-			let lastItem = track(() => items[4]);
+			let items = #ripple[1, 2, 3, 4, 5];
+			let firstItem = #ripple.track(() => items[0]);
+			let lastItem = #ripple.track(() => items[4]);
 
 			<button onClick={() => items.reverse()}>{'reverse'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -197,8 +197,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles sort operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(5, 3, 1, 4, 2);
-			let secondItem = track(() => items[1]);
+			let items = new RippleArray(5, 3, 1, 4, 2);
+			let secondItem = #ripple.track(() => items[1]);
 
 			<button onClick={() => items.sort()}>{'sort ascending'}</button>
 			<button onClick={() => items.sort((a, b) => b - a)}>{'sort descending'}</button>
@@ -232,7 +232,7 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles array modification through forEach()', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
+			let items = new RippleArray(1, 2, 3);
 
 			<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
 				{'double all'}
@@ -256,7 +256,7 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles array modification through iterator', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
+			let items = new RippleArray(1, 2, 3);
 
 			<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
 				{'double all'}
@@ -287,9 +287,9 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles array index access with reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(10, 20, 30);
-			let firstItem = track(() => items[0]);
-			let secondItem = track(() => items[1]);
+			let items = new RippleArray(10, 20, 30);
+			let firstItem = #ripple.track(() => items[0]);
+			let secondItem = #ripple.track(() => items[1]);
 
 			<button onClick={() => (items[0] = 100)}>{'change first'}</button>
 			<pre>{@firstItem}</pre>
@@ -320,8 +320,8 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles length property for reactivity', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let length = track(() => items.length);
+			let items = new RippleArray(1, 2, 3);
+			let length = #ripple.track(() => items.length);
 
 			<button onClick={() => (items.length = 5)}>{'expand'}</button>
 			<button onClick={() => (items.length = 2)}>{'shrink'}</button>
@@ -355,7 +355,7 @@ describe('TrackedArray > mutations', () => {
 
 	it('handles setting length property and resizing the array', () => {
 		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
+			let items = new RippleArray(1, 2, 3, 4, 5);
 
 			<button onClick={() => (items.length = 3)}>{'truncate'}</button>
 			<button onClick={() => (items.length = 7)}>{'expand'}</button>