Merge pull request #157 from rawagner/hooks_manager_eq

fix: ensure RemoteHookManager returns referencially equal results if …

Author: Hyperkid123

examples/test-app/src/routes/RemoteHookManager.tsx

@@ -45,12 +45,12 @@ function isTimerResult(result: any): result is UseRemoteHookResult<TimerResult>
 }
 
 const RemoteHookManager = () => {
-  const manager = useRemoteHookManager();
+  const { addHook, cleanup, hookResults } = useRemoteHookManager();
   const [hooks, setHooks] = useState<any[]>([]);
 
   // Add counter hook
   const addCounterHook = () => {
-    const handle = manager.addHook({
+    const handle = addHook({
       scope: 'sdk-plugin',
       module: './useCounterHook',
       args: [{ initialValue: Math.floor(Math.random() * 10), step: 1 }],
@@ -61,7 +61,7 @@ const RemoteHookManager = () => {
 
   // Add API hook
   const addApiHook = () => {
-    const handle = manager.addHook({
+    const handle = addHook({
       scope: 'sdk-plugin',
       module: './useApiHook',
       args: [
@@ -81,7 +81,7 @@ const RemoteHookManager = () => {
 
   // Add timer hook
   const addTimerHook = () => {
-    const handle = manager.addHook({
+    const handle = addHook({
       scope: 'sdk-plugin',
       module: './useTimerHook',
       args: [{ duration: 10, autoStart: true }],
@@ -105,15 +105,12 @@ const RemoteHookManager = () => {
     }
   };
 
-  // Get all hook results
-  const hookResults = manager.getHookResults();
-
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      manager.cleanup();
+      cleanup();
     };
-  }, [manager]);
+  }, [cleanup]);
 
   return (
     <Grid container spacing={4}>
@@ -146,7 +143,7 @@ const RemoteHookManager = () => {
               <Button
                 variant="outlined"
                 onClick={() => {
-                  manager.cleanup();
+                  cleanup();
                   setHooks([]);
                 }}
                 color="error"

packages/react-core/README.md

@@ -302,7 +302,7 @@ function DynamicHooksComponent() {
     // handle.remove();
   };
 
-  const results = manager.getHookResults();
+  const results = manager.hookResults;
 
   return (
     <div>
@@ -323,7 +323,7 @@ function DynamicHooksComponent() {
 **Methods:**
 - `addHook(config)` - Add a new remote hook, returns handle
 - `cleanup()` - Remove all hooks (called automatically on unmount)
-- `getHookResults()` - Get results from all tracked hooks
+- `hookResults` - Results from all tracked hooks
 
 **Handle Methods:**
 - `remove()` - Remove this specific hook

packages/react-core/docs/remote-hook-types.md

@@ -63,7 +63,7 @@ const config: HookConfig = {
 
 ### UseRemoteHookResult<T>
 
-Result object returned by `useRemoteHook` and included in `getHookResults()` arrays.
+Result object returned by `useRemoteHook` and included in `hookResults` arrays.
 
 ```tsx
 interface UseRemoteHookResult<T> {
@@ -153,14 +153,14 @@ Interface for the hook manager returned by `useRemoteHookManager()`.
 interface RemoteHookManager {
   addHook(config: HookConfig): HookHandle;
   cleanup(): void;
-  getHookResults(): UseRemoteHookResult<any>[];
+  hookResults: UseRemoteHookResult<any>[];
 }
 ```
 
 **Methods:**
 - `addHook(config)`: Add a new remote hook and return a handle
 - `cleanup()`: Remove all managed hooks and clean up resources
-- `getHookResults()`: Get an array of all current hook results
+- `hookResults`: An array of all current hook results
 
 **Example:**
 ```tsx
@@ -176,11 +176,7 @@ function useHookManager() {
     return handle;
   };
 
-  const getAllResults = (): UseRemoteHookResult<any>[] => {
-    return manager.getHookResults();
-  };
-
-  return { addCounter, getAllResults, cleanup: manager.cleanup };
+  return { addCounter, hookResults: manager.hookResults, cleanup: manager.cleanup };
 }
 ```
 
@@ -269,13 +265,13 @@ function TypedHookManager() {
     });
   };
 
-  const getApiResults = (): UseRemoteHookResult<ApiHookResult>[] => {
-    return manager.getHookResults().filter(result =>
+  const apiResults = useMemo(() => {
+    return manager.hookResults.filter(result =>
       result.hookResult && 'data' in result.hookResult
     ) as UseRemoteHookResult<ApiHookResult>[];
-  };
+  }, [manager.hookResults]);
 
-  return { addApiHook, getApiResults };
+  return { addApiHook, apiResults };
 }
 ```
 
@@ -355,7 +351,7 @@ interface MyHooks {
 
 function useTypedHookRegistry(): HookRegistry<MyHooks> {
   const manager = useRemoteHookManager();
-  const results = manager.getHookResults();
+  const results = manager.hookResults;
 
   // Implementation would map results to the typed registry
   return {} as HookRegistry<MyHooks>;

packages/react-core/docs/use-remote-hook-manager.md

@@ -25,10 +25,10 @@ handle.updateArgs([{ config: 'newValue' }]);
 handle.remove();
 
 // Get all hook results
-const results = manager.getHookResults();
+const results = manager.hookResults;
 
 // Clean up all hooks (do this on unmount)
-useEffect(() => () => manager.cleanup(), [manager]);
+useEffect(() => () => manager.cleanup(), [manager.cleanup]);
 ```
 
 **When to use:** Managing multiple remote hooks dynamically, adding/removing hooks at runtime, or building plugin systems.
@@ -48,10 +48,10 @@ import { useRemoteHookManager } from '@scalprum/react-core';
 import { useEffect } from 'react';
 
 function HookManagerComponent() {
-  const manager = useRemoteHookManager();
+  const { addHook, cleanup, hookResults } = useRemoteHookManager();
 
   const addCounterHook = () => {
-    const handle = manager.addHook({
+    const handle = addHook({
       scope: 'counter-app',
       module: './useCounter',
       args: [{ initialValue: 0, step: 1 }]
@@ -62,18 +62,17 @@ function HookManagerComponent() {
   };
 
   const getAllResults = () => {
-    const results = manager.getHookResults();
-    console.log('All hook results:', results);
+    console.log('All hook results:', hookResults);
   };
 
   const cleanupAll = () => {
-    manager.cleanup();
+    cleanup();
   };
 
   // Cleanup on unmount
   useEffect(() => {
-    return () => manager.cleanup();
-  }, [manager]);
+    return () => cleanup();
+  }, [cleanup]);
 
   return (
     <div>
@@ -108,9 +107,9 @@ Adds a new remote hook and returns a handle to control it.
 - `remove()`: Remove this specific hook
 - `updateArgs(args: any[])`: Update arguments for this hook
 
-#### `getHookResults(): UseRemoteHookResult<any>[]`
+#### `hookResults: UseRemoteHookResult<any>[]`
 
-Returns an array of all current hook results.
+An array of all current hook results.
 
 **Returns:** Array of `UseRemoteHookResult` objects with:
 - `id`: Unique hook identifier
@@ -170,16 +169,12 @@ function MultiHookManager() {
     setHooks(prev => prev.filter((_, i) => i !== index));
   };
 
-  const getAllResults = () => {
-    return manager.getHookResults();
-  };
-
   // Cleanup on unmount
   useEffect(() => {
     return () => manager.cleanup();
-  }, [manager]);
+  }, [manager.cleanup]);
 
-  const hookResults = getAllResults();
+  const { hookResults } = manager;
 
   return (
     <div>
@@ -237,7 +232,7 @@ function DynamicArgsManager() {
     setHandles(prev => prev.filter((_, i) => i !== index));
   };
 
-  const hookResults = manager.getHookResults();
+  const { hookResults } = manager;
 
   return (
     <div>
@@ -287,7 +282,7 @@ function HookResultsProcessor() {
 
   useEffect(() => {
     // Process hook results whenever they change
-    const results = manager.getHookResults();
+    const results = manager.hookResults;
 
     const processed = results.reduce((acc, result, index) => {
       if (!result.loading && !result.error && result.hookResult) {
@@ -302,7 +297,7 @@ function HookResultsProcessor() {
     }, {});
 
     setProcessedData(processed);
-  }, [manager]); // Re-run when results change
+  }, [manager.hookResults]); // Re-run when results change
 
   const determineHookType = (hookResult) => {
     if (typeof hookResult.count === 'number') return 'counter';
@@ -380,7 +375,6 @@ function MemoizedArgsExample() {
 ## Performance Considerations
 
 - **Manager Stability**: The manager object is stable across re-renders
-- **Hook Results**: Call `getHookResults()` to get fresh results, as they're not automatically reactive
 - **Memory Management**: Always call `cleanup()` or individual `remove()` methods to prevent memory leaks
 - **Argument Updates**: Use `handle.updateArgs()` to update arguments instead of removing and re-adding hooks
 
@@ -414,31 +408,11 @@ function MemoizedArgsExample() {
 
 ```tsx
 function ErrorHandlingManager() {
-  const manager = useRemoteHookManager();
-  const [errors, setErrors] = useState([]);
-
-  const addHookWithErrorHandling = (config) => {
-    try {
-      const handle = manager.addHook(config);
-
-      // Check results periodically for errors
-      setTimeout(() => {
-        const results = manager.getHookResults();
-        const newErrors = results
-          .filter(result => result.error)
-          .map(result => ({ id: result.id, error: result.error.message }));
-
-        if (newErrors.length > 0) {
-          setErrors(prev => [...prev, ...newErrors]);
-        }
-      }, 1000);
-
-      return handle;
-    } catch (error) {
-      console.error('Failed to add hook:', error);
-      setErrors(prev => [...prev, { id: 'add-hook', error: error.message }]);
-    }
-  };
+  const { hookResults } = useRemoteHookManager();
+
+  const errors = hookResults
+    .filter(result => result.error)
+    .map(result => ({ id: result.id, error: result.error.message }));
 
   return (
     <div>

packages/react-core/jest.config.ts

@@ -3,8 +3,13 @@ export default {
   displayName: '@scalprum/react-core',
   preset: '../../jest.preset.js',
   transform: {
-    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+    '^.+\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
-  moduleFileExtensions: ['ts', 'js', 'html'],
+  moduleNameMapper: {
+    '^@scalprum/core$': '<rootDir>/../core/src/index.ts',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
   coverageDirectory: '../../coverage/packages/react-core',
+  testEnvironment: 'jsdom',
+  testMatch: ['**/*.test.ts?(x)', '**/*.spec.ts?(x)'],
 };

packages/react-core/src/remote-hooks-types.ts

@@ -29,10 +29,10 @@ export interface HookHandle {
   updateArgs(args: any[]): void;
 }
 
-export interface RemoteHookManager {
+export interface RemoteHookManager<R = unknown> {
   addHook(config: HookConfig): HookHandle; // Returns handle with remove and updateArgs
   cleanup(): void; // Cleanup for component unmount
-  getHookResults(): UseRemoteHookResult<any>[]; // Get results for all tracked hooks
+  hookResults: UseRemoteHookResult<R>[]; // Results for all tracked hooks
 }
 
 // Context type from RemoteHookProvider