meno-core 1.0.0

package/lib/client/hooks/usePropertyAutocomplete.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared hook for property autocomplete functionality
+ * Handles property input, suggestions, and keyboard navigation
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { filterCSSProperties } from '../../shared/cssProperties';
+
+export function usePropertyAutocomplete(initialProperty: string = '') {
+  const [property, setProperty] = useState(initialProperty);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const suggestions = filterCSSProperties(property);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(prev =>
+        prev < suggestions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
+    }
+  };
+
+  return {
+    property,
+    setProperty,
+    showSuggestions,
+    setShowSuggestions,
+    selectedIndex,
+    setSelectedIndex,
+    suggestions,
+    inputRef,
+    handleKeyDown
+  };
+}

package/lib/client/hydration/HydrationUtils.test.ts

@@ -0,0 +1,154 @@
+import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
+import { detectSSRContent, getInitialLoadingState } from "./HydrationUtils";
+
+describe("HydrationUtils", () => {
+  let originalDocument: Document | undefined;
+  let originalWindow: Window | undefined;
+  let mockGetElementById: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    // Store original globals
+    originalDocument = globalThis.document;
+    originalWindow = globalThis.window;
+  });
+
+  afterEach(() => {
+    // Restore original globals
+    if (originalDocument) {
+      globalThis.document = originalDocument;
+    }
+    if (originalWindow) {
+      globalThis.window = originalWindow;
+    }
+  });
+
+  describe("detectSSRContent", () => {
+    test("should return true when root element exists with children", () => {
+      // Create a mock root element with children
+      const mockRoot = {
+        id: "root",
+        children: {
+          length: 1,
+        },
+      } as HTMLElement;
+
+      mockGetElementById = mock(() => mockRoot);
+      global.window = {} as any;
+      global.document = {
+        getElementById: mockGetElementById as any,
+      } as any;
+
+      const result = detectSSRContent();
+      expect(result).toBe(true);
+      expect(mockGetElementById).toHaveBeenCalledWith("root");
+    });
+
+    test("should return false when root element exists without children", () => {
+      // Create a mock root element without children
+      const mockRoot = {
+        id: "root",
+        children: {
+          length: 0,
+        },
+      } as HTMLElement;
+
+      mockGetElementById = mock(() => mockRoot);
+      global.window = {} as any;
+      global.document = {
+        getElementById: mockGetElementById as any,
+      } as any;
+
+      const result = detectSSRContent();
+      expect(result).toBe(false);
+      expect(mockGetElementById).toHaveBeenCalledWith("root");
+    });
+
+    test("should return false when root element does not exist", () => {
+      // Mock getElementById to return null
+      mockGetElementById = mock(() => null);
+      global.window = {} as any;
+      global.document = {
+        getElementById: mockGetElementById as any,
+      } as any;
+
+      const result = detectSSRContent();
+      expect(result).toBe(false);
+      expect(mockGetElementById).toHaveBeenCalledWith("root");
+    });
+
+    test("should return false when window is undefined (SSR environment)", () => {
+      // Mock SSR environment
+      const originalWindow = globalThis.window;
+      const originalDocument = globalThis.document;
+      
+      // @ts-expect-error - intentionally removing window for SSR test
+      delete globalThis.window;
+      // @ts-expect-error - intentionally removing document for SSR test
+      delete globalThis.document;
+
+      const result = detectSSRContent();
+      expect(result).toBe(false);
+
+      // Restore
+      globalThis.window = originalWindow;
+      globalThis.document = originalDocument;
+    });
+
+    test("should return false when document is undefined", () => {
+      // Mock environment without document
+      const originalDocument = globalThis.document;
+      
+      // @ts-expect-error - intentionally removing document for test
+      delete globalThis.document;
+
+      const result = detectSSRContent();
+      expect(result).toBe(false);
+
+      // Restore
+      globalThis.document = originalDocument;
+    });
+
+    test("should handle root element with multiple children", () => {
+      // Create a mock root element with multiple children
+      const mockRoot = {
+        id: "root",
+        children: {
+          length: 3,
+        },
+      } as HTMLElement;
+
+      mockGetElementById = mock(() => mockRoot);
+      global.window = {} as any;
+      global.document = {
+        getElementById: mockGetElementById as any,
+      } as any;
+
+      const result = detectSSRContent();
+      expect(result).toBe(true);
+      expect(mockGetElementById).toHaveBeenCalledWith("root");
+    });
+  });
+
+  describe("getInitialLoadingState", () => {
+    test("should return false when SSR content exists (smooth hydration)", () => {
+      const result = getInitialLoadingState(true);
+      expect(result).toBe(false);
+    });
+
+    test("should return true when no SSR content exists (show loading)", () => {
+      const result = getInitialLoadingState(false);
+      expect(result).toBe(true);
+    });
+
+    test("should handle edge case with explicit false", () => {
+      const result = getInitialLoadingState(false);
+      expect(result).toBe(true);
+    });
+
+    test("should handle edge case with explicit true", () => {
+      const result = getInitialLoadingState(true);
+      expect(result).toBe(false);
+    });
+  });
+});
+

package/lib/client/hydration/HydrationUtils.ts

@@ -0,0 +1,35 @@
+/**
+ * Hydration Utilities
+ * Provides utilities for detecting SSR content and managing hydration state.
+ */
+
+/**
+ * Detects if server-side rendered content exists in the DOM.
+ * Checks if the root element has children, which indicates SSR rendered content.
+ * 
+ * @returns true if SSR content is detected, false otherwise
+ */
+export function detectSSRContent(): boolean {
+  // Check if we're in a browser environment
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return false;
+  }
+
+  const rootElement = document.getElementById('root');
+  
+  // SSR content exists if root element has children
+  return rootElement !== null && rootElement.children.length > 0;
+}
+
+/**
+ * Determines the initial loading state based on SSR content presence.
+ * 
+ * @param hasSSRContent - Whether SSR content was detected
+ * @returns false if SSR content exists (for smooth hydration), true otherwise
+ */
+export function getInitialLoadingState(hasSSRContent: boolean): boolean {
+  // If SSR content exists, start with loading=false for smooth hydration
+  // If no SSR content, start with loading=true to show loading state
+  return !hasSSRContent;
+}
+

package/lib/client/i18nConfigService.test.ts

@@ -0,0 +1,74 @@
+import { describe, test, expect, beforeEach } from 'bun:test';
+import {
+  getI18nConfig,
+  isI18nConfigLoaded,
+  invalidateI18nConfig,
+  setI18nConfig,
+} from './i18nConfigService';
+import { DEFAULT_I18N_CONFIG } from '../shared/i18n';
+
+describe('i18nConfigService', () => {
+  beforeEach(() => {
+    invalidateI18nConfig();
+  });
+
+  describe('getI18nConfig', () => {
+    test('returns default config initially', () => {
+      const config = getI18nConfig();
+      expect(config.enabled).toBe(DEFAULT_I18N_CONFIG.enabled);
+      expect(config.defaultLocale).toBe(DEFAULT_I18N_CONFIG.defaultLocale);
+    });
+
+    test('returns cached config after set', () => {
+      const customConfig = { enabled: true, defaultLocale: 'fr', locales: [] };
+      setI18nConfig(customConfig);
+      const config = getI18nConfig();
+      expect(config.defaultLocale).toBe('fr');
+    });
+  });
+
+  describe('isI18nConfigLoaded', () => {
+    test('returns false initially', () => {
+      expect(isI18nConfigLoaded()).toBe(false);
+    });
+
+    test('returns true after config is set', () => {
+      const customConfig = { enabled: true, defaultLocale: 'en', locales: [] };
+      setI18nConfig(customConfig);
+      expect(isI18nConfigLoaded()).toBe(true);
+    });
+
+    test('returns false after invalidation', () => {
+      const customConfig = { enabled: true, defaultLocale: 'en', locales: [] };
+      setI18nConfig(customConfig);
+      expect(isI18nConfigLoaded()).toBe(true);
+      invalidateI18nConfig();
+      expect(isI18nConfigLoaded()).toBe(false);
+    });
+  });
+
+  describe('setI18nConfig', () => {
+    test('sets config that can be retrieved', () => {
+      const customConfig = {
+        enabled: true,
+        defaultLocale: 'de',
+        locales: [{ code: 'de', label: 'German' }]
+      };
+      setI18nConfig(customConfig);
+      const config = getI18nConfig();
+      expect(config).toEqual(customConfig);
+    });
+  });
+
+  describe('invalidateI18nConfig', () => {
+    test('clears cached config', () => {
+      const customConfig = { enabled: true, defaultLocale: 'es', locales: [] };
+      setI18nConfig(customConfig);
+      expect(isI18nConfigLoaded()).toBe(true);
+
+      invalidateI18nConfig();
+      expect(isI18nConfigLoaded()).toBe(false);
+      expect(getI18nConfig().defaultLocale).toBe(DEFAULT_I18N_CONFIG.defaultLocale);
+    });
+  });
+});

package/lib/client/i18nConfigService.ts

@@ -0,0 +1,78 @@
+/**
+ * Client-side i18n Config Service
+ * Provides cached, deduplicated access to i18n configuration
+ */
+
+import type { I18nConfig } from '../shared/types';
+import { DEFAULT_I18N_CONFIG, migrateI18nConfig } from '../shared/i18n';
+
+let cachedConfig: I18nConfig | null = null;
+let configPromise: Promise<I18nConfig> | null = null;
+
+/**
+ * Fetch i18n config from API with request deduplication and caching
+ * Multiple simultaneous calls will share the same request
+ */
+export async function fetchI18nConfig(): Promise<I18nConfig> {
+  // Return cached config if available
+  if (cachedConfig) {
+    return cachedConfig;
+  }
+
+  // Return existing promise if request is in flight
+  if (configPromise) {
+    return configPromise;
+  }
+
+  // Create new request
+  configPromise = fetch('/api/config')
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to fetch config');
+      }
+      return response.json();
+    })
+    .then(config => {
+      cachedConfig = migrateI18nConfig(config.i18n);
+      return cachedConfig;
+    })
+    .catch(() => {
+      cachedConfig = DEFAULT_I18N_CONFIG;
+      return cachedConfig;
+    })
+    .finally(() => {
+      configPromise = null;
+    });
+
+  return configPromise;
+}
+
+/**
+ * Get cached i18n config synchronously
+ * Returns default config if not yet loaded
+ */
+export function getI18nConfig(): I18nConfig {
+  return cachedConfig || DEFAULT_I18N_CONFIG;
+}
+
+/**
+ * Check if i18n config has been loaded
+ */
+export function isI18nConfigLoaded(): boolean {
+  return cachedConfig !== null;
+}
+
+/**
+ * Invalidate cached config (useful for HMR or config changes)
+ */
+export function invalidateI18nConfig(): void {
+  cachedConfig = null;
+  configPromise = null;
+}
+
+/**
+ * Set config directly (useful for SSR hydration)
+ */
+export function setI18nConfig(config: I18nConfig): void {
+  cachedConfig = config;
+}

package/lib/client/index.ts

@@ -0,0 +1,56 @@
+/**
+ * @meno/core/client exports
+ * Core client-side utilities for page rendering and routing
+ * Does NOT include editor-specific code (that's in @meno/studio)
+ */
+
+// Core rendering
+export * from './core/ComponentBuilder';
+export * from './core/ComponentRenderer';
+export * from './core/cmsTemplateProcessor';
+
+// Routing
+export * from './routing/Router';
+export * from './routing/RouteLoader';
+
+// HMR
+export * from './hmr';
+export { HMRWebSocket } from './hmrWebSocket';
+
+// Hydration
+export * from './hydration/HydrationUtils';
+
+// Theme
+export * from './theme';
+export { ThemeProvider, useTheme } from './contexts/ThemeContext';
+
+// Style processing
+export * from './styleProcessor';
+export * from './responsiveStyleResolver';
+
+// Scripts and styles injection
+export { StyleInjector } from './styles/StyleInjector';
+export { ScriptExecutor } from './scripts/ScriptExecutor';
+
+// i18n
+export * from './i18nConfigService';
+
+// Registries
+export { globalComponentRegistry, ComponentRegistry } from './componentRegistry';
+export { ElementRegistry, elementRegistry } from './elementRegistry';
+
+// Error handling
+export { ErrorBoundary } from './ErrorBoundary';
+
+// Navigation
+export * from './navigation';
+
+// Hooks
+export * from './hooks/useColorVariables';
+export * from './hooks/usePropertyAutocomplete';
+
+// Template engine
+export * from './templateEngine';
+
+// Note: UI components, elementRegistry, treeItemRegistry, treeNodeUtils, and elementHighlighter
+// are in @meno/studio as they're editor-specific