feat(sample): using a service to push out of bound toast messages

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor

@@ -2,23 +2,25 @@
 @attribute [HtmxLayout(typeof(OutOfBandHtmxLayout), Priority = 1)]
 @layout OutOfBandMainLayout
 @page "/examples/out-of-band-outlets"
+@inject ToastService toasts
 @code {
     [SupplyParameterFromForm]
     private int CurrentCount { get; set; } = 0;
 
     private void IncrementCount(HtmxEventArgs args)
     {
         CurrentCount++;
+        toasts.AddToast($"Counter is now {CurrentCount}");
     }
 }
 <PageTitle>Htmxor - Examples - Out of Band Outlets</PageTitle>
 
 <p>This is an example of a counter updating and a element in the header also updating out of bounds.</p>
 
 <div id="counter" class="border p-3 d-inline-block text-center">
-    <HtmxPartial>
-        <SectionContent SectionName="toast">
-            <span id="toasts" hx-swap-oob=@SwapStyles.OuterHTML class="text-warning">
+    <HtmxFragment>
+        <SectionContent SectionName="message">
+            <span id="message" hx-swap-oob=@SwapStyles.OuterHTML class="text-warning">
                 The count is @(CurrentCount % 2 == 0 ? "even" : "odd")!
             </span>
         </SectionContent>
@@ -33,5 +35,5 @@
                 @onput="IncrementCount">
             Click me
         </button>
-    </HtmxPartial>
+    </HtmxFragment>
 </div>

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor

@@ -1,3 +1,6 @@
 @inherits HtmxLayoutComponentBase
-<SectionOutlet SectionName="toast" />
+<SectionOutlet SectionName="message" />
+
 @Body
+
+<ToastOutlet />

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor

@@ -1,8 +1,12 @@
 @inherits LayoutComponentBase
 <header class="container p-3 bg-secondary text-white shadow">
     This header contains content that can be updated out of bounds:
-    <SectionOutlet SectionName="toast" />
+    <SectionOutlet SectionName="message" />
 </header>
+
 <main class="container p-3">
     @Body
 </main>
+
+<ToastOutlet />
+

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastOutlet.razor

@@ -0,0 +1,39 @@
+@inherits ConditionalComponentBase
+@inject ToastService ToastService
+@code {
+    protected override void OnInitialized() => ToastService.OnMessagesChanged = StateHasChanged;
+}
+<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3">
+    <HtmxFragment>
+        @if (ToastService.Messages.Count > 0)
+        {
+            <div hx-swap-oob="@SwapStyles.AfterBegin:#toast-container">
+                @foreach (var msg in ToastService.Messages)
+                {
+                    <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                @msg
+                            </div>
+                            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    </HtmxFragment>
+</div>
+<script>
+    document.body.addEventListener('htmx:oobAfterSwap', function (evt) {
+        const toasts = evt.detail.target.querySelectorAll(".toast");
+        for (let i = 0; i < toasts.length; i++) {
+            const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toasts[i])
+            if (!toastBootstrap.isShown()) {
+                toastBootstrap.show();
+                toasts[i].addEventListener('hidden.bs.toast', () => {
+                    toasts[i].remove();
+                });
+            }
+        }
+    });
+</script>

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastService.cs

@@ -0,0 +1,18 @@
+namespace HtmxorExamples.Components.Pages.Examples.OutOfBandOutlets;
+
+public sealed class ToastService
+{
+	private List<string>? messages;
+
+	internal Action? OnMessagesChanged { get; set; }
+
+	public IReadOnlyList<string> Messages
+		=> messages as IReadOnlyList<string> ?? Array.Empty<string>();
+
+	public void AddToast(string message)
+	{
+		messages ??= new();
+		messages.Add(message);
+		OnMessagesChanged?.Invoke();
+	}
+}

samples/HtmxorExamples/Program.cs

@@ -1,8 +1,10 @@
 using HtmxorExamples.Components;
+using HtmxorExamples.Components.Pages.Examples.OutOfBandOutlets;
 
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
+builder.Services.AddScoped<ToastService>();
 builder.Services.AddRazorComponents().AddHtmx(options =>
 {
 	// Enabled to support out of band updates