bertui 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",

package/src/build.js

@@ -1,52 +1,64 @@
 // src/build.js
 import { join } from 'path';
-import { existsSync, mkdirSync, rmSync, cpSync } from 'fs';
+import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
+import { extname, relative, dirname } from 'path';
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
+  const buildDir = join(root, '.bertuibuild');
   const outDir = join(root, 'dist');
   
   logger.bigLog('BUILDING FOR PRODUCTION', { color: 'green' });
   
-  // Clean dist folder
+  // Clean folders
+  if (existsSync(buildDir)) {
+    rmSync(buildDir, { recursive: true });
+  }
   if (existsSync(outDir)) {
     rmSync(outDir, { recursive: true });
     logger.info('Cleaned dist/');
   }
+  
+  mkdirSync(buildDir, { recursive: true });
   mkdirSync(outDir, { recursive: true });
   
   const startTime = Date.now();
   
   try {
-    // Step 1: Build CSS from BertUI library
-    logger.info('Step 1: Building CSS...');
+    // Step 1: Compile for production
+    logger.info('Step 1: Compiling for production...');
+    await compileForBuild(root, buildDir);
+    logger.success('Production compilation complete');
+    
+    // Step 2: Build CSS from BertUI library
+    logger.info('Step 2: Building CSS...');
     const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
     const bertuiCssDest = join(outDir, 'styles/bertui.min.css');
     await buildCSS(bertuiCssSource, bertuiCssDest);
     
-    // Step 2: Copy public assets if they exist
+    // Step 3: Copy public assets if they exist
     const publicDir = join(root, 'public');
     if (existsSync(publicDir)) {
-      logger.info('Step 2: Copying public assets...');
+      logger.info('Step 3: Copying public assets...');
       cpSync(publicDir, outDir, { recursive: true });
       logger.success('Public assets copied');
     } else {
-      logger.info('Step 2: No public directory found, skipping...');
+      logger.info('Step 3: No public directory found, skipping...');
     }
     
-    // Step 3: Build JavaScript with Bun's bundler
-    logger.info('Step 3: Bundling JavaScript...');
-    const mainEntry = join(root, 'src/main.jsx');
+    // Step 4: Build JavaScript with Bun's bundler
+    logger.info('Step 4: Bundling JavaScript...');
+    const buildEntry = join(buildDir, 'main.js');
     
-    if (!existsSync(mainEntry)) {
-      logger.error('Entry point not found: src/main.jsx');
+    if (!existsSync(buildEntry)) {
+      logger.error('Build entry point not found: .bertuibuild/main.js');
       process.exit(1);
     }
     
     const result = await Bun.build({
-      entrypoints: [mainEntry],
+      entrypoints: [buildEntry],
       outdir: join(outDir, 'assets'),
       target: 'browser',
       minify: true,
@@ -57,7 +69,7 @@ export async function buildProduction(options = {}) {
         chunk: 'chunks/[name]-[hash].js',
         asset: '[name]-[hash].[ext]'
       },
-      external: [] // Don't externalize anything for browser builds
+      external: ['react', 'react-dom']
     });
     
     if (!result.success) {
@@ -68,10 +80,14 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled');
     
-    // Step 4: Generate index.html
-    logger.info('Step 4: Generating index.html...');
+    // Step 5: Generate index.html
+    logger.info('Step 5: Generating index.html...');
     await generateProductionHTML(root, outDir, result);
     
+    // Step 6: Clean up build folder
+    rmSync(buildDir, { recursive: true });
+    logger.info('Cleaned up .bertuibuild/');
+    
     const duration = Date.now() - startTime;
     logger.success(`✨ Build complete in ${duration}ms`);
     logger.info(`📦 Output: ${outDir}`);
@@ -82,17 +98,337 @@ export async function buildProduction(options = {}) {
       size: `${(o.size / 1024).toFixed(2)} KB`
     })));
     
+    // Show deployment instructions
+    logger.bigLog('READY TO DEPLOY', { color: 'green' });
+    console.log('\n📤 Deploy your app:\n');
+    console.log('  Vercel:  bunx vercel');
+    console.log('  Netlify: bunx netlify deploy');
+    console.log('\n🔍 Preview locally:\n');
+    console.log('  bun run preview\n');
+    
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
     if (error.stack) {
       logger.error(error.stack);
     }
+    
+    // Clean up on error
+    if (existsSync(buildDir)) {
+      rmSync(buildDir, { recursive: true });
+    }
+    
     process.exit(1);
   }
 }
 
+async function compileForBuild(root, buildDir) {
+  const srcDir = join(root, 'src');
+  const pagesDir = join(srcDir, 'pages');
+  
+  if (!existsSync(srcDir)) {
+    throw new Error('src/ directory not found!');
+  }
+  
+  // Discover routes
+  let routes = [];
+  if (existsSync(pagesDir)) {
+    routes = await discoverRoutes(pagesDir);
+    logger.info(`Found ${routes.length} routes`);
+  }
+  
+  // Compile all source files
+  await compileBuildDirectory(srcDir, buildDir, root);
+  
+  // Generate router if we have routes
+  if (routes.length > 0) {
+    await generateBuildRouter(routes, buildDir);
+    logger.info('Generated router for build');
+  }
+}
+
+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.replace(/\\/g, '/'),
+            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 generateBuildRouter(routes, buildDir) {
+  const imports = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    const importPath = `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
+    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 = `import React, { useState, useEffect, createContext, useContext } from 'react';
+
+const RouterContext = createContext(null);
+
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a Router component');
+  }
+  return context;
+}
+
+export function Router({ routes }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+
+  useEffect(() => {
+    matchAndSetRoute(window.location.pathname);
+
+    const handlePopState = () => {
+      matchAndSetRoute(window.location.pathname);
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [routes]);
+
+  function matchAndSetRoute(pathname) {
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+
+    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 extractedParams = {};
+          paramNames.forEach((name, i) => {
+            extractedParams[name] = match[i + 1];
+          });
+
+          setCurrentRoute(route);
+          setParams(extractedParams);
+          return;
+        }
+      }
+    }
+
+    setCurrentRoute(null);
+    setParams({});
+  }
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
+  }
+
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: window.location.pathname
+  };
+
+  const Component = currentRoute?.component;
+
+  return React.createElement(
+    RouterContext.Provider,
+    { value: routerValue },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
+  );
+}
+
+export function Link({ to, children, ...props }) {
+  const { navigate } = useRouter();
+
+  function handleClick(e) {
+    e.preventDefault();
+    navigate(to);
+  }
+
+  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
+}
+
+function NotFound() {
+  return React.createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        fontFamily: 'system-ui'
+      }
+    },
+    React.createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
+    React.createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
+    React.createElement('a', { 
+      href: '/', 
+      style: { color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' } 
+    }, 'Go home')
+  );
+}
+
+${imports}
+
+export const routes = [
+${routeConfigs}
+];
+`;
+  
+  await Bun.write(join(buildDir, 'router.js'), routerCode);
+}
+
+async function compileBuildDirectory(srcDir, buildDir, root) {
+  const files = readdirSync(srcDir);
+  
+  for (const file of files) {
+    const srcPath = join(srcDir, file);
+    const stat = statSync(srcPath);
+    
+    if (stat.isDirectory()) {
+      const subBuildDir = join(buildDir, file);
+      mkdirSync(subBuildDir, { recursive: true });
+      await compileBuildDirectory(srcPath, subBuildDir, root);
+    } else {
+      const ext = extname(file);
+      
+      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+        await compileBuildFile(srcPath, buildDir, file, root);
+      } else if (ext === '.js') {
+        const outPath = join(buildDir, file);
+        let code = await Bun.file(srcPath).text();
+        code = fixBuildImports(code, srcPath, outPath, root);
+        await Bun.write(outPath, code);
+      }
+    }
+  }
+}
+
+async function compileBuildFile(srcPath, buildDir, filename, root) {
+  const ext = extname(filename);
+  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+  
+  try {
+    let code = await Bun.file(srcPath).text();
+    
+    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
+    const outPath = join(buildDir, outFilename);
+    
+    code = fixBuildImports(code, srcPath, outPath, root);
+    
+    const transpiler = new Bun.Transpiler({ 
+      loader,
+      tsconfig: {
+        compilerOptions: {
+          jsx: 'react',
+          jsxFactory: 'React.createElement',
+          jsxFragmentFactory: 'React.Fragment'
+        }
+      }
+    });
+    
+    let compiled = await transpiler.transform(code);
+    
+    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+      compiled = `import React from 'react';\n${compiled}`;
+    }
+    
+    compiled = fixRelativeImports(compiled);
+    
+    await Bun.write(outPath, compiled);
+  } catch (error) {
+    logger.error(`Failed to compile ${filename}: ${error.message}`);
+    throw error;
+  }
+}
+
+function fixBuildImports(code, srcPath, outPath, root) {
+  // Remove bertui/styles imports
+  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+  
+  const buildDir = join(root, '.bertuibuild');
+  const routerPath = join(buildDir, 'router.js');
+  
+  // Calculate relative path from output file to router.js
+  const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
+  const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
+  
+  // Replace bertui/router imports
+  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';`;
+  });
+  
+  return code;
+}
+
 async function generateProductionHTML(root, outDir, buildResult) {
-  // Find the main bundle
   const mainBundle = buildResult.outputs.find(o => 
     o.path.includes('main') && o.kind === 'entry-point'
   );
@@ -111,6 +447,14 @@ async function generateProductionHTML(root, outDir, buildResult) {
   <meta name="description" content="Built with BertUI - Lightning fast React development">
   <title>BertUI App</title>
   <link rel="stylesheet" href="/styles/bertui.min.css">
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0",
+      "react-dom": "https://esm.sh/react-dom@18.2.0"
+    }
+  }
+  </script>
 </head>
 <body>
   <div id="root"></div>

package/src/client/compiler.js

@@ -1,349 +1,3 @@
-// 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
-//       })));
-//     }
-//   }
-  
-//   const startTime = Date.now();
-//   const stats = await compileDirectory(srcDir, outDir, root);
-//   const duration = Date.now() - startTime;
-  
-//   if (routes.length > 0) {
-//     await generateRouter(routes, outDir, root);
-//     logger.info('Generated router.js');
-//   }
-  
-//   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.replace(/\\/g, '/'),
-//             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(/\.(jsx|tsx|ts)$/, '.js')}`;
-//     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 routerComponentCode = `import React, { useState, useEffect, createContext, useContext } from 'react';
-
-// const RouterContext = createContext(null);
-
-// export function useRouter() {
-//   const context = useContext(RouterContext);
-//   if (!context) {
-//     throw new Error('useRouter must be used within a Router component');
-//   }
-//   return context;
-// }
-
-// export function Router({ routes }) {
-//   const [currentRoute, setCurrentRoute] = useState(null);
-//   const [params, setParams] = useState({});
-
-//   useEffect(() => {
-//     matchAndSetRoute(window.location.pathname);
-
-//     const handlePopState = () => {
-//       matchAndSetRoute(window.location.pathname);
-//     };
-
-//     window.addEventListener('popstate', handlePopState);
-//     return () => window.removeEventListener('popstate', handlePopState);
-//   }, [routes]);
-
-//   function matchAndSetRoute(pathname) {
-//     for (const route of routes) {
-//       if (route.type === 'static' && route.path === pathname) {
-//         setCurrentRoute(route);
-//         setParams({});
-//         return;
-//       }
-//     }
-
-//     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 extractedParams = {};
-//           paramNames.forEach((name, i) => {
-//             extractedParams[name] = match[i + 1];
-//           });
-
-//           setCurrentRoute(route);
-//           setParams(extractedParams);
-//           return;
-//         }
-//       }
-//     }
-
-//     setCurrentRoute(null);
-//     setParams({});
-//   }
-
-//   function navigate(path) {
-//     window.history.pushState({}, '', path);
-//     matchAndSetRoute(path);
-//   }
-
-//   const routerValue = {
-//     currentRoute,
-//     params,
-//     navigate,
-//     pathname: window.location.pathname
-//   };
-
-//   const Component = currentRoute?.component;
-
-//   return React.createElement(
-//     RouterContext.Provider,
-//     { value: routerValue },
-//     Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
-//   );
-// }
-
-// export function Link({ to, children, ...props }) {
-//   const { navigate } = useRouter();
-
-//   function handleClick(e) {
-//     e.preventDefault();
-//     navigate(to);
-//   }
-
-//   return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
-// }
-
-// function NotFound() {
-//   return React.createElement(
-//     'div',
-//     {
-//       style: {
-//         display: 'flex',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         minHeight: '100vh',
-//         fontFamily: 'system-ui'
-//       }
-//     },
-//     React.createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
-//     React.createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
-//     React.createElement('a', { 
-//       href: '/', 
-//       style: { color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' } 
-//     }, 'Go home')
-//   );
-// }
-
-// ${imports}
-
-// export const routes = [
-// ${routeConfigs}
-// ];
-// `;
-  
-//   const routerPath = join(outDir, 'router.js');
-//   await Bun.write(routerPath, routerComponentCode);
-// }
-
-// 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') {
-//         const outPath = join(outDir, file);
-//         let code = await Bun.file(srcPath).text();
-        
-//         code = fixImports(code);
-        
-//         await Bun.write(outPath, code);
-//         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 {
-//     let code = await Bun.file(srcPath).text();
-    
-//     code = fixImports(code);
-    
-//     const transpiler = new Bun.Transpiler({ 
-//       loader,
-//       tsconfig: {
-//         compilerOptions: {
-//           jsx: 'react',
-//           jsxFactory: 'React.createElement',
-//           jsxFragmentFactory: 'React.Fragment'
-//         }
-//       }
-//     });
-//     let compiled = await transpiler.transform(code);
-    
-//     if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
-//       compiled = `import React from 'react';\n${compiled}`;
-//     }
-    
-//     compiled = fixRelativeImports(compiled);
-    
-//     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 fixImports(code) {
-//   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
-  
-//   code = code.replace(
-//     /from\s+['"]bertui\/router['"]/g,
-//     "from '/compiled/router.js'"
-//   );
-  
-//   code = code.replace(
-//     /from\s+['"]\.\.\/\.bertui\/compiled\/([^'"]+)['"]/g,
-//     "from '/compiled/$1'"
-//   );
-  
-//   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';`;
-//   });
-  
-//   return code;
-// }
-
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative } from 'path';
 import logger from '../logger/logger.js';
@@ -602,13 +256,13 @@ async function compileDirectory(srcDir, outDir, root) {
       const relativePath = relative(join(root, 'src'), srcPath);
       
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileFile(srcPath, outDir, file, relativePath, root);
+        await compileFile(srcPath, outDir, file, relativePath);
         stats.files++;
       } else if (ext === '.js') {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        code = fixImports(code, srcPath, root);
+        code = fixImports(code);
         
         await Bun.write(outPath, code);
         logger.debug(`Copied: ${relativePath}`);
@@ -623,14 +277,14 @@ async function compileDirectory(srcDir, outDir, root) {
   return stats;
 }
 
-async function compileFile(srcPath, outDir, filename, relativePath, root) {
+async function compileFile(srcPath, outDir, filename, relativePath) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
   
   try {
     let code = await Bun.file(srcPath).text();
     
-    code = fixImports(code, srcPath, root);
+    code = fixImports(code);
     
     const transpiler = new Bun.Transpiler({ 
       loader,
@@ -661,34 +315,18 @@ async function compileFile(srcPath, outDir, filename, relativePath, root) {
   }
 }
 
-function fixImports(code, srcPath, root) {
-  // Remove bertui/styles imports
+function fixImports(code) {
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   
-  // Check if this is main.jsx - it will be in src/main.jsx
-  const isMainFile = srcPath.includes('main.jsx') || srcPath.includes('main.js');
+  code = code.replace(
+    /from\s+['"]bertui\/router['"]/g,
+    "from '/compiled/router.js'"
+  );
   
-  if (isMainFile) {
-    // For main.jsx: router.js is in the same compiled directory
-    code = code.replace(
-      /from\s+['"]bertui\/router['"]/g,
-      "from './router.js'"
-    );
-    code = code.replace(
-      /from\s+['"]\/compiled\/router\.js['"]/g,
-      "from './router.js'"
-    );
-    code = code.replace(
-      /from\s+['"]\.\.\/\.bertui\/compiled\/router\.js['"]/g,
-      "from './router.js'"
-    );
-  } else {
-    // For page components: router.js is up one level from pages/
-    code = code.replace(
-      /from\s+['"]bertui\/router['"]/g,
-      "from '../router.js'"
-    );
-  }
+  code = code.replace(
+    /from\s+['"]\.\.\/\.bertui\/compiled\/([^'"]+)['"]/g,
+    "from '/compiled/$1'"
+  );
   
   return code;
 }
@@ -704,4 +342,5 @@ function fixRelativeImports(code) {
   });
   
   return code;
-}
+}
+