bimba-cli 0.5.4 → 0.5.5

package/package.json

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

package/serve.js

@@ -67,26 +67,43 @@ const hmrClient = `
 		_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.
+			// 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) {
+				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(_) {}
+				});
+			}
+
 			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();