{"id":28430713,"url":"https://github.com/smnandre/stimulus-listeners","last_synced_at":"2026-03-06T23:30:57.538Z","repository":{"id":296717141,"uuid":"994205687","full_name":"smnandre/stimulus-listeners","owner":"smnandre","description":"A zero-build Stimulus plugin that lets you declaratively or imperatively wire up DOM event listeners","archived":false,"fork":false,"pushed_at":"2025-06-29T01:08:04.000Z","size":482,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-29T02:27:01.695Z","etag":null,"topics":["controller","eventlistener","events","listeners","mixin","stimulus","stimulus-controller","stimulusjs","symfony","ux"],"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/smnandre.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,"zenodo":null},"funding":{"github":"smnandre"}},"created_at":"2025-06-01T12:58:19.000Z","updated_at":"2025-06-29T01:08:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"56fb5716-d2e8-418e-92ad-c182b0c8857c","html_url":"https://github.com/smnandre/stimulus-listeners","commit_stats":null,"previous_names":["smnandre/stimulus-listeners"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/smnandre/stimulus-listeners","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smnandre%2Fstimulus-listeners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smnandre%2Fstimulus-listeners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smnandre%2Fstimulus-listeners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smnandre%2Fstimulus-listeners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smnandre","download_url":"https://codeload.github.com/smnandre/stimulus-listeners/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smnandre%2Fstimulus-listeners/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30203320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["controller","eventlistener","events","listeners","mixin","stimulus","stimulus-controller","stimulusjs","symfony","ux"],"created_at":"2025-06-05T14:08:01.429Z","updated_at":"2026-03-06T23:30:57.519Z","avatar_url":"https://github.com/smnandre.png","language":"TypeScript","funding_links":["https://github.com/sponsors/smnandre"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003eStimulus Listeners\u003c/h1\u003e\n\u003cpicture\u003e\n    \u003cimg src=\"./stimulus-listeners.webp\" alt=\"Stimulus Listeners\" width=\"100%\" /\u003e\n\u003c/picture\u003e\n\n---\n\n\u003e [!TIP]\n\u003e Stimulus Listeners helps you wire up DOM event listeners in Stimulus controllers, both declaratively and imperatively, \n\u003e without the need for additional build steps or decorators. \n\nIf you can, please consider [sponsoring](https://github.com/sponsors/smnandre) this project to support its development and maintenance.\n\n## Features\n\nA zero-build Stimulus plugin that lets you declaratively or imperatively wire up DOM event listeners:\n\n- **Static** via `static listeners = { … }`\n- **Imperative** via `useEventListeners(controller, map)`\n\n**Features:**\n\n- Auto-cleanup on `disconnect`\n- Supports options (`capture`, `once`, `passive`) and custom targets\n- Plain JavaScript \u0026 TypeScript compatible\n- No decorators or extra tooling needed at runtime\n\n## Installation\n\nTo install `stimulus-listeners`, you can use your package manager of choice. Here is the command for npm:\n\n### Using npm\n\n```bash\nnpm install @smnandre/stimulus-listeners\n```\n\n### Using JSDeliver\n\nIf you prefer to use a CDN, you can import it directly from JSDeliver:\n\n```js\nimport { useListeners, useEventListeners } from 'https://cdn.jsdelivr.net/npm/@smnandre/stimulus-listeners@latest';\n```\n\n## Usage\n\n### Static `listeners`\n\nYou can define event listeners directly in your Stimulus controller using the `static listeners` property. This allows \nyou to declaratively specify which events to listen for and the corresponding methods to call.\n\nThis approach is straightforward and integrates seamlessly with Stimulus's lifecycle.\n\n```js\nimport { Controller } from '@hotwired/stimulus';\nimport { useListeners } from '@smnandre/stimulus-listeners';\n\nexport default class extends Controller {\n  \n  static listeners = {\n    'foo:bar:created': 'onFooBarCreated',\n    'foo:bar:closed': 'onFooBarClosed',\n  };\n\n  initialize() {\n    useListeners(this);\n  }\n\n  onFooBarCreated() { /** ... */ }\n\n  onFooBarClosed() { /** ... */ }\n}\n```\n\n### Listener options\n\nYou can also define listeners with options like `capture`, `once`, and `passive`, or specify custom targets.\n\n```js\nimport { Controller } from '@hotwired/stimulus';\nimport { useListeners } from '@smnandre/stimulus-listeners';\n\nexport default class extends Controller {\n\n  static listeners = {\n    'keydown': ['onKeydown', {once: true}],\n    'scroll': {method: 'onScroll', passive: true, target: window}\n  }\n  \n  // ...\n}\n```\n\n### Imperative listeners\n\nAn alternative to the static approach is to use the `useEventListeners` function, which allows you to set up event \nlisteners imperatively. This is useful for dynamic scenarios where you need to add or remove listeners based \non certain conditions.\n\n```js\nimport { Controller } from '@hotwired/stimulus';\nimport { useEventListeners } from '@smnandre/stimulus-listeners';\n\nexport default class LegacyController extends Controller {\n  initialize() {\n    useEventListeners(this, {\n      'blur': this.animatedValue ? 'animateOnBlur' : 'onBlur',\n    });\n  }\n\n  animateOnBlur(e: Event) {\n    // ...     \n\n```\n\n## Testing\n\nTo run the test suite:\n\n```bash\nnpm install\nnpm test\n```\n\nTo generate a coverage report:\n\n```bash\nnpm run test:coverage\n```\n\n## License\n\n[`stimulus-listeners`](https://github.com/smnandre/stimulus-listeners) is released by [Simon André](https://github.com/smnandre) under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmnandre%2Fstimulus-listeners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmnandre%2Fstimulus-listeners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmnandre%2Fstimulus-listeners/lists"}