bertui 0.2.3 → 0.2.5

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.3",
+  "version": "0.2.5",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",

package/src/client/compiler.js

@@ -111,7 +111,7 @@ async function generateRouter(routes, outDir, root) {
     return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
   }).join(',\n');
   
-  const routerComponentCode = `import { useState, useEffect, createContext, useContext, createElement } from 'react';
+  const routerComponentCode = `import React, { useState, useEffect, createContext, useContext } from 'react';
 
 const RouterContext = createContext(null);
 
@@ -185,10 +185,10 @@ export function Router({ routes }) {
 
   const Component = currentRoute?.component;
 
-  return createElement(
+  return React.createElement(
     RouterContext.Provider,
     { value: routerValue },
-    Component ? createElement(Component, { params }) : createElement(NotFound, null)
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
   );
 }
 
@@ -200,11 +200,11 @@ export function Link({ to, children, ...props }) {
     navigate(to);
   }
 
-  return createElement('a', { href: to, onClick: handleClick, ...props }, children);
+  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
 }
 
 function NotFound() {
-  return createElement(
+  return React.createElement(
     'div',
     {
       style: {
@@ -216,9 +216,9 @@ function NotFound() {
         fontFamily: 'system-ui'
       }
     },
-    createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
-    createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
-    createElement('a', { 
+    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')
@@ -290,13 +290,18 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
       loader,
       tsconfig: {
         compilerOptions: {
-          jsx: 'react-jsx',
-          jsxImportSource: 'react'
+          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');

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,7 +24,7 @@ export async function startDevServer(options = {}) {
   
   const app = new Elysia()
     .get('/', async () => {
-      return serveHTML(root, hasRouter);
+      return serveHTML(root, hasRouter, config);
     })
     
     .get('/*', async ({ params, set }) => {
@@ -45,11 +48,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,21 +154,34 @@ 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">
   {
@@ -182,10 +208,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="/compiled/main.js"></script>
 </body>
 </html>`;
   
@@ -214,6 +237,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 +265,7 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
         await compileProject(root);
         
         if (onRecompile) {
-          onRecompile();
+          await onRecompile();
         }
         
         for (const client of clients) {
@@ -256,4 +280,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);
+          }
+        }
+      }
+    });
+  }
 }