bertui 1.2.0 → 1.2.2

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

@@ -1,36 +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 { buildAliasMap, rewriteAliasImports } from '../../utils/importhow.js';
 
-export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
-  // Create bunfig.toml in build directory
-  const bunfigContent = `
-[build]
-jsx = "react"
-jsxFactory = "React.createElement"
-jsxFragment = "React.Fragment"
-`.trim();
-  
-  writeFileSync(join(buildDir, 'bunfig.toml'), bunfigContent);
+/**
+ * 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');
-  
+
+  // Build mode: aliases resolve to buildDir/<alias> so relative paths inside dist/ are correct
+  const aliasMap = buildAliasMap(importhow, root, buildDir);
+
+  // Compile src/
+  await _compileDir(srcDir, buildDir, root, envVars, aliasMap);
+
+  // Compile each alias source dir → buildDir/<alias>
+  for (const [alias, relPath] of Object.entries(importhow)) {
+    const absAliasDir = join(root, relPath);
+
+    if (!existsSync(absAliasDir)) {
+      logger.warn(`⚠️  importhow alias "${alias}" points to missing dir: ${absAliasDir}`);
+      continue;
+    }
+
+    const aliasOutDir = join(buildDir, alias);
+    mkdirSync(aliasOutDir, { recursive: true });
+
+    logger.info(`📦 Compiling alias dir [${alias}] → ${aliasOutDir}`);
+    await _compileDir(absAliasDir, aliasOutDir, root, envVars, aliasMap);
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function _compileDir(srcDir, buildDir, root, envVars, aliasMap) {
   const files = readdirSync(srcDir);
   const filesToCompile = [];
-  
+
   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 (ext === '.css') continue;
-      
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'tsx' });
       } else if (ext === '.js') {
@@ -38,58 +62,67 @@ 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, buildDir);
+        await _compileTSXFile(file.path, file.dir, file.name, root, envVars, buildDir, aliasMap);
       } else {
-        await compileJSFile(file.path, file.dir, file.name, root, envVars);
+        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}`);
     }
   }
-  
+
   logger.success(`✅ Compiled ${filesToCompile.length} files`);
 }
 
-async function compileBuildFile(srcPath, buildDir, filename, root, envVars, configDir) {
+// ─────────────────────────────────────────────────────────────────────────────
+// _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 = _removeCSSImports(code);
     code = replaceEnvInCode(code, envVars);
-    
+
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
-    const outPath = join(buildDir, outFilename);
-    code = fixBuildImports(code, srcPath, outPath, root);
-    
-    // Add React import BEFORE transpiling
+    const outPath     = join(buildDir, outFilename);
+
+    code = _fixBuildImports(code, srcPath, outPath, root);
+
     if (!code.includes('import React')) {
       code = `import React from 'react';\n${code}`;
     }
-    
-    // Use Bun.Transpiler with explicit production settings
+
     const transpiler = new Bun.Transpiler({
       loader: ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx',
       target: 'browser',
-      define: {
-        'process.env.NODE_ENV': '"production"'
-      },
+      define: { 'process.env.NODE_ENV': '"production"' },
       tsconfig: {
         compilerOptions: {
           jsx: 'react',
@@ -99,69 +132,79 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars, conf
         }
       }
     });
-    
+
     let compiled = await transpiler.transform(code);
-    
-    // Verify no dev JSX leaked through
+
     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);
+
+    compiled = _fixRelativeImports(compiled);
+
+    // ✅ 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);
-    
-    code = null;
-    compiled = null;
-    
+
   } catch (error) {
     logger.error(`Failed to compile ${filename}: ${error.message}`);
     throw error;
   }
 }
 
-async function compileJSFile(srcPath, buildDir, filename, root, envVars) {
+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 = _removeCSSImports(code);
   code = replaceEnvInCode(code, envVars);
-  code = fixBuildImports(code, srcPath, outPath, root);
-  
-  if (usesJSX(code) && !code.includes('import React')) {
+  code = _fixBuildImports(code, srcPath, outPath, root);
+
+  // JS files don't go through Bun.Transpiler so rewrite is safe here
+  code = rewriteAliasImports(code, outPath, aliasMap);
+
+  // 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) {
-  return code.includes('React.createElement') || 
-         code.includes('React.Fragment') ||
+// ─────────────────────────────────────────────────────────────────────────────
+
+function _usesJSX(code) {
+  return code.includes('React.createElement') ||
+         code.includes('React.Fragment')      ||
          /<[A-Z]/.test(code);
 }
 
-function removeCSSImports(code) {
+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 };
 }

package/src/build/compiler/route-discoverer.js

@@ -20,13 +20,14 @@ export async function discoverRoutes(pagesDir) {
         
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
+
+          // Only loading is reserved - index is a valid route (becomes /)
+          if (fileName === 'loading') continue;
+
           let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
-          
-          const RESERVED = ['index', 'loading'];
           if (fileName === 'index') {
             route = route.replace('/index', '') || '/';
           }
-          if (RESERVED.includes(fileName)) continue;
           
           const isDynamic = fileName.includes('[') && fileName.includes(']');
           

package/src/build/generators/sitemap-generator.js

@@ -1,6 +1,6 @@
 // bertui/src/build/sitemap-generator.js - SIMPLIFIED
 import { join } from 'path';
-import logger from '../../logger/logger';
+import logger from '../../logger/logger.js';
 
 function calculatePriority(route) {
   if (route === '/') return 1.0;

package/src/build/processors/css-builder.js

@@ -1,4 +1,4 @@
-// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING
+// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING + CSS MODULES
 import { join } from 'path';
 import { existsSync, readdirSync, mkdirSync } from 'fs';
 import logger from '../../logger/logger.js';
@@ -9,13 +9,14 @@ export async function buildAllCSS(root, outDir) {
   const startTime = process.hrtime.bigint();
   
   const srcStylesDir = join(root, 'src', 'styles');
+  // CSS modules scoped CSS is staged here by file-transpiler.js
+  const modulesStagingDir = join(root, '.bertuibuild', 'styles-staged');
   const stylesOutDir = join(outDir, 'styles');
   
   mkdirSync(stylesOutDir, { recursive: true });
   
-  // Check cache for entire CSS build
   const cacheKey = `css-build:${root}:${Date.now()}`;
-  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache
+  const cached = globalCache.get(cacheKey, { ttl: 1000 });
   
   if (cached) {
     logger.info(`⚡ Using cached CSS (${cached.files} files)`);
@@ -23,43 +24,50 @@ export async function buildAllCSS(root, outDir) {
     return;
   }
   
-  if (!existsSync(srcStylesDir)) {
-    await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No custom styles */');
-    logger.info('No styles directory found, created empty CSS');
-    return;
+  let combinedCSS = '';
+  let fileCount = 0;
+
+  // 1. Process src/styles/ (plain CSS + SCSS)
+  if (existsSync(srcStylesDir)) {
+    await processSCSSDirectory(srcStylesDir, root);
+    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css') && !f.endsWith('.module.css'));
+
+    logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
+
+    for (const cssFile of cssFiles) {
+      const srcPath = join(srcStylesDir, cssFile);
+      const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
+      if (fileBuffer) {
+        const content = fileBuffer.toString('utf-8');
+        combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
+        fileCount++;
+      }
+    }
+  } else {
+    logger.info('No styles directory found');
   }
-  
-  // Process SCSS files first
-  await processSCSSDirectory(srcStylesDir, root);
-  
-  // Read all CSS files (including compiled SCSS)
-  const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-  
-  if (cssFiles.length === 0) {
+
+  // 2. Include scoped CSS from CSS modules (staged by file-transpiler.js)
+  if (existsSync(modulesStagingDir)) {
+    const moduleFiles = readdirSync(modulesStagingDir).filter(f => f.endsWith('.css'));
+    if (moduleFiles.length > 0) {
+      logger.info(`Including ${moduleFiles.length} CSS module(s)...`);
+      for (const cssFile of moduleFiles) {
+        const srcPath = join(modulesStagingDir, cssFile);
+        const content = await Bun.file(srcPath).text();
+        combinedCSS += `/* module: ${cssFile} */\n${content}\n\n`;
+        fileCount++;
+      }
+    }
+  }
+
+  if (!combinedCSS.trim()) {
     await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
     return;
   }
-  
-  logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
-  
-  let combinedCSS = '';
-  const fileContents = [];
-  
-  for (const cssFile of cssFiles) {
-    const srcPath = join(srcStylesDir, cssFile);
-    
-    // Use file cache
-    const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
-    if (fileBuffer) {
-      const content = fileBuffer.toString('utf-8');
-      fileContents.push({ filename: cssFile, content });
-      combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
-    }
-  }
-  
+
   const combinedPath = join(stylesOutDir, 'bertui.min.css');
   
-  // Minify with caching
   const minifyCacheKey = `minify:${Buffer.from(combinedCSS).length}:${combinedCSS.substring(0, 100)}`;
   let minified = globalCache.get(minifyCacheKey);
   
@@ -68,7 +76,7 @@ export async function buildAllCSS(root, outDir) {
       filename: 'bertui.min.css',
       sourceMap: false
     });
-    globalCache.set(minifyCacheKey, minified, { ttl: 60000 }); // Cache for 60 seconds
+    globalCache.set(minifyCacheKey, minified, { ttl: 60000 });
   }
   
   await Bun.write(combinedPath, minified);
@@ -78,23 +86,20 @@ export async function buildAllCSS(root, outDir) {
   const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
   
   const endTime = process.hrtime.bigint();
-  const duration = Number(endTime - startTime) / 1000; // Microseconds
+  const duration = Number(endTime - startTime) / 1000;
   
   logger.success(`CSS optimized: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
   logger.info(`⚡ Processing time: ${duration.toFixed(3)}µs`);
   
-  // Cache the final result
   globalCache.set(cacheKey, {
-    files: cssFiles.length,
+    files: fileCount,
     content: minified,
     size: minifiedSize
   }, { ttl: 5000 });
 }
 
-// NEW: Process SCSS directory
 async function processSCSSDirectory(stylesDir, root) {
   try {
-    // Check if sass is installed
     const sass = await import('sass').catch(() => null);
     if (!sass) return;
     
@@ -109,7 +114,6 @@ async function processSCSSDirectory(stylesDir, root) {
       const srcPath = join(stylesDir, file);
       const cssPath = join(stylesDir, file.replace(/\.(scss|sass)$/, '.css'));
       
-      // Check cache
       const fileBuffer = await globalCache.getFile(srcPath);
       const cacheKey = `scss:${file}:${Buffer.from(fileBuffer).length}`;
       const cached = globalCache.get(cacheKey);