@navios/di-react 0.8.0 → 0.9.0

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

@@ -1,154 +1,13 @@
-import { Container, Injectable, InjectionToken, Registry } from '@navios/di'
+import { Container, Injectable, Registry } from '@navios/di'
 
 import { act, render, screen, waitFor } from '@testing-library/react'
-import { createElement, useMemo } from 'react'
+import { createElement } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { z } from 'zod/v4'
 
 import { ContainerProvider } from '../../providers/container-provider.mjs'
-import { useInvalidate, useInvalidateInstance } from '../use-invalidate.mjs'
+import { useInvalidateInstance } from '../use-invalidate.mjs'
 import { useService } from '../use-service.mjs'
 
-describe('useInvalidate', () => {
-  let container: Container
-  let registry: Registry
-
-  beforeEach(() => {
-    registry = new Registry()
-    container = new Container(registry)
-  })
-
-  afterEach(async () => {
-    await container.dispose()
-    vi.clearAllMocks()
-  })
-
-  const createWrapper = (children: React.ReactNode) =>
-    createElement(ContainerProvider, { container, children })
-
-  describe('with class tokens', () => {
-    it('should invalidate a service and trigger re-fetch', async () => {
-      let instanceCount = 0
-
-      @Injectable({ registry })
-      class CounterService {
-        public readonly id: number
-
-        constructor() {
-          instanceCount++
-          this.id = instanceCount
-        }
-      }
-
-      let invalidateFn: (() => Promise<void>) | null = null
-
-      function TestComponent() {
-        const { data, isSuccess } = useService(CounterService)
-        const invalidate = useInvalidate(CounterService)
-        invalidateFn = invalidate
-
-        if (!isSuccess) {
-          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
-        }
-
-        return createElement('div', { 'data-testid': 'counter' }, String(data!.id))
-      }
-
-      render(createWrapper(createElement(TestComponent)))
-
-      // Wait for initial load
-      await waitFor(() => {
-        expect(screen.getByTestId('counter')).toBeDefined()
-      })
-
-      expect(screen.getByTestId('counter').textContent).toBe('1')
-
-      // Invalidate the service
-      await act(async () => {
-        await invalidateFn!()
-      })
-
-      // Wait for re-fetch
-      await waitFor(() => {
-        expect(screen.getByTestId('counter').textContent).toBe('2')
-      })
-
-      expect(instanceCount).toBe(2)
-    })
-  })
-
-  describe('with injection tokens and args', () => {
-    it('should invalidate a service with specific args', async () => {
-      let instanceCount = 0
-      const instances = new Map<string, number>()
-
-      const UserSchema = z.object({ userId: z.string() })
-      const UserToken = InjectionToken.create<
-        { userId: string; instanceId: number },
-        typeof UserSchema
-      >('User', UserSchema)
-
-      @Injectable({ registry, token: UserToken })
-      class _UserService {
-        public userId: string
-        public instanceId: number
-
-        constructor(args: z.infer<typeof UserSchema>) {
-          this.userId = args.userId
-          const currentCount = instances.get(args.userId) ?? 0
-          instanceCount++
-          this.instanceId = instanceCount
-          instances.set(args.userId, this.instanceId)
-        }
-      }
-
-      let invalidateUser1: (() => Promise<void>) | null = null
-
-      function TestComponent() {
-        const args1 = useMemo(() => ({ userId: 'user1' }), [])
-        const args2 = useMemo(() => ({ userId: 'user2' }), [])
-
-        const { data: user1, isSuccess: isSuccess1 } = useService(UserToken, args1)
-        const { data: user2, isSuccess: isSuccess2 } = useService(UserToken, args2)
-        const invalidate1 = useInvalidate(UserToken, args1)
-        invalidateUser1 = invalidate1
-
-        if (!isSuccess1 || !isSuccess2) {
-          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
-        }
-
-        return createElement('div', null, [
-          createElement('span', { key: '1', 'data-testid': 'user1' }, String(user1!.instanceId)),
-          createElement('span', { key: '2', 'data-testid': 'user2' }, String(user2!.instanceId)),
-        ])
-      }
-
-      render(createWrapper(createElement(TestComponent)))
-
-      await waitFor(() => {
-        expect(screen.getByTestId('user1')).toBeDefined()
-        expect(screen.getByTestId('user2')).toBeDefined()
-      })
-
-      expect(screen.getByTestId('user1').textContent).toBe('1')
-      expect(screen.getByTestId('user2').textContent).toBe('2')
-
-      // Invalidate only user1
-      await act(async () => {
-        await invalidateUser1!()
-      })
-
-      // Wait for user1 to be re-fetched
-      await waitFor(() => {
-        expect(screen.getByTestId('user1').textContent).toBe('3')
-      })
-
-      // user2 should still be the same
-      expect(screen.getByTestId('user2').textContent).toBe('2')
-    })
-  })
-})
-
 describe('useInvalidateInstance', () => {
   let container: Container
   let registry: Registry
@@ -179,7 +38,8 @@ describe('useInvalidateInstance', () => {
       }
     }
 
-    let invalidateInstanceFn: ((instance: unknown) => Promise<void>) | null = null
+    let invalidateInstanceFn: ((instance: unknown) => Promise<void>) | null =
+      null
     let currentInstance: CounterService | undefined
 
     function TestComponent() {
@@ -192,7 +52,11 @@ describe('useInvalidateInstance', () => {
         return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
       }
 
-      return createElement('div', { 'data-testid': 'counter' }, String(data!.id))
+      return createElement(
+        'div',
+        { 'data-testid': 'counter' },
+        String(data!.id),
+      )
     }
 
     render(createWrapper(createElement(TestComponent)))

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
@@ -206,12 +205,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 +225,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 +262,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
@@ -146,7 +145,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 +162,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 +190,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 +209,7 @@ export function useService(
       isMounted = false
       unsubscribe?.()
     }
-  }, [container, serviceLocator, token, args, refetchCounter])
+  }, [container, rootContainer, token, args, refetchCounter])
 
   const refetch = useCallback(() => {
     setRefetchCounter((c) => c + 1)

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

@@ -1,7 +1,7 @@
 import type {
-  AnyInjectableType,
   BoundInjectionToken,
   ClassType,
+  Container,
   Factorable,
   FactoryInjectionToken,
   InjectionToken,
@@ -9,6 +9,7 @@ import type {
 } from '@navios/di'
 import type { z, ZodType } from 'zod/v4'
 
+
 import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react'
 
 import type { Join, UnionToArray } from '../types.mjs'
@@ -53,13 +54,11 @@ function getCache(container: object): Map<string, CacheEntry<any>> {
  */
 function setupInvalidationSubscription(
   entry: CacheEntry<any>,
-  serviceLocator: ReturnType<
-    import('@navios/di').Container['getServiceLocator']
-  >,
+  rootContainer: Container,
 ): void {
   if (entry.unsubscribe || !entry.instanceName) return
 
-  const eventBus = serviceLocator.getEventBus()
+  const eventBus = rootContainer.getEventBus()
   entry.unsubscribe = eventBus.on(entry.instanceName, 'destroy', () => {
     // Clear cache and notify subscribers to re-fetch
     entry.result = undefined
@@ -113,7 +112,6 @@ export function useSuspenseService(
   // useContainer returns ScopedContainer if inside ScopeProvider, otherwise Container
   const container = useContainer()
   const rootContainer = useRootContainer()
-  const serviceLocator = rootContainer.getServiceLocator()
   const cache = getCache(container)
   const cacheKey = getCacheKey(token, args)
   const entryRef = useRef<CacheEntry<any> | null>(null)
@@ -141,6 +139,7 @@ export function useSuspenseService(
     // This avoids suspense when the instance is already cached
     const syncInstance = container.tryGetSync(token, args)
 
+    const instanceName = container.calculateInstanceName(token, args)
     const entry: CacheEntry<any> = {
       promise: null,
       result: syncInstance ?? undefined,
@@ -148,9 +147,7 @@ export function useSuspenseService(
       status: syncInstance ? 'resolved' : 'pending',
       version: 0,
       subscribers: new Set(),
-      instanceName: syncInstance
-        ? serviceLocator.getInstanceIdentifier(token as AnyInjectableType, args)
-        : null,
+      instanceName,
       unsubscribe: undefined,
     }
     cache.set(cacheKey, entry)
@@ -170,13 +167,9 @@ export function useSuspenseService(
       .then((instance: any) => {
         currentEntry.result = instance
         currentEntry.status = 'resolved'
-        currentEntry.instanceName = serviceLocator.getInstanceIdentifier(
-          token as AnyInjectableType,
-          args,
-        )
 
         // Subscribe to invalidation events if not already subscribed
-        setupInvalidationSubscription(currentEntry, serviceLocator)
+        setupInvalidationSubscription(currentEntry, rootContainer)
 
         // Notify subscribers
         currentEntry.subscribers.forEach((callback) => callback())
@@ -189,7 +182,7 @@ export function useSuspenseService(
       })
 
     return currentEntry.promise
-  }, [container, serviceLocator, token, args])
+  }, [container, rootContainer, token, args])
 
   // Subscribe to cache changes
   const subscribe = useCallback(
@@ -219,9 +212,9 @@ export function useSuspenseService(
       currentEntry.instanceName &&
       !currentEntry.unsubscribe
     ) {
-      setupInvalidationSubscription(currentEntry, serviceLocator)
+      setupInvalidationSubscription(currentEntry, rootContainer)
     }
-  }, [serviceLocator, entry])
+  }, [rootContainer, entry])
 
   // Start fetching if not already
   if (entry.status === 'pending' && !entry.promise) {

package/src/providers/__tests__/scope-provider.spec.mts

@@ -4,8 +4,12 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { createElement } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import {
+  useScope,
+  useScopedContainer,
+  useScopeMetadata,
+} from '../../hooks/use-scope.mjs'
 import { useService } from '../../hooks/use-service.mjs'
-import { useScope, useScopeMetadata, useScopedContainer } from '../../hooks/use-scope.mjs'
 import { ContainerProvider } from '../container-provider.mjs'
 import { ScopeProvider } from '../scope-provider.mjs'
 
@@ -267,7 +271,6 @@ describe('ScopeProvider', () => {
             {
               scopeId: 'test-scope',
               metadata: { userId: '123', role: 'admin' },
-              priority: 200,
             },
             createElement(TestComponent),
           ),

package/src/providers/scope-provider.mts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
 import type { ScopedContainer } from '@navios/di'
+import type { ReactNode } from 'react'
 
 import { useContext, useEffect, useId, useRef } from 'react'
 import { jsx } from 'react/jsx-runtime'
@@ -17,11 +17,6 @@ export interface ScopeProviderProps {
    * Can be used to pass data like user info, request headers, etc.
    */
   metadata?: Record<string, unknown>
-  /**
-   * Priority for service resolution. Higher priority scopes take precedence.
-   * @default 100
-   */
-  priority?: number
   children: ReactNode
 }
 
@@ -50,7 +45,6 @@ export interface ScopeProviderProps {
 export function ScopeProvider({
   scopeId,
   metadata,
-  priority = 100,
   children,
 }: ScopeProviderProps) {
   const container = useContext(ContainerContext)
@@ -70,7 +64,6 @@ export function ScopeProvider({
       scopedContainerRef.current = container.beginRequest(
         effectiveScopeId,
         metadata,
-        priority,
       )
     }
   }