bimba-cli 0.6.1 → 0.7.0

package/README.md

@@ -37,7 +37,9 @@ bunx bimba src/index.imba --serve --port 5200 --html public/index.html
 **How it works:**
 - Serves your HTML file and compiles `.imba` files on demand (no bundling step)
 - Watches `src/` for changes and pushes updates over WebSocket
-- Injects an importmap built from your `package.json` dependencies
+- Injects an importmap built from your `package.json` dependencies (supports `exports`, `module`, `browser`, and `main` fields)
+- CSS files imported from JS (e.g. `import 'some-lib/styles.css'`) are automatically wrapped as JS modules that inject `<style>` tags
+- npm packages with ESM entry points are served from `node_modules` locally — no esm.sh proxy needed
 - Injects an HMR client that swaps component prototypes without a full page reload
 
 **HMR internals:**
@@ -48,10 +50,12 @@ Since Imba custom elements can't be registered twice (`customElements.define` th
 
 After patching, bimba clears each element's Imba render cache (anonymous `Symbol` keys pointing to DOM nodes) and sets `innerHTML = ''`, so the new render method starts from a clean slate. Then `imba.commit()` triggers a re-render of all mounted components.
 
-CSS is handled automatically: Imba's runtime calls `imba_styles.register()` during module execution, which updates the `<style>` tag in place — no extra DOM work needed.
+CSS is handled automatically: Imba's runtime calls `imba_styles.register()` during module execution, which updates the `<style>` tag in place — no extra DOM work needed. CSS files from npm packages (e.g. `import 'pkg/styles.css'`) are served as JS modules that inject and update `<style>` tags.
 
 Duplicate root elements (caused by `imba.mount()` running again on re-import) are removed by a dedup pass over `document.body.children` before any other HMR logic runs.
 
+**Smart HMR:** bimba detects whether a change affects the template structure (adding/removing elements) or just CSS/logic. CSS-only and logic-only changes patch prototypes in place without wiping innerHTML — preserving input focus, scroll position, and open popups. Template-structural changes do a full wipe-and-rerender to ensure correctness.
+
 **HTML setup:** add a `data-entrypoint` attribute to the script tag that loads your bundle. The dev server will replace it with your `.imba` entrypoint and inject the importmap above it:
 
 ```html
@@ -66,7 +70,9 @@ Duplicate root elements (caused by `imba.mount()` running again on re-import) ar
 
 `--html <path>` — path to your HTML file (auto-detected from `./index.html`, `./public/index.html`, `./src/index.html` if omitted)
 
-Static files are resolved relative to the HTML file's directory first, then from the project root (for `node_modules`, `src`, etc.).
+Static files are resolved relative to the HTML file's directory first, then from the project root (for `node_modules`, `src`, etc.). Extensionless imports (common in `node_modules`) are resolved by trying `.js` and `.mjs` extensions automatically.
+
+**npm package resolution:** The import map is built by reading each dependency's `package.json`. The resolution order is: `exports["."].import` → `exports["."].default` → `module` → `browser` → `main`. Packages with subpath exports (e.g. `"./styles.css"`) get individual import map entries. CJS-only packages (no ESM entry) are proxied through esm.sh.
 
 ---
 

package/package.json

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

package/serve.js

@@ -28,7 +28,6 @@ const hmrClient = `
 	const _newClasses = new Map(); // tagName → latest class from HMR import
 	const _oldNs = new Map();  // tagName → previous _ns_ (saved before _patchClass wipes it)
 	let _collector = null;      // when set, captures tag names defined during one HMR import
-	let _stableSlots = false;   // when true, _patchClass skips Symbol-keyed props (CSS-only HMR)
 
 	customElements.define = function(name, cls, opts) {
 		if (_collector) _collector.push(name);
@@ -42,9 +41,8 @@ const hmrClient = `
 			if (target) {
 				// Save old _ns_ before _patchClass overwrites prototype descriptors
 				if (target.prototype._ns_) _oldNs.set(name, target.prototype._ns_);
-				// When CSS-only (stable slots), skip patching render/methods —
-				// new render() has new Symbol closures that would cause duplicate DOM.
-				if (!_stableSlots) _patchClass(target, cls);
+				// Always patch: even CSS-only changes may update methods.
+				_patchClass(target, cls);
 			}
 		}
 	};
@@ -109,12 +107,10 @@ const hmrClient = `
 		const collected = [];
 		const prev = _collector;
 		_collector = collected;
-		_stableSlots = (slots === 'stable');
 		try {
 			await import('/' + file + '?t=' + Date.now());
 		} finally {
 			_collector = prev;
-			_stableSlots = false;
 		}
 
 		// Sync _ns_ (CSS namespace) from the new classes. imba_defineTag sets
@@ -141,8 +137,10 @@ const hmrClient = `
 		}
 
 		// Destructive HMR: wipe inner DOM and re-render each collected tag.
-		// Skip when slots === 'stable' (CSS-only change) — no template diff,
-		// so wiping innerHTML would destroy DOM state (inputs, focus) for nothing.
+		// Skip when slots === 'stable' — template structure unchanged (CSS-only
+		// or logic-only edit that didn't add/remove elements), so wiping innerHTML
+		// would destroy DOM state (inputs, focus, popups) for nothing.
+		// _patchClass already ran above, so methods are up-to-date either way.
 		if (slots !== 'stable') {
 			for (const tag of collected) {
 				const els = document.querySelectorAll(tag);
@@ -410,6 +408,35 @@ function findHtml(flagHtml) {
 	return candidates.find(p => existsSync(p)) || './index.html';
 }
 
+// Resolve the ESM entry point for an npm package.
+// Priority: exports["."].import → exports["."].default → module → main
+function resolveEntry(depPkg) {
+	const exp = depPkg.exports;
+	if (exp) {
+		// exports: "./index.js" (string shorthand)
+		if (typeof exp === 'string') return exp;
+		// exports: { ".": { "import": "...", "default": "..." } }
+		const dot = exp['.'];
+		if (dot) {
+			if (typeof dot === 'string') return dot;
+			if (dot.import) return dot.import;
+			if (dot.default) return dot.default;
+		}
+		// exports: { "import": "...", "default": "..." } (no "." wrapper)
+		if (exp.import) return exp.import;
+		if (exp.default) return exp.default;
+	}
+	// Fallback to legacy fields
+	return depPkg.module || depPkg.browser || depPkg.main;
+}
+
+// Check if a package has subpath exports (exports with keys other than ".")
+function hasSubpathExports(depPkg) {
+	const exp = depPkg.exports;
+	if (!exp || typeof exp === 'string') return false;
+	return Object.keys(exp).some(k => k !== '.' && k.startsWith('./'));
+}
+
 // Build an ES import map from package.json dependencies.
 // Packages with an .imba entry point are served locally; others via esm.sh.
 async function buildImportMap() {
@@ -423,12 +450,42 @@ async function buildImportMap() {
 			if (name === 'imba') continue;
 			try {
 				const depPkg = JSON.parse(await Bun.file(`./node_modules/${name}/package.json`).text());
-				const entry = depPkg.module || depPkg.main;
-				imports[name] = (entry && entry.endsWith('.imba'))
-					? `/node_modules/${name}/${entry}`
-					: `https://esm.sh/${name}`;
+				const entry = resolveEntry(depPkg);
+				if (entry && entry.endsWith('.imba')) {
+					// Imba packages — always local
+					imports[name] = `/node_modules/${name}/${entry}`;
+					imports[name + '/'] = `/node_modules/${name}/`;
+				} else if (entry && !entry.startsWith('http')) {
+					// Local ESM/CJS package — serve from node_modules
+					imports[name] = `/node_modules/${name}/${entry}`;
+					// Trailing-slash mapping for deep imports (unless package
+					// uses subpath exports — those need explicit mappings)
+					if (!hasSubpathExports(depPkg)) {
+						imports[name + '/'] = `/node_modules/${name}/`;
+					}
+				} else {
+					// No resolvable entry — use esm.sh to auto-wrap
+					imports[name] = `https://esm.sh/${name}`;
+					imports[name + '/'] = `https://esm.sh/${name}/`;
+				}
+
+				// Add subpath export mappings (e.g. "pkg/styles.css" → local path)
+				if (hasSubpathExports(depPkg)) {
+					const exp = depPkg.exports;
+					for (const [subpath, target] of Object.entries(exp)) {
+						if (subpath === '.') continue;
+						if (!subpath.startsWith('./')) continue;
+						const importKey = name + '/' + subpath.slice(2);
+						const resolved = typeof target === 'string' ? target
+							: (target?.import || target?.default);
+						if (resolved) {
+							imports[importKey] = `/node_modules/${name}/${resolved}`;
+						}
+					}
+				}
 			} catch(_) {
 				imports[name] = `https://esm.sh/${name}`;
+				imports[name + '/'] = `https://esm.sh/${name}/`;
 			}
 		}
 	} catch(_) { /* no package.json */ }
@@ -624,14 +681,42 @@ export function serve(entrypoint, flags) {
 				}
 			}
 
+			// CSS files imported from JS: wrap as a JS module that injects a <style> tag.
+			// Without this, `import './styles.css'` inside an ESM package fails because
+			// the browser expects a JS module response, not raw CSS.
+			if (pathname.endsWith('.css')) {
+				const cssFile = Bun.file('.' + pathname)
+				if (await cssFile.exists()) {
+					const css = await cssFile.text()
+					const id = JSON.stringify(pathname)
+					const js = [
+						`const id = ${id};`,
+						`let el = document.querySelector('style[data-bimba-css=' + JSON.stringify(id) + ']');`,
+						`if (!el) { el = document.createElement('style'); el.setAttribute('data-bimba-css', id); document.head.appendChild(el); }`,
+						`el.textContent = ${JSON.stringify(css)};`,
+					].join('\n')
+					return new Response(js, { headers: { 'Content-Type': 'application/javascript' } })
+				}
+			}
+
 			// Static files: check htmlDir first (for assets relative to HTML), then root
 			const inHtmlDir = Bun.file(path.join(htmlDir, pathname))
 			if (await inHtmlDir.exists()) return new Response(inHtmlDir)
 			const inRoot = Bun.file('.' + pathname)
 			if (await inRoot.exists()) return new Response(inRoot)
 
-			// SPA fallback for extension-less paths
+			// Try .js / .mjs extension for extensionless paths (e.g. node_modules imports)
 			const lastSegment = pathname.split('/').pop()
+			if (!lastSegment.includes('.')) {
+				for (const ext of ['.js', '.mjs']) {
+					const withExt = Bun.file('.' + pathname + ext)
+					if (await withExt.exists()) return new Response(withExt, {
+						headers: { 'Content-Type': 'application/javascript' },
+					})
+				}
+			}
+
+			// SPA fallback for extension-less paths
 			if (!lastSegment.includes('.')) {
 				let html = await Bun.file(htmlPath).text()
 				if (!importMapTag) importMapTag = await buildImportMap()