Live Elements Demo

live_elements_demo.sh

rails new livedemo --css tailwind
cd livedemo
bin/importmap pin @flydotio/[email protected]
echo 'export { default } from  "@rubys/stimulus-live-elements"' > app/javascript/controllers/live_elements_controller.js
bin/rails generate controller demo
echo 'Rails.application.routes.draw {root "demo#button"; post "demo/click"}' >> config/routes.rb

cat <<-"EOF" > app/views/demo/_header.html.erb
   <%= turbo_frame_tag "header", class: "block bg-#{color}-400 mb-4" do %>
    <h1 class="font-bold text-4xl">Live button demo</h1>
  <% end %>

  <!-- bg-yellow-400 bg-blue-400 bg-red-400 -->
EOF

cat <<-"EOF" > app/views/demo/button.html.erb
<div>
  <%= render partial: 'header', locals: {color: "yellow"} %>

  <%= form_with data: {controller: "live-elements"} do |form| %>
    <%= form.button "blue", name: 'color',
      data: {action: {click: demo_click_path}},
      class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    %>

    <%= form.button "red", name: 'color',
      data: {action: {click: demo_click_path}},
      class: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
    %>
  <% end %>
</div>
EOF

cat <<-"EOF" > app/controllers/demo_controller.rb
class DemoController < ApplicationController
  def button
  end

  def click
    respond_to do |format|
      format.turbo_stream { 
        render turbo_stream: turbo_stream.replace('header',
          render_to_string(partial: 'header', locals: {color: params[:color]}))
      }
    end
  end
end
EOF

bin/dev