Dinja NPM | npm.io

Dinja

A dependency injection library for ES6 with power of decorators and with React support.

Tested compiler: Babel 6 with config:

{
 "presets": ["es2015"],
 "plugins": ["transform-decorators-legacy"],
}

Examples:

NOTE: for really up-to-date examples, check the test directory.

// mark FooService class as a service:

@service('FooService')
class FooService {
    getText() {
        return 'foobartext';
    }
}

// define Bar class' dependencies

@dependencies(['FooService'])
class Bar {
    constructor(fooService) {
        this._fooService = fooService;
    }

    doBar() {
        return this._fooService.getText();
    }
}

// Instantiate bar; FooService will be instantiated lazily in the background,
// and injected to Bar.
let bar = create(Bar);
bar.doBar();

But, the best feature of this library is React (and Flux) support:

// -------- Dispatcher.js --------
// Register your dispatcher
// (since dispatcher is usually defined in external library,
// use the service decorator without the "@" syntax
import {service} from 'dinja';
service('Dispatcher')(Dispatcher)

// Dependency injection will happen in background,
// you don't need to instantiate the dispatcher.

// -------- stores/ItemStore.js --------

// import other stuff ...
import {dependencies, service} from 'dinja';

// Register the store as a service, but define dispatcher as dependency.
// DI will happen in background, you don't need to instantiate the store.

@dependencies(['Dispatcher'])
@service('ItemStore')
class ItemStore extends EventEmitter {
    constructor(dispatcher) {
        this._dispatcher = dispatcher;
        // dispatcher.register, ...
    }
    // ...
}

// -------- components/ItemList.js --------

// import other stuff ...
import {dependencies} from 'dinja';

@dependencies(['ItemStore'])
class ItemList extends React.Component {
    // ...

    componenctDidMount() {
        // itemStore injected in the background
        this.props.itemStore.addChangeListener(this._onItemStoreChange);
    }

    componentWillUnmount() {
        this.props.itemStore.removeChangeListener(this._onItemStoreChange);
    }

    render() {
        // Here you can use the itemStore props, it is injected in the background.
        let items = this.props.itemStore.getItems();
        return (<div></div>); // ... format your JSX, or whatever
    }
}


// in the render method of ItemList's parent component,
// no itemStore prop has to be defined, it is injected seamlessly.
// with JSX:
render() {
    return (<ItemList />);
}

// without JSX:
render() {
    return React.createElement(ItemList, null);
}