{"id":22268960,"url":"https://github.com/ashleydavis/fusion","last_synced_at":"2025-07-28T12:31:28.263Z","repository":{"id":39093458,"uuid":"271922120","full_name":"ashleydavis/fusion","owner":"ashleydavis","description":"A simple automated dependency injection library for TypeScript, supporting React class and functional components.","archived":false,"fork":false,"pushed_at":"2023-03-05T00:15:55.000Z","size":2511,"stargazers_count":22,"open_issues_count":18,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-29T11:56:33.575Z","etag":null,"topics":["dependency-injection","injection","ioc","react","typescript"],"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/ashleydavis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-06-13T01:50:01.000Z","updated_at":"2024-08-15T23:19:58.000Z","dependencies_parsed_at":"2024-06-21T12:53:51.427Z","dependency_job_id":"19658009-5b9b-4baa-b42f-d3dbffddcd69","html_url":"https://github.com/ashleydavis/fusion","commit_stats":{"total_commits":29,"total_committers":1,"mean_commits":29.0,"dds":0.0,"last_synced_commit":"44472fa59faff1499de659a9260bc510d9dd2a65"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashleydavis%2Ffusion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashleydavis%2Ffusion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashleydavis%2Ffusion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashleydavis%2Ffusion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashleydavis","download_url":"https://codeload.github.com/ashleydavis/fusion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227905499,"owners_count":17837906,"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":["dependency-injection","injection","ioc","react","typescript"],"created_at":"2024-12-03T11:14:35.061Z","updated_at":"2024-12-03T11:14:35.831Z","avatar_url":"https://github.com/ashleydavis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fusion\n\nA simple automated dependency injection library for TypeScript, supporting React class and functional components.\n\nLearn more about Fusion in this blog post:\n- [https://www.the-data-wrangler.com/roll-your-own-di](https://www.the-data-wrangler.com/roll-your-own-di)\n\nIf you like this project, please star this repo and [support my work](https://www.codecapers.com.au/about#support-my-work)\n\n\n# Aims\n\n- To have a simple dependency injection library with minimal configuration that can be used in TypeScript code and with React.\n\n# Features\n\n- Less than 400 lines of code (used to be 300, but you know how it goes, I keep adding extra stuff)\n- Configuration via TypeScript decorators.\n- Injects properties into generic TypeScript class.\n- Injects properties into React class components.\n- Injects parameters into React functional components.\n  - Unfortuntely decorators can't be applied to global functions (seems like a big thing missing from TypeScript??) - so the injection approach for functional components doesn't use decorators.\n- Automated dependency injection. \n  - Just add mark up and let Fusion do the wiring for you.\n- Detects and breaks circular references (with an error) at any level of nesting.\n  - But only when NODE_ENV is not set to \"production\" (to make it fast in production).\n- Unit tested.\n\n# Examples\n\nSee [the `examples` sub-directory](https://github.com/ashleydavis/fusion/tree/master/examples) in this repo for runnable Node.js and React examples.\n\nRead the individual readme files for instructions.\n\nThere's also [a separate repo](https://github.com/ashleydavis/fusion-examples) with separate examples for React class components and functional components.\n\n# Usage\n\nFirst enable decorators in your `tsconfig.json` file:\n\n```json\n\"experimentalDecorators\": true\n```\n\nInstall the Fusion library:\n\n```bash\nnpm install --save @codecapers/fusion\n```\n\nImport the bits you need:\n\n```typescript\nimport { InjectProperty, InjectableClass, InjectableSingleton, injectable } from \"@codecapers/fusion\";\n```\n\n## Create dependencies\n\nCreate dependencies that can be injected:\n\n### `log.ts`\n```typescript\n//\n// Interface to the logging service.\n//\ninterface ILog {\n    info(msg: string): void;\n}\n\n//\n// This is a lazily injected singleton that's constructed when it's injected.\n//\n@InjectableSingleton(\"ILog\")\nclass Log implements ILog {\n    info(msg: string): void {\n        console.log(msg);\n    }\n}\n```\n\n**Note:** if you can't get over the magic string, please skip to the last section!\n\n## Inject properties into classes\n\nMark up your class to have dependencies injected:\n\n### `my-class.ts`\n```typescript\nimport { InjectProperty, InjectableClass } from \"@codecapers/fusion\";\nimport { ILog } from \"./log\";\n\n@InjectableClass()\nclass MyClass {\n\n    //\n    // Injects the logging service into this property.\n    //\n    @InjectProperty(\"ILog\")\n    log!: ILog;\n\n    myFunction() {\n        //\n        // Use the injected logging service.\n        // By the time we get to this code path the logging service \n        // has been automatically constructed and injected.\n        //\n        this.log.info(\"Hello world!\");\n    }\n\n    // ... Other functions and other stuff ...\n}\n```\n\nNow instance your injectable class:\n\n\n```typescript\nimport { MyClass } from \"./my-class\";\n\n// The logging singleton is lazily created at this point.\nconst myObject = new MyClass(); \n```\n\nInjected properties are solved during construction and available for use after the consturctor has returned.\n\nSo after your class is constructed you can call functions that rely on injected properties:\n\n```typescript\nmyObject.myFunction();\n```\n\n## Inject parameters into functions \n\nThis can be used for injection into React functional components.\n\nCreate a functional component that needs dependencies:\n\n### `my-component.jsx`\n```javascript\nimport React from \"react\";\nimport { injectable } from \"@codecapers/fusion\";\n\nfunction myComponent(props, context, dependency1, dependency2) {\n\n    // Setup the component, use your dependencies...\n\n    return (\n        \u003cdiv\u003e\n            // ... Your JSX goes here ...\n        \u003c/div\u003e;\n    );\n}\n```\n\nWrap your functional component in the `injectable` higher order component (HOC):\n\n### `my-component.jsx` (extended)\n```javascript\nexport default injectable(myComponent, [\"IDependency1\", \"IDependency2\"]);\n```\n\nThe exported component will have the dependencies injected as parameters in the order specified (after props and context of course).\n\n## Getting rid of the magic strings\n\nI like to get rid of the magic string by using constants co-located with the dependencies:\n\n### `log.ts`\n```javascript\nconst ILog_id = \"ILog\";\n\n//\n// Interface to the logging service.\n//\ninterface ILog {\n    info(msg: string): void;\n}\n\n//\n// This is a lazily injected singleton that's constructed when it's injected.\n//\n@InjectableSingleton(ILog_id)\nclass Log implements ILog {\n    info(msg: string): void {\n        console.log(msg);\n    }\n}\n```\n\nThen use the constant to identify your dependencies:\n\n### `my-class.ts`\n```typescript\n@InjectableClass()\nclass MyClass {\n\n    //\n    // Injects the logging service into this property.\n    //\n    @InjectProperty(ILog_id)\n    log!: ILog;\n\n    // ... Other properties and methods ...\n}\n```\n\n\nHave fun! There's more to it than this of course, but getting started is that simple.\n\nSee [the blog post](https://www.the-data-wrangler.com/roll-your-own-di) to learn more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashleydavis%2Ffusion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashleydavis%2Ffusion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashleydavis%2Ffusion/lists"}