ripple 0.3.56 → 0.3.58

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # ripple
 
+## 0.3.58
+
+### Patch Changes
+
+- [#1130](https://github.com/Ripple-TS/ripple/pull/1130)
+  [`0a5f39b`](https://github.com/Ripple-TS/ripple/commit/0a5f39b6e13807dfd3dc1228f40d7bb02b933373)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix client cleanup for
+  HMR-wrapped roots that do not own their DOM range directly.
+
+- Updated dependencies
+  [[`b54fdfc`](https://github.com/Ripple-TS/ripple/commit/b54fdfc3ebfea29ac613307b76732c5bf5f49ab5),
+  [`0a5f39b`](https://github.com/Ripple-TS/ripple/commit/0a5f39b6e13807dfd3dc1228f40d7bb02b933373),
+  [`165703c`](https://github.com/Ripple-TS/ripple/commit/165703c588b52f3dc0d26c06187f21700d448693)]:
+  - @tsrx/core@0.1.8
+  - ripple@0.3.58
+  - @tsrx/ripple@0.1.8
+
+## 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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "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.6",
-    "@tsrx/ripple": "0.1.6"
+    "@tsrx/core": "0.1.8",
+    "@tsrx/ripple": "0.1.8"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -87,6 +87,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.56"
+    "ripple": "0.3.58"
   }
 }

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

@@ -188,7 +188,7 @@ export function root(fn, compat) {
 		};
 	}
 
-	return block(ROOT_BLOCK, target_fn, { compat }, create_component_ctx());
+	return block(ROOT_BLOCK, target_fn, { compat, start: null, end: null }, create_component_ctx());
 }
 
 /**
@@ -274,7 +274,7 @@ export function destroy_block_children(parent, remove_dom = false) {
 	var block = parent.first;
 	parent.first = parent.last = null;
 
-	if ((parent.f & CONTAINS_TEARDOWN) !== 0) {
+	if (remove_dom || (parent.f & CONTAINS_TEARDOWN) !== 0) {
 		while (block !== null) {
 			var next = block.next;
 			destroy_block(block, remove_dom);
@@ -456,7 +456,7 @@ export function destroy_block(block, remove_dom = true) {
 		(f & HEAD_BLOCK) !== 0
 	) {
 		var s = block.s;
-		if (s !== null) {
+		if (s !== null && s.start !== null) {
 			remove_block_dom(s.start, s.end);
 			removed = true;
 		}

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.hmr.test.tsrx

@@ -1,5 +1,6 @@
 import { HMR } from '../../../src/runtime/internal/client/constants.js';
 import { hmr } from '../../../src/runtime/internal/client/hmr.js';
+import { effect, flushSync, mount } from 'ripple';
 
 describe('basic client > hmr', () => {
 	it('handles updates before first render', () => {
@@ -16,4 +17,81 @@ describe('basic client > hmr', () => {
 		expect(wrapper[HMR].current).toBeUndefined();
 		expect(wrapper[HMR].fn).toBe(updated_component);
 	});
+
+	it('removes DOM when an HMR-wrapped root is unmounted', () => {
+		component App() {
+			<div class="hmr-root">{'hmr root'}</div>
+		}
+
+		const cleanup = mount(hmr(App), { target: container });
+		flushSync();
+
+		expect(container.querySelector('.hmr-root')?.textContent).toBe('hmr root');
+
+		cleanup();
+
+		expect(container.querySelector('.hmr-root')).toBeNull();
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('runs child teardowns when an HMR-wrapped root is unmounted', () => {
+		let teardown_count = 0;
+
+		component Child() {
+			effect(() => {
+				return () => {
+					teardown_count++;
+				};
+			});
+
+			<span class="hmr-child">{'child'}</span>
+		}
+
+		component App() {
+			<Child />
+		}
+
+		const cleanup = mount(hmr(App), { target: container });
+		flushSync();
+
+		expect(container.querySelector('.hmr-child')?.textContent).toBe('child');
+		expect(teardown_count).toBe(0);
+
+		cleanup();
+
+		expect(container.querySelector('.hmr-child')).toBeNull();
+		expect(teardown_count).toBe(1);
+	});
+
+	it('does not double-remove child DOM when the root owns the DOM range', () => {
+		let remove_count = 0;
+		const original_remove = Element.prototype.remove;
+
+		Element.prototype.remove = function () {
+			if (this.classList.contains('owned-root')) {
+				remove_count++;
+			}
+			return original_remove.call(this);
+		};
+
+		try {
+			component App() {
+				<div class="owned-root">
+					<span>{'child'}</span>
+				</div>
+			}
+
+			const cleanup = mount(App, { target: container });
+			flushSync();
+
+			expect(container.querySelector('.owned-root')).not.toBeNull();
+
+			cleanup();
+
+			expect(container.querySelector('.owned-root')).toBeNull();
+			expect(remove_count).toBe(1);
+		} finally {
+			Element.prototype.remove = original_remove;
+		}
+	});
 });

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([]);
+	});
+});