ripple 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # ripple
 
+## 0.3.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.6
+
+## 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.6",
   "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.6"
   }
 }

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/hydration/components/basic.ripple

@@ -1,5 +1,5 @@
 // Basic static components for hydration testing
-import type { Component } from 'ripple';
+import type { Children } from 'ripple';
 
 export component StaticText() {
 	<div>{'Hello World'}</div>
@@ -97,7 +97,7 @@ component Actions({ playgroundVisible = false }: { playgroundVisible: boolean })
 	</div>
 }
 
-component Layout({ children }: { children: Component }) {
+component Layout({ children }: { children: Children }) {
 	<main>
 		<div class="container">
 			<children />

package/tests/hydration/components/composite.ripple

@@ -1,6 +1,6 @@
-import type { Component } from 'ripple';
+import type { Children } from 'ripple';
 
-export component Layout(&{ children }: { children?: Component }) {
+export component Layout(&{ children }: { children?: Children }) {
 	<div class="layout">
 		<children />
 	</div>

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>');
+	});
+});

package/tests/utils/vite-plugin-hmr.test.js

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ripple } from '@ripple-ts/vite-plugin';
+
+describe('vite-plugin-ripple hotUpdate', () => {
+	it('invalidates SSR modules for non-self-accepting .ripple files', async () => {
+		const [plugin] = ripple({ excludeRippleExternalModules: true });
+		await plugin.configResolved?.({ root: '/workspace', command: 'serve' });
+
+		const transform_request = vi.fn().mockResolvedValue(undefined);
+		const get_css_module = vi.fn().mockReturnValue(undefined);
+		const invalidate_css_module = vi.fn();
+		const send_hot_update = vi.fn();
+		const get_ssr_modules = vi.fn().mockReturnValue(new Set([{ id: 'ssr:a' }, { id: 'ssr:b' }]));
+		const invalidate_ssr_module = vi.fn();
+
+		const result = await plugin.hotUpdate.handler.call(
+			{
+				environment: {
+					name: 'client',
+					transformRequest: transform_request,
+					moduleGraph: {
+						getModuleById: get_css_module,
+						invalidateModule: invalidate_css_module,
+					},
+					hot: {
+						send: send_hot_update,
+					},
+				},
+			},
+			{
+				file: '/workspace/src/non-component.ripple',
+				modules: [{ id: 'client:non-component', isSelfAccepting: false }],
+				server: {
+					environments: {
+						ssr: {
+							moduleGraph: {
+								getModulesByFile: get_ssr_modules,
+								invalidateModule: invalidate_ssr_module,
+							},
+						},
+					},
+				},
+			},
+		);
+
+		expect(transform_request).toHaveBeenCalledWith('/src/non-component.ripple');
+		expect(get_ssr_modules).toHaveBeenCalledWith('/workspace/src/non-component.ripple');
+		expect(invalidate_ssr_module).toHaveBeenCalledTimes(2);
+		expect(send_hot_update).toHaveBeenCalledWith({ type: 'full-reload' });
+		expect(result).toEqual([]);
+	});
+
+	it('keeps self-accepting .ripple files on Vite HMR path', async () => {
+		const [plugin] = ripple({ excludeRippleExternalModules: true });
+		await plugin.configResolved?.({ root: '/workspace', command: 'serve' });
+
+		const transform_request = vi.fn().mockResolvedValue(undefined);
+		const get_ssr_modules = vi.fn();
+		const invalidate_ssr_module = vi.fn();
+		const send_hot_update = vi.fn();
+
+		const result = await plugin.hotUpdate.handler.call(
+			{
+				environment: {
+					name: 'client',
+					transformRequest: transform_request,
+					moduleGraph: {
+						getModuleById: vi.fn().mockReturnValue(undefined),
+						invalidateModule: vi.fn(),
+					},
+					hot: {
+						send: send_hot_update,
+					},
+				},
+			},
+			{
+				file: '/workspace/src/component.ripple',
+				modules: [{ id: 'client:component', isSelfAccepting: true }],
+				server: {
+					environments: {
+						ssr: {
+							moduleGraph: {
+								getModulesByFile: get_ssr_modules,
+								invalidateModule: invalidate_ssr_module,
+							},
+						},
+					},
+				},
+			},
+		);
+
+		expect(transform_request).toHaveBeenCalledWith('/src/component.ripple');
+		expect(get_ssr_modules).not.toHaveBeenCalled();
+		expect(invalidate_ssr_module).not.toHaveBeenCalled();
+		expect(send_hot_update).not.toHaveBeenCalled();
+		expect(result).toBeUndefined();
+	});
+});

package/types/index.d.ts

@@ -1,5 +1,8 @@
 export type Component<T = Record<string, any>> = (props: T) => void;
 
+/** Type for JSX children - accepts single child, multiple children, or no children */
+export type Children = Component | readonly Component[];
+
 export type CompatApi = {
 	createRoot: () => void;
 	createComponent: (node: any, children_fn: () => any) => void;
@@ -159,10 +162,10 @@ export type InferComponent<T> = T extends () => infer R ? (R extends Component<a
 export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
 export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
 export type PropsWithChildren<T extends object = {}> = Expand<
-	Omit<T, 'children'> & { children: Component }
+	Omit<T, 'children'> & { children: Children }
 >;
 export type PropsWithChildrenOptional<T extends object = {}> = Expand<
-	Omit<T, 'children'> & { children?: Component }
+	Omit<T, 'children'> & { children?: Children }
 >;
 export type PropsNoChildren<T extends object = {}> = Expand<T>;
 
@@ -383,10 +386,10 @@ export const MediaQuery: MediaQueryConstructor;
 
 export function Portal<V = HTMLElement>({
 	target,
-	children: Component,
+	children,
 }: {
 	target: V;
-	children?: Component;
+	children?: Children;
 }): void;
 
 export type GetFunction<V> = () => V;