{"id":28454961,"url":"https://github.com/inversify/inversify-vanillajs-helpers","last_synced_at":"2025-06-28T16:33:10.534Z","repository":{"id":57275528,"uuid":"68301996","full_name":"inversify/inversify-vanillajs-helpers","owner":"inversify","description":"Some helpers for the development of InversifyJS applications with VanillaJS or Babel","archived":false,"fork":false,"pushed_at":"2020-05-25T16:19:02.000Z","size":192,"stargazers_count":33,"open_issues_count":7,"forks_count":6,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-06-06T21:14:23.667Z","etag":null,"topics":["dependency-injection","es6-javascript","inversifyjs","inversion-of-control","javascript"],"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/inversify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-15T14:36:41.000Z","updated_at":"2023-12-11T12:43:11.000Z","dependencies_parsed_at":"2022-09-15T19:12:47.520Z","dependency_job_id":null,"html_url":"https://github.com/inversify/inversify-vanillajs-helpers","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/inversify/inversify-vanillajs-helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inversify%2Finversify-vanillajs-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inversify%2Finversify-vanillajs-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inversify%2Finversify-vanillajs-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inversify%2Finversify-vanillajs-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inversify","download_url":"https://codeload.github.com/inversify/inversify-vanillajs-helpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inversify%2Finversify-vanillajs-helpers/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262460335,"owners_count":23314716,"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","es6-javascript","inversifyjs","inversion-of-control","javascript"],"created_at":"2025-06-06T21:14:26.727Z","updated_at":"2025-06-28T16:33:10.529Z","avatar_url":"https://github.com/inversify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inversify-vanillajs-helpers\n\n[![Join the chat at https://gitter.im/inversify/inversify-vanillajs-helpers](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/inversify/inversify-vanillajs-helpers?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://secure.travis-ci.org/inversify/inversify-vanillajs-helpers.svg?branch=master)](https://travis-ci.org/inversify/inversify-vanillajs-helpers)\n[![Test Coverage](https://codeclimate.com/github/inversify/inversify-vanillajs-helpers/badges/coverage.svg)](https://codeclimate.com/github/inversify/inversify-vanillajs-helpers/coverage)\n[![npm version](https://badge.fury.io/js/inversify-vanillajs-helpers.svg)](http://badge.fury.io/js/inversify-vanillajs-helpers)\n[![Dependencies](https://david-dm.org/inversify/inversify-vanillajs-helpers.svg)](https://david-dm.org/inversify/inversify-vanillajs-helpers#info=dependencies)\n[![img](https://david-dm.org/inversify/inversify-vanillajs-helpers/dev-status.svg)](https://david-dm.org/inversify/inversify-vanillajs-helpers/#info=devDependencies)\n[![img](https://david-dm.org/inversify/inversify-vanillajs-helpers/peer-status.svg)](https://david-dm.org/inversify/inversify-vanillajs-helpers/#info=peerDependenciess)\n[![Known Vulnerabilities](https://snyk.io/test/github/inversify/inversify-vanillajs-helpers/badge.svg)](https://snyk.io/test/github/inversify/inversify-vanillajs-helpers)\n\n[![NPM](https://nodei.co/npm/inversify-vanillajs-helpers.png?downloads=true\u0026downloadRank=true)](https://nodei.co/npm/inversify-vanillajs-helpers/)\n[![NPM](https://nodei.co/npm-dl/inversify-vanillajs-helpers.png?months=9\u0026height=3)](https://nodei.co/npm/inversify-vanillajs-helpers/)\n\nSome helper for the development of InversifyJS applications with VanillaJS\n\n## Installation\n```\n$ npm install inversify-vanillajs-helpers\n```\n\n## Usage\n```js\nimport { helpers } from \"inversify-vanillajs-helpers\";\n```\n```js\nvar helpers = require(\"inversify-vanillajs-helpers\").helpers;\n```\n\n## Annotation helper\nHelps you to reduce annotation boilerplate when working with VanillaJS so instead of writting:\n\n```js\ninversify.decorate(inversify.injectable(), Ninja);\ninversify.decorate(inversify.inject(TYPES.Katana), Ninja, 0);\ninversify.decorate(inversify.inject(TYPES.Shuriken), Ninja, 1);\n```\n\nYou can just write:\n\n```js\nhelpers.annotate(Ninja, [TYPES.Katana, TYPES.Shuriken]);\n```\n\nLet's take a look to an example:\n\n```js\nvar inversify = require(\"inversify\");\nvar helpers = require(\"inversify-vanillajs-helpers\").helpers;\nrequire(\"reflect-metadata\");\n\nvar TYPES = {\n  Ninja: 'Ninja',\n  Katana: 'Katana',\n  Shuriken: 'Shuriken'\n}\n\nclass Katana {\n  hit () {\n    return 'cut!'\n  }\n}\n\nhelpers.annotate(Katana);\n\nclass Shuriken {\n  throw () {\n    return 'hit!'\n  }\n}\n\nhelpers.annotate(Shuriken);\n\nclass Ninja {\n\n  constructor(katana, shuriken) {\n      this._katana = katana;\n      this._shuriken = shuriken;\n  }\n\n  fight () { return this._katana.hit() }\n  sneak () { return this._shuriken.throw() }\n\n}\n\nhelpers.annotate(Ninja, [TYPES.Katana, TYPES.Shuriken]);\n\n// Declare bindings\nvar container = new inversify.Container()\ncontainer.bind(TYPES.Ninja).to(Ninja);\ncontainer.bind(TYPES.Katana).to(Katana);\ncontainer.bind(TYPES.Shuriken).to(Shuriken);\n\n// Resolve dependencies\nvar ninja = container.get(TYPES.Ninja);\nconsole.log(ninja.fight(), ninja.sneak());\n```\n\n## Named annotations\nIt is also possible to declare named metadata using the annotation helper:\n\n```js\nhelpers.annotate(\n    Ninja,\n    [\n        { type: TYPES.Katana, named: \"not-throwable\" },\n        { type: TYPES.Shuriken, named: \"throwable\" }\n    ]\n);\n```\n\n## Tagged annotations\nIt is also possible to declare tagged metadata using the annotation helper:\n\n```js\nhelpers.annotate(\n    Ninja,\n    [\n        { type: TYPES.Katana, tagged: { key: \"throwable\", value: false } },\n        { type: TYPES.Shuriken, tagged: { key: \"throwable\", value: true } }\n    ]\n);\n```\n\n## Registration helper\nHelps you to reduce annotation and registration boilerplate when working with VanillaJS so instead of writting:\n\n```js\ninversify.decorate(inversify.injectable(), Ninja);\ninversify.decorate(inversify.inject(TYPES.Katana), Ninja, 0);\ninversify.decorate(inversify.inject(TYPES.Shuriken), Ninja, 1);\ncontainer.bind(TYPES.Ninja).to(Ninja);\n```\n\nYou can just write:\n\n```js\nlet register = helpers.register(container);\nregister(TYPES.Ninja, [TYPES.Katana, TYPES.Shuriken])(Ninja);\n```\n\nThis helper can also be used as a class decorator when using Babel (continue reading for more details):\n\n```js\nlet register = helpers.register(container);\n\n@register(TYPES.Ninja, [TYPES.Katana, TYPES.Shuriken])\nclass Ninja {\n\n  constructor(katana, shuriken) {\n      this._katana = katana;\n      this._shuriken = shuriken;\n  }\n\n  fight () { return this._katana.hit() }\n  sneak () { return this._shuriken.throw() }\n\n}\n```\n\nLet's take a look to an example:\n\n```js\nvar inversify = require(\"inversify\");\nvar helpers =  require(\"inversify-vanillajs-helpers\").helpers;\nrequire(\"reflect-metadata\");\n\nvar TYPES = {\n  Ninja: 'Ninja',\n  Katana: 'Katana',\n  Shuriken: 'Shuriken'\n}\n\nclass Katana {\n  hit () {\n    return 'cut!'\n  }\n}\n\nclass Shuriken {\n  throw () {\n    return 'hit!'\n  }\n}\n\nclass Ninja {\n\n  constructor(katana, shuriken) {\n      this._katana = katana;\n      this._shuriken = shuriken;\n  }\n\n  fight () { return this._katana.hit() }\n  sneak () { return this._shuriken.throw() }\n\n}\n\n// Declare bindings\nvar container = new inversify.Container();\nvar register = helpers.register(container);\nregister(TYPES.Katana)(Katana);\nregister(TYPES.Shuriken)(Shuriken);\nregister(TYPES.Ninja, [TYPES.Katana, TYPES.Shuriken])(Ninja);\n\n// Resolve dependencies\nvar ninja = container.get(TYPES.Ninja);\nconsole.log(ninja.fight(), ninja.sneak());\n```\n\nWe can use the helpers to register many types of bindings.\n\n### registerSelf\n\n```js\nvar registerSelf = helpers.registerSelf(container);\nregisterSelf()(Katana);\n```\n\n### registerConstantValue\n\n```js\nvar registerConstantValue = helpers.registerConstantValue(container);\nregisterConstantValue(TYPES.Katana, new Katana());\n```\n\n### registerDynamicValue\n\n```js\nvar registerDynamicValue = helpers.registerDynamicValue(container);\nregisterDynamicValue(TYPES.Katana, (context) =\u003e { new Katana(); });\n```\n\n### registerConstructor\n\n```js\nvar registerConstructor = helpers.registerConstructor(container);\nregisterConstructor(TYPES.Katana)(Katana);\n```\n\n### registerFunction\n\n```js\nvar registerFunction = helpers.registerFunction(container);\nregisterFunction(TYPES.SomeFunction, () {\n  console.log(\"I'm doing something...\");\n});\n```\n\n### registerAutoFactory\n\n```js\nvar registerAutoFactory = helpers.registerAutoFactory(container);\nregisterAutoFactory(TYPES.KatanaFactory, TYPES.Katana);\n```\n\n### registerFactory\n\n```js\nvar registerFactory = helpers.registerFactory(container);\nregisterFactory(TYPES.KatanaFactory, (context) =\u003e {\n  return () =\u003e {\n    return context.container.get(\"Katana\");\n  };\n});\n```\n\n### registerProvider\n\n```js\nvar registerProvider = helpers.registerProvider(container);\nregisterProvider(TYPES.KatanaProvider, (context) =\u003e {\n    return () =\u003e {\n        return new Promise\u003cKatana\u003e((resolve) =\u003e {\n            let katana = context.container.get(\"Katana\");\n            resolve(katana);\n        });\n    };\n});\n```\n\n## Declaring binding constraints\n\nThe register helper allows access to the fluent binding declaration API:\n\n```js\nvar register = helpers.register(container);\n\nregister(TYPES.Weapon, (b) =\u003e {\n    b.whenTargetTagged(\"throwable\", false);\n})(Katana);\n\nregister(TYPES.Weapon, (b) =\u003e {\n    b.whenTargetTagged(\"throwable\", true);\n})(Shuriken);\n\nregister(TYPES.Ninja, [\n  { tagged: { key: \"throwable\", value: false }, type: \"Weapon\" },\n  { tagged: { key: \"throwable\", value: true }, type: \"Weapon\" }\n])(Ninja);\n```\n\n## Babel decorators\nIf you are using babel you can also use the `register` helper as a class\ndecorator with the [`transform-decorators-legacy`](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) plugin.\n\n```js\nlet helpers = require(\"inversify-vanillajs-helpers\").helpers;\nlet inversify = require(\"inversify\");\nrequire(\"reflect-metadata\");\n\nlet container = new inversify.Container();\nlet register = helpers.register(container);\n\nlet TYPE = {\n    Warrior: \"Warrior\",\n    Weapon: \"Weapon\"\n};\n\n@register(\n    TYPE.Weapon, [],\n    (b) =\u003e { b.whenTargetTagged(\"throwable\", false); }\n)\nclass Katana {\n    constructor() {\n        this.name = \"Katana\";\n    }\n}\n\n@register(\n    TYPE.Weapon, [],\n    (b) =\u003e { b.whenTargetTagged(\"throwable\", true); }\n)\nclass Shuriken {\n    constructor() {\n        this.name = \"Shuriken\";\n    }\n}\n\n@register(\n    TYPE.Warrior,\n    [\n        { tagged: { key: \"throwable\", value: false }, type: TYPE.Weapon },\n        { tagged: { key: \"throwable\", value: true }, type: TYPE.Weapon }\n    ]\n)\nclass Ninja {\n    constructor(primaryWeapon, secondaryWeapon) {\n        this.primaryWeapon = primaryWeapon;\n        this.secondaryWeapon = secondaryWeapon;\n    }\n}\n\nlet ninja = container.get(TYPE.Warrior);\nexpect(ninja.primaryWeapon.name).to.eql(\"Katana\");\nexpect(ninja.secondaryWeapon.name).to.eql(\"Shuriken\");\n```\n\n## Live demo\nA live demo can be found [here](https://runkit.com/remojansen/inversify-vanillajs-helpers-demo).\n\n```js\nvar helpers = require(\"inversify-vanillajs-helpers\").helpers;\nvar inversify = require(\"inversify\");\nrequire(\"reflect-metadata\");\n\nclass Katana {\n    constructor() {\n        this.name = \"Katana\";\n    }\n}\n\nclass Shuriken {\n    constructor() {\n        this.name = \"Shuriken\";\n    }\n}\n\nclass Ninja {\n    constructor(primaryWeapon, secondaryWeapon) {\n        this.primaryWeapon = primaryWeapon;\n        this.secondaryWeapon = secondaryWeapon;\n    }\n}\n\nlet container = new inversify.Container();\nlet register = helpers.register(container);\n \nlet TYPE = {\n    Warrior: \"Warrior\",\n    Weapon: \"Weapon\"\n};\n\nregister(TYPE.Weapon, [], (b) =\u003e b.whenTargetTagged(\"throwable\", false))(Katana);\nregister(TYPE.Weapon, [], (b) =\u003e b.whenTargetTagged(\"throwable\", true))(Shuriken);\n\nregister(TYPE.Warrior, [\n    { tagged: { key: \"throwable\", value: false }, type: TYPE.Weapon },\n    { tagged: { key: \"throwable\", value: true }, type: TYPE.Weapon }\n])(Ninja);\n \ncontainer.get(TYPE.Warrior);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finversify%2Finversify-vanillajs-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finversify%2Finversify-vanillajs-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finversify%2Finversify-vanillajs-helpers/lists"}