ditox-react
Version:
Dependency injection container for React.js
101 lines • 3.77 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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);
/**
* 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;
/**
* 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