render_stream works with array

2 months 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",
--- 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,11 +7,11 @@
        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 %>
--- a/app/views/layouts/components/_flashbar.html.erb
+++ b/app/views/layouts/components/_flashbar.html.erb
@ -1,14 +1,11 @@
 <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">
  <%#
    <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>
@ -17,8 +14,8 @@
        super long sentence which should wrap at least once or various lines.
      </div>
      <button class='toast-close'>x</button>
  </div> %>
    </div>
  %>
 </div>
 <%= 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>
--- 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, 
      <%= link_to 'Notice', notification_show_notice_path, 
          class: 'btn btn-primary',
      data: { turbo_prefetch: false }%>
      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,18 +47,26 @@
      <% 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 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>
@ -63,23 +78,26 @@
        <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>