See announcement and demo for more information.
Status: ALPHA
API may change dramatically before release. For now, pin a specific version.
See gist or run the following commang to get started:
bin/importmap pin @flydotio/stimulus-live-elements@0.1.0
echo 'export { default } from "@flydotio/stimulus-live-elements"' > \
app/javascript/controllers/live_elements_controller.js
Add data-controller="live-elements"
to your containing HTML element.
For example, if you are using a Rails form:
<%= form_with data: {controller: "live-elements"} do |form| %>
Within that containing element, you can associate DOM events with
Rails actions by adding data-action
attributes. For example,
to cause a button clike to invoke a demo#click controller action
on the server, do something like the following:
<%= form.button "blue", name: 'color',
data: {action: {click: demo_click_path}}
%>
In your server, produce a turbostream response. An example of a response that replaces a header:
respond_to do |format|
format.turbo_stream {
render turbo_stream: turbo_stream.replace('header',
render_to_string(partial: 'header', locals: {color: color}))
}
end