bertui 1.2.1 → 1.2.3

package/src/build/compiler/file-transpiler.js

@@ -1,131 +1,60 @@
-// bertui/src/build/compiler/file-transpiler.js - FORCE PRODUCTION JSX
+// bertui/src/build/compiler/file-transpiler.js
 import { join, relative, dirname, extname } from 'path';
-import { readdirSync, statSync, mkdirSync, writeFileSync } from 'fs';
+import { readdirSync, statSync, mkdirSync, writeFileSync, existsSync } from 'fs';
 import logger from '../../logger/logger.js';
 import { replaceEnvInCode } from '../../utils/env.js';
-import { transform } from 'lightningcss';
-
-// ============================================
-// CSS MODULES
-// ============================================
-
-function hashClassName(filename, className) {
-  const str = filename + className;
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash |= 0;
-  }
-  return Math.abs(hash).toString(36).slice(0, 5);
-}
-
-function scopeCSSModule(cssText, filename) {
-  const classNames = new Set();
-  const classRegex = /\.([a-zA-Z_][a-zA-Z0-9_-]*)\s*[{,\s:]/g;
-  let match;
-  while ((match = classRegex.exec(cssText)) !== null) {
-    classNames.add(match[1]);
-  }
-  const mapping = {};
-  for (const cls of classNames) {
-    mapping[cls] = `${cls}_${hashClassName(filename, cls)}`;
-  }
-  let scopedCSS = cssText;
-  for (const [original, scoped] of Object.entries(mapping)) {
-    scopedCSS = scopedCSS.replace(
-      new RegExp(`\\.${original}(?=[\\s{,:\\[#.>+~)\\]])`, 'g'),
-      `.${scoped}`
-    );
-  }
-  return { mapping, scopedCSS };
-}
-
-async function compileCSSModule(srcPath, rootBuildDir) {
-  const filename = srcPath.split('/').pop();
-  const cssText = await Bun.file(srcPath).text();
-  const { mapping, scopedCSS } = scopeCSSModule(cssText, filename);
+import { buildAliasMap, rewriteAliasImports } from '../../utils/importhow.js';
+
+/**
+ * Compile src/ + alias dirs into buildDir.
+ */
+export async function compileBuildDirectory(srcDir, buildDir, root, envVars, importhow = {}) {
+  writeFileSync(
+    join(buildDir, 'bunfig.toml'),
+    `[build]\njsx = "react"\njsxFactory = "React.createElement"\njsxFragment = "React.Fragment"`.trim()
+  );
+  logger.info('Created bunfig.toml for classic JSX');
 
-  let finalCSS = scopedCSS;
-  try {
-    const { code } = transform({
-      filename,
-      code: Buffer.from(scopedCSS),
-      minify: false,
-      drafts: { nesting: true },
-      targets: { chrome: 90 << 16 }
-    });
-    finalCSS = code.toString();
-  } catch (e) {
-    logger.warn(`LightningCSS failed for ${filename}: ${e.message}`);
-  }
+  // Build mode: aliases resolve to buildDir/<alias> so relative paths inside dist/ are correct
+  const aliasMap = buildAliasMap(importhow, root, buildDir);
 
-  // JS mapping → .bertuibuild/styles/home.module.css.js (for JS imports)
-  const stylesDir = join(rootBuildDir, 'styles');
-  mkdirSync(stylesDir, { recursive: true });
-  const jsContent = `// CSS Module: ${filename} — auto-generated by BertUI\nconst styles = ${JSON.stringify(mapping, null, 2)};\nexport default styles;\n`;
-  writeFileSync(join(stylesDir, filename + '.js'), jsContent);
+  // Compile src/
+  await _compileDir(srcDir, buildDir, root, envVars, aliasMap);
 
-  // Scoped CSS → .bertuibuild/styles-staged/home.module.css (for css-builder.js to pick up)
-  const stagingDir = join(rootBuildDir, 'styles-staged');
-  mkdirSync(stagingDir, { recursive: true });
-  writeFileSync(join(stagingDir, filename), finalCSS);
+  // Compile each alias source dir → buildDir/<alias>
+  for (const [alias, relPath] of Object.entries(importhow)) {
+    const absAliasDir = join(root, relPath);
 
-  logger.debug(`CSS Module: ${filename} → ${Object.keys(mapping).length} classes scoped`);
-}
+    if (!existsSync(absAliasDir)) {
+      logger.warn(`⚠️  importhow alias "${alias}" points to missing dir: ${absAliasDir}`);
+      continue;
+    }
 
-function transformCSSModuleImports(code, outPath, rootBuildDir) {
-  const moduleImportRegex = /import\s+(\w+)\s+from\s+['"]([^'"]*\.module\.css)['"]/g;
-  const outFileDir = dirname(outPath);
-  const stylesDir = join(rootBuildDir, 'styles');
-
-  code = code.replace(moduleImportRegex, (match, varName, importPath) => {
-    const filename = importPath.split('/').pop();
-    const jsFile = join(stylesDir, filename + '.js');
-    let rel = relative(outFileDir, jsFile).replace(/\\/g, '/');
-    if (!rel.startsWith('.')) rel = './' + rel;
-    return `import ${varName} from '${rel}'`;
-  });
+    const aliasOutDir = join(buildDir, alias);
+    mkdirSync(aliasOutDir, { recursive: true });
 
-  return code;
+    logger.info(`📦 Compiling alias dir [${alias}] → ${aliasOutDir}`);
+    await _compileDir(absAliasDir, aliasOutDir, root, envVars, aliasMap);
+  }
 }
 
-// ============================================
-// MAIN COMPILER
-// ============================================
-
-export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
-  const bunfigContent = `
-[build]
-jsx = "react"
-jsxFactory = "React.createElement"
-jsxFragment = "React.Fragment"
-`.trim();
-
-  writeFileSync(join(buildDir, 'bunfig.toml'), bunfigContent);
-  logger.info('Created bunfig.toml for classic JSX');
+// ─────────────────────────────────────────────────────────────────────────────
 
+async function _compileDir(srcDir, buildDir, root, envVars, aliasMap) {
   const files = readdirSync(srcDir);
   const filesToCompile = [];
-  const rootBuildDir = join(root, '.bertuibuild');
 
   for (const file of files) {
     const srcPath = join(srcDir, file);
-    const stat = statSync(srcPath);
+    const stat    = statSync(srcPath);
 
     if (stat.isDirectory()) {
       const subBuildDir = join(buildDir, file);
       mkdirSync(subBuildDir, { recursive: true });
-      await compileBuildDirectory(srcPath, subBuildDir, root, envVars);
+      await _compileDir(srcPath, subBuildDir, root, envVars, aliasMap);
     } else {
       const ext = extname(file);
-
-      if (file.endsWith('.module.css')) {
-        await compileCSSModule(srcPath, rootBuildDir);
-        continue;
-      }
-
       if (ext === '.css') continue;
-
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'tsx' });
       } else if (ext === '.js') {
@@ -136,23 +65,21 @@ jsxFragment = "React.Fragment"
 
   if (filesToCompile.length === 0) return;
 
-  logger.info(`📦 Compiling ${filesToCompile.length} files...`);
+  logger.info(`📦 Compiling ${filesToCompile.length} files in ${srcDir.split('/').slice(-2).join('/')}...`);
 
   for (let i = 0; i < filesToCompile.length; i++) {
     const file = filesToCompile[i];
-
     try {
       if (file.type === 'tsx') {
-        await compileBuildFile(file.path, file.dir, file.name, root, envVars, rootBuildDir);
+        await _compileTSXFile(file.path, file.dir, file.name, root, envVars, buildDir, aliasMap);
       } else {
-        await compileJSFile(file.path, file.dir, file.name, root, envVars, rootBuildDir);
+        await _compileJSFile(file.path, file.dir, file.name, root, envVars, aliasMap);
       }
 
       if ((i + 1) % 10 === 0 || i === filesToCompile.length - 1) {
-        const percent = (((i + 1) / filesToCompile.length) * 100).toFixed(0);
-        logger.info(`   Progress: ${i + 1}/${filesToCompile.length} (${percent}%)`);
+        const pct = (((i + 1) / filesToCompile.length) * 100).toFixed(0);
+        logger.info(`   Progress: ${i + 1}/${filesToCompile.length} (${pct}%)`);
       }
-
     } catch (error) {
       logger.error(`Failed to compile ${file.name}: ${error.message}`);
     }
@@ -161,19 +88,32 @@ jsxFragment = "React.Fragment"
   logger.success(`✅ Compiled ${filesToCompile.length} files`);
 }
 
-async function compileBuildFile(srcPath, buildDir, filename, root, envVars, rootBuildDir) {
+// ─────────────────────────────────────────────────────────────────────────────
+// _rewriteNodeModuleImports — intentionally a no-op.
+//
+// Previously this rewrote bare specifiers like 'react' → '/node_modules/react/index.js'
+// which caused "Could not resolve" errors during Bun.build because:
+//   1. 'react' is marked `external` in Bun.build and expected as a bare specifier.
+//   2. Other npm packages are better handled by Bun.build natively (tree-shaken + minified).
+//
+// Leaving bare specifiers untouched lets Bun.build do the right thing for both cases.
+// ─────────────────────────────────────────────────────────────────────────────
+function _rewriteNodeModuleImports(code) {
+  return code;
+}
+
+async function _compileTSXFile(srcPath, buildDir, filename, root, envVars, configDir, aliasMap) {
   const ext = extname(filename);
 
   try {
     let code = await Bun.file(srcPath).text();
+    code = _removeCSSImports(code);
     code = replaceEnvInCode(code, envVars);
 
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
-    const outPath = join(buildDir, outFilename);
+    const outPath     = join(buildDir, outFilename);
 
-    code = transformCSSModuleImports(code, outPath, rootBuildDir);
-    code = removePlainCSSImports(code);
-    code = fixBuildImports(code, srcPath, outPath, root);
+    code = _fixBuildImports(code, srcPath, outPath, root);
 
     if (!code.includes('import React')) {
       code = `import React from 'react';\n${code}`;
@@ -196,15 +136,20 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars, root
     let compiled = await transpiler.transform(code);
 
     if (compiled.includes('jsxDEV')) {
-      logger.warn(`⚠️  Dev JSX detected in ${filename}, fixing...`);
+      logger.warn(`⚠️  Dev JSX in ${filename}, fixing...`);
       compiled = compiled.replace(/jsxDEV/g, 'jsx');
     }
 
-    compiled = fixRelativeImports(compiled);
-    await Bun.write(outPath, compiled);
+    compiled = _fixRelativeImports(compiled);
 
-    code = null;
-    compiled = null;
+    // ✅ Alias rewrite AFTER transpile — Bun won't undo it
+    compiled = rewriteAliasImports(compiled, outPath, aliasMap);
+
+    // NOTE: _rewriteNodeModuleImports is intentionally a no-op — bare specifiers
+    // are left for Bun.build to handle natively (tree-shaking + bundling).
+    compiled = _rewriteNodeModuleImports(compiled);
+
+    await Bun.write(outPath, compiled);
 
   } catch (error) {
     logger.error(`Failed to compile ${filename}: ${error.message}`);
@@ -212,48 +157,54 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars, root
   }
 }
 
-async function compileJSFile(srcPath, buildDir, filename, root, envVars, rootBuildDir) {
+async function _compileJSFile(srcPath, buildDir, filename, root, envVars, aliasMap) {
   const outPath = join(buildDir, filename);
   let code = await Bun.file(srcPath).text();
+  code = _removeCSSImports(code);
   code = replaceEnvInCode(code, envVars);
-  code = transformCSSModuleImports(code, outPath, rootBuildDir);
-  code = removePlainCSSImports(code);
-  code = fixBuildImports(code, srcPath, outPath, root);
+  code = _fixBuildImports(code, srcPath, outPath, root);
+
+  // JS files don't go through Bun.Transpiler so rewrite is safe here
+  code = rewriteAliasImports(code, outPath, aliasMap);
 
-  if (usesJSX(code) && !code.includes('import React')) {
+  // NOTE: _rewriteNodeModuleImports is intentionally a no-op — see above.
+  code = _rewriteNodeModuleImports(code);
+
+  if (_usesJSX(code) && !code.includes('import React')) {
     code = `import React from 'react';\n${code}`;
   }
 
   await Bun.write(outPath, code);
-  code = null;
 }
 
-function usesJSX(code) {
+// ─────────────────────────────────────────────────────────────────────────────
+
+function _usesJSX(code) {
   return code.includes('React.createElement') ||
-         code.includes('React.Fragment') ||
+         code.includes('React.Fragment')      ||
          /<[A-Z]/.test(code);
 }
 
-function removePlainCSSImports(code) {
-  code = code.replace(/import\s+['"][^'"]*(?<!\.module)\.css['"];?\s*/g, '');
+function _removeCSSImports(code) {
+  code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   return code;
 }
 
-function fixBuildImports(code, srcPath, outPath, root) {
-  const buildDir = join(root, '.bertuibuild');
-  const routerPath = join(buildDir, 'router.js');
-  const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
-  const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
+function _fixBuildImports(code, srcPath, outPath, root) {
+  const buildDir    = join(root, '.bertuibuild');
+  const routerPath  = join(buildDir, 'router.js');
+  const rel         = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
+  const routerImport = rel.startsWith('.') ? rel : './' + rel;
   code = code.replace(/from\s+['"]bertui\/router['"]/g, `from '${routerImport}'`);
   return code;
 }
 
-function fixRelativeImports(code) {
-  const importRegex = /from\s+['"](\.\.[\/\\]|\.\/)((?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json))['"];?/g;
-  code = code.replace(importRegex, (match, prefix, path) => {
-    if (path.endsWith('/') || /\.\w+$/.test(path)) return match;
-    return `from '${prefix}${path}.js';`;
+function _fixRelativeImports(code) {
+  const importRegex = /from\s+['"](\.\.[\\/]|\.\/)(?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g;
+  code = code.replace(importRegex, (match) => {
+    if (/\.\w+['"]/.test(match)) return match;
+    return match.replace(/['"]$/, '.js"');
   });
   return code;
 }

package/src/build/compiler/index.js

@@ -1,4 +1,4 @@
-// bertui/src/build/compiler/index.js
+// bertui/src/build/compiler/index.js - WITH IMPORTHOW + NODE MODULE SUPPORT
 import { join } from 'path';
 import { existsSync } from 'fs';
 import logger from '../../logger/logger.js';
@@ -6,26 +6,33 @@ import { discoverRoutes } from './route-discoverer.js';
 import { compileBuildDirectory } from './file-transpiler.js';
 import { generateBuildRouter } from './router-generator.js';
 
-
-export async function compileForBuild(root, buildDir, envVars) {
-  const srcDir = join(root, 'src');
+/**
+ * @param {string} root
+ * @param {string} buildDir
+ * @param {Object} envVars
+ * @param {Object} config    - full bertui config (includes importhow)
+ */
+export async function compileForBuild(root, buildDir, envVars, config = {}) {
+  const srcDir  = join(root, 'src');
   const pagesDir = join(srcDir, 'pages');
-  
+
   if (!existsSync(srcDir)) {
     throw new Error('src/ directory not found!');
   }
-  
-  let routes = [];
+
+  const importhow = config.importhow || {};
+
+  let routes       = [];
   let serverIslands = [];
-  let clientRoutes = [];
-  
+  let clientRoutes  = [];
+
   if (existsSync(pagesDir)) {
     routes = await discoverRoutes(pagesDir);
-    
+
     for (const route of routes) {
       const sourceCode = await Bun.file(route.path).text();
       const isServerIsland = sourceCode.includes('export const render = "server"');
-      
+
       if (isServerIsland) {
         serverIslands.push(route);
         logger.success(`🏝️  Server Island: ${route.route}`);
@@ -34,12 +41,13 @@ export async function compileForBuild(root, buildDir, envVars) {
       }
     }
   }
-  
-  await compileBuildDirectory(srcDir, buildDir, root, envVars);
-  
+
+  // Pass importhow so alias dirs also get compiled
+  await compileBuildDirectory(srcDir, buildDir, root, envVars, importhow);
+
   if (routes.length > 0) {
     await generateBuildRouter(routes, buildDir);
   }
-  
+
   return { routes, serverIslands, clientRoutes };
 }