fix: stream container should not contain flashes

assets/js/live_toast/live_toast.ts

@@ -70,7 +70,9 @@ function doAnimations(
 ) {
   const ts = []
   let toasts = Array.from(
-    document.querySelectorAll<HTMLElement>('#toast-group > div'),
+    document.querySelectorAll<HTMLElement>(
+      '#toast-group [phx-hook="LiveToast"]',
+    ),
   )
     .map((t) => {
       if (isHidden(t)) {

demo/lib/demo_web/live/home_live.ex

@@ -136,7 +136,7 @@ defmodule DemoWeb.HomeLive do
           "info" -> :info
           "error" -> :error
         end,
-        "this is  a flash"
+        "This is a flash message."
       )
 
     {:noreply, socket}

demo/mix.exs

@@ -30,7 +30,7 @@ defmodule Demo.MixProject do
       {:live_toast, path: ".."},
       {:bandit, "~> 1.1"},
       {:phoenix, ">= 1.6.0 and < 1.8.0"},
-      {:phoenix_live_view, "~> 0.19"},
+      {:phoenix_live_view, "~> 0.20"},
       {:ecto, ">= 0.0.0"},
       {:esbuild, "~> 0.2"},
       {:ex_check, "~> 0.14.0", only: [:dev], runtime: false},

demo/test/demo_web/live/home_live_test.exs

@@ -12,6 +12,21 @@ defmodule DemoWeb.HomeLiveTest do
       assert html =~ "Live Toast"
       assert html =~ "A beautiful drop-in replacement for the Phoenix Flash system."
     end
+
+    # Note: This test tracks an issue I found after 0.6.2 with streams.
+    # On this and prior versions, the flashes lived next to the toasts in the stream container.
+    # This is invalid, and for some reason tests catch it but no runtime errors happen.
+    # After this version they've been moved into their own container with display contents.
+    test "clicking the flash button", %{conn: conn} do
+      {:ok, view, html} = live(conn, ~p"/")
+
+      refute html =~ "This is a flash message."
+
+      assert view
+             |> element("button", "Info Flash")
+             |> render_click() =~
+               "This is a flash message."
+    end
   end
 
   describe "LiveToast.send_toast/7" do

lib/live_toast/live_component.ex

@@ -62,41 +62,42 @@ defmodule LiveToast.LiveComponent do
       class={[
         @class
       ]}
-      phx-update="stream"
     >
-      <Components.toast
-        :for={
-          {dom_id,
-           %LiveToast{
-             kind: k,
-             msg: body,
-             title: title,
-             icon: icon,
-             action: action,
-             duration: duration,
-             component: component
-           }} <- @streams.toasts
-        }
-        id={dom_id}
-        data-count={@toast_count}
-        duration={duration}
-        kind={k}
-        class_fn={@toast_class_fn}
-        component={component}
-        icon={icon}
-        action={action}
-        corner={@corner}
-        title={
-          if title do
-            title
-          else
-            nil
-          end
-        }
-        target={@myself}
-      >
-        <%= body %>
-      </Components.toast>
+      <div class="contents" id="toast-group-stream" phx-update="stream">
+        <Components.toast
+          :for={
+            {dom_id,
+             %LiveToast{
+               kind: k,
+               msg: body,
+               title: title,
+               icon: icon,
+               action: action,
+               duration: duration,
+               component: component
+             }} <- @streams.toasts
+          }
+          id={dom_id}
+          data-count={@toast_count}
+          duration={duration}
+          kind={k}
+          class_fn={@toast_class_fn}
+          component={component}
+          icon={icon}
+          action={action}
+          corner={@corner}
+          title={
+            if title do
+              title
+            else
+              nil
+            end
+          }
+          target={@myself}
+        >
+          <%= body %>
+        </Components.toast>
+      </div>
 
       <Components.flashes f={@f} corner={@corner} toast_class_fn={@toast_class_fn} />
     </div>