ripple 0.2.48 → 0.2.50

package/tests/composite.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track } from 'ripple';
+import { mount, flushSync, track, RippleArray } from 'ripple';
 
 describe('composite components', () => {
 	let container;
@@ -284,4 +284,15 @@ describe('composite components', () => {
 		expect(container.querySelectorAll('div')[0].textContent).toBe('');
 		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
 	});
+
+	it('handlers generic', () => {
+		component ArrayTest() {
+			let items = new RippleArray<number>();
+			items.push.apply(items, [1, 2, 3, 4, 5]);
+
+			<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+		}
+
+		render(ArrayTest);
+	});
 });

package/tests/map.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, RippleMap } from 'ripple';
+import { mount, flushSync, RippleMap, track } from 'ripple';
 
 describe('RippleMap', () => {
     let container;
@@ -23,16 +23,16 @@ describe('RippleMap', () => {
     it('handles set with update and delete operations with a reactive $size var', () => {
         component MapTest() {
             let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-            let $value = map.get('a');
-            let $size = map.$size;
+            let value = track(() => map.get('a'));
+            let size = track(() => map.$size);
 
             <button onClick={() => map.set('d', 4)}>{'set'}</button>
             <button onClick={() => map.delete('b')}>{'delete'}</button>
             <button onClick={() => map.set('a', 5)}>{'update'}</button>
 
             <pre>{map.get('d')}</pre>
-            <pre>{$size}</pre>
-            <pre>{$value}</pre>
+            <pre>{@size}</pre>
+            <pre>{@value}</pre>
         }
 
         render(MapTest);
@@ -80,10 +80,10 @@ describe('RippleMap', () => {
     it('handles has operation and tracks reactive $has', () => {
         component MapTest() {
             let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-            let $has = map.has('b');
+            let has = track(() => map.has('b'));
 
             <button onClick={() => map.delete('b')}>{'delete'}</button>
-            <pre>{$has}</pre>
+            <pre>{@has}</pre>
         }
 
         render(MapTest);
@@ -100,15 +100,15 @@ describe('RippleMap', () => {
     it('handles reactivity of keys, values, and entries', () => {
         component MapTest() {
             let map = new RippleMap([['x', 10], ['y', 20]]);
-            let $keys = Array.from(map.keys());
-            let $values = Array.from(map.values());
-            let $entries = Array.from(map.entries());
+            let keys = track(() => Array.from(map.keys()));
+            let values = track(() => Array.from(map.values()));
+            let entries = track(() => Array.from(map.entries()));
 
             <button onClick={() => map.delete('x')}>{'delete'}</button>
 
-            <pre>{JSON.stringify($keys)}</pre>
-            <pre>{JSON.stringify($values)}</pre>
-            <pre>{JSON.stringify($entries)}</pre>
+            <pre>{JSON.stringify(@keys)}</pre>
+            <pre>{JSON.stringify(@values)}</pre>
+            <pre>{JSON.stringify(@entries)}</pre>
         }
 
         render(MapTest);

package/tests/set.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, RippleSet } from 'ripple';
+import { mount, flushSync, RippleSet, track } from 'ripple';
 
 describe('RippleSet', () => {
   let container;
@@ -79,10 +79,10 @@ describe('RippleSet', () => {
   it('handles has operation', () => {
     component SetTest() {
       let items = new RippleSet([1, 2, 3]);
-      let $hasValue = items.has(2);
+      let hasValue = track(() => items.has(2));
 
       <button onClick={() => items.delete(2)}>{'delete'}</button>
-      <pre>{$hasValue}</pre>
+      <pre>{@hasValue}</pre>
     }
 
     render(SetTest);

package/types/index.d.ts

@@ -84,4 +84,4 @@ export declare function createRefKey(): symbol;
 
 type Tracked<V> = { '#v': V };
 
-export declare function track<V>(value: V | (() => V)): Tracked<V>;
+export declare function track<V>(value?: V | (() => V)): Tracked<V>;

package/src/runtime/internal/client/array.js

@@ -1,352 +0,0 @@
-import { TRACKED_OBJECT } from './constants';
-import { old_get_property } from './runtime';
-
-const array_proto = Array.prototype;
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {(previousValue: T, currentValue: T, currentIndex: number, array: Array<T>) => T} callback
- * @param {T} initial_value
- * @returns {T}
- */
-export function array_reduce(array, callback, initial_value) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-
-  if (tracked_properties === undefined || array.reduce !== array_proto.reduce) {
-    return array.reduce(callback, initial_value);
-  }
-
-  let accumulator = initial_value;
-
-  for (let i = 0; i < array.length; i++) {
-    accumulator = callback(accumulator, old_get_property(array, i), i, array);
-  }
-
-  return accumulator;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {string} [separator]
- * @returns {string}
- */
-export function array_join(array, separator) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.join !== array_proto.join) {
-    return array.join(separator);
-  }
-
-  let result = '';
-  for (let i = 0; i < array.length; i++) {
-    if (i > 0 && separator !== undefined) {
-      result += separator;
-    }
-    result += String(old_get_property(array, i));
-  }
-
-  return result;
-}
-
-/**
- * @template T
- * @template U
- * @param {Array<T>} array
- * @param {(value: T, index: number, array: Array<T>) => U} callback
- * @returns {Array<U>}
- */
-export function array_map(array, callback) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.map !== array_proto.map) {
-    return array.map(callback);
-  }
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      result[i] = callback(old_get_property(array, i), i, array);
-    }
-  }
-
-  return result;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {(value: T, index: number, array: Array<T>) => boolean} callback
- * @returns {Array<T>}
- */
-export function array_filter(array, callback) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.filter !== array_proto.filter) {
-    return array.filter(callback);
-  }
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      const value = old_get_property(array, i);
-      if (callback(value, i, array)) {
-        result.push(value);
-      }
-    }
-  }
-
-  return result;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {(value: T, index: number, array: Array<T>) => boolean} callback
- * @returns {void}
- */
-export function array_forEach(array, callback) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.forEach !== array_proto.forEach) {
-    return array.forEach(callback);
-  }
-
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      callback(old_get_property(array, i), i, array);
-    }
-  }
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {T} value
- * @returns {boolean}
- */
-export function array_includes(array, value) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.includes !== array_proto.includes) {
-    return array.includes(value);
-  }
-
-  for (let i = 0; i < array.length; i++) {
-    if (i in array && old_get_property(array, i) === value) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {T} value
- * @returns {number}
- */
-export function array_indexOf(array, value) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.indexOf !== array_proto.indexOf) {
-    return array.indexOf(value);
-  }
-
-  for (let i = 0; i < array.length; i++) {
-    if (i in array && old_get_property(array, i) === value) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {T} value
- * @returns {number}
- */
-export function array_lastIndexOf(array, value) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.lastIndexOf !== array_proto.lastIndexOf) {
-    return array.lastIndexOf(value);
-  }
-
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (i in array && old_get_property(array, i) === value) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {(value: T, index: number, array: Array<T>) => boolean} callback
- * @returns {boolean}
- */
-export function array_every(array, callback) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.every !== array_proto.every) {
-    return array.every(callback);
-  }
-
-  for (let i = 0; i < array.length; i++) {
-    if (i in array && !callback(old_get_property(array, i), i, array)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {(value: T, index: number, array: Array<T>) => boolean} callback
- * @returns {boolean}
- */
-export function array_some(array, callback) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.some !== array_proto.some) {
-    return array.some(callback);
-  }
-
-  for (let i = 0; i < array.length; i++) {
-    if (i in array && callback(old_get_property(array, i), i, array)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @returns {string}
- */
-export function array_toString(array) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.toString !== array_proto.toString) {
-    return array.toString();
-  }
-
-  let result = '';
-  for (let i = 0; i < array.length; i++) {
-    if (i > 0) {
-      result += ',';
-    }
-    if (i in array) {
-      result += String(old_get_property(array, i));
-    }
-  }
-
-  return result;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {((a: T, b: T) => number) | undefined} compare_fn
- * @returns {Array<T>}
- */
-export function array_toSorted(array, compare_fn) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.toSorted !== array_proto.toSorted) {
-    return array.toSorted(compare_fn);
-  }
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      result.push(old_get_property(array, i));
-    }
-  }
-
-  return result.sort(compare_fn);
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @param {number} start
- * @param {number} delete_count
- * @param {...T} items
- * @returns {Array<T>}
- */
-export function array_toSpliced(array, start, delete_count, ...items) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.toSpliced !== array_proto.toSpliced) {
-    return array.toSpliced(start, delete_count, ...items);
-  }
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      result.push(old_get_property(array, i));
-    }
-  }
-
-  result.splice(start, delete_count, ...items);
-
-  return result;
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @returns {IterableIterator<T>}
- */
-export function array_values(array) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.values !== array_proto.values) {
-    return array.values();
-  }
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      result.push(old_get_property(array, i));
-    }
-  }
-
-  return result[Symbol.iterator]();
-}
-
-/**
- * @template T
- * @param {Array<T>} array
- * @returns {IterableIterator<[number, T]>}
- */
-export function array_entries(array) {
-  // @ts-expect-error
-  var tracked_properties = array[TRACKED_OBJECT];
-  if (tracked_properties === undefined || array.entries !== array_proto.entries) {
-    return array.entries();
-  }
-
-  /** @type {Array<[number, T]>} */
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    if (i in array) {
-      result.push([i, old_get_property(array, i)]);
-    }
-  }
-
-  return result[Symbol.iterator]();
-}