meno-core 1.0.0

package/lib/client/routing/Router.tsx

@@ -0,0 +1,382 @@
+/**
+ * Router Component
+ * 
+ * Main router component that handles routing, state management, and rendering.
+ * Uses all extracted modules for a clean, modular architecture.
+ * 
+ * Responsibilities:
+ * - Route loading and navigation
+ * - Component tree state management
+ * - SSR hydration detection
+ * - HMR integration
+ * - Loading and error states
+ * - Viewport width tracking for responsive styles
+ */
+
+import { createElement as h, useState, useEffect, useRef, useCallback, useMemo } from "react";
+import type { ReactElement } from "react";
+import { renderPage } from "../core/ComponentRenderer";
+import { RouteLoader } from "./RouteLoader";
+import { detectSSRContent, getInitialLoadingState } from "../hydration/HydrationUtils";
+import { HMRManager } from "../hmr/HMRManager";
+import { createNavigationHandler } from "../navigation";
+import { initializeBreakpoints } from "../responsiveStyleResolver";
+import { elementRegistry } from "../elementRegistry";
+import { initializeClient, setupEventHandlers } from "../ClientInitializer";
+import type { ComponentNode, I18nConfig } from "../../shared/types";
+import { parseLocaleFromPath, setStoredLocale, DEFAULT_I18N_CONFIG } from "../../shared/i18n";
+import { fetchI18nConfig, setI18nConfig as setCachedI18nConfig } from "../i18nConfigService";
+import { IFRAME_MESSAGE_TYPES } from "../../shared/constants";
+
+/**
+ * Router component props
+ */
+export interface RouterProps {
+  /**
+   * Initial path (optional, defaults to window.location.pathname)
+   * 
+   * @example
+   * ```tsx
+   * <Router initialPath="/about" />
+   * ```
+   */
+  initialPath?: string;
+}
+
+/**
+ * Router Component
+ * 
+ * Main router component that handles client-side routing, page loading, and rendering.
+ * Manages component tree state, loading states, and integrates with HMR for hot reloading.
+ * 
+ * Features:
+ * - Automatic route loading on path changes
+ * - SSR hydration support
+ * - Loading state management with previous content preservation
+ * - 404 handling with available pages list
+ * - Viewport width tracking for responsive styles
+ * - HMR integration for development
+ * 
+ * @param props - Router configuration props
+ * @returns ReactElement representing the router and current page
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Router />
+ * 
+ * // With custom initial path
+ * <Router initialPath="/custom" />
+ * ```
+ */
+export function Router(props: RouterProps = {}): ReactElement {
+  const { initialPath = window.location.pathname } = props;
+  const hasSSRContent = detectSSRContent();
+
+  // Initialize client services (created once on mount)
+  const services = useMemo(() => initializeClient(), []);
+
+  // Setup event handlers on mount
+  useEffect(() => {
+    const cleanup = setupEventHandlers(services);
+    
+    // Cleanup on unmount
+    return cleanup;
+  }, [services]);
+  
+  // State management
+  const [componentTree, setComponentTree] = useState<ComponentNode | ComponentNode[] | null>(null);
+  // Keep previous componentTree to show during transitions
+  const [previousComponentTree, setPreviousComponentTree] = useState<ComponentNode | ComponentNode[] | null>(null);
+  // Ref to track current componentTree for closure access (needed for capturing current value in async functions)
+  const componentTreeRef = useRef<ComponentNode | ComponentNode[] | null>(null);
+  const [loading, setLoading] = useState(getInitialLoadingState(hasSSRContent));
+  const [currentPath, setCurrentPath] = useState(initialPath);
+  const [availablePages, setAvailablePages] = useState<string[]>([]);
+  const [showNotFound, setShowNotFound] = useState(false);
+  const [viewportWidth, setViewportWidth] = useState<number>(
+    typeof window !== 'undefined' ? window.innerWidth : 1920
+  );
+  const [i18nConfig, setI18nConfig] = useState<I18nConfig>(DEFAULT_I18N_CONFIG);
+  const [currentLocale, setCurrentLocale] = useState<string>(DEFAULT_I18N_CONFIG.defaultLocale);
+  const [cmsContext, setCmsContext] = useState<Record<string, unknown> | null>(null);
+  const [cmsLocale, setCmsLocale] = useState<string | null>(null);
+  const [awaitingCmsContext, setAwaitingCmsContext] = useState(false);
+
+  // Create RouteLoader instance
+  const routeLoader = useRef(new RouteLoader({
+    componentRegistry: services.componentRegistry,
+    onLoadStart: () => {
+      setLoading(true);
+      setShowNotFound(false);
+      // Save current componentTree as previous before loading
+      if (componentTreeRef.current) {
+        setPreviousComponentTree(componentTreeRef.current);
+      }
+    },
+    onLoadComplete: (tree) => {
+      setComponentTree(tree);
+      setLoading(false);
+      setShowNotFound(false);
+      // Clear previous componentTree now that we have new content
+      setPreviousComponentTree(null);
+    },
+    onLoadError: (error) => {
+      setLoading(false);
+      setShowNotFound(false);
+      setPreviousComponentTree(null);
+    },
+    onNotFound: () => setShowNotFound(true),
+    onPagesLoaded: (pages) => setAvailablePages(pages),
+    onLocaleDetected: (locale) => setCurrentLocale(locale),
+  })).current;
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    componentTreeRef.current = componentTree;
+  }, [componentTree]);
+
+  // Initialize breakpoints on mount
+  useEffect(() => {
+    initializeBreakpoints();
+  }, []);
+
+  // Load i18n config on mount using shared service
+  useEffect(() => {
+    fetchI18nConfig().then(config => {
+      setI18nConfig(config);
+      setCachedI18nConfig(config);
+      // Update RouteLoader with i18n config so it can extract locale from paths
+      routeLoader.setI18nConfig(config);
+      // Extract locale from current path
+      const { locale } = parseLocaleFromPath(currentPath, config);
+      setCurrentLocale(locale);
+      setStoredLocale(locale); // Persist preference
+    });
+  }, []);
+
+  // Update locale when path changes
+  useEffect(() => {
+    const { locale } = parseLocaleFromPath(currentPath, i18nConfig);
+    setCurrentLocale(locale);
+    setStoredLocale(locale); // Persist preference
+  }, [currentPath, i18nConfig]);
+
+  // Listen to viewport resize to update responsive styles
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      setViewportWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Listen for CMS context updates from parent window (editor)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === IFRAME_MESSAGE_TYPES.CMS_CONTEXT_UPDATE) {
+        setCmsContext(event.data.cmsItem);
+        setCmsLocale(event.data.locale || null);
+        setAwaitingCmsContext(false); // Context received, ready to render
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Request CMS context from parent when iframe is ready
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (window.parent === window) return; // Not in iframe
+
+    setAwaitingCmsContext(true); // Mark that we're waiting for context
+    window.parent.postMessage({
+      type: IFRAME_MESSAGE_TYPES.CMS_CONTEXT_REQUEST
+    }, '*');
+
+    // Fallback timeout - if no response in 200ms, render anyway
+    // This handles cases where CMSPanel isn't mounted or page has no CMS templates
+    const timeoutId = setTimeout(() => {
+      setAwaitingCmsContext(false);
+    }, 200);
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  // Inject CSS and execute JavaScript after component tree is rendered
+  useEffect(() => {
+    if (componentTree) {
+      // Inject CSS immediately
+      services.styleInjector.inject();
+      
+      // Wait for React to render before executing JavaScript
+      const timeoutId = setTimeout(() => {
+        services.scriptExecutor.execute();
+      }, 100);
+      
+      return () => {
+        clearTimeout(timeoutId);
+        // Don't clear registry here - ref callbacks handle cleanup when elements unmount
+        // Clearing here would remove elements before React unmounts them
+      };
+    } else {
+      // Clear registry when tree is cleared (no elements to register)
+      elementRegistry.clear();
+    }
+  }, [componentTree, services]);
+
+  // Load components function using RouteLoader
+  const loadComponents = useCallback(async (path: string) => {
+    await routeLoader.loadComponents(path);
+  }, []);
+
+  // Handle navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      const newPath = window.location.pathname;
+      setCurrentPath(newPath);
+      setShowNotFound(false); // Reset not found state on navigation
+      loadComponents(newPath);
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [loadComponents]);
+
+  useEffect(() => {
+    // Initial load
+    routeLoader.loadPages();
+    routeLoader.loadGlobalComponents().then(() => {
+      loadComponents(currentPath);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount - currentPath handled by separate effect below
+
+  // Reload when path changes
+  useEffect(() => {
+    setShowNotFound(false); // Reset not found state when path changes
+    loadComponents(currentPath);
+  }, [currentPath, loadComponents]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      routeLoader.cancel();
+    };
+  }, []);
+
+  // Render logic: prioritize current tree, then previous tree during loading, then loading/not found states
+  let pageContent: ReactElement | null = null;
+
+  if (componentTree && !awaitingCmsContext) {
+    // Show current tree when we have it and CMS context is ready (or not needed)
+    pageContent = renderPage({
+      tree: componentTree,
+      currentPath,
+      viewportWidth,
+      componentBuilder: services.componentBuilder,
+      locale: currentLocale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale
+    });
+  } else if (componentTree && awaitingCmsContext && previousComponentTree) {
+    // While waiting for CMS context, show previous tree to avoid blink
+    pageContent = renderPage({
+      tree: previousComponentTree,
+      currentPath,
+      viewportWidth,
+      componentBuilder: services.componentBuilder,
+      locale: currentLocale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale
+    });
+  } else if (loading || awaitingCmsContext) {
+    // Show previous content while loading if available
+    if (previousComponentTree) {
+      pageContent = renderPage({
+        tree: previousComponentTree,
+        currentPath,
+        viewportWidth,
+        componentBuilder: services.componentBuilder,
+        locale: currentLocale,
+        i18nConfig,
+        cmsContext,
+        cmsLocale
+      });
+    } else {
+      // Only show loading message if no previous content
+      pageContent = h('div', { style: { textAlign: 'center', padding: '40px' } }, 
+        h('h2', null, 'Loading page...')
+      );
+    }
+  } else if (showNotFound) {
+    pageContent = h('div', { 
+      style: { 
+        textAlign: 'center', 
+        padding: '40px',
+        maxWidth: '800px',
+        margin: '0 auto'
+      } 
+    }, 
+      h('h2', null, `Page not found: ${currentPath}`),
+      h('p', { style: { marginTop: '16px', marginBottom: '24px', color: '#666' } }, 
+        'Available pages:'
+      ),
+      h('ul', { 
+        style: { 
+          listStyle: 'none', 
+          padding: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          alignItems: 'center'
+        } 
+      }, 
+        availablePages.map((page, i) => 
+          h('li', { key: i },
+            h('a', {
+              href: page,
+              onClick: createNavigationHandler(page),
+              style: {
+                color: '#0070f3',
+                textDecoration: 'none',
+                fontSize: '18px',
+                fontWeight: '600'
+              }
+            }, page === '/' ? 'Home (/)' : page)
+          )
+        )
+      )
+    );
+  } else if (previousComponentTree) {
+    // Keep previous content visible during timeout (waiting to determine if not found)
+    pageContent = renderPage({
+      tree: previousComponentTree,
+      currentPath,
+      viewportWidth,
+      componentBuilder: services.componentBuilder,
+      locale: currentLocale,
+      i18nConfig,
+      cmsContext,
+      cmsLocale
+    });
+  }
+
+  // Render HMRManager once at the top level with page content
+  return h('div', null,
+    h(HMRManager, {
+      onReload: loadComponents,
+      currentPath: currentPath,
+    }),
+    pageContent
+  );
+}
+