bimba-cli 0.5.4 → 0.5.6

package/package.json

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

package/serve.js

@@ -62,31 +62,53 @@ const hmrClient = `
 
 	// ── HMR update handler ─────────────────────────────────────────────────────
 
-	function _applyUpdate(file) {
+	function _applyUpdate(file, slots) {
 		clearError();
 		_hotTags = [];
 
 		import('/' + file + '?t=' + Date.now()).then(() => {
+			const tags = _hotTags;
 			_hotTags = [];
 
-			// Let Imba re-render in place from the patched prototypes. We do NOT
-			// touch instance DOM (no innerHTML reset, no symbol cleanup) — that
-			// would destroy rendered children like open popups / dropdowns and
-			// collapse any transient UI state. Prototype patching already makes
-			// the next render use the new methods; imba.commit() triggers it.
+			// 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(_) {}
+					});
+				}
+			}
+
 			if (typeof imba !== 'undefined') imba.commit();
 
-			// Dedupe direct body children by tag — runs AFTER commit so it
-			// catches both:
-			//   1) Re-importing top-level code that calls imba.mount() again
-			//      (appends a second root tag to body).
-			//   2) Detached popups: a popup uses imba.mount(self) to reparent
-			//      itself to body, so on commit the parent re-renders, doesn't
-			//      see the popup among its children, and creates a brand-new
-			//      instance which gets appended to body. The original (with
-			//      its state) is first in body.children; the freshly-created
-			//      duplicate is last — removing later occurrences preserves
-			//      state.
+			// 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();
@@ -111,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();
@@ -160,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)
@@ -167,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, {
@@ -176,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 }
 }
 
@@ -334,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 }] })