stimulus-use
request.js | stimulus-use | |
---|---|---|
11 | 9 | |
366 | 1,392 | |
0.8% | 1.3% | |
5.3 | 8.6 | |
25 days ago | 11 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
request.js
-
Help importing fetch on stimulus
For some extra help with crsf tokens. I would recommend the request.js library in the rails GitHub. https://github.com/rails/request.js
-
Build a Table Editor with Trix and Turbo Frames in Rails
We will now connect our toolbar's table button to the server-side controller action we have just written. To do this, we first need to bring Rails' request.js library into the project. This library will help us administer post requests from the client, including proper CSRF-tokens, etc.:
-
how to implement a bootstrap dropdown in a button
Then, you will need to use fetch or other libs like rails/request.js (https://github.com/rails/request.js) to send a patch request with formData to your model's update path (usually something like /fruits), this is to update your model data. If you are using scaffolded controller, you should have respond_to js configured for you by default. If not, remember to add respond_to :js to your controller, and list data attributes you wanted to return from the server.
-
Reactiveness In Rails
Stimulus and request.js should get you about 90% of the way for your example
-
Pagination and infinite scrolling with Rails and the Hotwire stack
One way to work around this is described in Dale’s article. In it, a Stimulus controller and request.js are used to insert a Turbo Stream header into GET requests, getting Turbo to see the request as a Turbo Stream request despite not originating from a form submission.
-
Is it possible to trigger turbo_stream update from Stimulus controller?
The Rails.ajax function comes from the @rails/ujs package, which isn't Turbo-aware. You should be using @rails/request.js instead, which can execute Turbo Stream commands:
-
Rails 7.0 has been released
It's not part of Hotwire, but supplemental for when you want to make AJAX requests from Stimulus or whatever. https://github.com/rails/request.js
-
Using stimulus to fetch api in ajax manner
So with our applications we've started using request.js to make JS based requests to the applications, it's super handy and very easy to use.
-
Infinite Scroll with HOTWire - Part 2: Adding Stimulus
request.js is a minimalistic JavaScript pacakge that is set to replace Rails UJS in the near future. We will be using it to fetch new pages from the server. Let's install the package
-
Multi-Factor Authentication for Rails with WebAuthn and Devise
First, we will add the necessary NPM packages. We will use @github/webauthn-json as a nice wrapper for the WebAuthn API and @rails/request.js for easier requests to the backend (with built-in Turbo Stream support).
stimulus-use
-
A powerful search feature with what Rails provides out of the box
You can see that I added a dependency here: stimulus-use.
-
Discover Symfony UX’s Twig Components. UI without JS or BS.
“stimulus-use: Add composable behaviors to your Stimulus controllers, like debouncing, detecting outside clicks and many other things.
-
RVTWS: a Ruby stack for modern web apps
Actually, Stimulus is pretty cool because you can compose multiple pre-built behaviors into one Stimulus controller, for a sort of functional approach to component behaviors. The tradeoff is that a growing web of Stimulus controllers (plus HTML data attributes associated with them) can become complex and hard to understand.
-
Tailwind style CSS transitions with StimulusJS
The stimulus-use project is a collection of reusable behaviors for Stimulus. If you are familiar with React, this project is similar to React’s hooks system, but for Stimulus controllers.
-
Pagination and infinite scrolling with Rails and the Hotwire stack
To make using the IntersectionObserver API easier, we will add the wonderful stimulus-use package to our application. This is not a requirement, but it does simplify the code a bit.
- Autocomplete search with Hotwire (zero lines of Stimulus or other JS)
-
Upgrade to Stimulus 3, say bye to IE11, and celebrate 🎉
Finally, as we recently added the Stimulus-Use library to our project, we made sure to upgrade it to current beta which supports Stimulus 3.
-
Hotwire: best practices for stimulus
As you’ll see below, I am importing useClickOutside from stimulus-use, it’s a great library with small, composable helpers, I urge you to check it out!
-
Migrating Selenium system tests to Cuprite
For example, we have a few ”live search“ fields, backed by back-end Fetch requests, on some pages. The live search function was usually triggered by the keyup event and Cuprite was such a fast typewriter that it frequently sent multiple requests almost at once. If some of the responses got a bit late or out of sync, the front-end JavaScript code began hitting issues. We solved this by adopting a technique called debouncing and, frankly, we should have done this since the beginning. By the way, we used the useDebounce module from the marvelous Stimulus-use library to achieve this.
What are some alternatives?
hotwire-example-template - A collection of branches that transmit HTML over the wire.
Capybara - Acceptance test framework for web applications
vite_ruby - ⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience
dropzone - Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
webauthn-with-devise - The companion app for the article "Secure authentication for Rails with WebAuthn and Devise"
webauthn-json - 🔏 A small WebAuthn API wrapper that translates to/from pure JSON using base64url.
cuprite - Headless Chrome/Chromium driver for Capybara
cssui - A collection of interactive UI components in pure CSS
ferrum - Headless Chrome Ruby API
tailwindcss-rails
Selenium WebDriver - A browser automation framework and ecosystem.