meno-core 1.0.0

package/lib/server/cssGenerator.test.ts

@@ -0,0 +1,172 @@
+import { describe, test, expect } from 'bun:test';
+import { generateColorVariablesCSS, generateThemeColorVariablesCSS } from './cssGenerator';
+import type { ColorVariables, ThemeConfig } from '../shared/types/colors';
+
+describe('cssGenerator', () => {
+  describe('generateColorVariablesCSS', () => {
+    test('should generate CSS color variables', () => {
+      const colors: ColorVariables = {
+        colors: {
+          'primary': '#3b82f6',
+          'secondary': '#10b981',
+          'text': '#1f2937'
+        }
+      };
+
+      const css = generateColorVariablesCSS(colors);
+
+      expect(css).toContain(':root {');
+      expect(css).toContain('--primary: #3b82f6;');
+      expect(css).toContain('--secondary: #10b981;');
+      expect(css).toContain('--text: #1f2937;');
+    });
+
+    test('should return empty string for no colors', () => {
+      const colors: ColorVariables = { colors: {} };
+      const css = generateColorVariablesCSS(colors);
+      expect(css).toBe('');
+    });
+
+    test('should handle single color', () => {
+      const colors: ColorVariables = {
+        colors: { 'primary': '#ff0000' }
+      };
+
+      const css = generateColorVariablesCSS(colors);
+
+      expect(css).toBe(':root {\n  --primary: #ff0000;\n}');
+    });
+
+    test('should handle hyphenated color names', () => {
+      const colors: ColorVariables = {
+        colors: {
+          'primary-light': '#e0f2fe',
+          'text-secondary': '#6b7280'
+        }
+      };
+
+      const css = generateColorVariablesCSS(colors);
+
+      expect(css).toContain('--primary-light: #e0f2fe;');
+      expect(css).toContain('--text-secondary: #6b7280;');
+    });
+  });
+
+  describe('generateThemeColorVariablesCSS', () => {
+    test('should generate CSS for multiple themes', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'light',
+        themes: {
+          light: {
+            name: 'Light',
+            colors: {
+              'background': '#ffffff',
+              'text': '#000000'
+            }
+          },
+          dark: {
+            name: 'Dark',
+            colors: {
+              'background': '#1f2937',
+              'text': '#f9fafb'
+            }
+          }
+        }
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).toContain(':root {');
+      expect(css).toContain('[theme="light"] {');
+      expect(css).toContain('[theme="dark"] {');
+      expect(css).toContain('--background: #ffffff;');
+      expect(css).toContain('--background: #1f2937;');
+    });
+
+    test('should include default theme in :root', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'light',
+        themes: {
+          light: {
+            name: 'Light',
+            colors: { 'primary': '#3b82f6' }
+          }
+        }
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).toContain(':root {');
+      expect(css).toContain('--primary: #3b82f6;');
+    });
+
+    test('should handle single theme', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'default',
+        themes: {
+          default: {
+            name: 'Default',
+            colors: { 'color': '#000000' }
+          }
+        }
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).toContain(':root {');
+      expect(css).toContain('[theme="default"] {');
+    });
+
+    test('should handle empty themes', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'default',
+        themes: {}
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).toBe('');
+    });
+
+    test('should skip themes with no colors', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'light',
+        themes: {
+          light: {
+            name: 'Light',
+            colors: {}
+          },
+          dark: {
+            name: 'Dark',
+            colors: { 'primary': '#000' }
+          }
+        }
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).not.toContain('[theme="light"]');
+      expect(css).toContain('[theme="dark"]');
+    });
+
+    test('should separate theme blocks with blank lines', () => {
+      const themeConfig: ThemeConfig = {
+        default: 'light',
+        themes: {
+          light: {
+            name: 'Light',
+            colors: { 'a': '#fff' }
+          },
+          dark: {
+            name: 'Dark',
+            colors: { 'b': '#000' }
+          }
+        }
+      };
+
+      const css = generateThemeColorVariablesCSS(themeConfig);
+
+      expect(css).toContain('\n\n');
+    });
+  });
+});

package/lib/server/cssGenerator.ts

@@ -0,0 +1,58 @@
+/**
+ * CSS Color Variables Generator
+ * Generates CSS color variable declarations for themes
+ */
+
+import type { ColorVariables, ThemeConfig } from '../shared/types/colors';
+
+/**
+ * Generate CSS color variable declarations from color variables
+ * Creates :root { --variable-name: value; } CSS
+ */
+export function generateColorVariablesCSS(colors: ColorVariables): string {
+  const cssVars: string[] = [];
+
+  for (const [name, value] of Object.entries(colors.colors)) {
+    cssVars.push(`  --${name}: ${value};`);
+  }
+
+  if (cssVars.length === 0) {
+    return '';
+  }
+
+  return `:root {\n${cssVars.join('\n')}\n}`;
+}
+
+/**
+ * Generate CSS color variable declarations for multiple themes
+ * Creates [theme="dark"] { --variable-name: value; } selectors for each theme
+ */
+export function generateThemeColorVariablesCSS(themeConfig: ThemeConfig): string {
+  const cssBlocks: string[] = [];
+
+  for (const [themeName, theme] of Object.entries(themeConfig.themes)) {
+    const cssVars: string[] = [];
+
+    for (const [name, value] of Object.entries(theme.colors)) {
+      cssVars.push(`  --${name}: ${value};`);
+    }
+
+    if (cssVars.length > 0) {
+      cssBlocks.push(`[theme="${themeName}"] {\n${cssVars.join('\n')}\n}`);
+    }
+  }
+
+  // Also include :root with default theme colors
+  const defaultTheme = themeConfig.themes[themeConfig.default];
+  if (defaultTheme) {
+    const cssVars: string[] = [];
+    for (const [name, value] of Object.entries(defaultTheme.colors)) {
+      cssVars.push(`  --${name}: ${value};`);
+    }
+    if (cssVars.length > 0) {
+      cssBlocks.unshift(`:root {\n${cssVars.join('\n')}\n}`);
+    }
+  }
+
+  return cssBlocks.join('\n\n');
+}

package/lib/server/fileWatcher.ts

@@ -0,0 +1,134 @@
+/**
+ * File Watcher
+ * Watches for changes in JSON files and triggers callbacks
+ */
+
+import { watch, existsSync } from 'fs';
+import { dirname } from 'path';
+import type { FSWatcher } from 'fs';
+import { mapPageNameToPath } from './jsonLoader';
+import { projectPaths, getProjectRoot } from './projectContext';
+
+export interface FileWatchCallbacks {
+  onComponentChange?: () => Promise<void>;
+  onPageChange?: (pagePath: string) => Promise<void>;
+  onColorsChange?: () => Promise<void>;
+}
+
+export class FileWatcher {
+  private componentsWatcher: FSWatcher | null = null;
+  private pagesWatcher: FSWatcher | null = null;
+  private colorsWatcher: FSWatcher | null = null;
+  
+  constructor(private callbacks: FileWatchCallbacks) {}
+  
+  /**
+   * Start watching components directory
+   * Watches both .json and .js files to detect component definition and JavaScript changes
+   */
+  watchComponents(dirPath: string = projectPaths.components()): void {
+    if (!existsSync(dirPath)) {
+      return;
+    }
+    
+    this.componentsWatcher = watch(
+      dirPath,
+      { recursive: true },
+      async (event, filename) => {
+        // Watch .json (component definitions), .js (component JavaScript), and .css (component CSS) files
+        if (filename && (filename.endsWith('.json') || filename.endsWith('.js') || filename.endsWith('.css'))) {
+          const fileType = filename.endsWith('.js') ? 'JavaScript' : filename.endsWith('.css') ? 'CSS' : 'component';
+          
+          if (this.callbacks.onComponentChange) {
+            await this.callbacks.onComponentChange();
+          }
+        }
+      }
+    );
+    
+  }
+  
+  /**
+   * Start watching pages directory
+   */
+  watchPages(dirPath: string = projectPaths.pages()): void {
+    if (!existsSync(dirPath)) {
+      return;
+    }
+    
+    this.pagesWatcher = watch(
+      dirPath,
+      { recursive: true },
+      async (event, filename) => {
+        if (filename && filename.endsWith('.json')) {
+          const pageName = filename.replace('.json', '');
+          const pagePath = mapPageNameToPath(pageName);
+          
+          
+          if (this.callbacks.onPageChange) {
+            await this.callbacks.onPageChange(pagePath);
+          }
+        }
+      }
+    );
+    
+  }
+  
+  /**
+   * Start watching colors.json file
+   */
+  watchColors(filePath: string = projectPaths.colors()): void {
+    if (!existsSync(filePath)) {
+      return;
+    }
+
+    // Watch the file's directory for changes
+    const dirPath = getProjectRoot();
+    this.colorsWatcher = watch(
+      dirPath,
+      { recursive: false },
+      async (event, filename) => {
+        if (filename === 'colors.json' && this.callbacks.onColorsChange) {
+          await this.callbacks.onColorsChange();
+        }
+      }
+    );
+  }
+
+  /**
+   * Start watching both directories
+   */
+  watchAll(): void {
+    this.watchComponents();
+    this.watchPages();
+    this.watchColors();
+  }
+  
+  /**
+   * Stop watching all directories
+   */
+  stopAll(): void {
+    if (this.componentsWatcher) {
+      this.componentsWatcher.close();
+      this.componentsWatcher = null;
+    }
+
+    if (this.pagesWatcher) {
+      this.pagesWatcher.close();
+      this.pagesWatcher = null;
+    }
+
+    if (this.colorsWatcher) {
+      this.colorsWatcher.close();
+      this.colorsWatcher = null;
+    }
+  }
+  
+  /**
+   * Check if watchers are active
+   */
+  isWatching(): boolean {
+    return this.componentsWatcher !== null || this.pagesWatcher !== null;
+  }
+}
+

package/lib/server/index.ts

@@ -0,0 +1,55 @@
+/**
+ * @meno/core/server exports
+ * Core server-side utilities for SSR and read APIs
+ * Does NOT include editor-specific routes (that's in @meno/studio)
+ */
+
+// Server factory
+export { createServer, type ServerConfig } from './createServer';
+
+// SSR Rendering
+export * from './ssrRenderer';
+
+// Services
+export { PageService } from './services/pageService';
+export { ComponentService } from './services/componentService';
+export { CMSService } from './services/cmsService';
+export { configService } from './services/configService';
+export { ColorService } from './services/ColorService';
+
+// Providers
+export { FileSystemPageProvider } from './providers/fileSystemPageProvider';
+export { FileSystemCMSProvider } from './providers/fileSystemCMSProvider';
+
+// Core routes
+export { handleCoreApiRoutes, type CoreRouteContext } from './routes/api/core-routes';
+
+// Route utilities
+export { jsonResponse, errorResponse } from './routes/api/shared';
+
+// Note: Write route handlers moved to @meno/studio:
+// - handleSavePageRoute
+// - handleSaveComponentRoute, handleSaveComponentJavaScriptRoute, handleSaveComponentCSSRoute
+// - handleSaveConfigRoute, handleSaveColorsRoute
+// - handleCreateCollectionRoute, handleCreateItemRoute, handleUpdateItemRoute, handleDeleteItemRoute
+
+// WebSocket
+export { WebSocketManager } from './websocketManager';
+
+// Page cache
+export { PageCache } from './pageCache';
+
+// Project context
+export * from './projectContext';
+
+// File watcher
+export { FileWatcherService } from './services/fileWatcherService';
+
+// Utilities
+export * from './utils';
+
+// Middleware
+export * from './middleware';
+
+// Font loader (legacy config loader for server entry points)
+export { loadProjectConfig } from '../shared/fontLoader';

package/lib/server/jsonLoader.test.ts

@@ -0,0 +1,103 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  parseJSON,
+  mapPageNameToPath,
+  mapPathToPageName,
+  getBreakpointConfig,
+  setBreakpointConfig,
+  getResponsiveScalesConfig,
+  setResponsiveScalesConfig,
+  getI18nConfig,
+  setI18nConfig,
+} from './jsonLoader';
+import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
+import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
+import { DEFAULT_I18N_CONFIG } from '../shared/i18n';
+
+describe('jsonLoader', () => {
+  describe('parseJSON', () => {
+    test('parses valid JSON', () => {
+      const result = parseJSON('{"key": "value"}');
+      expect(result).toEqual({ key: 'value' });
+    });
+
+    test('parses array JSON', () => {
+      const result = parseJSON('[1, 2, 3]');
+      expect(result).toEqual([1, 2, 3]);
+    });
+
+    test('throws on invalid JSON', () => {
+      expect(() => parseJSON('invalid')).toThrow();
+    });
+  });
+
+  describe('mapPageNameToPath', () => {
+    test('maps index to root path', () => {
+      expect(mapPageNameToPath('index')).toBe('/');
+    });
+
+    test('adds leading slash to page name', () => {
+      expect(mapPageNameToPath('about')).toBe('/about');
+    });
+
+    test('handles nested page names', () => {
+      expect(mapPageNameToPath('blog/post')).toBe('/blog/post');
+    });
+  });
+
+  describe('mapPathToPageName', () => {
+    test('maps root path to index', () => {
+      expect(mapPathToPageName('/')).toBe('index');
+    });
+
+    test('removes leading slash from path', () => {
+      expect(mapPathToPageName('/about')).toBe('about');
+    });
+
+    test('handles nested paths', () => {
+      expect(mapPathToPageName('/blog/post')).toBe('blog/post');
+    });
+  });
+
+  describe('breakpoint config cache', () => {
+    test('returns default config initially', () => {
+      const config = getBreakpointConfig();
+      expect(config).toEqual(DEFAULT_BREAKPOINTS);
+    });
+
+    test('returns cached config after set', () => {
+      const customConfig = { mobile: 500, tablet: 900 };
+      setBreakpointConfig(customConfig);
+      const config = getBreakpointConfig();
+      expect(config).toEqual(customConfig);
+    });
+  });
+
+  describe('responsive scales config cache', () => {
+    test('returns default config initially', () => {
+      const config = getResponsiveScalesConfig();
+      expect(config.enabled).toBe(DEFAULT_RESPONSIVE_SCALES.enabled);
+    });
+
+    test('returns cached config after set', () => {
+      const customConfig = { enabled: true, baseReference: 20 };
+      setResponsiveScalesConfig(customConfig);
+      const config = getResponsiveScalesConfig();
+      expect(config.baseReference).toBe(20);
+    });
+  });
+
+  describe('i18n config cache', () => {
+    test('returns default config initially', () => {
+      const config = getI18nConfig();
+      expect(config.enabled).toBe(DEFAULT_I18N_CONFIG.enabled);
+    });
+
+    test('returns cached config after set', () => {
+      const customConfig = { enabled: true, defaultLocale: 'fr', locales: [] };
+      setI18nConfig(customConfig);
+      const config = getI18nConfig();
+      expect(config.defaultLocale).toBe('fr');
+    });
+  });
+});