npm - bertui - Versions diffs - 0.1.5 → 0.1.7 - Mend

bertui 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/LICENSE +20 -20
package/bin/bertui.js +7 -7
package/index.js +35 -35
package/package.json +5 -4
package/src/build/css-builder.js +83 -83
package/src/build.js +122 -122
package/src/cli.js +65 -65
package/src/client/compiler.js +227 -90
package/src/config/defaultConfig.js +15 -15
package/src/config/loadConfig.js +32 -32
package/src/dev.js +22 -22
package/src/logger/logger.js +17 -17
package/src/logger/notes.md +19 -19
package/src/router/Router.js +129 -0
package/src/server/dev-server.js +279 -198
package/src/styles/bertui.css +209 -209
package/src/router/router.js +0 -216

package/src/router/Router.js ADDED Viewed

@@ -0,0 +1,129 @@
+// src/router/Router.jsx
+import { useState, useEffect, createContext, useContext } from 'react';
+// Router context
+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 useParams() {
+  const { params } = useRouter();
+  return params;
+}
+export function Router({ routes, children }) {
+  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);
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+  function matchAndSetRoute(pathname) {
+    // Try exact match first (static routes)
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+    // Try dynamic routes
+    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) {
+          // Extract params
+          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;
+        }
+      }
+    }
+    // No match found - 404
+    setCurrentRoute(null);
+    setParams({});
+  }
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
+  }
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: window.location.pathname
+  };
+  return (
+    <RouterContext.Provider value={routerValue}>
+      {currentRoute ? (
+        <currentRoute.component />
+      ) : (
+        children || <NotFound />
+      )}
+    </RouterContext.Provider>
+  );
+}
+export function Link({ to, children, className, ...props }) {
+  const { navigate } = useRouter();
+  function handleClick(e) {
+    e.preventDefault();
+    navigate(to);
+  }
+  return (
+    <a href={to} onClick={handleClick} className={className} {...props}>
+      {children}
+    </a>
+  );
+}
+function NotFound() {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100vh',
+      fontFamily: 'system-ui, sans-serif'
+    }}>
+      <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>
+  );
+}

package/src/server/dev-server.js CHANGED Viewed

@@ -1,199 +1,280 @@
-// src/server/dev-server.js
-import { Elysia } from 'elysia';
-import { watch } from 'fs';
-import { join, extname } from 'path';
-import { existsSync } from 'fs';
-import logger from '../logger/logger.js';
-import { compileProject } from '../client/compiler.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 clients = new Set();
-  const app = new Elysia()
-    .get('/', async () => {
-      const html = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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">
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/hmr-client.js"></script>
-  <script type="module" src="/compiled/main.js"></script>
-</body>
-</html>`;
-      return new Response(html, {
-        headers: { 'Content-Type': 'text/html' }
-      });
-    })
-    .get('/hmr-client.js', () => {
-      const script = `
-const ws = new WebSocket('ws://localhost:${port}/hmr');
-ws.onopen = () => {
-  console.log('%c🔥 BertUI HMR connected', 'color: #10b981; font-weight: bold');
-};
-ws.onmessage = (event) => {
-  const data = JSON.parse(event.data);
-  if (data.type === 'reload') {
-    console.log('%c🔄 Reloading...', 'color: #f59e0b');
-    window.location.reload();
-  }
-  if (data.type === 'recompiling') {
-    console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
-  }
-};
-ws.onerror = (error) => {
-  console.error('%c❌ HMR connection error', 'color: #ef4444', error);
-};
-ws.onclose = () => {
-  console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
-};
-`;
-      return new Response(script, {
-        headers: { 'Content-Type': 'application/javascript' }
-      });
-    })
-    .ws('/hmr', {
-      open(ws) {
-        clients.add(ws);
-        logger.info('Client connected to HMR');
-      },
-      close(ws) {
-        clients.delete(ws);
-        logger.info('Client disconnected from HMR');
-      }
-    })
-    // 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
-    .get('/compiled/*', async ({ params, set }) => {
-      const filepath = join(compiledDir, params['*']);
-      const file = Bun.file(filepath);
-      if (!await file.exists()) {
-        set.status = 404;
-        return 'File not found';
-      }
-      const ext = extname(filepath);
-      const contentType = ext === '.js' ? 'application/javascript' :
-                         ext === '.css' ? 'text/css' :
-                         'text/plain';
-      return new Response(await file.text(), {
-        headers: {
-          'Content-Type': contentType,
-          'Cache-Control': 'no-store'
-        }
-      });
-    })
-    // Serve public assets
-    .get('/public/*', async ({ params, set }) => {
-      const publicDir = join(root, 'public');
-      const filepath = join(publicDir, params['*']);
-      const file = Bun.file(filepath);
-      if (!await file.exists()) {
-        set.status = 404;
-        return 'File not found';
-      }
-      return new Response(file);
-    })
-    .listen(port);
-  if (!app.server) {
-    logger.error('Failed to start server');
-    process.exit(1);
-  }
-  logger.success(`🚀 Server running at http://localhost:${port}`);
-  logger.info(`📁 Serving: ${root}`);
-  // Watch for file changes
-  setupWatcher(root, compiledDir, clients);
-  return app;
-}
-function setupWatcher(root, compiledDir, clients) {
-  const srcDir = join(root, 'src');
-  if (!existsSync(srcDir)) {
-    logger.warn('src/ directory not found');
-    return;
-  }
-  logger.info(`👀 Watching: ${srcDir}`);
-  watch(srcDir, { recursive: true }, async (eventType, filename) => {
-    if (!filename) return;
-    const ext = extname(filename);
-    if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
-      logger.info(`📝 File changed: ${filename}`);
-      // Notify clients that recompilation is starting
-      for (const client of clients) {
-        try {
-          client.send(JSON.stringify({ type: 'recompiling' }));
-        } catch (e) {
-          clients.delete(client);
-        }
-      }
-      // Recompile the project
-      try {
-        await compileProject(root);
-        // Notify clients to reload
-        for (const client of clients) {
-          try {
-            client.send(JSON.stringify({ type: 'reload', file: filename }));
-          } catch (e) {
-            clients.delete(client);
-          }
-        }
-      } catch (error) {
-        logger.error(`Recompilation failed: ${error.message}`);
-      }
-    }
-  });
+// src/server/dev-server.js
+import { Elysia } from 'elysia';
+import { watch } from 'fs';
+import { join, extname } from 'path';
+import { existsSync } from 'fs';
+import logger from '../logger/logger.js';
+import { compileProject } from '../client/compiler.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 clients = new Set();
+  let hasRouter = false;
+  // Check if router exists
+  const routerPath = join(compiledDir, 'router.js');
+  if (existsSync(routerPath)) {
+    hasRouter = true;
+    logger.info('Router-based routing enabled');
+  }
+  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);
+            return new Response(await file.text(), {
+              headers: {
+                'Content-Type': contentType,
+                'Cache-Control': 'no-store'
+              }
+            });
+          }
+        }
+        set.status = 404;
+        return 'File not found';
+      }
+      // For non-file routes, serve the main HTML (SPA mode)
+      return serveHTML(root, hasRouter);
+    })
+    .get('/hmr-client.js', () => {
+      const script = `
+const ws = new WebSocket('ws://localhost:${port}/hmr');
+ws.onopen = () => {
+  console.log('%c🔥 BertUI HMR connected', 'color: #10b981; font-weight: bold');
+};
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  if (data.type === 'reload') {
+    console.log('%c🔄 Reloading...', 'color: #f59e0b');
+    window.location.reload();
+  }
+  if (data.type === 'recompiling') {
+    console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
+  }
+};
+ws.onerror = (error) => {
+  console.error('%c❌ HMR connection error', 'color: #ef4444', error);
+};
+ws.onclose = () => {
+  console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
+};
+`;
+      return new Response(script, {
+        headers: { 'Content-Type': 'application/javascript' }
+      });
+    })
+    .ws('/hmr', {
+      open(ws) {
+        clients.add(ws);
+        logger.info('Client connected to HMR');
+      },
+      close(ws) {
+        clients.delete(ws);
+        logger.info('Client disconnected from HMR');
+      }
+    })
+    // 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);
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'File not found';
+      }
+      const ext = extname(filepath);
+      // CRITICAL FIX: Always serve .js files with JavaScript MIME type
+      const contentType = ext === '.js'
+        ? 'application/javascript'
+        : getContentType(ext);
+      return new Response(await file.text(), {
+        headers: {
+          'Content-Type': contentType,
+          'Cache-Control': 'no-store'
+        }
+      });
+    })
+    // Serve public assets
+    .get('/public/*', async ({ params, set }) => {
+      const publicDir = join(root, 'public');
+      const filepath = join(publicDir, params['*']);
+      const file = Bun.file(filepath);
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'File not found';
+      }
+      return new Response(file);
+    })
+    .listen(port);
+  if (!app.server) {
+    logger.error('Failed to start server');
+    process.exit(1);
+  }
+  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'));
+  });
+  return app;
+}
+function serveHTML(root, hasRouter) {
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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">
+</head>
+<body>
+  <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>
+</body>
+</html>`;
+  return new Response(html, {
+    headers: { 'Content-Type': 'text/html' }
+  });
+}
+function getContentType(ext) {
+  const types = {
+    '.js': 'application/javascript',
+    '.jsx': 'application/javascript',
+    '.css': 'text/css',
+    '.html': 'text/html',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.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'
+  };
+  return types[ext] || 'text/plain';
+}
+function setupWatcher(root, compiledDir, clients, onRecompile) {
+  const srcDir = join(root, 'src');
+  if (!existsSync(srcDir)) {
+    logger.warn('src/ directory not found');
+    return;
+  }
+  logger.info(`👀 Watching: ${srcDir}`);
+  watch(srcDir, { recursive: true }, async (eventType, filename) => {
+    if (!filename) return;
+    const ext = extname(filename);
+    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' }));
+        } catch (e) {
+          clients.delete(client);
+        }
+      }
+      // Recompile
+      try {
+        await compileProject(root);
+        if (onRecompile) {
+          onRecompile();
+        }
+        // Notify reload
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({ type: 'reload', file: filename }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
+      } catch (error) {
+        logger.error(`Recompilation failed: ${error.message}`);
+      }
+    }
+  });
 }