Implement WebView (only AppKitBackend and UIKitBackend for now)

Author: stackotter

Examples/Bundler.toml

@@ -54,3 +54,8 @@ version = '0.1.0'
 identifier = 'dev.swiftcrossui.PathsExample'
 product = 'PathsExample'
 version = '0.1.0'
+
+[apps.WebViewExample]
+identifier = 'dev.swiftcrossui.WebViewExample'
+product = 'WebViewExample'
+version = '0.1.0'

Examples/Package.resolved

@@ -68,6 +68,10 @@ let package = Package(
         .executableTarget(
             name: "PathsExample",
             dependencies: exampleDependencies
+        ),
+        .executableTarget(
+            name: "WebViewExample",
+            dependencies: exampleDependencies
         )
     ]
 )

Examples/Package.swift

@@ -0,0 +1,40 @@
+import Foundation
+import SwiftCrossUI
+import DefaultBackend
+
+#if canImport(SwiftBundlerRuntime)
+    import SwiftBundlerRuntime
+#endif
+
+@main
+@HotReloadable
+struct WebViewApp: App {
+    @State var urlInput = "https://stackotter.dev"
+
+    @State var url = URL(string: "https://stackotter.dev")!
+
+    var body: some Scene {
+        WindowGroup("WebViewExample") {
+            #hotReloadable {
+                VStack {
+                    HStack {
+                        TextField("URL", text: $urlInput)
+                        Button("Go") {
+                            guard let url = URL(string: urlInput) else {
+                                return // disabled
+                            }
+
+                            self.url = url
+                        }.disabled(URL(string: urlInput) == nil)
+                    }
+                    .padding()
+
+                    WebView($url)
+                        .onChange(of: url) {
+                            urlInput = url.absoluteString
+                        }
+                }
+            }
+        }
+    }
+}

Examples/Sources/WebViewExample/WebViewApp.swift

@@ -100,15 +100,15 @@ let package = Package(
         ),
         .package(
             url: "https://github.com/stackotter/swift-windowsappsdk",
-            branch: "5caed8b4f1b4abc6fc89b8f0a8fa20f3edfab14a"
+            branch: "ed938db0b9790b36391dc91b20cee81f2410309f"
         ),
         .package(
             url: "https://github.com/thebrowsercompany/swift-windowsfoundation",
             branch: "main"
         ),
         .package(
             url: "https://github.com/stackotter/swift-winui",
-            branch: "fad446caf8f40370d82a043ec293646023e07e61"
+            branch: "927e2c46430cfb1b6c195590b9e65a30a8fd98a2"
         ),
         // .package(
         //     url: "https://github.com/stackotter/TermKit",

Package.swift

@@ -1,5 +1,6 @@
 import AppKit
 import SwiftCrossUI
+import WebKit
 
 extension App {
     public typealias Backend = AppKitBackend
@@ -1481,6 +1482,27 @@ public final class AppKitBackend: AppBackend {
 
         widget.needsDisplay = true
     }
+
+    public func createWebView() -> Widget {
+        let webView = CustomWKWebView()
+        webView.navigationDelegate = webView.strongNavigationDelegate
+        return webView
+    }
+
+    public func updateWebView(
+        _ webView: Widget,
+        environment: EnvironmentValues,
+        onNavigate: @escaping (URL) -> Void
+    ) {
+        let webView = webView as! CustomWKWebView
+        webView.strongNavigationDelegate.onNavigate = onNavigate
+    }
+
+    public func navigateWebView(_ webView: Widget, to url: URL) {
+        let webView = webView as! CustomWKWebView
+        let request = URLRequest(url: url)
+        webView.load(request)
+    }
 }
 
 final class NSCustomTapGestureTarget: NSView {
@@ -1908,3 +1930,20 @@ final class NSDisabledScrollView: NSScrollView {
         self.nextResponder?.scrollWheel(with: event)
     }
 }
+
+final class CustomWKWebView: WKWebView {
+    var strongNavigationDelegate = CustomWKNavigationDelegate()
+}
+
+final class CustomWKNavigationDelegate: NSObject, WKNavigationDelegate {
+    var onNavigate: ((URL) -> Void)?
+
+    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
+        guard let url = webView.url else {
+            print("warning: Web view has no URL")
+            return
+        }
+
+        onNavigate?(url)
+    }
+}

Sources/AppKitBackend/AppKitBackend.swift

@@ -587,6 +587,7 @@ public protocol AppBackend {
     )
 
     // MARK: Paths
+
     /// Create a widget that can contain a path.
     func createPathWidget() -> Widget
     /// Create a path. It will not be shown until ``renderPath(_:container:)`` is called.
@@ -624,6 +625,20 @@ public protocol AppBackend {
         fillColor: Color,
         overrideStrokeStyle: StrokeStyle?
     )
+
+    // MARK: Web view
+
+    /// Create a web view.
+    func createWebView() -> Widget
+    /// Update a web view to reflect the given environment and use the given
+    /// navigation handler.
+    func updateWebView(
+        _ webView: Widget,
+        environment: EnvironmentValues,
+        onNavigate: @escaping (URL) -> Void
+    )
+    /// Navigates a web view to a given URL.
+    func navigateWebView(_ webView: Widget, to url: URL)
 }
 
 extension AppBackend {
@@ -1025,4 +1040,21 @@ extension AppBackend {
     ) {
         todo()
     }
+
+    public func createWebView() -> Widget {
+        todo()
+    }
+    public func updateWebView(
+        _ webView: Widget,
+        environment: EnvironmentValues,
+        onNavigate: @escaping (URL) -> Void
+    ) {
+        todo()
+    }
+    public func navigateWebView(
+        _ webView: Widget,
+        to url: URL
+    ) {
+        todo()
+    }
 }

Sources/SwiftCrossUI/Backend/AppBackend.swift

@@ -0,0 +1,46 @@
+import Foundation
+
+public struct WebView: ElementaryView {
+    @State var currentURL: URL?
+    @Binding var url: URL
+
+    public init(_ url: Binding<URL>) {
+        _url = url
+    }
+
+    func asWidget<Backend: AppBackend>(backend: Backend) -> Backend.Widget {
+        backend.createWebView()
+    }
+
+    func update<Backend: AppBackend>(
+        _ widget: Backend.Widget,
+        proposedSize: SIMD2<Int>,
+        environment: EnvironmentValues,
+        backend: Backend,
+        dryRun: Bool
+    ) -> ViewUpdateResult {
+        if !dryRun {
+            if url != currentURL {
+                backend.navigateWebView(widget, to: url)
+                currentURL = url
+            }
+            backend.updateWebView(widget, environment: environment) { destination in
+                currentURL = destination
+                url = destination
+            }
+            backend.setSize(of: widget, to: proposedSize)
+        }
+
+        return ViewUpdateResult(
+            size: ViewSize(
+                size: proposedSize,
+                idealSize: SIMD2(10, 10),
+                minimumWidth: 0,
+                minimumHeight: 0,
+                maximumWidth: nil,
+                maximumHeight: nil
+            ),
+            childResults: []
+        )
+    }
+}

Sources/SwiftCrossUI/Views/WebView.swift

@@ -0,0 +1,43 @@
+import WebKit
+import SwiftCrossUI
+
+extension UIKitBackend {
+    public func createWebView() -> Widget {
+        WebViewWidget()
+    }
+
+    public func updateWebView(
+        _ webView: Widget,
+        environment: EnvironmentValues,
+        onNavigate: @escaping (URL) -> Void
+    ) {
+        let webView = webView as! WebViewWidget
+        webView.onNavigate = onNavigate
+    }
+
+    public func navigateWebView(_ webView: Widget, to url: URL) {
+        let webView = webView as! WebViewWidget
+        let request = URLRequest(url: url)
+        webView.child.load(request)
+    }
+}
+
+/// A wrapper for WKWebView. Acts as the web view's delegate as well.
+final class WebViewWidget: WrapperWidget<WKWebView>, WKNavigationDelegate {
+    var onNavigate: ((URL) -> Void)?
+
+    init() {
+        super.init(child: WKWebView())
+
+        child.navigationDelegate = self
+    }
+
+    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
+        guard let url = webView.url else {
+            print("warning: Web view has no URL")
+            return
+        }
+
+        onNavigate?(url)
+    }
+}