@object-ui/core 0.3.1 → 2.0.0

package/src/registry/__tests__/Registry.test.ts

@@ -0,0 +1,293 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { Registry } from '../Registry';
+
+describe('Registry', () => {
+  let registry: Registry;
+  let consoleWarnSpy: any;
+
+  beforeEach(() => {
+    registry = new Registry();
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore();
+  });
+
+  describe('Basic Registration', () => {
+    it('should register a component without namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component);
+      
+      expect(registry.has('button')).toBe(true);
+      expect(registry.get('button')).toBe(component);
+    });
+
+    it('should warn when registering without namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component);
+      
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Registering component "button" without a namespace is deprecated')
+      );
+    });
+
+    it('should register a component with namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: 'ui' });
+      
+      expect(registry.has('button', 'ui')).toBe(true);
+      expect(registry.get('button', 'ui')).toBe(component);
+    });
+
+    it('should not warn when registering with namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: 'ui' });
+      
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Namespaced Registration', () => {
+    it('should register components with the same name in different namespaces', () => {
+      const gridComponent1 = () => 'grid1';
+      const gridComponent2 = () => 'grid2';
+      
+      registry.register('grid', gridComponent1, { namespace: 'plugin-grid' });
+      registry.register('grid', gridComponent2, { namespace: 'plugin-aggrid' });
+      
+      expect(registry.get('grid', 'plugin-grid')).toBe(gridComponent1);
+      expect(registry.get('grid', 'plugin-aggrid')).toBe(gridComponent2);
+    });
+
+    it('should store full type as namespace:type', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: 'ui' });
+      
+      const config = registry.getConfig('button', 'ui');
+      expect(config?.type).toBe('ui:button');
+    });
+
+    it('should preserve namespace in component config', () => {
+      const component = () => 'test';
+      registry.register('button', component, { 
+        namespace: 'ui',
+        label: 'Button',
+        category: 'form'
+      });
+      
+      const config = registry.getConfig('button', 'ui');
+      expect(config?.namespace).toBe('ui');
+      expect(config?.label).toBe('Button');
+      expect(config?.category).toBe('form');
+    });
+  });
+
+  describe('Namespace Lookup with Fallback', () => {
+    it('should not fallback when namespace is explicitly specified', () => {
+      const component = () => 'test';
+      registry.register('button', component);
+      
+      // When no namespace is specified, should find it
+      expect(registry.get('button')).toBe(component);
+      
+      // When namespace is specified but component isn't in that namespace, should return undefined
+      expect(registry.get('button', 'ui')).toBeUndefined();
+    });
+
+    it('should prefer namespaced component over non-namespaced', () => {
+      const component1 = () => 'non-namespaced';
+      const component2 = () => 'namespaced';
+      
+      registry.register('button', component1);
+      registry.register('button', component2, { namespace: 'ui' });
+      
+      // When searching with namespace, should get namespaced version
+      expect(registry.get('button', 'ui')).toBe(component2);
+      
+      // When searching without namespace, should get the latest registered (namespaced one due to backward compatibility)
+      expect(registry.get('button')).toBe(component2);
+    });
+
+    it('should return undefined when component not found in any namespace', () => {
+      expect(registry.get('nonexistent', 'ui')).toBeUndefined();
+      expect(registry.get('nonexistent')).toBeUndefined();
+    });
+  });
+
+  describe('has() method', () => {
+    it('should check existence with namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: 'ui' });
+      
+      expect(registry.has('button', 'ui')).toBe(true);
+      // Due to backward compatibility, non-namespaced lookup also works
+      expect(registry.has('button')).toBe(true);
+      // Other namespaces should return false
+      expect(registry.has('button', 'other')).toBe(false);
+    });
+
+    it('should fallback to non-namespaced check only when no namespace provided', () => {
+      const component = () => 'test';
+      registry.register('button', component);
+      
+      expect(registry.has('button')).toBe(true);
+      // When namespace is explicitly requested, should not find non-namespaced component
+      expect(registry.has('button', 'ui')).toBe(false);
+    });
+  });
+
+  describe('getConfig() method', () => {
+    it('should get config with namespace', () => {
+      const component = () => 'test';
+      registry.register('button', component, { 
+        namespace: 'ui',
+        label: 'Button' 
+      });
+      
+      const config = registry.getConfig('button', 'ui');
+      expect(config).toBeDefined();
+      expect(config?.component).toBe(component);
+      expect(config?.label).toBe('Button');
+    });
+
+    it('should not fallback when namespace is explicitly provided', () => {
+      const component = () => 'test';
+      registry.register('button', component, { label: 'Button' });
+      
+      // When no namespace is provided, should find it
+      const config1 = registry.getConfig('button');
+      expect(config1).toBeDefined();
+      
+      // When namespace is provided but component isn't in that namespace, should return undefined
+      const config2 = registry.getConfig('button', 'ui');
+      expect(config2).toBeUndefined();
+    });
+  });
+
+  describe('getAllTypes() and getAllConfigs()', () => {
+    it('should return all registered types including namespaced ones', () => {
+      registry.register('button', () => 'b1');
+      registry.register('input', () => 'i1', { namespace: 'ui' });
+      registry.register('grid', () => 'g1', { namespace: 'plugin-grid' });
+      
+      const types = registry.getAllTypes();
+      // Due to backward compatibility, namespaced components are stored under both keys
+      expect(types).toContain('button');
+      expect(types).toContain('ui:input');
+      expect(types).toContain('input'); // backward compat
+      expect(types).toContain('plugin-grid:grid');
+      expect(types).toContain('grid'); // backward compat
+    });
+
+    it('should return all configs', () => {
+      registry.register('button', () => 'b1', { label: 'Button' });
+      registry.register('input', () => 'i1', { 
+        namespace: 'ui',
+        label: 'Input' 
+      });
+      
+      const configs = registry.getAllConfigs();
+      // Due to backward compatibility, namespaced components are stored twice
+      expect(configs.length).toBeGreaterThanOrEqual(2);
+      expect(configs.map(c => c.type)).toContain('button');
+      expect(configs.map(c => c.type)).toContain('ui:input');
+    });
+  });
+
+  describe('Conflict Prevention', () => {
+    it('should allow same type name in different namespaces', () => {
+      const grid1 = () => 'grid-plugin-1';
+      const grid2 = () => 'grid-plugin-2';
+      const grid3 = () => 'aggrid-plugin';
+      
+      registry.register('grid', grid1, { namespace: 'plugin-grid' });
+      registry.register('grid', grid2, { namespace: 'plugin-view' });
+      registry.register('grid', grid3, { namespace: 'plugin-aggrid' });
+      
+      expect(registry.get('grid', 'plugin-grid')).toBe(grid1);
+      expect(registry.get('grid', 'plugin-view')).toBe(grid2);
+      expect(registry.get('grid', 'plugin-aggrid')).toBe(grid3);
+    });
+
+    it('should handle complex namespace names', () => {
+      const component = () => 'test';
+      registry.register('table', component, { namespace: 'plugin-advanced-grid' });
+      
+      expect(registry.get('table', 'plugin-advanced-grid')).toBe(component);
+      expect(registry.getConfig('table', 'plugin-advanced-grid')?.type).toBe('plugin-advanced-grid:table');
+    });
+  });
+
+  describe('Backward Compatibility', () => {
+    it('should maintain compatibility with existing non-namespaced code', () => {
+      const component = () => 'test';
+      
+      // Old-style registration
+      registry.register('button', component);
+      
+      // Old-style retrieval should still work
+      expect(registry.get('button')).toBe(component);
+      expect(registry.has('button')).toBe(true);
+      expect(registry.getConfig('button')).toBeDefined();
+    });
+
+    it('should support mixed namespaced and non-namespaced registrations', () => {
+      const oldButton = () => 'old';
+      const newButton = () => 'new';
+      
+      registry.register('button-old', oldButton);
+      registry.register('button-new', newButton, { namespace: 'ui' });
+      
+      expect(registry.get('button-old')).toBe(oldButton);
+      expect(registry.get('button-new', 'ui')).toBe(newButton);
+    });
+    
+    it('should allow non-namespaced lookup of namespaced components', () => {
+      const component = () => 'test';
+      
+      // Register with namespace
+      registry.register('button', component, { namespace: 'ui' });
+      
+      // Should be findable both ways for backward compatibility
+      expect(registry.get('button')).toBe(component);
+      expect(registry.get('button', 'ui')).toBe(component);
+      
+      // The full type should be namespaced
+      const config = registry.getConfig('button');
+      expect(config?.type).toBe('ui:button');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty namespace string', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: '' });
+      
+      // Empty namespace should be treated as no namespace
+      expect(registry.get('button')).toBe(component);
+    });
+
+    it('should handle namespace with special characters', () => {
+      const component = () => 'test';
+      registry.register('button', component, { namespace: 'plugin-my-custom' });
+      
+      expect(registry.get('button', 'plugin-my-custom')).toBe(component);
+    });
+
+    it('should handle undefined meta', () => {
+      const component = () => 'test';
+      registry.register('button', component, undefined);
+      
+      expect(registry.get('button')).toBe(component);
+    });
+  });
+});

package/src/registry/__tests__/WidgetRegistry.test.ts

@@ -0,0 +1,321 @@
+/**
+ * Tests for WidgetRegistry
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { WidgetRegistry } from '../WidgetRegistry';
+import { Registry } from '../Registry';
+import type { WidgetManifest, WidgetRegistryEvent } from '@object-ui/types';
+
+function createManifest(overrides: Partial<WidgetManifest> = {}): WidgetManifest {
+  return {
+    name: 'test-widget',
+    version: '1.0.0',
+    type: 'test',
+    label: 'Test Widget',
+    source: { type: 'inline', component: () => null },
+    ...overrides,
+  };
+}
+
+describe('WidgetRegistry', () => {
+  let widgetRegistry: WidgetRegistry;
+
+  beforeEach(() => {
+    widgetRegistry = new WidgetRegistry();
+  });
+
+  describe('register / unregister', () => {
+    it('registers a widget manifest', () => {
+      const manifest = createManifest();
+      widgetRegistry.register(manifest);
+      expect(widgetRegistry.has('test-widget')).toBe(true);
+      expect(widgetRegistry.getManifest('test-widget')).toBe(manifest);
+    });
+
+    it('registers multiple manifests at once', () => {
+      widgetRegistry.registerAll([
+        createManifest({ name: 'a', type: 'a' }),
+        createManifest({ name: 'b', type: 'b' }),
+      ]);
+      expect(widgetRegistry.has('a')).toBe(true);
+      expect(widgetRegistry.has('b')).toBe(true);
+    });
+
+    it('unregisters a widget', () => {
+      widgetRegistry.register(createManifest());
+      expect(widgetRegistry.unregister('test-widget')).toBe(true);
+      expect(widgetRegistry.has('test-widget')).toBe(false);
+    });
+
+    it('returns false when unregistering a non-existent widget', () => {
+      expect(widgetRegistry.unregister('nope')).toBe(false);
+    });
+  });
+
+  describe('getAllManifests / getByCategory', () => {
+    it('returns all manifests', () => {
+      widgetRegistry.registerAll([
+        createManifest({ name: 'a', type: 'a' }),
+        createManifest({ name: 'b', type: 'b' }),
+      ]);
+      expect(widgetRegistry.getAllManifests()).toHaveLength(2);
+    });
+
+    it('filters by category', () => {
+      widgetRegistry.registerAll([
+        createManifest({ name: 'chart-1', type: 'c1', category: 'charts' }),
+        createManifest({ name: 'form-1', type: 'f1', category: 'forms' }),
+        createManifest({ name: 'chart-2', type: 'c2', category: 'charts' }),
+      ]);
+      expect(widgetRegistry.getByCategory('charts')).toHaveLength(2);
+      expect(widgetRegistry.getByCategory('forms')).toHaveLength(1);
+      expect(widgetRegistry.getByCategory('unknown')).toHaveLength(0);
+    });
+  });
+
+  describe('load', () => {
+    it('loads an inline widget', async () => {
+      const component = () => null;
+      widgetRegistry.register(
+        createManifest({ source: { type: 'inline', component } }),
+      );
+
+      const resolved = await widgetRegistry.load('test-widget');
+      expect(resolved.component).toBe(component);
+      expect(resolved.manifest.name).toBe('test-widget');
+      expect(resolved.loadedAt).toBeGreaterThan(0);
+      expect(widgetRegistry.isLoaded('test-widget')).toBe(true);
+    });
+
+    it('returns cached resolved widget on subsequent loads', async () => {
+      widgetRegistry.register(createManifest());
+      const first = await widgetRegistry.load('test-widget');
+      const second = await widgetRegistry.load('test-widget');
+      expect(first).toBe(second);
+    });
+
+    it('throws when loading an unregistered widget', async () => {
+      await expect(widgetRegistry.load('nope')).rejects.toThrow(
+        'Widget "nope" is not registered',
+      );
+    });
+
+    it('loads a widget from the component registry', async () => {
+      const componentRegistry = new Registry();
+      const component = () => null;
+      componentRegistry.register('existing-type', component);
+
+      const reg = new WidgetRegistry({ componentRegistry });
+      reg.register(
+        createManifest({
+          source: { type: 'registry', registryKey: 'existing-type' },
+        }),
+      );
+
+      const resolved = await reg.load('test-widget');
+      expect(resolved.component).toBe(component);
+    });
+
+    it('throws when registry key is not found', async () => {
+      const componentRegistry = new Registry();
+      const reg = new WidgetRegistry({ componentRegistry });
+      reg.register(
+        createManifest({
+          source: { type: 'registry', registryKey: 'missing-key' },
+        }),
+      );
+
+      await expect(reg.load('test-widget')).rejects.toThrow(
+        'references registry key "missing-key"',
+      );
+    });
+
+    it('throws when no component registry is configured for registry source', async () => {
+      widgetRegistry.register(
+        createManifest({
+          source: { type: 'registry', registryKey: 'something' },
+        }),
+      );
+
+      await expect(widgetRegistry.load('test-widget')).rejects.toThrow(
+        'no component registry is configured',
+      );
+    });
+
+    it('resolves dependencies before loading', async () => {
+      const loadOrder: string[] = [];
+
+      widgetRegistry.register(
+        createManifest({
+          name: 'dep-a',
+          type: 'dep-a',
+          source: {
+            type: 'inline',
+            component: () => {
+              loadOrder.push('dep-a');
+              return null;
+            },
+          },
+        }),
+      );
+
+      widgetRegistry.register(
+        createManifest({
+          name: 'main',
+          type: 'main',
+          dependencies: ['dep-a'],
+          source: {
+            type: 'inline',
+            component: () => {
+              loadOrder.push('main');
+              return null;
+            },
+          },
+        }),
+      );
+
+      await widgetRegistry.load('main');
+      expect(widgetRegistry.isLoaded('dep-a')).toBe(true);
+      expect(widgetRegistry.isLoaded('main')).toBe(true);
+    });
+
+    it('syncs loaded widget to component registry', async () => {
+      const componentRegistry = new Registry();
+      const reg = new WidgetRegistry({ componentRegistry });
+      const component = () => null;
+
+      reg.register(
+        createManifest({
+          name: 'sync-test',
+          type: 'custom-type',
+          label: 'Sync Test',
+          category: 'testing',
+          source: { type: 'inline', component },
+        }),
+      );
+
+      await reg.load('sync-test');
+
+      const synced = componentRegistry.get('custom-type');
+      expect(synced).toBe(component);
+    });
+  });
+
+  describe('loadAll', () => {
+    it('loads all registered widgets', async () => {
+      widgetRegistry.registerAll([
+        createManifest({ name: 'a', type: 'a' }),
+        createManifest({ name: 'b', type: 'b' }),
+      ]);
+
+      const results = await widgetRegistry.loadAll();
+      expect(results).toHaveLength(2);
+      expect(results.every((r) => !(r.result instanceof Error))).toBe(true);
+    });
+
+    it('captures errors for failed widgets', async () => {
+      widgetRegistry.register(createManifest({ name: 'good', type: 'good' }));
+      widgetRegistry.register(
+        createManifest({
+          name: 'bad',
+          type: 'bad',
+          source: { type: 'registry', registryKey: 'missing' },
+        }),
+      );
+
+      const results = await widgetRegistry.loadAll();
+      const bad = results.find((r) => r.name === 'bad');
+      expect(bad?.result).toBeInstanceOf(Error);
+    });
+  });
+
+  describe('events', () => {
+    it('emits widget:registered event', () => {
+      const events: WidgetRegistryEvent[] = [];
+      widgetRegistry.on((e) => events.push(e));
+
+      widgetRegistry.register(createManifest());
+
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('widget:registered');
+    });
+
+    it('emits widget:unregistered event', () => {
+      widgetRegistry.register(createManifest());
+
+      const events: WidgetRegistryEvent[] = [];
+      widgetRegistry.on((e) => events.push(e));
+
+      widgetRegistry.unregister('test-widget');
+
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('widget:unregistered');
+    });
+
+    it('emits widget:loaded event', async () => {
+      widgetRegistry.register(createManifest());
+
+      const events: WidgetRegistryEvent[] = [];
+      widgetRegistry.on((e) => events.push(e));
+
+      await widgetRegistry.load('test-widget');
+
+      expect(events.some((e) => e.type === 'widget:loaded')).toBe(true);
+    });
+
+    it('emits widget:error event on load failure', async () => {
+      widgetRegistry.register(
+        createManifest({
+          source: { type: 'registry', registryKey: 'missing' },
+        }),
+      );
+
+      const events: WidgetRegistryEvent[] = [];
+      widgetRegistry.on((e) => events.push(e));
+
+      await widgetRegistry.load('test-widget').catch(() => {});
+
+      expect(events.some((e) => e.type === 'widget:error')).toBe(true);
+    });
+
+    it('supports unsubscribing from events', () => {
+      const handler = vi.fn();
+      const unsub = widgetRegistry.on(handler);
+
+      widgetRegistry.register(createManifest({ name: 'a', type: 'a' }));
+      expect(handler).toHaveBeenCalledTimes(1);
+
+      unsub();
+      widgetRegistry.register(createManifest({ name: 'b', type: 'b' }));
+      expect(handler).toHaveBeenCalledTimes(1); // No new calls
+    });
+  });
+
+  describe('clear / getStats', () => {
+    it('clears all widgets', async () => {
+      widgetRegistry.register(createManifest());
+      await widgetRegistry.load('test-widget');
+
+      widgetRegistry.clear();
+
+      expect(widgetRegistry.has('test-widget')).toBe(false);
+      expect(widgetRegistry.isLoaded('test-widget')).toBe(false);
+    });
+
+    it('returns correct stats', () => {
+      widgetRegistry.registerAll([
+        createManifest({ name: 'a', type: 'a', category: 'charts' }),
+        createManifest({ name: 'b', type: 'b', category: 'forms' }),
+        createManifest({ name: 'c', type: 'c', category: 'charts' }),
+      ]);
+
+      const stats = widgetRegistry.getStats();
+      expect(stats.registered).toBe(3);
+      expect(stats.loaded).toBe(0);
+      expect(stats.categories).toContain('charts');
+      expect(stats.categories).toContain('forms');
+      expect(stats.categories).toHaveLength(2);
+    });
+  });
+});