code's Introduction
code's People
code's Issues
Migrate existing Rails project from importmaps to esbuild
Gemfile
- Remove
gem "importmap-rails
- Add
gem "jsbundling-rails" gem "cssbundling-rails"
Run
bundle
package.json
{
"name": "app",
"private": "true",
"dependencies": {
"@hotwired/stimulus": "^3.0.1",
"@hotwired/turbo-rails": "^7.1.1",
"autoprefixer": "^10.4.2",
"esbuild": "^0.14.14",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.18"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.css -o ./app/assets/builds/application.css"
}
}
Run
yarn
mkdir app/assets/build
app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../builds
app/assets/stylesheets.css
@tailwind base;
@tailwind components;
@tailwind utilities;
app/javascript/application.js
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
app/javascript/controllers/index.js
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName
import { application } from "./application"
import HelloController from "./hello_controller"
application.register("hello", HelloController)
app/views/layouts/application.html.erb
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
Run
rm -rf bin/importmap
bin/dev
#!/usr/bin/env bash
if ! command -v foreman &> /dev/null
then
echo "Installing foreman..."
gem install foreman
fi
foreman start -f Procfile.dev
Run
rm -rf config/importmap.rb
Procfile.dev
web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch
tailwind.config.js
module.exports = {
content: [
'./app/views/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js'
]
}
.gitignore
node_modules
Run
chmod +x bin/dev
bin/dev
The best way to make communication among stimulus js controllers
This is a universal way to communicate parent to child, child to parent, mixed controllers and distinct controllers
- You don't need to use
stimulus-use
- You don't need to create custom events by your own like this
element.dispatchEvent(new CustomEvent("eventName", {
detail: {
// optional details
},
}));
Just use code below
<div data-controller="zoom">
<button data-action="click->zoom#zoomIn">+</button>
</div>
<div
data-controller="map"
data-action="zoom:zoomIn@document->map#handleZoomIn">
</div>
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
zoomIn() {
this.dispatch('zoomIn', { target: document })
}
}
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
handleZoomIn() {
console.log('handleZoomIn')
}
}
And that's it. Some more info below
You can pass arguments
export default class extends Controller {
zoomIn() {
this.dispatch('updateScaleTarget', { target: document, detail: { scale: 1.5 } })
}
}
And get these arguments from event
export default class extends Controller {
static targets = ['scale']
updateScaleTarget(e) {
this.scaleTarget.textContent = `${e.detail.scale}%`
}
}
You might have multiple triggers and one listener
<div data-controller="zoom1">
<button data-action="click->zoom1#zoomIn">+</button>
</div>
<div data-controller="zoom2">
<button data-action="click->zoom2#zoomIn">+</button>
</div>
<div
data-controller="map"
data-action="zoom1:zoomIn@document->map#handleZoomIn"
data-action="zoom2:zoomIn@document->map#handleZoomIn"
>
</div>
And you don't want to repeat this
<div
data-controller="map"
data-action="zoom1:zoomIn@document->map#handleZoomIn"
data-action="zoom2:zoomIn@document->map#handleZoomIn"
>
</div>
Just remove prefix
// Connects to data-controller="zoom1"
export default class extends Controller {
zoomIn() {
this.dispatch('zoomIn', {target: document, prefix: null})
}
}
// Connects to data-controller="zoom2"
export default class extends Controller {
zoomIn() {
this.dispatch('zoomIn', {target: document, prefix: null})
}
}
And you can handle events from different controllers using one handler
<div
data-controller="map"
data-action="zoomIn@document->map#handleZoomIn"
>
</div>
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.