- Bare-bones dependency injection using TypeScript decorators. Absolutely no frills.
- <1kb bundled & compressed (including React bindings).
- Two field decorators:
@injectand@inject.lazy. No complicated dependency graph. - Supports
globalandtransient-scoped dependencies. - Direct upgrade path to ES decorators.
| Package | Description |
|---|---|
xdi |
The meat-and-potatoes of xdi. This is what you npm install & use. |
@xdi/react |
React bindings for xdi (i.e.: useService(...)). |
@internal/config |
Shared toolchains (i.e.: TypeScript, ESLint, etc.). |
@internal/tools |
Internal CLI tool for automating common tasks. |
-
Install:
npm install xdi
-
Configure TypeScript
experimentalDecorators:// tsconfig.json { "compilerOptions": { "experimentalDecorators": true, } }
-
Make your DI container:
// src/services/container.ts import { createContainer } from 'xdi'; export const { inject, ...container } = createContainer();
-
Write your services:
import { inject } from 'src/services/container'; export class MyService { sayHello(fullName: string) { console.log(`Hello there, ${fullName}!`); } } export class MyConsumer { // Injected upon instantiation @inject(() => MyService) private readonly svc!: MyService; // Injected upon usage // (this will change to use auto-accessors when ES decorators land) @inject.lazy(() => MyService) private readonly svc!: MyService; sayName(firstName: string, lastName: string) { this.svc.sayHello(`${firstName} ${lastName}`); } }