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

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

@@ -90,6 +90,41 @@ function RipplePlugin(config) {
 
 			jsx_parseAttribute() {
 				let node = this.startNode();
+				const lookahead = this.lookahead();
+
+				if (lookahead.type?.label === ':') {
+					let id = this.startNode();
+					id.name = this.value;
+					node.name = id;
+					this.next();
+					this.finishNode(id, 'Identifier');
+
+					if (this.lookahead().value !== '=') {
+						this.unexpected();
+					}
+					this.next();
+					if (this.lookahead().type !== tt.braceL) {
+						this.unexpected();
+					}
+					this.next();
+					const value = this.jsx_parseAttributeValue();
+					const expression = value.expression;
+					node.get = null;
+					node.set = null;
+
+					if (expression.type == 'SequenceExpression') {
+						node.get = expression.expressions[0];
+						node.set = expression.expressions[1];
+						if (expression.expressions.length > 2) {
+							this.unexpected();
+						}
+					} else {
+						node.get = expression;
+					}
+
+					return this.finishNode(node, 'AccessorAttribute');
+				}
+
 				if (this.eat(tt.braceL)) {
 					if (this.type.label === '@') {
 						this.next();
@@ -389,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 =
@@ -321,12 +328,7 @@ const visitors = {
 							binding.transform = {
 								read: (_) => b.call('$.get_computed', path.node),
 								assign: (node, value) => {
-									return b.call(
-										'$.set',
-										path.node,
-										value,
-										b.id('__block'),
-									);
+									return b.call('$.set', path.node, value, b.id('__block'));
 								},
 								update: (_) =>
 									b.call(
@@ -451,6 +453,12 @@ const visitors = {
 							}
 						}
 					}
+				} else if (attr.type === 'AccessorAttribute') {
+					error(
+						'Accessor props are not supported on DOM elements',
+						state.analysis.module.filename,
+						attr,
+					);
 				}
 			}
 		} else {
@@ -459,6 +467,15 @@ const visitors = {
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 					}
+				} else if (attr.type === 'AccessorAttribute') {
+					if (!attr.name.name.startsWith('$')) {
+						error(
+							'Accessor props must always be $ prefixed as they are reactive',
+							state.analysis.module.filename,
+							attr,
+						);
+					}
+					attribute_names.add(attr.name);
 				}
 			}
 
@@ -472,7 +489,7 @@ const visitors = {
 						if (implicit_children) {
 							error(
 								'Cannot have both implicit and explicit children',
-								context.state.analysis.module.filename,
+								state.analysis.module.filename,
 								node,
 							);
 						}
@@ -482,7 +499,7 @@ const visitors = {
 					if (explicit_children) {
 						error(
 							'Cannot have both implicit and explicit children',
-							context.state.analysis.module.filename,
+							state.analysis.module.filename,
 							node,
 						);
 					}

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 {
@@ -617,6 +633,52 @@ const visitors = {
 					);
 				} else if (attr.type === 'UseAttribute') {
 					props.push(b.prop('init', b.call('$.use_prop'), visit(attr.argument, state), true));
+				} else if (attr.type === 'AccessorAttribute') {
+					// # means it's an accessor to the runtime
+					tracked.push(b.literal('#' + attr.name.name));
+					let get_expr;
+
+					if (
+						attr.get.type === 'FunctionExpression' ||
+						attr.get.type === 'ArrowFunctionExpression'
+					) {
+						get_expr = context.state.scope.generate(attr.name.name + '_get');
+
+						state.init.push(b.const(get_expr, visit(attr.get, state)));
+					} else {
+						get_expr = visit(attr.get, state);
+					}
+
+					props.push(
+						b.prop('get', attr.name, b.function(null, [], b.block([b.return(b.call(get_expr))]))),
+					);
+
+					if (attr.set) {
+						let set_expr;
+
+						if (
+							attr.set.type === 'FunctionExpression' ||
+							attr.set.type === 'ArrowFunctionExpression'
+						) {
+							set_expr = context.state.scope.generate(attr.name.name + '_set');
+
+							state.init.push(b.const(set_expr, visit(attr.set, state)));
+						} else {
+							set_expr = visit(attr.set, state);
+						}
+
+						props.push(
+							b.prop(
+								'set',
+								attr.name,
+								b.function(
+									null,
+									[b.id('__value')],
+									b.block([b.return(b.call(set_expr, b.id('__value')))]),
+								),
+							),
+						);
+					}
 				} else {
 					throw new Error('TODO');
 				}
@@ -802,7 +864,8 @@ const visitors = {
 		if (
 			left.type === 'MemberExpression' &&
 			left.property.type === 'Identifier' &&
-			is_tracked_name(left.property.name)
+			is_tracked_name(left.property.name) &&
+			left.property.name !== '$length'
 		) {
 			return b.call(
 				'$.set_property',
@@ -1211,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;
 			})
@@ -1368,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/array.js

@@ -1,3 +1,5 @@
+/** @import { Block } from '#client' */
+
 import { TRACKED_OBJECT } from './internal/client/constants.js';
 import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
 
@@ -35,6 +37,16 @@ const introspect_methods = [
 
 let init = false;
 
+/**
+ * @param {Block | null} block
+ * @throws {Error}
+ */
+function check_block(block) {
+	if (block === null) {
+		throw new Error('Cannot set $length outside of a reactive context');
+	}
+}
+
 export class RippleArray extends Array {
 	#tracked_elements = [];
 	#tracked_index;
@@ -51,6 +63,7 @@ export class RippleArray extends Array {
 		super(...elements);
 
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		for (var i = 0; i < this.length; i++) {
@@ -79,6 +92,7 @@ export class RippleArray extends Array {
 
 	fill() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.fill();
@@ -89,6 +103,7 @@ export class RippleArray extends Array {
 
 	reverse() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.reverse();
@@ -99,6 +114,7 @@ export class RippleArray extends Array {
 
 	sort(fn) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.sort(fn);
@@ -107,8 +123,13 @@ export class RippleArray extends Array {
 		}
 	}
 
+	/**
+	 * @param {...any} elements
+	 * @returns {number}
+	 */
 	unshift(...elements) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.unshift(...elements);
@@ -117,11 +138,14 @@ export class RippleArray extends Array {
 		}
 		tracked_elements.unshift(...elements.map(() => tracked(0, block)));
 
-		set(this.#tracked_index, this.length, block);
+		var length = this.length;
+		set(this.#tracked_index, length, block);
+		return length;
 	}
 
 	shift() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.shift();
@@ -133,8 +157,13 @@ export class RippleArray extends Array {
 		set(this.#tracked_index, this.length, block);
 	}
 
+	/**
+	 * @param {...any} elements
+	 * @returns {number}
+	 */
 	push(...elements) {
 		var block = scope();
+		check_block(block);
 		var start_index = this.length;
 		var tracked_elements = this.#tracked_elements;
 
@@ -143,11 +172,14 @@ export class RippleArray extends Array {
 		for (var i = 0; i < elements.length; i++) {
 			tracked_elements[start_index + i] = tracked(0, block);
 		}
+		var length = this.length;
 		set(this.#tracked_index, this.length, block);
+		return length;
 	}
 
 	pop() {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.pop();
@@ -159,8 +191,15 @@ export class RippleArray extends Array {
 		set(this.#tracked_index, this.length, block);
 	}
 
+	/**
+	 * @param {number} start
+	 * @param {number} [delete_count]
+	 * @param {...any} elements
+	 * @returns {any[]}
+	 */
 	splice(start, delete_count, ...elements) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		super.splice(start, delete_count, ...elements);
@@ -182,6 +221,7 @@ export class RippleArray extends Array {
 
 	set $length(length) {
 		var block = scope();
+		check_block(block);
 		var tracked_elements = this.#tracked_elements;
 
 		if (length !== this.$length) {
@@ -189,13 +229,12 @@ export class RippleArray extends Array {
 				increment(tracked_elements[i], block);
 			}
 			this.length = length;
+			set(this.#tracked_index, length, block);
 			tracked_elements.length = length;
-
-			return true;
 		}
-		return false;
 	}
 
+	/** @param {number} _ */
 	set length(_) {
 		throw new Error('Cannot set length on RippleArray, use $length instead');
 	}
@@ -206,6 +245,10 @@ export class RippleArray extends Array {
 	}
 }
 
+/**
+ * @param {RippleArray} array
+ * @returns {any[]}
+ */
 export function get_all_elements(array) {
 	var tracked_elements = array[TRACKED_OBJECT];
 	var arr = [];

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/internal/client/blocks.js

@@ -18,6 +18,7 @@ import {
 	active_block,
 	active_component,
 	active_reaction,
+	is_block_dirty,
 	run_block,
 	run_teardown,
 	schedule_update,
@@ -93,21 +94,28 @@ export function async(fn) {
 	});
 }
 
+/**
+ * @param {Element} element
+ * @param {() => (element: Element) => (void | (() => void))} get_fn
+ * @returns {Block}
+ */
 export function use(element, get_fn) {
-	var use_obj = undefined;
+	/** @type {(element: Element) => (void | (() => void) | undefined)} */
+	var use_fn;
+	/** @type {Block | null} */
 	var e;
 
 	return block(RENDER_BLOCK, () => {
-		if (use_obj !== (use_obj = get_fn())) {
+		if (use_fn !== (use_fn = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (use_obj) {
+			if (use_fn) {
 				e = branch(() => {
 					effect(() => {
-						return use_obj(element);
+						return use_fn(element);
 					});
 				});
 			}
@@ -115,14 +123,27 @@ export function use(element, get_fn) {
 	});
 }
 
+/**
+ * @param {() => void} fn
+ * @returns {Block}
+ */
 export function root(fn) {
 	return block(ROOT_BLOCK, fn);
 }
 
+/**
+ * @param {() => void} fn
+ * @param {any} state
+ * @returns {Block}
+ */
 export function create_try_block(fn, state) {
 	return block(TRY_BLOCK, fn, state);
 }
 
+/**
+ * @param {Block} block
+ * @param {Block} parent_block
+ */
 function push_block(block, parent_block) {
 	var parent_last = parent_block.last;
 	if (parent_last === null) {
@@ -174,6 +195,10 @@ export function block(flags, fn, state = null) {
 	return block;
 }
 
+/**
+ * @param {Block} parent
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_block_children(parent, remove_dom = false) {
 	var block = parent.first;
 	parent.first = parent.last = null;
@@ -187,6 +212,10 @@ export function destroy_block_children(parent, remove_dom = false) {
 	}
 }
 
+/**
+ * @param {Block} parent
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_non_branch_children(parent, remove_dom = false) {
 	var block = parent.first;
 
@@ -207,6 +236,9 @@ export function destroy_non_branch_children(parent, remove_dom = false) {
 	}
 }
 
+/**
+ * @param {Block} block
+ */
 export function unlink_block(block) {
 	var parent = block.p;
 	var prev = block.prev;
@@ -221,6 +253,9 @@ export function unlink_block(block) {
 	}
 }
 
+/**
+ * @param {Block} block
+ */
 export function pause_block(block) {
 	if ((block.f & PAUSED) !== 0) {
 		return;
@@ -238,6 +273,9 @@ export function pause_block(block) {
 	run_teardown(block);
 }
 
+/**
+ * @param {Block} block
+ */
 export function resume_block(block) {
 	if ((block.f & PAUSED) === 0) {
 		return;
@@ -257,7 +295,12 @@ export function resume_block(block) {
 	}
 }
 
+/**
+ * @param {Block} target_block
+ * @returns {boolean}
+ */
 export function is_destroyed(target_block) {
+	/** @type {Block | null} */
 	var block = target_block;
 
 	while (block !== null) {
@@ -274,6 +317,10 @@ export function is_destroyed(target_block) {
 	return true;
 }
 
+/**
+ * @param {Block} block
+ * @param {boolean} [remove_dom]
+ */
 export function destroy_block(block, remove_dom = true) {
 	block.f ^= DESTROYED;
 

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

@@ -28,7 +28,7 @@ import {
 	USE_PROP,
 } from './constants';
 import { capture, suspend } from './try.js';
-import { define_property, is_array } from './utils';
+import { define_property, get_descriptor, is_array } from './utils';
 import {
 	object_keys as original_object_keys,
 	object_values as original_object_values,
@@ -192,6 +192,7 @@ function run_computed(computed) {
  * @param {Block} block
  */
 export function handle_error(error, block) {
+	/** @type {Block | null} */
 	var current = block;
 
 	while (current !== null) {
@@ -230,6 +231,7 @@ export function run_block(block) {
 
 		if (typeof res === 'function') {
 			block.t = res;
+			/** @type {Block | null} */
 			let current = block;
 
 			while (current !== null && (current.f & CONTAINS_TEARDOWN) === 0) {
@@ -332,7 +334,7 @@ function is_tracking_dirty(tracking) {
 /**
  * @param {Block} block
  */
-function is_block_dirty(block) {
+export function is_block_dirty(block) {
 	var flags = block.f;
 
 	if ((flags & (ROOT_BLOCK | BRANCH_BLOCK)) !== 0) {
@@ -407,6 +409,7 @@ export function deferred(fn) {
 	var parent = active_block;
 	var block = active_scope;
 	var res = [UNINITIALIZED];
+	// TODO implement DEFERRED flag on tracked
 	var t = tracked(UNINITIALIZED, block, DEFERRED);
 	var tracked_properties = [t];
 	var prev_value = UNINITIALIZED;
@@ -535,7 +538,7 @@ function flush_updates(root_block) {
 			}
 		}
 
-		/** @type {Block} */
+		/** @type {Block | null} */
 		var parent = current.p;
 		current = current.next;
 
@@ -626,7 +629,7 @@ export function schedule_update(block) {
 		if ((flags & ROOT_BLOCK) !== 0) {
 			break;
 		}
-		current = current.p;
+		current = /** @type {Block} */ (current.p);
 	}
 
 	queued_root_blocks.push(current);
@@ -773,6 +776,11 @@ export function flush_sync(fn) {
 	}
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {T & { [SPREAD_OBJECT]: () => T }}
+ */
 export function tracked_spread_object(fn) {
 	var obj = fn();
 
@@ -784,7 +792,14 @@ export function tracked_spread_object(fn) {
 	return obj;
 }
 
+/**
+ * @param {any} obj
+ * @param {string[]} properties
+ * @param {Block} block
+ * @returns {object}
+ */
 export function tracked_object(obj, properties, block) {
+	/** @type {Record<string, Tracked | Computed>} */
 	var tracked_properties = obj[TRACKED_OBJECT];
 
 	if (tracked_properties === undefined) {
@@ -797,27 +812,42 @@ export function tracked_object(obj, properties, block) {
 
 	for (var i = 0; i < properties.length; i++) {
 		var property = properties[i];
-		var initial = obj[property];
+		/** @type {Tracked | Computed} */
 		var tracked_property;
 
-		if (typeof initial === 'function' && initial[COMPUTED_PROPERTY] === true) {
-			tracked_property = computed(initial, block);
-			initial = run_computed(tracked_property);
+		// accessor passed in, to avoid an expensive get_descriptor call
+		// in the fast path
+		if (property[0] === '#') {
+			property = property.slice(1);
+			var descriptor = /** @type {PropertyDescriptor} */ (get_descriptor(obj, property));
+			var desc_get = descriptor.get;
+			tracked_property = computed(desc_get, block);
+			/** @type {any} */
+			var initial = run_computed(/** @type {Computed} */ (tracked_property));
 			obj[property] = initial;
-			// TODO If nothing is tracked in the computed function, we can make it a standard tracked
-			// however this is more allocations, so we probably want to minimize this
-			// if (tracked_property.d === null) {
-			// 	tracked_property = tracked(initial, block);
-			// }
 		} else {
-			tracked_property = tracked(initial, block);
+			var initial = obj[property];
+
+			if (typeof initial === 'function' && initial[COMPUTED_PROPERTY] === true) {
+				tracked_property = computed(initial, block);
+				initial = run_computed(/** @type {Computed} */ (tracked_property));
+				obj[property] = initial;
+			} else {
+				tracked_property = tracked(initial, block);
+			}
 		}
+
 		tracked_properties[property] = tracked_property;
 	}
 
 	return obj;
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @returns {() => T}
+ */
 export function computed_property(fn) {
 	define_property(fn, COMPUTED_PROPERTY, {
 		value: true,
@@ -1002,6 +1032,12 @@ export function spread_object(obj) {
 	return values;
 }
 
+/**
+ * @template T
+ * @param {Block} block
+ * @param {() => T} fn
+ * @returns {T}
+ */
 export function with_scope(block, fn) {
 	var previous_scope = active_scope;
 	try {
@@ -1054,6 +1090,12 @@ export function use_prop() {
 	return Symbol(USE_PROP);
 }
 
+/**
+ * @template T
+ * @param {T | undefined} value
+ * @param {T} fallback
+ * @returns {T}
+ */
 export function fallback(value, fallback) {
 	return value === undefined ? fallback : value;
-}
+}

package/src/runtime/internal/client/types.d.ts

@@ -5,7 +5,7 @@ export type Component = {
 	e: null | Array<{
 		b: Block;
 		fn: Function;
-		r: null | Block;
+		r: null | Block | Computed;
 	}>;
 	p: null | Component;
 	m: boolean;
@@ -40,10 +40,11 @@ export type Block = {
 	first: null | Block;
 	f: number;
 	fn: any;
-	last: null;
-	next: null;
+	last: null | Block;
+	next: null | Block;
 	p: null | Block;
-	prev: null;
+	prev: null | Block;
 	s: any;
-	t: Tracked | null;
+	// teardown function
+	t: (() => {}) | null;
 };

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][];
+}