meno-core 1.0.53 → 1.1.0

package/lib/client/routing/Router.tsx

@@ -1,9 +1,9 @@
 /**
  * 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
@@ -13,24 +13,24 @@
  * - Viewport width tracking for responsive styles
  */
 
-import { createElement as h, useState, useEffect, useLayoutEffect, 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 { InteractiveStylesRegistry } from "../InteractiveStylesRegistry";
-import { UtilityClassCollector } from "../styles/UtilityClassCollector";
-import { applyNonce } from "../styles/cspNonce";
-import { initializeClient, setupEventHandlers } from "../ClientInitializer";
-import type { ComponentNode, I18nConfig, PrefetchConfig, CMSItem } 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";
-import { rewriteViewportUnits } from "../../shared/viewportUnits";
+import { createElement as h, useState, useEffect, useLayoutEffect, 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 { InteractiveStylesRegistry } from '../InteractiveStylesRegistry';
+import { UtilityClassCollector } from '../styles/UtilityClassCollector';
+import { applyNonce } from '../styles/cspNonce';
+import { initializeClient, setupEventHandlers } from '../ClientInitializer';
+import type { ComponentNode, I18nConfig, PrefetchConfig, CMSItem } from '../../shared/types';
+import { parseLocaleFromPath, setStoredLocale, DEFAULT_I18N_CONFIG } from '../../shared/i18n';
+import { fetchI18nConfig, setI18nConfig as setCachedI18nConfig, invalidateI18nConfig } from '../i18nConfigService';
+import { IFRAME_MESSAGE_TYPES } from '../../shared/constants';
+import { rewriteViewportUnits } from '../../shared/viewportUnits';
 
 /** SSR-serialized CMS context for client-side hydration */
 interface SSRCMSContext {
@@ -79,10 +79,10 @@ export interface RouterProps {
 
 /**
  * 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
@@ -90,15 +90,15 @@ export interface RouterProps {
  * - 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" />
  * ```
@@ -113,11 +113,11 @@ export function Router(props: RouterProps = {}): ReactElement {
   // 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
@@ -130,16 +130,14 @@ export function Router(props: RouterProps = {}): ReactElement {
   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 [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 [registryVersion, setRegistryVersion] = useState(0);
   // Don't block rendering waiting for CMS context - render immediately and re-render when context arrives
-  const [awaitingCmsContext, setAwaitingCmsContext] = useState(false);
+  const [awaitingCmsContext, _setAwaitingCmsContext] = useState(false);
   const [collectionItemsMap, setCollectionItemsMap] = useState<Record<string, CMSItem[]>>({});
   // Store CMS template path for HMR reloads (so we don't lose it after initial load)
   const [cmsTemplatePath, setCmsTemplatePath] = useState<string | null>(null);
@@ -161,36 +159,38 @@ export function Router(props: RouterProps = {}): ReactElement {
   const initialLoadDoneRef = useRef(false);
 
   // Create RouteLoader instance
-  const routeLoader = useRef(new RouteLoader({
-    componentRegistry: services.componentRegistry,
-    prefetchService: services.prefetchService,
-    onLoadStart: () => {
-      setLoading(true);
-      setShowNotFound(false);
-      // Clear interactive styles and utility class registries before new render
-      InteractiveStylesRegistry.clear();
-      UtilityClassCollector.clear();
-      // 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;
+  const routeLoader = useRef(
+    new RouteLoader({
+      componentRegistry: services.componentRegistry,
+      prefetchService: services.prefetchService,
+      onLoadStart: () => {
+        setLoading(true);
+        setShowNotFound(false);
+        // Clear interactive styles and utility class registries before new render
+        InteractiveStylesRegistry.clear();
+        UtilityClassCollector.clear();
+        // 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(() => {
@@ -204,7 +204,7 @@ export function Router(props: RouterProps = {}): ReactElement {
 
   // Load i18n config on mount using shared service
   useEffect(() => {
-    fetchI18nConfig().then(config => {
+    fetchI18nConfig().then((config) => {
       setI18nConfig(config);
       setCachedI18nConfig(config);
       // Update RouteLoader with i18n config so it can extract locale from paths
@@ -216,6 +216,28 @@ export function Router(props: RouterProps = {}): ReactElement {
     });
   }, []);
 
+  // Refresh the i18n config when project.config.json changes on disk (the HMRManager
+  // dispatches `hmr-config-update` for the server's `hmr:config-update` broadcast).
+  // Without this, adding a locale in the editor leaves this canvas with the stale
+  // locale set: the new locale's paths (e.g. /pl) don't parse as locale-prefixed,
+  // the literal path misses every page, and the canvas shows "Page not found" until
+  // a full reload. After the refetch, re-resolve the current route so an already
+  // failed (or locale-dependent) view recovers in place.
+  useEffect(() => {
+    const handleConfigUpdate = () => {
+      invalidateI18nConfig();
+      fetchI18nConfig().then((config) => {
+        setI18nConfig(config);
+        setCachedI18nConfig(config);
+        routeLoader.setI18nConfig(config);
+        setShowNotFound(false);
+        loadComponentsRef.current(window.location.pathname);
+      });
+    };
+    document.addEventListener('hmr-config-update', handleConfigUpdate);
+    return () => document.removeEventListener('hmr-config-update', handleConfigUpdate);
+  }, []);
+
   // Update locale when path changes
   useEffect(() => {
     const { locale } = parseLocaleFromPath(currentPath, i18nConfig);
@@ -274,8 +296,10 @@ export function Router(props: RouterProps = {}): ReactElement {
       // non-base → max-width of that breakpoint). When `media` is omitted (no
       // breakpoints configured) the rule applies unconditionally. The legacy
       // {maxWidth} payload from CSS_VARIABLE_SCOPED_UPDATE is still accepted.
-      if (event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE
-          || event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_SCOPED_UPDATE) {
+      if (
+        event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_UPDATE ||
+        event.data?.type === IFRAME_MESSAGE_TYPES.CSS_VARIABLE_SCOPED_UPDATE
+      ) {
         const { name, value, media, maxWidth } = event.data as {
           name: string;
           value: string;
@@ -374,7 +398,7 @@ export function Router(props: RouterProps = {}): ReactElement {
         const { componentName, definition } = event.data;
         if (componentName && definition) {
           services.componentRegistry.register(componentName, definition);
-          setRegistryVersion(v => v + 1);
+          setRegistryVersion((v) => v + 1);
         }
       }
     };
@@ -389,9 +413,12 @@ export function Router(props: RouterProps = {}): ReactElement {
     if (typeof window === 'undefined') return;
     if (window.parent === window) return; // Not in iframe
 
-    window.parent.postMessage({
-      type: IFRAME_MESSAGE_TYPES.CMS_CONTEXT_REQUEST
-    }, '*');
+    window.parent.postMessage(
+      {
+        type: IFRAME_MESSAGE_TYPES.CMS_CONTEXT_REQUEST,
+      },
+      '*',
+    );
   }, []);
 
   // Inject CSS before browser paint to prevent FOUC on client-side navigation
@@ -414,10 +441,13 @@ export function Router(props: RouterProps = {}): ReactElement {
       // Editor will generate CSS and send back via INTERACTIVE_CSS_UPDATE
       if (typeof window !== 'undefined' && window.parent !== window) {
         const registryData = Object.fromEntries(InteractiveStylesRegistry.getAll());
-        window.parent.postMessage({
-          type: IFRAME_MESSAGE_TYPES.INTERACTIVE_STYLES_UPDATE,
-          styles: registryData
-        }, '*');
+        window.parent.postMessage(
+          {
+            type: IFRAME_MESSAGE_TYPES.INTERACTIVE_STYLES_UPDATE,
+            styles: registryData,
+          },
+          '*',
+        );
       }
 
       // Wait for React to render before executing JavaScript (unless disabled for editor).
@@ -450,7 +480,7 @@ export function Router(props: RouterProps = {}): ReactElement {
     // Delay to let DOM fully render
     const timeoutId = setTimeout(() => {
       const links = document.querySelectorAll('a[href^="/"]');
-      links.forEach(link => {
+      links.forEach((link) => {
         const href = link.getAttribute('href');
         // Skip current page and empty hrefs
         if (href && href !== currentPath && href !== '#') {
@@ -464,23 +494,31 @@ export function Router(props: RouterProps = {}): ReactElement {
 
   // Load components function using RouteLoader
   // For CMS pages, use the stored template path instead of the URL path
-  const loadComponents = useCallback(async (path: string) => {
-    const pathToLoad = cmsTemplatePath || path;
-    await routeLoader.loadComponents(pathToLoad);
-  }, [cmsTemplatePath]);
+  const loadComponents = useCallback(
+    async (path: string) => {
+      const pathToLoad = cmsTemplatePath || path;
+      await routeLoader.loadComponents(pathToLoad);
+    },
+    [cmsTemplatePath],
+  );
 
   // Grace-aware version for HMR: skip reload if iframe just received committed data via postMessage
-  const loadComponentsForHMR = useCallback(async (path: string) => {
-    if (Date.now() - lastCommitTimestampRef.current < COMMIT_GRACE_MS) {
-      return;
-    }
-    const pathToLoad = cmsTemplatePath || path;
-    await routeLoader.loadComponents(pathToLoad);
-  }, [cmsTemplatePath]);
+  const loadComponentsForHMR = useCallback(
+    async (path: string) => {
+      if (Date.now() - lastCommitTimestampRef.current < COMMIT_GRACE_MS) {
+        return;
+      }
+      const pathToLoad = cmsTemplatePath || path;
+      await routeLoader.loadComponents(pathToLoad);
+    },
+    [cmsTemplatePath],
+  );
 
   // Ref for loadComponents to avoid recreating effects when cmsTemplatePath changes
   const loadComponentsRef = useRef(loadComponents);
-  useEffect(() => { loadComponentsRef.current = loadComponents; }, [loadComponents]);
+  useEffect(() => {
+    loadComponentsRef.current = loadComponents;
+  }, [loadComponents]);
 
   // Handle CMS HMR updates - fetch updated collection items directly
   // Stable callback - always fetches, lets React handle deduplication via setState
@@ -490,9 +528,9 @@ export function Router(props: RouterProps = {}): ReactElement {
       if (response.ok) {
         const data = await response.json();
         // Using functional update - always merges with latest state
-        setCollectionItemsMap(prev => ({ ...prev, [collection]: data.items || [] }));
+        setCollectionItemsMap((prev) => ({ ...prev, [collection]: data.items || [] }));
       }
-    } catch (error) {
+    } catch (_error) {
       // Silently fail - CMS refresh is non-critical
     }
   }, []); // No dependencies - stable callback
@@ -525,9 +563,15 @@ export function Router(props: RouterProps = {}): ReactElement {
       delete window.__MENO_CMS__;
     }
 
-    // Initial load
+    // Initial load. Gated on the i18n config fetch (deduped with the mount effect
+    // above; never rejects) so the first route resolution already knows the locale
+    // set — otherwise booting directly at a locale-prefixed path (/pl) races the
+    // config fetch and the loader looks up the literal "/pl" page → spurious 404.
     routeLoader.loadPages();
-    routeLoader.loadGlobalComponents().then(() => {
+    Promise.all([routeLoader.loadGlobalComponents(), fetchI18nConfig()]).then(([, config]) => {
+      // Hand the config to the loader here too (idempotent with the config effect
+      // above) so the locale parse below never depends on effect ordering.
+      routeLoader.setI18nConfig(config);
       // Use template path for CMS pages, otherwise use the current URL path
       const pathToLoad = ssrCmsContext ? ssrCmsContext.templatePath : currentPath;
       loadComponents(pathToLoad);
@@ -576,7 +620,7 @@ export function Router(props: RouterProps = {}): ReactElement {
       cmsContext,
       cmsLocale,
       collectionItemsMap,
-      templateContext: null
+      templateContext: null,
     });
   } else if (treeToRender && awaitingCmsContext && previousComponentTree) {
     // While waiting for CMS context, show previous tree to avoid blink
@@ -590,7 +634,7 @@ export function Router(props: RouterProps = {}): ReactElement {
       cmsContext,
       cmsLocale,
       collectionItemsMap,
-      templateContext: null
+      templateContext: null,
     });
   } else if (loading || awaitingCmsContext) {
     // Show previous content while loading if available
@@ -605,18 +649,20 @@ export function Router(props: RouterProps = {}): ReactElement {
         cmsContext,
         cmsLocale,
         collectionItemsMap,
-        templateContext: null
+        templateContext: null,
       });
     } else {
       // Show subtle spinner while loading
-      pageContent = h('div', {
-        style: {
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100vh'
-        }
-      },
+      pageContent = h(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+          },
+        },
         h('style', null, '@keyframes meno-spin { to { transform: rotate(360deg); } }'),
         h('div', {
           style: {
@@ -625,49 +671,57 @@ export function Router(props: RouterProps = {}): ReactElement {
             border: '2px solid #e5e7eb',
             borderTopColor: '#6b7280',
             borderRadius: '50%',
-            animation: 'meno-spin 0.6s linear infinite'
-          }
-        })
+            animation: 'meno-spin 0.6s linear infinite',
+          },
+        }),
       );
     }
   } else if (showNotFound) {
-    pageContent = h('div', { 
-      style: { 
-        textAlign: 'center', 
-        padding: '40px',
-        maxWidth: '800px',
-        margin: '0 auto'
-      } 
-    }, 
+    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('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,
+            ),
+          ),
+        ),
       ),
-      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)
@@ -681,21 +735,23 @@ export function Router(props: RouterProps = {}): ReactElement {
       cmsContext,
       cmsLocale,
       collectionItemsMap,
-      templateContext: null
+      templateContext: null,
     });
   }
 
   // Fallback: if no content matched, show spinner
   // This prevents empty flash when loading=false but componentTree=null
   if (!pageContent) {
-    pageContent = h('div', {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh'
-      }
-    },
+    pageContent = h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        },
+      },
       h('style', null, '@keyframes meno-spin { to { transform: rotate(360deg); } }'),
       h('div', {
         style: {
@@ -704,20 +760,21 @@ export function Router(props: RouterProps = {}): ReactElement {
           border: '2px solid #e5e7eb',
           borderTopColor: '#6b7280',
           borderRadius: '50%',
-          animation: 'meno-spin 0.6s linear infinite'
-        }
-      })
+          animation: 'meno-spin 0.6s linear infinite',
+        },
+      }),
     );
   }
 
   // Render HMRManager once at the top level with page content
-  return h('div', null,
+  return h(
+    'div',
+    null,
     h(HMRManager, {
       onReload: loadComponentsForHMR,
       onCMSUpdate: handleCMSUpdate,
       currentPath: currentPath,
     }),
-    pageContent
+    pageContent,
   );
 }
-