inversify-constructor-injection

Helper functions to provide class constructor parameters or function parameters from inversify

Install

npm install inversify-constructor-injection

Usage in React

To create a react app that uses this package for dfependency injection run

npx create-react-app-inversify my-app

or

npx create-react-app my-app --scripts-version react-scripts-inversify --template inversify

This creates an app with the following sample components:

@injectable()
class ClassBasedComponent extends Component<{}, {time: string}> {

    constructor(params: any, context: any, clock: ClockService){
        super(params, context);

        this.state = {time: clock.getTime()}

        clock.registerTickCallback(() => this.setState({time: clock.getTime()}))
    }

    public render(){
        return <div className="exampleComponent">
            <div>Class Based Component</div>
            <div>{this.state.time}</div>
        </div>
    }
}

export default injectConstructor(ClassBasedComponent);

const FunctionBasedComponent = (_props: any, _context: any, clock: ClockService) => {
    return <div className="exampleComponent">
        <div>Function Based Component</div>
        <div>Rendered at {clock.getTime()}</div>
    </div>;
}

export default injectFunction(FunctionBasedComponent, [undefined, undefined, ClockService]);

Example Usage

Constructor Injection

import { resolveContainer } from "inversify-constructor-injection";

// setup providers
resolveContainer().bind(EmployeeService).to(EmployeeService);
resolveContainer().bind(EmployeeUtil).to(EmployeeUtil);

import { injectConstructor } from "inversify-constructor-injection";
import { injectable } from "inversify";

@Injectable()
class ClassWithParameters {
    constructor(
        name: string,
        service: EmployeeService,
        util: EmployeeUtil) {
    }
}

const injectedConstructor = injectConstructor(ClassWithParameters);

const instance = new injectedConstructor("instanceName"); // other parameters provided from inversify

Function Injection

A similar approach can be used to provide values for function parameters. Unfortunately the metadata for function parameters isn't currently available so we need to provide the metadata for the function parameters ourselves.

import { resolveContainer } from "inversify-constructor-injection";

// setup providers
resolveContainer().bind(EmployeeService).to(EmployeeService);
resolveContainer().bind(EmployeeUtil).to(EmployeeUtil);

import { injectFunction } from "inversify-constructor-injection";

function functionWithParameters(
    paramOne: string,
    paramTwo: EmployeeService,
    paramThree: EmployeeUtil): string {
}

const injectedFunction = injectFunction( // typed as (paramOne?: string, paramTwo?: EmployeeService, paramThree?: EmployeeUtil) => string
    functionWithParameters, 
    [ undefined, EmployeeService, EmployeeUtil ], // provide type metadata
    );

injectedFunctions("stringValueThatCantBeInjected"); // call function

Setup

This package uses Reflect Metadata to inspect the constructor parameters of your class. To use this your tsconfig.json must contain:

{
    "compilerOptions": {
        "experimentalDecorators": true,    
        "emitDecoratorMetadata": true      
    }
}

and the class that you are trying to construct MUST have a decorator to inform typescript that metadata should be saved:

@Injectable()
class ClassWithParameters {
    constructor(
        public readonly paramOne: string,
        public readonly paramTwo: number,
        public readonly paramThree: boolean) {
    }
}

you must also install and import reflect-metadata somwhere in your app - preferably as the first import.

npm install reflect-metadata

import "reflect-metadata";

Minimum Typescript version: 3.5