bertui 0.2.4 → 0.2.6

package/index.js

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

package/package.json

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

package/src/client/compiler.js

@@ -1,3 +1,349 @@
+// 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';
@@ -316,16 +662,19 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
 }
 
 function fixImports(code) {
+  // Remove bertui/styles imports
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   
+  // Fix bertui/router imports to use relative path to compiled router
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
-    "from '/compiled/router.js'"
+    "from '../.bertui/compiled/router.js'"
   );
   
+  // Also handle any absolute /compiled/ paths
   code = code.replace(
-    /from\s+['"]\.\.\/\.bertui\/compiled\/([^'"]+)['"]/g,
-    "from '/compiled/$1'"
+    /from\s+['"]\/compiled\/router\.js['"]/g,
+    "from '../.bertui/compiled/router.js'"
   );
   
   return code;

package/src/server/dev-server.js

@@ -4,12 +4,15 @@ import { join, extname } from 'path';
 import { existsSync } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
+import { loadConfig } from '../config/loadConfig.js';
 
 export async function startDevServer(options = {}) {
   const port = parseInt(options.port) || 3000;
   const root = options.root || process.cwd();
   const compiledDir = join(root, '.bertui', 'compiled');
   
+  const config = await loadConfig(root);
+  
   const clients = new Set();
   let hasRouter = false;
   
@@ -21,13 +24,31 @@ export async function startDevServer(options = {}) {
   
   const app = new Elysia()
     .get('/', async () => {
-      return serveHTML(root, hasRouter);
+      return serveHTML(root, hasRouter, config);
     })
     
     .get('/*', async ({ params, set }) => {
       const path = params['*'];
       
       if (path.includes('.')) {
+        // Handle .bertui/compiled/ paths
+        if (path.startsWith('.bertui/compiled/')) {
+          const filePath = join(root, path);
+          const file = Bun.file(filePath);
+          
+          if (await file.exists()) {
+            const ext = extname(path);
+            const contentType = ext === '.js' ? 'application/javascript' : getContentType(ext);
+            
+            return new Response(await file.text(), {
+              headers: { 
+                'Content-Type': contentType,
+                'Cache-Control': 'no-store'
+              }
+            });
+          }
+        }
+        
         if (path.startsWith('compiled/')) {
           const filePath = join(compiledDir, path.replace('compiled/', ''));
           const file = Bun.file(filePath);
@@ -45,11 +66,21 @@ export async function startDevServer(options = {}) {
           }
         }
         
+        if (path.startsWith('public/')) {
+          const publicDir = join(root, 'public');
+          const filepath = join(publicDir, path.replace('public/', ''));
+          const file = Bun.file(filepath);
+          
+          if (await file.exists()) {
+            return new Response(file);
+          }
+        }
+        
         set.status = 404;
         return 'File not found';
       }
       
-      return serveHTML(root, hasRouter);
+      return serveHTML(root, hasRouter, config);
     })
     
     .get('/hmr-client.js', () => {
@@ -141,29 +172,41 @@ ws.onclose = () => {
   logger.success(`🚀 Server running at http://localhost:${port}`);
   logger.info(`📁 Serving: ${root}`);
   
-  setupWatcher(root, compiledDir, clients, () => {
+  setupWatcher(root, compiledDir, clients, async () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
   });
   
   return app;
 }
 
-function serveHTML(root, hasRouter) {
+function serveHTML(root, hasRouter, config) {
+  const meta = config.meta || {};
+  
   const html = `
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BertUI App - Dev</title>
+  <title>${meta.title || 'BertUI App'}</title>
+  
+  ${meta.description ? `<meta name="description" content="${meta.description}">` : ''}
+  ${meta.keywords ? `<meta name="keywords" content="${meta.keywords}">` : ''}
+  ${meta.author ? `<meta name="author" content="${meta.author}">` : ''}
+  ${meta.themeColor ? `<meta name="theme-color" content="${meta.themeColor}">` : ''}
+  
+  ${meta.ogTitle ? `<meta property="og:title" content="${meta.ogTitle || meta.title}">` : ''}
+  ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription || meta.description}">` : ''}
+  ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  
+  <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
   
   <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"
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
     }
   }
   </script>
@@ -182,10 +225,7 @@ function serveHTML(root, hasRouter) {
 <body>
   <div id="root"></div>
   <script type="module" src="/hmr-client.js"></script>
-  ${hasRouter 
-    ? '<script type="module" src="/compiled/main.js"></script>' 
-    : '<script type="module" src="/compiled/main.js"></script>'
-  }
+  <script type="module" src="/.bertui/compiled/main.js"></script>
 </body>
 </html>`;
   
@@ -214,6 +254,7 @@ function getContentType(ext) {
 
 function setupWatcher(root, compiledDir, clients, onRecompile) {
   const srcDir = join(root, 'src');
+  const configPath = join(root, 'bertui.config.js');
   
   if (!existsSync(srcDir)) {
     logger.warn('src/ directory not found');
@@ -241,7 +282,7 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
         await compileProject(root);
         
         if (onRecompile) {
-          onRecompile();
+          await onRecompile();
         }
         
         for (const client of clients) {
@@ -256,4 +297,20 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
       }
     }
   });
+  
+  if (existsSync(configPath)) {
+    watch(configPath, async (eventType) => {
+      if (eventType === 'change') {
+        logger.info('📝 Config changed, reloading...');
+        
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({ type: 'reload', file: 'bertui.config.js' }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
+      }
+    });
+  }
 }