@vanilla-bean/components 2.0.4 → 2.0.5

package/Component/Component.js

@@ -611,19 +611,20 @@ class Component extends Elem {
 
 	/**
 	 * Destroys this component and all children. Runs all cleanup functions,
-	 * clears registries, and removes from DOM.
+	 * clears registries, and removes from DOM. Removal from the document is a disconnect: components listening for
+	 * one (onDisconnected) hear it here, once, with no event detail.
 	 */
 	destroy() {
-		this.elemObserver?.disconnect();
-
-		// Disconnect descendant elemObservers before running cleanup
-		const disconnectDescendantObservers = children => {
-			children.forEach(child => {
-				child.elemObserver?.disconnect();
-				disconnectDescendantObservers(child.children);
-			});
-		};
-		disconnectDescendantObservers(this.children);
+		// Innermost first: a component's own disconnect runs its descendants' cleanup, which takes their listeners away
+		const watching = [
+			...Array.from(this.elem?.querySelectorAll('*') ?? [], node => node._component).reverse(),
+			this,
+		].filter(component => component?.elemObserver);
+		const wasConnected = Boolean(this.elem?.isConnected);
+
+		// Their observers are let go first, so the removal below reports nothing and this is the only disconnect
+		for (const component of watching) component.elemObserver.disconnect();
+		if (wasConnected) for (const component of watching) component.emit('disconnected');
 
 		this.processCleanup(this.cleanup, true);
 		if (this._destroyCleanup) this.processCleanup(this._destroyCleanup);

package/Component/Component.test.js

@@ -1047,6 +1047,47 @@ describe('Component', () => {
 		});
 	});
 
+	describe('destroy', () => {
+		const settle = () => new Promise(resolve => setTimeout(resolve, 0));
+
+		test('a component in the document hears its own removal once', async () => {
+			const onDisconnected = mock();
+			const comp = new Component({ appendTo: document.body, onDisconnected });
+
+			comp.destroy();
+			await settle();
+
+			expect(onDisconnected).toHaveBeenCalledTimes(1);
+		});
+
+		test('components inside it hear it too, nested in plain elements or not', async () => {
+			const parent = new Component({ appendTo: document.body });
+			const wrapper = document.createElement('div');
+			const direct = mock();
+			const nested = mock();
+
+			new Component({ appendTo: parent, onDisconnected: direct });
+			parent.elem.append(wrapper);
+			new Component({ appendTo: wrapper, onDisconnected: nested });
+
+			parent.destroy();
+			await settle();
+
+			expect(direct).toHaveBeenCalledTimes(1);
+			expect(nested).toHaveBeenCalledTimes(1);
+		});
+
+		test('one never in the document hears nothing', async () => {
+			const onDisconnected = mock();
+			const comp = new Component({ autoRender: false, onDisconnected });
+
+			comp.destroy();
+			await settle();
+
+			expect(onDisconnected).not.toHaveBeenCalled();
+		});
+	});
+
 	describe('_setOption routing', () => {
 		test('aria-* routes to setAttribute', () => {
 			component = new Component({ 'aria-label': 'test label' });

package/Component/README.md

@@ -440,7 +440,7 @@ component.addCleanup(id, fn); // Register cleanup function (chains with existing
 component.replaceCleanup(id, fn); // Replace cleanup, running the previous one immediately
 component.replaceDestroyCleanup(id, fn); // Destroy-only cleanup: survives disconnect, runs on destroy()
 component.processCleanup(); // Execute all cleanup functions
-component.destroy(); // Disconnect observer, run all cleanup, remove from DOM
+component.destroy(); // Remove from DOM: onDisconnected fires (innermost first), then all cleanup runs
 ```
 
 #### Event Methods

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vanilla-bean/components",
-	"version": "2.0.4",
+	"version": "2.0.5",
 	"type": "module",
 	"module": "./index.js",
 	"types": "./index.d.ts",

package/spellcheck.config.cjs

@@ -6,6 +6,8 @@ module.exports = {
 	templates: true,
 	lang: 'en_US',
 	skipWords: [
+		'samp',
+		'tt',
 		'bezier',
 		'ecma',
 		'compat',

package/styled/styled.test.js

@@ -2,18 +2,28 @@
 
 import { Component } from '../Component';
 import theme from '../theme';
+import * as utils from '../utils';
 import { styled, configured } from './styled';
 
 const mockShimCSS = mock(() => {});
 mock.module('./shimCSS', () => ({ shimCSS: mockShimCSS }));
 
-const mockNanoid = mock(() => 'test-id-1234567890');
-mock.module('../utils', () => ({ classSafeNanoid: mockNanoid }));
+// bun's module mocks outlive this file, so the rest of utils passes through and the real id generator comes back
+// once these tests are done
+const realNanoid = utils.classSafeNanoid;
+const testNanoid = () => 'test-id-1234567890';
+const mockNanoid = mock(testNanoid);
+mock.module('../utils', () => ({ ...utils, classSafeNanoid: mockNanoid }));
 
 describe('styled system', () => {
 	beforeEach(() => {
 		mockShimCSS.mockClear();
 		mockNanoid.mockClear();
+		mockNanoid.mockImplementation(testNanoid);
+	});
+
+	afterAll(() => {
+		mockNanoid.mockImplementation(realNanoid);
 	});
 
 	describe('configured()', () => {

package/theme/page.js

@@ -10,6 +10,8 @@ export default theme => `
 	html {
 		height: 100%;
 		color-scheme: ${colors.black.isDark() ? 'dark' : 'light'};
+		font-size: 16px;
+		${fonts.kodeMono}
 	}
 
 	body {
@@ -34,13 +36,17 @@ export default theme => `
 	* {
 		touch-action: manipulation;
 		-webkit-text-size-adjust: none;
+	}
 
-		font-size: 16px;
-		${fonts.kodeMono}
+	/* The page's font is inherited, so content that sets its own (a terminal, an embedded editor) keeps it. These are
+	   the elements the browser gives a font or size of their own. */
+	:where(h1, h2, h3, h4, h5, h6, small, big, code, kbd, pre, samp, tt, var, button, input, select, textarea, optgroup, option, legend) {
+		font-family: inherit;
+		font-size: inherit;
+	}
 
-		sub, sup {
-			font-size: smaller;
-		}
+	:where(sub, sup) {
+		font-size: smaller;
 	}
 
 	#app {