meno-core 1.0.0

package/lib/client/routing/RouteLoader.ts

@@ -0,0 +1,347 @@
+/**
+ * Route Loader
+ * Handles loading of pages, components, and manages race conditions
+ */
+
+import { API_ROUTES, NOT_FOUND_TIMEOUT_MS } from '../../shared/constants';
+import type { ComponentRegistry } from '../componentRegistry';
+import type { ComponentNode, PageData, I18nConfig } from '../../shared/types';
+import { validatePageData } from '../../shared/validation/validators';
+import { parseLocaleFromPath, DEFAULT_I18N_CONFIG } from '../../shared/i18n';
+
+export interface RouteLoaderConfig {
+  componentRegistry: ComponentRegistry;
+  onLoadStart?: () => void;
+  onLoadComplete?: (tree: ComponentNode | ComponentNode[] | null) => void;
+  onLoadError?: (error: Error, errorTree?: ComponentNode) => void;
+  onNotFound?: () => void;
+  onPagesLoaded?: (pages: string[]) => void;
+  onLocaleDetected?: (locale: string) => void;
+}
+
+export class RouteLoader {
+  private abortController: AbortController | null = null;
+  private notFoundTimeout: NodeJS.Timeout | null = null;
+  private config: RouteLoaderConfig;
+  private isCancelled: boolean = false;
+  private i18nConfig: I18nConfig = DEFAULT_I18N_CONFIG;
+
+  constructor(config: RouteLoaderConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Update i18n configuration
+   */
+  setI18nConfig(config: I18nConfig): void {
+    this.i18nConfig = config;
+  }
+
+  /**
+   * Load global components (shared across all pages)
+   * @param signal Optional abort signal to cancel the request
+   */
+  async loadGlobalComponents(signal?: AbortSignal): Promise<void> {
+    try {
+      const fetchOptions: RequestInit = { cache: 'no-store' };
+      if (signal) {
+        fetchOptions.signal = signal;
+      }
+
+      const response = await fetch(API_ROUTES.COMPONENTS, fetchOptions);
+      
+      // Check if aborted after fetch
+      if (signal?.aborted) {
+        return;
+      }
+
+      const globalComps = await response.json();
+
+      // Check again if aborted after JSON parse
+      if (signal?.aborted) {
+        return;
+      }
+
+      if (Object.keys(globalComps).length > 0) {
+        // Merge global components into registry (page-specific components will override)
+        this.config.componentRegistry.merge(globalComps);
+        // JavaScript will be executed via useEffect after componentTree renders
+      }
+    } catch (error) {
+      // Ignore abort errors
+      if (error instanceof Error && error.name === 'AbortError') {
+        return;
+      }
+      // Continue anyway - components might still work with cached/previous registry state
+    }
+  }
+
+  /**
+   * Load available pages list
+   */
+  async loadPages(): Promise<string[]> {
+    try {
+      const response = await fetch(API_ROUTES.PAGES);
+      const data = await response.json();
+      const pages = data.pages || [];
+      
+      if (this.config.onPagesLoaded) {
+        this.config.onPagesLoaded(pages);
+      }
+      
+      return pages;
+    } catch (error) {
+      return [];
+    }
+  }
+
+  /**
+   * Load JSON components for current page
+   */
+  async loadComponents(path: string): Promise<ComponentNode | ComponentNode[] | null> {
+    // Cancel any previous loading request
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    // Clear any pending "not found" timeout
+    this.clearNotFoundTimeout();
+
+    // Reset cancelled flag
+    this.isCancelled = false;
+
+    // Create new abort controller for this request
+    const abortController = new AbortController();
+    this.abortController = abortController;
+
+    try {
+      // Set loading state and reset showNotFound
+      if (this.config.onLoadStart && !this.isCancelled) {
+        this.config.onLoadStart();
+      }
+
+      // Reload global components first (with abort signal)
+      await this.loadGlobalComponents(abortController.signal);
+
+      // Check if request was aborted
+      if (abortController.signal.aborted || this.isCancelled) {
+        return null;
+      }
+
+      // Parse locale from path (e.g., /pl/about -> locale: 'pl', path: '/about')
+      const { locale, pathWithoutLocale } = parseLocaleFromPath(path, this.i18nConfig);
+
+      // Notify about detected locale
+      if (this.config.onLocaleDetected && !this.isCancelled) {
+        this.config.onLocaleDetected(locale);
+      }
+
+      const response = await fetch(`${API_ROUTES.YAML}?page=${encodeURIComponent(pathWithoutLocale)}`, {
+        cache: 'no-store',
+        signal: abortController.signal,
+      });
+
+      // Check again if aborted (after fetch completes)
+      if (abortController.signal.aborted || this.isCancelled) {
+        return null;
+      }
+
+      if (!response.ok) {
+        
+        if (this.config.onLoadComplete && !this.isCancelled) {
+          this.config.onLoadComplete(null);
+        }
+
+        // Delay showing "not found" to prevent flash
+        // Only set timeout if not cancelled
+        if (!this.isCancelled) {
+          this.notFoundTimeout = setTimeout(() => {
+            // Check again before calling callback (component might have unmounted)
+            if (!this.isCancelled && this.config.onNotFound) {
+              this.config.onNotFound();
+            }
+            this.notFoundTimeout = null;
+          }, NOT_FOUND_TIMEOUT_MS);
+        }
+        
+        return null;
+      }
+
+      const jsonText = await response.text();
+
+      // Check if aborted after text extraction
+      if (abortController.signal.aborted || this.isCancelled) {
+        return null;
+      }
+
+      let parsed;
+      try {
+        parsed = JSON.parse(jsonText);
+        
+        // Validate page data (logs warnings but doesn't fail - graceful degradation)
+        const validationResult = validatePageData(parsed);
+        if (!validationResult.valid) {
+          console.warn(`[RouteLoader] Page validation failed for ${path}:`,
+            validationResult.errors.map(e => `${e.path}: ${e.message}`).join('; '));
+        }
+        // Use validated data if available, otherwise use parsed (graceful degradation)
+        parsed = validationResult.valid ? validationResult.data : parsed;
+      } catch (parseError) {
+        // Set an error tree to trigger error boundary
+        const errorTree = this.createErrorTree(
+          'Invalid JSON format',
+          `Failed to parse JSON for page: ${path}`,
+          String(parseError)
+        );
+        
+        if (this.config.onLoadComplete && !this.isCancelled) {
+          this.config.onLoadComplete(errorTree);
+        }
+        
+        if (this.config.onLoadError && !this.isCancelled) {
+          this.config.onLoadError(
+            parseError instanceof Error ? parseError : new Error(String(parseError)),
+            errorTree
+          );
+        }
+        
+        return errorTree;
+      }
+
+      // Check if JSON has components section (page-specific components)
+      let tree: ComponentNode | ComponentNode[] | null = null;
+      
+      if (parsed.components) {
+        // Merge page-specific components with global (page-specific override global)
+        try {
+          this.config.componentRegistry.merge(parsed.components);
+          // JavaScript will be executed via useEffect after componentTree renders
+        } catch (componentError) {
+        }
+        tree = parsed.root || parsed;
+      } else if (parsed.root) {
+        // Has root property but no components section - use only global components
+        tree = parsed.root;
+        // JavaScript will be executed via useEffect after componentTree renders
+      } else {
+        // Legacy format - direct component tree
+        tree = parsed;
+        // JavaScript will be executed via useEffect after componentTree renders
+      }
+
+      // Check one more time if aborted
+      if (abortController.signal.aborted || this.isCancelled) {
+        return null;
+      }
+
+      if (this.config.onLoadComplete && !this.isCancelled) {
+        this.config.onLoadComplete(tree);
+      }
+
+      this.clearNotFoundTimeout();
+      this.abortController = null;
+      
+      return tree;
+    } catch (error) {
+      // Ignore abort errors
+      if (error instanceof Error && error.name === 'AbortError') {
+        return null;
+      }
+
+      // Check if aborted before handling error
+      if (abortController.signal.aborted || this.isCancelled) {
+        return null;
+      }
+
+      // Set a generic error tree
+      const errorTree = this.createErrorTree('Error loading page', String(error));
+      
+      if (this.config.onLoadComplete && !this.isCancelled) {
+        this.config.onLoadComplete(errorTree);
+      }
+      
+      if (this.config.onLoadError && !this.isCancelled) {
+        this.config.onLoadError(
+          error instanceof Error ? error : new Error(String(error)),
+          errorTree
+        );
+      }
+
+      this.clearNotFoundTimeout();
+      this.abortController = null;
+      
+      return errorTree;
+    }
+  }
+
+  /**
+   * Cancel current loading request
+   */
+  cancel(): void {
+    this.isCancelled = true;
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+    this.clearNotFoundTimeout();
+  }
+
+  /**
+   * Create error tree ComponentNode structure
+   */
+  private createErrorTree(
+    title: string,
+    message: string,
+    details?: string
+  ): ComponentNode {
+    const children: ComponentNode[] = [
+      {
+        type: 'node',
+        tag: 'h2',
+        style: { color: '#c00' },
+        children: [title],
+      },
+      {
+        type: 'node',
+        tag: 'p',
+        style: { color: '#666', marginTop: '16px' },
+        children: [message],
+      },
+    ];
+
+    if (details) {
+      children.push({
+        type: 'node',
+        tag: 'pre',
+        style: {
+          background: '#f5f5f5',
+          padding: '16px',
+          borderRadius: '4px',
+          textAlign: 'left',
+          maxWidth: '600px',
+          margin: '16px auto',
+          overflow: 'auto',
+        },
+        children: [details],
+      });
+    }
+
+    return {
+      type: 'node',
+      tag: 'div',
+      style: { padding: '40px', textAlign: 'center' },
+      children,
+    };
+  }
+
+  /**
+   * Clear not found timeout
+   */
+  private clearNotFoundTimeout(): void {
+    if (this.notFoundTimeout) {
+      clearTimeout(this.notFoundTimeout);
+      this.notFoundTimeout = null;
+    }
+  }
+}
+