bertui 1.0.3 → 1.1.1

package/src/config/defaultConfig.js

@@ -1,16 +1,36 @@
+// bertui/src/config/defaultConfig.js
+// Default configuration used when bertui.config.js is not present
+
 export const defaultConfig = {
+  // Site information (used for sitemap generation)
+  siteName: "BertUI App",
+  baseUrl: "http://localhost:3000", // Default to localhost
+  
+  // HTML Meta Tags (SEO)
   meta: {
-    title: "BertUI App",
-    description: "Built with BertUI - Lightning fast React development",
-    keywords: "react, bun, bertui",
+    title: "BertUI - Lightning Fast React",
+    description: "Build lightning-fast React applications with file-based routing powered by Bun",
+    keywords: "react, bun, bertui, fast, file-based routing",
     author: "Pease Ernest",
-    ogImage: "/og-image.png",
-    themeColor: "#f30606ff",
-    lang: "en"
+    themeColor: "#667eea",
+    lang: "en",
+    
+    // Open Graph for social sharing
+    ogTitle: "BertUI - Lightning Fast React Framework",
+    ogDescription: "Build lightning-fast React apps with zero config",
+    ogImage: "/og-image.png"
   },
+  
+  // App Shell Configuration
   appShell: {
     loading: true,
     loadingText: "Loading...",
     backgroundColor: "#ffffff"
+  },
+  
+  // robots.txt Configuration
+  robots: {
+    disallow: [], // No paths blocked by default
+    crawlDelay: null // No crawl delay by default
   }
 };

package/src/config/loadConfig.js

@@ -1,4 +1,4 @@
-// src/config/loadConfig.js
+// src/config/loadConfig.js - COMPLETE CORRECTED VERSION
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { defaultConfig } from './defaultConfig.js';
@@ -13,6 +13,13 @@ export async function loadConfig(root) {
       const userConfig = await import(configPath);
       logger.success('Loaded bertui.config.js');
       
+      // DEBUG: Show what we loaded
+      logger.info(`📋 Config loaded: ${JSON.stringify({
+        hasSiteName: !!(userConfig.default?.siteName || userConfig.siteName),
+        hasBaseUrl: !!(userConfig.default?.baseUrl || userConfig.baseUrl),
+        hasRobots: !!(userConfig.default?.robots || userConfig.robots)
+      })}`);
+      
       // Merge user config with defaults
       return mergeConfig(defaultConfig, userConfig.default || userConfig);
     } catch (error) {
@@ -26,8 +33,17 @@ export async function loadConfig(root) {
 }
 
 function mergeConfig(defaults, user) {
-  return {
-    meta: { ...defaults.meta, ...(user.meta || {}) },
-    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
-  };
+  // Start with user config (so user values override defaults)
+  const merged = { ...user };
+  
+  // Deep merge for nested objects
+  merged.meta = { ...defaults.meta, ...(user.meta || {}) };
+  merged.appShell = { ...defaults.appShell, ...(user.appShell || {}) };
+  merged.robots = { ...defaults.robots, ...(user.robots || {}) };
+  
+  // Ensure we have required top-level fields
+  if (!merged.siteName) merged.siteName = defaults.siteName;
+  if (!merged.baseUrl) merged.baseUrl = defaults.baseUrl;
+  
+  return merged;
 }

package/src/router/Router.js

@@ -1,12 +1,27 @@
+// src/router/Router.js - SSR COMPATIBLE VERSION
 import { useState, useEffect, createContext, useContext } from 'react';
 
 const RouterContext = createContext(null);
 
+// ✅ FIX: SSR-safe useRouter
 export function useRouter() {
   const context = useContext(RouterContext);
+  
+  // During SSR (when window doesn't exist), return a mock router
+  if (typeof window === 'undefined') {
+    return {
+      pathname: '/',
+      params: {},
+      navigate: () => {},
+      currentRoute: null,
+      isSSR: true
+    };
+  }
+  
   if (!context) {
     throw new Error('useRouter must be used within a Router component');
   }
+  
   return context;
 }
 
@@ -62,15 +77,18 @@ export function Router({ routes }) {
   }
 
   function navigate(path) {
-    window.history.pushState({}, '', path);
-    matchAndSetRoute(path);
+    if (typeof window !== 'undefined') {
+      window.history.pushState({}, '', path);
+      matchAndSetRoute(path);
+    }
   }
 
   const routerValue = {
     currentRoute,
     params,
     navigate,
-    pathname: window.location.pathname
+    pathname: typeof window !== 'undefined' ? window.location.pathname : '/',
+    isSSR: typeof window === 'undefined'
   };
 
   const Component = currentRoute?.component;
@@ -82,12 +100,27 @@ export function Router({ routes }) {
   );
 }
 
+// ✅ FIX: SSR-safe Link component
 export function Link({ to, children, ...props }) {
-  const { navigate } = useRouter();
+  // Try to get router, but don't fail if it doesn't exist
+  let router;
+  try {
+    router = useRouter();
+  } catch (e) {
+    // During SSR, router might not be available
+    router = null;
+  }
 
   function handleClick(e) {
+    // During SSR, just use normal link behavior
+    if (typeof window === 'undefined') return;
+    
+    // If no router or navigate function, use normal link
+    if (!router || !router.navigate) return;
+    
+    // Only prevent default if we have client-side routing
     e.preventDefault();
-    navigate(to);
+    router.navigate(to);
   }
 
   return (

package/src/router/SSRRouter.js

@@ -0,0 +1,156 @@
+// src/router/SSRRouter.jsx
+// SSR-Compatible Router for BertUI - Works during build AND runtime
+import React, { useState, useEffect, createContext, useContext } from 'react';
+
+const RouterContext = createContext(null);
+
+// ✅ SSR-safe useRouter hook
+export function useRouter() {
+  const context = useContext(RouterContext);
+  
+  // During SSR, provide a mock router
+  if (!context) {
+    return {
+      pathname: '/',
+      params: {},
+      navigate: () => {},
+      isSSR: true
+    };
+  }
+  
+  return context;
+}
+
+// ✅ SSR-safe Router component
+export function Router({ routes, initialPath = '/' }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+  const [isClient, setIsClient] = useState(false);
+
+  // Detect if we're in the browser
+  useEffect(() => {
+    setIsClient(true);
+    matchAndSetRoute(window.location.pathname);
+
+    const handlePopState = () => {
+      matchAndSetRoute(window.location.pathname);
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [routes]);
+
+  // Match route on server-side (SSR)
+  if (!isClient && !currentRoute) {
+    const matched = matchRoute(initialPath, routes);
+    if (matched) {
+      return React.createElement(
+        RouterContext.Provider,
+        { value: { pathname: initialPath, params: matched.params, navigate: () => {}, isSSR: true } },
+        React.createElement(matched.route.component, { params: matched.params })
+      );
+    }
+  }
+
+  function matchRoute(pathname, routesList) {
+    // Try static routes first
+    for (const route of routesList) {
+      if (route.type === 'static' && route.path === pathname) {
+        return { route, params: {} };
+      }
+    }
+
+    // Try dynamic routes
+    for (const route of routesList) {
+      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];
+          });
+
+          return { route, params: extractedParams };
+        }
+      }
+    }
+
+    return null;
+  }
+
+  function matchAndSetRoute(pathname) {
+    const matched = matchRoute(pathname, routes);
+    
+    if (matched) {
+      setCurrentRoute(matched.route);
+      setParams(matched.params);
+    } else {
+      setCurrentRoute(null);
+      setParams({});
+    }
+  }
+
+  function navigate(path) {
+    if (typeof window !== 'undefined') {
+      window.history.pushState({}, '', path);
+      matchAndSetRoute(path);
+    }
+  }
+
+  const routerValue = {
+    currentRoute,
+    params,
+    navigate,
+    pathname: typeof window !== 'undefined' ? window.location.pathname : initialPath,
+    isSSR: !isClient
+  };
+
+  const Component = currentRoute?.component;
+
+  return React.createElement(
+    RouterContext.Provider,
+    { value: routerValue },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
+  );
+}
+
+// ✅ SSR-safe Link component
+export function Link({ to, children, ...props }) {
+  const { navigate, isSSR } = useRouter();
+
+  function handleClick(e) {
+    // Don't prevent default during SSR
+    if (isSSR) return;
+    
+    e.preventDefault();
+    navigate(to);
+  }
+
+  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
+}
+
+function NotFound() {
+  return React.createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        fontFamily: 'system-ui'
+      }
+    },
+    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')
+  );
+}

package/src/utils/meta-extractor.js

@@ -0,0 +1,61 @@
+// bertui/src/utils/meta-extractor.js
+export function extractMetaFromSource(code) {
+  try {
+    if (!code.includes('export const meta')) {
+      return null;
+    }
+    
+    const metaStart = code.indexOf('export const meta = {');
+    if (metaStart === -1) return null;
+    
+    let braceCount = 0;
+    let inString = false;
+    let stringChar = '';
+    let metaEnd = -1;
+    
+    for (let i = metaStart + 'export const meta = {'.length; i < code.length; i++) {
+      const char = code[i];
+      const prevChar = i > 0 ? code[i - 1] : '';
+      
+      if (!inString && (char === '"' || char === "'" || char === '`')) {
+        inString = true;
+        stringChar = char;
+      } else if (inString && char === stringChar && prevChar !== '\\') {
+        inString = false;
+      }
+      
+      if (!inString) {
+        if (char === '{') braceCount++;
+        if (char === '}') {
+          if (braceCount === 0) {
+            metaEnd = i;
+            break;
+          }
+          braceCount--;
+        }
+      }
+    }
+    
+    if (metaEnd === -1) return null;
+    
+    const metaString = code.substring(metaStart + 'export const meta = {'.length - 1, metaEnd + 1);
+    const meta = {};
+    const pairs = metaString.match(/(\w+)\s*:\s*(['"`][^'"`]*['"`])/g) || [];
+    
+    pairs.forEach(pair => {
+      const colonIndex = pair.indexOf(':');
+      if (colonIndex === -1) return;
+      
+      const key = pair.substring(0, colonIndex).trim();
+      const value = pair.substring(colonIndex + 1).trim().slice(1, -1);
+      
+      if (key && value) {
+        meta[key] = value;
+      }
+    });
+    
+    return Object.keys(meta).length > 0 ? meta : null;
+  } catch (error) {
+    return null;
+  }
+}

package/types/config.d.ts

@@ -0,0 +1,80 @@
+// bertui/types/config.d.ts
+declare module 'bertui/config' {
+  /**
+   * BertUI Configuration
+   */
+  export interface BertuiConfig {
+    /** Site name for SEO */
+    siteName?: string;
+    
+    /** Base URL for sitemap generation (e.g., "https://example.com") */
+    baseUrl?: string;
+    
+    /** HTML meta tags configuration */
+    meta?: {
+      /** Page title */
+      title?: string;
+      /** Meta description */
+      description?: string;
+      /** Meta keywords */
+      keywords?: string;
+      /** Author name */
+      author?: string;
+      /** Open Graph image URL */
+      ogImage?: string;
+      /** Open Graph title */
+      ogTitle?: string;
+      /** Open Graph description */
+      ogDescription?: string;
+      /** Theme color */
+      themeColor?: string;
+      /** Language code (e.g., "en") */
+      lang?: string;
+    };
+    
+    /** App shell configuration */
+    appShell?: {
+      /** Show loading indicator */
+      loading?: boolean;
+      /** Loading text */
+      loadingText?: string;
+      /** Background color */
+      backgroundColor?: string;
+    };
+    
+    /** robots.txt configuration */
+    robots?: {
+      /** Paths to disallow in robots.txt */
+      disallow?: string[];
+      /** Crawl delay in seconds */
+      crawlDelay?: number;
+    };
+  }
+
+  /**
+   * Page meta configuration (exported from page files)
+   */
+  export interface PageMeta {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    author?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
+    themeColor?: string;
+    lang?: string;
+    publishedDate?: string;
+    updatedDate?: string;
+  }
+
+  /**
+   * Default BertUI configuration
+   */
+  export const defaultConfig: BertuiConfig;
+
+  /**
+   * Load BertUI configuration from bertui.config.js
+   */
+  export function loadConfig(root: string): Promise<BertuiConfig>;
+}

package/types/index.d.ts

@@ -0,0 +1,116 @@
+// bertui/types/index.d.ts
+
+declare namespace React {
+  type ReactNode = any;
+}
+
+declare global {
+  namespace JSX {
+    type Element = any;
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
+declare module 'bertui' {
+  import { BertuiConfig } from 'bertui/config';
+  
+  /**
+   * Logger utility
+   */
+  export interface Logger {
+    info(message: string): void;
+    success(message: string): void;
+    warn(message: string): void;
+    error(message: string): void;
+    debug(message: string): void;
+    bigLog(message: string, options?: { color?: string }): void;
+    table(data: any[]): void;
+  }
+
+  /**
+   * Build options
+   */
+  export interface BuildOptions {
+    /** Project root directory */
+    root?: string;
+  }
+
+  /**
+   * Dev server options
+   */
+  export interface DevOptions {
+    /** Server port */
+    port?: number;
+    /** Project root directory */
+    root?: string;
+  }
+
+  /**
+   * Compile options
+   */
+  export interface CompileOptions {
+    /** Project root directory */
+    root?: string;
+  }
+
+  /**
+   * Logger instance
+   */
+  export const logger: Logger;
+
+  /**
+   * Default configuration
+   */
+  export const defaultConfig: BertuiConfig;
+
+  /**
+   * Load configuration
+   */
+  export function loadConfig(root: string): Promise<BertuiConfig>;
+
+  /**
+   * Start development server
+   */
+  export function startDev(options?: DevOptions): Promise<void>;
+
+  /**
+   * Build for production
+   */
+  export function buildProduction(options?: BuildOptions): Promise<void>;
+
+  /**
+   * Compile project
+   */
+  export function compileProject(root: string): Promise<{
+    outDir: string;
+    stats: { files: number; skipped: number };
+    routes: any[];
+  }>;
+
+  /**
+   * CLI program
+   */
+  export function program(): void;
+
+  /**
+   * BertUI version
+   */
+  export const version: string;
+}
+
+// Global declarations for Server Islands
+declare global {
+  /**
+   * Mark a page component as a Server Island (SSG)
+   * Add this export to any page to enable static generation:
+   * 
+   * @example
+   * ```tsx
+   * export const render = "server";
+   * ```
+   */
+  export const render: "server" | "client";
+}
+
+export {};

package/types/react.d.ts

@@ -0,0 +1,13 @@
+// bertui/types/react.d.ts
+import React from 'react';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>, 
+        HTMLElement
+      >;
+    }
+  }
+}

package/types/router.d.ts

@@ -0,0 +1,79 @@
+// bertui/types/router.d.ts
+declare module 'bertui/router' {
+  import { ReactNode, ComponentType } from 'react';
+
+  /**
+   * Route parameter object
+   */
+  export interface RouteParams {
+    [key: string]: string;
+  }
+
+  /**
+   * Router context value
+   */
+  export interface RouterContext {
+    /** Current active route */
+    currentRoute: Route | null;
+    /** Dynamic route parameters */
+    params: RouteParams;
+    /** Navigate to a new path */
+    navigate: (path: string) => void;
+    /** Current pathname */
+    pathname: string;
+    /** Whether running in SSR mode */
+    isSSR?: boolean;
+  }
+
+  /**
+   * Route configuration object
+   */
+  export interface Route {
+    /** Route path (e.g., "/", "/blog", "/user/:id") */
+    path: string;
+    /** React component to render */
+    component: ComponentType<{ params?: RouteParams }>;
+    /** Route type: "static" or "dynamic" */
+    type: 'static' | 'dynamic';
+  }
+
+  /**
+   * Router component props
+   */
+  export interface RouterProps {
+    /** Array of route configurations */
+    routes: Route[];
+    /** Initial path for SSR */
+    initialPath?: string;
+  }
+
+  /**
+   * Link component props
+   */
+  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Destination path */
+    to: string;
+    /** Link content */
+    children: ReactNode;
+  }
+
+  /**
+   * Router component for client-side routing
+   */
+  export const Router: ComponentType<RouterProps>;
+
+  /**
+   * Link component for navigation
+   */
+  export const Link: ComponentType<LinkProps>;
+
+  /**
+   * Hook to access router context
+   */
+  export function useRouter(): RouterContext;
+
+  /**
+   * Exported routes configuration
+   */
+  export const routes: Route[];
+}