render_stream works with array

5 days ago · 38afda5205
12 changed files with 112 additions and 77 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,7 +1,6 @@
 {
    "recommendations": [
        "aki77.rails-db-schema",
-        "aliariff.vscode-erb-beautify",
        "bierner.markdown-mermaid",
        "bpruitt-goddard.mermaid-markdown-syntax-highlighting",
        "bradlc.vscode-tailwindcss",
@ -15,4 +14,4 @@
        "mads-hartmann.bash-ide-vscode",
        "etsi0.class-collapse",
    ]
-}    
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -15,7 +15,7 @@
    "editor.formatOnType": true // Enable formatting while typing
  },
  "[erb]": {
-    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
+    "editor.defaultFormatter": "marcoroth.herb-lsp",
  },
  "debug.internalConsoleOptions": "neverOpen",
  "editor.formatOnSave": true,
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -1,4 +1,20 @@
 class ApplicationController < ActionController::Base
  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
  allow_browser versions: :modern
+
+  def render_stream(notice: nil, alert: nil, &)
+    flash.now[:notice] = notice if notice
+    flash.now[:alert] = alert if alert
+    streams = []
+    streams << turbo_stream.replace(:flash, partial: 'layouts/components/flash') if flash.any?
+    if block_given?
+      yields = yield(turbo_stream)
+      if yields.is_a? Array
+        streams += yields
+      else
+        streams << yields
+      end
+    end
+    render turbo_stream: streams
+  end
 end
--- a/app/controllers/notification_controller.rb
+++ b/app/controllers/notification_controller.rb
@ -1,5 +1,3 @@
-COUNT ||= 0
-
 class NotificationController < ApplicationController
  def index; end

@ -14,35 +12,36 @@ class NotificationController < ApplicationController
  end

  def turbo_notice
-    COUNT += 1
-    # TODO: render_stream (partial + flash -> flash.now + optional replace|append + notice|alert)
-    flash.now[:notice] = "coucou ##{COUNT}"
-    render turbo_stream: [
-      turbo_stream.replace(:flash, partial: 'layouts/components/flash')
-    ]
+    render_stream notice: "my notice ##{inc_count}" do |stream|
+      stream.replace :turbo_placeholder, partial: 'turbo_placeholder'
+    end
  end

  def turbo_alert
-    COUNT += 1
-    flash.now[:alert] = "alert, do the stuff right now ##{COUNT}"
-    render turbo_stream: [
-      turbo_stream.replace(:flash, partial: 'layouts/components/flash')
-    ]
+    render_stream alert: "alert, do the stuff right now ##{inc_count}" do |stream|
+      stream.replace :turbo_placeholder2, partial: 'turbo_placeholder2'
+    end
  end

  def turbo_more
-    COUNT += 1
-    flash.now[:alert] = "alert, do the stuff right now ##{COUNT}"
-    flash.now[:notice] = ["this is extra notice ##{COUNT}", 'one more time']
-    render turbo_stream: [
-      turbo_stream.replace(:flash, partial: 'layouts/components/flash')
-    ]
+    flash.now[:alert] = "alert, do the stuff right now ##{inc_count}"
+    flash.now[:notice] = ["this is extra notice ##{inc_count}", 'one more time']
+    render_stream do |stream|
+      [
+        stream.replace(:turbo_placeholder, partial: 'turbo_placeholder'),
+        stream.replace(:turbo_placeholder2, partial: 'turbo_placeholder2')
+      ]
+    end
  end

  def turbo_none
-    COUNT += 1
-    render turbo_stream: [
-      turbo_stream.replace(:flash, partial: 'layouts/components/flash')
-    ]
+    render_stream
+  end
+
+  private
+
+  def inc_count
+    @@count ||= 0 # rubocop:disable Style/ClassVars
+    @@count += 1 # rubocop:disable Style/ClassVars
  end
 end
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -23,11 +23,11 @@
  </head>

  <body >
-    <%= render 'layouts/components/flashbar'%>
-    <%= render 'layouts/components/navbar'%>
+    <%= render 'layouts/components/flashbar' %>
+    <%= render 'layouts/components/navbar' %>
    <main class="flex flex-col gap-8 m-4">
      <%= yield %>
    </main>
-    <%= render 'layouts/components/footer'%>
+    <%= render 'layouts/components/footer' %>
  </body>
 </html>
--- a/app/views/layouts/components/_flash.html.erb
+++ b/app/views/layouts/components/_flash.html.erb
@ -7,14 +7,14 @@
        turbo:load@window->flash#buildPopupsFromWithin
        popup-toast@window->flash#onPopupEvent
      " } do %>
-  <div class='hidden'>
+  <div class="hidden">
    <% flash.each do |type, messages| %>
-      <%= Time.now%>
+      <%= Time.now %>
      <% Array(messages).each do |message| %>
-        <div data-flash-target='flashItem' data-type='<%= type %>'>
+        <div data-flash-target="flashItem" data-type="<%= type %>">
          <%= message %>
        </div>
      <% end %>
    <% end %>
  </div>
-<% end %>
+<% end %>
--- a/app/views/layouts/components/_flashbar.html.erb
+++ b/app/views/layouts/components/_flashbar.html.erb
@ -1,24 +1,21 @@
-<div 
-    id='flashbar'
-    class='flex justify-center'
-    data-turbo-permanent
-  >
+<div id="flashbar" class="flex justify-center" data-turbo-permanent="yes">
  <!-- 
  here is a shadow root which serves as a placeholder for the toaster area.
  data-turbo-permant prevents morphing to dismiss active toasts
  -->

-  <%# <div role="alert" class="toastify on toastify-center alert alert-success inset-ring-2">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <div>
-      super long sentence which should wrap at least once or various lines.
-      super long sentence which should wrap at least once or various lines.
+  <%#
+    <div role="alert" class="toastify on toastify-center alert alert-success inset-ring-2">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <div>
+        super long sentence which should wrap at least once or various lines.
+        super long sentence which should wrap at least once or various lines.
+      </div>
+      <button class='toast-close'>x</button>
    </div>
-    <button class='toast-close'>x</button>
-  </div> %>
-
+  %>
 </div>

-<%= render 'layouts/components/flash' %>
+<%= render 'layouts/components/flash' %>
--- a/app/views/layouts/components/_footer.html.erb
+++ b/app/views/layouts/components/_footer.html.erb
@ -1,7 +1,7 @@
 <footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
  <aside>
-    <%= Rails.application.name.upcase %> app is free software<br/>
-    Copyleft: AGPLv3<br/>
-    source code<br/>
+    <%= Rails.application.name.upcase %> app is free software<br>
+    Copyleft: AGPLv3<br>
+    source code<br>
  </aside>
-</footer>
+</footer>
--- a/app/views/layouts/components/_navbar.html.erb
+++ b/app/views/layouts/components/_navbar.html.erb
@ -5,7 +5,7 @@
    </button>
  </div>
  <div class="flex-1">
-    <a class="btn btn-ghost text-xl"><%= Rails.application.name.upcase %> app</a>
+    <%= link_to Rails.application.name.upcase, root_path, class:"btn btn-ghost text-xl" %>
  </div>
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
--- a/app/views/notification/_turbo_placeholder.html.erb
+++ b/app/views/notification/_turbo_placeholder.html.erb
@ -0,0 +1,3 @@
+<%= turbo_frame_tag :turbo_placeholder do %>
+  <%= Time.now %>
+<% end %>
--- a/app/views/notification/_turbo_placeholder2.html.erb
+++ b/app/views/notification/_turbo_placeholder2.html.erb
@ -0,0 +1,3 @@
+<%= turbo_frame_tag :turbo_placeholder2 do %>
+  <%= Time.now %>
+<% end %>
--- a/app/views/notification/index.html.erb
+++ b/app/views/notification/index.html.erb
@ -3,16 +3,20 @@
 </div>

 <section>
-  <h2 class="text-bold text-2xl">By using <span class="italic">redirect_to</span></h2>
+  <h2 class="text-bold text-2xl">
+    By using <span class="italic">redirect_to</span>
+  </h2>
  <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
-      <%= link_to 'Notice', 
-      notification_show_notice_path, 
-      class: 'btn btn-primary',
-      data: { turbo_prefetch: false }%>
+      <%= link_to 'Notice', notification_show_notice_path, 
+          class: 'btn btn-primary',
+      data: { turbo_prefetch: false } %>
    </li>
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
-      <%= link_to 'Notice ++', notification_show_notice_path({multiple: true}), class: 'btn btn-primary', 'data-turbo-prefetch': false %>
+      <%= link_to 'Notice ++', 
+        notification_show_notice_path({multiple: true}), 
+        class: 'btn btn-primary', 
+        'data-turbo-prefetch': false %>
    </li>
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
      <%= link_to 'Alert', notification_show_alert_path, class: 'btn btn-secondary', 'data-turbo-prefetch': false %>
@ -27,7 +31,10 @@
 </section>

 <section>
-  <h2 class="text-bold text-2xl">By using <span class="italic">turbo stream</span></h2>
+  <h2 class="text-bold text-2xl">
+    By using <span class="italic">turbo stream</span>
+  </h2>
+
  <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
      <%= link_to notification_turbo_notice_path, class: "btn btn-primary", data: { turbo_stream: true, turbo_prefetch: false } do %>
@ -40,46 +47,57 @@
      <% end %>
    </li>
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
-      <%= link_to notification_turbo_more_path, class: "btn btn-accent", data: { turbo_stream: true, turbo_prefetch: false } do %>
+      <%= link_to notification_turbo_more_path, class: "btn btn-accent", 
+            data: { turbo_stream: true, turbo_prefetch: false } do %>
        Turbo More
      <% end %>
    </li>
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
-      <%= link_to notification_turbo_none_path, class: "btn btn-accent btn-outline", data: { turbo_stream: true, turbo_prefetch: false } do %>
+      <%= link_to notification_turbo_none_path, 
+            class: "btn btn-accent btn-outline", 
+            data: { turbo_stream: true, turbo_prefetch: false } do %>
        Turbo None
      <% end %>
    </li>
+    <li class="p-4 pb-2 text-xs"><%= render 'turbo_placeholder' %></li>
+    <li class="p-4 pb-2 text-xs bg-red-400">
+      <%= render 'turbo_placeholder2' %>
+    </li>
  </ul>

-  <%# <div class="flex gap-4">
-    <div class="flex-1 flex-col">
-      <h3 class='m-2'>Choice</h3>
-      <div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
-    </div>
+  <%#
+    <div class="flex gap-4">
+      <div class="flex-1 flex-col">
+        <h3 class='m-2'>Choice</h3>
+        <div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
+      </div>

-    <div class="flex-none divider sm:divider-horizontal grow-0">OR</div>
-    <div class="flex-1 flex-col">
-      <h3 class='m-2'>Selected</h3>
-      <div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
-    </div>
+      <div class="flex-none divider sm:divider-horizontal grow-0">OR</div>
+      <div class="flex-1 flex-col">
+        <h3 class='m-2'>Selected</h3>
+        <div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
+      </div>

-  </div> %>
+    </div>
+  %>
 </section>

 <section>
-  <h2 class="text-bold text-2xl">By using plain <span class="italic">Javascript</span></h2>
+  <h2 class="text-bold text-2xl">
+    By using <span class="italic">plain Javascript</span>
+  </h2>
  <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
      <%= link_to 'Notice', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
        type: 'notice',
        message: 'this is a message from within Stimulus'
-      }}))", class: 'btn btn-primary'%>
+      }}))", class: 'btn btn-primary' %>
    </li>
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
      <%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
        type: 'alert',
        message: 'this is an alert by the way'
-      }}))", class: 'btn btn-secondary'%>
+      }}))", class: 'btn btn-secondary' %>
    </li>
  </ul>
 </section>