ripple 0.2.16 → 0.2.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/3-transform/index.js

@@ -115,7 +115,13 @@ const visitors = {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
 		}
-		return context.next();
+
+		return {
+			...node,
+			specifiers: node.specifiers
+				.filter((spec) => spec.importKind !== 'type')
+				.map((spec) => context.visit(spec.local)),
+		};
 	},
 
 	CallExpression(node, context) {

package/src/runtime/index.js

@@ -40,6 +40,8 @@ export { flush_sync as flushSync, untrack, deferred } from './internal/client/ru
 
 export { RippleArray } from './array.js';
 
+export { RippleSet } from './set.js';
+
 export { keyed } from './internal/client/for.js';
 
 export { user_effect as effect } from './internal/client/blocks.js';

package/src/runtime/set.js

@@ -0,0 +1,179 @@
+import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+
+const introspect_methods = [
+	'entries',
+	'forEach',
+	'keys',
+	'values',
+	Symbol.iterator
+];
+
+const compare_other_methods = [
+	'isDisjointFrom',
+	'isSubsetOf',
+	'isSupersetOf',
+];
+
+const new_other_methods = [
+	'difference',
+	'intersection',
+	'symmetricDifference',
+	'union',
+];
+
+let init = false;
+
+export class RippleSet extends Set {
+	#tracked_size;
+	#tracked_items = new Map();
+
+	constructor(iterable) {
+		super();
+
+		var block = scope();
+
+		if (iterable) {
+			for (var item of iterable) {
+				super.add(item);
+				this.#tracked_items.set(item, tracked(0, block));
+			}
+		}
+
+		this.#tracked_size = tracked(this.size, block);
+
+		if (!init) {
+			init = true;
+			this.#init();
+		}
+	}
+
+	#init() {
+		var proto = RippleSet.prototype;
+		var set_proto = Set.prototype;
+
+		for (const method of introspect_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (...v) {
+				this.$size;
+
+				return set_proto[method].apply(this, v);
+			};
+		}
+
+		for (const method of compare_other_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (other, ...v) {
+				this.$size;
+
+				if (other instanceof RippleSet) {
+					other.$size;
+				}
+
+				return set_proto[method].apply(this, [other, ...v]);
+			};
+		}
+
+		for (const method of new_other_methods) {
+			if (!(method in set_proto)) {
+				continue;
+			}
+
+			proto[method] = function (other, ...v) {
+				this.$size;
+
+				if (other instanceof RippleSet) {
+					other.$size;
+				}
+
+				return new RippleSet(
+					set_proto[method].apply(this, [other, ...v])
+				);
+			};
+		}
+	}
+
+	add(value) {
+		var block = scope();
+
+		if (!super.has(value)) {
+			super.add(value);
+			this.#tracked_items.set(value, tracked(0, block));
+			set(this.#tracked_size, this.size, block);
+		}
+
+		return this;
+	}
+
+	delete(value) {
+		var block = scope();
+
+		if (super.has(value)) {
+			super.delete(value);
+			var t = this.#tracked_items.get(value);
+
+			if (t) {
+				increment(t, block);
+			}
+
+			this.#tracked_items.delete(value);
+			set(this.#tracked_size, this.size, block);
+
+			return true;
+		}
+
+		return false;
+	}
+
+	has(value) {
+		var block = scope();
+		var has = super.has(value);
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(value);
+
+		if (t === undefined) {
+			if (!has) {
+				// If the value doesn't exist, track the size in case it's added later
+				// but don't create tracked entries willy-nilly to track all possible values
+				this.$size;
+
+				return false;
+			}
+
+			t = tracked(0, block);
+			tracked_items.set(value, t);
+		}
+
+		get(t);
+		return has;
+	}
+
+	clear() {
+		var block = scope();
+
+		if (this.size > 0) {
+			for (var [value, t] of this.#tracked_items) {
+				increment(t, block);
+			}
+
+			super.clear();
+			this.#tracked_items.clear();
+			set(this.#tracked_size, 0, block);
+		}
+	}
+
+	get $size() {
+		return get(this.#tracked_size);
+	}
+
+	toJSON() {
+		this.$size;
+
+		return [...this];
+	}
+}

package/tests/set.test.ripple

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, RippleSet } from 'ripple';
+
+describe('RippleSet', () => {
+  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 add and delete operations', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+
+      <button onClick={() => items.add(4)}>{'add'}</button>
+      <button onClick={() => items.delete(2)}>{'delete'}</button>
+      <Child items={items} />
+    }
+
+    component Child({ items }) {
+      <pre>{JSON.stringify(items)}</pre>
+      <pre>{items.$size}</pre>
+    }
+
+    render(SetTest);
+
+    const addButton = container.querySelectorAll('button')[0];
+    const deleteButton = container.querySelectorAll('button')[1];
+
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,3,4]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+  });
+
+  it('handles clear operation', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+
+      <button onClick={() => items.clear()}>{'clear'}</button>
+      <Child items={items} />
+    }
+
+    component Child({ items }) {
+      <pre>{JSON.stringify(items)}</pre>
+      <pre>{items.$size}</pre>
+    }
+
+    render(SetTest);
+
+    const clearButton = container.querySelector('button');
+
+    clearButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+  });
+
+  it('handles has operation', () => {
+    component SetTest() {
+      let items = new RippleSet([1, 2, 3]);
+      let $hasValue = items.has(2);
+
+      <button onClick={() => items.delete(2)}>{'delete'}</button>
+      <pre>{JSON.stringify($hasValue)}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+
+    const deleteButton = container.querySelectorAll('button')[0];
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
+  });
+});

package/types/index.d.ts

@@ -38,3 +38,15 @@ export type Context<T> = {
 };
 
 export declare function createContext<T>(initialValue: T): Context<T>;
+
+export class RippleSet<T> extends Set<T> {
+  readonly $size: number;
+  isDisjointFrom(other: RippleSet<T> | Set<T>): boolean;
+  isSubsetOf(other: RippleSet<T> | Set<T>): boolean;
+  isSupersetOf(other: RippleSet<T> | Set<T>): boolean;
+  difference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  intersection(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  symmetricDifference(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  union(other: RippleSet<T> | Set<T>): RippleSet<T>;
+  toJSON(): T[];
+}