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: 3 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 (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-19T02:56:56.000Z (over 1 year ago)
• Last Synced: 2024-09-19T17:35:23.201Z (5 months ago)
• Topics: esbuild, hotwire, javascript, plugin, stimulus
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/esbuild-plugin-stimulus
• Size: 38.1 KB
• Stars: 27
• Watchers: 3
• 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)