bertui 1.2.8 → 2.0.0

package/index.js

@@ -1,103 +0,0 @@
-// bertui/index.js - v1.2.2
-
-// Compiler
-export { compileProject, compileFile } from './src/client/compiler.js';
-export { compileForBuild } from './src/build/compiler/index.js';
-export { discoverRoutes } from './src/build/compiler/route-discoverer.js';
-
-// HMR
-export { hmr } from './src/client/hmr-runtime.js';
-
-// Image Optimizer
-export {
-  optimizeImage,
-  optimizeImagesBatch,
-  hasWasm,
-  version as optimizerVersion,
-} from './src/image-optimizer/index.js';
-
-// Build
-export { buildProduction } from './src/build.js';
-export { optimizeImages } from './src/build/image-optimizer.js';
-
-// Router
-export { Router, Link, useRouter } from './src/router/index.js';
-export { SSRRouter } from './src/router/SSRRouter.js';
-
-// Config
-export { loadConfig, defaultConfig } from './src/config/index.js';
-
-// Logger
-export { default as logger } from './src/logger/logger.js';
-
-// CLI
-export { program } from './src/cli.js';
-
-// ✅ Middleware system
-export {
-  MiddlewareManager,
-  loadMiddleware,
-  runMiddleware,
-  MiddlewareContext,
-} from './src/middleware/index.js';
-
-// ✅ Layout system
-export {
-  discoverLayouts,
-  compileLayouts,
-  matchLayout,
-  generateLayoutWrapper,
-  injectLayoutsIntoRouter,
-} from './src/layouts/index.js';
-
-// ✅ Loading states
-export {
-  discoverLoadingComponents,
-  compileLoadingComponents,
-  generateLoadingAwareRouter,
-  getLoadingScript,
-  DEFAULT_LOADING_HTML,
-} from './src/loading/index.js';
-
-// ✅ Partial hydration
-export {
-  needsHydration,
-  getInteractiveFeatures,
-  analyzeRoutes,
-  generatePartialHydrationCode,
-  logHydrationReport,
-} from './src/hydration/index.js';
-
-// ✅ Bundle analyzer
-export { analyzeBuild } from './src/analyzer/index.js';
-
-// ✅ CLI scaffolder
-export { scaffold, parseCreateArgs } from './src/scaffolder/index.js';
-
-// Server
-export { createDevHandler } from './src/server/dev-handler.js';
-export { startDevServer } from './src/server/dev-server.js';
-
-// CSS
-export { minifyCSS, combineCSS } from './src/css/processor.js';
-
-// Images
-export { copyImagesSync, isImageFile } from './src/images/index.js';
-
-// Server Islands
-export {
-  extractStaticHTML,
-  isServerIsland,
-  validateServerIsland,
-} from './src/server-islands/index.js';
-
-// ✅ NEW: importhow — alias/import resolution system
-// Bunny and external tools can use these to apply the same alias logic
-export {
-  buildAliasMap,
-  rewriteAliasImports,
-  getAliasDirs,
-} from './src/utils/importhow.js';
-
-// Version
-export const version = '1.2.2';

package/src/analyzer/index.js

@@ -1,370 +0,0 @@
-// bertui/src/analyzer/index.js
-// Bundle analyzer - reads Bun metafile, generates HTML report
-
-import { join, relative } from 'path';
-import { existsSync } from 'fs';
-import logger from '../logger/logger.js';
-
-/**
- * Analyze build output and generate HTML report
- */
-export async function analyzeBuild(outDir, options = {}) {
-  const {
-    open = false,
-    outputFile = join(outDir, 'bundle-report.html'),
-    title = 'BertUI Bundle Report',
-  } = options;
-
-  // Collect all JS files from dist/assets
-  const assetsDir = join(outDir, 'assets');
-  if (!existsSync(assetsDir)) {
-    logger.warn('No assets directory found. Run bun run build first.');
-    return null;
-  }
-
-  const files = await collectFiles(assetsDir, outDir);
-  const report = generateReport(files, title, outDir);
-
-  await Bun.write(outputFile, report);
-  logger.success(`📊 Bundle report: ${outputFile}`);
-
-  if (open) {
-    try {
-      const { exec } = await import('child_process');
-      const cmd = process.platform === 'darwin' ? 'open' :
-        process.platform === 'win32' ? 'start' : 'xdg-open';
-      exec(`${cmd} ${outputFile}`);
-    } catch (e) {}
-  }
-
-  return { outputFile, files };
-}
-
-async function collectFiles(assetsDir, outDir) {
-  const { readdirSync, statSync } = await import('fs');
-  const files = [];
-
-  function scan(dir) {
-    const entries = readdirSync(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = join(dir, entry.name);
-      if (entry.isDirectory()) {
-        scan(fullPath);
-      } else if (entry.isFile()) {
-        const stat = statSync(fullPath);
-        const relPath = relative(outDir, fullPath);
-        const ext = entry.name.split('.').pop();
-
-        files.push({
-          name: entry.name,
-          path: relPath,
-          size: stat.size,
-          sizeKB: (stat.size / 1024).toFixed(2),
-          type: getFileType(ext),
-          ext,
-        });
-      }
-    }
-  }
-
-  scan(assetsDir);
-  files.sort((a, b) => b.size - a.size);
-  return files;
-}
-
-function getFileType(ext) {
-  if (['js', 'mjs'].includes(ext)) return 'javascript';
-  if (ext === 'css') return 'css';
-  if (['map'].includes(ext)) return 'sourcemap';
-  if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'avif'].includes(ext)) return 'image';
-  return 'other';
-}
-
-function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-function getColor(type) {
-  return {
-    javascript: '#3b82f6',
-    css: '#8b5cf6',
-    sourcemap: '#6b7280',
-    image: '#f59e0b',
-    other: '#10b981',
-  }[type] || '#6b7280';
-}
-
-function generateReport(files, title, outDir) {
-  const totalSize = files.reduce((s, f) => s + f.size, 0);
-  const jsFiles = files.filter(f => f.type === 'javascript');
-  const cssFiles = files.filter(f => f.type === 'css');
-  const imageFiles = files.filter(f => f.type === 'image');
-  const otherFiles = files.filter(f => !['javascript','css','image'].includes(f.type));
-
-  const jsTotal = jsFiles.reduce((s, f) => s + f.size, 0);
-  const cssTotal = cssFiles.reduce((s, f) => s + f.size, 0);
-  const imageTotal = imageFiles.reduce((s, f) => s + f.size, 0);
-
-  const fileRows = files.map(f => {
-    const pct = totalSize > 0 ? ((f.size / totalSize) * 100).toFixed(1) : 0;
-    const barWidth = Math.max(2, Math.round((f.size / (files[0]?.size || 1)) * 200));
-    const color = getColor(f.type);
-    return `
-      <tr>
-        <td class="file-name">
-          <span class="dot" style="background:${color}"></span>
-          ${f.name}
-        </td>
-        <td class="file-path">${f.path}</td>
-        <td class="file-type">${f.type}</td>
-        <td class="file-size">${formatBytes(f.size)}</td>
-        <td class="file-pct">
-          <div class="bar-wrap">
-            <div class="bar" style="width:${barWidth}px;background:${color}"></div>
-            <span>${pct}%</span>
-          </div>
-        </td>
-      </tr>`;
-  }).join('');
-
-  const now = new Date().toLocaleString();
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-      padding: 32px;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      margin-bottom: 32px;
-    }
-    .header h1 { font-size: 28px; font-weight: 700; color: #f8fafc; }
-    .header .badge {
-      background: #10b981;
-      color: white;
-      padding: 4px 12px;
-      border-radius: 20px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .meta { color: #64748b; font-size: 13px; margin-top: 4px; }
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 16px;
-      margin-bottom: 32px;
-    }
-    .card {
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 12px;
-      padding: 20px;
-    }
-    .card .label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
-    .card .value { font-size: 28px; font-weight: 700; margin-top: 4px; }
-    .card .sub { font-size: 12px; color: #64748b; margin-top: 2px; }
-    .section {
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 12px;
-      overflow: hidden;
-      margin-bottom: 24px;
-    }
-    .section-header {
-      padding: 16px 24px;
-      border-bottom: 1px solid #334155;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .section-header h2 { font-size: 15px; font-weight: 600; color: #f1f5f9; }
-    .section-header .count {
-      background: #334155;
-      color: #94a3b8;
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 12px;
-    }
-    table { width: 100%; border-collapse: collapse; }
-    th {
-      text-align: left;
-      padding: 12px 24px;
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #64748b;
-      border-bottom: 1px solid #334155;
-    }
-    td {
-      padding: 12px 24px;
-      font-size: 13px;
-      border-bottom: 1px solid #1e293b;
-      vertical-align: middle;
-    }
-    tr:last-child td { border-bottom: none; }
-    tr:hover td { background: #263348; }
-    .file-name { font-weight: 600; color: #f1f5f9; white-space: nowrap; }
-    .file-path { color: #64748b; font-size: 12px; font-family: monospace; }
-    .file-type { color: #94a3b8; font-size: 12px; text-transform: uppercase; }
-    .file-size { font-weight: 600; color: #10b981; white-space: nowrap; }
-    .dot {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-    .bar-wrap {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .bar {
-      height: 6px;
-      border-radius: 3px;
-      min-width: 2px;
-    }
-    .bar-wrap span { color: #64748b; font-size: 12px; white-space: nowrap; }
-    .filter-bar {
-      display: flex;
-      gap: 8px;
-      padding: 16px 24px;
-      border-bottom: 1px solid #334155;
-      flex-wrap: wrap;
-    }
-    .filter-btn {
-      background: #334155;
-      color: #94a3b8;
-      border: none;
-      padding: 6px 14px;
-      border-radius: 8px;
-      font-size: 12px;
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .filter-btn:hover, .filter-btn.active {
-      background: #10b981;
-      color: white;
-    }
-    input[type="search"] {
-      background: #334155;
-      border: 1px solid #475569;
-      color: #f1f5f9;
-      padding: 6px 14px;
-      border-radius: 8px;
-      font-size: 13px;
-      outline: none;
-      width: 240px;
-    }
-    input[type="search"]::placeholder { color: #64748b; }
-    input[type="search"]:focus { border-color: #10b981; }
-    .footer { color: #64748b; font-size: 12px; text-align: center; margin-top: 24px; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <div>
-      <div style="display:flex;align-items:center;gap:12px">
-        <h1>📊 ${title}</h1>
-        <span class="badge">⚡ BertUI</span>
-      </div>
-      <p class="meta">Generated ${now} · ${outDir}</p>
-    </div>
-  </div>
-
-  <div class="cards">
-    <div class="card">
-      <div class="label">Total Size</div>
-      <div class="value" style="color:#10b981">${formatBytes(totalSize)}</div>
-      <div class="sub">${files.length} files</div>
-    </div>
-    <div class="card">
-      <div class="label">JavaScript</div>
-      <div class="value" style="color:#3b82f6">${formatBytes(jsTotal)}</div>
-      <div class="sub">${jsFiles.length} files</div>
-    </div>
-    <div class="card">
-      <div class="label">CSS</div>
-      <div class="value" style="color:#8b5cf6">${formatBytes(cssTotal)}</div>
-      <div class="sub">${cssFiles.length} files</div>
-    </div>
-    <div class="card">
-      <div class="label">Images</div>
-      <div class="value" style="color:#f59e0b">${formatBytes(imageTotal)}</div>
-      <div class="sub">${imageFiles.length} files</div>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="section-header">
-      <h2>All Files</h2>
-      <span class="count">${files.length}</span>
-    </div>
-    <div class="filter-bar">
-      <button class="filter-btn active" onclick="filterFiles('all', this)">All</button>
-      <button class="filter-btn" onclick="filterFiles('javascript', this)">JS</button>
-      <button class="filter-btn" onclick="filterFiles('css', this)">CSS</button>
-      <button class="filter-btn" onclick="filterFiles('image', this)">Images</button>
-      <input type="search" id="search" placeholder="Search files..." oninput="searchFiles(this.value)">
-    </div>
-    <table id="files-table">
-      <thead>
-        <tr>
-          <th>File</th>
-          <th>Path</th>
-          <th>Type</th>
-          <th>Size</th>
-          <th>% of Total</th>
-        </tr>
-      </thead>
-      <tbody>${fileRows}</tbody>
-    </table>
-  </div>
-
-  <p class="footer">Built with BertUI · bundle-report.html</p>
-
-  <script>
-    let currentFilter = 'all';
-    const rows = Array.from(document.querySelectorAll('#files-table tbody tr'));
-
-    function filterFiles(type, btn) {
-      currentFilter = type;
-      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      applyFilters();
-    }
-
-    function searchFiles(query) {
-      applyFilters(query);
-    }
-
-    function applyFilters(query = document.getElementById('search').value) {
-      rows.forEach(row => {
-        const typeCell = row.cells[2].textContent.trim();
-        const nameCell = row.cells[0].textContent.trim();
-        const matchesType = currentFilter === 'all' || typeCell === currentFilter;
-        const matchesSearch = !query || nameCell.toLowerCase().includes(query.toLowerCase());
-        row.style.display = matchesType && matchesSearch ? '' : 'none';
-      });
-    }
-  </script>
-</body>
-</html>`;
-}

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

@@ -1,216 +0,0 @@
-// bertui/src/build/compiler/file-transpiler.js
-import { join, relative, dirname, extname } from 'path';
-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';
-
-/**
- * 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);
-
-    if (stat.isDirectory()) {
-      if (file === 'api') { logger.debug('⏭️  Skipping api/'); continue; }
-      const subBuildDir = join(buildDir, file);
-      mkdirSync(subBuildDir, { recursive: true });
-      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') {
-        filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'js' });
-      }
-    }
-  }
-
-  if (filesToCompile.length === 0) return;
-
-  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 _compileTSXFile(file.path, file.dir, file.name, root, envVars, buildDir, aliasMap);
-      } else {
-        await _compileJSFile(file.path, file.dir, file.name, root, envVars, aliasMap);
-      }
-
-      if ((i + 1) % 10 === 0 || i === filesToCompile.length - 1) {
-        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`);
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// _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);
-
-    code = _fixBuildImports(code, srcPath, outPath, root);
-
-    if (!code.includes('import React')) {
-      code = `import React from 'react';\n${code}`;
-    }
-
-    const transpiler = new Bun.Transpiler({
-      loader: ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx',
-      target: 'browser',
-      define: { 'process.env.NODE_ENV': '"production"' },
-      tsconfig: {
-        compilerOptions: {
-          jsx: 'react',
-          jsxFactory: 'React.createElement',
-          jsxFragmentFactory: 'React.Fragment',
-          target: 'ES2020'
-        }
-      }
-    });
-
-    let compiled = await transpiler.transform(code);
-
-    if (compiled.includes('jsxDEV')) {
-      logger.warn(`⚠️  Dev JSX in ${filename}, fixing...`);
-      compiled = compiled.replace(/jsxDEV/g, 'jsx');
-    }
-
-    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);
-
-  } catch (error) {
-    logger.error(`Failed to compile ${filename}: ${error.message}`);
-    throw error;
-  }
-}
-
-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 = _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);
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-
-function _usesJSX(code) {
-  return code.includes('React.createElement') ||
-         code.includes('React.Fragment')      ||
-         /<[A-Z]/.test(code);
-}
-
-function _removeCSSImports(code) {
-  // Replace CSS module imports with a Proxy so styles.foo = 'foo' at runtime
-  code = code.replace(
-    /import\s+(\w+)\s+from\s+['"][^'"]*\.module\.css['"];?\s*/g,
-    (_, varName) => `const ${varName} = new Proxy({}, { get: (_, k) => k });\n`
-  );
-  // Strip plain CSS imports entirely
-  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 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) => {
-    if (/\.\w+['"]/.test(match)) return match;
-    return match.replace(/['"]$/, '.js"');
-  });
-  return code;
-}