bimba-cli 0.6.1 → 0.7.1

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.1",
   "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,121 @@ function findHtml(flagHtml) {
 	return candidates.find(p => existsSync(p)) || './index.html';
 }
 
+// ─── Node modules resolution ─────────────────────────────────────────────────
+//
+// Packages with conditional exports (e.g. highlight.js) map subpaths like
+// "./lib/languages/*" to different files for `require` vs `import`. The browser
+// import map uses a simple trailing-slash prefix mapping, so
+// `highlight.js/lib/languages/javascript` → `/node_modules/highlight.js/lib/languages/javascript`.
+// But that's the CJS file — the browser needs the ESM one under `es/`.
+//
+// We solve this at the HTTP level: when serving a JS file from node_modules,
+// check if the file is CJS and the package has an ESM alternative via its
+// `exports` field. If so, rewrite to the ESM path.
+
+const _pkgJsonCache = new Map() // pkg root dir → parsed package.json
+
+async function readPkgJson(pkgDir) {
+	const cached = _pkgJsonCache.get(pkgDir)
+	if (cached) return cached
+	try {
+		const json = JSON.parse(await Bun.file(path.join(pkgDir, 'package.json')).text())
+		_pkgJsonCache.set(pkgDir, json)
+		return json
+	} catch(_) {
+		return null
+	}
+}
+
+// Given a request path inside node_modules (e.g. "node_modules/highlight.js/lib/languages/javascript"),
+// try to resolve via conditional exports to find the ESM version.
+// Returns the rewritten filesystem path, or null if no rewrite needed.
+async function resolveNodeModuleESM(filepath) {
+	// Only rewrite JS files (or extensionless → .js)
+	const parts = filepath.split('/')
+	const nmIdx = parts.indexOf('node_modules')
+	if (nmIdx === -1) return null
+
+	const pkgName = parts[nmIdx + 1].startsWith('@')
+		? parts[nmIdx + 1] + '/' + parts[nmIdx + 2]
+		: parts[nmIdx + 1]
+	const pkgDir = parts.slice(0, nmIdx + 1 + (pkgName.includes('/') ? 2 : 1)).join('/')
+	const depPkg = await readPkgJson(pkgDir)
+	if (!depPkg?.exports || typeof depPkg.exports === 'string') return null
+
+	// Build the subpath relative to pkg root: "./lib/languages/javascript"
+	const pkgParts = pkgName.includes('/') ? 2 : 1
+	const subParts = parts.slice(nmIdx + 1 + pkgParts)
+	const subpath = './' + subParts.join('/')
+
+	const exp = depPkg.exports
+
+	// Try exact match first: exports["./lib/core"]
+	if (exp[subpath]) {
+		const target = exp[subpath]
+		const esm = typeof target === 'string' ? target : (target?.import || target?.default)
+		if (esm) {
+			const resolved = path.join(pkgDir, esm)
+			if (existsSync(resolved)) return resolved
+		}
+	}
+
+	// Try with .js extension: exports["./lib/core"] for request "./lib/core"
+	const subpathJs = subpath + '.js'
+	if (exp[subpathJs]) {
+		const target = exp[subpathJs]
+		const esm = typeof target === 'string' ? target : (target?.import || target?.default)
+		if (esm) {
+			const resolved = path.join(pkgDir, esm)
+			if (existsSync(resolved)) return resolved
+		}
+	}
+
+	// Try wildcard match: exports["./lib/languages/*"]
+	for (const [pattern, target] of Object.entries(exp)) {
+		if (!pattern.includes('*')) continue
+		const prefix = pattern.slice(0, pattern.indexOf('*'))
+		const suffix = pattern.slice(pattern.indexOf('*') + 1)
+
+		// Check both with and without .js extension
+		for (const sp of [subpath, subpathJs]) {
+			if (!sp.startsWith(prefix)) continue
+			if (suffix && !sp.endsWith(suffix)) continue
+			const stem = sp.slice(prefix.length, suffix ? -suffix.length || undefined : undefined)
+
+			const esm = typeof target === 'string' ? target : (target?.import || target?.default)
+			if (!esm || !esm.includes('*')) continue
+
+			const resolved = path.join(pkgDir, esm.replace('*', stem))
+			if (existsSync(resolved)) return resolved
+		}
+	}
+
+	return null
+}
+
+// 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;
+}
+
 // 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 +536,23 @@ 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.startsWith('http')) {
+					// Local package — serve from node_modules
+					imports[name] = `/node_modules/${name}/${entry}`;
+					// Always add trailing-slash mapping for deep/subpath imports
+					// (e.g. highlight.js/lib/languages/javascript). The browser
+					// doesn't enforce Node's `exports` restrictions, it just needs
+					// a URL prefix to resolve bare specifiers like "pkg/sub/path".
+					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}/`;
+				}
 			} catch(_) {
 				imports[name] = `https://esm.sh/${name}`;
+				imports[name + '/'] = `https://esm.sh/${name}/`;
 			}
 		}
 	} catch(_) { /* no package.json */ }
@@ -624,14 +748,57 @@ 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' } })
+				}
+			}
+
+			// node_modules: resolve conditional exports (CJS → ESM) before serving.
+			// e.g. highlight.js/lib/languages/javascript → es/languages/javascript.js
+			if (pathname.startsWith('/node_modules/')) {
+				const filepath = '.' + pathname
+				const esmPath = await resolveNodeModuleESM(filepath)
+				if (esmPath) {
+					const file = Bun.file(esmPath)
+					if (await file.exists()) return new Response(file, {
+						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 node_modules, ESM resolution above already handles extensionless
+				// paths via wildcard exports matching (tries subpath + '.js').
+				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()