bimba-cli 0.5.3 → 0.5.5

package/package.json

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

package/serve.js

@@ -67,24 +67,49 @@ const hmrClient = `
 		_hotTags = [];
 
 		import('/' + file + '?t=' + Date.now()).then(() => {
+			const tags = _hotTags;
 			_hotTags = [];
 
-			// Remove duplicate root elements. Re-importing a module with a fresh
-			// ?t= query causes top-level code (e.g. imba.mount()) to run again,
-			// which can append a second copy of the root tag to body.
+			// 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 — 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);
 			});
-
-			// 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.
-			if (typeof imba !== 'undefined') imba.commit();
 		});
 	}