bertui 1.0.2 → 1.1.0

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')
+  );
+}