{"id":16990863,"url":"https://github.com/ckgrafico/inversify-props","last_synced_at":"2025-10-26T18:48:23.549Z","repository":{"id":38428310,"uuid":"173606056","full_name":"CKGrafico/inversify-props","owner":"CKGrafico","description":"Wrapper of Inversify to inject your dependencies in the components, made with TypeScript and compatible with Vue, React and other component libraries.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:34:54.000Z","size":7103,"stargazers_count":85,"open_issues_count":53,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T21:19:22.667Z","etag":null,"topics":["component","dependency-injection","injection","lit-element","polymer","react","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CKGrafico.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ckgrafico"]}},"created_at":"2019-03-03T17:21:38.000Z","updated_at":"2024-05-10T05:32:11.000Z","dependencies_parsed_at":"2024-06-18T16:46:47.339Z","dependency_job_id":"e54d2530-c963-4b4b-a6b4-b0c7c9fb30e2","html_url":"https://github.com/CKGrafico/inversify-props","commit_stats":{"total_commits":95,"total_committers":7,"mean_commits":"13.571428571428571","dds":"0.42105263157894735","last_synced_commit":"71f0c742d4a7f85c2c38f29da9f014914b87e593"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Finversify-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Finversify-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Finversify-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Finversify-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CKGrafico","download_url":"https://codeload.github.com/CKGrafico/inversify-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248112093,"owners_count":21049596,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","dependency-injection","injection","lit-element","polymer","react","vue"],"created_at":"2024-10-14T03:24:02.052Z","updated_at":"2025-10-26T18:48:23.477Z","avatar_url":"https://github.com/CKGrafico.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ckgrafico"],"categories":[],"sub_categories":[],"readme":"# Inversify Props\n\nThis 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.\n\nDo you use Hooks? You can try the experimental package [inversify-hooks](https://github.com/ckgrafico/inversify-hooks)\n\n![GitHub last commit](https://img.shields.io/github/last-commit/CKGrafico/inversify-props/master.svg)\n[![GitHub license](https://img.shields.io/github/license/CKGrafico/inversify-props.svg)](https://github.com/CKGrafico/inversify-props/blob/master/LICENSE)\n[![GitHub forks](https://img.shields.io/github/forks/CKGrafico/inversify-props.svg)](https://github.com/CKGrafico/inversify-props/network)\n![GitHub contributors](https://img.shields.io/github/contributors/CKGrafico/inversify-props.svg)\n[![GitHub issues](https://img.shields.io/github/issues/CKGrafico/inversify-props.svg)](https://github.com/CKGrafico/inversify-props/issues)\n\n![logo](https://i.imgur.com/syVbzU6.gif)\n\n## Installation\n\n```bash\n$ npm install inversify-props reflect-metadata --save\n```\n\nThe inversify-props type definitions are included in the inversify-props npm package.\n\n## How to use\n\n```ts\nimport 'reflect-metadata'; // Import only once\nimport { container, inject } from 'inversify-props';\n\ncontainer.addSingleton\u003cIService1\u003e(Service1);\ncontainer.addSingleton\u003cIService2\u003e(Service2);\ncontainer.addSingleton(Service3);\n\nexport default class extends Component {\n  @inject() service1: IService1;\n  @inject() _service2: IService2;\n  @inject() Service3: IService3;\n}\n```\n\u003e :warning: If you use a minifier or a obfuscator, you need to configure it to preserve the class and function names in the build output. See this [paragraph](https://github.com/CKGrafico/inversify-props#how-to-configure-uglify-or-terser) for more info.\n\n## How to use this library outside of a component\n\n```ts\nimport 'reflect-metadata'; // Import only once\nimport { cid, container, inject } from 'inversify-props';\n\ncontainer.addSingleton\u003cIService1\u003e(Service1, 'MyService1');\n\n// You can inject in other services as a Prop\nexport class MyOtherService {\n  @inject() private service1: IService1;\n}\n\n// Also in the constructor as a param\nexport class MyOtherService {\n  constructor(@inject() private exampleService: IExampleService) {}\n}\n\n// Or in any function as a variable\nexport function myHelper() {\n  const service1 = container.get\u003cIService1\u003e(cid.IService1);\n}\n\n// camelCase, PascalCase and _ are allowed\nexport class MyOtherService {\n  @inject() private service1: IService1;\n  @inject() private _service1: IService1;\n  @inject() private Service1: IService1;\n  @inject() private _Service1: IService1;\n}\n```\n\n## You can also use any ID that you prefer if you don't want to use auto generated ids\n\n```ts\nimport 'reflect-metadata'; // Import only once\nimport { container, inject } from 'inversify-props';\n\ncontainer.addSingleton\u003cIService1\u003e(Service1, 'MyService1');\n\nexport default class extends Component {\n  @inject('MyService1') service1: IService1;\n}\n```\n\n## This library provides a container to make your experience easier, but you can create your own container.\n\n```ts\nimport 'reflect-metadata'; // Import only once\nimport { Container, inject, setContainer } from 'inversify-props';\n\nsetContainer(new Container());\ncontainer.addSingleton\u003cIService1\u003e(Service1, 'MyService1');\n\nexport default class extends Component {\n  @inject('MyService1') service1: IService1;\n}\n```\n\n\u003e :warning: **Important!** inversify-props requires TypeScript \u003e= 2.0 and the `experimentalDecorators`, `emitDecoratorMetadata`, `types` and `lib`\n\u003e compilation options in your `tsconfig.json` file.\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"es6\"],\n    \"types\": [\"reflect-metadata\"],\n    \"module\": \"commonjs\",\n    \"moduleResolution\": \"node\",\n    \"experimentalDecorators\": true,\n    \"emitDecoratorMetadata\": true\n  }\n}\n```\n\n## Why we made this package\n\nThe 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.\n\n**You probably don't need this if:**\n\n- You have experience using inversify and you don't need to simplify the process.\n- You want to use all the power of inversify, we are only injecting dependencies like services, helpers, utils...\n- You don't want to inject your dependencies as properties.\n\n## How to register a dependency\n\nInversify 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 🤓.\n\nFirst of all create a class and an interface with the public methods of your class.\n\n```ts\n// iservice1.ts\nexport interface IService1 {\n  method1(): string;\n}\n\n// service.ts\nexport class Service1 implements IService1 {\n  method1(): string {\n    return 'method 1';\n  }\n}\n```\n\nNow is time to register the service in the container, we usually do that in `app.container.ts` or `app.ts`.\n\n```ts\ncontainer.addSingleton\u003cIService1\u003e(Service1);\n```\n\n## How to test\n\nThere are some helper functions to test, the recommended way to test is beforeEach test:\n\n1. Reset the Container\n2. Register again all the dependencies of the container (this is your job)\n3. Mock all the necessary dependencies for the test\n\n```ts\nbeforeEach(() =\u003e {\n  resetContainer();\n  containerBuilder();\n  mockSingleton\u003cIHttpService\u003e(cid.IHttpService, HttpServiceMock);\n});\n```\n\n## Other ways to register a class\n\nAs [inversify accepts](https://github.com/inversify/InversifyJS/blob/master/wiki/scope.md), we have configured three types of registration.\n\n- Singleton: The dependency will be created only once, one dependency - one object.\n- Transient: The dependency will be created each time is injected, one dependency - one object per injection.\n- Request: Special case of singleton, more info in [official docs](https://github.com/inversify/InversifyJS/blob/master/wiki/scope.md#about-inrequestscope).\n\n## How to use in your components\n\nOnce your dependencies are registered in the container, is simple as create a property with the name and the interface.\n\n```ts\nexport default class extends Component {\n  @inject() service1: IService1;\n}\n```\n\n\u003e 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`.\n\n## Some examples\n\n- [Basic example with Vue](https://github.com/CKGrafico/inversify-props/tree/master/examples/vue)\n- [Basic example with LitElement](https://github.com/CKGrafico/inversify-props/tree/master/examples/lit-element)\n- [Used in my Boilerplates](https://boilerplates.js.org)\n\n## How to configure Uglify or Terser\n\nIf 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` 😉).\n\n```ts\nnew UglifyJSPlugin({\n  uglifyOptions: {\n    keep_classnames: true,\n    keep_fnames: true\n  }\n});\n```\n\n```ts\nnew TerserPlugin({\n  terserOptions: {\n    keep_classnames: true,\n    keep_fnames: true\n  }\n});\n```\n\n\u003eNote: **Vue-cli** uses TerserPlugin under the hood.   \nYou can configure the Terser plugin inside your *vue.config.js* file in `configureWebpack` node via the `optimization.minimizer` property.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckgrafico%2Finversify-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckgrafico%2Finversify-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckgrafico%2Finversify-props/lists"}