{"id":44594193,"url":"https://github.com/dogebonker/wc-dependency-injection","last_synced_at":"2026-02-17T18:04:05.303Z","repository":{"id":119632769,"uuid":"454100303","full_name":"dogebonker/wc-dependency-injection","owner":"dogebonker","description":"Web components dependency injection solution provider.","archived":false,"fork":false,"pushed_at":"2022-02-01T16:53:06.000Z","size":89,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-14T21:51:46.497Z","etag":null,"topics":["dependency-injection","typescript","web-component","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dogebonker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-01-31T17:20:13.000Z","updated_at":"2022-02-01T20:33:56.000Z","dependencies_parsed_at":"2023-06-14T19:31:00.351Z","dependency_job_id":null,"html_url":"https://github.com/dogebonker/wc-dependency-injection","commit_stats":null,"previous_names":["dogebonker/wc-dependency-injection","skylightxo/wc-dependency-injection"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dogebonker/wc-dependency-injection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogebonker%2Fwc-dependency-injection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogebonker%2Fwc-dependency-injection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogebonker%2Fwc-dependency-injection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogebonker%2Fwc-dependency-injection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dogebonker","download_url":"https://codeload.github.com/dogebonker/wc-dependency-injection/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogebonker%2Fwc-dependency-injection/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29439820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T07:24:13.446Z","status":"ssl_error","status_checked_at":"2026-02-14T07:23:58.969Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dependency-injection","typescript","web-component","web-components"],"created_at":"2026-02-14T08:00:54.597Z","updated_at":"2026-02-14T08:01:05.343Z","avatar_url":"https://github.com/dogebonker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wc-dependency-injection\n\n## \u003cimg src=\"https://web-components-resources.appspot.com/static/logo.svg\" alt=\"Web Components\" width=\"32\" height=\"32\" /\u003e Dependency Injection Solution for Web Components 😎\n\nAngular-like dependency injection provider.\n\n## Credits\n\nThis code has been taken from the [web components dependency injection](https://www.thinktecture.com/en/web-components/dependency-injection/) article, published by [Manuel Rauber](https://www.thinktecture.com/en/manuel-rauber/) and [Yannick Baron](https://www.thinktecture.com/en/yannick-baron/). You can find their github repository [here](https://github.com/thinktecture-labs/web-components-dependency-injection) and github profiles [Manuel Rauber](https://github.com/ManuelRauber) and [Yannick Baron](https://github.com/npx).\n\n## Notes\n\n\u003e Please, do not use this package if you are not building a whole application with web components.\n\nIf your main goal is not the development of a scalable application with web components, do not try to use dependency injection. This approach will make your components not reusable because they are now dependent on project-specific code.\n\n\u003e Keep in mind that you need to control the order of your web components registration.\n\nIn order for this package to work correctly, ensure that your DOM tree matches the order of component registration. It is required for the parent component class decorated by `@ContainerProvider` and all of the following component classes in the DOM tree to be registered first. This is because of the web component data flow model - data down, events up. For the possible solutions of this problem, please, refer to [this](https://www.thinktecture.com/en/web-components/dependency-injection/) article.\n\n## Usage\n\n\u003e **_Warning! ⚠️_**\n\nIn order to use this package you will need to declare an `experimentalDecorators` property in either your `jsconfig.json` or `tsconfig.json` and set it's value to `true`.\n\nConsidering your web component tree looks like this:\n\n```html\n\u003cmy-root\u003e\n  \u003cmy-child\u003e\u003c/my-child\u003e\n\u003c/my-root\u003e\n```\n\n```js\n// my-root.component.js\n\nimport { ContainerProvider } from \"wc-dependency-injection\";\nimport { Logger } from \"@services/logger.service.ts\";\n\n@ContainerProvider([{ provide: Logger, useClass: Logger }])\nexport class MyRoot extends HTMLElement {\n  // ...\n}\n\n// my-child.component.js\n\nimport { Inject } from \"wc-dependency-injection\";\n\nexport class MyChild extends HTMLElement {\n  @Inject() logger: Logger;\n\n  connectedCallback() {\n    this.logger.log(\"Hello World!\");\n  }\n}\n```\n\n## Installation\n\n```sh\nnpm install wc-dependency-injection\n```\n\n## Development\n\nIf you want to contribute to this library - you are very welcome! Please create a pull request and describe the changes you made and which problem it solves.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogebonker%2Fwc-dependency-injection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdogebonker%2Fwc-dependency-injection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogebonker%2Fwc-dependency-injection/lists"}