bertui 1.2.1 → 1.2.2

package/src/build.js

@@ -1,6 +1,6 @@
-// bertui/src/build.js - WITH LAYOUTS + LOADING + PARTIAL HYDRATION + ANALYZER
+// bertui/src/build.js
 import { join } from 'path';
-import { existsSync, mkdirSync, rmSync } from 'fs';
+import { existsSync, mkdirSync, rmSync, readdirSync, statSync } from 'fs';
 import logger from './logger/logger.js';
 import { loadEnvVariables } from './utils/env.js';
 import { globalCache } from './utils/cache.js';
@@ -15,135 +15,193 @@ import { compileLayouts } from './layouts/index.js';
 import { compileLoadingComponents } from './loading/index.js';
 import { analyzeRoutes, logHydrationReport } from './hydration/index.js';
 import { analyzeBuild } from './analyzer/index.js';
+import { buildAliasMap } from './utils/importhow.js';
+
+const TOTAL_STEPS = 10;
 
 export async function buildProduction(options = {}) {
-  const root = options.root || process.cwd();
+  const root     = options.root || process.cwd();
   const buildDir = join(root, '.bertuibuild');
-  const outDir = join(root, 'dist');
+  const outDir   = join(root, 'dist');
 
   process.env.NODE_ENV = 'production';
 
-  logger.bigLog('BUILDING WITH SERVER ISLANDS 🏝️', { color: 'green' });
+  logger.printHeader('BUILD');
 
   if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
-  if (existsSync(outDir)) rmSync(outDir, { recursive: true, force: true });
+  if (existsSync(outDir))   rmSync(outDir,   { recursive: true, force: true });
   mkdirSync(buildDir, { recursive: true });
-  mkdirSync(outDir, { recursive: true });
+  mkdirSync(outDir,   { recursive: true });
 
-  const startTime = process.hrtime.bigint();
+  let totalKB = '0';
 
   try {
-    logger.info('Step 0: Loading environment variables...');
+    // ── Step 1: Env ──────────────────────────────────────────────────────────
+    logger.step(1, TOTAL_STEPS, 'Loading env');
     const envVars = loadEnvVariables(root);
-
     const { loadConfig } = await import('./config/loadConfig.js');
-    const config = await loadConfig(root);
-
-    logger.info('Step 1: Compiling project...');
-    const { routes, serverIslands, clientRoutes } = await compileForBuild(root, buildDir, envVars);
-
-    if (serverIslands.length > 0) {
-      logger.bigLog('SERVER ISLANDS DETECTED 🏝️', { color: 'cyan' });
-      logger.table(serverIslands.map(r => ({
-        route: r.route,
-        file: r.file,
-        mode: '🏝️ Server Island (SSG)',
-      })));
-    }
+    const config    = await loadConfig(root);
+    const importhow = config.importhow || {};
+    logger.stepDone('Loading env', `${Object.keys(envVars).length} vars`);
+
+    // ── Step 2: Compile ──────────────────────────────────────────────────────
+    logger.step(2, TOTAL_STEPS, 'Compiling');
+    const { routes, serverIslands, clientRoutes } = await compileForBuild(root, buildDir, envVars, config);
+    logger.stepDone('Compiling', `${routes.length} routes · ${serverIslands.length} islands`);
 
-    // ✅ NEW: Compile layouts
-    logger.info('Step 2: Compiling layouts...');
+    // ── Step 3: Layouts ──────────────────────────────────────────────────────
+    logger.step(3, TOTAL_STEPS, 'Layouts');
     const layouts = await compileLayouts(root, buildDir);
-    const layoutCount = Object.keys(layouts).length;
-    if (layoutCount > 0) {
-      logger.success(`📐 ${layoutCount} layout(s) compiled`);
-    }
+    logger.stepDone('Layouts', `${Object.keys(layouts).length} found`);
 
-    // ✅ NEW: Compile per-route loading states
-    logger.info('Step 3: Compiling loading states...');
-    const loadingComponents = await compileLoadingComponents(root, buildDir);
+    // ── Step 4: Loading states ───────────────────────────────────────────────
+    logger.step(4, TOTAL_STEPS, 'Loading states');
+    await compileLoadingComponents(root, buildDir);
+    logger.stepDone('Loading states');
 
-    // ✅ NEW: Partial hydration analysis
-    logger.info('Step 4: Analyzing routes for partial hydration...');
+    // ── Step 5: Hydration analysis ───────────────────────────────────────────
+    logger.step(5, TOTAL_STEPS, 'Hydration analysis');
     const analyzedRoutes = await analyzeRoutes(routes);
-    logHydrationReport(analyzedRoutes);
+    logger.stepDone('Hydration analysis',
+      `${analyzedRoutes.interactive.length} interactive · ${analyzedRoutes.static.length} static`);
 
-    logger.info('Step 5: Processing CSS...');
+    // ── Step 6: CSS ──────────────────────────────────────────────────────────
+    logger.step(6, TOTAL_STEPS, 'Processing CSS');
     await buildAllCSS(root, outDir);
+    logger.stepDone('Processing CSS');
 
-    logger.info('Step 6: Copying static assets...');
+    // ── Step 7: Static assets ────────────────────────────────────────────────
+    logger.step(7, TOTAL_STEPS, 'Static assets');
     await copyAllStaticAssets(root, outDir);
+    logger.stepDone('Static assets');
 
-    logger.info('Step 7: Bundling JavaScript...');
+    // ── Step 8: Bundle JS ────────────────────────────────────────────────────
+    logger.step(8, TOTAL_STEPS, 'Bundling JS');
     const buildEntry = join(buildDir, 'main.js');
     const routerPath = join(buildDir, 'router.js');
+    if (!existsSync(buildEntry)) throw new Error('main.js not found in build dir');
+    const result = await bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config);
+    totalKB = (result.outputs.reduce((a, o) => a + (o.size || 0), 0) / 1024).toFixed(1);
+    logger.stepDone('Bundling JS', `${totalKB} KB · tree-shaken`);
 
-    if (!existsSync(buildEntry)) {
-      throw new Error('Build entry point missing (main.js not found in build dir)');
-    }
-
-    const result = await bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes);
-
-    logger.info('Step 8: Generating HTML...');
+    // ── Step 9: HTML ─────────────────────────────────────────────────────────
+    logger.step(9, TOTAL_STEPS, 'Generating HTML');
     await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
+    logger.stepDone('Generating HTML', `${routes.length} pages`);
 
-    logger.info('Step 9: Generating sitemap.xml...');
+    // ── Step 10: Sitemap + robots ────────────────────────────────────────────
+    logger.step(10, TOTAL_STEPS, 'Sitemap & robots');
     await generateSitemap(routes, config, outDir);
-
-    logger.info('Step 10: Generating robots.txt...');
     await generateRobots(config, outDir, routes);
+    logger.stepDone('Sitemap & robots');
 
-    // Cleanup build directory
     if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
 
-    const endTime = process.hrtime.bigint();
-    const durationMs = Number(endTime - startTime) / 1_000_000;
+    await analyzeBuild(outDir, { outputFile: join(outDir, 'bundle-report.html') });
 
-    showBuildSummary(routes, serverIslands, clientRoutes, analyzedRoutes, durationMs);
-
-    // ✅ NEW: Auto-generate bundle report
-    logger.info('Generating bundle report...');
-    await analyzeBuild(outDir, {
-      outputFile: join(outDir, 'bundle-report.html'),
+    // ── Summary ──────────────────────────────────────────────────────────────
+    logger.printSummary({
+      routes:        routes.length,
+      serverIslands: serverIslands.length,
+      interactive:   analyzedRoutes.interactive.length,
+      staticRoutes:  analyzedRoutes.static.length,
+      jsSize:        `${totalKB} KB`,
+      outDir:        'dist/',
     });
 
-    setTimeout(() => {
-      logger.info('✅ Build complete');
-      process.exit(0);
-    }, 100);
+    return { success: true };
 
   } catch (error) {
-    logger.error(`Build failed: ${error.message}`);
-    if (error.stack) logger.error(error.stack);
+    logger.stepFail('Build', error.message);
     if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+    throw error;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function generateProductionImportMap(root, config) {
+  const importMap = {
+    'react':             'https://esm.sh/react@18.2.0',
+    'react-dom':         'https://esm.sh/react-dom@18.2.0',
+    'react-dom/client':  'https://esm.sh/react-dom@18.2.0/client',
+    'react/jsx-runtime': 'https://esm.sh/react@18.2.0/jsx-runtime',
+  };
 
-    setTimeout(() => process.exit(1), 100);
+  const nodeModulesDir = join(root, 'node_modules');
+  if (!existsSync(nodeModulesDir)) return importMap;
+
+  try {
+    for (const pkg of readdirSync(nodeModulesDir)) {
+      if (!pkg.startsWith('bertui-') || pkg.startsWith('.')) continue;
+      const pkgDir  = join(nodeModulesDir, pkg);
+      const pkgJson = join(pkgDir, 'package.json');
+      if (!existsSync(pkgJson)) continue;
+      try {
+        const p = JSON.parse(await Bun.file(pkgJson).text());
+        for (const entry of [p.browser, p.module, p.main, 'dist/index.js', 'index.js'].filter(Boolean)) {
+          if (existsSync(join(pkgDir, entry))) {
+            importMap[pkg] = `/assets/node_modules/${pkg}/${entry}`;
+            break;
+          }
+        }
+      } catch { continue; }
+    }
+  } catch { /* ignore */ }
+
+  return importMap;
+}
+
+async function copyNodeModulesToDist(root, outDir, importMap) {
+  const dest = join(outDir, 'assets', 'node_modules');
+  mkdirSync(dest, { recursive: true });
+  const src = join(root, 'node_modules');
+
+  for (const [, assetPath] of Object.entries(importMap)) {
+    if (assetPath.startsWith('https://')) continue;
+    const match = assetPath.match(/\/assets\/node_modules\/(.+)$/);
+    if (!match) continue;
+    const parts   = match[1].split('/');
+    const pkgName = parts[0];
+    const subPath = parts.slice(1);
+    const srcFile  = join(src, pkgName, ...subPath);
+    const destFile = join(dest, pkgName, ...subPath);
+    mkdirSync(join(dest, pkgName, ...subPath.slice(0, -1)), { recursive: true });
+    if (existsSync(srcFile)) await Bun.write(destFile, Bun.file(srcFile));
   }
 }
 
-async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes) {
+async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes, importhow, root, config) {
   const originalCwd = process.cwd();
   process.chdir(buildDir);
 
   try {
-    const hasRouter = existsSync(routerPath);
     const entrypoints = [buildEntry];
-    if (hasRouter) entrypoints.push(routerPath);
+    if (existsSync(routerPath)) entrypoints.push(routerPath);
+
+    const importMap = await generateProductionImportMap(root, config);
+    await Bun.write(join(outDir, 'import-map.json'), JSON.stringify({ imports: importMap }, null, 2));
+    await copyNodeModulesToDist(root, outDir, importMap);
 
     const result = await Bun.build({
       entrypoints,
-      outdir: join(outDir, 'assets'),
-      target: 'browser',
-      minify: true,
-      splitting: true,          // Code splitting per route
+      outdir:  join(outDir, 'assets'),
+      target:  'browser',
+      format:  'esm',
+      minify: {
+        whitespace:  true,
+        syntax:      true,
+        identifiers: true,
+      },
+      splitting:  true,
       sourcemap: 'external',
-      metafile: true,           // ✅ Enable for analyzer
+      metafile:   true,
       naming: {
-        entry: '[name]-[hash].js',
-        chunk: 'chunks/[name]-[hash].js',
-        asset: '[name]-[hash].[ext]',
+        entry: 'js/[name]-[hash].js',
+        chunk: 'js/chunks/[name]-[hash].js',
+        asset: 'assets/[name]-[hash].[ext]',
       },
-      external: ['react', 'react-dom', 'react-dom/client'],
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
       define: {
         'process.env.NODE_ENV': '"production"',
         ...Object.fromEntries(
@@ -153,13 +211,13 @@ async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDi
     });
 
     if (!result.success) {
-      console.log('RAW LOGS:', JSON.stringify(result.logs, null, 2));
-      console.log('OUTPUTS:', JSON.stringify(result.outputs?.map(o => o.path), null, 2));
-      const errors = result.logs?.map(l => l.text || l.message || JSON.stringify(l)).join('\n') || 'Unknown error';
-      throw new Error(`JavaScript bundling failed:\n${errors}`);
+      throw new Error(`Bundle failed\n${result.logs?.map(l => l.message).join('\n') || 'Unknown error'}`);
+    }
+
+    if (result.metafile) {
+      await Bun.write(join(outDir, 'metafile.json'), JSON.stringify(result.metafile, null, 2));
     }
 
-    logger.success(`✅ Bundled ${result.outputs.length} files`);
     return result;
 
   } finally {
@@ -167,15 +225,12 @@ async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDi
   }
 }
 
-function showBuildSummary(routes, serverIslands, clientRoutes, analyzedRoutes, durationMs) {
-  logger.success(`✨ Build complete in ${durationMs.toFixed(1)}ms`);
-  logger.bigLog('BUILD SUMMARY', { color: 'green' });
-  logger.info(`📄 Total routes: ${routes.length}`);
-  logger.info(`🏝️  Server Islands (SSG): ${serverIslands.length}`);
-  logger.info(`⚡ Interactive (hydrated): ${analyzedRoutes.interactive.length}`);
-  logger.info(`🧊 Static (no JS): ${analyzedRoutes.static.length}`);
-  logger.info(`🗺️  Sitemap: dist/sitemap.xml`);
-  logger.info(`🤖 robots.txt: dist/robots.txt`);
-  logger.info(`📊 Bundle report: dist/bundle-report.html`);
-  logger.bigLog('READY TO DEPLOY 🚀', { color: 'green' });
+export async function build(options = {}) {
+  try {
+    await buildProduction(options);
+    process.exit(0);
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
 }