Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
inversify-hooks
Advanced tools
inversify-hooks - npm Package Compare versions
Comparing version 1.0.1 to 1.2.0
| { | ||
| "name": "inversify-hooks", | ||
| "version": "1.0.1", | ||
| "description": "Under construction", | ||
| "version": "1.2.0", | ||
| "description": "Wrapper of inversify-props to inject your dependencies in the components, made with TypeScript using hooks.", | ||
| "main": "dist/index.js", | ||
@@ -14,3 +14,3 @@ "types": "dist/index.d.ts", | ||
| "type": "git", | ||
| "url": "git+https://github.com/CKGrafico/inversify-props.git" | ||
| "url": "git+https://github.com/CKGrafico/inversify-hooks.git" | ||
| }, | ||
@@ -27,5 +27,4 @@ "keywords": [ | ||
| "dependencies": { | ||
| "inversify": "^5.0.1", | ||
| "typescript": "^3.3.3333" | ||
| "inversify-props": "^1.0.0" | ||
| } | ||
| } |
| # Inversify Props | ||
| This package is a wrapper of [Inversify](https://github.com/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. | ||
| This package is a wrapper of [inversify-props](https://github.com/ckgrafico/inversify-props) to simplify how inject your dependencies in components with hooks. | ||
|  | ||
| [](https://github.com/CKGrafico/inversify-props/blob/master/LICENSE) | ||
| [](https://github.com/CKGrafico/inversify-props/network) | ||
|  | ||
| [](https://github.com/CKGrafico/inversify-props/issues) | ||
|  | ||
| [](https://github.com/CKGrafico/inversify-hooks/blob/master/LICENSE) | ||
| [](https://github.com/CKGrafico/inversify-hooks/network) | ||
|  | ||
| [](https://github.com/CKGrafico/inversify-hooks/issues) | ||
| ## Installation | ||
| ``` | ||
| npm install --save inversify-props | ||
| npm install --save inversify-hooks | ||
| ``` | ||
@@ -20,5 +20,4 @@ | ||
| export default class extends Component { | ||
| @Inject() service1: IService1; | ||
| @Inject() service2: IService2; | ||
| function ExampleComponent() { | ||
| const service1 = useService<IService1>('IService1'); | ||
| } | ||
@@ -28,64 +27,20 @@ ``` | ||
| ## 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 can learn more about why we made this packages in the [original repo](https://github.com/ckgrafico/inversify-props#why-we-made-this-package). | ||
| **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 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 🤓. | ||
| If you're not familizared of how to register dependencies, [check the docs](https://github.com/ckgrafico/inversify-props#how-register-a-dependency). | ||
| 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 | ||
| @injectable() | ||
| export class Service1 implements IService1 { | ||
| method1(): string { | ||
| return 'method 1'; | ||
| } | ||
| } | ||
| ``` | ||
| > Note: Don't forget to decorate the class as `@injectable()` this will made your class candidate to be injectable inside other. | ||
| 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); | ||
| ``` | ||
| ## Other ways to register a class | ||
| As [inversify accepts](https://github.com/inversify/InversifyJS/blob/master/wiki/scope.md), 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](https://github.com/inversify/InversifyJS/blob/master/wiki/scope.md#about-inrequestscope). | ||
| ## 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. | ||
| Once your dependencies are registered in the container, is simple use the hook to get the dependency. | ||
| ``` | ||
| export default class extends Component { | ||
| @Inject() service1: IService1; | ||
| function ExampleComponent() { | ||
| const service1 = useService<IService1>('IService1'); | ||
| } | ||
| ``` | ||
| > Note: Part of the magic is that the name of the property has to be the name of the interface in camelCase without the 'I', this is how we don't need to add the `id`. | ||
| ## How to configure uglify | ||
| If you want to use uglify to ofuscate the code, you will need to add this options to preserve the names of the clases (we need them to generate the ids `magically` 😉). | ||
| If you're using uglify or similar you need to [configure well the plugin](https://github.com/ckgrafico/inversify-props#how-to-configure-uglify). | ||
| ``` | ||
| new UglifyJSPlugin({ | ||
| uglifyOptions: { | ||
| keep_classnames: true, | ||
| keep_fnames: true, | ||
| } | ||
| }); | ||
| ``` | ||
| ## Next steps | ||
| - Investigate if can we remove `@injectable` | ||
| - Remove id param, and use `magic if` like in inversify-props. | ||
@@ -1,15 +0,6 @@ | ||
| import 'reflect-metadata'; | ||
| export * from 'inversify-props'; | ||
| import { useService } from './use-service.hook'; | ||
| import { injectable } from 'inversify'; | ||
| import { Container } from './container'; | ||
| import { Inject } from './helpers'; | ||
| // How to inject a dependency | ||
| // @Inject() nameService: INameService; | ||
| export const container: Container = new Container(); | ||
| export { | ||
| Inject, | ||
| injectable | ||
| useService | ||
| }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
1
- Number of package files
- increased by62.5%
13
Worsened metrics
- Total package byte prevSize
- decreased by-36.54%
5656
- Lines of code
- decreased by-56.36%
48
- Number of lines in readme file
- decreased by-50%
45
Dependency changes
+ Addedinversify-props@^1.0.0
+ Addedinversify-props@1.5.0(transitive)
- Removedinversify@^5.0.1
- Removedtypescript@^3.3.3333