🧑🏭 Solder
Persist and restore ephemeral attributes of HTML elements using the Rails cache store and StimulusJS
In short, this plugin will persist UI state changes a user makes on a per-element basis.
This is useful for
- storing the open/closed state of a sidebar, accordion, etc.
- storing the state of tree views (e.g. storefront categories),
- custom dashboard layouts
- etc.
Image: openjourney, prompt: mdjrny-v4 style cyborg soldering a piece of code onto a web application user interface, 8k, steampunk
Rationale
Modern server-side rendering techniques like Turbo Frames/Streams, StimulusReflex and others require to persist state on the server to facilitate rerendering without UI discrepancies.
Typically, you have a few options to achieve this:
- ActiveRecord,
- the
session
, - Kredis
These are the most frequently chosen solutions. It requires you to invent keys to access the state of UI elements, e.g. session[:collapsed_categories]
etc.
Experience shows that the management of those keys tends to increase complexity.
Hence, the part that this gem takes care of is the automatic generation and management of those keys.
Installation
Add this line to your application's Gemfile:
gem "solder"
And then execute:
$ bundle
Or install it yourself as:
$ gem install solder
Usage
In your view, use the solder_onto
helper to create a unique key for the element whose attributes you want to track. For example, imagine we have an online store with multiple category-specific landing pages. There's a tree view on it for further filtering items:
<%= solder_onto([current_user, @category] do %>
<details>
<summary>Outdoor Equipment</summary>
<details> ... </details>
</details>
<% end %>
IMPORTANT:
- The helper only takes care of the attributes of the first child within it. This is because of how
capture
works. - Think of the first argument to
solder_onto
as something akin to a cache key. You want it to be unique with regard to (almost always) the logged in user, and any other record it is scoped to. In fact, it adheres to the same interface ascache
Dependencies
Ruby
- Rails
Javascript
- Stimulus
- @rails/request.js
Persistence
Uses the active Rails cache store, possibly more adapters to come.
Contributing
Contribution directions go here.
License
The gem is available as open source under the terms of the MIT License.