bertui 0.1.7 → 0.1.9

package/README.md

@@ -18,7 +18,7 @@ bun add bertui react react-dom
 ## Usage
 ```javascript
 // src/main.jsx
-import 'bertui/styles';
+;
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 

package/index.js

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

package/package.json

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

package/src/client/compiler.js

@@ -33,9 +33,6 @@ export async function compileProject(root) {
         file: r.file,
         type: r.type
       })));
-      
-      await generateRouter(routes, outDir, root);
-      logger.info('Generated router.js');
     }
   }
   
@@ -43,6 +40,12 @@ export async function compileProject(root) {
   const stats = await compileDirectory(srcDir, outDir, root);
   const duration = Date.now() - startTime;
   
+  // Generate router AFTER compilation
+  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}`);
   
@@ -77,7 +80,7 @@ async function discoverRoutes(pagesDir) {
           
           routes.push({
             route: route === '' ? '/' : route,
-            file: relativePath,
+            file: relativePath.replace(/\\/g, '/'),
             path: fullPath,
             type
           });
@@ -101,7 +104,7 @@ async function discoverRoutes(pagesDir) {
 async function generateRouter(routes, outDir, root) {
   const imports = routes.map((route, i) => {
     const componentName = `Page${i}`;
-    const importPath = `./pages/${route.file.replace(/\\/g, '/')}`;
+    const importPath = `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
     return `import ${componentName} from '${importPath}';`;
   }).join('\n');
   
@@ -192,13 +195,16 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   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);
+    // Remove bertui/styles imports
+    code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+    
+    const transpiler = new Bun.Transpiler({ loader });
+    let compiled = await transpiler.transform(code);
     
-    const compiled = await transpiler.transform(code);
+    // CRITICAL FIX: Add .js extensions to all relative imports
+    compiled = fixRelativeImports(compiled);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
     const outPath = join(outDir, outFilename);
@@ -211,18 +217,20 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   }
 }
 
-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'"
-  );
+function fixRelativeImports(code) {
+  // Match import statements with relative paths that don't already have extensions
+  // Matches: import X from './path' or import X from '../path' 
+  // But NOT: import X from './path.js' or import X from 'package'
+  
+  const importRegex = /from\s+['"](\.\.[\/\\]|\.\/)((?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json))['"];?/g;
+  
+  code = code.replace(importRegex, (match, prefix, path) => {
+    // Don't add .js if path already has an extension or ends with /
+    if (path.endsWith('/') || /\.\w+$/.test(path)) {
+      return match;
+    }
+    return `from '${prefix}${path}.js';`;
+  });
   
   return code;
 }

package/src/server/dev-server.js

@@ -14,7 +14,6 @@ export async function startDevServer(options = {}) {
   const clients = new Set();
   let hasRouter = false;
   
-  // Check if router exists
   const routerPath = join(compiledDir, 'router.js');
   if (existsSync(routerPath)) {
     hasRouter = true;
@@ -22,28 +21,21 @@ export async function startDevServer(options = {}) {
   }
   
   const app = new Elysia()
-    // Main HTML route - serves all pages
     .get('/', async () => {
       return serveHTML(root, hasRouter);
     })
     
-    // Catch-all route for SPA routing
     .get('/*', async ({ params, set }) => {
       const path = params['*'];
       
-      // Check if it's a file request
       if (path.includes('.')) {
-        // Try to serve compiled files
         if (path.startsWith('compiled/')) {
           const filePath = join(compiledDir, path.replace('compiled/', ''));
           const file = Bun.file(filePath);
           
           if (await file.exists()) {
             const ext = extname(path);
-            // CRITICAL FIX: Serve .js files with correct MIME type
-            const contentType = ext === '.js' || ext === '.jsx' 
-              ? 'application/javascript' 
-              : getContentType(ext);
+            const contentType = ext === '.js' ? 'application/javascript' : getContentType(ext);
             
             return new Response(await file.text(), {
               headers: { 
@@ -58,7 +50,6 @@ export async function startDevServer(options = {}) {
         return 'File not found';
       }
       
-      // For non-file routes, serve the main HTML (SPA mode)
       return serveHTML(root, hasRouter);
     })
     
@@ -108,25 +99,6 @@ ws.onclose = () => {
       }
     })
     
-    // Serve BertUI CSS
-    .get('/styles/bertui.css', async ({ set }) => {
-      const cssPath = join(import.meta.dir, '../styles/bertui.css');
-      const file = Bun.file(cssPath);
-      
-      if (!await file.exists()) {
-        set.status = 404;
-        return 'CSS file not found';
-      }
-      
-      return new Response(await file.text(), {
-        headers: { 
-          'Content-Type': 'text/css',
-          'Cache-Control': 'no-store'
-        }
-      });
-    })
-    
-    // Serve compiled files with correct MIME types
     .get('/compiled/*', async ({ params, set }) => {
       const filepath = join(compiledDir, params['*']);
       const file = Bun.file(filepath);
@@ -137,10 +109,7 @@ ws.onclose = () => {
       }
       
       const ext = extname(filepath);
-      // CRITICAL FIX: Always serve .js files with JavaScript MIME type
-      const contentType = ext === '.js' 
-        ? 'application/javascript' 
-        : getContentType(ext);
+      const contentType = ext === '.js' ? 'application/javascript' : getContentType(ext);
       
       return new Response(await file.text(), {
         headers: { 
@@ -150,7 +119,6 @@ ws.onclose = () => {
       });
     })
     
-    // Serve public assets
     .get('/public/*', async ({ params, set }) => {
       const publicDir = join(root, 'public');
       const filepath = join(publicDir, params['*']);
@@ -174,7 +142,6 @@ ws.onclose = () => {
   logger.success(`🚀 Server running at http://localhost:${port}`);
   logger.info(`📁 Serving: ${root}`);
   
-  // Watch for file changes
   setupWatcher(root, compiledDir, clients, () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
   });
@@ -190,7 +157,30 @@ function serveHTML(root, hasRouter) {
   <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">
+  
+  <!-- Import Map for React and dependencies -->
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0",
+      "react-dom": "https://esm.sh/react-dom@18.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+      "bertui/router": "/compiled/router.js"
+    }
+  }
+  </script>
+  
+  <style>
+    /* Inline basic styles since we're skipping CSS for now */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+  </style>
 </head>
 <body>
   <div id="root"></div>
@@ -220,11 +210,7 @@ function getContentType(ext) {
     '.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'
+    '.ico': 'image/x-icon'
   };
   
   return types[ext] || 'text/plain';
@@ -247,7 +233,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
     if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
       logger.info(`📝 File changed: ${filename}`);
       
-      // Notify clients
       for (const client of clients) {
         try {
           client.send(JSON.stringify({ type: 'recompiling' }));
@@ -256,7 +241,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
         }
       }
       
-      // Recompile
       try {
         await compileProject(root);
         
@@ -264,7 +248,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
           onRecompile();
         }
         
-        // Notify reload
         for (const client of clients) {
           try {
             client.send(JSON.stringify({ type: 'reload', file: filename }));