npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dinja

v0.3.0

Published

Dinja, a dependency injection library for ES6

Downloads

8

Readme

Dinja

Build Status npm version

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);
}

API reference

dependencies(deps: Array<string>)(targetClass)

Defines dependencies for a class. Designed to be used as a decorator.

service(serviceName: string, serviceProvider: ((...deps) => T) = null)(targetClass)

Registers targetClass as a service by name serviceName. Designed to be used as a decorator.

serviceProvider is a function, that creates a service instance of targetClass. If the service has dependencies, those are passed to the function.

inject(serviceName: string): T

Returns the instance of the service defined by serviceName.

create(targetClass): T

Creates a new instance of targetClass with @dependencies injected.

resetFactory()

Resets the whole factory, meaning all services, serviceProviders will be deleted. Useful for testing.

enableDebug()

Enables debug logging to console.

disableDebug()

Disables debug logging to console.