bimba-cli 0.5.5 → 0.5.6

package/package.json

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

package/serve.js

@@ -62,7 +62,7 @@ const hmrClient = `
 
 	// ── HMR update handler ─────────────────────────────────────────────────────
 
-	function _applyUpdate(file) {
+	function _applyUpdate(file, slots) {
 		clearError();
 		_hotTags = [];
 
@@ -70,33 +70,38 @@ const hmrClient = `
 			const tags = _hotTags;
 			_hotTags = [];
 
-			// For each tag that was just (re)defined, find all live instances
-			// and reset their imba render-state.
+			// Two HMR paths depending on whether render-cache slot symbols are
+			// stable across this re-import:
 			//
-			// 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.
+			// '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.
 			//
-			// 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) {
-				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)) {
-						try { delete el[sym]; } catch(_) {}
-					}
-					el.innerHTML = '';
-					Object.assign(el, state);
-					try { el.render && el.render(); } catch(_) {}
-				});
+			// '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(_) {}
+					});
+				}
 			}
 
 			if (typeof imba !== 'undefined') imba.commit();
@@ -128,7 +133,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 +182,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 +220,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 +229,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 +395,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 }] })