ripple 0.2.115 → 0.2.118

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

@@ -35,14 +35,6 @@ export function create_anchor() {
 	return t;
 }
 
-/**
- * @param {any} value
- * @returns {boolean}
- */
-export function is_positive_integer(value) {
-	return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
-}
-
 /**
  * Checks if an object is a tracked object (has a numeric 'f' property).
  * @param {any} v - The object to check.

package/src/runtime/map.js

@@ -1,5 +1,5 @@
 /** @import { Block, Tracked } from '#client' */
-import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked, with_scope } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'values', Symbol.iterator];
 
@@ -193,3 +193,13 @@ export class TrackedMap extends Map {
     return [...this];
   }
 }
+
+/**
+ * @template K, V
+ * @param {Block} block
+ * @param {...any} args
+ * @returns {TrackedMap<K, V>}
+ */
+export function tracked_map(block, ...args) {
+  return with_scope(block, () => new TrackedMap(...args));
+}

package/src/runtime/set.js

@@ -1,5 +1,5 @@
 /** @import { Block, Tracked } from '#client' */
-import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked, with_scope } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'keys', 'values', Symbol.iterator];
 
@@ -193,3 +193,13 @@ export class TrackedSet extends Set {
     return [...this];
   }
 }
+
+/**
+ * @template V
+ * @param {Block} block
+ * @param {...any} args
+ * @returns {TrackedSet<V>}
+ */
+export function tracked_set(block, ...args) {
+  return with_scope(block, () => new TrackedSet(...args));
+}

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -317,3 +317,83 @@ exports[`for statements > render a simple static array 1`] = `
   
 </div>
 `;
+
+exports[`for statements > renders a simple dynamic array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > renders a simple dynamic array 2`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <div
+    class="Item 4"
+  >
+    Item 4
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > renders a simple static array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/client/_etc.test.ripple

@@ -0,0 +1,5 @@
+// This file is for tests that don't fit anywhere else
+
+describe('etc', () => {
+	it.skip('this is here so the empty test suite does not fail');
+});

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

@@ -0,0 +1,120 @@
+import { track, flushSync, TrackedArray } from 'ripple';
+
+describe('TrackedArray 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]);
+
+			<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
+			<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@firstItem}</pre>
+			<pre>{@thirdItem}</pre>
+			<pre>{@fourthItem}</pre>
+		}
+
+		render(ArrayTest);
+
+		const copyEndToStartButton = container.querySelectorAll('button')[0];
+		const copyStartToMiddleButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('4');
+
+		// Test copyWithin from end to start
+		copyEndToStartButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[4,5,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('4');
+
+		// Test copyWithin from start to middle
+		copyStartToMiddleButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[4,5,4,5,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('5');
+	});
+
+	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]);
+
+			<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@secondItem}</pre>
+			<pre>{@thirdItem}</pre>
+		}
+
+		render(ArrayTest);
+
+		const copyButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+
+		// Test copyWithin with negative indexes
+		copyButton.click();
+		flushSync();
+
+		// copyWithin(-4, -2) should copy [4,5] to positions [1,2]
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,4,5,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
+	});
+
+	it('handles copyWithin with overlapping ranges', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4, 5);
+			let entries = track(() => Array.from(items.entries()));
+
+			<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+
+			for (const [i, value] of @entries) {
+				<pre>{`items[${i}]: ${value}`}</pre>
+			}
+		}
+
+		render(ArrayTest);
+
+		const copyButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+
+		// Test values from reactive bindings
+		for (let i = 0; i < 5; i++) {
+			expect(container.querySelectorAll('pre')[i + 1].textContent).toBe(`items[${i}]: ${i + 1}`);
+		}
+
+		// Test copyWithin with overlapping ranges
+		copyButton.click();
+		flushSync();
+
+		// copyWithin(2, 1, 4) should copy [2,3,4] to positions [2,3,4]
+		// resulting in [1,2,2,3,4]
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,2,3,4]');
+
+		// Test that reactive bindings updated
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('items[0]: 1');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('items[1]: 2');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('items[2]: 2');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('items[3]: 3');
+		expect(container.querySelectorAll('pre')[5].textContent).toBe('items[4]: 4');
+	});
+});