npmpackage.info

Gathering detailed insights and metrics for inversify-props

Other packages similar to inversify-props

nmbg-inversify-props

1.4.97

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

inversify-props-esm

2.0.3

This package is a wrapper of [Inversify (ES Module Support)](https://github.com/achmadk/inversify-esm) to simplify how inject your dependencies with property decorators in the components, made with TypeScript and compatible with Vue, React and other compo

inversify-hooks

2.1.6

Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.

@achmadk/inversify-props

1.0.5

Gathering detailed insights and metrics for inversify-props

inversify-props - 2.2.6 | npmpackage.info

inversify-props

Wrapper of Inversify to inject your dependencies in the components, made with TypeScript and compatible with Vue, React and other component libraries.

2.2.6

MIT

TypeScript

11.49 kB

860,136 2

Installations

npm install inversify-props

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

12.18.2

NPM Version

6.14.5 Score

82.1

Supply Chain

99.5

Quality

76.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

48

Total

106

Closed

29

Merged

29

Issues

Open

5

Total

23

Closed

18

Releases

New 2.0 with breaking changes

2.0.0

Updated on Apr 20, 2020

View All 1 releases

Languages

TypeScript

JavaScript

TypeScript (96.11%)

JavaScript (3.89%)

Developer

CKGrafico

Download Statistics

Total Downloads

860,136

Last Day

Last Week

4,194

Last Month

18,052

Last Year

225,383

GitHub Statistics

MIT License

85 Stars

125 Commits

9 Forks

2 Watchers

49 Branches

4 Contributors

Updated on May 10, 2024

Bundle Size

50.67 kB

Minified

11.49 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 4 Contributors

Package Meta Information

Latest Version

2.2.6

Package Id

inversify-props@2.2.6

Unpacked Size

74.79 kB

Size

15.93 kB

File Count

NPM Version

6.14.5

Node Version

12.18.2

Total Downloads

Cumulative downloads

Total Downloads

860,136

Dependencies

inversify

Dev Dependencies

@babel/plugin-syntax-dynamic-import @babel/preset-env @types/jest core-js jest reflect-metadata ts-jest typescript

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 contributors

logo

Installation

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

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

How to use

1import 'reflect-metadata'; // Import only once
2import { container, inject } from 'inversify-props';
3
4container.addSingleton<IService1>(Service1);
5container.addSingleton<IService2>(Service2);
6container.addSingleton(Service3);
7
8export default class extends Component {
9  @inject() service1: IService1;
10  @inject() _service2: IService2;
11  @inject() Service3: IService3;
12}

How to use this library outside of a component

1import 'reflect-metadata'; // Import only once
2import { cid, container, inject } from 'inversify-props';
3
4container.addSingleton<IService1>(Service1, 'MyService1');
5
6// You can inject in other services as a Prop
7export class MyOtherService {
8  @inject() private service1: IService1;
9}
10
11// Also in the constructor as a param
12export class MyOtherService {
13  constructor(@inject() private exampleService: IExampleService) {}
14}
15
16// Or in any function as a variable
17export function myHelper() {
18  const service1 = container.get<IService1>(cid.IService1);
19}
20
21// camelCase, PascalCase and _ are allowed
22export class MyOtherService {
23  @inject() private service1: IService1;
24  @inject() private _service1: IService1;
25  @inject() private Service1: IService1;
26  @inject() private _Service1: IService1;
27}

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

1import 'reflect-metadata'; // Import only once
2import { container, inject } from 'inversify-props';
3
4container.addSingleton<IService1>(Service1, 'MyService1');
5
6export default class extends Component {
7  @inject('MyService1') service1: IService1;
8}

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

1import 'reflect-metadata'; // Import only once
2import { Container, inject, setContainer } from 'inversify-props';
3
4setContainer(new Container());
5container.addSingleton<IService1>(Service1, 'MyService1');
6
7export default class extends Component {
8  @inject('MyService1') service1: IService1;
9}

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

1{
2  "compilerOptions": {
3    "target": "es5",
4    "lib": ["es6"],
5    "types": ["reflect-metadata"],
6    "module": "commonjs",
7    "moduleResolution": "node",
8    "experimentalDecorators": true,
9    "emitDecoratorMetadata": true
10  }
11}

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.

1// iservice1.ts
2export interface IService1 {
3  method1(): string;
4}
5
6// service.ts
7export class Service1 implements IService1 {
8  method1(): string {
9    return 'method 1';
10  }
11}

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

1container.addSingleton<IService1>(Service1);

How to test

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

Reset the Container
Register again all the dependencies of the container (this is your job)
Mock all the necessary dependencies for the test

1beforeEach(() => {
2  resetContainer();
3  containerBuilder();
4  mockSingleton<IHttpService>(cid.IHttpService, HttpServiceMock);
5});

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.

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

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 😉).

1new UglifyJSPlugin({
2  uglifyOptions: {
3    keep_classnames: true,
4    keep_fnames: true
5  }
6});

1new TerserPlugin({
2  terserOptions: {
3    keep_classnames: true,
4    keep_fnames: true
5  }
6});

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

151 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: CVE-2024-4067 / GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-hm92-vgmw-qfmx
Warn: Project is vulnerable to: GHSA-897m-rjf5-jp39
Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-x3cc-x39p-42qx
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc
Warn: Project is vulnerable to: GHSA-pch5-whg9-qr2r
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg

Score

2

/10

Last Scanned on 2025-06-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to inversify-props

Other packages similar to inversify-props

inversify-props

Installations

Developer Guide

Yes

CommonJS

12.18.2

6.14.5

Score

Pull Requests

48

106

29

29

Issues

5

23

18

Releases

Languages

Developer

CKGrafico

Download Statistics

GitHub Statistics

Bundle Size

50.67 kB

11.49 kB

Maintainers

Package Meta Information

Total Downloads

860,136

Dependencies

Dev Dependencies

Inversify Props

Installation

How to use

How to use this library outside of a component

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

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

Why we made this package

How to register a dependency

How to test

Other ways to register a class

How to use in your components

Some examples

How to configure Uglify or Terser

10

10

0

0

0

0

0

0

0

2

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads