@memberjunction/react-runtime 5.32.0 → 5.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "5.32.0",
+  "version": "5.34.0",
   "description": "Platform-agnostic React component runtime for MemberJunction. Provides core compilation, registry, and execution capabilities for React components in any JavaScript environment.",
   "type": "module",
   "main": "dist/index.js",
@@ -29,11 +29,11 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "5.32.0",
-    "@memberjunction/global": "5.32.0",
-    "@memberjunction/interactive-component-types": "5.32.0",
-    "@memberjunction/core-entities": "5.32.0",
-    "@memberjunction/graphql-dataprovider": "5.32.0",
+    "@memberjunction/core": "5.34.0",
+    "@memberjunction/global": "5.34.0",
+    "@memberjunction/interactive-component-types": "5.34.0",
+    "@memberjunction/core-entities": "5.34.0",
+    "@memberjunction/graphql-dataprovider": "5.34.0",
     "@babel/standalone": "^7.29.1",
     "rxjs": "^7.8.2"
   },

package/src/__tests__/component-manager.test.ts

@@ -0,0 +1,340 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Stub globals before imports
+vi.stubGlobal('window', {
+  setInterval: vi.fn().mockReturnValue(1),
+  clearInterval: vi.fn(),
+});
+
+// Mock ComponentMetadataEngine before importing ComponentManager
+vi.mock('@memberjunction/core-entities', () => ({
+  ComponentMetadataEngine: {
+    Instance: {
+      Config: vi.fn().mockResolvedValue(undefined),
+      Components: [],
+      ComponentLibraries: [],
+    },
+  },
+  MJComponentLibraryEntity: class {},
+  MJComponentEntityExtended: class {},
+}));
+
+vi.mock('@memberjunction/core', () => ({
+  UserInfo: class {},
+  Metadata: class {},
+  LogError: vi.fn(),
+}));
+
+import { ComponentManager } from '../component-manager/component-manager';
+import { ComponentRegistry } from '../registry/component-registry';
+import { ComponentSpec } from '@memberjunction/interactive-component-types';
+
+/**
+ * Creates a minimal mock ComponentCompiler.
+ * The compile() result returns a factory that produces a tagged component object
+ * so tests can verify which code was actually compiled.
+ */
+function createMockCompiler() {
+  return {
+    compile: vi.fn().mockImplementation(async (opts: { componentName: string; componentCode: string }) => ({
+      success: true,
+      component: {
+        factory: () => ({ __name: opts.componentName, __code: opts.componentCode }),
+      },
+      loadedLibraries: new Map(),
+    })),
+    setBabelInstance: vi.fn(),
+  } as any;
+}
+
+/**
+ * Creates a minimal mock RuntimeContext.
+ */
+function createMockRuntimeContext() {
+  return {
+    React: {},
+    globals: {},
+    libraries: {},
+    getLibrary: vi.fn(),
+  } as any;
+}
+
+/**
+ * Helper to build a ComponentSpec with sensible defaults.
+ */
+function makeSpec(overrides: Partial<ComponentSpec> & { name: string }): ComponentSpec {
+  return {
+    location: 'embedded',
+    version: '1.0.0',
+    namespace: 'Test',
+    code: `function ${overrides.name}() { return null; }`,
+    ...overrides,
+  } as ComponentSpec;
+}
+
+describe('ComponentManager', () => {
+  let compiler: ReturnType<typeof createMockCompiler>;
+  let registry: ComponentRegistry;
+  let manager: ComponentManager;
+
+  beforeEach(() => {
+    compiler = createMockCompiler();
+    registry = new ComponentRegistry({ cleanupInterval: 0 });
+    manager = new ComponentManager(compiler, registry, createMockRuntimeContext(), {
+      debug: false,
+      enableUsageTracking: false,
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Basic loading
+  // --------------------------------------------------------------------------
+  describe('loadComponent', () => {
+    it('should compile and return a component on first load', async () => {
+      const spec = makeSpec({ name: 'Button' });
+      const result = await manager.loadComponent(spec);
+
+      expect(result.success).toBe(true);
+      expect(result.fromCache).toBe(false);
+      expect(compiler.compile).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return from cache on second load with same spec', async () => {
+      const spec = makeSpec({ name: 'Button' });
+
+      await manager.loadComponent(spec);
+      compiler.compile.mockClear();
+
+      const result2 = await manager.loadComponent(spec);
+      expect(result2.success).toBe(true);
+      expect(result2.fromCache).toBe(true);
+      expect(compiler.compile).not.toHaveBeenCalled();
+    });
+
+    it('should recompile when code changes (different hash)', async () => {
+      const specV1 = makeSpec({ name: 'Button', code: 'function Button() { return 1; }' });
+      const specV2 = makeSpec({ name: 'Button', code: 'function Button() { return 2; }' });
+
+      await manager.loadComponent(specV1);
+      compiler.compile.mockClear();
+
+      const result = await manager.loadComponent(specV2);
+      expect(result.success).toBe(true);
+      expect(result.fromCache).toBe(false);
+      expect(compiler.compile).toHaveBeenCalledTimes(1);
+    });
+
+    it('should recompile when forceRecompile is set', async () => {
+      const spec = makeSpec({ name: 'Button' });
+
+      await manager.loadComponent(spec);
+      compiler.compile.mockClear();
+
+      const result = await manager.loadComponent(spec, { forceRecompile: true });
+      expect(result.success).toBe(true);
+      expect(result.fromCache).toBe(false);
+      expect(compiler.compile).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // loadHierarchy – dependency resolution
+  // --------------------------------------------------------------------------
+  describe('loadHierarchy', () => {
+    it('should load root and its dependencies', async () => {
+      const childSpec = makeSpec({ name: 'ChildBtn', code: 'function ChildBtn() { return "child"; }' });
+      const rootSpec = makeSpec({
+        name: 'ParentForm',
+        code: 'function ParentForm() { return "parent"; }',
+        dependencies: [childSpec],
+      });
+
+      const result = await manager.loadHierarchy(rootSpec);
+
+      expect(result.success).toBe(true);
+      expect(result.loadedComponents).toContain('ParentForm');
+      expect(result.loadedComponents).toContain('ChildBtn');
+      expect(compiler.compile).toHaveBeenCalledTimes(2);
+    });
+
+    it('should use updated dependency code even when root is cached', async () => {
+      const childV1 = makeSpec({ name: 'Search', code: 'function Search() { return "v1"; }' });
+      const rootSpec = makeSpec({
+        name: 'Dashboard',
+        code: 'function Dashboard() { return "root"; }',
+        dependencies: [childV1],
+      });
+
+      // First load – populates cache
+      await manager.loadHierarchy(rootSpec);
+      expect(compiler.compile).toHaveBeenCalledTimes(2);
+      compiler.compile.mockClear();
+
+      // Second load – same root code, but updated Search dependency code
+      const childV2 = makeSpec({ name: 'Search', code: 'function Search() { return "v2"; }' });
+      const rootSpecUpdated = makeSpec({
+        name: 'Dashboard',
+        code: 'function Dashboard() { return "root"; }', // same root code
+        dependencies: [childV2],
+      });
+
+      const result = await manager.loadHierarchy(rootSpecUpdated);
+
+      expect(result.success).toBe(true);
+      // Root should be cached, Search should recompile with new code
+      expect(result.stats?.fromCache).toBe(1); // root only
+      expect(compiler.compile).toHaveBeenCalledTimes(1); // Search recompiled
+      // Verify the recompiled dependency used the v2 code
+      const compileCall = compiler.compile.mock.calls[0][0];
+      expect(compileCall.componentCode).toContain('return "v2"');
+    });
+
+    it('should cache dependencies individually by content hash', async () => {
+      const child = makeSpec({ name: 'Grid', code: 'function Grid() { return "grid"; }' });
+      const root1 = makeSpec({
+        name: 'Page1',
+        code: 'function Page1() { return "p1"; }',
+        dependencies: [child],
+      });
+      const root2 = makeSpec({
+        name: 'Page2',
+        code: 'function Page2() { return "p2"; }',
+        dependencies: [{ ...child }], // same Grid dependency
+      });
+
+      await manager.loadHierarchy(root1);
+      expect(compiler.compile).toHaveBeenCalledTimes(2); // Page1 + Grid
+      compiler.compile.mockClear();
+
+      // Loading Page2 with the exact same Grid dep should reuse Grid from cache
+      const result = await manager.loadHierarchy(root2);
+      expect(result.success).toBe(true);
+      expect(compiler.compile).toHaveBeenCalledTimes(1); // Only Page2 compiled, Grid cached
+    });
+
+    it('should handle deeply nested dependency updates', async () => {
+      const leafV1 = makeSpec({ name: 'Leaf', code: 'function Leaf() { return "leaf-v1"; }' });
+      const mid = makeSpec({
+        name: 'Middle',
+        code: 'function Middle() { return "mid"; }',
+        dependencies: [leafV1],
+      });
+      const root = makeSpec({
+        name: 'Root',
+        code: 'function Root() { return "root"; }',
+        dependencies: [mid],
+      });
+
+      // First load
+      await manager.loadHierarchy(root);
+      expect(compiler.compile).toHaveBeenCalledTimes(3);
+      compiler.compile.mockClear();
+
+      // Update only the leaf
+      const leafV2 = makeSpec({ name: 'Leaf', code: 'function Leaf() { return "leaf-v2"; }' });
+      const midUpdated = makeSpec({
+        name: 'Middle',
+        code: 'function Middle() { return "mid"; }',
+        dependencies: [leafV2],
+      });
+      const rootUpdated = makeSpec({
+        name: 'Root',
+        code: 'function Root() { return "root"; }',
+        dependencies: [midUpdated],
+      });
+
+      const result = await manager.loadHierarchy(rootUpdated);
+      expect(result.success).toBe(true);
+      // Root cached, Middle cached, only Leaf recompiled
+      expect(compiler.compile).toHaveBeenCalledTimes(1);
+      const compileCall = compiler.compile.mock.calls[0][0];
+      expect(compileCall.componentCode).toContain('leaf-v2');
+    });
+
+    it('should handle circular dependencies without infinite loop', async () => {
+      const specA = makeSpec({ name: 'CompA', code: 'function CompA() {}' });
+      const specB = makeSpec({
+        name: 'CompB',
+        code: 'function CompB() {}',
+        dependencies: [specA],
+      });
+      specA.dependencies = [specB];
+
+      const root = makeSpec({
+        name: 'Root',
+        code: 'function Root() {}',
+        dependencies: [specA],
+      });
+
+      const result = await manager.loadHierarchy(root);
+      expect(result.success).toBe(true);
+      expect(result.loadedComponents).toContain('Root');
+    });
+
+    it('should fallback to cached spec dependencies when input has none', async () => {
+      const child = makeSpec({ name: 'Chart', code: 'function Chart() {}' });
+      const fullRootSpec = makeSpec({
+        name: 'Dashboard',
+        code: 'function Dashboard() {}',
+        dependencies: [child],
+      });
+
+      // First load with full spec (has dependencies)
+      await manager.loadHierarchy(fullRootSpec);
+      expect(compiler.compile).toHaveBeenCalledTimes(2);
+      compiler.compile.mockClear();
+
+      // Second load with no dependencies field - simulates registry reference
+      const minimalSpec = makeSpec({
+        name: 'Dashboard',
+        code: 'function Dashboard() {}',
+      });
+      delete (minimalSpec as any).dependencies;
+
+      const result = await manager.loadHierarchy(minimalSpec);
+      expect(result.success).toBe(true);
+      expect(result.loadedComponents).toContain('Dashboard');
+      // Chart should still be loaded via cached spec's dependencies
+      expect(result.loadedComponents).toContain('Chart');
+    });
+
+    it('should prefer input dependencies over stale cached dependencies', async () => {
+      const depA = makeSpec({ name: 'DepA', code: 'function DepA() { return "A"; }' });
+      const root = makeSpec({
+        name: 'App',
+        code: 'function App() { return "app"; }',
+        dependencies: [depA],
+      });
+      await manager.loadHierarchy(root);
+      compiler.compile.mockClear();
+
+      // Same root code but dependency list changed (depB instead of depA)
+      const depB = makeSpec({ name: 'DepB', code: 'function DepB() { return "B"; }' });
+      const rootUpdated = makeSpec({
+        name: 'App',
+        code: 'function App() { return "app"; }',
+        dependencies: [depB],
+      });
+      const result = await manager.loadHierarchy(rootUpdated);
+
+      expect(result.success).toBe(true);
+      expect(result.loadedComponents).toContain('DepB');
+      expect(compiler.compile).toHaveBeenCalledTimes(1); // only DepB
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Cache management
+  // --------------------------------------------------------------------------
+  describe('clearCache', () => {
+    it('should clear the fetch cache', async () => {
+      const spec = makeSpec({ name: 'Widget' });
+      await manager.loadComponent(spec);
+
+      manager.clearCache();
+
+      const stats = manager.getCacheStats();
+      expect(stats.fetchCacheSize).toBe(0);
+    });
+  });
+});

package/src/component-manager/component-manager.ts

@@ -5,7 +5,7 @@
 
 import { ComponentSpec, ComponentLibraryDependency } from '@memberjunction/interactive-component-types';
 import { UserInfo, Metadata, LogError } from '@memberjunction/core';
-import { ComponentMetadataEngine, MJComponentLibraryEntity, MJComponentEntityExtended } from '@memberjunction/core-entities';
+import { ComponentMetadataEngine, MJComponentLibraryEntity } from '@memberjunction/core-entities';
 
 import { ComponentCompiler } from '../compiler';
 import { ComponentRegistry } from '../registry';
@@ -84,6 +84,25 @@ export class ComponentManager {
     // Check if already loading to prevent duplicate work
     const existingPromise = this.loadingPromises.get(componentKey);
     if (existingPromise && !options.forceRefresh) {
+      // Before returning the pending promise, check if the compiled component
+      // is already in the registry. This prevents deadlock in circular dependency
+      // chains: A's Step 6 loads B, B's Step 6 loads A again — but A was already
+      // compiled and registered (Step 5 runs before Step 6). Returning the pending
+      // promise would deadlock because it's waiting on its own call chain.
+      const namespace = spec.namespace || options.defaultNamespace || 'Global';
+      const version = spec.version || options.defaultVersion || 'latest';
+      const contentHash = this.calculateHash(spec);
+      const registered = this.registry.get(spec.name, namespace, version, contentHash);
+      if (registered) {
+        this.log(`Component already registered (circular dep resolution): ${spec.name}`);
+        return {
+          success: true,
+          component: registered,
+          spec,
+          fromCache: true
+        };
+      }
+
       this.log(`Component already loading: ${spec.name}, waiting...`);
       return existingPromise;
     }
@@ -406,8 +425,13 @@ export class ComponentManager {
       }
       
       // Load dependencies
-      if (result.spec?.dependencies) {
-        for (const dep of result.spec.dependencies) {
+      // Prefer the input spec's dependencies over the cached result's dependencies.
+      // When a parent component is served from cache, result.spec contains stale
+      // dependency code. The input spec has the latest dependency code from the caller.
+      // Each dependency still gets its own individual cache check via loadComponent.
+      const dependencies = spec.dependencies || result.spec?.dependencies;
+      if (dependencies) {
+        for (const dep of dependencies) {
           // Normalize dependency spec for local registry lookup
           const depSpec = { ...dep };
           // OPTIMIZATION: If the dependency already has code (from registry population),
@@ -491,87 +515,82 @@ export class ComponentManager {
     // Check cache first
     const cacheKey = this.getComponentKey(spec, {});
     const cached = this.fetchCache.get(cacheKey);
-    
+
     if (cached && this.isCacheValid(cached)) {
       this.log(`Using cached spec for: ${spec.name}`);
       return cached.spec;
     }
-    
+
     // Handle LOCAL registry components (registry is null/undefined)
     if (!spec.registry) {
-      this.log(`Fetching from local registry: ${spec.name}`);
-      
-      // Find component in local ComponentMetadataEngine
-      const localComponent = this.componentEngine.Components?.find(
-        (c: MJComponentEntityExtended) => {
-          // Match by name (case-insensitive for better compatibility)
-          const nameMatch = c.Name?.toLowerCase() === spec.name?.toLowerCase();
-          
-          // Match by namespace if provided (handle different formats)
-          const namespaceMatch = !spec.namespace || c.Namespace?.toLowerCase() === spec.namespace?.toLowerCase();
+      const localComponent = await this.componentEngine.FindComponent(spec.name, spec.namespace);
 
-          if (nameMatch && !namespaceMatch) {
-          }
-          
-          return nameMatch && namespaceMatch;
-        }
-      );
-      
       if (!localComponent) {
         throw new Error(`Local component not found: ${spec.name}`);
       }
-      
-      // Parse specification from local component
+
       if (!localComponent.Specification) {
         throw new Error(`Local component ${spec.name} has no specification`);
       }
-      
+
       const fullSpec = JSON.parse(localComponent.Specification);
-      
-      // Cache it
+
       this.fetchCache.set(cacheKey, {
         spec: fullSpec,
         fetchedAt: new Date(),
         usageNotified: false
       });
-      
+
       return fullSpec;
     }
-    
+
     // Handle EXTERNAL registry components (registry has a name)
-    // Initialize GraphQL client if needed
     if (!this.graphQLClient) {
       await this.initializeGraphQLClient();
     }
-    
+
     if (!this.graphQLClient) {
       throw new Error('GraphQL client not available for registry fetching');
     }
-    
-    // Fetch from external registry
+
+    // Fetch from external registry, passing the cached hash (if any) so the
+    // server can return 304 Not Modified when the spec hasn't changed
     this.log(`Fetching from external registry: ${spec.registry}/${spec.name}`);
-    
-    const fullSpec = await this.graphQLClient.GetRegistryComponent({
+    const cachedHash = cached?.hash;
+
+    const response = await this.graphQLClient.GetRegistryComponentWithHash({
       registryName: spec.registry,
       namespace: spec.namespace || 'Global',
       name: spec.name,
-      version: spec.version || 'latest'
+      version: spec.version || 'latest',
+      hash: cachedHash
     });
-    
-    if (!fullSpec) {
+
+    // If not modified (304), reuse the cached spec and refresh the TTL
+    if (response.notModified && cached) {
+      this.log(`Registry returned 304 for ${spec.name}, reusing cached spec`);
+      this.fetchCache.set(cacheKey, {
+        ...cached,
+        fetchedAt: new Date()
+      });
+      return cached.spec;
+    }
+
+    if (!response.specification) {
       throw new Error(`Component not found in registry: ${spec.registry}/${spec.name}`);
     }
-    
-    // Apply resolution mode if specified
+
+    const fullSpec = response.specification as ComponentSpec;
     const processedSpec = this.applyResolutionMode(fullSpec, spec, options?.resolutionMode);
-    
-    // Cache it
+
+    // Cache it with the registry hash for future 304 checks
     this.fetchCache.set(cacheKey, {
       spec: processedSpec,
       fetchedAt: new Date(),
+      hash: response.hash,
       usageNotified: false
     });
-    
+
     return processedSpec;
   }
   

package/src/registry/component-registry-service.ts

@@ -232,8 +232,8 @@ export class ComponentRegistryService {
   ): Promise<ComponentObject> {
     await this.initialize(contextUser);
     
-    // Find component in metadata
-    const component = this.componentEngine.Components.find((c: MJComponentEntity) => UUIDsEqual(c.ID, componentId));
+    // Find component in metadata via targeted query
+    const component = await this.componentEngine.FindComponentByID(componentId, contextUser);
     if (!component) {
       throw new Error(`Component not found: ${componentId}`);
     }
@@ -487,7 +487,7 @@ export class ComponentRegistryService {
   ): Promise<ComponentSpec> {
     await this.initialize(contextUser);
     
-    const component = this.componentEngine.Components.find((c: MJComponentEntity) => UUIDsEqual(c.ID, componentId));
+    const component = await this.componentEngine.FindComponentByID(componentId, contextUser);
     if (!component) {
       throw new Error(`Component not found: ${componentId}`);
     }
@@ -697,16 +697,14 @@ export class ComponentRegistryService {
     
     for (const dep of dependencies) {
       // Find the dependency component
-      const depComponent = this.componentEngine.Components.find(
-        (c: MJComponentEntity) => UUIDsEqual(c.ID, dep.DependencyComponentID)
-      );
-      
+      const depComponent = await this.componentEngine.FindComponentByID(dep.DependencyComponentID, contextUser);
+
       if (depComponent) {
         result.push({
           name: depComponent.Name,
           namespace: depComponent.Namespace || '',
-          version: depComponent.Version, // Version comes from the linked Component record
-          isRequired: true, // All dependencies are required in MemberJunction
+          version: depComponent.Version,
+          isRequired: true,
           location: depComponent.SourceRegistryID ? 'registry' : 'embedded',
           sourceRegistryID: depComponent.SourceRegistryID
         });
@@ -734,27 +732,23 @@ export class ComponentRegistryService {
     
     await this.initialize(contextUser);
     
-    const component = this.componentEngine.Components.find((c: MJComponentEntity) => UUIDsEqual(c.ID, componentId));
+    const component = await this.componentEngine.FindComponentByID(componentId, contextUser);
     if (!component) {
       return { componentId, dependencies: [] };
     }
-    
+
     // Get direct dependencies
     const directDeps = await this.loadDependencies(componentId, contextUser);
-    
+
     // Recursively resolve each dependency
     const dependencies: DependencyTree[] = [];
     for (const dep of directDeps) {
-      // Find the dependency component
-      const depComponent = this.componentEngine.Components.find(
-        c => c.Name.trim().toLowerCase() === dep.name.trim().toLowerCase() && 
-             c.Namespace?.trim().toLowerCase() === dep.namespace?.trim().toLowerCase()
-      );
-      
+      const depComponent = await this.componentEngine.FindComponent(dep.name, dep.namespace, undefined, contextUser);
+
       if (depComponent) {
         const subTree = await this.resolveDependencyTree(
-          depComponent.ID, 
-          contextUser, 
+          depComponent.ID,
+          contextUser,
           visited
         );
         dependencies.push(subTree);