ripple 0.3.54 → 0.3.57

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # ripple
 
+## 0.3.57
+
+### Patch Changes
+
+- [#1126](https://github.com/Ripple-TS/ripple/pull/1126)
+  [`2b1f746`](https://github.com/Ripple-TS/ripple/commit/2b1f7469ab31713140a5baf912a19fa8eedb9234)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Keep runtime helper imports
+  on namespaced runtime subpaths so production app bundles do not pull in
+  compiler-only modules.
+
+- [#1123](https://github.com/Ripple-TS/ripple/pull/1123)
+  [`e4a04dd`](https://github.com/Ripple-TS/ripple/commit/e4a04ddb4bbc8e21a9c7c2c65b179d764b72e4fb)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Nested lazy destructuring
+  support for all tsrx targets. Ripple already fully supported it.
+- Updated dependencies
+  [[`2b1f746`](https://github.com/Ripple-TS/ripple/commit/2b1f7469ab31713140a5baf912a19fa8eedb9234),
+  [`e4a04dd`](https://github.com/Ripple-TS/ripple/commit/e4a04ddb4bbc8e21a9c7c2c65b179d764b72e4fb)]:
+  - @tsrx/core@0.1.7
+  - ripple@0.3.57
+  - @tsrx/ripple@0.1.7
+
+## 0.3.56
+
+### Patch Changes
+
+- Updated dependencies
+  [[`a59ccb8`](https://github.com/Ripple-TS/ripple/commit/a59ccb83b91257bf34fca2ba1415e77d1f815a7b)]:
+  - @tsrx/core@0.1.6
+  - ripple@0.3.56
+  - @tsrx/ripple@0.1.6
+
+## 0.3.55
+
+### Patch Changes
+
+- Updated dependencies
+  [[`de27e18`](https://github.com/Ripple-TS/ripple/commit/de27e182d002ea736aee992acca4cbf9873a307d),
+  [`59e1e32`](https://github.com/Ripple-TS/ripple/commit/59e1e328607598fe342abbba35f76e5fadb9ca5c),
+  [`1256569`](https://github.com/Ripple-TS/ripple/commit/12565695efaa3a4ad429245807721ea671c2ecb5),
+  [`1256569`](https://github.com/Ripple-TS/ripple/commit/12565695efaa3a4ad429245807721ea671c2ecb5),
+  [`18b4aef`](https://github.com/Ripple-TS/ripple/commit/18b4aefa8127e56a9f1b3058da2d4d2172551579)]:
+  - @tsrx/core@0.1.5
+  - ripple@0.3.55
+  - @tsrx/ripple@0.1.5
+
 ## 0.3.54
 
 ### 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.54",
+  "version": "0.3.57",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,8 +76,8 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/core": "0.1.4",
-    "@tsrx/ripple": "0.1.4"
+    "@tsrx/core": "0.1.7",
+    "@tsrx/ripple": "0.1.7"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -87,6 +87,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.54"
+    "ripple": "0.3.57"
   }
 }

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

@@ -3,11 +3,11 @@
  * @typedef {EventTarget & Record<string, any>} DelegatedEventTarget
  */
 import {
-	eventNameFromCapture as event_name_from_capture,
-	isCaptureEvent as is_capture_event,
-	isNonDelegated as is_non_delegated,
-	isPassiveEvent as is_passive_event,
-} from '@tsrx/core';
+	event_name_from_capture,
+	is_capture_event,
+	is_non_delegated,
+	is_passive_event,
+} from '@tsrx/core/runtime/events';
 import {
 	active_block,
 	active_reaction,

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

@@ -10,13 +10,10 @@ import {
 	get_prototype_of,
 } from '@tsrx/core/runtime/language-helpers';
 import { event } from './events.js';
-import {
-	getAttributeEventName as get_attribute_event_name,
-	isEventAttribute as is_event_attribute,
-} from '@tsrx/core';
+import { get_attribute_event_name, is_event_attribute } from '@tsrx/core/runtime/events';
 import { get } from './runtime.js';
 import { clsx } from 'clsx';
-import { normalizeCssPropertyName as normalize_css_property_name } from '@tsrx/core';
+import { normalize_css_property_name } from '@tsrx/core/runtime/html';
 
 /**
  * @param {Text} text

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

@@ -29,10 +29,13 @@ import {
 import { DEV } from 'esm-env';
 import { is_ripple_object } from '../client/utils.js';
 import { array_slice } from '@tsrx/core/runtime/language-helpers';
-import { escape, escapeScript as escape_script } from '@tsrx/core';
-import { isBooleanAttribute as is_boolean_attribute } from '@tsrx/core';
+import {
+	escape,
+	escape_script,
+	is_boolean_attribute,
+	normalize_css_property_name,
+} from '@tsrx/core/runtime/html';
 import { clsx } from 'clsx';
-import { normalizeCssPropertyName as normalize_css_property_name } from '@tsrx/core';
 import { create_ref_prop } from '@tsrx/core/runtime/ref';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
 import { is_tsrx_element, normalize_children, tsrx_element } from '../../element.js';
@@ -53,7 +56,7 @@ import { COMPONENT_BLOCK, TRY_BLOCK } from './constants.js';
 
 export { escape };
 export { register_component_css as register_css } from './css-registry.js';
-export { simpleHash as simple_hash, strongHash as strong_hash } from '@tsrx/core';
+export { simple_hash, strong_hash } from '@tsrx/core/runtime/hash';
 export { context } from './context.js';
 export { try_block, component_block, regular_block } from './blocks.js';
 export { array_slice };

package/tests/client/basic/basic.attributes.test.tsrx

@@ -462,12 +462,10 @@ describe('basic client > attribute rendering', () => {
 
 	it('render spread attributes', () => {
 		component Basic() {
-			let &[attrs] = track<TestAttributes>(
-				{
-					class: 'initial',
-					id: 'test-1',
-				},
-			);
+			let &[attrs] = track<TestAttributes>({
+				class: 'initial',
+				id: 'test-1',
+			});
 
 			<button
 				onClick={() => {

package/tests/client/basic/basic.collections.test.tsrx

@@ -4,12 +4,10 @@ import { TRACKED_ARRAY } from '../../../src/runtime/internal/client/constants.js
 describe('basic client > collections', () => {
 	it('renders with simple reactive objects', () => {
 		component Basic() {
-			let &[user] = track(
-				{
-					name: 'John',
-					age: 25,
-				},
-			);
+			let &[user] = track({
+				name: 'John',
+				age: 25,
+			});
 
 			<div class="name">{user.name}</div>
 			<div class="age">{user.age}</div>
@@ -40,12 +38,10 @@ describe('basic client > collections', () => {
 
 	it('renders with nested reactive objects', () => {
 		component Basic() {
-			let &[user] = track(
-				{
-					name: track('John'),
-					age: track(25),
-				},
-			);
+			let &[user] = track({
+				name: track('John'),
+				age: track(25),
+			});
 
 			<div class="name">{user.name.value}</div>
 			<div class="age">{user.age.value}</div>

package/tests/server/basic.attributes.test.tsrx

@@ -493,12 +493,10 @@ describe('basic server > attribute rendering', () => {
 
 	it('render spread attributes', async () => {
 		component Basic() {
-			let &[attrs] = track<TestAttributes>(
-				{
-					class: 'initial',
-					id: 'test-1',
-				},
-			);
+			let &[attrs] = track<TestAttributes>({
+				class: 'initial',
+				id: 'test-1',
+			});
 
 			<div {...attrs}>{'Spread Attributes'}</div>
 		}

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

@@ -140,7 +140,11 @@ describe('lazy destructuring', () => {
 	it(
 		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy component params',
 		async () => {
-			component Inner({ values: [head, ...&{ 0: first_rest, length: rest_length }] }) {
+			component Inner({
+				values: [head, ...&{ 0: first_rest, length: rest_length }],
+			}: {
+				values: number[];
+			}) {
 				const before = `${first_rest}-${rest_length}`;
 				rest_length = 0;
 				<pre>{`${head}-${before}-${first_rest}-${rest_length}`}</pre>
@@ -159,7 +163,11 @@ describe('lazy destructuring', () => {
 		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy function params',
 		async () => {
 			component Test() {
-				function getInfo({ values: [head, ...&{ 0: first_rest, length: rest_length }] }) {
+				function getInfo({
+					values: [head, ...&{ 0: first_rest, length: rest_length }],
+				}: {
+					values: number[];
+				}) {
 					const before = `${first_rest}-${rest_length}`;
 					rest_length = 0;
 					return `${head}-${before}-${first_rest}-${rest_length}`;
@@ -228,4 +236,304 @@ describe('lazy destructuring', () => {
 		const { body } = await render(Test);
 		expect(body).toBeHtml('<pre>10-20</pre>');
 	});
+
+	describe('nested lazy destructuring', () => {
+		it('preserves nested lazy object access inside lazy object as component params', async () => {
+			let inner_value = 7;
+
+			component Inner(&{ outer: &{ inner } }: { outer: { inner: number } }) {
+				const before = inner;
+				inner_value = 8;
+				<pre>{`${before}-${inner}`}</pre>
+			}
+
+			component Test() {
+				const outer = {
+					get inner() {
+						return inner_value;
+					},
+				};
+				<Inner {outer} />
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>7-8</pre>');
+		});
+
+		it('preserves nested lazy array access inside regular object as component params', async () => {
+			let first_value = 3;
+			let second_value = 4;
+
+			component Inner({ pair: &[first, second] }: { pair: [number, number] }) {
+				const before = `${first}-${second}`;
+				first_value = 5;
+				second_value = 6;
+				<pre>{`${before}-${first}-${second}`}</pre>
+			}
+
+			component Test() {
+				const pair = [0, 0] as [number, number];
+				Object.defineProperty(pair, 0, { get: () => first_value });
+				Object.defineProperty(pair, 1, { get: () => second_value });
+				<Inner {pair} />
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>3-4-5-6</pre>');
+		});
+
+		it('preserves nested lazy object access inside lazy array as function params', async () => {
+			component Test() {
+				let name_value = 'Alice';
+				function getName(&[&{ name }]: [{ name: string }]) {
+					const before = name;
+					name_value = 'Bob';
+					return `${before}-${name}`;
+				}
+				const user = {
+					get name() {
+						return name_value;
+					},
+				};
+				<pre>{getName([user])}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>Alice-Bob</pre>');
+		});
+
+		it('preserves nested lazy array access inside lazy array as function params', async () => {
+			component Test() {
+				let first_value = 5;
+				let second_value = 6;
+				function getValues(&[&[a, b]]: [[number, number]]) {
+					const before = `${a}-${b}`;
+					first_value = 7;
+					second_value = 8;
+					return `${before}-${a}-${b}`;
+				}
+				const pair = [0, 0] as [number, number];
+				Object.defineProperty(pair, 0, { get: () => first_value });
+				Object.defineProperty(pair, 1, { get: () => second_value });
+				<pre>{getValues([pair])}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>5-6-7-8</pre>');
+		});
+
+		it('preserves three-level lazy object access as component params', async () => {
+			let c_value = 42;
+
+			component Inner(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
+				const before = c;
+				c_value = 43;
+				<pre>{`${before}-${c}`}</pre>
+			}
+
+			component Test() {
+				const a = {
+					b: {
+						get c() {
+							return c_value;
+						},
+					},
+				};
+				<Inner {a} />
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>42-43</pre>');
+		});
+
+		it('preserves nested lazy object access inside lazy object as function params', async () => {
+			component Test() {
+				let inner_value = 11;
+				function getValue(&{ outer: &{ inner } }: { outer: { inner: number } }) {
+					const before = inner;
+					inner_value = 12;
+					return `${before}-${inner}`;
+				}
+				const outer = {
+					get inner() {
+						return inner_value;
+					},
+				};
+				<pre>{getValue({ outer })}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>11-12</pre>');
+		});
+
+		it(
+			'supports nested lazy array inside lazy object as function params with writeback',
+			async () => {
+				component Test() {
+					const obj = { pair: [1, 2] as [number, number] };
+					function bump(&{ pair: &[first, second] }: { pair: [number, number] }) {
+						first = first + 10;
+						second = second + 20;
+					}
+					bump(obj);
+					<pre>{`${obj.pair[0]}-${obj.pair[1]}`}</pre>
+				}
+
+				const { body } = await render(Test);
+				expect(body).toBeHtml('<pre>11-22</pre>');
+			},
+		);
+
+		it('preserves three-level lazy object access as function params', async () => {
+			component Test() {
+				let c_value = 99;
+				function getValue(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
+					const before = c;
+					c_value = 100;
+					return `${before}-${c}`;
+				}
+				const a = {
+					b: {
+						get c() {
+							return c_value;
+						},
+					},
+				};
+				<pre>{getValue({ a })}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>99-100</pre>');
+		});
+
+		it('preserves nested lazy object access inside lazy object in const declaration', async () => {
+			component Test() {
+				let inner_value = 5;
+				const data = {
+					outer: {
+						get inner() {
+							return inner_value;
+						},
+					},
+				};
+				const &{ outer: &{ inner } } = data;
+				const before = inner;
+				inner_value = 6;
+				<pre>{`${before}-${inner}`}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>5-6</pre>');
+		});
+
+		it('supports nested lazy object inside lazy object in let with writeback', async () => {
+			component Test() {
+				const data = { outer: { inner: 5 } };
+				let &{ outer: &{ inner } } = data;
+				inner = 50;
+				<pre>{data.outer.inner}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>50</pre>');
+		});
+
+		it('supports nested lazy array inside lazy object in let with writeback', async () => {
+			component Test() {
+				const data = { pair: [1, 2] as [number, number] };
+				let &{ pair: &[first, second] } = data;
+				first = 100;
+				second = 200;
+				<pre>{`${data.pair[0]}-${data.pair[1]}`}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>100-200</pre>');
+		});
+
+		it('supports three-level lazy object nesting in let with writeback', async () => {
+			component Test() {
+				const data = { a: { b: { c: 1 } } };
+				let &{ a: &{ b: &{ c } } } = data;
+				c = 999;
+				<pre>{data.a.b.c}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>999</pre>');
+		});
+
+		it('supports compound assignment on deeply nested lazy bindings', async () => {
+			component Test() {
+				const data = { a: { b: { c: 5 } } };
+				let &{ a: &{ b: &{ c } } } = data;
+				c += 10;
+				c *= 2;
+				<pre>{data.a.b.c}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>30</pre>');
+		});
+
+		it('preserves default values inside nested lazy destructuring', async () => {
+			component Test() {
+				let inner_value: number | undefined;
+				const data: { outer: { inner?: number } } = {
+					outer: {
+						get inner() {
+							return inner_value;
+						},
+					},
+				};
+				const &{ outer: &{ inner = 42 } } = data;
+				const before = inner;
+				inner_value = 43;
+				<pre>{`${before}-${inner}`}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>42-43</pre>');
+		});
+
+		it('preserves multiple sibling nested lazy destructures', async () => {
+			component Test() {
+				let x_value = 1;
+				let y_value = 2;
+				const data = {
+					a: {
+						get x() {
+							return x_value;
+						},
+					},
+					b: {
+						get y() {
+							return y_value;
+						},
+					},
+				};
+				const &{ a: &{ x }, b: &{ y } } = data;
+				const before = `${x}-${y}`;
+				x_value = 3;
+				y_value = 4;
+				<pre>{`${before}-${x}-${y}`}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>1-2-3-4</pre>');
+		});
+
+		it('supports multiple sibling nested lazy destructures with writeback', async () => {
+			component Test() {
+				const data = { a: { x: 1 }, b: { y: 2 } };
+				let &{ a: &{ x }, b: &{ y } } = data;
+				x = 11;
+				y = 22;
+				<pre>{`${data.a.x}-${data.b.y}`}</pre>
+			}
+
+			const { body } = await render(Test);
+			expect(body).toBeHtml('<pre>11-22</pre>');
+		});
+	});
 });

package/tests/utils/runtime-imports.test.js

@@ -0,0 +1,38 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const runtime_dir = new URL('../../src/runtime/', import.meta.url);
+
+/** @param {string} dir */
+async function get_js_files(dir) {
+	const entries = await readdir(dir, { withFileTypes: true });
+	const files = [];
+
+	for (const entry of entries) {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...(await get_js_files(path)));
+		} else if (entry.isFile() && entry.name.endsWith('.js')) {
+			files.push(path);
+		}
+	}
+
+	return files;
+}
+
+describe('runtime imports', () => {
+	it('does not import the @tsrx/core compiler barrel', async () => {
+		const files = await get_js_files(runtime_dir.pathname);
+		const barrel_imports = [];
+
+		for (const file of files) {
+			const source = await readFile(file, 'utf8');
+			if (/from\s+['"]@tsrx\/core['"]/.test(source)) {
+				barrel_imports.push(file);
+			}
+		}
+
+		expect(barrel_imports).toEqual([]);
+	});
+});