ditox-react 1.4.1 → 2.2.0

package/README.md

@@ -28,7 +28,7 @@ React.js tooling for [Ditox.js](https://github.com/mnasyrov/ditox) DI container.
 - Container hierarchy
 - Scoped containers
 - Multi-value tokens
-- Typescript and Flow typings
+- Typescript typings
 - Supports Node.js, Deno and browsers
 
 ## Installation

package/dist/{index.browser.js → browser/index.js}

@@ -1,2 +1,2 @@
 import{createContainer as r,bindModule as n}from"ditox";import e,{createContext as t,useContext as o,useMemo as i,useEffect as u,useCallback as c}from"react";var v=t(void 0);function f(n){var t=n.children,c=n.root,f=n.binder,a=o(v),d=i((function(){var n=r(c?void 0:a);return null==f||f(n),n}),[f,a,c]);return u((function(){return function(){return d.removeAll()}}),[d]),e.createElement(v.Provider,{value:d},t)}function a(r){var n=o(v);if(!n&&"strict"===r)throw new Error("Container is not provided by DependencyContainer component");return n}function d(r){var n=a("strict");return i((function(){return n.resolve(r)}),[n,r])}function l(r){var n=a();return i((function(){return null==n?void 0:n.get(r)}),[n,r])}function m(r){var t=r.children,o=r.module,i=r.scope,u=c((function(r){return n(r,o,{scope:i})}),[o,i]);return e.createElement(f,{binder:u},t)}export{f as DependencyContainer,m as DependencyModule,d as useDependency,a as useDependencyContainer,l as useOptionalDependency};
-//# sourceMappingURL=index.browser.js.map
+//# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/DependencyContainer.tsx","../../src/hooks.ts","../../src/DependencyModule.tsx"],"sourcesContent":[null,null,null],"names":["DependencyContainerContext","createContext","undefined","DependencyContainer","params","children","root","binder","parentContainer","useContext","container","useMemo","createContainer","useEffect","removeAll","React","Provider","value","useDependencyContainer","mode","Error","useDependency","token","resolve","useOptionalDependency","get","DependencyModule","module","scope","useCallback","bindModule"],"mappings":"8JAWO,IAAMA,EAA6BC,OACxCC,YAuDcC,EACdC,GAEO,IAAAC,EAA0BD,WAAhBE,EAAgBF,OAAVG,EAAUH,SAC3BI,EAAkBC,EAAWT,GAE7BU,EAAYC,GAAQ,WACxB,IAAMD,EAAYE,EAAgBN,OAAOJ,EAAYM,GAGrD,OAFAD,MAAAA,GAAAA,EAASG,GAEFA,IACN,CAACH,EAAQC,EAAiBF,IAM7B,OAJAO,GAAU,WACR,OAAO,WAAM,OAAAH,EAAUI,eACtB,CAACJ,IAGFK,gBAACf,EAA2BgB,UAASC,MAAOP,GACzCL,YCjESa,EACdC,GAEA,IAAMT,EAAYD,EAAWT,GAE7B,IAAKU,GAAsB,WAATS,EAChB,MAAM,IAAIC,MACR,8DAIJ,OAAOV,WAQOW,EAAiBC,GAC/B,IAAMZ,EAAYQ,EAAuB,UAEzC,OADcP,GAAQ,WAAM,OAAAD,EAAUa,QAAQD,KAAQ,CAACZ,EAAWY,aASpDE,EAAyBF,GACvC,IAAMZ,EAAYQ,IAElB,OADcP,GAAQ,WAAM,OAAAD,MAAAA,SAAAA,EAAWe,IAAIH,KAAQ,CAACZ,EAAWY,aCrBjDI,EAAiBtB,GAKxB,IAAAC,EAA2BD,WAAjBuB,EAAiBvB,SAATwB,EAASxB,QAE5BG,EAAoCsB,GACxC,SAACnB,GAAc,OAAAoB,EAAWpB,EAAWiB,EAAQ,CAACC,YAC9C,CAACD,EAAQC,IAGX,OAAOb,gBAACZ,GAAoBI,OAAQA,GAASF"}

package/dist/cjs/DependencyContainer.d.ts

@@ -0,0 +1,78 @@
+import type { Container } from 'ditox';
+import React, { ReactElement, ReactNode } from 'react';
+export declare const DependencyContainerContext: React.Context<Container | undefined>;
+/**
+ * A callback for binding dependencies to a container
+ */
+export declare type DependencyContainerBinder = (container: Container) => unknown;
+/**
+ * Specifies an existed container or options for a new container:
+ * @property binder - A callback which setup bindings to the container.
+ * @property root - If `true` then a new container does not depend on any parent containers
+ */
+export declare type DependencyContainerParams = {
+    children: ReactNode;
+    root?: boolean;
+    binder?: DependencyContainerBinder;
+};
+/**
+ * @category Component
+ *
+ * Provides a new dependency container to React app
+ *
+ * This component creates a new container and provides it down to React children.
+ *
+ * If `binder` callback is specified, it will be called for a new container
+ * to binds it with dependencies.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ * For making a new root container specify `root` parameter as `true`,
+ * and the container will not depend on any parent container.
+ *
+ * @param params.binder - A callback which setup bindings to the container.
+ * @param params.root - If `true` then a new container does not depend on any parent containers
+ *
+ * @example
+ *
+ * ```tsx
+ * const TOKEN = token();
+ *
+ * function appDependencyBinder(container: Container) {
+ *   container.bindValue(TOKEN, 'value');
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DependencyContainer root binder={appDependencyBinder}>
+ *       <NestedComponent />
+ *     </DependencyContainer>
+ *   );
+ * }
+ * ```
+ *
+ */
+export declare function DependencyContainer(params: DependencyContainerParams): ReactElement;
+/**
+ * @category Component
+ *
+ * Provides a custom dependency container to React app
+ *
+ * @param params.container - a custom container
+ *
+ * @example
+ * ```tsx
+ * const container = useMemo(() => {
+ *   return createContainer();
+ * }
+ *
+ * return (
+ *   <CustomDependencyContainer container={container}>
+ *     {children}
+ *   </CustomDependencyContainer>
+ * );
+ * ```
+ */
+export declare function CustomDependencyContainer(params: {
+    children: ReactNode;
+    container: Container;
+}): ReactElement;

package/dist/cjs/DependencyContainer.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomDependencyContainer = exports.DependencyContainer = exports.DependencyContainerContext = void 0;
+const ditox_1 = require("ditox");
+const react_1 = __importStar(require("react"));
+exports.DependencyContainerContext = (0, react_1.createContext)(undefined);
+/**
+ * @category Component
+ *
+ * Provides a new dependency container to React app
+ *
+ * This component creates a new container and provides it down to React children.
+ *
+ * If `binder` callback is specified, it will be called for a new container
+ * to binds it with dependencies.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ * For making a new root container specify `root` parameter as `true`,
+ * and the container will not depend on any parent container.
+ *
+ * @param params.binder - A callback which setup bindings to the container.
+ * @param params.root - If `true` then a new container does not depend on any parent containers
+ *
+ * @example
+ *
+ * ```tsx
+ * const TOKEN = token();
+ *
+ * function appDependencyBinder(container: Container) {
+ *   container.bindValue(TOKEN, 'value');
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DependencyContainer root binder={appDependencyBinder}>
+ *       <NestedComponent />
+ *     </DependencyContainer>
+ *   );
+ * }
+ * ```
+ *
+ */
+function DependencyContainer(params) {
+    const { children, root, binder } = params;
+    const parentContainer = (0, react_1.useContext)(exports.DependencyContainerContext);
+    const container = (0, react_1.useMemo)(() => {
+        const container = (0, ditox_1.createContainer)(root ? undefined : parentContainer);
+        binder === null || binder === void 0 ? void 0 : binder(container);
+        return container;
+    }, [binder, parentContainer, root]);
+    (0, react_1.useEffect)(() => {
+        return () => container.removeAll();
+    }, [container]);
+    return (react_1.default.createElement(exports.DependencyContainerContext.Provider, { value: container }, children));
+}
+exports.DependencyContainer = DependencyContainer;
+/**
+ * @category Component
+ *
+ * Provides a custom dependency container to React app
+ *
+ * @param params.container - a custom container
+ *
+ * @example
+ * ```tsx
+ * const container = useMemo(() => {
+ *   return createContainer();
+ * }
+ *
+ * return (
+ *   <CustomDependencyContainer container={container}>
+ *     {children}
+ *   </CustomDependencyContainer>
+ * );
+ * ```
+ */
+function CustomDependencyContainer(params) {
+    const { children, container } = params;
+    return (react_1.default.createElement(exports.DependencyContainerContext.Provider, { value: container }, children));
+}
+exports.CustomDependencyContainer = CustomDependencyContainer;
+//# sourceMappingURL=DependencyContainer.js.map

package/dist/cjs/DependencyContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyContainer.js","sourceRoot":"","sources":["../../src/DependencyContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,iCAAsC;AACtC,+CAOe;AAEF,QAAA,0BAA0B,GAAG,IAAA,qBAAa,EACrD,SAAS,CACV,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,SAAgB,mBAAmB,CACjC,MAAiC;IAEjC,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAC,GAAG,MAAM,CAAC;IACxC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,kCAA0B,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,IAAA,uBAAe,EAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;QACtE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,SAAS,CAAC,CAAC;QAEpB,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,8BAAC,kCAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAClD,QAAQ,CAC2B,CACvC,CAAC;AACJ,CAAC;AAtBD,kDAsBC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,yBAAyB,CAAC,MAGzC;IACC,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,MAAM,CAAC;IAErC,OAAO,CACL,8BAAC,kCAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAClD,QAAQ,CAC2B,CACvC,CAAC;AACJ,CAAC;AAXD,8DAWC"}

package/{src/DependencyModule.js.flow → dist/cjs/DependencyModule.d.ts}

@@ -1,9 +1,5 @@
-// @flow strict
-
-import type {Module, ModuleDeclaration} from 'ditox';
-import type {Node} from 'react';
-import React from 'react';
-
+import type { Module, ModuleDeclaration } from 'ditox';
+import { ReactElement, ReactNode } from 'react';
 /**
  * @category Component
  *
@@ -28,8 +24,8 @@ import React from 'react';
  * }
  * ```
  */
-declare export function DependencyModule(params: {
-  children: Node,
-  module: ModuleDeclaration<Module<*>>,
-  scope?: 'scoped' | 'singleton',
-}): Node;
+export declare function DependencyModule(params: {
+    children: ReactNode;
+    module: ModuleDeclaration<Module<Record<string, unknown>>>;
+    scope?: 'scoped' | 'singleton';
+}): ReactElement;

package/dist/cjs/DependencyModule.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DependencyModule = void 0;
+const ditox_1 = require("ditox");
+const react_1 = __importStar(require("react"));
+const DependencyContainer_1 = require("./DependencyContainer");
+/**
+ * @category Component
+ *
+ * Binds the module to a new dependency container.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ *
+ * @param params.module - Module declaration for binding
+ * @param params.scope - Optional scope for binding: `singleton` (default) or `scoped`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const LOGGER_MODULE: ModuleDeclaration<LoggerModule> = {
+ *
+ * function App() {
+ *   return (
+ *     <DependencyModule module={LOGGER_MODULE}>
+ *       <NestedComponent />
+ *     </DependencyModule>
+ *   );
+ * }
+ * ```
+ */
+function DependencyModule(params) {
+    const { children, module, scope } = params;
+    const binder = (0, react_1.useCallback)((container) => (0, ditox_1.bindModule)(container, module, { scope }), [module, scope]);
+    return react_1.default.createElement(DependencyContainer_1.DependencyContainer, { binder: binder }, children);
+}
+exports.DependencyModule = DependencyModule;
+//# sourceMappingURL=DependencyModule.js.map

package/dist/cjs/DependencyModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyModule.js","sourceRoot":"","sources":["../../src/DependencyModule.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,iCAAiC;AACjC,+CAAkE;AAClE,+DAG+B;AAE/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,gBAAgB,CAAC,MAIhC;IACC,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC;IAEzC,MAAM,MAAM,GAA8B,IAAA,mBAAW,EACnD,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,kBAAU,EAAC,SAAS,EAAE,MAAM,EAAE,EAAC,KAAK,EAAC,CAAC,EACrD,CAAC,MAAM,EAAE,KAAK,CAAC,CAChB,CAAC;IAEF,OAAO,8BAAC,yCAAmB,IAAC,MAAM,EAAE,MAAM,IAAG,QAAQ,CAAuB,CAAC;AAC/E,CAAC;AAbD,4CAaC"}

package/dist/cjs/hooks.d.ts

@@ -0,0 +1,25 @@
+import { Container, Token } from 'ditox';
+/**
+ * @category Hook
+ *
+ * Returns a dependency container. Throws an error in case the container is not provided.
+ */
+export declare function useDependencyContainer(mode: 'strict'): Container;
+/**
+ * @category Hook
+ *
+ * Returns a dependency container, or `undefined` in case the container is not provided.
+ */
+export declare function useDependencyContainer(mode?: 'optional'): Container | undefined;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or fails with an error.
+ */
+export declare function useDependency<T>(token: Token<T>): T;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or `undefined` in case the dependency is not provided.
+ */
+export declare function useOptionalDependency<T>(token: Token<T>): T | undefined;

package/dist/cjs/hooks.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionalDependency = exports.useDependency = exports.useDependencyContainer = void 0;
+const react_1 = require("react");
+const DependencyContainer_1 = require("./DependencyContainer");
+/**
+ * @internal
+ */
+function useDependencyContainer(mode) {
+    const container = (0, react_1.useContext)(DependencyContainer_1.DependencyContainerContext);
+    if (!container && mode === 'strict') {
+        throw new Error('Container is not provided by DependencyContainer component');
+    }
+    return container;
+}
+exports.useDependencyContainer = useDependencyContainer;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or fails with an error.
+ */
+function useDependency(token) {
+    const container = useDependencyContainer('strict');
+    const value = (0, react_1.useMemo)(() => container.resolve(token), [container, token]);
+    return value;
+}
+exports.useDependency = useDependency;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or `undefined` in case the dependency is not provided.
+ */
+function useOptionalDependency(token) {
+    const container = useDependencyContainer();
+    const value = (0, react_1.useMemo)(() => container === null || container === void 0 ? void 0 : container.get(token), [container, token]);
+    return value;
+}
+exports.useOptionalDependency = useOptionalDependency;
+//# sourceMappingURL=hooks.js.map

package/dist/cjs/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/hooks.ts"],"names":[],"mappings":";;;AACA,iCAA0C;AAC1C,+DAAiE;AAgBjE;;GAEG;AACH,SAAgB,sBAAsB,CACpC,IAA4B;IAE5B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,gDAA0B,CAAC,CAAC;IAEzD,IAAI,CAAC,SAAS,IAAI,IAAI,KAAK,QAAQ,EAAE;QACnC,MAAM,IAAI,KAAK,CACb,4DAA4D,CAC7D,CAAC;KACH;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAZD,wDAYC;AAED;;;;GAIG;AACH,SAAgB,aAAa,CAAI,KAAe;IAC9C,MAAM,SAAS,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAC1E,OAAO,KAAK,CAAC;AACf,CAAC;AAJD,sCAIC;AAED;;;;GAIG;AACH,SAAgB,qBAAqB,CAAI,KAAe;IACtD,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,OAAO,KAAK,CAAC;AACf,CAAC;AAJD,sDAIC"}

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export type { DependencyContainerBinder, DependencyContainerParams, } from './DependencyContainer';
+export { DependencyContainer } from './DependencyContainer';
+export { useDependencyContainer, useDependency, useOptionalDependency, } from './hooks';
+export { DependencyModule } from './DependencyModule';

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DependencyModule = exports.useOptionalDependency = exports.useDependency = exports.useDependencyContainer = exports.DependencyContainer = void 0;
+var DependencyContainer_1 = require("./DependencyContainer");
+Object.defineProperty(exports, "DependencyContainer", { enumerable: true, get: function () { return DependencyContainer_1.DependencyContainer; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useDependencyContainer", { enumerable: true, get: function () { return hooks_1.useDependencyContainer; } });
+Object.defineProperty(exports, "useDependency", { enumerable: true, get: function () { return hooks_1.useDependency; } });
+Object.defineProperty(exports, "useOptionalDependency", { enumerable: true, get: function () { return hooks_1.useOptionalDependency; } });
+var DependencyModule_1 = require("./DependencyModule");
+Object.defineProperty(exports, "DependencyModule", { enumerable: true, get: function () { return DependencyModule_1.DependencyModule; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAIA,6DAA0D;AAAlD,0HAAA,mBAAmB,OAAA;AAE3B,iCAIiB;AAHf,+GAAA,sBAAsB,OAAA;AACtB,sGAAA,aAAa,OAAA;AACb,8GAAA,qBAAqB,OAAA;AAGvB,uDAAoD;AAA5C,oHAAA,gBAAgB,OAAA"}

package/dist/esm/DependencyContainer.d.ts

@@ -0,0 +1,78 @@
+import type { Container } from 'ditox';
+import React, { ReactElement, ReactNode } from 'react';
+export declare const DependencyContainerContext: React.Context<Container | undefined>;
+/**
+ * A callback for binding dependencies to a container
+ */
+export declare type DependencyContainerBinder = (container: Container) => unknown;
+/**
+ * Specifies an existed container or options for a new container:
+ * @property binder - A callback which setup bindings to the container.
+ * @property root - If `true` then a new container does not depend on any parent containers
+ */
+export declare type DependencyContainerParams = {
+    children: ReactNode;
+    root?: boolean;
+    binder?: DependencyContainerBinder;
+};
+/**
+ * @category Component
+ *
+ * Provides a new dependency container to React app
+ *
+ * This component creates a new container and provides it down to React children.
+ *
+ * If `binder` callback is specified, it will be called for a new container
+ * to binds it with dependencies.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ * For making a new root container specify `root` parameter as `true`,
+ * and the container will not depend on any parent container.
+ *
+ * @param params.binder - A callback which setup bindings to the container.
+ * @param params.root - If `true` then a new container does not depend on any parent containers
+ *
+ * @example
+ *
+ * ```tsx
+ * const TOKEN = token();
+ *
+ * function appDependencyBinder(container: Container) {
+ *   container.bindValue(TOKEN, 'value');
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DependencyContainer root binder={appDependencyBinder}>
+ *       <NestedComponent />
+ *     </DependencyContainer>
+ *   );
+ * }
+ * ```
+ *
+ */
+export declare function DependencyContainer(params: DependencyContainerParams): ReactElement;
+/**
+ * @category Component
+ *
+ * Provides a custom dependency container to React app
+ *
+ * @param params.container - a custom container
+ *
+ * @example
+ * ```tsx
+ * const container = useMemo(() => {
+ *   return createContainer();
+ * }
+ *
+ * return (
+ *   <CustomDependencyContainer container={container}>
+ *     {children}
+ *   </CustomDependencyContainer>
+ * );
+ * ```
+ */
+export declare function CustomDependencyContainer(params: {
+    children: ReactNode;
+    container: Container;
+}): ReactElement;

package/dist/esm/DependencyContainer.js

@@ -0,0 +1,77 @@
+import { createContainer } from 'ditox';
+import React, { createContext, useContext, useEffect, useMemo, } from 'react';
+export const DependencyContainerContext = createContext(undefined);
+/**
+ * @category Component
+ *
+ * Provides a new dependency container to React app
+ *
+ * This component creates a new container and provides it down to React children.
+ *
+ * If `binder` callback is specified, it will be called for a new container
+ * to binds it with dependencies.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ * For making a new root container specify `root` parameter as `true`,
+ * and the container will not depend on any parent container.
+ *
+ * @param params.binder - A callback which setup bindings to the container.
+ * @param params.root - If `true` then a new container does not depend on any parent containers
+ *
+ * @example
+ *
+ * ```tsx
+ * const TOKEN = token();
+ *
+ * function appDependencyBinder(container: Container) {
+ *   container.bindValue(TOKEN, 'value');
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DependencyContainer root binder={appDependencyBinder}>
+ *       <NestedComponent />
+ *     </DependencyContainer>
+ *   );
+ * }
+ * ```
+ *
+ */
+export function DependencyContainer(params) {
+    const { children, root, binder } = params;
+    const parentContainer = useContext(DependencyContainerContext);
+    const container = useMemo(() => {
+        const container = createContainer(root ? undefined : parentContainer);
+        binder === null || binder === void 0 ? void 0 : binder(container);
+        return container;
+    }, [binder, parentContainer, root]);
+    useEffect(() => {
+        return () => container.removeAll();
+    }, [container]);
+    return (React.createElement(DependencyContainerContext.Provider, { value: container }, children));
+}
+/**
+ * @category Component
+ *
+ * Provides a custom dependency container to React app
+ *
+ * @param params.container - a custom container
+ *
+ * @example
+ * ```tsx
+ * const container = useMemo(() => {
+ *   return createContainer();
+ * }
+ *
+ * return (
+ *   <CustomDependencyContainer container={container}>
+ *     {children}
+ *   </CustomDependencyContainer>
+ * );
+ * ```
+ */
+export function CustomDependencyContainer(params) {
+    const { children, container } = params;
+    return (React.createElement(DependencyContainerContext.Provider, { value: container }, children));
+}
+//# sourceMappingURL=DependencyContainer.js.map

package/dist/esm/DependencyContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyContainer.js","sourceRoot":"","sources":["../../src/DependencyContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,UAAU,EACV,SAAS,EACT,OAAO,GACR,MAAM,OAAO,CAAC;AAEf,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CACrD,SAAS,CACV,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,mBAAmB,CACjC,MAAiC;IAEjC,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAC,GAAG,MAAM,CAAC;IACxC,MAAM,eAAe,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;QACtE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,SAAS,CAAC,CAAC;QAEpB,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAClD,QAAQ,CAC2B,CACvC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,yBAAyB,CAAC,MAGzC;IACC,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAClD,QAAQ,CAC2B,CACvC,CAAC;AACJ,CAAC"}

package/dist/esm/DependencyModule.d.ts

@@ -0,0 +1,31 @@
+import type { Module, ModuleDeclaration } from 'ditox';
+import { ReactElement, ReactNode } from 'react';
+/**
+ * @category Component
+ *
+ * Binds the module to a new dependency container.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ *
+ * @param params.module - Module declaration for binding
+ * @param params.scope - Optional scope for binding: `singleton` (default) or `scoped`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const LOGGER_MODULE: ModuleDeclaration<LoggerModule> = {
+ *
+ * function App() {
+ *   return (
+ *     <DependencyModule module={LOGGER_MODULE}>
+ *       <NestedComponent />
+ *     </DependencyModule>
+ *   );
+ * }
+ * ```
+ */
+export declare function DependencyModule(params: {
+    children: ReactNode;
+    module: ModuleDeclaration<Module<Record<string, unknown>>>;
+    scope?: 'scoped' | 'singleton';
+}): ReactElement;

package/dist/esm/DependencyModule.js

@@ -0,0 +1,33 @@
+import { bindModule } from 'ditox';
+import React, { useCallback } from 'react';
+import { DependencyContainer, } from './DependencyContainer';
+/**
+ * @category Component
+ *
+ * Binds the module to a new dependency container.
+ *
+ * If a parent container is exist, it is connected to the current one by default.
+ *
+ * @param params.module - Module declaration for binding
+ * @param params.scope - Optional scope for binding: `singleton` (default) or `scoped`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const LOGGER_MODULE: ModuleDeclaration<LoggerModule> = {
+ *
+ * function App() {
+ *   return (
+ *     <DependencyModule module={LOGGER_MODULE}>
+ *       <NestedComponent />
+ *     </DependencyModule>
+ *   );
+ * }
+ * ```
+ */
+export function DependencyModule(params) {
+    const { children, module, scope } = params;
+    const binder = useCallback((container) => bindModule(container, module, { scope }), [module, scope]);
+    return React.createElement(DependencyContainer, { binder: binder }, children);
+}
+//# sourceMappingURL=DependencyModule.js.map

package/dist/esm/DependencyModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyModule.js","sourceRoot":"","sources":["../../src/DependencyModule.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,EAA0B,WAAW,EAAC,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,mBAAmB,GAEpB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAIhC;IACC,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC;IAEzC,MAAM,MAAM,GAA8B,WAAW,CACnD,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,EAAC,KAAK,EAAC,CAAC,EACrD,CAAC,MAAM,EAAE,KAAK,CAAC,CAChB,CAAC;IAEF,OAAO,oBAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,IAAG,QAAQ,CAAuB,CAAC;AAC/E,CAAC"}

package/dist/esm/hooks.d.ts

@@ -0,0 +1,25 @@
+import { Container, Token } from 'ditox';
+/**
+ * @category Hook
+ *
+ * Returns a dependency container. Throws an error in case the container is not provided.
+ */
+export declare function useDependencyContainer(mode: 'strict'): Container;
+/**
+ * @category Hook
+ *
+ * Returns a dependency container, or `undefined` in case the container is not provided.
+ */
+export declare function useDependencyContainer(mode?: 'optional'): Container | undefined;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or fails with an error.
+ */
+export declare function useDependency<T>(token: Token<T>): T;
+/**
+ * @category Hook
+ *
+ * Returns a dependency by token, or `undefined` in case the dependency is not provided.
+ */
+export declare function useOptionalDependency<T>(token: Token<T>): T | undefined;