meno-core 1.0.0

package/lib/server/services/componentService.test.ts

@@ -0,0 +1,276 @@
+import { test, expect, describe, beforeEach, mock } from 'bun:test';
+import { ComponentService, type ComponentServiceFs, type ComponentLoader } from './componentService';
+import { createMockComponentDefinition } from '../../test-utils';
+import {
+  createTypedMockComponentServiceFs,
+  createTypedMockComponentLoader,
+  type TypedMockComponentServiceFs,
+  type TypedMockComponentLoader,
+} from '../../test-utils/factories/ServerMockFactory';
+import type { ComponentDefinition } from '../../shared/types';
+import { NODE_TYPE } from '../../shared/constants';
+
+describe('ComponentService', () => {
+  let componentService: ComponentService;
+  let mockFs: TypedMockComponentServiceFs;
+  let mockLoader: TypedMockComponentLoader;
+  let testComponents: Map<string, ComponentDefinition>;
+
+  beforeEach(() => {
+    testComponents = new Map([
+      ['TestComponent', createMockComponentDefinition('TestComponent')],
+      ['Button', createMockComponentDefinition('Button')],
+    ]);
+    mockFs = createTypedMockComponentServiceFs();
+    mockLoader = createTypedMockComponentLoader(testComponents);
+    componentService = new ComponentService({
+      fs: mockFs,
+      loader: mockLoader,
+    });
+  });
+
+  describe('loadAllComponents', () => {
+    test('should load all components from components directory', async () => {
+      await componentService.loadAllComponents();
+
+      expect(componentService.hasComponent('TestComponent')).toBe(true);
+      expect(componentService.hasComponent('Button')).toBe(true);
+      expect(mockLoader.loadDirectory).toHaveBeenCalledTimes(1);
+    });
+
+    test('should clear existing components before loading', async () => {
+      // Load first time
+      await componentService.loadAllComponents();
+      expect(componentService.hasComponent('TestComponent')).toBe(true);
+
+      // Clear and reload with empty
+      mockLoader.loadDirectory.mockReturnValueOnce(Promise.resolve(new Map()));
+      await componentService.loadAllComponents();
+
+      // Should be cleared
+      expect(componentService.hasComponent('TestComponent')).toBe(false);
+    });
+
+    test('should work without loader (uses default)', async () => {
+      // Create service without loader - will fail to load since no real fs
+      // Just test it doesn't crash when loader is not set
+      const serviceNoLoader = new ComponentService({ fs: mockFs });
+
+      // This will try to use real loadComponentDirectory which may fail
+      // But the point is it shouldn't use mockLoader
+      try {
+        await serviceNoLoader.loadAllComponents();
+      } catch {
+        // Expected to fail without real fs
+      }
+
+      expect(mockLoader.loadDirectory).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('getComponent', () => {
+    test('should return component definition', async () => {
+      await componentService.loadAllComponents();
+
+      const component = componentService.getComponent('TestComponent');
+
+      expect(component).toBeDefined();
+      expect(component?.component).toBeDefined();
+    });
+
+    test('should return undefined for non-existent component', () => {
+      const component = componentService.getComponent('NonExistent');
+
+      expect(component).toBeUndefined();
+    });
+  });
+
+  describe('hasComponent', () => {
+    test('should return true for existing component', async () => {
+      await componentService.loadAllComponents();
+
+      expect(componentService.hasComponent('TestComponent')).toBe(true);
+    });
+
+    test('should return false for non-existent component', () => {
+      expect(componentService.hasComponent('NonExistent')).toBe(false);
+    });
+  });
+
+  describe('getAllComponents', () => {
+    test('should return all components as Record', async () => {
+      await componentService.loadAllComponents();
+
+      const allComponents = componentService.getAllComponents();
+
+      expect(allComponents).toBeDefined();
+      expect(allComponents['TestComponent']).toBeDefined();
+      expect(allComponents['Button']).toBeDefined();
+    });
+
+    test('should return empty object when no components loaded', () => {
+      const allComponents = componentService.getAllComponents();
+
+      expect(allComponents).toEqual({});
+    });
+  });
+
+  describe('validateComponentStructure', () => {
+    test('should return true for valid component structure', () => {
+      const validComponent = createMockComponentDefinition('Valid');
+
+      expect(componentService.validateComponentStructure(validComponent)).toBe(true);
+    });
+
+    test('should return false for undefined', () => {
+      expect(componentService.validateComponentStructure(undefined)).toBe(false);
+    });
+
+    test('should return false for missing component field', () => {
+      expect(componentService.validateComponentStructure({} as any)).toBe(false);
+    });
+
+    test('should return false for missing structure', () => {
+      expect(componentService.validateComponentStructure({
+        component: {}
+      } as any)).toBe(false);
+    });
+
+    test('should return false for invalid structure type', () => {
+      expect(componentService.validateComponentStructure({
+        component: { structure: 'invalid' }
+      } as any)).toBe(false);
+    });
+
+    test('should return false for structure without type', () => {
+      expect(componentService.validateComponentStructure({
+        component: { structure: { tag: 'div' } }
+      } as any)).toBe(false);
+    });
+
+    test('should return true for structure with valid type', () => {
+      expect(componentService.validateComponentStructure({
+        component: {
+          structure: {
+            type: NODE_TYPE.NODE,
+            tag: 'div',
+            children: []
+          }
+        }
+      } as any)).toBe(true);
+    });
+  });
+
+  describe('saveComponent', () => {
+    test('should save component to file system', async () => {
+      const componentData = createMockComponentDefinition('TestComponent');
+
+      await componentService.saveComponent('TestComponent', componentData);
+
+      expect(mockFs.writeFile).toHaveBeenCalled();
+      expect(componentService.hasComponent('TestComponent')).toBe(true);
+    });
+
+    test('should remove javascript field from saved data', async () => {
+      const componentData = createMockComponentDefinition('TestComponent');
+      if (componentData.component) {
+        componentData.component.javascript = 'console.log("test");';
+      }
+
+      await componentService.saveComponent('TestComponent', componentData);
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const savedContent = callArgs[1];
+      const savedData = JSON.parse(savedContent);
+
+      expect(savedData.component.javascript).toBeUndefined();
+    });
+
+    test('should update in-memory cache after saving', async () => {
+      const componentData = createMockComponentDefinition('TestComponent');
+
+      await componentService.saveComponent('TestComponent', componentData);
+
+      const cached = componentService.getComponent('TestComponent');
+      expect(cached).toBeDefined();
+    });
+
+    test('should save with correct path format', async () => {
+      const componentData = createMockComponentDefinition('Button');
+
+      await componentService.saveComponent('Button', componentData);
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const filePath = callArgs[0];
+
+      expect(filePath).toContain('Button.json');
+    });
+  });
+
+  describe('saveComponentJavaScript', () => {
+    test('should save JavaScript to .js file', async () => {
+      await componentService.saveComponentJavaScript('TestComponent', 'console.log("test");');
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const [filePath, content] = callArgs;
+
+      expect(filePath).toContain('TestComponent.js');
+      expect(content).toBe('console.log("test");');
+    });
+
+    test('should handle empty JavaScript', async () => {
+      await componentService.saveComponentJavaScript('TestComponent', '');
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const content = callArgs[1];
+
+      expect(content).toBe('');
+    });
+  });
+
+  describe('saveComponentCSS', () => {
+    test('should save CSS to .css file', async () => {
+      await componentService.saveComponentCSS('TestComponent', '.test { color: red; }');
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const [filePath, content] = callArgs;
+
+      expect(filePath).toContain('TestComponent.css');
+      expect(content).toBe('.test { color: red; }');
+    });
+
+    test('should handle empty CSS', async () => {
+      await componentService.saveComponentCSS('TestComponent', '');
+
+      const callArgs = (mockFs.writeFile as any).mock.calls[0];
+      const content = callArgs[1];
+
+      expect(content).toBe('');
+    });
+  });
+
+  describe('constructor options', () => {
+    test('should work with no options', () => {
+      const service = new ComponentService();
+      expect(service).toBeDefined();
+    });
+
+    test('should work with fs only', () => {
+      const service = new ComponentService({ fs: mockFs });
+      expect(service).toBeDefined();
+    });
+
+    test('should work with loader only', () => {
+      const service = new ComponentService({ loader: mockLoader });
+      expect(service).toBeDefined();
+    });
+
+    test('should work with both fs and loader', () => {
+      const service = new ComponentService({
+        fs: mockFs,
+        loader: mockLoader,
+      });
+      expect(service).toBeDefined();
+    });
+  });
+});

package/lib/server/services/componentService.ts

@@ -0,0 +1,346 @@
+/**
+ * Component Service
+ * Handles component loading and management
+ * 
+ * Provides methods for loading components from the file system, caching them in memory,
+ * and managing component definitions including saving JavaScript and CSS files.
+ */
+
+import { join } from 'path';
+import { loadComponentDirectory, loadJSONFile, parseJSON } from '../jsonLoader';
+import { projectPaths } from '../projectContext';
+import type { ComponentDefinition } from '../../shared/types';
+
+/**
+ * File system interface for dependency injection
+ * Allows mocking file operations in tests
+ */
+export interface ComponentServiceFs {
+  writeFile(path: string, content: string, encoding: string): Promise<void>;
+  readFile?(path: string): Promise<string | null>;
+}
+
+/**
+ * Component loader interface for dependency injection
+ * Allows mocking component loading in tests
+ */
+export interface ComponentLoader {
+  loadDirectory(dir: string): Promise<Map<string, ComponentDefinition>>;
+  loadFile(path: string): Promise<string | null>;
+}
+
+export class ComponentService {
+  private components = new Map<string, ComponentDefinition>();
+  private fs?: ComponentServiceFs;
+  private loader?: ComponentLoader;
+
+  /**
+   * Creates a new ComponentService instance
+   *
+   * @param options - Optional configuration for dependency injection
+   * @param options.fs - Optional file system interface for testing
+   * @param options.loader - Optional component loader interface for testing
+   */
+  constructor(options?: { fs?: ComponentServiceFs; loader?: ComponentLoader }) {
+    this.fs = options?.fs;
+    this.loader = options?.loader;
+  }
+
+  /**
+   * Load all components from the components directory
+   * 
+   * Scans the ./components directory and loads all component definitions.
+   * Clears existing components before loading. Components are loaded from .json files,
+   * and associated .js and .css files are automatically loaded if they exist.
+   * 
+   * @returns Promise that resolves when all components are loaded
+   * 
+   * @example
+   * ```typescript
+   * await componentService.loadAllComponents();
+   * const count = Object.keys(componentService.getAllComponents()).length;
+   * ```
+   */
+  async loadAllComponents(): Promise<void> {
+    this.components.clear();
+    const loadedComponents = this.loader
+      ? await this.loader.loadDirectory(projectPaths.components())
+      : await loadComponentDirectory(projectPaths.components());
+    loadedComponents.forEach((value, key) => {
+      this.components.set(key, value);
+    });
+  }
+
+  /**
+   * Get component by name
+   * 
+   * @param name - Component name (without .json extension)
+   * @returns ComponentDefinition if found, undefined otherwise
+   * 
+   * @example
+   * ```typescript
+   * const button = componentService.getComponent('Button');
+   * if (button) {
+   *   console.log(button.component.interface);
+   * }
+   * ```
+   */
+  getComponent(name: string): ComponentDefinition | undefined {
+    return this.components.get(name);
+  }
+
+  /**
+   * Check if component exists
+   * 
+   * @param name - Component name to check
+   * @returns True if component exists in cache, false otherwise
+   * 
+   * @example
+   * ```typescript
+   * if (componentService.hasComponent('Button')) {
+   *   // Component is available
+   * }
+   * ```
+   */
+  hasComponent(name: string): boolean {
+    return this.components.has(name);
+  }
+
+  /**
+   * Get all components as a Record
+   * 
+   * Returns all loaded components as a plain object for easy iteration
+   * or serialization.
+   * 
+   * @returns Record mapping component names to ComponentDefinition objects
+   * 
+   * @example
+   * ```typescript
+   * const allComponents = componentService.getAllComponents();
+   * Object.keys(allComponents).forEach(name => {
+   *   console.log(`Component: ${name}`);
+   * });
+   * ```
+   */
+  getAllComponents(): Record<string, ComponentDefinition> {
+    const record: Record<string, ComponentDefinition> = {};
+    this.components.forEach((value, key) => {
+      record[key] = value;
+    });
+    return record;
+  }
+
+  /**
+   * Validate that a component has a valid structure
+   * 
+   * @param componentDef - ComponentDefinition to validate
+   * @returns true if component has valid structure, false otherwise
+   * 
+   * @example
+   * ```typescript
+   * const component = componentService.getComponent('Button');
+   * if (component && componentService.validateComponentStructure(component)) {
+   *   // Component has valid structure
+   * }
+   * ```
+   */
+  validateComponentStructure(componentDef: ComponentDefinition | undefined): boolean {
+    if (!componentDef) {
+      return false;
+    }
+    
+    // Handle ComponentDefinition in any format:
+    // 1. Legacy: { type: string, component: { structure: {...} } }
+    // 2. New: { component: { structure: {...} } }
+    // 3. Direct: { component: { structure: {...} } } (already normalized)
+    
+    // Access component field safely (handle both TypeScript types and runtime data)
+    const component = (componentDef as any).component;
+    
+    if (!component || typeof component !== 'object') {
+      return false;
+    }
+    
+    // Check for structure in component
+    const structure = component.structure;
+    if (!structure) {
+      return false;
+    }
+    
+    // Validate structure is a proper object with type property
+    if (typeof structure !== 'object' || structure === null || Array.isArray(structure)) {
+      return false;
+    }
+    
+    // Structure must have a type property that's a string
+    if (!('type' in structure) || typeof structure.type !== 'string') {
+      return false;
+    }
+    
+    return true;
+  }
+
+  /**
+   * Get component JavaScript from .js file
+   *
+   * Loads the JavaScript code for a component from its .js file.
+   * Returns null if the file doesn't exist.
+   *
+   * @param name - Component name (without .js extension)
+   * @returns JavaScript code as string, or null if file doesn't exist
+   *
+   * @example
+   * ```typescript
+   * const js = await componentService.getComponentJavaScript('Button');
+   * if (js) {
+   *   console.log('Component has JavaScript');
+   * }
+   * ```
+   */
+  async getComponentJavaScript(name: string): Promise<string | null> {
+    const jsFilePath = join(projectPaths.components(), `${name}.js`);
+    try {
+      const file = Bun.file(jsFilePath);
+      if (await file.exists()) {
+        return await file.text();
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Save component definition
+   * 
+   * Saves component definition to a .json file and updates the cache.
+   * The javascript field is automatically removed from the saved data
+   * (JavaScript should only be in .js files).
+   * 
+   * @param name - Component name (without .json extension)
+   * @param data - ComponentDefinition object to save
+   * @returns Promise that resolves when the component is saved
+   * 
+   * @throws {Error} If file write fails
+   * 
+   * @example
+   * ```typescript
+   * await componentService.saveComponent('Button', {
+   *   component: {
+   *     interface: { label: { type: 'string', default: 'Click me' } },
+   *     structure: { type: 'node', tag: 'button', children: [] }
+   *   }
+   * });
+   * ```
+   */
+  async saveComponent(name: string, data: ComponentDefinition): Promise<void> {
+    const writeFile = this.fs
+      ? this.fs.writeFile.bind(this.fs)
+      : (await import('fs/promises')).writeFile;
+
+    // Create a copy without the javascript field (JavaScript should only be in .js files)
+    const dataWithoutJS = JSON.parse(JSON.stringify(data));
+    if (dataWithoutJS?.component?.javascript !== undefined) {
+      delete dataWithoutJS.component.javascript;
+    }
+
+    const filePath = join(projectPaths.components(), `${name}.json`);
+    await writeFile(filePath, JSON.stringify(dataWithoutJS, null, 2), 'utf-8');
+
+    // Update in-memory cache
+    this.components.set(name, dataWithoutJS);
+  }
+
+  /**
+   * Save component JavaScript to .js file
+   *
+   * Saves JavaScript code to a component's .js file and reloads the component
+   * to update the in-memory cache with the new JavaScript.
+   *
+   * @param name - Component name (without .js extension)
+   * @param javascript - JavaScript code to save
+   * @returns Promise that resolves when the JavaScript is saved
+   *
+   * @throws {Error} If file write fails
+   *
+   * @example
+   * ```typescript
+   * await componentService.saveComponentJavaScript('Button', 'console.log("clicked");');
+   * ```
+   */
+  async saveComponentJavaScript(name: string, javascript: string): Promise<void> {
+    const writeFile = this.fs
+      ? this.fs.writeFile.bind(this.fs)
+      : (await import('fs/promises')).writeFile;
+    const componentsDir = projectPaths.components();
+    const jsFilePath = join(componentsDir, `${name}.js`);
+    await writeFile(jsFilePath, javascript || '', 'utf-8');
+
+    // Reload the component to update the registry with the new JS
+    const componentPath = join(componentsDir, `${name}.json`);
+    const componentData = await loadJSONFile(componentPath);
+    if (componentData) {
+      const parsed = parseJSON<ComponentDefinition>(componentData);
+      try {
+        const jsFile = Bun.file(jsFilePath);
+        if (await jsFile.exists()) {
+          const jsContent = await jsFile.text();
+          if (!parsed.component) {
+            parsed.component = {};
+          }
+          parsed.component.javascript = jsContent;
+        }
+      } catch (error) {
+        // Silently handle JS file read errors
+      }
+      this.components.set(name, parsed);
+    }
+  }
+
+  /**
+   * Save component CSS to .css file
+   *
+   * Saves CSS code to a component's .css file and reloads the component
+   * to update the in-memory cache with the new CSS.
+   *
+   * @param name - Component name (without .css extension)
+   * @param css - CSS code to save
+   * @returns Promise that resolves when the CSS is saved
+   *
+   * @throws {Error} If file write fails
+   *
+   * @example
+   * ```typescript
+   * await componentService.saveComponentCSS('Button', '.button { color: blue; }');
+   * ```
+   */
+  async saveComponentCSS(name: string, css: string): Promise<void> {
+    const writeFile = this.fs
+      ? this.fs.writeFile.bind(this.fs)
+      : (await import('fs/promises')).writeFile;
+    const componentsDir = projectPaths.components();
+    const cssFilePath = join(componentsDir, `${name}.css`);
+    await writeFile(cssFilePath, css || '', 'utf-8');
+
+    // Reload the component to update the registry with the new CSS
+    const componentPath = join(componentsDir, `${name}.json`);
+    const componentData = await loadJSONFile(componentPath);
+    if (componentData) {
+      const parsed = parseJSON<ComponentDefinition>(componentData);
+      try {
+        const cssFile = Bun.file(cssFilePath);
+        if (await cssFile.exists()) {
+          const cssContent = await cssFile.text();
+          if (!parsed.component) {
+            parsed.component = {};
+          }
+          parsed.component.css = cssContent;
+        }
+      } catch (error) {
+        // Silently handle CSS file read errors
+      }
+      this.components.set(name, parsed);
+    }
+  }
+}
+