bimba-cli 0.7.11 → 0.7.13

package/README.md

@@ -37,9 +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 (supports `exports`, `module`, `browser`, and `main` fields)
+- Rewrites bare package imports in served JS modules to `__bimba_vendor__/*` URLs
 - 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
+- npm packages are bundled on demand by Bun (`target: "browser"`), so Bun owns `exports`, `browser`, CommonJS interop, and nested dependency resolution
 - Injects an HMR client that swaps component prototypes without a full page reload
 
 **HMR internals:**
@@ -58,7 +58,7 @@ Duplicate root elements (caused by `imba.mount()` running again on re-import) ar
 
 For a deep dive into how Imba compiles tags, how the render cache works, and how bimba hooks into it — see [INTERNALS.md](INTERNALS.md).
 
-**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 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 remove existing import maps, since package imports are rewritten in served modules instead:
 
 ```html
 <script type='module' src="./js/index.js" data-entrypoint></script>
@@ -72,9 +72,9 @@ For a deep dive into how Imba compiles tags, how the render cache works, and how
 
 `--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.). Extensionless imports (common in `node_modules`) are resolved by trying `.js` and `.mjs` extensions automatically.
+Static files are resolved relative to the HTML file's directory first, then from the project root (for `node_modules`, `src`, etc.). Extensionless imports are resolved by trying `.imba`, `.js`, and `.mjs` extensions automatically.
 
-**npm package resolution:** The dev server maps package imports to `__bimba_vendor__/*` URLs and bundles those modules on demand with Bun (`target: "browser"`). Imba source files still compile separately for HMR, while Bun owns dependency resolution, `exports`, `browser` fields, nested `node_modules`, and CommonJS interop.
+**npm package resolution:** The dev server scans each served JS module and rewrites bare imports such as `imba/runtime`, `@scope/pkg`, and `pkg/subpath` to `__bimba_vendor__/*` URLs. Those vendor URLs are bundled on demand with Bun (`target: "browser"`). Imba source files still compile separately for HMR, while Bun owns dependency resolution, `exports`, `browser` fields, nested `node_modules`, and CommonJS interop.
 
 ---
 

package/package.json

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

package/serve.js

@@ -1,6 +1,6 @@
 import { serve as bunServe } from 'bun'
 import * as compiler from 'imba/compiler'
-import { watch, existsSync, statSync } from 'fs'
+import { mkdirSync, watch, existsSync, statSync, writeFileSync } from 'fs'
 import path from 'path'
 import { theme } from './utils.js'
 import { printerr } from './plugin.js'
@@ -255,6 +255,7 @@ 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
+const _importScanner = new Bun.Transpiler({ loader: 'js' })
 
 // Imba compiles tag render-cache slots as anonymous local Symbols at module top
 // level: `var $4 = Symbol(), $11 = Symbol(), ...; let c$0 = Symbol();`. Each
@@ -299,6 +300,40 @@ function _normalizeResult(result, extras) {
 	}
 }
 
+function isBareSpecifier(specifier) {
+	if (!specifier) return false
+	if (specifier.startsWith('.') || specifier.startsWith('/')) return false
+	if (/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(specifier)) return false
+	if (specifier.startsWith('#')) return false
+	return true
+}
+
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function rewriteBareImports(js) {
+	let imports = []
+	try {
+		imports = _importScanner.scanImports(js)
+	} catch (_) {
+		return js
+	}
+
+	for (const specifier of new Set(imports.map(item => item.path).filter(isBareSpecifier))) {
+		const target = vendorUrl(specifier)
+		const escaped = escapeRegExp(specifier)
+
+		const staticPattern = new RegExp(`((?:import|export)\\s+(?:[^'"]*?\\s+from\\s*)?)(['"])${escaped}\\2`, 'g')
+		js = js.replace(staticPattern, (_match, prefix, quote) => `${prefix}${quote}${target}${quote}`)
+
+		const dynamicPattern = new RegExp(`(\\bimport\\s*\\(\\s*)(['"])${escaped}\\2`, 'g')
+		js = js.replace(dynamicPattern, (_match, prefix, quote) => `${prefix}${quote}${target}${quote}`)
+	}
+
+	return js
+}
+
 async function compileFile(filepath) {
 	const abs = path.resolve(filepath)
 	const file = Bun.file(filepath)
@@ -318,7 +353,7 @@ async function compileFile(filepath) {
 	const errors = result.errors || []
 	if (!errors.length && result.js) {
 		const { js, slotCount } = stabilizeSymbols(result.js, abs)
-		result.js = js
+		result.js = rewriteBareImports(js)
 		const prev = _prevSlots.get(abs)
 		result.slots = (prev === undefined || prev === slotCount) ? 'stable' : 'shifted'
 		_prevSlots.set(abs, slotCount)
@@ -345,11 +380,7 @@ function findHtml(flagHtml) {
 const _vendorCache = new Map() // entrypoint → { mtime, code }
 
 function vendorUrl(specifier) {
-	return '/__bimba_vendor__/' + specifier
-}
-
-function vendorPrefixUrl(specifier) {
-	return vendorUrl(specifier) + '/'
+	return '/__bimba_vendor__/' + encodeURIComponent(specifier)
 }
 
 function resolveFileCandidate(filepath) {
@@ -385,6 +416,25 @@ function vendorSpecifierFromPath(pathname) {
 	return specifier || null
 }
 
+function vendorEntrypoint(entrypoint) {
+	if (path.isAbsolute(entrypoint)) return entrypoint
+
+	const dir = path.join(process.cwd(), 'node_modules', '.cache', 'bimba', 'vendor-entry')
+	mkdirSync(dir, { recursive: true })
+
+	const name = encodeURIComponent(entrypoint).replace(/%/g, '_')
+	const file = path.join(dir, name + '.js')
+	const specifier = JSON.stringify(entrypoint)
+	const code = [
+		`export * from ${specifier};`,
+		`import * as mod from ${specifier};`,
+		`export default (mod.default ?? mod);`,
+		'',
+	].join('\n')
+	writeFileSync(file, code)
+	return file
+}
+
 async function bundleVendor(entrypoint) {
 	try {
 		const stat = path.isAbsolute(entrypoint) && existsSync(entrypoint) ? statSync(entrypoint) : null
@@ -392,8 +442,9 @@ async function bundleVendor(entrypoint) {
 		const cached = _vendorCache.get(entrypoint)
 		if (cached && cached.mtime === mtime) return cached
 
+		const buildEntrypoint = vendorEntrypoint(entrypoint)
 		const result = await Bun.build({
-			entrypoints: [entrypoint],
+			entrypoints: [buildEntrypoint],
 			target: 'browser',
 			format: 'esm',
 			write: false,
@@ -433,86 +484,22 @@ async function bundleVendor(entrypoint) {
 	}
 }
 
-async function buildGeneratedImportMap() {
-	const imports = {}
-
-	try {
-		const pkg = JSON.parse(await Bun.file('./package.json').text())
-		for (const field of ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']) {
-			for (const name of Object.keys(pkg[field] || {})) {
-				imports[name] ||= vendorUrl(name)
-				imports[name + '/'] ||= vendorPrefixUrl(name)
-			}
-		}
-	} catch(_) { /* no package.json */ }
-
-	imports['imba'] ||= vendorUrl('imba')
-	imports['imba/'] ||= vendorPrefixUrl('imba')
-	imports['imba/runtime'] ||= vendorUrl('imba/runtime')
-
-	return { imports }
-}
-
-function extractUserImportMap(html) {
-	const merged = { imports: {}, scopes: {} }
-
-	html = html.replace(/<script\s+type=["']importmap["'][^>]*>([\s\S]*?)<\/script>/gi, (_match, json) => {
-		try {
-			const parsed = JSON.parse(json)
-			Object.assign(merged.imports, parsed.imports || {})
-			for (const [scope, specifiers] of Object.entries(parsed.scopes || {})) {
-				merged.scopes[scope] = { ...(merged.scopes[scope] || {}), ...specifiers }
-			}
-		} catch (_) {
-			// ignore invalid import maps and keep serving the page
-		}
-		return ''
-	})
-
-	if (!Object.keys(merged.scopes).length) delete merged.scopes
-	return { html, importMap: merged }
-}
-
-function mergeImportMaps(generated, user) {
-	const merged = {
-		imports: { ...(generated.imports || {}), ...(user.imports || {}) },
-	}
-
-	const scopeKeys = new Set([
-		...Object.keys(generated.scopes || {}),
-		...Object.keys(user.scopes || {}),
-	])
-
-	if (scopeKeys.size) {
-		merged.scopes = {}
-		for (const key of scopeKeys) {
-			merged.scopes[key] = {
-				...((generated.scopes || {})[key] || {}),
-				...((user.scopes || {})[key] || {}),
-			}
-		}
-	}
-
-	return merged
-}
-
-function renderImportMapTag(importMap) {
-	return `\t\t<script type="importmap">\n\t\t\t${JSON.stringify(importMap, null, '\t\t\t\t')}\n\t\t</script>`
+async function serveJavaScriptFile(filepath) {
+	const js = rewriteBareImports(await Bun.file(filepath).text())
+	return new Response(js, { headers: { 'Content-Type': 'application/javascript' } })
 }
 
 // Rewrite production HTML for the dev server:
-// strips existing importmap + data-entrypoint script, injects merged importmap +
+// strips existing importmap + data-entrypoint script, then injects the Imba
 // entrypoint module + HMR client before </head>.
-function transformHtml(html, entrypoint, generatedImportMap) {
-	const extracted = extractUserImportMap(html)
-	html = extracted.html
+function transformHtml(html, entrypoint) {
+	html = html.replace(/<script\s+type=["']importmap["'][^>]*>[\s\S]*?<\/script>/gi, '')
 	html = html.replace(/<script([^>]*)\bdata-entrypoint\b([^>]*)><\/script>/gi, '')
 
 	const entryUrl = '/' + entrypoint.replace(/^\.\//, '').replaceAll('\\', '/')
-	const importMapTag = renderImportMapTag(mergeImportMaps(generatedImportMap, extracted.importMap))
 
 	html = html.replace('</head>',
-		`${importMapTag}\n\t\t<script type='module' src='${entryUrl}'></script>\n${hmrClient}\n\t</head>`
+		`\t\t<script type='module' src='${entryUrl}'></script>\n${hmrClient}\n\t</head>`
 	)
 	return html
 }
@@ -525,7 +512,6 @@ export function serve(entrypoint, flags) {
 	const htmlDir  = path.dirname(htmlPath)
 	const srcDir   = path.dirname(entrypoint)
 	const sockets  = new Set()
-	let generatedImportMap = null
 
 	// ── Status line (prints current compile result, fades out on success) ──────
 
@@ -659,8 +645,7 @@ export function serve(entrypoint, flags) {
 			if (pathname === '/' || pathname.endsWith('.html')) {
 				const htmlFile = pathname === '/' ? htmlPath : '.' + pathname
 				let html = await Bun.file(htmlFile).text()
-				if (!generatedImportMap) generatedImportMap = await buildGeneratedImportMap()
-				return new Response(transformHtml(html, entrypoint, generatedImportMap), {
+				return new Response(transformHtml(html, entrypoint), {
 					headers: { 'Content-Type': 'text/html' },
 				})
 			}
@@ -693,8 +678,13 @@ export function serve(entrypoint, flags) {
 			// 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 cssPath = resolveFileCandidate(path.join(htmlDir, pathname)) || resolveFileCandidate('.' + pathname)
+				const cssFile = cssPath ? Bun.file(cssPath) : null
+				if (cssFile && await cssFile.exists()) {
+					if (req.headers.get('sec-fetch-dest') === 'style') {
+						return new Response(cssFile, { headers: { 'Content-Type': 'text/css' } })
+					}
+
 					const css = await cssFile.text()
 					const id = JSON.stringify(pathname)
 					const js = [
@@ -707,6 +697,11 @@ export function serve(entrypoint, flags) {
 				}
 			}
 
+			if (!pathname.startsWith('/node_modules/') && (pathname.endsWith('.js') || pathname.endsWith('.mjs'))) {
+				const jsFile = resolveFileCandidate(path.join(htmlDir, pathname)) || resolveFileCandidate('.' + pathname)
+				if (jsFile) return serveJavaScriptFile(jsFile)
+			}
+
 			// Direct node_modules URLs (from user import maps or explicit imports)
 			// are bundled through Bun too, so browser/cjs/exports handling stays
 			// in one place.
@@ -743,18 +738,15 @@ export function serve(entrypoint, flags) {
 					if (!out.errors?.length) return new Response(out.js, { headers: { 'Content-Type': 'application/javascript' } })
 				}
 				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' },
-					})
+					const withExt = '.' + pathname + ext
+					if (existsSync(withExt)) return serveJavaScriptFile(withExt)
 				}
 			}
 
 			// SPA fallback for extension-less paths
 				if (!lastSegment.includes('.')) {
 					let html = await Bun.file(htmlPath).text()
-					if (!generatedImportMap) generatedImportMap = await buildGeneratedImportMap()
-					return new Response(transformHtml(html, entrypoint, generatedImportMap), {
+					return new Response(transformHtml(html, entrypoint), {
 						headers: { 'Content-Type': 'text/html' },
 					})
 				}