ripple 0.3.57 → 0.3.58

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.57",
+  "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.7",
-    "@tsrx/ripple": "0.1.7"
+    "@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.57"
+    "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/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;
+		}
+	});
 });