Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/excid3/esbuild-rails
Esbuild Rails plugin
https://github.com/excid3/esbuild-rails
esbuild hacktoberfest hotwire rails rubyonrails stimulusjs
Last synced: 1 day ago
JSON representation
Esbuild Rails plugin
- Host: GitHub
- URL: https://github.com/excid3/esbuild-rails
- Owner: excid3
- License: mit
- Created: 2021-09-25T13:16:13.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T21:30:37.000Z (4 months ago)
- Last Synced: 2024-10-29T14:17:16.481Z (3 months ago)
- Topics: esbuild, hacktoberfest, hotwire, rails, rubyonrails, stimulusjs
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 180
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/esbuild-rails)
# 🛤 esbuild-rails
Esbuild Rails plugin for easy imports of Stimulus controllers, ActionCable channels, and other Javascript.
This package is designed to be used with [jsbundling-rails](https://github.com/rails/jsbundling-rails).
## ⚙️ Installation
Install with npm or yarn
```bash
yarn add esbuild-rails
```
```bash
npm i esbuild-rails
```
Copy [`examples/esbuild.config.mjs`](examples/esbuild.config.mjs) to your git repository.
Use npm to add it as the build script (requires npm `>= 7.1`)
```sh
npm pkg set scripts.build="node esbuild.config.js"
```
or add it manually in `package.json`
```javascript
"scripts": {
"build": "node esbuild.config.mjs"
}
```
## 🧑💻 Usage
Import a folder using globs:
```javascript
import "./src/**/*"
```
#### Import Stimulus controllers and register them:
```javascript
import { Application } from "@hotwired/stimulus"
const application = Application.start()
import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
application.register(controller.name, controller.module.default)
})
```
#### Importing Stimulus controllers from parent folders (ViewComponents, etc)
To import Stimulus controllers from parents in other locations, create an `index.js` in the folder that registers controllers and import the `index.js` location.
For example, we can import Stimulus controller for ViewComponents by creating an `app/components/index.js` file and importing that in your main Stimulus controllers index.
```javascript
// app/javascript/controllers/index.js
import { application } from "./application"
// Import app/components/index.js
import "../../components"
```
```javascript
// app/components/index.js
import { application } from "../javascript/controllers/application"
import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
application.register(controller.name, controller.module.default)
})
```
#### Import ActionCable channels:
```javascript
import "./channels/**/*_channel.js"
```
#### jQuery with esbuild:
```bash
yarn add jquery
```
```javascript
// app/javascript/jquery.js
import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;
```
```javascript
//app/javascript/application.js
import "./jquery"
```
Why does this work? `import` in Javascript is hoisted, meaning that `import` is run _before_ the other code regardless of where in the file they are. By splitting the jQuery setup into a separate `import`, we can guarantee that code runs first. Read more [here](https://exploringjs.com/es6/ch_modules.html#_imports-are-hoisted).
#### jQuery UI with esbuild:
Follow the jQuery steps above.
Download [jQuery UI custom build](https://jqueryui.com/download/) and add it to `app/javascript/jquery-ui.js`
```javascript
import "./jquery-ui"
$(function() {
$(document).tooltip()
$("#dialog").dialog()
})
```
A custom build is required because jQueryUI does not support ESM.
## 🙏 Contributing
If you have an issue you'd like to submit, please do so using the issue tracker in GitHub. In order for us to help you in the best way possible, please be as detailed as you can.
## 📝 License
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).