ripple 0.3.4 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # ripple
 
+## 0.3.5
+
+### Patch Changes
+
+- [#827](https://github.com/Ripple-TS/ripple/pull/827)
+  [`218a72c`](https://github.com/Ripple-TS/ripple/commit/218a72c3e663910636eec1d065c58afe30813c84)
+  Thanks [@trueadm](https://github.com/trueadm)! - fix(compiler): handle
+  UpdateExpression on lazy bindings with default values
+
+  Update expressions (`++`/`--`) on lazy destructured bindings with default values
+  now work correctly. For postfix operations (`count++`), an IIFE captures the
+  fallback value before incrementing. Also added `fallback` function to server
+  runtime.
+
+- Updated dependencies
+  [[`218a72c`](https://github.com/Ripple-TS/ripple/commit/218a72c3e663910636eec1d065c58afe30813c84)]:
+  - ripple@0.3.5
+
 ## 0.3.4
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.4"
+    "ripple": "0.3.5"
   }
 }

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

@@ -85,7 +85,8 @@ function setup_lazy_transforms(pattern, source_id, state, writable) {
 		const binding = state.scope.get(name);
 
 		if (binding !== null) {
-			binding.kind = path.has_default_value ? 'lazy_fallback' : 'lazy';
+			const has_fallback = path.has_default_value;
+			binding.kind = has_fallback ? 'lazy_fallback' : 'lazy';
 
 			binding.transform = {
 				read: (_) => {
@@ -101,8 +102,40 @@ function setup_lazy_transforms(pattern, source_id, state, writable) {
 						value,
 					);
 				};
-				binding.transform.update = (node) =>
-					b.update(node.operator, path.update_expression(source_id), node.prefix);
+
+				if (has_fallback) {
+					// For bindings with default values, generate proper fallback-aware update
+					// e.g., count++ with default 0 becomes:
+					// (() => { var _v = _$_.fallback(obj.count, 0); obj.count = _v + 1; return _v; })() for postfix
+					// (obj.count = _$_.fallback(obj.count, 0) + 1) for prefix
+					binding.transform.update = (node) => {
+						const member = path.update_expression(source_id);
+						const fallback_read = path.expression(source_id);
+						const delta = node.operator === '++' ? b.literal(1) : b.literal(-1);
+
+						if (node.prefix) {
+							// ++count: return new value
+							return b.assignment('=', member, b.binary('+', fallback_read, delta));
+						} else {
+							// count++: return old value, write new value
+							// Use IIFE to declare temp variable
+							const temp = b.id('_v');
+							return b.call(
+								b.arrow(
+									[],
+									b.block([
+										b.var(temp, fallback_read),
+										b.stmt(b.assignment('=', member, b.binary('+', temp, delta))),
+										b.return(temp),
+									]),
+								),
+							);
+						}
+					};
+				} else {
+					binding.transform.update = (node) =>
+						b.update(node.operator, path.update_expression(source_id), node.prefix);
+				}
 			}
 		}
 	}

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

@@ -2078,6 +2078,14 @@ const visitors = {
 		}
 		const argument = node.argument;
 
+		// Handle lazy binding updates (e.g., a++ where a is from let &{a} = obj)
+		if (argument.type === 'Identifier') {
+			const binding = context.state.scope?.get(argument.name);
+			if (binding?.transform?.update && binding.node !== argument) {
+				return binding.transform.update(node);
+			}
+		}
+
 		if (
 			argument.type === 'MemberExpression' &&
 			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))

package/src/compiler/types/index.d.ts

@@ -1158,7 +1158,7 @@ export interface Binding {
 	transform?: {
 		read: (node?: AST.Identifier) => AST.Expression;
 		assign?: (node: AST.Pattern, value: AST.Expression) => AST.AssignmentExpression;
-		update?: (node: AST.UpdateExpression) => AST.UpdateExpression;
+		update?: (node: AST.UpdateExpression) => AST.Expression;
 	};
 }
 

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

@@ -792,3 +792,14 @@ ripple_array.from_async = async function (arrayLike, map_fn, thisArg) {
 export function ripple_object(obj) {
 	return obj;
 }
+
+/**
+ * Returns the fallback value if the given value is undefined.
+ * @template T
+ * @param {T | undefined} value
+ * @param {T} fallback
+ * @returns {T}
+ */
+export function fallback(value, fallback) {
+	return value === undefined ? fallback : value;
+}

package/tests/client/lazy-destructuring.test.ripple

@@ -182,4 +182,28 @@ describe('lazy destructuring', () => {
 		render(Test);
 		expect(container.querySelector('pre')!.textContent).toBe('1-99');
 	});
+
+	it('supports update expressions on lazy bindings with default values', () => {
+		component Test() {
+			const obj: { count?: number } = {};
+			let &{ count = 0 } = obj;
+			count++;
+			count++;
+			<pre>{obj.count}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2');
+	});
+
+	it('supports member access on lazy destructured objects', () => {
+		component Test() {
+			const obj = { user: { name: 'Alice', age: 30 } };
+			const &{ user } = obj;
+			<pre>{`${user.name}-${user.age}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('Alice-30');
+	});
 });

package/tests/server/lazy-destructuring.test.ripple

@@ -0,0 +1,103 @@
+describe('lazy destructuring', () => {
+	it('lazily accesses object properties', async () => {
+		component Inner(&{ a, b }: { a: number; b: string }) {
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		component Test() {
+			<Inner a={1} b="hello" />
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>1-hello</pre>');
+	});
+
+	it('supports default values in lazy object destructuring', async () => {
+		component Test() {
+			const obj = { a: 5 };
+			const &{ a, b = 99 } = obj;
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>5-99</pre>');
+	});
+
+	it('supports let lazy destructuring with assignment writeback', async () => {
+		component Test() {
+			const obj = { a: 1, b: 2 };
+			let &{ a, b } = obj;
+			a = 10;
+			b = 20;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>10-20</pre>');
+	});
+
+	it('supports compound assignment operators on lazy bindings', async () => {
+		component Test() {
+			const obj = { a: 5, b: 10 };
+			let &{ a, b } = obj;
+			a += 3;
+			b *= 2;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>8-20</pre>');
+	});
+
+	it('supports update expressions on lazy bindings', async () => {
+		component Test() {
+			const obj = { count: 0 };
+			let &{ count } = obj;
+			count++;
+			count++;
+			count--;
+			<pre>{obj.count}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>1</pre>');
+	});
+
+	it('supports update expressions on lazy bindings with default values', async () => {
+		component Test() {
+			const obj: { count?: number } = {};
+			let &{ count = 0 } = obj;
+			count++;
+			count++;
+			<pre>{obj.count}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>2</pre>');
+	});
+
+	it('supports function params with lazy destructuring and default values', async () => {
+		component Test() {
+			function calc(&{ x, y = 100 }: { x: number; y?: number }) {
+				return x + y;
+			}
+			const a = calc({ x: 5, y: 10 });
+			const b = calc({ x: 5 });
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>15-105</pre>');
+	});
+
+	it('supports member access on lazy destructured objects', async () => {
+		component Test() {
+			const obj = { user: { name: 'Alice', age: 30 } };
+			const &{ user } = obj;
+			<pre>{`${user.name}-${user.age}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>Alice-30</pre>');
+	});
+});