@navios/di-react 0.1.0 → 0.2.0

package/src/hooks/use-service.mts

@@ -9,12 +9,11 @@ import type {
 } from '@navios/di'
 import type { z, ZodType } from 'zod/v4'
 
-import { useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react'
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 
 import type { Join, UnionToArray } from '../types.mjs'
 
-import { ScopeContext } from '../providers/scope-provider.mjs'
-import { useContainer } from './use-container.mjs'
+import { useContainer, useRootContainer } from './use-container.mjs'
 
 type ServiceState<T> =
   | { status: 'idle' }
@@ -102,10 +101,28 @@ export function useService(
     | FactoryInjectionToken<any, any>,
   args?: unknown,
 ): UseServiceResult<any> {
+  // useContainer returns ScopedContainer if inside ScopeProvider, otherwise Container
+  // This automatically handles request-scoped services correctly
   const container = useContainer()
-  const serviceLocator = container.getServiceLocator()
-  const scopeId = useContext(ScopeContext)
-  const [state, dispatch] = useReducer(serviceReducer, { status: 'idle' })
+  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
+  // We use a ref to track this so it doesn't cause effect re-runs
+  const initialSyncInstanceRef = useRef<any>(undefined)
+  const isFirstRenderRef = useRef(true)
+
+  if (isFirstRenderRef.current) {
+    initialSyncInstanceRef.current = container.tryGetSync(token, args)
+    isFirstRenderRef.current = false
+  }
+
+  const initialState: ServiceState<any> = initialSyncInstanceRef.current
+    ? { status: 'success', data: initialSyncInstanceRef.current }
+    : { status: 'idle' }
+
+  const [state, dispatch] = useReducer(serviceReducer, initialState)
   const instanceNameRef = useRef<string | null>(null)
   const [refetchCounter, setRefetchCounter] = useState(0)
 
@@ -136,15 +153,7 @@ export function useService(
     // Fetch the service and set up subscription
     const fetchAndSubscribe = async () => {
       try {
-        // Set the correct request context before getting the instance
-        // This ensures request-scoped services are resolved in the correct scope
-        if (scopeId) {
-          const requestContexts = serviceLocator.getRequestContexts()
-          if (requestContexts.has(scopeId)) {
-            container.setCurrentRequestContext(scopeId)
-          }
-        }
-
+        // The container (either ScopedContainer or Container) handles resolution correctly
         const instance = await container.get(
           // @ts-expect-error - token is valid
           token as AnyInjectableType,
@@ -177,14 +186,31 @@ export function useService(
       }
     }
 
-    dispatch({ type: 'loading' })
-    void fetchAndSubscribe()
+    // If we already have a sync instance from initial render, just set up subscription
+    // 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()
+        }
+      })
+    } else {
+      dispatch({ type: 'loading' })
+      void fetchAndSubscribe()
+    }
 
     return () => {
       isMounted = false
       unsubscribe?.()
     }
-  }, [container, serviceLocator, token, args, scopeId, refetchCounter])
+  }, [container, serviceLocator, token, args, refetchCounter])
 
   const refetch = useCallback(() => {
     setRefetchCounter((c) => c + 1)

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

@@ -13,7 +13,7 @@ import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react'
 
 import type { Join, UnionToArray } from '../types.mjs'
 
-import { useContainer } from './use-container.mjs'
+import { useContainer, useRootContainer } from './use-container.mjs'
 
 // Cache entry for suspense
 interface CacheEntry<T> {
@@ -47,6 +47,30 @@ function getCache(container: object): Map<string, CacheEntry<any>> {
   return cache
 }
 
+/**
+ * Sets up invalidation subscription for a cache entry if not already subscribed.
+ * When the service is destroyed, clears the cache and notifies subscribers.
+ */
+function setupInvalidationSubscription(
+  entry: CacheEntry<any>,
+  serviceLocator: ReturnType<
+    import('@navios/di').Container['getServiceLocator']
+  >,
+): void {
+  if (entry.unsubscribe || !entry.instanceName) return
+
+  const eventBus = serviceLocator.getEventBus()
+  entry.unsubscribe = eventBus.on(entry.instanceName, 'destroy', () => {
+    // Clear cache and notify subscribers to re-fetch
+    entry.result = undefined
+    entry.error = undefined
+    entry.status = 'pending'
+    entry.promise = null
+    // Notify all subscribers
+    entry.subscribers.forEach((callback) => callback())
+  })
+}
+
 // #1 Simple class
 export function useSuspenseService<T extends ClassType>(
   token: T,
@@ -86,8 +110,10 @@ export function useSuspenseService(
     | FactoryInjectionToken<any, any>,
   args?: unknown,
 ): any {
+  // useContainer returns ScopedContainer if inside ScopeProvider, otherwise Container
   const container = useContainer()
-  const serviceLocator = container.getServiceLocator()
+  const rootContainer = useRootContainer()
+  const serviceLocator = rootContainer.getServiceLocator()
   const cache = getCache(container)
   const cacheKey = getCacheKey(token, args)
   const entryRef = useRef<CacheEntry<any> | null>(null)
@@ -111,14 +137,20 @@ export function useSuspenseService(
 
   // Initialize or get cache entry
   if (!cache.has(cacheKey)) {
+    // Try to get the instance synchronously first for better performance
+    // This avoids suspense when the instance is already cached
+    const syncInstance = container.tryGetSync(token, args)
+
     const entry: CacheEntry<any> = {
       promise: null,
-      result: undefined,
+      result: syncInstance ?? undefined,
       error: undefined,
-      status: 'pending',
+      status: syncInstance ? 'resolved' : 'pending',
       version: 0,
       subscribers: new Set(),
-      instanceName: null,
+      instanceName: syncInstance
+        ? serviceLocator.getInstanceIdentifier(token as AnyInjectableType, args)
+        : null,
       unsubscribe: undefined,
     }
     cache.set(cacheKey, entry)
@@ -144,22 +176,7 @@ export function useSuspenseService(
         )
 
         // Subscribe to invalidation events if not already subscribed
-        if (!currentEntry.unsubscribe && currentEntry.instanceName) {
-          const eventBus = serviceLocator.getEventBus()
-          currentEntry.unsubscribe = eventBus.on(
-            currentEntry.instanceName,
-            'destroy',
-            () => {
-              // Clear cache and notify subscribers to re-fetch
-              currentEntry.result = undefined
-              currentEntry.error = undefined
-              currentEntry.status = 'pending'
-              currentEntry.promise = null
-              // Notify all subscribers
-              currentEntry.subscribers.forEach((callback) => callback())
-            },
-          )
-        }
+        setupInvalidationSubscription(currentEntry, serviceLocator)
 
         // Notify subscribers
         currentEntry.subscribers.forEach((callback) => callback())
@@ -193,16 +210,18 @@ export function useSuspenseService(
   // Use sync external store to track cache state
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
 
-  // Cleanup subscription on unmount
+  // Set up subscription for sync instances that don't have one yet
   useEffect(() => {
-    return () => {
-      // If there are no subscribers, unsubscribe and delete the cache entry
-      if (entry.subscribers.size === 0) {
-        entry.unsubscribe?.()
-        cache.delete(cacheKey)
-      }
+    const currentEntry = entryRef.current
+    if (
+      currentEntry &&
+      currentEntry.status === 'resolved' &&
+      currentEntry.instanceName &&
+      !currentEntry.unsubscribe
+    ) {
+      setupInvalidationSubscription(currentEntry, serviceLocator)
     }
-  }, [entry])
+  }, [serviceLocator, entry])
 
   // Start fetching if not already
   if (entry.status === 'pending' && !entry.promise) {

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

@@ -5,7 +5,7 @@ import { createElement } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useService } from '../../hooks/use-service.mjs'
-import { useScope } from '../../hooks/use-scope.mjs'
+import { useScope, useScopeMetadata, useScopedContainer } from '../../hooks/use-scope.mjs'
 import { ContainerProvider } from '../container-provider.mjs'
 import { ScopeProvider } from '../scope-provider.mjs'
 
@@ -276,5 +276,88 @@ describe('ScopeProvider', () => {
 
       expect(scopeValue).toBe('test-scope')
     })
+
+    it('should provide metadata via useScopeMetadata', () => {
+      let userId: string | undefined
+      let role: string | undefined
+      let missing: string | undefined
+
+      function TestComponent() {
+        userId = useScopeMetadata<string>('userId')
+        role = useScopeMetadata<string>('role')
+        missing = useScopeMetadata<string>('nonexistent')
+        return createElement('div', { 'data-testid': 'test' }, 'Test')
+      }
+
+      render(
+        createWrapper(
+          createElement(
+            ScopeProvider,
+            // @ts-expect-error - props are not typed
+            {
+              scopeId: 'test-scope',
+              metadata: { userId: '123', role: 'admin' },
+            },
+            createElement(TestComponent),
+          ),
+        ),
+      )
+
+      expect(userId).toBe('123')
+      expect(role).toBe('admin')
+      expect(missing).toBeUndefined()
+    })
+
+    it('should return undefined for useScopeMetadata outside ScopeProvider', () => {
+      let userId: string | undefined = 'initial'
+
+      function TestComponent() {
+        userId = useScopeMetadata<string>('userId')
+        return createElement('div', { 'data-testid': 'test' }, 'Test')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      expect(userId).toBeUndefined()
+    })
+  })
+
+  describe('useScopedContainer', () => {
+    it('should return null when not inside ScopeProvider', () => {
+      let scopedContainer: unknown = 'not-set'
+
+      function TestComponent() {
+        scopedContainer = useScopedContainer()
+        return createElement('div', { 'data-testid': 'test' }, 'Test')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      expect(scopedContainer).toBeNull()
+    })
+
+    it('should return ScopedContainer when inside ScopeProvider', () => {
+      let scopedContainer: unknown = null
+
+      function TestComponent() {
+        scopedContainer = useScopedContainer()
+        return createElement('div', { 'data-testid': 'test' }, 'Test')
+      }
+
+      render(
+        createWrapper(
+          createElement(
+            ScopeProvider,
+            // @ts-expect-error - props are not typed
+            { scopeId: 'test-scope' },
+            createElement(TestComponent),
+          ),
+        ),
+      )
+
+      expect(scopedContainer).not.toBeNull()
+      expect(typeof (scopedContainer as any).getRequestId).toBe('function')
+      expect((scopedContainer as any).getRequestId()).toBe('test-scope')
+    })
   })
 })

package/src/providers/container-provider.mts

@@ -1,7 +1,7 @@
 import type { Container } from '@navios/di'
 import type { ReactNode } from 'react'
 
-import { createElement } from 'react'
+import { jsx } from 'react/jsx-runtime'
 
 import { ContainerContext } from './context.mjs'
 
@@ -14,9 +14,5 @@ export function ContainerProvider({
   container,
   children,
 }: ContainerProviderProps) {
-  return createElement(
-    ContainerContext.Provider,
-    { value: container },
-    children,
-  )
+  return jsx(ContainerContext.Provider, { value: container, children })
 }

package/src/providers/context.mts

@@ -1,5 +1,15 @@
 import { createContext } from 'react'
 
-import type { Container } from '@navios/di'
+import type { Container, ScopedContainer } from '@navios/di'
 
+/**
+ * Context for the root Container.
+ * This is set by ContainerProvider and provides the base container.
+ */
 export const ContainerContext = createContext<Container | null>(null)
+
+/**
+ * Context for the current ScopedContainer (if inside a ScopeProvider).
+ * This allows nested components to access request-scoped services.
+ */
+export const ScopedContainerContext = createContext<ScopedContainer | null>(null)

package/src/providers/index.mts

@@ -1,5 +1,5 @@
-export { ContainerContext } from './context.mjs'
+export { ContainerContext, ScopedContainerContext } from './context.mjs'
 export { ContainerProvider } from './container-provider.mjs'
 export type { ContainerProviderProps } from './container-provider.mjs'
-export { ScopeContext, ScopeProvider } from './scope-provider.mjs'
+export { ScopeProvider } from './scope-provider.mjs'
 export type { ScopeProviderProps } from './scope-provider.mjs'

package/src/providers/scope-provider.mts

@@ -1,14 +1,10 @@
 import type { ReactNode } from 'react'
+import type { ScopedContainer } from '@navios/di'
 
-import { createContext, createElement, useEffect, useId, useRef } from 'react'
+import { useContext, useEffect, useId, useRef } from 'react'
+import { jsx } from 'react/jsx-runtime'
 
-import { useContainer } from '../hooks/use-container.mjs'
-
-/**
- * Context for the current scope ID.
- * This allows nested components to access the current request scope.
- */
-export const ScopeContext = createContext<string | null>(null)
+import { ContainerContext, ScopedContainerContext } from './context.mjs'
 
 export interface ScopeProviderProps {
   /**
@@ -45,8 +41,8 @@ export interface ScopeProviderProps {
  * ```tsx
  * // Each row gets its own RowStateService instance
  * {rows.map(row => (
- *   <ScopeProvider key={row.id} scopeId={row.id}>
- *     <TableRow data={row} />
+ *   <ScopeProvider key={row.id} scopeId={row.id} metadata={{ rowData: row }}>
+ *     <TableRow />
  *   </ScopeProvider>
  * ))}
  * ```
@@ -57,32 +53,45 @@ export function ScopeProvider({
   priority = 100,
   children,
 }: ScopeProviderProps) {
-  const container = useContainer()
+  const container = useContext(ContainerContext)
+  if (!container) {
+    throw new Error('ScopeProvider must be used within a ContainerProvider')
+  }
+
   const generatedId = useId()
   const effectiveScopeId = scopeId ?? generatedId
-  const isInitializedRef = useRef(false)
+  const scopedContainerRef = useRef<ScopedContainer | null>(null)
 
-  // Begin request context on first render only
+  // Create ScopedContainer on first render only
   // We use a ref to track initialization to handle React StrictMode double-renders
-  if (!isInitializedRef.current) {
-    // Check if context already exists (e.g., from StrictMode double render)
-    const existingContexts = container.getServiceLocator().getRequestContexts()
-    if (!existingContexts.has(effectiveScopeId)) {
-      container.beginRequest(effectiveScopeId, metadata, priority)
+  if (!scopedContainerRef.current) {
+    // Check if this request ID already exists (e.g., from StrictMode double render)
+    if (!container.hasActiveRequest(effectiveScopeId)) {
+      scopedContainerRef.current = container.beginRequest(
+        effectiveScopeId,
+        metadata,
+        priority,
+      )
     }
-    isInitializedRef.current = true
   }
 
   // End request context on unmount
   useEffect(() => {
+    const scopedContainer = scopedContainerRef.current
     return () => {
-      void container.endRequest(effectiveScopeId)
+      if (scopedContainer) {
+        void scopedContainer.endRequest()
+      }
     }
-  }, [container, effectiveScopeId])
+  }, [])
+
+  // If we don't have a scoped container (shouldn't happen normally), don't render
+  if (!scopedContainerRef.current) {
+    return null
+  }
 
-  return createElement(
-    ScopeContext.Provider,
-    { value: effectiveScopeId },
+  return jsx(ScopedContainerContext.Provider, {
+    value: scopedContainerRef.current,
     children,
-  )
+  })
 }

package/{tsup.config.mts → tsdown.config.mts}

@@ -1,13 +1,14 @@
-import { defineConfig } from 'tsup'
+import { defineConfig } from 'tsdown'
 
 export default defineConfig({
   entry: ['src/index.mts'],
   outDir: 'lib',
   format: ['esm', 'cjs'],
   clean: true,
-  treeshake: 'smallest',
+  treeshake: true,
   sourcemap: true,
   platform: 'browser',
-  experimentalDts: true,
+  dts: true,
+  target: 'es2022',
   external: ['react', '@navios/di'],
 })