bimba-cli 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bimba-cli",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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,35 +62,66 @@ const hmrClient = `
 
 	// ── HMR update handler ─────────────────────────────────────────────────────
 
-	function _applyUpdate(file) {
+	// 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 = [];
-
-			// For each tag that was just (re)defined, find all live instances
-			// and reset their imba render-state.
-			//
-			// Why this is needed: imba stores cached references to rendered
-			// child slots on the element instance under Symbol keys. Each
-			// compilation of a .imba file creates a NEW set of Symbols, so
-			// after HMR the new render() walks new keys, finds nothing, and
-			// APPENDS a fresh subtree alongside the stale one — visible as a
-			// duplicated popup/section inside the same tag.
-			//
-			// Fix: snapshot own enumerable properties (instance state like
-			// "opened", "data", etc.), wipe Symbol-keyed slots and innerHTML,
-			// restore instance state, then re-render. The DOM is rebuilt for
-			// the patched tag only, but instance state (and therefore "the
-			// popup is open with these props") is preserved. Other tags are
-			// untouched, so unrelated popups/dropdowns keep their state.
-			for (const tag of tags) {
+
+		// 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 = '';
@@ -98,19 +129,58 @@ const hmrClient = `
 					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 id="_<hash>"> blocks into <head>.
+	// We can't intercept register directly (it's inside the imba runtime), so
+	// we walk all <style> elements with imba-style ids and check whether any
+	// element in the document still uses one of the classnames declared in
+	// the stylesheet. If not, the block is dead and gets removed.
+	function _reapStyles() {
+		const styles = document.head.querySelectorAll('style[id^="_"]');
+		for (const style of styles) {
+			try {
+				const sheet = style.sheet;
+				if (!sheet) continue;
+				let used = false;
+				// Sample a few class selectors and check the document for them.
+				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.push(m[1]);
+				}
+				if (!probes.length) continue;
+				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 ───────────────────────────────────────────────────
@@ -128,7 +198,7 @@ const hmrClient = `
 
 		ws.onmessage = (e) => {
 			const msg = JSON.parse(e.data);
-			if      (msg.type === 'update')      _applyUpdate(msg.file);
+			if      (msg.type === 'update')      _applyUpdate(msg.file, msg.slots);
 			else if (msg.type === 'reload')      location.reload();
 			else if (msg.type === 'error')       showError(msg.file, msg.errors);
 			else if (msg.type === 'clear-error') clearError();
@@ -177,6 +247,37 @@ const hmrClient = `
 
 const _compileCache = new Map()  // filepath → { mtime, result }
 const _prevJs = new Map()  // filepath → compiled js — for change detection
+const _prevSlots = new Map()  // filepath → previous symbol slot count
+
+// Imba compiles tag render-cache slots as anonymous local Symbols at module top
+// level: `var $4 = Symbol(), $11 = Symbol(), ...; let c$0 = Symbol();`. Each
+// re-import of the file creates fresh Symbol objects, so old slot data on live
+// element instances no longer matches the new render's keys, and imba's diff
+// can't reuse cached children — it appends new ones, causing duplication.
+//
+// We rewrite each `<name> = Symbol()` clause so that the Symbol is read from a
+// per-file global cache, keyed by the variable name. On the first compilation
+// the cache is populated; on every subsequent compilation the same Symbol
+// objects are reused, slot keys stay stable, and imba's renderer happily
+// diff-updates existing DOM in place.
+//
+// Caveat: stability is keyed by name. If the user adds/removes elements in the
+// template, slot indices shift and the same name now points to a semantically
+// different slot. We detect this by counting slots — if the count changes vs
+// the previous compilation, we mark the file `slots: 'shifted'` and the client
+// falls back to the destructive wipe-and-render path. Pure CSS/text edits keep
+// counts unchanged → true in-place HMR.
+function stabilizeSymbols(js, filepath) {
+	let count = 0
+	const out = js.replace(
+		/([A-Za-z_$][\w$]*)\s*=\s*Symbol\(\)/g,
+		(_m, name) => { count++; return `${name} = (__bsyms__[${JSON.stringify(name)}] ||= Symbol())` }
+	)
+	if (count === 0) return { js, slotCount: 0 }
+	const fileKey = JSON.stringify(filepath)
+	const bootstrap = `const __bsyms__ = ((globalThis.__bimba_syms ||= {})[${fileKey}] ||= {});\n`
+	return { js: bootstrap + out, slotCount: count }
+}
 
 async function compileFile(filepath) {
 	const file = Bun.file(filepath)
@@ -184,7 +285,7 @@ async function compileFile(filepath) {
 	const mtime = stat.mtime.getTime()
 
 	const cached = _compileCache.get(filepath)
-	if (cached && cached.mtime === mtime) return { ...cached.result, changeType: 'cached' }
+	if (cached && cached.mtime === mtime) return { ...cached.result, changeType: 'cached', slots: cached.slots }
 
 	const code = await file.text()
 	const result = compiler.compile(code, {
@@ -193,9 +294,17 @@ async function compileFile(filepath) {
 		sourcemap: 'inline',
 	})
 
+	if (!result.errors?.length && result.js) {
+		const { js, slotCount } = stabilizeSymbols(result.js, filepath)
+		result.js = js
+		const prev = _prevSlots.get(filepath)
+		result.slots = (prev === undefined || prev === slotCount) ? 'stable' : 'shifted'
+		_prevSlots.set(filepath, slotCount)
+	}
+
 	const changeType = _prevJs.get(filepath) === result.js ? 'none' : 'full'
 	_prevJs.set(filepath, result.js)
-	_compileCache.set(filepath, { mtime, result })
+	_compileCache.set(filepath, { mtime, result, slots: result.slots })
 	return { ...result, changeType }
 }
 
@@ -351,7 +460,7 @@ export function serve(entrypoint, flags) {
 
 			printStatus(rel, 'ok')
 			broadcast({ type: 'clear-error' })
-			broadcast({ type: 'update', file: rel })
+			broadcast({ type: 'update', file: rel, slots: out.slots || 'shifted' })
 		} catch(e) {
 			printStatus(rel, 'fail', [{ message: e.message }])
 			broadcast({ type: 'error', file: rel, errors: [{ message: e.message, snippet: e.stack || e.message }] })