bertui 1.1.8 → 1.2.0

package/src/hydration/index.js

@@ -0,0 +1,151 @@
+// bertui/src/hydration/index.js
+// Partial hydration - only hydrate interactive components, not whole page
+
+import logger from '../logger/logger.js';
+
+/**
+ * Markers that make a component interactive (needs JS hydration)
+ */
+const INTERACTIVE_MARKERS = [
+  // React hooks
+  'useState', 'useEffect', 'useReducer', 'useCallback',
+  'useMemo', 'useRef', 'useContext', 'useLayoutEffect',
+  'useTransition', 'useDeferredValue', 'useSyncExternalStore',
+  // Event handlers
+  'onClick', 'onChange', 'onSubmit', 'onInput', 'onFocus',
+  'onBlur', 'onMouseEnter', 'onMouseLeave', 'onKeyDown',
+  'onKeyUp', 'onScroll', 'onDrop', 'onDrag', 'onTouchStart',
+  // Browser APIs in component body
+  'window.', 'document.', 'localStorage.', 'sessionStorage.',
+  'navigator.', 'fetch(', 'WebSocket', 'EventSource',
+  'setTimeout(', 'setInterval(', 'requestAnimationFrame(',
+];
+
+/**
+ * Scan source code to determine if a component needs hydration
+ */
+export function needsHydration(sourceCode) {
+  for (const marker of INTERACTIVE_MARKERS) {
+    if (sourceCode.includes(marker)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Get which specific interactive features a component uses
+ */
+export function getInteractiveFeatures(sourceCode) {
+  const features = [];
+
+  const hooks = ['useState', 'useEffect', 'useReducer', 'useCallback', 'useMemo', 'useRef'];
+  for (const hook of hooks) {
+    if (sourceCode.includes(hook)) features.push({ type: 'hook', name: hook });
+  }
+
+  const events = ['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur', 'onKeyDown'];
+  for (const event of events) {
+    if (sourceCode.includes(event)) features.push({ type: 'event', name: event });
+  }
+
+  const apis = ['fetch(', 'WebSocket', 'localStorage.', 'sessionStorage.'];
+  for (const api of apis) {
+    if (sourceCode.includes(api)) features.push({ type: 'api', name: api });
+  }
+
+  return features;
+}
+
+/**
+ * Analyze all routes and classify them
+ * Returns: { static: [], interactive: [], mixed: [] }
+ */
+export async function analyzeRoutes(routes) {
+  const result = { static: [], interactive: [], mixed: [] };
+
+  for (const route of routes) {
+    try {
+      const sourceCode = await Bun.file(route.path).text();
+      const isServerIsland = sourceCode.includes('export const render = "server"');
+      const interactive = needsHydration(sourceCode);
+      const features = getInteractiveFeatures(sourceCode);
+
+      const analyzed = {
+        ...route,
+        interactive,
+        isServerIsland,
+        features,
+        hydrationMode: isServerIsland
+          ? 'none'
+          : interactive
+          ? 'full'
+          : 'none',
+      };
+
+      if (isServerIsland || !interactive) {
+        result.static.push(analyzed);
+      } else {
+        result.interactive.push(analyzed);
+      }
+    } catch (err) {
+      logger.warn(`Could not analyze ${route.route}: ${err.message}`);
+      result.interactive.push({ ...route, interactive: true, features: [] });
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Generate hydration-aware router that skips JS for static routes
+ * Key insight: static routes still render HTML, just skip React.hydrate()
+ */
+export function generatePartialHydrationCode(routes, analyzedRoutes) {
+  const interactivePaths = new Set(
+    analyzedRoutes.interactive.map(r => r.route)
+  );
+
+  const imports = routes.map((route, i) => {
+    const isInteractive = interactivePaths.has(route.route);
+    const componentName = `Page${i}`;
+    const importPath = `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
+
+    // Lazy load static routes (they're just HTML, load fast)
+    // Eager load interactive routes (need JS ready)
+    return isInteractive
+      ? `import ${componentName} from '${importPath}';`
+      : `const ${componentName} = React.lazy(() => import('${importPath}'));`;
+  }).join('\n');
+
+  const routeConfigs = routes.map((route, i) => {
+    const isInteractive = interactivePaths.has(route.route);
+    return `  { 
+    path: '${route.route}', 
+    component: Page${i}, 
+    type: '${route.type}',
+    hydrate: ${isInteractive},
+    lazy: ${!isInteractive}
+  }`;
+  }).join(',\n');
+
+  return { imports, routeConfigs };
+}
+
+/**
+ * Log hydration analysis results
+ */
+export function logHydrationReport(analyzedRoutes) {
+  const { static: staticRoutes, interactive } = analyzedRoutes;
+
+  logger.bigLog('HYDRATION ANALYSIS', { color: 'cyan' });
+  logger.info(`⚡ Interactive (needs JS): ${interactive.length} routes`);
+  logger.info(`🏝️  Static (no JS needed): ${staticRoutes.length} routes`);
+
+  if (interactive.length > 0) {
+    logger.table(interactive.map(r => ({
+      route: r.route,
+      features: r.features.map(f => f.name).join(', ').substring(0, 40) || 'unknown',
+    })));
+  }
+}

package/src/layouts/index.js

@@ -0,0 +1,165 @@
+// bertui/src/layouts/index.js
+// Layout system - src/layouts/default.tsx wraps all pages
+
+import { join, extname, basename } from 'path';
+import { existsSync, readdirSync, mkdirSync } from 'fs';;
+import logger from '../logger/logger.js';
+
+/**
+ * Discover all layouts in src/layouts/
+ * Layout naming convention:
+ *   default.tsx  → wraps all pages (fallback)
+ *   blog.tsx     → wraps pages in /blog/*
+ *   [route].tsx  → wraps pages matching route prefix
+ */
+export async function discoverLayouts(root) {
+  const layoutsDir = join(root, 'src', 'layouts');
+  const layouts = {};
+
+  if (!existsSync(layoutsDir)) {
+    return layouts;
+  }
+
+  const entries = readdirSync(layoutsDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    const ext = extname(entry.name);
+    if (!['.jsx', '.tsx', '.js', '.ts'].includes(ext)) continue;
+
+    const name = basename(entry.name, ext);
+    layouts[name] = {
+      name,
+      path: join(layoutsDir, entry.name),
+      route: name === 'default' ? '*' : `/${name}`,
+    };
+
+    logger.debug(`📐 Layout found: ${entry.name} → ${layouts[name].route}`);
+  }
+
+  if (Object.keys(layouts).length > 0) {
+    logger.success(`✅ ${Object.keys(layouts).length} layout(s) loaded`);
+  }
+
+  return layouts;
+}
+
+/**
+ * Match which layout applies to a given route
+ * Priority: exact name match > default
+ */
+export function matchLayout(route, layouts) {
+  if (!layouts || Object.keys(layouts).length === 0) return null;
+
+  // Strip leading slash and get first segment
+  const segment = route.replace(/^\//, '').split('/')[0];
+
+  // Exact match (e.g., /blog → blog.tsx)
+  if (segment && layouts[segment]) {
+    return layouts[segment];
+  }
+
+  // Default layout fallback
+  if (layouts['default']) {
+    return layouts['default'];
+  }
+
+  return null;
+}
+
+/**
+ * Generate layout wrapper code for the compiler
+ * Wraps the page component with the layout component
+ */
+export function generateLayoutWrapper(pageImportPath, layoutImportPath, componentName = 'Page') {
+  return `
+import React from 'react';
+import ${componentName} from '${pageImportPath}';
+import Layout from '${layoutImportPath}';
+
+export default function LayoutWrapped(props) {
+  return React.createElement(
+    Layout,
+    props,
+    React.createElement(${componentName}, props)
+  );
+}
+`.trim();
+}
+
+/**
+ * Compile layouts directory - transpiles layout files to .bertui/compiled/layouts/
+ */
+export async function compileLayouts(root, compiledDir) {
+  const layoutsDir = join(root, 'src', 'layouts');
+  if (!existsSync(layoutsDir)) return {};
+
+  const outDir = join(compiledDir, 'layouts');
+  
+  mkdirSync(outDir, { recursive: true });
+
+  const layouts = await discoverLayouts(root);
+
+  for (const [name, layout] of Object.entries(layouts)) {
+    const ext = extname(layout.path);
+    const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+
+    try {
+      let code = await Bun.file(layout.path).text();
+
+      // Add React import if missing
+      if (!code.includes('import React')) {
+        code = `import React from 'react';\n${code}`;
+      }
+
+      const transpiler = new Bun.Transpiler({
+        loader,
+        target: 'browser',
+        tsconfig: {
+          compilerOptions: {
+            jsx: 'react',
+            jsxFactory: 'React.createElement',
+            jsxFragmentFactory: 'React.Fragment',
+          },
+        },
+      });
+
+      let compiled = await transpiler.transform(code);
+
+      // Fix relative imports
+      compiled = compiled.replace(
+        /from\s+['"](\.\.?\/[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g,
+        (match, path) => {
+          if (path.endsWith('/') || /\.\w+$/.test(path)) return match;
+          return `from '${path}.js'`;
+        }
+      );
+
+      await Bun.write(join(outDir, `${name}.js`), compiled);
+      logger.debug(`📐 Compiled layout: ${name}`);
+    } catch (err) {
+      logger.error(`Failed to compile layout ${name}: ${err.message}`);
+    }
+  }
+
+  return layouts;
+}
+
+/**
+ * Inject layout into router generation
+ * Called by router-generator to wrap page components with their layouts
+ */
+export function injectLayoutsIntoRouter(routes, layouts, compiledDir) {
+  if (!layouts || Object.keys(layouts).length === 0) return routes;
+
+  return routes.map(route => {
+    const layout = matchLayout(route.route, layouts);
+    if (!layout) return route;
+
+    return {
+      ...route,
+      layout: layout.name,
+      layoutPath: join(compiledDir, 'layouts', `${layout.name}.js`),
+    };
+  });
+}

package/src/loading/index.js

@@ -0,0 +1,210 @@
+// bertui/src/loading/index.js
+// Built-in loading states - per route loading UI
+
+import { join, extname, basename } from 'path';
+import { existsSync, readdirSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * Default loading spinner HTML injected into pages
+ * Beautiful, zero-dependency, CSS-only spinner
+ */
+export const DEFAULT_LOADING_HTML = `
+<div id="bertui-loading" style="
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  font-family: system-ui, sans-serif;
+  transition: opacity 0.2s ease;
+">
+  <div style="
+    width: 40px;
+    height: 40px;
+    border: 3px solid #e5e7eb;
+    border-top-color: #10b981;
+    border-radius: 50%;
+    animation: bertui-spin 0.7s linear infinite;
+  "></div>
+  <p style="margin-top: 16px; color: #6b7280; font-size: 14px; font-weight: 500;">Loading...</p>
+</div>
+<style>
+  @keyframes bertui-spin {
+    to { transform: rotate(360deg); }
+  }
+</style>
+<script>
+  // Remove loading screen once React mounts
+  window.__BERTUI_HIDE_LOADING__ = function() {
+    const el = document.getElementById('bertui-loading');
+    if (el) {
+      el.style.opacity = '0';
+      setTimeout(() => el.remove(), 200);
+    }
+  };
+  
+  // Fallback: remove after 5s no matter what
+  setTimeout(() => window.__BERTUI_HIDE_LOADING__?.(), 5000);
+  
+  // React root observer - hide when #root gets children
+  const observer = new MutationObserver(() => {
+    const root = document.getElementById('root');
+    if (root && root.children.length > 0) {
+      window.__BERTUI_HIDE_LOADING__?.();
+      observer.disconnect();
+    }
+  });
+  const root = document.getElementById('root');
+  if (root) observer.observe(root, { childList: true, subtree: true });
+</script>
+`;
+
+/**
+ * Discover per-route loading components from src/pages/
+ * Convention: create a loading.tsx next to your page file
+ * e.g., src/pages/blog/loading.tsx → shown while /blog loads
+ */
+export async function discoverLoadingComponents(root) {
+  const pagesDir = join(root, 'src', 'pages');
+  if (!existsSync(pagesDir)) return {};
+
+  const loadingComponents = {};
+
+  function scan(dir, routeBase = '') {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        scan(fullPath, `${routeBase}/${entry.name}`);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name);
+        const name = basename(entry.name, ext);
+
+        if (name === 'loading' && ['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
+          const route = routeBase || '/';
+          loadingComponents[route] = {
+            path: fullPath,
+            route,
+          };
+          logger.debug(`⏳ Loading component: ${route} → ${entry.name}`);
+        }
+      }
+    }
+  }
+
+  scan(pagesDir);
+
+  if (Object.keys(loadingComponents).length > 0) {
+    logger.success(`✅ ${Object.keys(loadingComponents).length} loading component(s) found`);
+  }
+
+  return loadingComponents;
+}
+
+/**
+ * Compile loading components to .bertui/compiled/loading/
+ */
+export async function compileLoadingComponents(root, compiledDir) {
+  const components = await discoverLoadingComponents(root);
+  if (Object.keys(components).length === 0) return components;
+
+  const outDir = join(compiledDir, 'loading');
+  const { mkdirSync } = await import('fs');
+  mkdirSync(outDir, { recursive: true });
+
+  for (const [route, comp] of Object.entries(components)) {
+    const ext = extname(comp.path);
+    const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+    const safeName = route.replace(/\//g, '_').replace(/^_/, '') || 'root';
+
+    try {
+      let code = await Bun.file(comp.path).text();
+
+      if (!code.includes('import React')) {
+        code = `import React from 'react';\n${code}`;
+      }
+
+      const transpiler = new Bun.Transpiler({
+        loader,
+        target: 'browser',
+        tsconfig: {
+          compilerOptions: {
+            jsx: 'react',
+            jsxFactory: 'React.createElement',
+            jsxFragmentFactory: 'React.Fragment',
+          },
+        },
+      });
+
+      const compiled = await transpiler.transform(code);
+      await Bun.write(join(outDir, `${safeName}.js`), compiled);
+      components[route].compiledPath = join(outDir, `${safeName}.js`);
+      components[route].compiledName = safeName;
+
+    } catch (err) {
+      logger.error(`Failed to compile loading component for ${route}: ${err.message}`);
+    }
+  }
+
+  return components;
+}
+
+/**
+ * Generate loading-aware router code
+ * Wraps each route component with Suspense + loading fallback
+ */
+export function generateLoadingAwareRouter(routes, loadingComponents) {
+  const hasLoading = Object.keys(loadingComponents).length > 0;
+
+  const loadingImports = hasLoading
+    ? Object.entries(loadingComponents)
+        .map(([route, comp]) => {
+          const safeName = comp.compiledName || (route.replace(/\//g, '_').replace(/^_/, '') || 'root');
+          return `import Loading_${safeName} from './loading/${safeName}.js';`;
+        })
+        .join('\n')
+    : '';
+
+  const getLoadingComponent = (route) => {
+    // Exact match
+    if (loadingComponents[route]) {
+      const safeName = loadingComponents[route].compiledName || 
+        (route.replace(/\//g, '_').replace(/^_/, '') || 'root');
+      return `Loading_${safeName}`;
+    }
+
+    // Parent route match
+    const segments = route.split('/').filter(Boolean);
+    while (segments.length > 0) {
+      segments.pop();
+      const parent = '/' + segments.join('/') || '/';
+      if (loadingComponents[parent]) {
+        const safeName = loadingComponents[parent].compiledName || 
+          (parent.replace(/\//g, '_').replace(/^_/, '') || 'root');
+        return `Loading_${safeName}`;
+      }
+    }
+
+    return null;
+  };
+
+  return { loadingImports, getLoadingComponent };
+}
+
+/**
+ * Generate the default loading screen script to inject into HTML
+ */
+export function getLoadingScript(customText = 'Loading...', color = '#10b981') {
+  return DEFAULT_LOADING_HTML
+    .replace('Loading...', customText)
+    .replace('#10b981', color);
+}

package/src/middleware/index.js

@@ -0,0 +1,182 @@
+// bertui/src/middleware/index.js
+// Middleware system - src/middleware.ts runs before every request
+
+import { join, extname } from 'path';
+import { existsSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * Middleware context passed to every middleware function
+ */
+export class MiddlewareContext {
+  constructor(request, options = {}) {
+    this.request = request;
+    this.url = new URL(request.url);
+    this.pathname = this.url.pathname;
+    this.method = request.method;
+    this.headers = Object.fromEntries(request.headers.entries());
+    this.params = options.params || {};
+    this.route = options.route || null;
+    this._response = null;
+    this._redirectTo = null;
+    this._stopped = false;
+    this.locals = {}; // Share data between middlewares and pages
+  }
+
+  /** Respond early - stops further processing */
+  respond(body, init = {}) {
+    this._response = new Response(body, {
+      status: init.status || 200,
+      headers: {
+        'Content-Type': 'text/html',
+        ...init.headers
+      }
+    });
+    this._stopped = true;
+  }
+
+  /** Redirect to another URL */
+  redirect(url, status = 302) {
+    this._redirectTo = url;
+    this._response = Response.redirect(url, status);
+    this._stopped = true;
+  }
+
+  /** Set a response header (added to final response) */
+  setHeader(key, value) {
+    if (!this._extraHeaders) this._extraHeaders = {};
+    this._extraHeaders[key] = value;
+  }
+
+  /** Check if middleware stopped the chain */
+  get stopped() {
+    return this._stopped;
+  }
+}
+
+/**
+ * Load and run user middleware from src/middleware.ts or src/middleware.js
+ */
+export async function loadMiddleware(root) {
+  const candidates = [
+    join(root, 'src', 'middleware.ts'),
+    join(root, 'src', 'middleware.tsx'),
+    join(root, 'src', 'middleware.js'),
+  ];
+
+  for (const path of candidates) {
+    if (existsSync(path)) {
+      try {
+        // Transpile if TypeScript
+        const ext = extname(path);
+        let code = await Bun.file(path).text();
+
+        if (ext === '.ts' || ext === '.tsx') {
+          const transpiler = new Bun.Transpiler({
+            loader: ext === '.tsx' ? 'tsx' : 'ts',
+            target: 'bun',
+          });
+          code = await transpiler.transform(code);
+        }
+
+        // Write to temp file and import
+        const tmpPath = join(root, '.bertui', 'middleware.js');
+        await Bun.write(tmpPath, code);
+
+        const mod = await import(`${tmpPath}?t=${Date.now()}`);
+        logger.success('✅ Middleware loaded: ' + path.replace(root, ''));
+
+        return {
+          default: mod.default || null,
+          onRequest: mod.onRequest || mod.default || null,
+          onResponse: mod.onResponse || null,
+          onError: mod.onError || null,
+        };
+      } catch (err) {
+        logger.error(`Failed to load middleware: ${err.message}`);
+        return null;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Run middleware chain for a request
+ * Returns a Response if middleware intercepted, null to continue
+ */
+export async function runMiddleware(middlewareMod, request, routeInfo = {}) {
+  if (!middlewareMod) return null;
+
+  const ctx = new MiddlewareContext(request, routeInfo);
+
+  try {
+    // Run onRequest middleware
+    if (middlewareMod.onRequest) {
+      await middlewareMod.onRequest(ctx);
+      if (ctx.stopped) {
+        logger.debug(`🛡️  Middleware intercepted: ${ctx.pathname}`);
+        return ctx._response;
+      }
+    }
+
+    return null; // Continue to route handler
+  } catch (err) {
+    logger.error(`Middleware error: ${err.message}`);
+
+    // Run error handler if defined
+    if (middlewareMod.onError) {
+      try {
+        await middlewareMod.onError(ctx, err);
+        if (ctx._response) return ctx._response;
+      } catch (e) {
+        logger.error(`Middleware error handler failed: ${e.message}`);
+      }
+    }
+
+    return null;
+  }
+}
+
+/**
+ * MiddlewareManager - watches and reloads middleware on change
+ */
+export class MiddlewareManager {
+  constructor(root) {
+    this.root = root;
+    this.middleware = null;
+    this.watcher = null;
+  }
+
+  async load() {
+    this.middleware = await loadMiddleware(this.root);
+    return this;
+  }
+
+  async run(request, routeInfo = {}) {
+    return runMiddleware(this.middleware, request, routeInfo);
+  }
+
+  watch() {
+    const candidates = [
+      join(this.root, 'src', 'middleware.ts'),
+      join(this.root, 'src', 'middleware.tsx'),
+      join(this.root, 'src', 'middleware.js'),
+    ];
+
+    const existing = candidates.find(existsSync);
+    if (!existing) return;
+
+    const { watch } = require('fs');
+    this.watcher = watch(existing, async () => {
+      logger.info('🔄 Reloading middleware...');
+      this.middleware = await loadMiddleware(this.root);
+      logger.success('✅ Middleware reloaded');
+    });
+  }
+
+  dispose() {
+    if (this.watcher) this.watcher.close();
+  }
+}