meno-core 1.0.0

package/lib/shared/registry/ComponentRegistry.test.ts

@@ -0,0 +1,293 @@
+import { describe, test, expect, beforeEach } from 'bun:test';
+import { BaseComponentRegistry } from './ComponentRegistry';
+import type { ComponentDefinition } from '../types';
+
+// Create a concrete implementation for testing
+class TestRegistry extends BaseComponentRegistry {}
+
+describe('BaseComponentRegistry', () => {
+  let registry: TestRegistry;
+
+  beforeEach(() => {
+    registry = new TestRegistry();
+  });
+
+  describe('register', () => {
+    test('registers a component', () => {
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+
+      registry.register('Button', component);
+
+      expect(registry.has('Button')).toBe(true);
+      expect(registry.get('Button')).toEqual(component);
+    });
+
+    test('overwrites existing component', () => {
+      const component1: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+      const component2: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'span' } }
+      };
+
+      registry.register('Button', component1);
+      registry.register('Button', component2);
+
+      expect(registry.get('Button')).toEqual(component2);
+    });
+  });
+
+  describe('get', () => {
+    test('returns component by name', () => {
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+
+      registry.register('Button', component);
+
+      expect(registry.get('Button')).toEqual(component);
+    });
+
+    test('returns undefined for non-existent component', () => {
+      expect(registry.get('NonExistent')).toBeUndefined();
+    });
+  });
+
+  describe('has', () => {
+    test('returns true for registered component', () => {
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+
+      registry.register('Button', component);
+
+      expect(registry.has('Button')).toBe(true);
+    });
+
+    test('returns false for non-existent component', () => {
+      expect(registry.has('NonExistent')).toBe(false);
+    });
+  });
+
+  describe('clear', () => {
+    test('removes all components', () => {
+      const component1: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+      const component2: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'span' } }
+      };
+
+      registry.register('Button', component1);
+      registry.register('Card', component2);
+
+      registry.clear();
+
+      expect(registry.has('Button')).toBe(false);
+      expect(registry.has('Card')).toBe(false);
+      expect(registry.getNames()).toEqual([]);
+    });
+  });
+
+  describe('merge', () => {
+    test('merges multiple components', () => {
+      const components: Record<string, ComponentDefinition> = {
+        'Button': { component: { structure: { type: 'node' as const, tag: 'button' } } },
+        'Card': { component: { structure: { type: 'node' as const, tag: 'div' } } }
+      };
+
+      registry.merge(components);
+
+      expect(registry.has('Button')).toBe(true);
+      expect(registry.has('Card')).toBe(true);
+    });
+
+    test('overwrites existing components', () => {
+      const component1: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+      const component2: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+
+      registry.register('Button', component1);
+      registry.merge({ 'Button': component2 });
+
+      expect(registry.get('Button')).toEqual(component2);
+    });
+  });
+
+  describe('getAll', () => {
+    test('returns all registered components', () => {
+      const component1: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+      const component2: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+
+      registry.register('Button', component1);
+      registry.register('Card', component2);
+
+      const all = registry.getAll();
+
+      expect(all['Button']).toEqual(component1);
+      expect(all['Card']).toEqual(component2);
+      expect(Object.keys(all).length).toBe(2);
+    });
+
+    test('returns copy of registry', () => {
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+
+      registry.register('Button', component);
+
+      const all = registry.getAll();
+      delete all['Button'];
+
+      expect(registry.has('Button')).toBe(true);
+    });
+
+    test('returns empty object when no components', () => {
+      expect(registry.getAll()).toEqual({});
+    });
+  });
+
+  describe('getNames', () => {
+    test('returns list of component names', () => {
+      const component1: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+      const component2: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'div' } }
+      };
+
+      registry.register('Button', component1);
+      registry.register('Card', component2);
+
+      const names = registry.getNames();
+
+      expect(names).toContain('Button');
+      expect(names).toContain('Card');
+      expect(names.length).toBe(2);
+    });
+
+    test('returns empty array when no components', () => {
+      expect(registry.getNames()).toEqual([]);
+    });
+  });
+
+  describe('remove', () => {
+    test('removes component and returns true', () => {
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+
+      registry.register('Button', component);
+
+      const result = registry.remove('Button');
+
+      expect(result).toBe(true);
+      expect(registry.has('Button')).toBe(false);
+    });
+
+    test('returns false when component does not exist', () => {
+      const result = registry.remove('NonExistent');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('subscribe', () => {
+    test('notifies listeners on register', () => {
+      let called = false;
+      const listener = () => { called = true; };
+
+      registry.subscribe(listener);
+
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+      registry.register('Button', component);
+
+      expect(called).toBe(true);
+    });
+
+    test('notifies listeners on clear', () => {
+      let called = false;
+      const listener = () => { called = true; };
+
+      registry.subscribe(listener);
+
+      registry.clear();
+
+      expect(called).toBe(true);
+    });
+
+    test('notifies listeners on merge', () => {
+      let called = false;
+      const listener = () => { called = true; };
+
+      registry.subscribe(listener);
+
+      registry.merge({});
+
+      expect(called).toBe(true);
+    });
+
+    test('notifies listeners on remove', () => {
+      let called = false;
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+
+      registry.register('Button', component);
+
+      const listener = () => { called = true; };
+      registry.subscribe(listener);
+
+      registry.remove('Button');
+
+      expect(called).toBe(true);
+    });
+
+    test('returns unsubscribe function', () => {
+      let callCount = 0;
+      const listener = () => { callCount++; };
+
+      const unsubscribe = registry.subscribe(listener);
+
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+      registry.register('Button', component);
+
+      unsubscribe();
+
+      registry.register('Card', component);
+
+      expect(callCount).toBe(1);
+    });
+
+    test('handles multiple listeners', () => {
+      let count1 = 0;
+      let count2 = 0;
+      const listener1 = () => { count1++; };
+      const listener2 = () => { count2++; };
+
+      registry.subscribe(listener1);
+      registry.subscribe(listener2);
+
+      const component: ComponentDefinition = {
+        component: { structure: { type: 'node' as const, tag: 'button' } }
+      };
+      registry.register('Button', component);
+
+      expect(count1).toBe(1);
+      expect(count2).toBe(1);
+    });
+  });
+});

package/lib/shared/registry/ComponentRegistry.ts

@@ -0,0 +1,100 @@
+/**
+ * Base Component Registry
+ * Abstract base class for component registries
+ * Provides common functionality for client and SSR registries
+ */
+
+import type { ComponentDefinition } from '../types';
+
+/**
+ * Base registry class with common functionality
+ */
+export abstract class BaseComponentRegistry {
+  protected registry: Record<string, ComponentDefinition> = {};
+  private listeners: Set<() => void> = new Set();
+  
+  /**
+   * Register a component with the given name
+   */
+  register(name: string, definition: ComponentDefinition): void {
+    this.registry[name] = definition;
+    this.notify();
+  }
+  
+  /**
+   * Get a component by name
+   */
+  get(name: string): ComponentDefinition | undefined {
+    return this.registry[name];
+  }
+  
+  /**
+   * Check if a component exists
+   */
+  has(name: string): boolean {
+    return name in this.registry;
+  }
+  
+  /**
+   * Clear all registered components
+   */
+  clear(): void {
+    this.registry = {};
+    this.notify();
+  }
+  
+  /**
+   * Merge components into the registry
+   * Existing components with the same name will be overwritten
+   */
+  merge(components: Record<string, ComponentDefinition>): void {
+    Object.assign(this.registry, components);
+    this.notify();
+  }
+  
+  /**
+   * Get all registered components
+   */
+  getAll(): Record<string, ComponentDefinition> {
+    return { ...this.registry };
+  }
+  
+  /**
+   * Get list of registered component names
+   */
+  getNames(): string[] {
+    return Object.keys(this.registry);
+  }
+  
+  /**
+   * Remove a component by name
+   */
+  remove(name: string): boolean {
+    if (this.has(name)) {
+      delete this.registry[name];
+      this.notify();
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Subscribe to registry changes. Returns an unsubscribe function.
+   */
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  protected notify(): void {
+    for (const listener of this.listeners) {
+      try {
+        listener();
+      } catch (err) {
+      }
+    }
+  }
+}
+

package/lib/shared/registry/NodeTypeDefinition.ts

@@ -0,0 +1,198 @@
+/**
+ * Node Type Definition
+ * TypeScript interfaces for the node type registry system
+ */
+
+import type { ReactElement } from 'react';
+import type { ZodType } from 'zod';
+import type { ComponentNode } from '../types/nodes';
+import type { StyleValue } from '../types/styles';
+
+/**
+ * Tree icon types for node display
+ */
+export type TreeIcon = 'TEXT' | 'COMPONENT' | 'HTML_ELEMENT' | 'IMAGE' | 'OBJECT' | 'SLOT_MARKER' | 'ARRAY' | 'UNKNOWN' | 'FORM';
+
+/**
+ * Node category for grouping in command palette
+ */
+export type NodeCategory = 'core' | 'layout' | 'content' | 'special';
+
+/**
+ * Field types for editable fields in the props panel
+ */
+export type EditableFieldType = 'string' | 'url' | 'boolean' | 'select' | 'number' | 'text';
+
+/**
+ * Definition for an editable field in the props panel
+ * Used to auto-generate editor UI for node types
+ */
+export interface EditableField {
+  /** Property name on the node object */
+  name: string;
+  /** Display label in the UI */
+  label: string;
+  /** Input type to render */
+  type: EditableFieldType;
+  /** Show as required field */
+  required?: boolean;
+  /** Placeholder text for input */
+  placeholder?: string;
+  /** Options for 'select' type */
+  options?: string[];
+  /** Group related fields together (e.g., "Dimensions", "Playback") */
+  group?: string;
+}
+
+/**
+ * Tree display configuration
+ */
+export interface TreeDisplayConfig<TNode extends ComponentNode = ComponentNode> {
+  icon: TreeIcon;
+  getLabel: (node: TNode) => string;
+}
+
+/**
+ * Node capabilities - what the node supports
+ */
+export interface NodeCapabilities {
+  canHaveChildren: boolean;
+  canHaveStyle: boolean;
+  canHaveAttributes: boolean;
+  canBeNested: boolean;
+  requiresProps: string[];
+}
+
+/**
+ * Client-side render context
+ * Passed to client renderers with utilities and state
+ */
+export interface ClientRenderContext {
+  key: number;
+  elementPath: (string | number)[];
+  customProps?: Record<string, unknown>;
+  parentComponentName?: string | null;
+  viewportWidth: number;
+  componentContext?: string | null;
+  locale?: string;
+  cmsContext?: Record<string, unknown> | null;
+  cmsLocale?: string | null;
+
+  // Utilities provided by ComponentBuilder
+  buildChildren: (
+    children: Array<ComponentNode | string> | string | undefined,
+    elementPath: (string | number)[],
+    parentComponentName?: string | null,
+    componentContext?: string | null
+  ) => ReactElement | ReactElement[] | string | number | null;
+  registerElement: (
+    path: (string | number)[],
+    element: HTMLElement | null,
+    parentComponentName?: string | null,
+    isComponentRoot?: boolean
+  ) => void;
+  getComponentDefinition: (name: string) => unknown | undefined;
+  processI18n: (value: unknown) => string;
+}
+
+/**
+ * SSR-side render context
+ * Passed to SSR renderers with utilities and state
+ */
+export interface SSRRenderContext {
+  locale?: string;
+  slugMappings?: Array<{ slug: string; locale: string; pagePath: string }>;
+  pagePath?: string;
+  breakpoints?: { tablet: number; mobile: number };
+  viewportWidth?: number;
+  cmsContext?: Record<string, unknown> | null;
+
+  // Utilities provided by ssrRenderer
+  renderNode: (node: ComponentNode | string, context: SSRRenderContext) => string;
+  renderChildren: (children: Array<ComponentNode | string> | string | undefined, context: SSRRenderContext) => string;
+  escapeHtml: (str: string) => string;
+  buildAttributes: (attrs: Record<string, unknown>, exclude?: string[]) => string;
+  processI18n: (value: unknown) => string;
+  getComponentDefinition: (name: string) => unknown | undefined;
+}
+
+/**
+ * Client-side renderer function type
+ */
+export type ClientNodeRenderer<TNode extends ComponentNode> = (
+  node: TNode,
+  context: ClientRenderContext
+) => ReactElement | null;
+
+/**
+ * SSR renderer function type
+ */
+export type SSRNodeRenderer<TNode extends ComponentNode> = (
+  node: TNode,
+  context: SSRRenderContext
+) => string;
+
+/**
+ * Props editor component props
+ */
+export interface PropsEditorProps<TNode extends ComponentNode = ComponentNode> {
+  node: TNode;
+  selectedPath: string | null;
+  onPropChange?: (path: string, propName: string, newValue: unknown) => void;
+  themeColors?: Record<string, string>;
+}
+
+/**
+ * Node Type Definition
+ * Complete definition for a node type including all behavior
+ */
+export interface NodeTypeDefinition<TNode extends ComponentNode = ComponentNode> {
+  // Identity
+  type: string;
+  displayName: string;
+  category: NodeCategory;
+
+  // Validation
+  schema: ZodType<TNode>;
+  typeGuard: (node: unknown) => node is TNode;
+
+  // Rendering
+  clientRenderer: ClientNodeRenderer<TNode>;
+  ssrRenderer: SSRNodeRenderer<TNode>;
+
+  // Editor UI
+  treeDisplay: TreeDisplayConfig<TNode>;
+  propsEditor?: React.ComponentType<PropsEditorProps<TNode>>;
+  /** Editable fields for auto-generated props editor UI */
+  editableFields?: EditableField[];
+
+  // Creation
+  defaultFactory: () => TNode;
+
+  // Capabilities
+  capabilities: NodeCapabilities;
+}
+
+/**
+ * Partial node type definition for defineNodeType helper
+ * Makes some fields optional with sensible defaults
+ */
+export interface NodeTypeDefinitionInput<TNode extends ComponentNode = ComponentNode> {
+  type: string;
+  displayName: string;
+  category?: NodeCategory;
+
+  schema: ZodType<TNode>;
+  typeGuard: (node: unknown) => node is TNode;
+
+  clientRenderer: ClientNodeRenderer<TNode>;
+  ssrRenderer: SSRNodeRenderer<TNode>;
+
+  treeDisplay: TreeDisplayConfig<TNode>;
+  propsEditor?: React.ComponentType<PropsEditorProps<TNode>>;
+  editableFields?: EditableField[];
+
+  defaultFactory: () => TNode;
+
+  capabilities?: Partial<NodeCapabilities>;
+}

package/lib/shared/registry/NodeTypeManager.ts

@@ -0,0 +1,94 @@
+/**
+ * Node Type Manager
+ * Global singleton managing both client and SSR registries
+ */
+
+import { ClientNodeTypeRegistry } from './ClientNodeTypeRegistry';
+import { SSRNodeTypeRegistry } from './SSRNodeTypeRegistry';
+import type { NodeTypeDefinition } from './NodeTypeDefinition';
+
+/**
+ * Manages both client and SSR node type registries
+ * Ensures both registries stay in sync
+ */
+export class NodeTypeManager {
+  private clientRegistry: ClientNodeTypeRegistry;
+  private ssrRegistry: SSRNodeTypeRegistry;
+
+  constructor() {
+    this.clientRegistry = new ClientNodeTypeRegistry();
+    this.ssrRegistry = new SSRNodeTypeRegistry();
+  }
+
+  /**
+   * Get the client-side registry
+   */
+  getClient(): ClientNodeTypeRegistry {
+    return this.clientRegistry;
+  }
+
+  /**
+   * Get the SSR registry
+   */
+  getSSR(): SSRNodeTypeRegistry {
+    return this.ssrRegistry;
+  }
+
+  /**
+   * Register a node type in both registries
+   */
+  register(definition: NodeTypeDefinition): void {
+    this.clientRegistry.register(definition);
+    this.ssrRegistry.register(definition);
+  }
+
+  /**
+   * Register multiple node types in both registries
+   */
+  registerAll(definitions: NodeTypeDefinition[]): void {
+    this.clientRegistry.registerAll(definitions);
+    this.ssrRegistry.registerAll(definitions);
+  }
+
+  /**
+   * Check if a node type is registered
+   */
+  has(type: string): boolean {
+    return this.clientRegistry.has(type);
+  }
+
+  /**
+   * Get a node type definition
+   */
+  get(type: string): NodeTypeDefinition | undefined {
+    return this.clientRegistry.get(type);
+  }
+
+  /**
+   * Get all registered node types
+   */
+  getAll(): NodeTypeDefinition[] {
+    return this.clientRegistry.getAll();
+  }
+
+  /**
+   * Get list of registered type names
+   */
+  getNames(): string[] {
+    return this.clientRegistry.getNames();
+  }
+
+  /**
+   * Clear both registries
+   */
+  clear(): void {
+    this.clientRegistry.clear();
+    this.ssrRegistry.clear();
+  }
+}
+
+/**
+ * Global singleton node type manager
+ * Use this instance throughout the application
+ */
+export const globalNodeTypeManager = new NodeTypeManager();