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

inversify-props

v2.2.6

Published

Wrapper to use inversify as property decorator with TypeScript, useful for component libraries like Vue, React or LitElement

Downloads

18,626

Readme

Inversify Props

This package is a wrapper of Inversify to simplify how inject your dependencies with property decorators in the components, made with TypeScript and compatible with Vue, React and other component libraries.

Do you use Hooks? You can try the experimental package inversify-hooks

GitHub last commit GitHub license GitHub forks GitHub contributors GitHub issues

logo

Installation

$ npm install inversify-props reflect-metadata --save

The inversify-props type definitions are included in the inversify-props npm package.

How to use

import 'reflect-metadata'; // Import only once
import { container, inject } from 'inversify-props';

container.addSingleton<IService1>(Service1);
container.addSingleton<IService2>(Service2);
container.addSingleton(Service3);

export default class extends Component {
  @inject() service1: IService1;
  @inject() _service2: IService2;
  @inject() Service3: IService3;
}

How to use this library outside of a component

import 'reflect-metadata'; // Import only once
import { cid, container, inject } from 'inversify-props';

container.addSingleton<IService1>(Service1, 'MyService1');

// You can inject in other services as a Prop
export class MyOtherService {
  @inject() private service1: IService1;
}

// Also in the constructor as a param
export class MyOtherService {
  constructor(@inject() private exampleService: IExampleService) {}
}

// Or in any function as a variable
export function myHelper() {
  const service1 = container.get<IService1>(cid.IService1);
}

// camelCase, PascalCase and _ are allowed
export class MyOtherService {
  @inject() private service1: IService1;
  @inject() private _service1: IService1;
  @inject() private Service1: IService1;
  @inject() private _Service1: IService1;
}

You can also use any ID that you prefer if you don't want to use auto generated ids

import 'reflect-metadata'; // Import only once
import { container, inject } from 'inversify-props';

container.addSingleton<IService1>(Service1, 'MyService1');

export default class extends Component {
  @inject('MyService1') service1: IService1;
}

This library provides a container to make your experience easier, but you can create your own container.

import 'reflect-metadata'; // Import only once
import { Container, inject, setContainer } from 'inversify-props';

setContainer(new Container());
container.addSingleton<IService1>(Service1, 'MyService1');

export default class extends Component {
  @inject('MyService1') service1: IService1;
}

:warning: Important! inversify-props requires TypeScript >= 2.0 and the experimentalDecorators, emitDecoratorMetadata, types and lib compilation options in your tsconfig.json file.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6"],
    "types": ["reflect-metadata"],
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Why we made this package

The idea is to add a simple wrapper that helps us to inject dependencies in components using property decorators, we have also extend a little inversify adding some methods that make our experience injecting dependencies easier.

You probably don't need this if:

  • You have experience using inversify and you don't need to simplify the process.
  • You want to use all the power of inversify, we are only injecting dependencies like services, helpers, utils...
  • You don't want to inject your dependencies as properties.

How to register a dependency

Inversify needs an id to register our dependencies, this wrapper is going to do this for you 'magically' but if you want to uglify the code, keep reading the docs 🤓.

First of all create a class and an interface with the public methods of your class.

// iservice1.ts
export interface IService1 {
  method1(): string;
}

// service.ts
export class Service1 implements IService1 {
  method1(): string {
    return 'method 1';
  }
}

Now is time to register the service in the container, we usually do that in app.container.ts or app.ts.

container.addSingleton<IService1>(Service1);

How to test

There are some helper functions to test, the recommended way to test is beforeEach test:

  1. Reset the Container
  2. Register again all the dependencies of the container (this is your job)
  3. Mock all the necessary dependencies for the test
beforeEach(() => {
  resetContainer();
  containerBuilder();
  mockSingleton<IHttpService>(cid.IHttpService, HttpServiceMock);
});

Other ways to register a class

As inversify accepts, we have configured three types of registration.

  • Singleton: The dependency will be created only once, one dependency - one object.
  • Transient: The dependency will be created each time is injected, one dependency - one object per injection.
  • Request: Special case of singleton, more info in official docs.

How to use in your components

Once your dependencies are registered in the container, is simple as create a property with the name and the interface.

export default class extends Component {
  @inject() service1: IService1;
}

Note: Part of the magic is that the name of the property has to be the name of the interface, this is how we don't need to add the id.

Some examples

How to configure Uglify or Terser

If you want to use Uglify or Terser to obfuscate the code, you will need to add this options to preserve the names of the classes (we need them to generate the ids magically 😉).

new UglifyJSPlugin({
  uglifyOptions: {
    keep_classnames: true,
    keep_fnames: true
  }
});
new TerserPlugin({
  terserOptions: {
    keep_classnames: true,
    keep_fnames: true
  }
});