ripple 0.2.28 → 0.2.31

package/tests/boundaries.ripple

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, effect } from 'ripple';
+
+describe('passing reactivity between boundaries tests', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+  it('can pass reactivity between functions with simple arrays and destructuring', () => {
+    let log: string[] = [];
+
+    function createDouble([ $count ]) {
+      const $double = $count * 2;
+
+      effect(() => {
+        log.push('Count:' + $count);
+      });
+
+      return [ $double ];
+    }
+
+    component App() {
+      let $count = 0;
+      
+      const [ $double ] = createDouble([ $count ]);
+
+      <div>{'Double: ' + $double}</div>
+      <button onClick={() => { $count++; }}>{'Increment'}</button>
+    }
+
+    render(App);
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 0');
+    expect(log).toEqual(['Count:0']);
+
+    const button = container.querySelector('button');
+
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 2');
+    expect(log).toEqual(['Count:0', 'Count:1']);
+
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 4');
+    expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
+  });
+
+  it('can pass reactivity between functions with simple objects and destructuring', () => {
+    let log: string[] = [];
+
+    function createDouble({ $count }) {
+      const $double = $count * 2;
+
+      effect(() => {
+        log.push('Count:' + $count);
+      });
+
+      return { $double };
+    }
+
+    component App() {
+      let $count = 0;
+
+      const { $double } = createDouble({ $count });
+
+      <div>{'Double: ' + $double}</div>
+      <button onClick={() => { $count++; }}>{'Increment'}</button>
+    }
+
+    render(App);
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 0');
+    expect(log).toEqual(['Count:0']);
+
+    const button = container.querySelector('button');
+
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 2');
+    expect(log).toEqual(['Count:0', 'Count:1']);
+
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('Double: 4');
+    expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
+  });
+});

package/tests/compiler.test.ripple

@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
-import { mount } from 'ripple';
+import { mount, RippleArray } from 'ripple';
 
 describe('compiler success tests', () => {
   let container;
@@ -58,4 +57,100 @@ describe('compiler success tests', () => {
 		render(App);
 	});
 
+	it('render lexical blocks without crashing', () => {
+		component App() {
+			<div>
+				const a = 1;
+				<div>
+					const b = 1;
+				</div>
+				<div>
+					const b = 1;
+				</div>
+			</div>
+			<div>
+				const a = 2;
+				<div>
+					const b = 1;
+				</div>
+			</div>
+		}
+
+		render(App);
+	});
+
+	it('properly handles JS assignments, reads and updates to array indices', () => {
+		const logs = [];
+
+		component App() {
+			let items = [];
+			let $items = [];
+			let items2 = new Array();
+			let items3 = new RippleArray();
+			let i = 0;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push($items[0]);
+			logs.push($items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			items[0] = 123;
+			items[i] = 123;
+			$items[0] = 123;
+			$items[i] = 123;
+			items2[0] = 123;
+			items2[i] = 123;
+			items3[0] = 123;
+			items3[i] = 123;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push($items[0]);
+			logs.push($items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			items[0]++;
+			items[i]++;
+			$items[0]++;
+			$items[i]++;
+			items2[0]++;
+			items2[i]++;
+			items3[0]++;
+			items3[i]++;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push($items[0]);
+			logs.push($items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			logs.push(--items[0]);
+			logs.push(--items[i]);
+			logs.push(--$items[0]);
+			logs.push(--$items[i]);
+			logs.push(--items2[0]);
+			logs.push(--items2[i]);
+			logs.push(--items3[0]);
+			logs.push(--items3[i]);
+		}
+
+		render(App);
+
+		expect(logs).toEqual([
+			undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined,
+			123, 123, 123, 123, 123, 123, 123, 123,
+			125, 125, 125, 125, 125, 125, 125, 125,
+			124, 123, 124, 123, 124, 123, 124, 123
+		]);
+	});
 });

package/tests/composite.test.ripple

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
 import { mount, flushSync } from 'ripple';
 
 describe('composite components', () => {

package/tests/context.test.ripple

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
 import { mount, createContext } from 'ripple';
 
 describe('context', () => {

package/tests/{use.test.ripple → decorators.ripple}

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
 import { mount, flushSync, RippleArray } from 'ripple';
 
 describe('@use element decorators', () => {

package/tests/map.test.ripple

@@ -0,0 +1,141 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, RippleMap } from 'ripple';
+
+describe('RippleMap', () => {
+    let container;
+
+    function render(component) {
+        mount(component, {
+            target: container
+        });
+    }
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(container);
+        container = null;
+    });
+
+    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;
+
+            <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>
+        }
+
+        render(MapTest);
+
+        const setButton = container.querySelectorAll('button')[0];
+        const deleteButton = container.querySelectorAll('button')[1];
+        const updateButton = container.querySelectorAll('button')[2];
+
+        setButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+        expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+        updateButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
+    });
+
+    it('handles clear operation', () => {
+        component MapTest() {
+            let map = new RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+
+            <button onClick={() => map.clear()}>{'clear'}</button>
+            <pre>{map.$size}</pre>
+        }
+
+        render(MapTest);
+
+        const clearButton = container.querySelector('button');
+
+        clearButton.click();
+        flushSync();
+
+        expect(container.querySelector('pre').textContent).toBe('0');
+    });
+
+    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');
+
+            <button onClick={() => map.delete('b')}>{'delete'}</button>
+            <pre>{$has}</pre>
+        }
+
+        render(MapTest);
+
+        const deleteButton = container.querySelector('button');
+        expect(container.querySelector('pre').textContent).toBe('true');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelector('pre').textContent).toBe('false');
+    });
+
+    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());
+
+            <button onClick={() => map.delete('x')}>{'delete'}</button>
+
+            <pre>{JSON.stringify($keys)}</pre>
+            <pre>{JSON.stringify($values)}</pre>
+            <pre>{JSON.stringify($entries)}</pre>
+        }
+
+        render(MapTest);
+
+        const deleteButton = container.querySelector('button');
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('[10,20]');
+        expect(container.querySelectorAll('pre')[2].textContent).toBe('[["x",10],["y",20]]');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('[20]');
+        expect(container.querySelectorAll('pre')[2].textContent).toBe('[["y",20]]');
+    });
+
+    it('toJSON returns correct object', () => {
+        component MapTest() {
+            let map = new RippleMap([['foo', 1], ['bar', 2]]);
+
+            <pre>{JSON.stringify(map)}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
+    });
+});

package/tests/set.test.ripple

@@ -82,7 +82,7 @@ describe('RippleSet', () => {
       let $hasValue = items.has(2);
 
       <button onClick={() => items.delete(2)}>{'delete'}</button>
-      <pre>{JSON.stringify($hasValue)}</pre>
+      <pre>{$hasValue}</pre>
     }
 
     render(SetTest);

package/types/index.d.ts

@@ -50,3 +50,8 @@ export class RippleSet<T> extends Set<T> {
   union(other: RippleSet<T> | Set<T>): RippleSet<T>;
   toJSON(): T[];
 }
+
+export class RippleMap<K, V> extends Map<K, V> {
+    get $size(): number;
+    toJSON(): [K, V][];
+}