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

diyai

v1.0.0

Published

Dependency Injection (DI) made easy in JavaScript/ES6

Downloads

203

Readme

diyai

Dependency Injection (DI) made easy in JavaScript/ES6

npm Build Status Coverage

Installation

With npm:

$ npm install --save diyai

With unpkg CDN:

<script src="https://unpkg.com/[email protected]/dist/diyai.min.js"></script>
<script>
 // now available in `window.Diyai`
</script>

Usage

Direct values

Let's start by defining a simple container first.

When defining the providers, we can directly assign values for them via the useValue key.

import { createContainer, resolveContainer } from 'diyai';

const Container = createContainer([
  { name: 'foo', useValue: 'foo value' },
  { name: 'bar', useValue: 'bar value' }
]);

Now, let's resolve it to get the Container's instance:

const container = resolveContainer(Container); // same as `new Container()`

Once resolved, you can get instaces of your providers as follows:

container.get('foo'); // `foo value`
container.get('bar'); // `bar value`

If there is any chance of having a cyclic reference, you can use useDefinedValue:

const myObj = {};

const Container = createContainer([
  { name: 'myObj', useDefinedValue: myObj }
]);

myObj.container = resolveContainer(Container);

Doing so would set a self-refernce of myObj in myObj.container.registry.myObj using Object.defineProperty via a getter function.

Values from factories

We can also pass functions in the Container definition for the providers, and their returned values will be used as the actual value then.

For that, we will use the useFactory key:

import { createContainer, resolveContainer } from 'diyai';

const Container = createContainer([
  { name: 'foo', useFactory: () => 'foo value' },
]);

const container = resolveContainer(Container);
container.get('foo'); // `foo value`

Classes

Some providers can even be classes, and can be passed in the Container definition in useClass key.

Once resolved, the container would then return the instance of the class.

Classes can be just plain ES6 classes:

class Foo {
  text() {
    return 'foo text'
  }
}

Or, they can be created with the handy createClass function shipped with this library:

import { createClass } from 'diyai';

const Foo = createClass({
  text: function () {
    return 'foo text';
  }
});

Once the class is written, we can define our container:

const Container = createContainer([
  { name: 'foo', useClass: Foo }
]);

Which can now be resolved as follows:

const container = resolveContainer(Container);

const fooInstance = container.get('foo');
fooInstance.text(); // `foo text`

Dependencies

Dependencies can be handled while defining the providers.

Let's say you have a Foo and Bar classes, and Bar depends on Foo:

class Foo {
  text() {
    return 'foo text';
  }
}

class Bar {
  constructor({ foo }) { // instance of Foo is given as constructor argument
    this.foo = foo;
  }

  fooText() {
    return this.foo.text();
  }
}

Once we have them as classes, we can pass them on to our container definition as follows:

const Container = createContainer([
  { name: 'foo', useClass: Foo },
  { name: 'bar', useClass: Bar, deps: ['foo'] }
]);

We are telling our Container that when bar is instantiated, pass the instance of foo to its constructor.

const container = resolveContainer(Container);

const bar = container.get('bar');
bar.fooText(); // `foo text`

The deps key can also be provided as an object instead of an array, where the keys are the container's provider names, and values are the names the target class is expecting.

API

createClass(extend = {})

Creates and returns a class.

import { createClass } from 'diyai';

const MyClass = createClass({
  initialize(deps) {
    // `deps` contains injected dependencies if any.
    // Should be treated as constructors of ES6 classes.
  },

  someMethod() {
    return true;
  }
});

resolveContainer(Container)

Returns instance of resolved container.

createContainer(providers = [], options = {})

Creates and returns a container class.

providers

An array of providers.

A single provider object would contain:

{
  name: 'uniqueNameHere',

  // and one of the following keys
  useValue: 'direct value of any type', // OR
  useFactory: () => 'returned value of any type', OR
  useClass: SomeClass, // created via `createClass` or ES6 classes

  // if `useClass` or `useFactory` is used, then `deps` can be provided
  deps: ['depName1', 'depName2', ...]

  // `deps` can also be an object:
  deps: { nameInContainer: 'nameExpectedInArgs' }
}

options

  • containerName: defaults to container.

This means, the container instance itself can be obtained as:

container.get('container'); // `container` instance

Thanks

  • Angular 2: For their Injector, since this project is an implementation of that in ES6 with no external dependencies.

License

MIT © Fahad Ibnay Heylaal