ripple 0.2.29 → 0.2.31

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

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

@@ -6,6 +6,7 @@ import {
 	is_event_attribute,
 	is_inside_component,
 	is_ripple_import,
+	is_tracked_computed_property,
 	is_tracked_name,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -101,15 +102,21 @@ const visitors = {
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
-		if (
-			context.state.metadata?.tracking === false &&
-			node.property.type === 'Identifier' &&
-			!node.computed &&
-			is_tracked_name(node.property.name) &&
-			parent.type !== 'AssignmentExpression'
-		) {
-			context.state.metadata.tracking = true;
+		if (context.state.metadata?.tracking === false && parent.type !== 'AssignmentExpression') {
+			if (
+				node.property.type === 'Identifier' &&
+				!node.computed &&
+				is_tracked_name(node.property.name)
+			) {
+				context.state.metadata.tracking = true;
+			} else if (
+				node.computed &&
+				is_tracked_computed_property(node.object, node.property, context)
+			) {
+				context.state.metadata.tracking = true;
+			}
 		}
+
 		context.next();
 	},
 
@@ -212,7 +219,7 @@ const visitors = {
 										if (!computed) {
 											return node;
 										}
-										return b.call('$.set_property', node, visit(computed), value, b.id('__block'));
+										return b.call('$.set_property', node, computed, value, b.id('__block'));
 									},
 								};
 								break;

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

@@ -19,6 +19,8 @@ import {
 	is_ripple_import,
 	is_declared_within_component,
 	is_inside_call_expression,
+	is_tracked_computed_property,
+	is_value_static,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
@@ -169,6 +171,10 @@ const visitors = {
 			return context.next();
 		}
 
+		if (is_value_static(node)) {
+			return context.next();
+		}
+
 		return b.call(
 			'$.with_scope',
 			b.id('__block'),
@@ -192,7 +198,10 @@ const visitors = {
 					: property.type === 'Literal' && is_tracked_name(property.value);
 
 			// TODO should we enforce that the identifier is tracked too?
-			if ((node.computed && property.type === 'Identifier') || tracked_name) {
+			if (
+				(node.computed && is_tracked_computed_property(node.object, node.property, context)) ||
+				tracked_name
+			) {
 				if (context.state.metadata?.tracking === false) {
 					context.state.metadata.tracking = true;
 				}
@@ -861,19 +870,20 @@ const visitors = {
 
 		const left = node.left;
 
-		if (
-			left.type === 'MemberExpression' &&
-			left.property.type === 'Identifier' &&
-			is_tracked_name(left.property.name) &&
-			left.property.name !== '$length'
-		) {
-			return b.call(
-				'$.set_property',
-				context.visit(left.object),
-				left.computed ? context.visit(left.property) : b.literal(left.property.name),
-				visit_assignment_expression(node, context, build_assignment) ?? context.next(),
-				b.id('__block'),
-			);
+		if (left.type === 'MemberExpression') {
+			if (left.property.type === 'Identifier' && is_tracked_name(left.property.name)) {
+				if (left.property.name !== '$length') {
+					return b.call(
+						'$.set_property',
+						context.visit(left.object),
+						left.computed ? context.visit(left.property) : b.literal(left.property.name),
+						visit_assignment_expression(node, context, build_assignment) ?? context.next(),
+						b.id('__block'),
+					);
+				}
+			} else if (!is_tracked_computed_property(left.object, left.property, context)) {
+				return context.next();
+			}
 		}
 
 		const visited = visit_assignment_expression(node, context, build_assignment) ?? context.next();
@@ -900,7 +910,8 @@ const visitors = {
 		if (
 			argument.type === 'MemberExpression' &&
 			((argument.property.type === 'Identifier' && is_tracked_name(argument.property.name)) ||
-				argument.computed)
+				(argument.computed &&
+					is_tracked_computed_property(argument.object, argument.property, context)))
 		) {
 			return b.call(
 				node.prefix ? '$.update_pre_property' : '$.update_property',

package/src/compiler/utils.js

@@ -370,6 +370,47 @@ export function is_tracked_name(name) {
 	return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
 }
 
+export function is_value_static(node) {
+	if (node.type === 'Literal') {
+		return true;
+	}
+	if (node.type === 'ArrayExpression') {
+		return true;
+	}
+	if (node.type === 'NewExpression') {
+		if (node.callee.type === 'Identifier' && node.callee.name === 'Array') {
+			return true;
+		}
+		return false;
+	}
+
+	return false;
+}
+
+export function is_tracked_computed_property(object, property, context) {
+	const binding = context.state.scope.get(object.name);
+
+	if (binding) {
+		const initial = binding.initial;
+		if (initial && is_value_static(initial)) {
+			return false;
+		}
+	}
+	if (property.type === 'Identifier') {
+		return true;
+	}
+	if (
+		property.type === 'Literal' &&
+		typeof property.value === 'string' &&
+		is_tracked_name(property.value)
+	) {
+		return true;
+	}
+
+	// TODO: do we need to handle more logic here? default to false for now
+	return true;
+}
+
 export function is_ripple_import(callee, context) {
 	if (callee.type === 'Identifier') {
 		const binding = context.state.scope.get(callee.name);
@@ -507,7 +548,7 @@ export function build_assignment(operator, left, right, context) {
 		return transform.assign(
 			object,
 			value,
-			left.type === 'MemberExpression' && left.computed ? left.property : undefined,
+			left.type === 'MemberExpression' && left.computed ? context.visit(left.property) : undefined,
 		);
 	}
 

package/src/runtime/array.js

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { TRACKED_OBJECT } from './internal/client/constants.js';
-import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
 
 var symbol_iterator = Symbol.iterator;
 
@@ -36,17 +36,6 @@ 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;
@@ -62,12 +51,11 @@ export class RippleArray extends Array {
 	constructor(...elements) {
 		super(...elements);
 
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		for (var i = 0; i < this.length; i++) {
-			tracked_elements[i] = tracked(0, block);
+			tracked_elements[i] = tracked(elements[i], block);
 		}
 		this.#tracked_index = tracked(this.length, block);
 
@@ -90,20 +78,18 @@ export class RippleArray extends Array {
 		}
 	}
 
-	fill() {
-		var block = scope();
-		check_block(block);
+	fill(val, start, end) {
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
-		super.fill();
+		super.fill(val, start, end);
 		for (var i = 0; i < this.length; i++) {
 			increment(tracked_elements[i], block);
 		}
 	}
 
 	reverse() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.reverse();
@@ -113,8 +99,7 @@ export class RippleArray extends Array {
 	}
 
 	sort(fn) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.sort(fn);
@@ -128,8 +113,7 @@ export class RippleArray extends Array {
 	 * @returns {number}
 	 */
 	unshift(...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.unshift(...elements);
@@ -144,15 +128,14 @@ export class RippleArray extends Array {
 	}
 
 	shift() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.shift();
-		for (var i = 0; i < tracked_elements.length; i++) {
-			increment(tracked_elements[i], block);
+		for (var i = 0; i < tracked_elements.length - 1; i++) {
+			set(tracked_elements[i], tracked_elements[i + 1].v, block);
 		}
-		tracked_elements.shift();
+		tracked_elements.pop();
 
 		set(this.#tracked_index, this.length, block);
 	}
@@ -162,8 +145,7 @@ export class RippleArray extends Array {
 	 * @returns {number}
 	 */
 	push(...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var start_index = this.length;
 		var tracked_elements = this.#tracked_elements;
 
@@ -178,8 +160,7 @@ export class RippleArray extends Array {
 	}
 
 	pop() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.pop();
@@ -198,8 +179,7 @@ export class RippleArray extends Array {
 	 * @returns {any[]}
 	 */
 	splice(start, delete_count, ...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.splice(start, delete_count, ...elements);
@@ -220,11 +200,10 @@ export class RippleArray extends Array {
 	}
 
 	set $length(length) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
-		if (length !== this.$length) {
+		if (length !== this.length) {
 			for (var i = 0; i < tracked_elements.length; i++) {
 				increment(tracked_elements[i], block);
 			}
@@ -260,4 +239,3 @@ export function get_all_elements(array) {
 
 	return arr;
 }
-

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

@@ -16,6 +16,7 @@ export { event, delegate } from './events.js';
 export {
 	active_block,
 	scope,
+	safe_scope,
 	with_scope,
 	get_tracked,
 	get_computed,

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

@@ -1,4 +1,5 @@
 /** @import { Block, Component, Dependency, Computed, Tracked } from '#client' */
+/** @import { RippleArray } from 'ripple' */
 
 import {
 	destroy_block,
@@ -777,9 +778,8 @@ export function flush_sync(fn) {
 }
 
 /**
- * @template T
- * @param {() => T} fn
- * @returns {T & { [SPREAD_OBJECT]: () => T }}
+ * @param {() => Object} fn
+ * @returns {Object}
  */
 export function tracked_spread_object(fn) {
 	var obj = fn();
@@ -815,8 +815,7 @@ export function tracked_object(obj, properties, block) {
 		/** @type {Tracked | Computed} */
 		var tracked_property;
 
-		// accessor passed in, to avoid an expensive get_descriptor call
-		// in the fast path
+		// 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));
@@ -824,7 +823,10 @@ export function tracked_object(obj, properties, block) {
 			tracked_property = computed(desc_get, block);
 			/** @type {any} */
 			var initial = run_computed(/** @type {Computed} */ (tracked_property));
-			obj[property] = initial;
+			// If there's a setter, we need to set the initial value
+			if (descriptor.set !== undefined) {
+				obj[property] = initial;
+			}
 		} else {
 			var initial = obj[property];
 
@@ -856,6 +858,12 @@ export function computed_property(fn) {
 	return fn;
 }
 
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {boolean} [chain=false]
+ * @returns {any}
+ */
 export function get_property(obj, property, chain = false) {
 	if (chain && obj == null) {
 		return undefined;
@@ -865,7 +873,10 @@ export function get_property(obj, property, chain = false) {
 	var tracked_property = tracked_properties?.[property];
 
 	if (tracked_property !== undefined) {
-		value = obj[property] = get(tracked_property);
+		value = get(tracked_property);
+		if (obj[property] !== value) {
+			obj[property] = value;
+		}
 	} else if (SPREAD_OBJECT in obj) {
 		var spread_fn = obj[SPREAD_OBJECT];
 		var properties = spread_fn();
@@ -875,6 +886,13 @@ export function get_property(obj, property, chain = false) {
 	return value;
 }
 
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {any} value
+ * @param {Block} block
+ * @returns {any}
+ */
 export function set_property(obj, property, value, block) {
 	var res = (obj[property] = value);
 	var tracked_properties = obj[TRACKED_OBJECT];
@@ -882,9 +900,9 @@ export function set_property(obj, property, value, block) {
 
 	if (tracked === undefined) {
 		// Handle computed assignments to arrays
-		if (obj.$length && tracked_properties !== undefined && is_array(obj)) {
+		if (is_array(obj) && obj.$length && tracked_properties !== undefined) {
 			with_scope(block, () => {
-				obj.splice(property, 1, value);
+				obj.splice(/** @type {number} */ (property), 1, value);
 			});
 		}
 		return res;
@@ -893,6 +911,12 @@ export function set_property(obj, property, value, block) {
 	set(tracked, value, block);
 }
 
+/**
+ * @param {Tracked} tracked
+ * @param {Block} block
+ * @param {number} [d]
+ * @returns {number}
+ */
 export function update(tracked, block, d = 1) {
 	var value = get(tracked);
 	var result = d === 1 ? value++ : value--;
@@ -902,66 +926,110 @@ export function update(tracked, block, d = 1) {
 	return result;
 }
 
+/**
+ * @param {Tracked} tracked
+ * @param {Block} block
+ * @returns {void}
+ */
 export function increment(tracked, block) {
 	set(tracked, tracked.v + 1, block);
 }
 
+/**
+ * @param {Tracked} tracked
+ * @param {Block} block
+ * @returns {void}
+ */
 export function decrement(tracked, block) {
 	set(tracked, tracked.v - 1, block);
 }
 
+/**
+ * @param {Tracked} tracked
+ * @param {Block} block
+ * @param {number} [d]
+ * @returns {number}
+ */
 export function update_pre(tracked, block, d = 1) {
 	var value = get(tracked);
+	var new_value = d === 1 ? ++value : --value;
 
-	return set(tracked, d === 1 ? ++value : --value, block);
+	set(tracked, new_value, block);
+
+	return new_value;
 }
 
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {Block} block
+ * @param {number} [d]
+ * @returns {number}
+ */
 export function update_property(obj, property, block, d = 1) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 	var tracked = tracked_properties?.[property];
-
-	if (tracked === undefined) {
-		return d === 1 ? obj[property]++ : obj[property]--;
-	}
-
-	var value = get(tracked);
-	var result = d === 1 ? value++ : value--;
+	var tracked_exists = tracked !== undefined;
+	var value = tracked_exists ? get(tracked) : obj[property];
 
 	if (d === 1) {
-		increment(tracked, block);
+		value++;
+		if (tracked_exists) {
+			increment(tracked, block);
+		}
 	} else {
-		decrement(tracked, block);
+		value--;
+		if (tracked_exists) {
+			decrement(tracked, block);
+		}
 	}
 
-	return result;
+	obj[property] = value
+
+	return value;
 }
 
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {Block} block
+ * @param {number} [d]
+ * @returns {number}
+ */
 export function update_pre_property(obj, property, block, d = 1) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 	var tracked = tracked_properties?.[property];
-
-	if (tracked === undefined) {
-		return d === 1 ? ++obj[property] : --obj[property];
-	}
-
-	var value = get(tracked);
-	var result = d === 1 ? ++value : --value;
+	var tracked_exists = tracked !== undefined;
+	var value = tracked_exists ? get(tracked) : obj[property];
 
 	if (d === 1) {
-		increment(tracked, block);
+		++value
+		if (tracked_exists) {
+			increment(tracked, block);
+		}
 	} else {
-		decrement(tracked, block);
+		--value
+		if (tracked_exists) {
+			decrement(tracked, block);
+		}
 	}
 
-	return result;
+	obj[property] = value;
+
+	return value;
 }
 
+/**
+ * @param {any} val
+ * @param {StructuredSerializeOptions} [options]
+ * @returns {any}
+ */
 export function structured_clone(val, options) {
 	if (typeof val === 'object' && val !== null) {
 		var tracked_properties = val[TRACKED_OBJECT];
 		if (tracked_properties !== undefined) {
 			if (is_array(val)) {
-				val.$length;
+				/** @type {RippleArray<any>} */ (val).$length;
 			}
 			return structured_clone(object_values(val), options);
 		}
@@ -1048,10 +1116,25 @@ export function with_scope(block, fn) {
 	}
 }
 
+/**
+ * @returns {Block | null}
+ */
 export function scope() {
 	return active_scope;
 }
 
+/**
+ * @param {string} [err]
+ * @returns {Block | never}
+ */
+export function safe_scope(err = 'Cannot access outside of a component context') {
+	if (active_scope === null) {
+		throw new Error(err);
+	}
+
+	return /** @type {Block} */ (active_scope);
+}
+
 export function push_component() {
 	var component = {
 		c: null,

package/src/runtime/map.js

@@ -1,4 +1,4 @@
-import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'values', Symbol.iterator];
 
@@ -11,7 +11,7 @@ export class RippleMap extends Map {
 	constructor(iterable) {
 		super();
 
-		var block = scope();
+		var block = safe_scope();
 
 		if (iterable) {
 			for (var [key, value] of iterable) {
@@ -75,7 +75,7 @@ export class RippleMap extends Map {
 	}
 
 	set(key, value) {
-		var block = scope();
+		var block = safe_scope();
 		var tracked_items = this.#tracked_items;
 		var t = tracked_items.get(key);
 		var prev_res = super.get(key);
@@ -93,7 +93,7 @@ export class RippleMap extends Map {
 	}
 
 	delete(key) {
-		var block = scope();
+		var block = safe_scope();
 		var tracked_items = this.#tracked_items;
 		var t = tracked_items.get(key);
 		var result = super.delete(key);
@@ -108,7 +108,7 @@ export class RippleMap extends Map {
 	}
 
 	clear() {
-		var block = scope();
+		var block = safe_scope();
 
 		if (super.size === 0) {
 			return;

package/src/runtime/set.js

@@ -1,4 +1,4 @@
-import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'keys', 'values', Symbol.iterator];
 
@@ -15,7 +15,7 @@ export class RippleSet extends Set {
 	constructor(iterable) {
 		super();
 
-		var block = scope();
+		var block = safe_scope();
 
 		if (iterable) {
 			for (var item of iterable) {
@@ -82,7 +82,7 @@ export class RippleSet extends Set {
 	}
 
 	add(value) {
-		var block = scope();
+		var block = safe_scope();
 
 		if (!super.has(value)) {
 			super.add(value);
@@ -94,7 +94,7 @@ export class RippleSet extends Set {
 	}
 
 	delete(value) {
-		var block = scope();
+		var block = safe_scope();
 
 		if (!super.delete(value)) {
 			return false;
@@ -110,7 +110,7 @@ export class RippleSet extends Set {
 	}
 
 	has(value) {
-		var block = scope();
+		var block = safe_scope();
 		var has = super.has(value);
 		var tracked_items = this.#tracked_items;
 		var t = tracked_items.get(value);
@@ -129,7 +129,7 @@ export class RippleSet extends Set {
 	}
 
 	clear() {
-		var block = scope();
+		var block = safe_scope();
 
 		if (super.size === 0) {
 			return;

package/tests/accessors-props.test.ripple

@@ -0,0 +1,150 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, effect } from 'ripple';
+
+describe('prop accessors', () => {
+	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('should render a basic prop accessor on a composite component', () => {
+    const logs = [];
+
+    component Child(props) {
+      effect(() => {
+        logs.push('App effect', props.$foo);
+      });
+
+      <button onClick={() => props.$foo++}>{"Increment foo"}</button>
+    }
+
+    component App(props) {
+      let $foo = 0;
+
+      <Child $foo:={() => {
+          return $foo;
+        }, v => {
+          $foo = v;
+        }} />
+
+      <div>{"parent foo: " + $foo}</div>
+
+      <button onClick={() => $foo++}>{"Increment parent foo"}</button>
+    }
+
+    render(App);
+    flushSync();
+
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
+    expect(logs).toEqual(['App effect', 0]);
+
+    const [button, button2] = container.querySelectorAll('button');
+
+    button.click();
+    flushSync();
+    
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 1');
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
+
+    button2.click();
+    flushSync();
+
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 2');
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 2]);
+  });
+
+  it('should render a basic prop accessor on a composite component #2', () => {
+    const logs = [];
+
+    component Child(props) {
+      effect(() => {
+        logs.push('App effect', props.$foo);
+      });
+
+      <button onClick={() => props.$foo++}>{"Increment foo"}</button>
+    }
+
+    component App(props) {
+      let $foo = 0;
+
+      <Child $foo:={() => {
+          return $foo;
+        }, v => {
+          // do not update parent
+        }} />
+
+      <div>{"parent foo: " + $foo}</div>
+
+      <button onClick={() => $foo++}>{"Increment parent foo"}</button>
+    }
+
+    render(App);
+    flushSync();
+
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
+    expect(logs).toEqual(['App effect', 0]);
+
+    const [button, button2] = container.querySelectorAll('button');
+
+    button.click();
+    flushSync();
+    
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 0');
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1]);
+
+    button2.click();
+    flushSync();
+
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 1');
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 1]);
+
+    button2.click();
+    flushSync();
+
+    expect(container.querySelectorAll('div')[0].textContent).toBe('parent foo: 2');
+    expect(logs).toEqual(['App effect', 0, 'App effect', 1, 'App effect', 1, 'App effect', 2]);
+  });
+
+
+  it('handles a simple getter prop accessor with no setter', () =>{
+    component Parent() {
+      let $value = 123;
+
+      <Child $value:={() => $value} />
+
+      <button onClick={() => $value++}>{"Increment value"}</button>
+    }
+
+    component Child({ $value }) {
+      <div>{$value}</div>
+    }
+
+    render(Parent);
+
+    expect(container.querySelector('div').textContent).toBe('123');
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('124');
+
+    button.click();
+    flushSync();
+
+    expect(container.querySelector('div').textContent).toBe('125');
+  });
+});

package/tests/basic.test.ripple

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

package/tests/boundaries.ripple

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
 import { mount, flushSync, effect } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {

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;
@@ -78,5 +77,80 @@ describe('compiler success tests', () => {
 		}
 
 		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/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

@@ -128,7 +128,14 @@ describe('RippleMap', () => {
     });
 
     it('toJSON returns correct object', () => {
-        let map = new RippleMap([['foo', 1], ['bar', 2]]);
-        expect(JSON.stringify(map)).toEqual('[["foo",1],["bar",2]]');
+        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]]');
     });
 });