This content originally appeared on DEV Community and was authored by Rails Designer
This articles was originally published on [Rails Designer](https://railsdesigner.com/best-hotwire-stimulus-tools/
The Hotwire/Turbo/Stimulus community is not as big as React or even Vue. But it has some dedicated users—yours truly included—that have built and shared some cool tools and extra's.
In this article I want to list some nifty, smart or otherwise cool extensions/tools for Hotwire/Stimulus. This article will be updated whenever I stumble upon something new.
Turbo Power
This power pack extends the default Turbo Stream actions (append, update, replace, etc.) with many other useful actions. From (meta) title update to updating a data attribute and from toggling css to set a value in local storage.
Just add it using your favorite package manager to get all these goodies. Comes with a related Rails gem too.
Current.js
This tiny library gives you a similar logic as Rails' CurrentAttributes, but for Rails. You defined certain values as meta tags, eg. <meta name="current-environment" content="production"> and then in your JavaScript you call Current.environment.
Looks niche maybe, but together with Turbo Streams Broadcast, that can't have any user specifics, I hhave found plenty of use cases for Current.js.
Debounced
This is a useful library to run actions with a debounce (delaying executing a function until a pause in triggering events occurs). Without this library you would do something like this in Stimulus Controller:
export default class extends ApplicationController {
initialize() {
this.debouncedUpdate = debounce(this.update.bind(this))
}
update() {
// logic here
}
}
With this library, you can write <input type="text" data-controller="editor" data-action="debounced:input->editor#update">.
Rails and Hotwire Developer Tool
This small tool from Rails Designer lets you move faster around your app's front end. It has the following features:
- view turbo-frames and their id's;
- view stimulus controller and their names;
- toggle the (web)console (instead of switching to the CLI);
- auto-fill forms with a predefined set of values.
That's it so far. Do you have (built) any tool that should be listed here? Share it with me below. 👇
This content originally appeared on DEV Community and was authored by Rails Designer
Rails Designer | Sciencx (2024-10-31T15:00:00+00:00) Hotwire and Stimulus Tools You Need to Know. Retrieved from https://www.scien.cx/2024/10/31/hotwire-and-stimulus-tools-you-need-to-know/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.