bertui 0.1.9 → 0.2.1

package/index.js

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

package/package.json

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

package/src/client/compiler.js

@@ -40,7 +40,6 @@ 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');
@@ -113,44 +112,132 @@ async function generateRouter(routes, outDir, root) {
     return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
   }).join(',\n');
   
-  const routerCode = `// Auto-generated router - DO NOT EDIT
-${imports}
+  // CRITICAL: Copy Router component into compiled folder
+  const routerComponentCode = `
+import { useState, useEffect, createContext, useContext } from 'react';
 
-export const routes = [
-${routeConfigs}
-];
+const RouterContext = createContext(null);
 
-export function matchRoute(pathname) {
-  for (const route of routes) {
-    if (route.type === 'static' && route.path === pathname) {
-      return route;
-    }
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a Router component');
   }
-  
-  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 params = {};
-        paramNames.forEach((name, i) => {
-          params[name] = match[i + 1];
-        });
-        
-        return { ...route, params };
+  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);
+  }, []);
+
+  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({});
   }
-  
-  return null;
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
+  }
+
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: window.location.pathname
+  };
+
+  const Component = currentRoute?.component;
+
+  return (
+    <RouterContext.Provider value={routerValue}>
+      {Component ? <Component params={params} /> : <NotFound />}
+    </RouterContext.Provider>
+  );
 }
+
+export function Link({ to, children, ...props }) {
+  const { navigate } = useRouter();
+
+  function handleClick(e) {
+    e.preventDefault();
+    navigate(to);
+  }
+
+  return (
+    <a href={to} onClick={handleClick} {...props}>
+      {children}
+    </a>
+  );
+}
+
+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>
+  );
+}
+
+${imports}
+
+export const routes = [
+${routeConfigs}
+];
 `;
   
   const routerPath = join(outDir, 'router.js');
-  await Bun.write(routerPath, routerCode);
+  await Bun.write(routerPath, routerComponentCode);
 }
 
 async function compileDirectory(srcDir, outDir, root) {
@@ -175,9 +262,14 @@ async function compileDirectory(srcDir, outDir, root) {
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         await compileFile(srcPath, outDir, file, relativePath);
         stats.files++;
-      } else if (ext === '.js' || ext === '.css') {
+      } else if (ext === '.js') {
         const outPath = join(outDir, file);
-        await Bun.write(outPath, Bun.file(srcPath));
+        let code = await Bun.file(srcPath).text();
+        
+        // Fix imports in .js files too
+        code = fixImports(code);
+        
+        await Bun.write(outPath, code);
         logger.debug(`Copied: ${relativePath}`);
         stats.files++;
       } else {
@@ -197,13 +289,13 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   try {
     let code = await Bun.file(srcPath).text();
     
-    // Remove bertui/styles imports
-    code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+    // Fix imports BEFORE transpiling
+    code = fixImports(code);
     
     const transpiler = new Bun.Transpiler({ loader });
     let compiled = await transpiler.transform(code);
     
-    // CRITICAL FIX: Add .js extensions to all relative imports
+    // Add .js extensions to relative imports
     compiled = fixRelativeImports(compiled);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
@@ -217,15 +309,29 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   }
 }
 
-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'
+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'"
+  );
+  
+  return code;
+}
+
+function fixRelativeImports(code) {
   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;
     }

package/src/router/Router.js

@@ -1,7 +1,5 @@
-// src/router/Router.jsx
 import { useState, useEffect, createContext, useContext } from 'react';
 
-// Router context
 const RouterContext = createContext(null);
 
 export function useRouter() {
@@ -12,20 +10,13 @@ export function useRouter() {
   return context;
 }
 
-export function useParams() {
-  const { params } = useRouter();
-  return params;
-}
-
-export function Router({ routes, children }) {
+export function Router({ routes }) {
   const [currentRoute, setCurrentRoute] = useState(null);
   const [params, setParams] = useState({});
 
   useEffect(() => {
-    // Match initial route
     matchAndSetRoute(window.location.pathname);
 
-    // Handle browser navigation
     const handlePopState = () => {
       matchAndSetRoute(window.location.pathname);
     };
@@ -35,7 +26,6 @@ export function Router({ routes, children }) {
   }, []);
 
   function matchAndSetRoute(pathname) {
-    // Try exact match first (static routes)
     for (const route of routes) {
       if (route.type === 'static' && route.path === pathname) {
         setCurrentRoute(route);
@@ -44,7 +34,6 @@ export function Router({ routes, children }) {
       }
     }
 
-    // Try dynamic routes
     for (const route of routes) {
       if (route.type === 'dynamic') {
         const pattern = route.path.replace(/\[([^\]]+)\]/g, '([^/]+)');
@@ -52,7 +41,6 @@ export function Router({ routes, children }) {
         const match = pathname.match(regex);
 
         if (match) {
-          // Extract params
           const paramNames = [...route.path.matchAll(/\[([^\]]+)\]/g)].map(m => m[1]);
           const extractedParams = {};
           paramNames.forEach((name, i) => {
@@ -66,7 +54,6 @@ export function Router({ routes, children }) {
       }
     }
 
-    // No match found - 404
     setCurrentRoute(null);
     setParams({});
   }
@@ -83,18 +70,16 @@ export function Router({ routes, children }) {
     pathname: window.location.pathname
   };
 
+  const Component = currentRoute?.component;
+
   return (
     <RouterContext.Provider value={routerValue}>
-      {currentRoute ? (
-        <currentRoute.component />
-      ) : (
-        children || <NotFound />
-      )}
+      {Component ? <Component params={params} /> : <NotFound />}
     </RouterContext.Provider>
   );
 }
 
-export function Link({ to, children, className, ...props }) {
+export function Link({ to, children, ...props }) {
   const { navigate } = useRouter();
 
   function handleClick(e) {
@@ -103,7 +88,7 @@ export function Link({ to, children, className, ...props }) {
   }
 
   return (
-    <a href={to} onClick={handleClick} className={className} {...props}>
+    <a href={to} onClick={handleClick} {...props}>
       {children}
     </a>
   );
@@ -117,7 +102,7 @@ function NotFound() {
       alignItems: 'center',
       justifyContent: 'center',
       minHeight: '100vh',
-      fontFamily: 'system-ui, sans-serif'
+      fontFamily: 'system-ui'
     }}>
       <h1 style={{ fontSize: '6rem', margin: 0 }}>404</h1>
       <p style={{ fontSize: '1.5rem', color: '#666' }}>Page not found</p>