https://github.com/zombiezen/esbuild-plugin-stimulus
esbuild plugin for automatically loading Stimulus controllers from a folder
https://github.com/zombiezen/esbuild-plugin-stimulus
esbuild hotwire javascript plugin stimulus
Last synced: 12 months ago
JSON representation
esbuild plugin for automatically loading Stimulus controllers from a folder
- Host: GitHub
- URL: https://github.com/zombiezen/esbuild-plugin-stimulus
- Owner: zombiezen
- License: apache-2.0
- Created: 2021-03-17T05:13:01.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-19T02:56:56.000Z (over 2 years ago)
- Last Synced: 2025-03-18T19:53:47.968Z (12 months ago)
- Topics: esbuild, hotwire, javascript, plugin, stimulus
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/esbuild-plugin-stimulus
- Size: 38.1 KB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Authors: AUTHORS
Awesome Lists containing this project
README
# esbuild-plugin-stimulus
[esbuild][] plugin for automatically loading [Stimulus][] controllers from a
folder. For example, if you create `controllers/users/list_item_controller.js`,
then your Stimulus controller will be available as `users--list-item`.
[esbuild]: https://esbuild.github.io/
[Stimulus]: https://stimulus.hotwire.dev/
## Install
```shell
npm install --save-dev esbuild-plugin-stimulus
```
## Usage
In your [esbuild script][]:
```javascript
// build.js
const esbuild = require('esbuild');
const { stimulusPlugin } = require('esbuild-plugin-stimulus');
esbuild.build({
plugins: [stimulusPlugin()],
// ...
}).catch(() => process.exit(1));
```
And in your application (similar to [using webpack][]):
```javascript
// app.js
import { Application } from 'stimulus';
import { definitions } from 'stimulus:./controllers';
const app = Application.start();
app.load(definitions);
```
If you are using TypeScript, add a [declaration file][] like the following to
your project to provide type information for `stimulus:` imports:
```typescript
// esbuild-plugin-stimulus.d.ts
declare module 'stimulus:*' {
import type { Definition } from '@hotwired/stimulus';
export const definitions: Definition[];
}
```
[declaration file]: https://www.typescriptlang.org/docs/handbook/modules.html#working-with-other-javascript-libraries
[esbuild script]: https://esbuild.github.io/getting-started/#build-scripts
[using webpack]: https://stimulus.hotwire.dev/handbook/installing#using-webpack-helpers
## License
[Apache 2.0](LICENSE)