@navios/di-react 0.8.0 → 1.0.0-alpha.3

package/src/hooks/__tests__/use-scope.spec.mts

@@ -0,0 +1,293 @@
+import { Container, globalRegistry, Registry } from '@navios/di'
+
+import { renderHook } from '@testing-library/react'
+import { createElement } from 'react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { ContainerProvider } from '../../providers/container-provider.mjs'
+import { ScopeProvider } from '../../providers/scope-provider.mjs'
+import {
+  useScope,
+  useScopedContainer,
+  useScopedContainerOrThrow,
+  useScopeMetadata,
+  useScopeOrThrow,
+} from '../use-scope.mjs'
+
+describe('useScope', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry(globalRegistry)
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+  })
+
+  it('should return null when not inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+
+    const { result } = renderHook(() => useScope(), { wrapper })
+
+    expect(result.current).toBeNull()
+  })
+
+  it('should return the scope ID when inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        // @ts-expect-error - props are not typed
+        createElement(ScopeProvider, { scopeId: 'test-scope-123' }, children),
+      )
+
+    const { result } = renderHook(() => useScope(), { wrapper })
+
+    expect(result.current).toBe('test-scope-123')
+  })
+
+  it('should return the innermost scope ID when nested', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        createElement(
+          ScopeProvider,
+          // @ts-expect-error - props are not typed
+          { scopeId: 'outer-scope' },
+          // @ts-expect-error - props are not typed
+          createElement(ScopeProvider, { scopeId: 'inner-scope' }, children),
+        ),
+      )
+
+    const { result } = renderHook(() => useScope(), { wrapper })
+
+    expect(result.current).toBe('inner-scope')
+  })
+})
+
+describe('useScopeOrThrow', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry(globalRegistry)
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+  })
+
+  it('should throw when not inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+
+    expect(() => {
+      renderHook(() => useScopeOrThrow(), { wrapper })
+    }).toThrow('useScopeOrThrow must be used within a ScopeProvider')
+  })
+
+  it('should return the scope ID when inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        // @ts-expect-error - props are not typed
+        createElement(ScopeProvider, { scopeId: 'test-scope' }, children),
+      )
+
+    const { result } = renderHook(() => useScopeOrThrow(), { wrapper })
+
+    expect(result.current).toBe('test-scope')
+  })
+})
+
+describe('useScopedContainer', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry(globalRegistry)
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+  })
+
+  it('should return null when not inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+
+    const { result } = renderHook(() => useScopedContainer(), { wrapper })
+
+    expect(result.current).toBeNull()
+  })
+
+  it('should return the ScopedContainer when inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        // @ts-expect-error - props are not typed
+        createElement(ScopeProvider, { scopeId: 'test-scope' }, children),
+      )
+
+    const { result } = renderHook(() => useScopedContainer(), { wrapper })
+
+    expect(result.current).not.toBeNull()
+    expect(result.current?.getRequestId()).toBe('test-scope')
+  })
+})
+
+describe('useScopedContainerOrThrow', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry(globalRegistry)
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+  })
+
+  it('should throw when not inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+
+    expect(() => {
+      renderHook(() => useScopedContainerOrThrow(), { wrapper })
+    }).toThrow('useScopedContainerOrThrow must be used within a ScopeProvider')
+  })
+
+  it('should return the ScopedContainer when inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        // @ts-expect-error - props are not typed
+        createElement(ScopeProvider, { scopeId: 'test-scope' }, children),
+      )
+
+    const { result } = renderHook(() => useScopedContainerOrThrow(), { wrapper })
+
+    expect(result.current.getRequestId()).toBe('test-scope')
+  })
+})
+
+describe('useScopeMetadata', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry(globalRegistry)
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+  })
+
+  it('should return undefined when not inside a ScopeProvider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+
+    const { result } = renderHook(() => useScopeMetadata('someKey'), { wrapper })
+
+    expect(result.current).toBeUndefined()
+  })
+
+  it('should return undefined when key does not exist', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        createElement(
+          ScopeProvider,
+          // @ts-expect-error - props are not typed
+          { scopeId: 'test-scope', metadata: { existingKey: 'value' } },
+          children,
+        ),
+      )
+
+    const { result } = renderHook(() => useScopeMetadata('nonExistentKey'), {
+      wrapper,
+    })
+
+    expect(result.current).toBeUndefined()
+  })
+
+  it('should return the metadata value when key exists', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        createElement(
+          ScopeProvider,
+          // @ts-expect-error - props are not typed
+          {
+            scopeId: 'test-scope',
+            metadata: { userId: '123', theme: 'dark' },
+          },
+          children,
+        ),
+      )
+
+    // Test both values in a single hook to ensure they're from the same scope
+    const { result } = renderHook(
+      () => ({
+        userId: useScopeMetadata<string>('userId'),
+        theme: useScopeMetadata<string>('theme'),
+      }),
+      { wrapper },
+    )
+
+    expect(result.current.userId).toBe('123')
+    expect(result.current.theme).toBe('dark')
+  })
+
+  it('should return metadata from the innermost scope', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        ContainerProvider,
+        // @ts-expect-error - props are not typed
+        { container },
+        createElement(
+          ScopeProvider,
+          // @ts-expect-error - props are not typed
+          { scopeId: 'outer-scope', metadata: { value: 'outer' } },
+          createElement(
+            ScopeProvider,
+            // @ts-expect-error - props are not typed
+            { scopeId: 'inner-scope', metadata: { value: 'inner' } },
+            children,
+          ),
+        ),
+      )
+
+    const { result } = renderHook(() => useScopeMetadata<string>('value'), {
+      wrapper,
+    })
+
+    expect(result.current).toBe('inner')
+  })
+})

package/src/hooks/__tests__/use-service.spec.mts

@@ -18,7 +18,7 @@ describe('useService', () => {
   })
 
   afterEach(async () => {
-    await container.clear()
+    await container.dispose()
   })
 
   const createWrapper = () => {
@@ -79,7 +79,7 @@ describe('useService', () => {
       expect(result.current.isSuccess).toBe(false)
     })
 
-    it.skip('should refetch service when refetch is called', async () => {
+    it('should refetch service when refetch is called', async () => {
       let callCount = 0
 
       @Injectable({ registry })

package/src/hooks/index.mts

@@ -4,7 +4,7 @@ export type { UseServiceResult } from './use-service.mjs'
 export { useSuspenseService } from './use-suspense-service.mjs'
 export { useOptionalService } from './use-optional-service.mjs'
 export type { UseOptionalServiceResult } from './use-optional-service.mjs'
-export { useInvalidate, useInvalidateInstance } from './use-invalidate.mjs'
+export { useInvalidateInstance } from './use-invalidate.mjs'
 export {
   useScope,
   useScopeOrThrow,

package/src/hooks/use-container.mts

@@ -1,8 +1,11 @@
-import type { Container, IContainer, ScopedContainer } from '@navios/di'
+import type { Container, ScopedContainer } from '@navios/di'
 
 import { useContext } from 'react'
 
-import { ContainerContext, ScopedContainerContext } from '../providers/context.mjs'
+import {
+  ContainerContext,
+  ScopedContainerContext,
+} from '../providers/context.mjs'
 
 /**
  * Hook to get the current container (ScopedContainer if inside ScopeProvider, otherwise Container).
@@ -14,7 +17,7 @@ import { ContainerContext, ScopedContainerContext } from '../providers/context.m
  *
  * @returns The current container (ScopedContainer or Container)
  */
-export function useContainer(): IContainer {
+export function useContainer(): Container | ScopedContainer {
   const scopedContainer = useContext(ScopedContainerContext)
   const container = useContext(ContainerContext)
 

package/src/hooks/use-invalidate.mts

@@ -1,87 +1,6 @@
-import type {
-  BoundInjectionToken,
-  ClassType,
-  FactoryInjectionToken,
-  InjectionToken,
-  InjectionTokenSchemaType,
-} from '@navios/di'
-
 import { useCallback } from 'react'
 
-import { useContainer, useRootContainer } from './use-container.mjs'
-
-type InvalidatableToken =
-  | ClassType
-  | InjectionToken<any, any>
-  | BoundInjectionToken<any, any>
-  | FactoryInjectionToken<any, any>
-
-/**
- * Hook that returns a function to invalidate a service by its token.
- *
- * When called, this will:
- * 1. Destroy the current service instance
- * 2. Trigger re-fetch in all components using useService/useSuspenseService for that token
- *
- * @example
- * ```tsx
- * function UserProfile() {
- *   const { data: user } = useService(UserService)
- *   const invalidateUser = useInvalidate(UserService)
- *
- *   const handleRefresh = () => {
- *     invalidateUser() // All components using UserService will re-fetch
- *   }
- *
- *   return (
- *     <div>
- *       <span>{user?.name}</span>
- *       <button onClick={handleRefresh}>Refresh</button>
- *     </div>
- *   )
- * }
- * ```
- */
-export function useInvalidate<T extends InvalidatableToken>(
-  token: T,
-): () => Promise<void>
-
-/**
- * Hook that returns a function to invalidate a service by its token with args.
- *
- * @example
- * ```tsx
- * function UserProfile({ userId }: { userId: string }) {
- *   const args = useMemo(() => ({ userId }), [userId])
- *   const { data: user } = useService(UserToken, args)
- *   const invalidateUser = useInvalidate(UserToken, args)
- *
- *   return (
- *     <div>
- *       <span>{user?.name}</span>
- *       <button onClick={() => invalidateUser()}>Refresh</button>
- *     </div>
- *   )
- * }
- * ```
- */
-export function useInvalidate<T, S extends InjectionTokenSchemaType>(
-  token: InjectionToken<T, S>,
-  args: S extends undefined ? never : unknown,
-): () => Promise<void>
-
-export function useInvalidate(
-  token: InvalidatableToken,
-  args?: unknown,
-): () => Promise<void> {
-  const rootContainer = useRootContainer()
-  const serviceLocator = rootContainer.getServiceLocator()
-
-  return useCallback(async () => {
-    const instanceName = serviceLocator.getInstanceIdentifier(token, args)
-    await serviceLocator.invalidate(instanceName)
-  }, [serviceLocator, token, args])
-}
+import { useContainer } from './use-container.mjs'
 
 /**
  * Hook that returns a function to invalidate a service instance directly.

package/src/hooks/use-optional-service.mts

@@ -155,7 +155,6 @@ export function useOptionalService(
   // useContainer returns ScopedContainer if inside ScopeProvider, otherwise Container
   const container = useContainer()
   const rootContainer = useRootContainer()
-  const serviceLocator = rootContainer.getServiceLocator()
 
   // Try to get the instance synchronously first for better performance
   // This avoids the async loading state when the instance is already cached
@@ -184,13 +183,12 @@ export function useOptionalService(
     useEffect(() => {
       if (argsRef.current !== args) {
         if (JSON.stringify(argsRef.current) === JSON.stringify(args)) {
-          console.log(`WARNING: useOptionalService called with args that look the same but are different instances: ${JSON.stringify(argsRef.current)} !== ${JSON.stringify(args)}!
-          This is likely because you are using not memoized value that is not stable.
-          Please use a memoized value or use a different approach to pass the args.
-          Example:
-          const args = useMemo(() => ({ userId: '123' }), [])
-          return useOptionalService(UserToken, args)
-          `)
+          console.warn(`useOptionalService called with args that look the same but are different instances: ${JSON.stringify(argsRef.current)} !== ${JSON.stringify(args)}!
+This is likely because you are using a value that is not memoized.
+Please use a memoized value or use a different approach to pass the args.
+Example:
+  const args = useMemo(() => ({ userId: '123' }), [])
+  return useOptionalService(UserToken, args)`)
         }
         argsRef.current = args
       }
@@ -206,12 +204,11 @@ export function useOptionalService(
         token as AnyInjectableType,
         args as any,
       )
-
       // Get instance name for event subscription
-      instanceNameRef.current = serviceLocator.getInstanceIdentifier(
-        token as AnyInjectableType,
-        args,
-      )
+      const instanceName = container.calculateInstanceName(token, args)
+      if (instanceName) {
+        instanceNameRef.current = instanceName
+      }
       dispatch({ type: 'success', data: instance })
     } catch (error) {
       // Caught exceptions are treated as errors
@@ -227,42 +224,36 @@ export function useOptionalService(
         dispatch({ type: 'error', error: err })
       }
     }
-  }, [container, serviceLocator, token, args])
+  }, [container, token, args])
 
   // Subscribe to invalidation events
   useEffect(() => {
-    const eventBus = serviceLocator.getEventBus()
+    const eventBus = rootContainer.getEventBus()
     let unsubscribe: (() => void) | undefined
 
     // If we already have a sync instance from initial render, just set up subscription
     // Otherwise, fetch async
     const syncInstance = initialSyncInstanceRef.current
     if (syncInstance) {
-      instanceNameRef.current = serviceLocator.getInstanceIdentifier(
-        token as AnyInjectableType,
-        args,
-      )
-      unsubscribe = eventBus.on(instanceNameRef.current, 'destroy', () => {
-        void fetchService()
-      })
+      const instanceName = container.calculateInstanceName(token, args)
+      if (instanceName) {
+        instanceNameRef.current = instanceName
+        unsubscribe = eventBus.on(instanceName, 'destroy', () => {
+          // Re-fetch when the service is invalidated
+          void fetchService()
+        })
+      }
     } else {
-      void fetchService()
-
-      // Set up subscription after we have the instance name
-      const setupSubscription = () => {
+      void fetchService().then(() => {
         if (instanceNameRef.current) {
           unsubscribe = eventBus.on(instanceNameRef.current, 'destroy', () => {
             // Re-fetch when the service is invalidated
             void fetchService()
           })
         }
-      }
-
-      // Wait a tick for the instance name to be set
-      const timeoutId = setTimeout(setupSubscription, 10)
+      })
 
       return () => {
-        clearTimeout(timeoutId)
         unsubscribe?.()
       }
     }
@@ -270,7 +261,7 @@ export function useOptionalService(
     return () => {
       unsubscribe?.()
     }
-  }, [fetchService, serviceLocator, token, args])
+  }, [fetchService, rootContainer, token, args])
 
   return {
     data: state.status === 'success' ? state.data : undefined,

package/src/hooks/use-service.mts

@@ -105,7 +105,6 @@ export function useService(
   // This automatically handles request-scoped services correctly
   const container = useContainer()
   const rootContainer = useRootContainer()
-  const serviceLocator = rootContainer.getServiceLocator()
 
   // Try to get the instance synchronously first for better performance
   // This avoids the async loading state when the instance is already cached
@@ -131,13 +130,12 @@ export function useService(
     useEffect(() => {
       if (argsRef.current !== args) {
         if (JSON.stringify(argsRef.current) === JSON.stringify(args)) {
-          console.log(`WARNING: useService called with args that look the same but are different instances: ${JSON.stringify(argsRef.current)} !== ${JSON.stringify(args)}!
-          This is likely because you are using not memoized value that is not stable.
-          Please use a memoized value or use a different approach to pass the args.
-          Example:
-          const args = useMemo(() => ({ userId: '123' }), [])
-          return useService(UserToken, args)
-          `)
+          console.warn(`useService called with args that look the same but are different instances: ${JSON.stringify(argsRef.current)} !== ${JSON.stringify(args)}!
+This is likely because you are using a value that is not memoized.
+Please use a memoized value or use a different approach to pass the args.
+Example:
+  const args = useMemo(() => ({ userId: '123' }), [])
+  return useService(UserToken, args)`)
         }
         argsRef.current = args
       }
@@ -146,7 +144,7 @@ export function useService(
 
   // Subscribe to invalidation events
   useEffect(() => {
-    const eventBus = serviceLocator.getEventBus()
+    const eventBus = rootContainer.getEventBus()
     let unsubscribe: (() => void) | undefined
     let isMounted = true
 
@@ -163,22 +161,23 @@ export function useService(
         if (!isMounted) return
 
         // Get instance name for event subscription
-        const instanceName = serviceLocator.getInstanceIdentifier(
-          token as AnyInjectableType,
-          args,
-        )
-        instanceNameRef.current = instanceName
+        const instanceName = container.calculateInstanceName(token, args)
+        if (instanceName) {
+          instanceNameRef.current = instanceName
+        }
 
         dispatch({ type: 'success', data: instance })
 
         // Set up subscription after we have the instance
-        unsubscribe = eventBus.on(instanceName, 'destroy', () => {
-          // Re-fetch when the service is invalidated
-          if (isMounted) {
-            dispatch({ type: 'loading' })
-            void fetchAndSubscribe()
-          }
-        })
+        if (instanceName) {
+          unsubscribe = eventBus.on(instanceName, 'destroy', () => {
+            // Re-fetch when the service is invalidated
+            if (isMounted) {
+              dispatch({ type: 'loading' })
+              void fetchAndSubscribe()
+            }
+          })
+        }
       } catch (error) {
         if (isMounted) {
           dispatch({ type: 'error', error: error as Error })
@@ -190,17 +189,16 @@ export function useService(
     // Otherwise, fetch async
     const syncInstance = initialSyncInstanceRef.current
     if (syncInstance && refetchCounter === 0) {
-      const instanceName = serviceLocator.getInstanceIdentifier(
-        token as AnyInjectableType,
-        args,
-      )
-      instanceNameRef.current = instanceName
-      unsubscribe = eventBus.on(instanceName, 'destroy', () => {
-        if (isMounted) {
-          dispatch({ type: 'loading' })
-          void fetchAndSubscribe()
-        }
-      })
+      const instanceName = container.calculateInstanceName(token, args)
+      if (instanceName) {
+        instanceNameRef.current = instanceName
+        unsubscribe = eventBus.on(instanceName, 'destroy', () => {
+          if (isMounted) {
+            dispatch({ type: 'loading' })
+            void fetchAndSubscribe()
+          }
+        })
+      }
     } else {
       dispatch({ type: 'loading' })
       void fetchAndSubscribe()
@@ -210,7 +208,7 @@ export function useService(
       isMounted = false
       unsubscribe?.()
     }
-  }, [container, serviceLocator, token, args, refetchCounter])
+  }, [container, rootContainer, token, args, refetchCounter])
 
   const refetch = useCallback(() => {
     setRefetchCounter((c) => c + 1)