bimba-cli 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bimba-cli",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HeapVoid/bimba.git"

package/serve.js

@@ -25,10 +25,10 @@ const hmrClient = `
 	//
 	const _origDefine = customElements.define.bind(customElements);
 	const _classes = new Map(); // tagName → first-registered constructor
-	let _hotTags = [];          // tags defined during the current hot import
+	let _collector = null;      // when set, captures tag names defined during one HMR import
 
 	customElements.define = function(name, cls, opts) {
-		_hotTags.push(name);
+		if (_collector) _collector.push(name);
 		const existing = customElements.get(name);
 		if (!existing) {
 			_origDefine(name, cls, opts);
@@ -62,60 +62,124 @@ const hmrClient = `
 
 	// ── HMR update handler ─────────────────────────────────────────────────────
 
+	// Updates are serialized via a promise queue. Without this, two file edits
+	// arriving back-to-back would race on the shared collector and on imba's
+	// reconcile loop, with the second update potentially missing tags from
+	// the first.
+	let _queue = Promise.resolve();
+
 	function _applyUpdate(file, slots) {
+		_queue = _queue.then(() => _doUpdate(file, slots)).catch(err => {
+			console.error('[bimba HMR]', err);
+		});
+	}
+
+	async function _doUpdate(file, slots) {
 		clearError();
-		_hotTags = [];
-
-		import('/' + file + '?t=' + Date.now()).then(() => {
-			const tags = _hotTags;
-			_hotTags = [];
-
-			// Two HMR paths depending on whether render-cache slot symbols are
-			// stable across this re-import:
-			//
-			// 'stable': server-side symbol stabilization made the new module's
-			//   anonymous Symbols identical (by reference) to the previous
-			//   compilation. Live element instances still have valid slot
-			//   references → imba's renderer will diff and update the existing
-			//   DOM in place. We just patch class prototypes (already done in
-			//   the customElements.define hook above) and call imba.commit().
-			//   No DOM destruction, full inner state preserved.
-			//
-			// 'shifted': slot count changed (user added/removed elements), so
-			//   stabilization can't safely reuse symbols. Fall back to the
-			//   destructive path: snapshot own enumerable properties, wipe
-			//   ANONYMOUS symbol slots only (preserve global Symbol.for keys
-			//   that imba's runtime uses for lifecycle), clear innerHTML,
-			//   restore state, re-render. Loses inner DOM state for instances
-			//   of the patched tags, but preserves their instance fields.
-			if (slots === 'shifted') {
-				for (const tag of tags) {
-					document.querySelectorAll(tag).forEach(el => {
-						const state = {};
-						for (const k of Object.keys(el)) state[k] = el[k];
-						for (const sym of Object.getOwnPropertySymbols(el)) {
-							if (Symbol.keyFor(sym) !== undefined) continue;
-							try { delete el[sym]; } catch(_) {}
-						}
-						el.innerHTML = '';
-						Object.assign(el, state);
-						try { el.render && el.render(); } catch(_) {}
-					});
-				}
+
+		// Snapshot direct body children BEFORE importing the new module, so we
+		// know which elements pre-existed. After commit we only dedupe NEW
+		// elements whose tag also existed before — this preserves legitimate
+		// multi-instance roots like toasts and parallel popups, while still
+		// catching accidental re-mounts from re-running top-level code.
+		const bodyBefore = new Set(document.body.children);
+		const tagsBefore = new Set();
+		for (const el of bodyBefore) tagsBefore.add(el.tagName.toLowerCase());
+
+		// Use a local collector instead of a shared variable so concurrent
+		// imports can't clobber each other's tag lists.
+		const collected = [];
+		const prev = _collector;
+		_collector = collected;
+		try {
+			await import('/' + file + '?t=' + Date.now());
+		} finally {
+			_collector = prev;
+		}
+
+		// Two HMR paths depending on whether render-cache slot symbols are
+		// stable across this re-import:
+		//
+		// 'stable': server-side symbol stabilization made the new module's
+		//   anonymous Symbols identical (by reference) to the previous
+		//   compilation. Live element instances still have valid slot
+		//   references → imba's renderer will diff and update the existing
+		//   DOM in place. We just patch class prototypes (already done in
+		//   the customElements.define hook above) and call imba.commit().
+		//   No DOM destruction, full inner state preserved.
+		//
+		// 'shifted': slot count changed (user added/removed elements), so
+		//   stabilization can't safely reuse symbols. Fall back to the
+		//   destructive path: snapshot own enumerable properties, wipe
+		//   ANONYMOUS symbol slots only (preserve global Symbol.for keys
+		//   that imba's runtime uses for lifecycle), clear innerHTML,
+		//   restore state, re-render. Loses inner DOM state for instances
+		//   of the patched tags, but preserves their instance fields.
+		if (slots === 'shifted') {
+			for (const tag of collected) {
+				document.querySelectorAll(tag).forEach(el => {
+					const state = {};
+					for (const k of Object.keys(el)) state[k] = el[k];
+					for (const sym of Object.getOwnPropertySymbols(el)) {
+						if (Symbol.keyFor(sym) !== undefined) continue;
+						try { delete el[sym]; } catch(_) {}
+					}
+					el.innerHTML = '';
+					Object.assign(el, state);
+					try { el.render && el.render(); } catch(_) {}
+				});
 			}
+		}
 
-			if (typeof imba !== 'undefined') imba.commit();
-
-			// Dedupe direct body children by tag — handles re-importing
-			// top-level code that calls imba.mount() again, which would
-			// append a second copy of the root tag.
-			const seen = new Set();
-			[...document.body.children].forEach(el => {
-				const tag = el.tagName.toLowerCase();
-				if (seen.has(tag)) el.remove();
-				else seen.add(tag);
-			});
-		});
+		if (typeof imba !== 'undefined') imba.commit();
+
+		// Smart body dedupe: remove only elements that were ADDED during this
+		// HMR cycle and whose tag already existed in body before. This catches
+		// accidental re-mounts from top-level imba.mount() re-runs, but
+		// preserves toasts, multiple modals, and devtools-injected siblings.
+		for (const el of [...document.body.children]) {
+			if (bodyBefore.has(el)) continue;
+			if (tagsBefore.has(el.tagName.toLowerCase())) el.remove();
+		}
+
+		// Reap orphaned imba style blocks. Each compilation that produces a
+		// different content hash leaves behind a <style> whose rules target
+		// classnames no element in the DOM uses anymore. Walk our tracked
+		// styles and drop the unused ones — keeps head clean and removes
+		// stale rules that would otherwise still apply to live elements with
+		// matching classnames (e.g. a "stuck" old text color).
+		_reapStyles();
+	}
+
+	// ── Style reaper ───────────────────────────────────────────────────────────
+
+	// imba_styles.register inserts <style data-id="<hash>"> blocks into <head>.
+	// Walk them, sample a few class selectors, and check whether any element
+	// in the document still uses one of those classnames. If not, the block
+	// is dead (its tag was hot-replaced with a new content hash and the old
+	// classnames are gone from the DOM) — remove it.
+	function _reapStyles() {
+		const styles = document.head.querySelectorAll('style[data-id]');
+		for (const style of styles) {
+			try {
+				const sheet = style.sheet;
+				if (!sheet || !sheet.cssRules) continue;
+				const probes = [];
+				for (const rule of sheet.cssRules) {
+					if (probes.length >= 4) break;
+					const sel = rule.selectorText;
+					if (!sel) continue;
+					const m = sel.match(/\.(z[a-z0-9_-]+)/i);
+					if (m && !probes.includes(m[1])) probes.push(m[1]);
+				}
+				if (!probes.length) continue;
+				let used = false;
+				for (const cls of probes) {
+					if (document.querySelector('.' + CSS.escape(cls))) { used = true; break; }
+				}
+				if (!used) style.remove();
+			} catch(_) { /* cross-origin or detached */ }
+		}
 	}
 
 	// ── WebSocket connection ───────────────────────────────────────────────────