Add data-confirm attribute support for all events (#1500)

* Add `data-confirm` attribute support for all events

* Update for Swift concurrency

Author: carson-katri

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `NavigationLink` supports the `data-phx-link` attribute to switch between `redirect` (default) and `patch` navigation
 - `NavigationLink` can perform a replace navigation by setting the `data-phx-link-state` attribute to `replace`
 - `NavigationLink` takes a `destination` template to customize the connecting phase View for its navigation event.
+- The `data-confirm` attribute can be added to elements to show a confirmation dialog before sending an event
 
 ### Changed
 - Swift 6 is now required to build LiveView Native applications

Sources/LiveViewNative/Coordinators/LiveSessionConfiguration.swift

@@ -33,6 +33,8 @@ public struct LiveSessionConfiguration {
 
     public var reconnectBehavior: ReconnectBehavior = .exponential
 
+    public var eventConfirmation: ((String, ElementNode) async -> Bool)?
+    
     /// Constructs a default, empty configuration.
     public init() {
     }
@@ -42,13 +44,15 @@ public struct LiveSessionConfiguration {
         headers: [String: String]? = nil,
         urlSessionConfiguration: URLSessionConfiguration = .default,
         transition: AnyTransition? = nil,
-        reconnectBehavior: ReconnectBehavior = .exponential
+        reconnectBehavior: ReconnectBehavior = .exponential,
+        eventConfirmation: ((String, ElementNode) async -> Bool)? = nil
     ) {
         self.headers = headers
         self.connectParams = connectParams
         self.urlSessionConfiguration = urlSessionConfiguration
         self.transition = transition
         self.reconnectBehavior = reconnectBehavior
+        self.eventConfirmation = eventConfirmation
     }
 
     public struct ReconnectBehavior: Sendable {

Sources/LiveViewNative/Live/LiveView.swift

@@ -150,6 +150,13 @@ public struct LiveView<
     let reconnectingView: (_ConnectedContent<R>, Bool) -> ReconnectingView
     let errorView: (Error) -> ErrorView
 
+    @State private var showEventConfirmation: Bool = false
+    @State private var eventConfirmationTransaction: EventConfirmationTransaction?
+    struct EventConfirmationTransaction: Sendable {
+        let message: String
+        let callback: @Sendable (sending Bool) -> ()
+    }
+    
     @MainActor
     @ViewBuilder
     func buildPhaseView(_ phase: LiveViewPhase<R>) -> some View {
@@ -235,6 +242,26 @@ public struct LiveView<
                 await session.connect()
             }
         }
+        // data-confirm
+        .environment(\.eventConfirmation, session.configuration.eventConfirmation ?? { message, _ in
+            return await withCheckedContinuation { continuation in
+                eventConfirmationTransaction = EventConfirmationTransaction(message: message, callback: continuation.resume(returning:))
+                showEventConfirmation = true
+            }
+        })
+        .confirmationDialog(
+            eventConfirmationTransaction?.message ?? "",
+            isPresented: $showEventConfirmation,
+            titleVisibility: .visible,
+            presenting: eventConfirmationTransaction
+        ) { transaction in
+            SwiftUI.Button("OK") {
+                transaction.callback(true)
+            }
+            SwiftUI.Button("Cancel", role: .cancel) {
+                transaction.callback(false)
+            }
+        }
     }
 }
 

Sources/LiveViewNative/Property Wrappers/Event.swift

@@ -70,6 +70,7 @@ import AsyncAlgorithms
 public struct Event: @preconcurrency DynamicProperty, @preconcurrency Decodable {
     @ObservedElement private var element: ElementNode
     @Environment(\.coordinatorEnvironment) private var coordinatorEnvironment
+    @Environment(\.eventConfirmation) private var eventConfirmation
     @StateObject var handler = Handler()
     /// The name of the event to send.
     @_documentation(visibility: public)
@@ -336,6 +337,11 @@ public struct Event: @preconcurrency DynamicProperty, @preconcurrency Decodable
             guard let event else {
                 return
             }
+            if let confirm = try owner.element.attributeValue(for: "data-confirm"),
+               let eventConfirmation = owner.eventConfirmation
+            {
+                guard await eventConfirmation(confirm, owner.element) else { return }
+            }
             await owner.handler.channel.send(.init(
                 type: owner.type,
                 event: event,
@@ -348,6 +354,11 @@ public struct Event: @preconcurrency DynamicProperty, @preconcurrency Decodable
             guard let event else {
                 return
             }
+            if let confirm = try owner.element.attributeValue(for: "data-confirm"),
+               let eventConfirmation = owner.eventConfirmation
+            {
+                guard await eventConfirmation(confirm, owner.element) else { return }
+            }
             let handler = Handler()
             handler.update(
                 coordinator: CoordinatorEnvironment(context.coordinator, document: context.coordinator.document!),
@@ -363,3 +374,14 @@ public struct Event: @preconcurrency DynamicProperty, @preconcurrency Decodable
         }
     }
 }
+
+extension EnvironmentValues {
+    private enum EventConfirmationKey: EnvironmentKey {
+        static var defaultValue: ((String, ElementNode) async -> Bool)? { nil }
+    }
+    
+    var eventConfirmation: ((String, ElementNode) async -> Bool)? {
+        get { self[EventConfirmationKey.self] }
+        set { self[EventConfirmationKey.self] = newValue }
+    }
+}

Sources/LiveViewNative/Utils/DOM.swift

@@ -23,7 +23,7 @@ import LiveViewNativeCore
 /// - ``depthFirstChildren()``
 /// - ``elementChildren()``
 /// - ``innerText()``
-public struct ElementNode: Identifiable {
+public struct ElementNode: Identifiable, @unchecked Sendable {
     public let node: Node
     public let data: ElementData
 

lib/live_view_native/swiftui/component.ex

@@ -80,46 +80,63 @@ defmodule LiveViewNative.SwiftUI.Component do
 
   # ### Overriding the default confirm behaviour
 
-  # `phoenix_html.js` does trigger a custom event `phoenix.link.click` on the clicked DOM element
-  # when a click happened. This allows you to intercept the event on its way bubbling up
-  # to `window` and do your own custom logic to enhance or replace how the `data-confirm`
-  # attribute is handled. You could for example replace the browsers `confirm()` behavior with
-  # a custom javascript implementation:
-
-  # ```javascript
-  # // listen on document.body, so it's executed before the default of
-  # // phoenix_html, which is listening on the window object
-  # document.body.addEventListener('phoenix.link.click', function (e) {
-  #   // Prevent default implementation
-  #   e.stopPropagation();
-  #   // Introduce alternative implementation
-  #   var message = e.target.getAttribute("data-confirm");
-  #   if(!message){ return true; }
-  #   vex.dialog.confirm({
-  #     message: message,
-  #     callback: function (value) {
-  #       if (value == false) { e.preventDefault(); }
-  #     }
-  #   })
-  # }, false);
-  # ```
-
-  # Or you could attach your own custom behavior.
-
-  # ```javascript
-  # window.addEventListener('phoenix.link.click', function (e) {
-  #   // Introduce custom behaviour
-  #   var message = e.target.getAttribute("data-prompt");
-  #   var answer = e.target.getAttribute("data-prompt-answer");
-  #   if(message && answer && (answer != window.prompt(message))) {
-  #     e.preventDefault();
+  # You can customize the confirm dialog in your app's client code.
+  # Any event on an element with a `data-confirm` attribute will first call the provided
+  # `eventConfirmation` function. Provide a custom function with a `(String, ElementNode) async -> Bool`
+  # signature to show a custom dialog.
+
+  # ```swift
+  # struct ContentView: View {
+  #   @State private var showEventConfirmation: Bool = false
+  #   @State private var eventConfirmationTransaction: EventConfirmationTransaction?
+  #   struct EventConfirmationTransaction: Sendable, Identifiable {
+  #       let id = UUID()
+  #       let message: String
+  #       let role: ButtonRole?
+  #       let callback: @Sendable (sending Bool) -> ()
   #   }
-  # }, false);
+  #
+  #   var body: some View {
+  #       #LiveView(
+  #           .localhost,
+  #           configuration: LiveSessionConfiguration(eventConfirmation: { message, element in
+  #               return await withCheckedContinuation { @MainActor continuation in
+  #                   showEventConfirmation = true
+  #                   eventConfirmationTransaction = EventConfirmationTransaction(
+  #                       message: message,
+  #                       role: try? element.attributeValue(ButtonRole.self, for: "data-confirm-role"), // access a custom attribute
+  #                       callback: continuation.resume(returning:)
+  #                   )
+  #               }
+  #           }),
+  #           addons: [.liveForm]
+  #       ) {
+  #           ConnectingView()
+  #       } disconnected: {
+  #           DisconnectedView()
+  #       } reconnecting: { content, isReconnecting in
+  #           ReconnectingView(isReconnecting: isReconnecting) {
+  #               content
+  #           }
+  #       } error: { error in
+  #           ErrorView(error: error)
+  #       }
+  #       .alert(
+  #           eventConfirmationTransaction?.message ?? "",
+  #           isPresented: $showEventConfirmation,
+  #           presenting: eventConfirmationTransaction
+  #       ) { transaction in
+  #           Button("Confirm", role: transaction.role) {
+  #               transaction.callback(true)
+  #           }
+  #           Button("Cancel", role: .cancel) {
+  #               transaction.callback(false)
+  #           }
+  #       }
+  #   }
+  # }
   # ```
 
-  # The latter could also be bound to any `click` event, but this way you can be sure your custom
-  # code is only executed when the code of `phoenix_html.js` is run.
-
   # ## CSRF Protection
 
   # By default, CSRF tokens are generated through `Plug.CSRFProtection`.