bertui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -8,10 +8,10 @@
     "bertui": "./bin/bertui.js"
   },
   "exports": {
-  ".": "./index.js",
-  "./styles": "./src/styles/bertui.css",
-  "./logger": "./src/logger/logger.js",
-  "./router": "./src/router/Router.jsx"
+    ".": "./index.js",
+    "./styles": "./src/styles/bertui.css",
+    "./logger": "./src/logger/logger.js",
+    "./router": "./src/router/Router.jsx"
   },
   "files": [
     "bin",
@@ -34,7 +34,8 @@
     "build-tool",
     "bundler",
     "fast",
-    "hmr"
+    "hmr",
+    "file-based-routing"
   ],
   "author": "Pease Ernest",
   "license": "MIT",

package/src/client/compiler.js

@@ -1,4 +1,3 @@
-// src/client/compiler.js
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative } from 'path';
 import logger from '../logger/logger.js';
@@ -112,9 +111,7 @@ async function generateRouter(routes, outDir, root) {
     return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
   }).join(',\n');
   
-  // CRITICAL: Copy Router component into compiled folder
-  const routerComponentCode = `
-import { useState, useEffect, createContext, useContext } from 'react';
+  const routerComponentCode = `import { useState, useEffect, createContext, useContext, createElement } from 'react';
 
 const RouterContext = createContext(null);
 
@@ -139,7 +136,7 @@ export function Router({ routes }) {
 
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
+  }, [routes]);
 
   function matchAndSetRoute(pathname) {
     for (const route of routes) {
@@ -188,10 +185,10 @@ export function Router({ routes }) {
 
   const Component = currentRoute?.component;
 
-  return (
-    <RouterContext.Provider value={routerValue}>
-      {Component ? <Component params={params} /> : <NotFound />}
-    </RouterContext.Provider>
+  return createElement(
+    RouterContext.Provider,
+    { value: routerValue },
+    Component ? createElement(Component, { params }) : createElement(NotFound, null)
   );
 }
 
@@ -203,29 +200,28 @@ export function Link({ to, children, ...props }) {
     navigate(to);
   }
 
-  return (
-    <a href={to} onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
+  return createElement('a', { href: to, onClick: handleClick, ...props }, children);
 }
 
 function NotFound() {
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '100vh',
-      fontFamily: 'system-ui'
-    }}>
-      <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>
+  return createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        fontFamily: 'system-ui'
+      }
+    },
+    createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
+    createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
+    createElement('a', { 
+      href: '/', 
+      style: { color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' } 
+    }, 'Go home')
   );
 }
 
@@ -266,7 +262,6 @@ async function compileDirectory(srcDir, outDir, root) {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        // Fix imports in .js files too
         code = fixImports(code);
         
         await Bun.write(outPath, code);
@@ -289,13 +284,19 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   try {
     let code = await Bun.file(srcPath).text();
     
-    // Fix imports BEFORE transpiling
     code = fixImports(code);
     
-    const transpiler = new Bun.Transpiler({ loader });
+    const transpiler = new Bun.Transpiler({ 
+      loader,
+      tsconfig: {
+        compilerOptions: {
+          jsx: 'react-jsx',
+          jsxImportSource: 'react'
+        }
+      }
+    });
     let compiled = await transpiler.transform(code);
     
-    // Add .js extensions to relative imports
     compiled = fixRelativeImports(compiled);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
@@ -310,16 +311,13 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
 }
 
 function fixImports(code) {
-  // Remove bertui/styles imports
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   
-  // Replace bertui/router with /compiled/router.js
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
     "from '/compiled/router.js'"
   );
   
-  // Fix ../.bertui/compiled paths to /compiled
   code = code.replace(
     /from\s+['"]\.\.\/\.bertui\/compiled\/([^'"]+)['"]/g,
     "from '/compiled/$1'"

package/src/router/Router.js

@@ -23,9 +23,10 @@ export function Router({ routes }) {
 
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
+  }, [routes]);
 
   function matchAndSetRoute(pathname) {
+    // Try static routes first
     for (const route of routes) {
       if (route.type === 'static' && route.path === pathname) {
         setCurrentRoute(route);
@@ -34,6 +35,7 @@ export function Router({ routes }) {
       }
     }
 
+    // Try dynamic routes
     for (const route of routes) {
       if (route.type === 'dynamic') {
         const pattern = route.path.replace(/\[([^\]]+)\]/g, '([^/]+)');
@@ -54,6 +56,7 @@ export function Router({ routes }) {
       }
     }
 
+    // No match found
     setCurrentRoute(null);
     setParams({});
   }

package/src/server/dev-server.js

@@ -1,4 +1,3 @@
-// src/server/dev-server.js
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
@@ -17,7 +16,7 @@ export async function startDevServer(options = {}) {
   const routerPath = join(compiledDir, 'router.js');
   if (existsSync(routerPath)) {
     hasRouter = true;
-    logger.info('Router-based routing enabled');
+    logger.info('File-based routing enabled');
   }
   
   const app = new Elysia()
@@ -158,7 +157,6 @@ function serveHTML(root, hasRouter) {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BertUI App - Dev</title>
   
-  <!-- Import Map for React and dependencies -->
   <script type="importmap">
   {
     "imports": {
@@ -171,7 +169,6 @@ function serveHTML(root, hasRouter) {
   </script>
   
   <style>
-    /* Inline basic styles since we're skipping CSS for now */
     * {
       margin: 0;
       padding: 0;
@@ -186,10 +183,9 @@ function serveHTML(root, hasRouter) {
   <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>' 
+    : '<script type="module" src="/compiled/main.js"></script>'
   }
-  <script type="module" src="/compiled/main.js"></script>
 </body>
 </html>`;