ripple 0.2.8 → 0.2.10

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.8",
+  "version": "0.2.10",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
@@ -15,6 +15,7 @@
   "bugs": {
     "url": "https://github.com/trueadm/ripple/issues"
   },
+  "homepage": "https://ripplejs.com",
   "keywords": [
     "ripple",
     "UI",
@@ -53,7 +54,7 @@
     "acorn-typescript": "^1.4.13",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
-    "magic-string": "^0.30.17",
+    "magic-string": "^0.30.18",
     "muggle-string": "^0.4.1",
     "zimmerframe": "^1.1.2"
   },

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

@@ -391,11 +391,11 @@ function RipplePlugin(config) {
 					} else {
 						this.parseTemplateBody(element.children);
 					}
-					const tok = this.acornTypeScript.tokContexts;
+					const tokContexts = this.acornTypeScript.tokContexts;
 
 					const curContext = this.curContext();
 
-					if (curContext === tok.tc_expr) {
+					if (curContext === tokContexts.tc_expr) {
 						this.context.pop();
 					}
 				}

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

@@ -163,39 +163,57 @@ const visitors = {
 			if (declarator.id.type === 'Identifier') {
 				const binding = state.scope.get(declarator.id.name);
 
-				if (
-					binding !== null &&
-					is_tracked_name(declarator.id.name) &&
-					parent?.type !== 'ForOfStatement'
-				) {
-					binding.kind = 'tracked';
+				if (binding !== null && parent?.type !== 'ForOfStatement') {
+					if (is_tracked_name(declarator.id.name)) {
+						binding.kind = 'tracked';
 
-					mark_as_tracked(path);
+						mark_as_tracked(path);
 
-					visit(declarator, { ...state, metadata });
+						visit(declarator, { ...state, metadata });
 
-					if (init_is_untracked && metadata.tracking) {
-						metadata.tracking = false;
+						if (init_is_untracked && metadata.tracking) {
+							metadata.tracking = false;
+						}
+
+						binding.transform = {
+							read: (node) => {
+								return metadata.tracking && !metadata.await
+									? b.call('$.get_computed', node)
+									: b.call('$.get_tracked', node);
+							},
+							assign: (node, value) => {
+								return b.call('$.set', node, value, b.id('__block'));
+							},
+							update: (node) => {
+								return b.call(
+									node.prefix ? '$.update_pre' : '$.update',
+									node.argument,
+									b.id('__block'),
+									node.operator === '--' && b.literal(-1),
+								);
+							},
+						};
+					} else if (binding.initial?.type !== 'Literal') {
+						for (const ref of binding.references) {
+							const path = ref.path;
+							const parent_node = path?.at(-1);
+
+							// We're reading a computed property, which might mean it's a reactive property
+							if (parent_node?.type === 'MemberExpression' && parent_node.computed) {
+								binding.transform = {
+									assign: (node, value, computed) => {
+										if (!computed) {
+											return node;
+										}
+										return b.call('$.set_property', node, visit(computed), value, b.id('__block'));
+									},
+								};
+								break;
+							}
+						}
 					}
 
-					binding.transform = {
-						read: (node) => {
-							return metadata.tracking && !metadata.await
-								? b.call('$.get_computed', node)
-								: b.call('$.get_tracked', node);
-						},
-						assign: (node, value) => {
-							return b.call('$.set', node, value, b.id('__block'));
-						},
-						update: (node) => {
-							return b.call(
-								node.prefix ? '$.update_pre' : '$.update',
-								node.argument,
-								b.id('__block'),
-								node.operator === '--' && b.literal(-1),
-							);
-						},
-					};
+					visit(declarator, state);
 				} else {
 					visit(declarator, state);
 				}

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

@@ -71,7 +71,7 @@ function build_getter(node, context) {
 		const binding = state.scope.get(node.name);
 
 		// don't transform the declaration itself
-		if (node !== binding?.node && binding?.transform) {
+		if (node !== binding?.node && binding?.transform?.read) {
 			return binding.transform.read(node, context.state?.metadata?.spread);
 		}
 	}
@@ -806,7 +806,7 @@ const visitors = {
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
 
-		if (left === argument ) {
+		if (left === argument) {
 			if (transformers?.update) {
 				return transformers.update(node);
 			} else if (binding.kind === 'prop') {
@@ -876,7 +876,7 @@ const visitors = {
 				const tracked_element = context.visit(element, { ...context.state, metadata });
 
 				if (metadata.tracking) {
-					tracked.push(b.spread(b.call('Object.keys', tracked_element.argument)));
+					tracked.push(b.spread(tracked_element.argument));
 					elements.push(tracked_element);
 				} else {
 					elements.push(tracked_element);

package/src/compiler/utils.js

@@ -364,13 +364,7 @@ export function is_inside_call_expression(context) {
 }
 
 export function is_tracked_name(name) {
-	return (
-		typeof name === 'string' &&
-		name.startsWith('$') &&
-		name.length > 1 &&
-		name[1] !== '$' &&
-		name !== '$length'
-	);
+	return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
 }
 
 export function is_svelte_import(callee, context) {
@@ -492,15 +486,20 @@ export function build_assignment(operator, left, right, context) {
 
 	const transform = binding.transform;
 
-	const path = context.path.map((node) => node.type);
-
 	// reassignment
-	if (object === left && transform?.assign) {
+	if (
+		(object === left || (left.type === 'MemberExpression' && left.computed && operator === '=')) &&
+		transform?.assign
+	) {
 		let value = /** @type {Expression} */ (
 			context.visit(build_assignment_value(operator, left, right))
 		);
 
-		return transform.assign(object, value);
+		return transform.assign(
+			object,
+			value,
+			left.type === 'MemberExpression' && left.computed ? left.property : undefined,
+		);
 	}
 
 	// mutation

package/src/runtime/index.js

@@ -38,4 +38,4 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
-export { ref } from './internal/client/runtime.js';
+export { ref } from './internal/client/runtime.js';

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

@@ -741,6 +741,12 @@ export function set_property(obj, property, value, block) {
 	var tracked = tracked_properties?.[property];
 
 	if (tracked === undefined) {
+		// Handle computed assignments to arrays
+		if (obj.$length && tracked_properties !== undefined && is_array(obj)) {
+			with_scope(block, () => {
+				obj.splice(property, 1, value);
+			});
+		}
 		return res;
 	}
 

package/src/utils/builders.js

@@ -655,7 +655,7 @@ export function try_builder(block, handler = null, finalizer = null) {
 		type: 'TryStatement',
 		block,
 		handler,
-		finalizer
+		finalizer,
 	};
 }
 
@@ -668,7 +668,7 @@ export function catch_clause_builder(param, body) {
 	return {
 		type: 'CatchClause',
 		param,
-		body
+		body,
 	};
 }
 

package/tests/array.test.ripple

@@ -0,0 +1,54 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync, array } from 'ripple';
+
+describe('array', () => {
+	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 direct assignment', () => {
+		component ArrayTest() {
+			let items = array(1, 2, 3);
+
+			<button onClick={() => items[items.$length] = items.$length + 1}>{'increment'}</button>
+
+			<Child items={items} />
+		}
+
+		component Child({ items }) {
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{items.$length}</pre>
+		}
+
+		render(ArrayTest);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+	});
+});

package/tests/basic.test.ripple

@@ -43,6 +43,7 @@ describe('basic', () => {
 	it('render semi-dynamic text', () => {
 		component Basic() {
 			let text = 'Hello World';
+
 			<div>{text}</div>
 		}
 
@@ -54,6 +55,7 @@ describe('basic', () => {
 	it('render dynamic text', () => {
 		component Basic() {
 			let $text = 'Hello World';
+
 			<button onClick={() => $text = 'Hello Ripple'}>{'Change Text'}</button>
 			<div>{$text}</div>
 		}
@@ -71,6 +73,7 @@ describe('basic', () => {
 	it('render dynamic class attribute', () => {
 		component Basic() {
 			let $active = false;
+
 			<button onClick={() => $active = !$active}>{'Toggle'}</button>
 			<div $class={$active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 		}
@@ -96,6 +99,7 @@ describe('basic', () => {
 	it('render dynamic id attribute', () => {
 		component Basic() {
 			let $count = 0;
+
 			<button onClick={() => $count++}>{'Increment'}</button>
 			<div $id={`item-${$count}`}>{'Dynamic ID'}</div>
 		}
@@ -121,6 +125,7 @@ describe('basic', () => {
 	it('render dynamic style attribute', () => {
 		component Basic() {
 			let $color = 'red';
+
 			<button onClick={() => $color = $color === 'red' ? 'blue' : 'red'}>{'Change Color'}</button>
 			<div $style={`color: ${$color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
@@ -144,6 +149,7 @@ describe('basic', () => {
 		component Basic() {
 			let $disabled = false;
 			let $checked = false;
+
 			<button onClick={() => {
 				$disabled = !$disabled;
 				$checked = !$checked;
@@ -170,6 +176,7 @@ describe('basic', () => {
 		component Basic() {
 			let $theme = 'light';
 			let $size = 'medium';
+
 			<button
 				onClick={() => {
 				$theme = $theme === 'light' ? 'dark' : 'light';
@@ -200,6 +207,7 @@ describe('basic', () => {
 		component Basic() {
 			let $showTitle = false;
 			let $showAria = false;
+
 			<button onClick={() => {
 				$showTitle = !$showTitle;
 				$showAria = !$showAria;
@@ -237,6 +245,7 @@ describe('basic', () => {
 				class: 'initial',
 				id: 'test-1'
 			};
+
 			<button
 				onClick={() => {
 				$attrs = {
@@ -299,4 +308,40 @@ describe('basic', () => {
 
 		expect(container.querySelector('.count').textContent).toBe('0');
 	});
+
+	it('renders multiple reactive lexical blocks with complexity', () => {
+		component Basic() {
+			const count = '$count';
+
+			<div>
+				let obj = {
+					$count: 0
+				};
+
+				<span>{obj[count]}</span>
+			</div>
+			<div>
+				let b = {
+					$count: 0
+				};
+
+				<button onClick={() => b[count]--}>{'-'}</button>
+				<span class='count'>{b[count]}</span>
+				<button onClick={() => b[count]++}>{'+'}</button>
+			</div>
+		}
+		render(Basic);
+
+		const buttons = container.querySelectorAll('button');
+
+		buttons[0].click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('-1');
+
+		buttons[1].click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('0');
+	});
 });

package/tests/composite.test.ripple

@@ -28,6 +28,7 @@ describe('composite components', () => {
 
 		component App() {
 			let $count = 0;
+
 			<button onClick={() => $count++}>{'Increment'}</button>
 			<Button $count={$count} />
 		}

package/tests/for.test.ripple

@@ -43,16 +43,17 @@ describe('for statements', () => {
 				<div class={item}>{item}</div>
 			}
 
-			<button onClick={() => items.push(`Item ${items.$length + 1}`)}>{"Add Item"}</button>
+			<button onClick={() => items.push(`Item ${items.$length + 1}`)}>{'Add Item'}</button>
 		}
 
 		render(App);
 		expect(container).toMatchSnapshot();
 
-    const button = container.querySelector('button');
-    button.click();
-    flushSync();
+		const button = container.querySelector('button');
 
-    expect(container).toMatchSnapshot();
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
 	});
 });

package/tests/ref.test.ripple

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 
 import { mount, flushSync, ref } from 'ripple';
 
-describe('ref', () => {
+describe('ref()', () => {
 	let container;
 
 	function render(component) {
@@ -23,6 +23,7 @@ describe('ref', () => {
 	it('creates a reactive ref with initial value', () => {
 		component TestRef() {
 			let $count = 5;
+
 			<div><span id='count'>{$count}</span></div>
 		}
 
@@ -34,6 +35,7 @@ describe('ref', () => {
 	it('updates when ref value changes', () => {
 		component TestRef() {
 			let $count = 0;
+
 			<div>
 				<span id='count'>{$count}</span>
 				<button id='btn' onClick={() => $count++}>{'Increment'}</button>

package/types/index.d.ts

@@ -16,3 +16,10 @@ export interface Ref<T> {
 }
 
 export declare function ref<T>(value: T): Ref<T>;
+
+export interface RippleArray<T> extends Array<T> {
+  $length: number;
+  toJSON(): T[];
+}
+
+export declare function array<T>(...elements: T[]): RippleArray<T>;