Merge pull request #138 from liveviewnative/cached-navigation-title

Cache `navigationTitle` for smoother transitions

Author: carson-katri

Sources/LiveViewNative/LiveView.swift

@@ -115,6 +115,6 @@ public struct LiveView<R: CustomRegistry>: View {
     }
 
     private var navigationRoot: some View {
-        NavStackEntryView(.init(url: rootCoordinator.url, coordinator: rootCoordinator))
+        NavStackEntryView(.init(url: session.url, coordinator: rootCoordinator))
     }
 }

Sources/LiveViewNative/Modifiers/NavigationTitleModifier.swift

@@ -8,23 +8,36 @@
 import SwiftUI
 
 struct NavigationTitleModifier: ViewModifier, Decodable, Equatable {
-    private let title: String
+    fileprivate let title: String
+    private let cached: Bool
 
     init(from decoder: Decoder) throws {
         let container = try decoder.container(keyedBy: CodingKeys.self)
         self.title = try container.decode(String.self, forKey: .title)
+        self.cached = false
     }
 
-    init(title: String) {
+    init(title: String, cached: Bool = false) {
         self.title = title
+        self.cached = cached
     }
 
     func body(content: Content) -> some View {
         content
             .navigationTitle(title)
+            .preference(key: NavigationTitleModifierKey.self, value: cached ? nil : self)
     }
 
     enum CodingKeys: String, CodingKey {
         case title
     }
 }
+
+/// A key that passes the navigation title up the View hierarchy via preferences.
+enum NavigationTitleModifierKey: PreferenceKey {
+    static var defaultValue: NavigationTitleModifier?
+    
+    static func reduce(value: inout NavigationTitleModifier?, nextValue: () -> NavigationTitleModifier?) {
+        value = nextValue().flatMap({ .init(title: $0.title, cached: true) }) ?? value
+    }
+}

Sources/LiveViewNative/NavStackEntryView.swift

@@ -41,33 +41,48 @@ struct NavStackEntryView<R: CustomRegistry>: View {
 
     @ViewBuilder
     private var elementTree: some View {
-        switch coordinator.state {
-        case .connected:
-            if let doc = coordinator.document {
-                coordinator.builder.fromNodes(doc[doc.root()].children(), coordinator: coordinator, url: coordinator.url)
-                    .environment(\.coordinatorEnvironment, CoordinatorEnvironment(coordinator, document: doc))
-            } else {
-                fatalError("State is `.connected`, but no `Document` was found.")
-            }
-        default:
-            if R.LoadingView.self == Never.self {
-                switch coordinator.state {
-                case .connected:
-                    fatalError()
-                case .notConnected:
-                    SwiftUI.Text("Not Connected")
-                case .connecting:
-                    SwiftUI.Text("Connecting")
-                case .connectionFailed(let error):
-                    SwiftUI.VStack {
-                        SwiftUI.Text("Connection Failed")
-                            .font(.subheadline)
-                        SwiftUI.Text(error.localizedDescription)
+        if coordinator.url == entry.url {
+            switch coordinator.state {
+            case .connected:
+                if let doc = coordinator.document {
+                    coordinator.builder.fromNodes(doc[doc.root()].children(), coordinator: coordinator, url: coordinator.url)
+                        .environment(\.coordinatorEnvironment, CoordinatorEnvironment(coordinator, document: doc))
+                        .onPreferenceChange(NavigationTitleModifierKey.self) { navigationTitle in
+                            self.liveViewModel.cachedNavigationTitle = navigationTitle
+                            print("Nav title changed")
+                        }
+                } else {
+                    fatalError("State is `.connected`, but no `Document` was found.")
+                }
+            default:
+                let content = Group {
+                    if R.LoadingView.self == Never.self {
+                        switch coordinator.state {
+                        case .connected:
+                            fatalError()
+                        case .notConnected:
+                            SwiftUI.Text("Not Connected")
+                        case .connecting:
+                            SwiftUI.Text("Connecting")
+                        case .connectionFailed(let error):
+                            SwiftUI.VStack {
+                                SwiftUI.Text("Connection Failed")
+                                    .font(.subheadline)
+                                SwiftUI.Text(error.localizedDescription)
+                            }
+                        }
+                    } else {
+                        R.loadingView(for: coordinator.url, state: coordinator.state)
                     }
                 }
-            } else {
-                R.loadingView(for: coordinator.url, state: coordinator.state)
+                if let cachedNavigationTitle = liveViewModel.cachedNavigationTitle {
+                    content.modifier(cachedNavigationTitle)
+                } else {
+                    content
+                }
             }
+        } else if let cachedNavigationTitle = liveViewModel.cachedNavigationTitle {
+            SwiftUI.Text("").modifier(cachedNavigationTitle)
         }
     }
 }

Sources/LiveViewNative/ViewModel.swift

@@ -14,6 +14,7 @@ import LiveViewNativeCore
 /// In a view in the LiveView tree, a model can be obtained using `@EnvironmentObject`.
 public class LiveViewModel<R: CustomRegistry>: ObservableObject {
     private var forms = [String: FormModel]()
+    var cachedNavigationTitle: NavigationTitleModifier?
 
     /// Get or create a ``FormModel`` for the `<form>` element with the given ID.
     public func getForm(elementID id: String) -> FormModel {

Sources/LiveViewNative/Views/Layout Containers/Presentation Containers/NavigationLink.swift

@@ -21,56 +21,18 @@ struct NavigationLink<R: CustomRegistry>: View {
 
     @ViewBuilder
     public var body: some View {
-        if let linkOpts = LinkOptions(element: element),
-           context.coordinator.session.config.navigationMode.supportsLinkState(linkOpts.state),
-           let url = linkOpts.url(in: context)
-        {
-            SwiftUI.NavigationLink(value: LiveNavigationEntry(url: url, coordinator: context.coordinator)) {
+        if let href = element.attributeValue(for: "destination").flatMap({
+            URL(string: $0, relativeTo: context.coordinator.url)?.appending(path: "").absoluteURL
+        }) {
+            SwiftUI.NavigationLink(
+                value: LiveNavigationEntry(
+                    url: href,
+                    coordinator: context.coordinator
+                )
+            ) {
                 context.buildChildren(of: element)
             }
             .disabled(element.attribute(named: "disabled") != nil)
-        } else {
-            // if there are no link options, or the coordinator doesn't support the required navigation, we don't show anything
-        }
-    }
-}
-
-struct LinkOptions {
-    let kind: LinkKind
-    let state: LiveRedirect.Kind
-    let href: String
-    
-    init?(element: ElementNode) {
-        guard let kindStr = element.attributeValue(for: "data-phx-link"),
-              let kind = LinkKind(rawValue: kindStr),
-              let stateStr = element.attributeValue(for: "data-phx-link-state"),
-              let state = LiveRedirect.Kind(rawValue: stateStr) else {
-            return nil
-        }
-        self.kind = kind
-        self.state = state
-        self.href = element.attributeValue(for: "data-phx-href")!
-    }
-    
-    @MainActor
-    func url<R: CustomRegistry>(in context: LiveContext<R>) -> URL? {
-        .init(string: href, relativeTo: context.coordinator.url)?.appending(path: "/").absoluteURL
-    }
-}
-
-enum LinkKind: String {
-    case redirect
-}
-
-extension LiveSessionConfiguration.NavigationMode {
-    func supportsLinkState(_ state: LiveRedirect.Kind) -> Bool {
-        switch self {
-        case .disabled:
-            return false
-        case .replaceOnly:
-            return state == .replace
-        case .enabled, .splitView:
-            return true
         }
     }
 }