bertui 0.1.5 → 0.1.7

package/src/cli.js

@@ -1,66 +1,66 @@
-// src/cli.js
-import { startDev } from './dev.js';
-import { buildProduction } from './build.js';
-import logger from './logger/logger.js';
-
-export function program() {
-  const args = process.argv.slice(2);
-  const command = args[0] || 'dev';
-
-  switch (command) {
-    case 'dev':
-      const devPort = getArg('--port', '-p') || 3000;
-      startDev({ 
-        port: parseInt(devPort), 
-        root: process.cwd() 
-      });
-      break;
-    
-    case 'build':
-      buildProduction({ 
-        root: process.cwd() 
-      });
-      break;
-    
-    case '--version':
-    case '-v':
-      console.log('bertui v0.1.0');
-      break;
-    
-    case '--help':
-    case '-h':
-      showHelp();
-      break;
-    
-    default:
-      logger.error(`Unknown command: ${command}`);
-      showHelp();
-  }
-}
-
-function getArg(longForm, shortForm) {
-  const args = process.argv.slice(2);
-  const longIndex = args.indexOf(longForm);
-  const shortIndex = args.indexOf(shortForm);
-  const index = longIndex !== -1 ? longIndex : shortIndex;
-  return index !== -1 && args[index + 1] ? args[index + 1] : null;
-}
-
-function showHelp() {
-  logger.bigLog('BERTUI CLI', { color: 'blue' });
-  console.log(`
-Commands:
-  bertui dev              Start development server
-  bertui build            Build for production
-  bertui --version        Show version
-  bertui --help           Show help
-
-Options:
-  --port, -p <number>     Port for dev server (default: 3000)
-
-Examples:
-  bertui dev
-  bertui dev --port 8080
-  bertui build
-  `);
+// src/cli.js
+import { startDev } from './dev.js';
+import { buildProduction } from './build.js';
+import logger from './logger/logger.js';
+
+export function program() {
+  const args = process.argv.slice(2);
+  const command = args[0] || 'dev';
+
+  switch (command) {
+    case 'dev':
+      const devPort = getArg('--port', '-p') || 3000;
+      startDev({ 
+        port: parseInt(devPort), 
+        root: process.cwd() 
+      });
+      break;
+    
+    case 'build':
+      buildProduction({ 
+        root: process.cwd() 
+      });
+      break;
+    
+    case '--version':
+    case '-v':
+      console.log('bertui v0.1.0');
+      break;
+    
+    case '--help':
+    case '-h':
+      showHelp();
+      break;
+    
+    default:
+      logger.error(`Unknown command: ${command}`);
+      showHelp();
+  }
+}
+
+function getArg(longForm, shortForm) {
+  const args = process.argv.slice(2);
+  const longIndex = args.indexOf(longForm);
+  const shortIndex = args.indexOf(shortForm);
+  const index = longIndex !== -1 ? longIndex : shortIndex;
+  return index !== -1 && args[index + 1] ? args[index + 1] : null;
+}
+
+function showHelp() {
+  logger.bigLog('BERTUI CLI', { color: 'blue' });
+  console.log(`
+Commands:
+  bertui dev              Start development server
+  bertui build            Build for production
+  bertui --version        Show version
+  bertui --help           Show help
+
+Options:
+  --port, -p <number>     Port for dev server (default: 3000)
+
+Examples:
+  bertui dev
+  bertui dev --port 8080
+  bertui build
+  `);
 }

package/src/client/compiler.js

@@ -1,91 +1,228 @@
-// src/client/compiler.js
-import { join } from 'path';
-import { existsSync, mkdirSync, writeFileSync } from 'fs';
-import logger from '../logger/logger.js';
-import { generateRoutes, generateRouterCode, generateMainWithRouter, logRoutes } from '../router/router.js';
-
-export async function compileProject(root) {
-  const compiledDir = join(root, '.bertui', 'compiled');
-  const routerDir = join(root, '.bertui');
-  
-  // Ensure compiled directory exists
-  if (!existsSync(compiledDir)) {
-    mkdirSync(compiledDir, { recursive: true });
-  }
-  
-  const startTime = Date.now();
-  
-  try {
-    // Check if routing is enabled (pages directory exists)
-    const pagesDir = join(root, 'src', 'pages');
-    const useRouting = existsSync(pagesDir);
-    
-    let entryPoint;
-    let routes = [];
-    
-    if (useRouting) {
-      logger.info('📁 File-based routing enabled');
-      
-      // Generate routes
-      routes = generateRoutes(root);
-      logRoutes(routes);
-      
-      // Generate router code
-      const routerCode = generateRouterCode(routes);
-      const routerPath = join(routerDir, 'router.js');
-      writeFileSync(routerPath, routerCode);
-      logger.info('Generated router.js');
-      
-      // Generate main entry with router
-      const mainCode = generateMainWithRouter(routes);
-      const mainPath = join(routerDir, 'main-entry.js');
-      writeFileSync(mainPath, mainCode);
-      
-      entryPoint = mainPath;
-    } else {
-      // Use regular main.jsx if no pages directory
-      entryPoint = join(root, 'src/main.jsx');
-      
-      if (!existsSync(entryPoint)) {
-        throw new Error('src/main.jsx not found. Create either src/main.jsx or src/pages/ directory.');
-      }
-    }
-    
-    // Update the Bun.build section in buildProduction function
-
-// Build with Bun's bundler
-const result = await Bun.build({
-  entrypoints: [join(root, 'src/main.jsx')],
-  outdir: outDir,
-  target: 'browser',
-  minify: true,
-  splitting: true,
-  sourcemap: 'external',
-  naming: {
-    entry: '[name]-[hash].js',
-    chunk: 'chunks/[name]-[hash].js',
-    asset: 'assets/[name]-[hash].[ext]'
-  }
-});
-
-if (!result.success) {
-  logger.error('Build failed!');
-  
-  // Log detailed errors
-  if (result.logs && result.logs.length > 0) {
-    logger.error('Detailed errors:');
-    result.logs.forEach((log, index) => {
-      logger.error(`  [${index + 1}] ${log.message}`);
-      if (log.location) {
-        logger.error(`       at ${log.location.file}:${log.location.line}:${log.location.column}`);
-      }
-    });
-  }
-  
-  process.exit(1);
-}
-  } catch (error) {
-    logger.error(`Compilation error: ${error.message}`);
-    throw error;
-  }
+// src/client/compiler.js
+import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { join, extname, relative } from 'path';
+import logger from '../logger/logger.js';
+
+export async function compileProject(root) {
+  logger.bigLog('COMPILING PROJECT', { color: 'blue' });
+  
+  const srcDir = join(root, 'src');
+  const pagesDir = join(srcDir, 'pages');
+  const outDir = join(root, '.bertui', 'compiled');
+  
+  if (!existsSync(srcDir)) {
+    logger.error('src/ directory not found!');
+    process.exit(1);
+  }
+  
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+    logger.info('Created .bertui/compiled/');
+  }
+  
+  let routes = [];
+  if (existsSync(pagesDir)) {
+    routes = await discoverRoutes(pagesDir);
+    logger.info(`Discovered ${routes.length} routes`);
+    
+    if (routes.length > 0) {
+      logger.bigLog('ROUTES DISCOVERED', { color: 'blue' });
+      logger.table(routes.map((r, i) => ({
+        '': i,
+        route: r.route,
+        file: r.file,
+        type: r.type
+      })));
+      
+      await generateRouter(routes, outDir, root);
+      logger.info('Generated router.js');
+    }
+  }
+  
+  const startTime = Date.now();
+  const stats = await compileDirectory(srcDir, outDir, root);
+  const duration = Date.now() - startTime;
+  
+  logger.success(`Compiled ${stats.files} files in ${duration}ms`);
+  logger.info(`Output: ${outDir}`);
+  
+  return { outDir, stats, routes };
+}
+
+async function discoverRoutes(pagesDir) {
+  const routes = [];
+  
+  async function scanDirectory(dir, basePath = '') {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      const relativePath = join(basePath, entry.name);
+      
+      if (entry.isDirectory()) {
+        await scanDirectory(fullPath, relativePath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name);
+        if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
+          const fileName = entry.name.replace(ext, '');
+          
+          let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
+          
+          if (fileName === 'index') {
+            route = route.replace('/index', '') || '/';
+          }
+          
+          const isDynamic = fileName.includes('[') && fileName.includes(']');
+          const type = isDynamic ? 'dynamic' : 'static';
+          
+          routes.push({
+            route: route === '' ? '/' : route,
+            file: relativePath,
+            path: fullPath,
+            type
+          });
+        }
+      }
+    }
+  }
+  
+  await scanDirectory(pagesDir);
+  
+  routes.sort((a, b) => {
+    if (a.type === b.type) {
+      return a.route.localeCompare(b.route);
+    }
+    return a.type === 'static' ? -1 : 1;
+  });
+  
+  return routes;
+}
+
+async function generateRouter(routes, outDir, root) {
+  const imports = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    const importPath = `./pages/${route.file.replace(/\\/g, '/')}`;
+    return `import ${componentName} from '${importPath}';`;
+  }).join('\n');
+  
+  const routeConfigs = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
+  }).join(',\n');
+  
+  const routerCode = `// Auto-generated router - DO NOT EDIT
+${imports}
+
+export const routes = [
+${routeConfigs}
+];
+
+export function matchRoute(pathname) {
+  for (const route of routes) {
+    if (route.type === 'static' && route.path === pathname) {
+      return route;
+    }
+  }
+  
+  for (const route of routes) {
+    if (route.type === 'dynamic') {
+      const pattern = route.path.replace(/\\[([^\\]]+)\\]/g, '([^/]+)');
+      const regex = new RegExp('^' + pattern + '$');
+      const match = pathname.match(regex);
+      
+      if (match) {
+        const paramNames = [...route.path.matchAll(/\\[([^\\]]+)\\]/g)].map(m => m[1]);
+        const params = {};
+        paramNames.forEach((name, i) => {
+          params[name] = match[i + 1];
+        });
+        
+        return { ...route, params };
+      }
+    }
+  }
+  
+  return null;
+}
+`;
+  
+  const routerPath = join(outDir, 'router.js');
+  await Bun.write(routerPath, routerCode);
+}
+
+async function compileDirectory(srcDir, outDir, root) {
+  const stats = { files: 0, skipped: 0 };
+  
+  const files = readdirSync(srcDir);
+  
+  for (const file of files) {
+    const srcPath = join(srcDir, file);
+    const stat = statSync(srcPath);
+    
+    if (stat.isDirectory()) {
+      const subOutDir = join(outDir, file);
+      mkdirSync(subOutDir, { recursive: true });
+      const subStats = await compileDirectory(srcPath, subOutDir, root);
+      stats.files += subStats.files;
+      stats.skipped += subStats.skipped;
+    } else {
+      const ext = extname(file);
+      const relativePath = relative(join(root, 'src'), srcPath);
+      
+      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+        await compileFile(srcPath, outDir, file, relativePath);
+        stats.files++;
+      } else if (ext === '.js' || ext === '.css') {
+        const outPath = join(outDir, file);
+        await Bun.write(outPath, Bun.file(srcPath));
+        logger.debug(`Copied: ${relativePath}`);
+        stats.files++;
+      } else {
+        logger.debug(`Skipped: ${relativePath}`);
+        stats.skipped++;
+      }
+    }
+  }
+  
+  return stats;
+}
+
+async function compileFile(srcPath, outDir, filename, relativePath) {
+  const ext = extname(filename);
+  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+  
+  try {
+    const transpiler = new Bun.Transpiler({ loader });
+    let code = await Bun.file(srcPath).text();
+    
+    // CRITICAL FIX: Resolve bare module specifiers
+    code = resolveBareImports(code);
+    
+    const compiled = await transpiler.transform(code);
+    
+    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
+    const outPath = join(outDir, outFilename);
+    
+    await Bun.write(outPath, compiled);
+    logger.debug(`Compiled: ${relativePath} → ${outFilename}`);
+  } catch (error) {
+    logger.error(`Failed to compile ${relativePath}: ${error.message}`);
+    throw error;
+  }
+}
+
+function resolveBareImports(code) {
+  // Replace bertui/styles with actual CSS path
+  code = code.replace(
+    /import\s+['"]bertui\/styles['"]/g,
+    "import '/styles/bertui.css'"
+  );
+  
+  // Replace bertui/router with actual router path
+  code = code.replace(
+    /from\s+['"]bertui\/router['"]/g,
+    "from '/compiled/router.js'"
+  );
+  
+  return code;
 }

package/src/config/defaultConfig.js

@@ -1,16 +1,16 @@
-export const defaultConfig = {
-  meta: {
-    title: "BertUI App",
-    description: "Built with BertUI - Lightning fast React development",
-    keywords: "react, bun, bertui",
-    author: "Pease Ernest",
-    ogImage: "/og-image.png",
-    themeColor: "#f30606ff",
-    lang: "en"
-  },
-  appShell: {
-    loading: true,
-    loadingText: "Loading...",
-    backgroundColor: "#ffffff"
-  }
+export const defaultConfig = {
+  meta: {
+    title: "BertUI App",
+    description: "Built with BertUI - Lightning fast React development",
+    keywords: "react, bun, bertui",
+    author: "Pease Ernest",
+    ogImage: "/og-image.png",
+    themeColor: "#f30606ff",
+    lang: "en"
+  },
+  appShell: {
+    loading: true,
+    loadingText: "Loading...",
+    backgroundColor: "#ffffff"
+  }
 };

package/src/config/loadConfig.js

@@ -1,33 +1,33 @@
-// src/config/loadConfig.js
-import { join } from 'path';
-import { existsSync } from 'fs';
-import { defaultConfig } from './defaultConfig.js';
-import logger from '../logger/logger.js';
-
-export async function loadConfig(root) {
-  const configPath = join(root, 'bertui.config.js');
-  
-  // Check if user created config
-  if (existsSync(configPath)) {
-    try {
-      const userConfig = await import(configPath);
-      logger.success('Loaded bertui.config.js');
-      
-      // Merge user config with defaults
-      return mergeConfig(defaultConfig, userConfig.default || userConfig);
-    } catch (error) {
-      logger.error(`Failed to load config. Make sure bertui.config.js is in the root directory: ${error.message}`);
-      return defaultConfig;
-    }
-  }
-  
-  logger.info('No config found, using defaults');
-  return defaultConfig;
-}
-
-function mergeConfig(defaults, user) {
-  return {
-    meta: { ...defaults.meta, ...(user.meta || {}) },
-    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
-  };
+// src/config/loadConfig.js
+import { join } from 'path';
+import { existsSync } from 'fs';
+import { defaultConfig } from './defaultConfig.js';
+import logger from '../logger/logger.js';
+
+export async function loadConfig(root) {
+  const configPath = join(root, 'bertui.config.js');
+  
+  // Check if user created config
+  if (existsSync(configPath)) {
+    try {
+      const userConfig = await import(configPath);
+      logger.success('Loaded bertui.config.js');
+      
+      // Merge user config with defaults
+      return mergeConfig(defaultConfig, userConfig.default || userConfig);
+    } catch (error) {
+      logger.error(`Failed to load config. Make sure bertui.config.js is in the root directory: ${error.message}`);
+      return defaultConfig;
+    }
+  }
+  
+  logger.info('No config found, using defaults');
+  return defaultConfig;
+}
+
+function mergeConfig(defaults, user) {
+  return {
+    meta: { ...defaults.meta, ...(user.meta || {}) },
+    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
+  };
 }

package/src/dev.js

@@ -1,23 +1,23 @@
-// src/dev.js
-import { compileProject } from './client/compiler.js';
-import { startDevServer } from './server/dev-server.js';
-import logger from './logger/logger.js';
-
-export async function startDev(options = {}) {
-  const root = options.root || process.cwd();
-  const port = options.port || 3000;
-  
-  try {
-    // Step 1: Compile project
-    logger.info('Step 1: Compiling project...');
-    await compileProject(root);
-    
-    // Step 2: Start dev server
-    logger.info('Step 2: Starting dev server...');
-    await startDevServer({ root, port });
-    
-  } catch (error) {
-    logger.error(`Dev server failed: ${error.message}`);
-    process.exit(1);
-  }
+// src/dev.js
+import { compileProject } from './client/compiler.js';
+import { startDevServer } from './server/dev-server.js';
+import logger from './logger/logger.js';
+
+export async function startDev(options = {}) {
+  const root = options.root || process.cwd();
+  const port = options.port || 3000;
+  
+  try {
+    // Step 1: Compile project
+    logger.info('Step 1: Compiling project...');
+    await compileProject(root);
+    
+    // Step 2: Start dev server
+    logger.info('Step 2: Starting dev server...');
+    await startDevServer({ root, port });
+    
+  } catch (error) {
+    logger.error(`Dev server failed: ${error.message}`);
+    process.exit(1);
+  }
 }

package/src/logger/logger.js

@@ -1,18 +1,18 @@
-// src/utils/logger.js
-import { createLogger } from 'ernest-logger';
-
-// Create logger instance for BertUI
-const logger = createLogger({
-  time: true,
-  emoji: true,
-  level: 'info',
-  prefix: '[BertUI]',
-  customLevels: {
-    server: { color: 'brightCyan', emoji: '🌐', priority: 2 },
-    build: { color: 'brightGreen', emoji: '📦', priority: 2 },
-    hmr: { color: 'brightYellow', emoji: '🔥', priority: 2 }
-  }
-});
-
-// Export the logger
+// src/utils/logger.js
+import { createLogger } from 'ernest-logger';
+
+// Create logger instance for BertUI
+const logger = createLogger({
+  time: true,
+  emoji: true,
+  level: 'info',
+  prefix: '[BertUI]',
+  customLevels: {
+    server: { color: 'brightCyan', emoji: '🌐', priority: 2 },
+    build: { color: 'brightGreen', emoji: '📦', priority: 2 },
+    hmr: { color: 'brightYellow', emoji: '🔥', priority: 2 }
+  }
+});
+
+// Export the logger
 export default logger;

package/src/logger/notes.md

@@ -1,20 +1,20 @@
-here we will use the ernest logger libraray instead of chalk because i want colourfull logs and not just normal b/w logs the whole module is exported for use in the libraray 
-it is a file that is complete and needs no updated later on 
-// src/utils/logger.js
-import { createLogger } from 'ernest-logger';
-
-// Create logger instance for BertUI
-const logger = createLogger({
-  time: true,
-  emoji: true,
-  level: 'info',
-  prefix: '[BertUI]',
-  customLevels: {
-    server: { color: 'brightCyan', emoji: '🌐', priority: 2 },
-    build: { color: 'brightGreen', emoji: '📦', priority: 2 },
-    hmr: { color: 'brightYellow', emoji: '🔥', priority: 2 }
-  }
-});
-
-// Export the logger
+here we will use the ernest logger libraray instead of chalk because i want colourfull logs and not just normal b/w logs the whole module is exported for use in the libraray 
+it is a file that is complete and needs no updated later on 
+// src/utils/logger.js
+import { createLogger } from 'ernest-logger';
+
+// Create logger instance for BertUI
+const logger = createLogger({
+  time: true,
+  emoji: true,
+  level: 'info',
+  prefix: '[BertUI]',
+  customLevels: {
+    server: { color: 'brightCyan', emoji: '🌐', priority: 2 },
+    build: { color: 'brightGreen', emoji: '📦', priority: 2 },
+    hmr: { color: 'brightYellow', emoji: '🔥', priority: 2 }
+  }
+});
+
+// Export the logger
 export default logger;