Replace Hotwire with Unpoly

Gemfile

@@ -12,8 +12,8 @@ gem "simple_form"
 gem "cssbundling-rails"
 gem "jsbundling-rails"
 gem "sprockets-rails"
-gem "turbo-rails"
 gem "stimulus-rails"
+gem "unpoly-rails"
 
 group :development, :test do
   gem "debug", platforms: %i[ mri mingw x64_mingw ]

Gemfile.lock

@@ -113,6 +113,7 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
     matrix (0.4.2)
+    memoized (1.0.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
     minitest (5.15.0)
@@ -199,11 +200,13 @@ GEM
     strscan (3.0.1)
     thor (1.2.1)
     timeout (0.2.0)
-    turbo-rails (1.0.1)
-      actionpack (>= 6.0.0)
-      railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
+    unpoly-rails (2.5.2)
+      actionpack (>= 3.2)
+      activesupport (>= 3.2)
+      memoized
+      railties (>= 3.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -239,7 +242,7 @@ DEPENDENCIES
   sprockets-rails
   sqlite3 (~> 1.4)
   stimulus-rails
-  turbo-rails
+  unpoly-rails
   web-console
   webdrivers
 

app/assets/stylesheets/application.sass.scss

@@ -1,3 +1,5 @@
+@import "unpoly/unpoly";
+
 @import "config/variable";
 @import "config/animations";
 @import "config/reset";

app/controllers/application_controller.rb

@@ -3,9 +3,21 @@ class ApplicationController < ActionController::Base
 
   helper_method :current_company
 
+  def redirect_to(target, *args, **kwargs)
+    if kwargs[:notice].present?
+      up.emit('flash:notice', content: render_flash(kwargs[:notice]))
+    end
+
+    super
+  end
+
   private
 
   def current_company
     @current_company ||= current_user.company if user_signed_in?
   end
+
+  def render_flash(message)
+    render_to_string("layouts/_flash_message", locals: { message: message }, layout: false)
+  end
 end

app/controllers/quotes_controller.rb

@@ -15,10 +15,7 @@ def new
   def create
     @quote = current_company.quotes.build(quote_params)
     if @quote.save
-      respond_to do |format|
-        format.html { redirect_to quotes_path, notice: "Quote was successfully created." }
-        format.turbo_stream { flash.now[:notice] = "Quote was successfully created." }
-      end
+      redirect_to quotes_path, notice: "Quote was successfully created."
     else
       render :new, status: :unprocessable_entity
     end
@@ -29,10 +26,8 @@ def edit
 
   def update
     if @quote.update(quote_params)
-      respond_to do |format|
-        format.html { redirect_to quotes_path, notice: "Quote was successfully updated." }
-        format.turbo_stream { flash.now[:notice] = "Quote was successfully updated." }
-      end
+      up.title = 'Updated'
+      redirect_to quotes_path, notice: "Quote was successfully updated."
     else
       render :edit, status: :unprocessable_entity
     end
@@ -41,10 +36,7 @@ def update
   def destroy
     @quote.destroy
 
-    respond_to do |format|
-      format.html { redirect_to quotes_path, notice: "Quote was successfully deleted." }
-      format.turbo_stream { flash.now[:notice] = "Quote was successfully deleted." }
-    end
+    redirect_to quotes_path, notice: "Quote was successfully deleted."
   end
 
   private

app/helpers/application_helper.rb

@@ -1,5 +1,3 @@
 module ApplicationHelper
-  def render_turbo_stream_flash_messages
-    turbo_stream.prepend "flash", partial: "layouts/flash"
-  end
+
 end

app/javascript/application.js

@@ -1,2 +1,23 @@
-import "@hotwired/turbo-rails"
+import "unpoly/unpoly"
 import "./controllers"
+
+up.form.config.submitSelectors.push(['form'])
+up.link.config.followSelectors.push('a[href]')
+up.radio.config.pollInterval = 10000
+
+up.on('flash:notice', function({ content }) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, 'text/html');
+  const html = doc.body.firstChild;
+
+  document.getElementById('flash').prepend(html);
+})
+
+up.compiler('[up-keep][updated]', function(element) {
+  element.addEventListener('up:fragment:keep', function(event) {
+    const next = new Date(event.newFragment.getAttribute('updated'))
+    const prev = new Date(element.getAttribute('updated'))
+
+    if (prev < next) event.preventDefault()
+  })
+})

app/models/application_record.rb

@@ -1,3 +1,4 @@
 class ApplicationRecord < ActiveRecord::Base
   primary_abstract_class
+
 end

app/models/quote.rb

@@ -4,9 +4,4 @@ class Quote < ApplicationRecord
   validates :name, presence: true
 
   scope :ordered, -> { order(id: :desc) }
-
-  # after_create_commit -> { broadcast_prepend_later_to("quotes") }
-  # after_update_commit -> { broadcast_replace_later_to("quotes") }
-  # after_destroy_commit -> { broadcast_remove_later_to("quotes") }
-  broadcasts_to ->(quote) { [quote.company, "quotes"] }, inserts_by: :prepend
 end

app/views/layouts/_flash.html.erb

@@ -1,9 +1,3 @@
 <% flash.each do |flash_type, message| %>
-  <div
-    class="flash__message"
-    data-controller="removals"
-    data-action="animationend->removals#remove"
-  >
-    <%= message %>
-  </div>
+  <%= render partial: "layouts/flash_message", locals: { message: message } %>
 <% end %>

app/views/layouts/_flash_message.html.erb

@@ -0,0 +1,7 @@
+<div
+  class="flash__message"
+  data-controller="removals"
+  data-action="animationend->removals#remove"
+>
+  <%= message %>
+</div>

app/views/quotes/_no_quotes.html.erb

@@ -3,5 +3,5 @@
     You don't have any quotes yet!
   </p>
 
-  <%= link_to "Add quote", new_quote_path, class: "btn btn--primary", data: { turbo_frame: dom_id(Quote.new) } %>
+  <%= link_to "Add quote", new_quote_path, class: "btn btn--primary" %>
 </div>

app/views/quotes/_quote.html.erb

@@ -1,9 +1,14 @@
-<%= turbo_frame_tag quote do %>
-  <div class="quote">
-    <%= link_to quote.name, quote_path(quote), data: { turbo_frame: "_top" } %>
-    <div class="quote__actions">
-      <%= button_to "Delete", quote_path(quote), method: :delete, class: "btn btn--light" %>
-      <%= link_to "Edit", edit_quote_path(quote), class: "btn btn--light" %>
-    </div>
+<div id="<%= dom_id(quote) %>" class="quote" updated="<%= quote.updated_at %>" up-keep>
+  <%= link_to quote.name, quote_path(quote) %>
+  <div class="quote__actions">
+    <%= button_to "Delete",
+        quote_path(quote),
+        method: :delete,
+        class: "btn btn--light",
+        "up-target" => "##{dom_id(quote)}" %>
+    <%= link_to "Edit",
+      edit_quote_path(quote),
+      class: "btn btn--light",
+      "up-target" => "##{dom_id(quote)}" %>
   </div>
-<% end %>
+</div>

app/views/quotes/edit.html.erb

@@ -5,7 +5,7 @@
     <h1>Edit quote</h1>
   </div>
 
-  <%= turbo_frame_tag @quote do %>
+  <div id="<%= dom_id(@quote) %>" updated="<%= Time.current %>" up-keep>
     <%= render "form", quote: @quote %>
-  <% end %>
+  </div>
 </main>

app/views/quotes/index.html.erb

@@ -1,15 +1,16 @@
-<%= turbo_stream_from current_company, "quotes" %>
-
 <main class="container">
   <div class="header">
     <h1>Quotes</h1>
-    <%= link_to "New quote", new_quote_path, class: "btn btn--primary", data: { turbo_frame: dom_id(Quote.new) } %>
+    <%= link_to "New quote",
+        new_quote_path,
+        class: "btn btn--primary",
+        "up-target" => "##{dom_id(Quote.new)}" %>
   </div>
 
-  <%= turbo_frame_tag Quote.new %>
+  <div id="<%= dom_id(Quote.new) %>"></div>
 
-  <%= turbo_frame_tag "quotes" do %>
+  <div id="quotes" up-poll up-source="/quotes">
     <%= render "no_quotes" %>
     <%= render @quotes %>
-  <% end %>
+  </div>
 </main>

app/views/quotes/new.html.erb

@@ -5,7 +5,7 @@
     <h1>New quote</h1>
   </div>
 
-  <%= turbo_frame_tag @quote do %>
+  <div id="<%= dom_id @quote %>">
     <%= render "form", quote: @quote %>
-  <% end %>
+  </div>
 </main>

package.json

@@ -5,7 +5,8 @@
     "@hotwired/stimulus": "^3.0.1",
     "@hotwired/turbo-rails": "^7.1.1",
     "esbuild": "^0.14.23",
-    "sass": "^1.49.8"
+    "sass": "^1.49.8",
+    "unpoly": "^2.5.2"
   },
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",

yarn.lock

@@ -265,3 +265,8 @@ to-regex-range@^5.0.1:
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
+
+unpoly@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/unpoly/-/unpoly-2.5.2.tgz#a213b0e089852810c3ca6f1cc712ef7d7bb2c792"
+  integrity sha512-s1UWKib8F4RWLpSWDyMDVZGInAsGEaGjzEJyG4XvWlUVsFLJumNW32h7wpUZwYJRf/7CKYoaHXFG3bcpnlOShQ==