bertui 0.1.5 → 0.1.6

package/index.js

@@ -32,5 +32,5 @@ export default {
     buildCSS,
     copyCSS,
     program,
-    version: "0.1.5"
+    version: "0.1.6"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -10,7 +10,8 @@
   "exports": {
     ".": "./index.js",
     "./styles": "./src/styles/bertui.css",
-    "./logger": "./src/logger/logger.js"
+    "./logger": "./src/logger/logger.js",
+    "./router": "./src/router/Router.jsx"
   },
   "files": [
     "bin",

package/src/client/compiler.js

@@ -1,91 +1,226 @@
 // src/client/compiler.js
-import { join } from 'path';
-import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { join, extname, relative, sep } from 'path';
 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');
+  logger.bigLog('COMPILING PROJECT', { color: 'blue' });
   
-  // Ensure compiled directory exists
-  if (!existsSync(compiledDir)) {
-    mkdirSync(compiledDir, { recursive: true });
+  const srcDir = join(root, 'src');
+  const pagesDir = join(srcDir, 'pages');
+  const outDir = join(root, '.bertui', 'compiled');
+  
+  // Check if src exists
+  if (!existsSync(srcDir)) {
+    logger.error('src/ directory not found!');
+    process.exit(1);
   }
   
-  const startTime = Date.now();
+  // Create output directory
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+    logger.info('Created .bertui/compiled/');
+  }
   
-  try {
-    // Check if routing is enabled (pages directory exists)
-    const pagesDir = join(root, 'src', 'pages');
-    const useRouting = existsSync(pagesDir);
+  // Discover routes if pages directory exists
+  let routes = [];
+  if (existsSync(pagesDir)) {
+    routes = await discoverRoutes(pagesDir);
+    logger.info(`Discovered ${routes.length} routes`);
     
-    let entryPoint;
-    let routes = [];
-    
-    if (useRouting) {
-      logger.info('📁 File-based routing enabled');
-      
-      // Generate routes
-      routes = generateRoutes(root);
-      logRoutes(routes);
+    // Display routes table
+    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
+      })));
       
-      // Generate router code
-      const routerCode = generateRouterCode(routes);
-      const routerPath = join(routerDir, 'router.js');
-      writeFileSync(routerPath, routerCode);
+      // Generate router file
+      await generateRouter(routes, outDir);
       logger.info('Generated router.js');
+    }
+  }
+  
+  // Compile all files
+  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);
       
-      // 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.');
+      if (entry.isDirectory()) {
+        // Recursively scan subdirectories
+        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, '');
+          
+          // Generate route path
+          let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
+          
+          // Handle index files
+          if (fileName === 'index') {
+            route = route.replace('/index', '') || '/';
+          }
+          
+          // Determine route type
+          const isDynamic = fileName.includes('[') && fileName.includes(']');
+          const type = isDynamic ? 'dynamic' : 'static';
+          
+          routes.push({
+            route: route === '' ? '/' : route,
+            file: relativePath,
+            path: fullPath,
+            type
+          });
+        }
       }
     }
-    
-    // Update the Bun.build section in buildProduction function
+  }
+  
+  await scanDirectory(pagesDir);
+  
+  // Sort routes: static routes first, then dynamic
+  routes.sort((a, b) => {
+    if (a.type === b.type) {
+      return a.route.localeCompare(b.route);
+    }
+    return a.type === 'static' ? -1 : 1;
+  });
+  
+  return routes;
+}
 
-// 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]'
+async function generateRouter(routes, outDir) {
+  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) {
+  // Try exact match first
+  for (const route of routes) {
+    if (route.type === 'static' && route.path === pathname) {
+      return route;
+    }
   }
-});
+  
+  // Try dynamic routes
+  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) {
+        // Extract params
+        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);
+}
 
-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}`);
+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()) {
+      // Recursively compile subdirectories
+      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 {
+      // Compile file
+      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') {
+        // Copy as-is
+        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++;
       }
-    });
+    }
   }
   
-  process.exit(1);
+  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 });
+    const code = await Bun.file(srcPath).text();
+    const compiled = await transpiler.transform(code);
+    
+    // Change extension to .js
+    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(`Compilation error: ${error.message}`);
+    logger.error(`Failed to compile ${relativePath}: ${error.message}`);
     throw error;
   }
 }

package/src/router/router.js

@@ -1,216 +1,129 @@
-// src/router/router.js
-import { join, relative, parse } from 'path';
-import { readdirSync, statSync, existsSync } from 'fs';
-import logger from 'ernest-logger'; // Assuming Ernest Logger is used
-
-/**
- * Scans the pages directory and generates route definitions
- */
-export function generateRoutes(root) {
-  const pagesDir = join(root, 'src', 'pages');
-  
-  if (!existsSync(pagesDir)) {
-    return [];
-  }
-  
-  const routes = [];
-  
-  function scanDirectory(dir, basePath = '') {
-    const entries = readdirSync(dir);
-    
-    for (const entry of entries) {
-      const fullPath = join(dir, entry);
-      const stat = statSync(fullPath);
-      
-      if (stat.isDirectory()) {
-        // Recursively scan subdirectories
-        scanDirectory(fullPath, join(basePath, entry));
-      } else if (stat.isFile() && /\.(jsx?|tsx?)$/.test(entry)) {
-        const parsed = parse(entry);
-        let fileName = parsed.name;
-        
-        // Skip non-page files (e.g., those starting with a dot)
-        if (fileName.startsWith('.') || fileName.startsWith('~')) {
-          continue;
-        }
-        
-        // --- ROUTE PATH GENERATION ---
-        
-        // Handle dynamic routes: _filename -> :filename
-        let isDynamic = false;
-        if (fileName.startsWith('_')) {
-          fileName = fileName.slice(1); // Remove the underscore
-          isDynamic = true;
-        }
+// src/router/Router.jsx
+import { useState, useEffect, createContext, useContext } from 'react';
 
-        // Generate route path
-        let routePath = join(basePath, fileName === 'index' ? '' : fileName);
-        routePath = '/' + routePath.replace(/\\/g, '/'); // Use forward slashes
-        
-        // Apply dynamic parameter if detected
-        if (isDynamic) {
-            // Replace the last part of the route path with the dynamic parameter (e.g., /blog/slug -> /blog/:slug)
-            routePath = routePath.replace(new RegExp(`/${fileName}$`), `/:${fileName}`);
-        }
-        
-        // Handle the root path, ensuring it's just '/'
-        if (routePath === '//') {
-            routePath = '/';
-        }
+// Router context
+const RouterContext = createContext(null);
 
-        // Get relative path from pages dir (used for imports in generated code)
-        const relativePath = relative(pagesDir, fullPath);
-        
-        routes.push({
-          path: routePath,
-          file: relativePath,
-          component: fullPath,
-          isDynamic: isDynamic || routePath.includes(':') 
-        });
-      }
-    }
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a Router component');
   }
-  
-  scanDirectory(pagesDir);
-  
-  // Sort routes: Root path first, then static, then dynamic
-  routes.sort((a, b) => {
-    if (a.path === '/') return -1; 
-    if (b.path === '/') return 1;
-    if (a.isDynamic && !b.isDynamic) return 1;
-    if (!a.isDynamic && b.isDynamic) return -1;
-    return a.path.localeCompare(b.path);
-  });
-  
-  return routes;
+  return context;
 }
 
-/**
- * Generates the router client code
- */
-export function generateRouterCode(routes) {
-  const imports = routes.map((route, index) => 
-    `import Page${index} from '../src/pages/${route.file.replace(/\\/g, '/')}';`
-  ).join('\n');
-  
-  const routeConfigs = routes.map((route, index) => ({
-    path: route.path,
-    component: `Page${index}`
-  }));
-  
-  return `
-// Auto-generated router code - DO NOT EDIT MANUALLY
-import React, { useState, useEffect } from 'react';
-${imports}
-
-const routes = ${JSON.stringify(routeConfigs, null, 2).replace(/"Page(\d+)"/g, 'Page$1')};
-
-export function Router() {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
-  
+export function useParams() {
+  const { params } = useRouter();
+  return params;
+}
+
+export function Router({ routes, children }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+
   useEffect(() => {
+    // Match initial route
+    matchAndSetRoute(window.location.pathname);
+
+    // Handle browser navigation
     const handlePopState = () => {
-      setCurrentPath(window.location.pathname);
+      matchAndSetRoute(window.location.pathname);
     };
-    
+
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
-  
-  // Match current path to route
-  const matchedRoute = routes.find(route => {
-    if (route.path === currentPath) return true;
-    
-    // Handle dynamic routes (simple static matching for now)
-    const routeParts = route.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    if (routeParts.length !== pathParts.length) return false;
-    
-    return routeParts.every((part, i) => {
-      if (part.startsWith(':')) return true; // Match any value for dynamic part
-      return part === pathParts[i];
-    });
-  });
-  
-  if (!matchedRoute) {
-    return <div style={{ padding: '2rem', textAlign: 'center' }}>
-      <h1>404 - Page Not Found</h1>
-      <p>The page "{currentPath}" does not exist.</p>
-      <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Go Home</a>
-    </div>;
-  }
-  
-  // Extract params from dynamic routes
-  const params = {};
-  if (matchedRoute.path.includes(':')) {
-    const routeParts = matchedRoute.path.split('/');
-    const pathParts = currentPath.split('/');
-    
-    routeParts.forEach((part, i) => {
-      if (part.startsWith(':')) {
-        const paramName = part.slice(1);
-        params[paramName] = pathParts[i];
+
+  function matchAndSetRoute(pathname) {
+    // Try exact match first (static routes)
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+
+    // Try dynamic routes
+    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) {
+          // Extract params
+          const paramNames = [...route.path.matchAll(/\[([^\]]+)\]/g)].map(m => m[1]);
+          const extractedParams = {};
+          paramNames.forEach((name, i) => {
+            extractedParams[name] = match[i + 1];
+          });
+
+          setCurrentRoute(route);
+          setParams(extractedParams);
+          return;
+        }
       }
-    });
+    }
+
+    // No match found - 404
+    setCurrentRoute(null);
+    setParams({});
+  }
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
   }
-  
-  const Component = matchedRoute.component;
-  return <Component params={params} />;
-}
 
-// Client-side navigation
-export function navigate(path) {
-  window.history.pushState({}, '', path);
-  window.dispatchEvent(new PopStateEvent('popstate'));
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: window.location.pathname
+  };
+
+  return (
+    <RouterContext.Provider value={routerValue}>
+      {currentRoute ? (
+        <currentRoute.component />
+      ) : (
+        children || <NotFound />
+      )}
+    </RouterContext.Provider>
+  );
 }
 
-// Link component for navigation
-export function Link({ href, children, ...props }) {
-  const handleClick = (e) => {
+export function Link({ to, children, className, ...props }) {
+  const { navigate } = useRouter();
+
+  function handleClick(e) {
     e.preventDefault();
-    navigate(href);
-  };
-  
+    navigate(to);
+  }
+
   return (
-    <a href={href} onClick={handleClick} {...props}>
+    <a href={to} onClick={handleClick} className={className} {...props}>
       {children}
     </a>
   );
 }
-`;
-}
 
-/**
- * Generates the main entry point with router
- */
-export function generateMainWithRouter(routes) {
-  return `
-import 'bertui/styles';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { Router } from './.bertui/router.js';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <Router />
-);
-`;
-}
-
-export function logRoutes(routes) {
-  if (routes.length === 0) {
-    logger.warn('No routes found in src/pages/');
-    logger.info('Create files in src/pages/ to define routes:');
-    logger.info('  src/pages/index.jsx     → /');
-    logger.info('  src/pages/about.jsx     → /about');
-    logger.info('  src/pages/user/_id.jsx  → /user/:id'); // Updated tip
-    return;
-  }
-  
-  logger.bigLog('ROUTES DISCOVERED', { color: 'cyan' });
-  logger.table(routes.map(r => ({
-    route: r.path,
-    file: r.file,
-    type: r.isDynamic ? 'dynamic' : 'static'
-  })));
+function NotFound() {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100vh',
+      fontFamily: 'system-ui, sans-serif'
+    }}>
+      <h1 style={{ fontSize: '6rem', margin: 0 }}>404</h1>
+      <p style={{ fontSize: '1.5rem', color: '#666' }}>Page not found</p>
+      <a href="/" style={{ color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' }}>
+        Go home
+      </a>
+    </div>
+  );
 }

package/src/server/dev-server.js

@@ -12,28 +12,49 @@ export async function startDevServer(options = {}) {
   const compiledDir = join(root, '.bertui', 'compiled');
   
   const clients = new Set();
+  let hasRouter = false;
+  
+  // Check if router exists
+  const routerPath = join(compiledDir, 'router.js');
+  if (existsSync(routerPath)) {
+    hasRouter = true;
+    logger.info('Router-based routing enabled');
+  }
   
   const app = new Elysia()
+    // Main HTML route - serves all pages
     .get('/', async () => {
-      const html = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BertUI App - Dev</title>
-  <link rel="stylesheet" href="/styles/bertui.css">
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/hmr-client.js"></script>
-  <script type="module" src="/compiled/main.js"></script>
-</body>
-</html>`;
+      return serveHTML(root, hasRouter);
+    })
+    
+    // Catch-all route for SPA routing
+    .get('/*', async ({ params, set }) => {
+      const path = params['*'];
       
-      return new Response(html, {
-        headers: { 'Content-Type': 'text/html' }
-      });
+      // Check if it's a file request
+      if (path.includes('.')) {
+        // Try to serve as static file
+        const filePath = join(compiledDir, path);
+        const file = Bun.file(filePath);
+        
+        if (await file.exists()) {
+          const ext = extname(path);
+          const contentType = getContentType(ext);
+          
+          return new Response(await file.text(), {
+            headers: { 
+              'Content-Type': contentType,
+              'Cache-Control': 'no-store'
+            }
+          });
+        }
+        
+        set.status = 404;
+        return 'File not found';
+      }
+      
+      // For non-file routes, serve the main HTML (SPA mode)
+      return serveHTML(root, hasRouter);
     })
     
     .get('/hmr-client.js', () => {
@@ -111,9 +132,7 @@ ws.onclose = () => {
       }
       
       const ext = extname(filepath);
-      const contentType = ext === '.js' ? 'application/javascript' : 
-                         ext === '.css' ? 'text/css' :
-                         'text/plain';
+      const contentType = getContentType(ext);
       
       return new Response(await file.text(), {
         headers: { 
@@ -148,12 +167,62 @@ ws.onclose = () => {
   logger.info(`📁 Serving: ${root}`);
   
   // Watch for file changes
-  setupWatcher(root, compiledDir, clients);
+  setupWatcher(root, compiledDir, clients, () => {
+    // Check router status on recompile
+    hasRouter = existsSync(join(compiledDir, 'router.js'));
+  });
   
   return app;
 }
 
-function setupWatcher(root, compiledDir, clients) {
+function serveHTML(root, hasRouter) {
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BertUI App - Dev</title>
+  <link rel="stylesheet" href="/styles/bertui.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/hmr-client.js"></script>
+  ${hasRouter 
+    ? '<script type="module" src="/compiled/router.js"></script>' 
+    : ''
+  }
+  <script type="module" src="/compiled/main.js"></script>
+</body>
+</html>`;
+  
+  return new Response(html, {
+    headers: { 'Content-Type': 'text/html' }
+  });
+}
+
+function getContentType(ext) {
+  const types = {
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.html': 'text/html',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.eot': 'application/vnd.ms-fontobject'
+  };
+  
+  return types[ext] || 'text/plain';
+}
+
+function setupWatcher(root, compiledDir, clients, onRecompile) {
   const srcDir = join(root, 'src');
   
   if (!existsSync(srcDir)) {
@@ -183,6 +252,11 @@ function setupWatcher(root, compiledDir, clients) {
       try {
         await compileProject(root);
         
+        // Call callback to update router status
+        if (onRecompile) {
+          onRecompile();
+        }
+        
         // Notify clients to reload
         for (const client of clients) {
           try {