@abdokouta/ts-container-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Refine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/contexts/container.context.ts
+var ContainerContext = react.createContext(null);
+ContainerContext.displayName = "ContainerContext";
+function ContainerProvider({ context, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ContainerContext.Provider, { value: context, children });
+}
+function useContainer() {
+  const context = react.useContext(ContainerContext);
+  if (!context) {
+    throw new Error(
+      "useContainer() must be used within a <ContainerProvider>. Wrap your component tree with <ContainerProvider context={app}>."
+    );
+  }
+  return context;
+}
+function useInject(token) {
+  const container = useContainer();
+  return react.useMemo(() => container.get(token), [container, token]);
+}
+function useOptionalInject(token) {
+  const container = useContainer();
+  return react.useMemo(() => container.getOptional(token), [container, token]);
+}
+
+exports.ContainerContext = ContainerContext;
+exports.ContainerProvider = ContainerProvider;
+exports.useContainer = useContainer;
+exports.useInject = useInject;
+exports.useOptionalInject = useOptionalInject;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/container.context.ts","../src/providers/container.provider.tsx","../src/hooks/use-container.hook.ts","../src/hooks/use-inject.hook.ts","../src/hooks/use-optional-inject.hook.ts"],"names":["createContext","useContext","useMemo"],"mappings":";;;;;;AAkBO,IAAM,gBAAA,GAAmBA,oBAAwC,IAAI;AAE5E,gBAAA,CAAiB,WAAA,GAAc,kBAAA;ACUxB,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,QAAA,EAAS,EAA2B;AAC/E,EAAA,sCACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;ACJO,SAAS,YAAA,GAAkC;AAChD,EAAA,MAAM,OAAA,GAAUC,iBAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,OAAO,OAAA;AACT;ACFO,SAAS,UAAmB,KAAA,EAA6B;AAC9D,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,OAAOC,aAAA,CAAQ,MAAM,SAAA,CAAU,GAAA,CAAO,KAAK,CAAA,EAAG,CAAC,SAAA,EAAW,KAAK,CAAC,CAAA;AAClE;ACNO,SAAS,kBAA2B,KAAA,EAAyC;AAClF,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,OAAOA,aAAAA,CAAQ,MAAM,SAAA,CAAU,WAAA,CAAe,KAAK,CAAA,EAAG,CAAC,SAAA,EAAW,KAAK,CAAC,CAAA;AAC1E","file":"index.cjs","sourcesContent":["/**\n * @fileoverview React context for the DI container.\n *\n * Holds a `ContainerResolver` reference that React hooks use to\n * resolve providers. The resolver is provided by `<ContainerProvider>`.\n *\n * @module contexts/context\n */\n\nimport { createContext } from 'react';\nimport type { ContainerResolver } from '@abdokouta/ts-container';\n\n/**\n * React context that holds the container resolver.\n *\n * `null` by default — must be provided by `ContainerProvider`.\n * Using `useInject()` outside of a `ContainerProvider` will throw.\n */\nexport const ContainerContext = createContext<ContainerResolver | null>(null);\n\nContainerContext.displayName = 'ContainerContext';\n","/**\n * @fileoverview ContainerProvider — React component that provides the DI container.\n *\n * Wrap your application (or a subtree) with `<ContainerProvider>` to make\n * the DI container available to all child components via `useInject()`.\n *\n * @module providers/provider\n */\n\nimport { ContainerContext } from '@/contexts/container.context';\nimport type { ContainerProviderProps } from '@/interfaces/container-provider-props.interface';\n\n/**\n * Provides the DI container to the React component tree.\n *\n * @example\n * ```tsx\n * import { ContainerProvider } from '@abdokouta/ts-container-react';\n * import { ApplicationContext } from '@abdokouta/ts-application';\n * import { AppModule } from './app.module';\n *\n * const app = await ApplicationContext.create(AppModule);\n *\n * ReactDOM.createRoot(document.getElementById('root')!).render(\n *   <ContainerProvider context={app}>\n *     <App />\n *   </ContainerProvider>\n * );\n * ```\n */\nexport function ContainerProvider({ context, children }: ContainerProviderProps) {\n  return (\n    <ContainerContext.Provider value={context}>\n      {children}\n    </ContainerContext.Provider>\n  );\n}\n","/**\n * @fileoverview useContainer hook — access the raw ContainerResolver.\n *\n * @module hooks/use-container\n */\n\nimport { useContext } from 'react';\nimport type { ContainerResolver } from '@abdokouta/ts-container';\nimport { ContainerContext } from '@/contexts/container.context';\n\n/**\n * Get the container resolver from React context.\n *\n * Returns the `ContainerResolver` provided by `<ContainerProvider>`.\n * Useful when you need direct access to `has()` or other resolver methods.\n *\n * For most cases, prefer `useInject()` instead.\n *\n * @returns The ContainerResolver instance\n * @throws Error if used outside of `<ContainerProvider>`\n *\n * @example\n * ```typescript\n * import { useContainer } from '@pixielity/react';\n *\n * function DebugPanel() {\n *   const container = useContainer();\n *   const hasCache = container.has(CacheManager);\n *   return <div>Cache available: {String(hasCache)}</div>;\n * }\n * ```\n */\nexport function useContainer(): ContainerResolver {\n  const context = useContext(ContainerContext);\n\n  if (!context) {\n    throw new Error(\n      'useContainer() must be used within a <ContainerProvider>. ' +\n      'Wrap your component tree with <ContainerProvider context={app}>.',\n    );\n  }\n\n  return context;\n}\n","/**\n * @fileoverview useInject hook — resolve a provider from the DI container.\n *\n * This is the primary hook for accessing services in React components.\n *\n * @module hooks/use-inject\n */\n\nimport { useMemo } from 'react';\nimport type { InjectionToken } from '@abdokouta/ts-container';\nimport { useContainer } from './use-container.hook';\n\n/**\n * Resolve a provider from the DI container.\n *\n * The resolved instance is memoized — it won't change between renders\n * unless the container or token changes.\n *\n * @typeParam T - The type of the resolved provider\n * @param token - The injection token (class, string, or symbol)\n * @returns The resolved provider instance\n * @throws Error if the provider is not found or if used outside `<ContainerProvider>`\n *\n * @example\n * ```typescript\n * import { useInject } from '@pixielity/react';\n *\n * // Inject by class\n * function UserProfile() {\n *   const userService = useInject(UserService);\n *   const user = userService.getUser('123');\n *   return <div>{user.name}</div>;\n * }\n *\n * // Inject by symbol token\n * function CacheStatus() {\n *   const config = useInject<CacheConfig>(CACHE_CONFIG);\n *   return <div>Default store: {config.default}</div>;\n * }\n * ```\n */\nexport function useInject<T = any>(token: InjectionToken<T>): T {\n  const container = useContainer();\n  return useMemo(() => container.get<T>(token), [container, token]);\n}\n","/**\n * @fileoverview useOptionalInject hook — optionally resolve a provider.\n *\n * Like `useInject()`, but returns `undefined` instead of throwing\n * if the provider is not found.\n *\n * @module hooks/use-optional-inject\n */\n\nimport { useMemo } from 'react';\nimport type { InjectionToken } from '@abdokouta/ts-container';\nimport { useContainer } from './use-container.hook';\n\n/**\n * Optionally resolve a provider from the DI container.\n *\n * Returns `undefined` if the provider is not found, instead of throwing.\n * Useful for optional dependencies that may or may not be configured.\n *\n * @typeParam T - The type of the resolved provider\n * @param token - The injection token (class, string, or symbol)\n * @returns The resolved instance or `undefined`\n *\n * @example\n * ```typescript\n * import { useOptionalInject } from '@pixielity/react';\n *\n * function Analytics() {\n *   const tracker = useOptionalInject(AnalyticsService);\n *\n *   if (!tracker) {\n *     return null; // Analytics not configured\n *   }\n *\n *   return <div>Tracking enabled</div>;\n * }\n * ```\n */\nexport function useOptionalInject<T = any>(token: InjectionToken<T>): T | undefined {\n  const container = useContainer();\n  return useMemo(() => container.getOptional<T>(token), [container, token]);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import react__default from 'react';
+import { ContainerResolver, InjectionToken } from '@abdokouta/ts-container';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * React context that holds the container resolver.
+ *
+ * `null` by default — must be provided by `ContainerProvider`.
+ * Using `useInject()` outside of a `ContainerProvider` will throw.
+ */
+declare const ContainerContext: react.Context<ContainerResolver | null>;
+
+/**
+ * @fileoverview ContainerProviderProps — props for the ContainerProvider component.
+ *
+ * @module interfaces/container-provider-props
+ */
+
+/**
+ * Props for the `<ContainerProvider>` component.
+ *
+ * @example
+ * ```tsx
+ * <ContainerProvider context={app}>
+ *   <App />
+ * </ContainerProvider>
+ * ```
+ */
+interface ContainerProviderProps {
+    /**
+     * The container resolver (typically an ApplicationContext from `@pixielity/application`).
+     * Must implement `get()`, `getOptional()`, and `has()`.
+     */
+    context: ContainerResolver;
+    /**
+   * Child components that will have access to the container.
+   */
+    children: react__default.ReactNode;
+}
+
+/**
+ * Provides the DI container to the React component tree.
+ *
+ * @example
+ * ```tsx
+ * import { ContainerProvider } from '@abdokouta/ts-container-react';
+ * import { ApplicationContext } from '@abdokouta/ts-application';
+ * import { AppModule } from './app.module';
+ *
+ * const app = await ApplicationContext.create(AppModule);
+ *
+ * ReactDOM.createRoot(document.getElementById('root')!).render(
+ *   <ContainerProvider context={app}>
+ *     <App />
+ *   </ContainerProvider>
+ * );
+ * ```
+ */
+declare function ContainerProvider({ context, children }: ContainerProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @fileoverview useContainer hook — access the raw ContainerResolver.
+ *
+ * @module hooks/use-container
+ */
+
+/**
+ * Get the container resolver from React context.
+ *
+ * Returns the `ContainerResolver` provided by `<ContainerProvider>`.
+ * Useful when you need direct access to `has()` or other resolver methods.
+ *
+ * For most cases, prefer `useInject()` instead.
+ *
+ * @returns The ContainerResolver instance
+ * @throws Error if used outside of `<ContainerProvider>`
+ *
+ * @example
+ * ```typescript
+ * import { useContainer } from '@pixielity/react';
+ *
+ * function DebugPanel() {
+ *   const container = useContainer();
+ *   const hasCache = container.has(CacheManager);
+ *   return <div>Cache available: {String(hasCache)}</div>;
+ * }
+ * ```
+ */
+declare function useContainer(): ContainerResolver;
+
+/**
+ * @fileoverview useInject hook — resolve a provider from the DI container.
+ *
+ * This is the primary hook for accessing services in React components.
+ *
+ * @module hooks/use-inject
+ */
+
+/**
+ * Resolve a provider from the DI container.
+ *
+ * The resolved instance is memoized — it won't change between renders
+ * unless the container or token changes.
+ *
+ * @typeParam T - The type of the resolved provider
+ * @param token - The injection token (class, string, or symbol)
+ * @returns The resolved provider instance
+ * @throws Error if the provider is not found or if used outside `<ContainerProvider>`
+ *
+ * @example
+ * ```typescript
+ * import { useInject } from '@pixielity/react';
+ *
+ * // Inject by class
+ * function UserProfile() {
+ *   const userService = useInject(UserService);
+ *   const user = userService.getUser('123');
+ *   return <div>{user.name}</div>;
+ * }
+ *
+ * // Inject by symbol token
+ * function CacheStatus() {
+ *   const config = useInject<CacheConfig>(CACHE_CONFIG);
+ *   return <div>Default store: {config.default}</div>;
+ * }
+ * ```
+ */
+declare function useInject<T = any>(token: InjectionToken<T>): T;
+
+/**
+ * @fileoverview useOptionalInject hook — optionally resolve a provider.
+ *
+ * Like `useInject()`, but returns `undefined` instead of throwing
+ * if the provider is not found.
+ *
+ * @module hooks/use-optional-inject
+ */
+
+/**
+ * Optionally resolve a provider from the DI container.
+ *
+ * Returns `undefined` if the provider is not found, instead of throwing.
+ * Useful for optional dependencies that may or may not be configured.
+ *
+ * @typeParam T - The type of the resolved provider
+ * @param token - The injection token (class, string, or symbol)
+ * @returns The resolved instance or `undefined`
+ *
+ * @example
+ * ```typescript
+ * import { useOptionalInject } from '@pixielity/react';
+ *
+ * function Analytics() {
+ *   const tracker = useOptionalInject(AnalyticsService);
+ *
+ *   if (!tracker) {
+ *     return null; // Analytics not configured
+ *   }
+ *
+ *   return <div>Tracking enabled</div>;
+ * }
+ * ```
+ */
+declare function useOptionalInject<T = any>(token: InjectionToken<T>): T | undefined;
+
+export { ContainerContext, ContainerProvider, type ContainerProviderProps, useContainer, useInject, useOptionalInject };

package/dist/index.d.ts

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import react__default from 'react';
+import { ContainerResolver, InjectionToken } from '@abdokouta/ts-container';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * React context that holds the container resolver.
+ *
+ * `null` by default — must be provided by `ContainerProvider`.
+ * Using `useInject()` outside of a `ContainerProvider` will throw.
+ */
+declare const ContainerContext: react.Context<ContainerResolver | null>;
+
+/**
+ * @fileoverview ContainerProviderProps — props for the ContainerProvider component.
+ *
+ * @module interfaces/container-provider-props
+ */
+
+/**
+ * Props for the `<ContainerProvider>` component.
+ *
+ * @example
+ * ```tsx
+ * <ContainerProvider context={app}>
+ *   <App />
+ * </ContainerProvider>
+ * ```
+ */
+interface ContainerProviderProps {
+    /**
+     * The container resolver (typically an ApplicationContext from `@pixielity/application`).
+     * Must implement `get()`, `getOptional()`, and `has()`.
+     */
+    context: ContainerResolver;
+    /**
+   * Child components that will have access to the container.
+   */
+    children: react__default.ReactNode;
+}
+
+/**
+ * Provides the DI container to the React component tree.
+ *
+ * @example
+ * ```tsx
+ * import { ContainerProvider } from '@abdokouta/ts-container-react';
+ * import { ApplicationContext } from '@abdokouta/ts-application';
+ * import { AppModule } from './app.module';
+ *
+ * const app = await ApplicationContext.create(AppModule);
+ *
+ * ReactDOM.createRoot(document.getElementById('root')!).render(
+ *   <ContainerProvider context={app}>
+ *     <App />
+ *   </ContainerProvider>
+ * );
+ * ```
+ */
+declare function ContainerProvider({ context, children }: ContainerProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @fileoverview useContainer hook — access the raw ContainerResolver.
+ *
+ * @module hooks/use-container
+ */
+
+/**
+ * Get the container resolver from React context.
+ *
+ * Returns the `ContainerResolver` provided by `<ContainerProvider>`.
+ * Useful when you need direct access to `has()` or other resolver methods.
+ *
+ * For most cases, prefer `useInject()` instead.
+ *
+ * @returns The ContainerResolver instance
+ * @throws Error if used outside of `<ContainerProvider>`
+ *
+ * @example
+ * ```typescript
+ * import { useContainer } from '@pixielity/react';
+ *
+ * function DebugPanel() {
+ *   const container = useContainer();
+ *   const hasCache = container.has(CacheManager);
+ *   return <div>Cache available: {String(hasCache)}</div>;
+ * }
+ * ```
+ */
+declare function useContainer(): ContainerResolver;
+
+/**
+ * @fileoverview useInject hook — resolve a provider from the DI container.
+ *
+ * This is the primary hook for accessing services in React components.
+ *
+ * @module hooks/use-inject
+ */
+
+/**
+ * Resolve a provider from the DI container.
+ *
+ * The resolved instance is memoized — it won't change between renders
+ * unless the container or token changes.
+ *
+ * @typeParam T - The type of the resolved provider
+ * @param token - The injection token (class, string, or symbol)
+ * @returns The resolved provider instance
+ * @throws Error if the provider is not found or if used outside `<ContainerProvider>`
+ *
+ * @example
+ * ```typescript
+ * import { useInject } from '@pixielity/react';
+ *
+ * // Inject by class
+ * function UserProfile() {
+ *   const userService = useInject(UserService);
+ *   const user = userService.getUser('123');
+ *   return <div>{user.name}</div>;
+ * }
+ *
+ * // Inject by symbol token
+ * function CacheStatus() {
+ *   const config = useInject<CacheConfig>(CACHE_CONFIG);
+ *   return <div>Default store: {config.default}</div>;
+ * }
+ * ```
+ */
+declare function useInject<T = any>(token: InjectionToken<T>): T;
+
+/**
+ * @fileoverview useOptionalInject hook — optionally resolve a provider.
+ *
+ * Like `useInject()`, but returns `undefined` instead of throwing
+ * if the provider is not found.
+ *
+ * @module hooks/use-optional-inject
+ */
+
+/**
+ * Optionally resolve a provider from the DI container.
+ *
+ * Returns `undefined` if the provider is not found, instead of throwing.
+ * Useful for optional dependencies that may or may not be configured.
+ *
+ * @typeParam T - The type of the resolved provider
+ * @param token - The injection token (class, string, or symbol)
+ * @returns The resolved instance or `undefined`
+ *
+ * @example
+ * ```typescript
+ * import { useOptionalInject } from '@pixielity/react';
+ *
+ * function Analytics() {
+ *   const tracker = useOptionalInject(AnalyticsService);
+ *
+ *   if (!tracker) {
+ *     return null; // Analytics not configured
+ *   }
+ *
+ *   return <div>Tracking enabled</div>;
+ * }
+ * ```
+ */
+declare function useOptionalInject<T = any>(token: InjectionToken<T>): T | undefined;
+
+export { ContainerContext, ContainerProvider, type ContainerProviderProps, useContainer, useInject, useOptionalInject };

package/dist/index.js

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/contexts/container.context.ts
+var ContainerContext = createContext(null);
+ContainerContext.displayName = "ContainerContext";
+function ContainerProvider({ context, children }) {
+  return /* @__PURE__ */ jsx(ContainerContext.Provider, { value: context, children });
+}
+function useContainer() {
+  const context = useContext(ContainerContext);
+  if (!context) {
+    throw new Error(
+      "useContainer() must be used within a <ContainerProvider>. Wrap your component tree with <ContainerProvider context={app}>."
+    );
+  }
+  return context;
+}
+function useInject(token) {
+  const container = useContainer();
+  return useMemo(() => container.get(token), [container, token]);
+}
+function useOptionalInject(token) {
+  const container = useContainer();
+  return useMemo(() => container.getOptional(token), [container, token]);
+}
+
+export { ContainerContext, ContainerProvider, useContainer, useInject, useOptionalInject };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/container.context.ts","../src/providers/container.provider.tsx","../src/hooks/use-container.hook.ts","../src/hooks/use-inject.hook.ts","../src/hooks/use-optional-inject.hook.ts"],"names":["useMemo"],"mappings":";;;;AAkBO,IAAM,gBAAA,GAAmB,cAAwC,IAAI;AAE5E,gBAAA,CAAiB,WAAA,GAAc,kBAAA;ACUxB,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,QAAA,EAAS,EAA2B;AAC/E,EAAA,2BACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;ACJO,SAAS,YAAA,GAAkC;AAChD,EAAA,MAAM,OAAA,GAAU,WAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AAEA,EAAA,OAAO,OAAA;AACT;ACFO,SAAS,UAAmB,KAAA,EAA6B;AAC9D,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,OAAO,OAAA,CAAQ,MAAM,SAAA,CAAU,GAAA,CAAO,KAAK,CAAA,EAAG,CAAC,SAAA,EAAW,KAAK,CAAC,CAAA;AAClE;ACNO,SAAS,kBAA2B,KAAA,EAAyC;AAClF,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,OAAOA,OAAAA,CAAQ,MAAM,SAAA,CAAU,WAAA,CAAe,KAAK,CAAA,EAAG,CAAC,SAAA,EAAW,KAAK,CAAC,CAAA;AAC1E","file":"index.js","sourcesContent":["/**\n * @fileoverview React context for the DI container.\n *\n * Holds a `ContainerResolver` reference that React hooks use to\n * resolve providers. The resolver is provided by `<ContainerProvider>`.\n *\n * @module contexts/context\n */\n\nimport { createContext } from 'react';\nimport type { ContainerResolver } from '@abdokouta/ts-container';\n\n/**\n * React context that holds the container resolver.\n *\n * `null` by default — must be provided by `ContainerProvider`.\n * Using `useInject()` outside of a `ContainerProvider` will throw.\n */\nexport const ContainerContext = createContext<ContainerResolver | null>(null);\n\nContainerContext.displayName = 'ContainerContext';\n","/**\n * @fileoverview ContainerProvider — React component that provides the DI container.\n *\n * Wrap your application (or a subtree) with `<ContainerProvider>` to make\n * the DI container available to all child components via `useInject()`.\n *\n * @module providers/provider\n */\n\nimport { ContainerContext } from '@/contexts/container.context';\nimport type { ContainerProviderProps } from '@/interfaces/container-provider-props.interface';\n\n/**\n * Provides the DI container to the React component tree.\n *\n * @example\n * ```tsx\n * import { ContainerProvider } from '@abdokouta/ts-container-react';\n * import { ApplicationContext } from '@abdokouta/ts-application';\n * import { AppModule } from './app.module';\n *\n * const app = await ApplicationContext.create(AppModule);\n *\n * ReactDOM.createRoot(document.getElementById('root')!).render(\n *   <ContainerProvider context={app}>\n *     <App />\n *   </ContainerProvider>\n * );\n * ```\n */\nexport function ContainerProvider({ context, children }: ContainerProviderProps) {\n  return (\n    <ContainerContext.Provider value={context}>\n      {children}\n    </ContainerContext.Provider>\n  );\n}\n","/**\n * @fileoverview useContainer hook — access the raw ContainerResolver.\n *\n * @module hooks/use-container\n */\n\nimport { useContext } from 'react';\nimport type { ContainerResolver } from '@abdokouta/ts-container';\nimport { ContainerContext } from '@/contexts/container.context';\n\n/**\n * Get the container resolver from React context.\n *\n * Returns the `ContainerResolver` provided by `<ContainerProvider>`.\n * Useful when you need direct access to `has()` or other resolver methods.\n *\n * For most cases, prefer `useInject()` instead.\n *\n * @returns The ContainerResolver instance\n * @throws Error if used outside of `<ContainerProvider>`\n *\n * @example\n * ```typescript\n * import { useContainer } from '@pixielity/react';\n *\n * function DebugPanel() {\n *   const container = useContainer();\n *   const hasCache = container.has(CacheManager);\n *   return <div>Cache available: {String(hasCache)}</div>;\n * }\n * ```\n */\nexport function useContainer(): ContainerResolver {\n  const context = useContext(ContainerContext);\n\n  if (!context) {\n    throw new Error(\n      'useContainer() must be used within a <ContainerProvider>. ' +\n      'Wrap your component tree with <ContainerProvider context={app}>.',\n    );\n  }\n\n  return context;\n}\n","/**\n * @fileoverview useInject hook — resolve a provider from the DI container.\n *\n * This is the primary hook for accessing services in React components.\n *\n * @module hooks/use-inject\n */\n\nimport { useMemo } from 'react';\nimport type { InjectionToken } from '@abdokouta/ts-container';\nimport { useContainer } from './use-container.hook';\n\n/**\n * Resolve a provider from the DI container.\n *\n * The resolved instance is memoized — it won't change between renders\n * unless the container or token changes.\n *\n * @typeParam T - The type of the resolved provider\n * @param token - The injection token (class, string, or symbol)\n * @returns The resolved provider instance\n * @throws Error if the provider is not found or if used outside `<ContainerProvider>`\n *\n * @example\n * ```typescript\n * import { useInject } from '@pixielity/react';\n *\n * // Inject by class\n * function UserProfile() {\n *   const userService = useInject(UserService);\n *   const user = userService.getUser('123');\n *   return <div>{user.name}</div>;\n * }\n *\n * // Inject by symbol token\n * function CacheStatus() {\n *   const config = useInject<CacheConfig>(CACHE_CONFIG);\n *   return <div>Default store: {config.default}</div>;\n * }\n * ```\n */\nexport function useInject<T = any>(token: InjectionToken<T>): T {\n  const container = useContainer();\n  return useMemo(() => container.get<T>(token), [container, token]);\n}\n","/**\n * @fileoverview useOptionalInject hook — optionally resolve a provider.\n *\n * Like `useInject()`, but returns `undefined` instead of throwing\n * if the provider is not found.\n *\n * @module hooks/use-optional-inject\n */\n\nimport { useMemo } from 'react';\nimport type { InjectionToken } from '@abdokouta/ts-container';\nimport { useContainer } from './use-container.hook';\n\n/**\n * Optionally resolve a provider from the DI container.\n *\n * Returns `undefined` if the provider is not found, instead of throwing.\n * Useful for optional dependencies that may or may not be configured.\n *\n * @typeParam T - The type of the resolved provider\n * @param token - The injection token (class, string, or symbol)\n * @returns The resolved instance or `undefined`\n *\n * @example\n * ```typescript\n * import { useOptionalInject } from '@pixielity/react';\n *\n * function Analytics() {\n *   const tracker = useOptionalInject(AnalyticsService);\n *\n *   if (!tracker) {\n *     return null; // Analytics not configured\n *   }\n *\n *   return <div>Tracking enabled</div>;\n * }\n * ```\n */\nexport function useOptionalInject<T = any>(token: InjectionToken<T>): T | undefined {\n  const container = useContainer();\n  return useMemo(() => container.getOptional<T>(token), [container, token]);\n}\n"]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@abdokouta/ts-container-react",
+  "version": "1.0.0",
+  "description": "React bindings for @abdokouta/ts-container. ContainerProvider, useInject, useOptionalInject, useContainer hooks.",
+  "keywords": [
+    "dependency-injection",
+    "di",
+    "react",
+    "hooks",
+    "container",
+    "provider",
+    "useInject",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Pixielity",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@abdokouta/ts-container": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "tsup": "^8.5.1",
+    "@nesvel/typescript-config": "^1.0.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest run --passWithNoTests"
+  }
+}