ripple 0.2.28 → 0.2.29

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.28",
+  "version": "0.2.29",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/1-parse/index.js

@@ -424,12 +424,22 @@ function RipplePlugin(config) {
 						// This node is used for Prettier, we don't actually need
 						// the node for Ripple's transform process
 						element.children = [component.css];
+						// Ensure we escape JSX <tag></tag> context
+						const tokContexts = this.acornTypeScript.tokContexts;
+						const curContext = this.curContext();
+
+						if (curContext === tokContexts.tc_expr) {
+							this.context.pop();
+						}
+
 						return element;
 					} else {
+						this.enterScope(0);
 						this.parseTemplateBody(element.children);
+						this.exitScope();
 					}
+					// Ensure we escape JSX <tag></tag> context
 					const tokContexts = this.acornTypeScript.tokContexts;
-
 					const curContext = this.curContext();
 
 					if (curContext === tokContexts.tc_expr) {

package/src/compiler/phases/2-analyze/index.js

@@ -151,6 +151,13 @@ const visitors = {
 		const { state, visit, path } = context;
 
 		for (const declarator of node.declarations) {
+			if (is_inside_component(context) && node.kind === 'var') {
+				error(
+					'var declarations are not allowed in components, use let or const instead',
+					state.analysis.module.filename,
+					declarator,
+				);
+			}
 			const metadata = { tracking: false, await: false };
 			const parent = path.at(-1);
 			const init_is_untracked =

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

@@ -133,6 +133,7 @@ const visitors = {
 		}
 
 		if (
+			!is_inside_component(context, true) ||
 			context.state.to_ts ||
 			(parent?.type === 'MemberExpression' && parent.property === node) ||
 			is_inside_call_expression(context) ||
@@ -164,6 +165,10 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (!is_inside_component(context, true) || is_inside_call_expression(context)) {
+			return context.next();
+		}
+
 		return b.call(
 			'$.with_scope',
 			b.id('__block'),
@@ -572,7 +577,18 @@ const visitors = {
 				);
 			}
 
-			transform_children(node.children, { visit, state, root: false });
+			const init = [];
+			const update = [];
+
+			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
+
+			if (init.length > 0) {
+				state.init.push(b.block(init));
+			}
+
+			if (update.length > 0) {
+				state.init.push(b.stmt(b.call('$.render', b.thunk(b.block(update)))));
+			}
 
 			state.template.push(`</${node.id.name}>`);
 		} else {
@@ -1258,7 +1274,7 @@ function transform_ts_child(node, context) {
 			.filter((attr) => {
 				if (attr.type === 'UseAttribute') {
 					use_attributes.push(attr);
-					return false; // Filter out from JSX attributes
+					return false;
 				}
 				return true;
 			})
@@ -1415,7 +1431,12 @@ function transform_ts_child(node, context) {
 				),
 			),
 		);
+	} else if (node.type === 'Component') {
+		const component = visit(node, context.state);
+
+		state.init.push(component);
 	} else {
+		debugger;
 		throw new Error('TODO');
 	}
 }

package/src/compiler/utils.js

@@ -327,15 +327,16 @@ export function build_hoisted_params(node, context) {
 	return params;
 }
 
-export function is_inside_component(context) {
+export function is_inside_component(context, includes_functions = false) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
 		const type = context_node.type;
 
 		if (
-			type === 'FunctionExpression' ||
-			type === 'ArrowFunctionExpression' ||
-			type === 'FunctionDeclaration'
+			!includes_functions &&
+			(type === 'FunctionExpression' ||
+				type === 'ArrowFunctionExpression' ||
+				type === 'FunctionDeclaration')
 		) {
 			return false;
 		}

package/src/runtime/index.js

@@ -42,6 +42,8 @@ export { RippleArray } from './array.js';
 
 export { RippleSet } from './set.js';
 
+export { RippleMap } from './map.js';
+
 export { keyed } from './internal/client/for.js';
 
 export { user_effect as effect } from './internal/client/blocks.js';

package/src/runtime/map.js

@@ -0,0 +1,147 @@
+import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+
+const introspect_methods = ['entries', 'forEach', 'values', Symbol.iterator];
+
+let init = false;
+
+export class RippleMap extends Map {
+	#tracked_size;
+	#tracked_items = new Map();
+
+	constructor(iterable) {
+		super();
+
+		var block = scope();
+
+		if (iterable) {
+			for (var [key, value] of iterable) {
+				super.set(key, value);
+				this.#tracked_items.set(key, tracked(0, block));
+			}
+		}
+
+		this.#tracked_size = tracked(this.size, block);
+
+		if (!init) {
+			init = true;
+			this.#init();
+		}
+	}
+
+	#init() {
+		var proto = RippleMap.prototype;
+		var map_proto = Map.prototype;
+
+		for (const method of introspect_methods) {
+			proto[method] = function (...v) {
+				this.$size;
+				this.#read_all();
+
+				return map_proto[method].apply(this, v);
+			};
+		}
+	}
+
+	get(key) {
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(key);
+
+		if (t === undefined) {
+			// same logic as has
+			this.$size;
+		} else {
+			get(t);
+		}
+
+		return super.get(key);
+	}
+
+	has(key) {
+		var has = super.has(key);
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(key);
+
+		if (t === undefined) {
+			// if no tracked it also means super didn't have it
+			// It's not possible to have a disconnect, we tract each key
+			// If the key doesn't exist, track the size in case it's added later
+			// but don't create tracked entries willy-nilly to track all possible keys
+			this.$size;
+		} else {
+			get(t);
+		}
+
+		return has;
+	}
+
+	set(key, value) {
+		var block = scope();
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(key);
+		var prev_res = super.get(key);
+
+		super.set(key, value);
+
+		if (!t) {
+			tracked_items.set(key, tracked(0, block));
+			set(this.#tracked_size, this.size, block);
+		} else if (prev_res !== value) {
+			increment(t, block);
+		}
+
+		return this;
+	}
+
+	delete(key) {
+		var block = scope();
+		var tracked_items = this.#tracked_items;
+		var t = tracked_items.get(key);
+		var result = super.delete(key);
+
+		if (t) {
+			increment(t, block);
+			tracked_items.delete(key);
+			set(this.#tracked_size, this.size, block);
+		}
+
+		return result;
+	}
+
+	clear() {
+		var block = scope();
+
+		if (super.size === 0) {
+			return;
+		}
+
+		for (var [_, t] of this.#tracked_items) {
+			increment(t, block);
+		}
+
+		super.clear();
+		this.#tracked_items.clear();
+		set(this.#tracked_size, 0, block);
+	}
+
+	keys() {
+		this.$size;
+		return super.keys();
+	}
+
+	#read_all() {
+		for (const [, t] of this.#tracked_items) {
+			get(t);
+		}
+	}
+
+	get $size() {
+		return get(this.#tracked_size);
+	}
+
+	toJSON() {
+		this.$size;
+		this.#read_all();
+
+		return [...this];
+	}
+}

package/src/runtime/set.js

@@ -1,25 +1,10 @@
 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',
-];
+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;
 
@@ -91,9 +76,7 @@ export class RippleSet extends Set {
 					other.$size;
 				}
 
-				return new RippleSet(
-					set_proto[method].apply(this, [other, ...v])
-				);
+				return new RippleSet(set_proto[method].apply(this, [other, ...v]));
 			};
 		}
 	}
@@ -113,21 +96,17 @@ export class RippleSet extends Set {
 	delete(value) {
 		var block = scope();
 
-		if (super.has(value)) {
-			super.delete(value);
-			var t = this.#tracked_items.get(value);
-
-			if (t) {
-				increment(t, block);
-			}
+		if (!super.delete(value)) {
+			return false;
+		}
 
-			this.#tracked_items.delete(value);
-			set(this.#tracked_size, this.size, block);
+		var t = this.#tracked_items.get(value);
 
-			return true;
-		}
+		increment(t, block);
+		this.#tracked_items.delete(value);
+		set(this.#tracked_size, this.size, block);
 
-		return false;
+		return true;
 	}
 
 	has(value) {
@@ -137,34 +116,32 @@ export class RippleSet extends Set {
 		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);
+			// if no tracked it also means super didn't have it
+			// It's not possible to have a disconnect, we track each value
+			// 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;
+		} else {
+			get(t);
 		}
 
-		get(t);
 		return has;
 	}
 
 	clear() {
 		var block = scope();
 
-		if (this.size > 0) {
-			for (var [value, t] of this.#tracked_items) {
-				increment(t, block);
-			}
+		if (super.size === 0) {
+			return;
+		}
 
-			super.clear();
-			this.#tracked_items.clear();
-			set(this.#tracked_size, 0, block);
+		for (var [_, t] of this.#tracked_items) {
+			increment(t, block);
 		}
+
+		super.clear();
+		this.#tracked_items.clear();
+		set(this.#tracked_size, 0, block);
 	}
 
 	get $size() {

package/tests/boundaries.ripple

@@ -0,0 +1,109 @@
+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

@@ -58,4 +58,25 @@ 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);
+	})
 });

package/tests/map.test.ripple

@@ -0,0 +1,134 @@
+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', () => {
+        let map = new RippleMap([['foo', 1], ['bar', 2]]);
+        expect(JSON.stringify(map)).toEqual('[["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][];
+}