Support caching remote assets (#148)

* Use Xcode 16.3 on CI

* Create `WKURLSchemeHandler` instance to cache js & css files

* Update the Demo app to show remote editors

* Support caching scheme-less resource links

* Add a note about how the "Remote Editor" is launched in the demo

* Support caching JS source map files

* Be extra clear what to change in the demo app's configuration

* Fix editor assets endpoint value

* Fix npm lint issues

* Update testing notes

* Do not cache `wpcom/v2/editor-assets` API responses

* Only cache assets if server responses with 2xx status code

* fix: Reinstate Android remote editor asset fetch

Utilize JS fetch until we implement fetching and caching editor assets
for Android.

* build: Align SwiftSoup version with WP-iOS

WP-iOS relies upon an exact version of 2.7.5. This caused a conflict:

```
Failed to resolve dependencies Dependencies could not be resolved because root depends on 'swiftsoup' 2.7.5 and 'gutenbergkit' depends on 'swiftsoup' 2.8.8..<3.0.0.
```

* Add `EditorConfiguration` parameter to the `warmup` function

---------

Co-authored-by: David Calhoun <[email protected]>

Author: crazytonyli

.xcode-version

@@ -1 +1 @@
-15.4
+16.3-v2

Makefile

@@ -1,4 +1,4 @@
-SIMULATOR_DESTINATION := OS=17.5,name=iPhone 15 Plus
+SIMULATOR_DESTINATION := OS=18.4,name=iPhone 16 Plus
 
 define XCODEBUILD_CMD
 	@set -o pipefail && \

Package.resolved

@@ -9,10 +9,13 @@ let package = Package(
     products: [
         .library(name: "GutenbergKit", targets: ["GutenbergKit"])
     ],
+    dependencies: [
+        .package(url: "https://github.com/scinfu/SwiftSoup.git", from: "2.7.5"),
+    ],
     targets: [
         .target(
             name: "GutenbergKit",
-            dependencies: [],
+            dependencies: ["SwiftSoup"],
             path: "ios/Sources/GutenbergKit",
             exclude: [],
             resources: [.copy("Gutenberg")]
@@ -21,7 +24,10 @@ let package = Package(
             name: "GutenbergKitTests",
             dependencies: ["GutenbergKit"],
             path: "ios/Tests",
-            exclude: []
-        )
+            exclude: [],
+            resources: [
+                .copy("GutenbergKitTests/Resources/manifest-test-case-1.json")
+            ]
+        ),
     ]
 )

Package.swift

@@ -4,11 +4,84 @@ import GutenbergKit
 let editorURL: URL? = ProcessInfo.processInfo.environment["GUTENBERG_EDITOR_URL"].flatMap(URL.init)
 
 struct ContentView: View {
+
+    let remoteEditorConfigurations: [EditorConfiguration] = [.template]
+
     var body: some View {
-        NavigationView {
-            EditorView(editorURL: editorURL)
+        List {
+            Section {
+                NavigationLink {
+                    EditorView(configuration: .default)
+                } label: {
+                    Text("Bundled Editor")
+                }
+            }
+
+            Section {
+                ForEach(remoteEditorConfigurations, id: \.siteURL) { configuration in
+                    NavigationLink {
+                        EditorView(configuration: configuration)
+                    } label: {
+                        Text(URL(string: configuration.siteURL)?.host ?? configuration.siteURL)
+                    }
+                }
+
+                if remoteEditorConfigurations.isEmpty {
+                    Text("Add `EditorConfiguration` instances to the `remoteEditorConfigurations` array to launch remote editors here.")
+                }
+            } header: {
+                Text("Remote Editors")
+            } footer: {
+                if ProcessInfo.processInfo.environment["GUTENBERG_EDITOR_REMOTE_URL"] != nil {
+                    Text("Note: The editor is backed by the dev server created by `make dev-server-remote`.")
+                } else {
+                    Text("Note: The editor is backed by the compiled web app created by `make build`.")
+                }
+            }
         }
+        .toolbar {
+            ToolbarItem(placement: .primaryAction) {
+                Button {
+                    Task {
+                        NSLog("Start to fetch assets")
+                        for configuration in remoteEditorConfigurations {
+                            let library = EditorAssetsLibrary(configuration: configuration)
+                            do {
+                                try await library.fetchAssets()
+                            } catch {
+                                NSLog("Failed to fetch assets for \(configuration.siteURL): \(error)")
+                            }
+                        }
+                        NSLog("Done fetching assets")
+                    }
+                } label: {
+                    Image(systemName: "arrow.clockwise")
+                }
+
+            }
+        }
+    }
+}
+
+private extension EditorConfiguration {
+
+    static var template: Self {
+        var configuration = EditorConfiguration.default
+
+        #warning("1. Update the property values below")
+        #warning("2. Install the Jetpack plugin to the site")
+        configuration.siteURL = "https://modify-me.com"
+        configuration.authHeader = "Insert the Authorization header value here"
+
+        // DO NOT CHANGE the properties below
+        configuration.siteApiRoot = "\(configuration.siteURL)/wp-json/"
+        configuration.editorAssetsEndpoint = URL(string: configuration.siteApiRoot)!.appendingPathComponent("wpcom/v2/editor-assets")
+        // The `plugins: true` is necessary for the editor to use 'remote.html'
+        configuration.plugins = true
+
+        return configuration
     }
+
 }
 
 #Preview {

ios/Demo-iOS/Gutenberg.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -2,10 +2,10 @@ import SwiftUI
 import GutenbergKit
 
 struct EditorView: View {
-    var editorURL: URL?
+    var configuration: EditorConfiguration
 
     var body: some View {
-        _EditorView(editorURL: editorURL)
+        _EditorView(configuration: configuration)
             .toolbar {
                 ToolbarItemGroup(placement: .topBarLeading) {
                     Button(action: {}, label: {
@@ -69,11 +69,11 @@ struct EditorView: View {
 }
 
 private struct _EditorView: UIViewControllerRepresentable {
-    var editorURL: URL?
+    let configuration: EditorConfiguration
 
     func makeUIViewController(context: Context) -> EditorViewController {
-        let viewController = EditorViewController()
-        viewController.editorURL = editorURL
+        let viewController = EditorViewController(configuration: configuration)
+
         if #available(iOS 16.4, *) {
             viewController.webView.isInspectable = true
         }
@@ -88,6 +88,6 @@ private struct _EditorView: UIViewControllerRepresentable {
 
 #Preview {
     NavigationStack {
-        EditorView()
+        EditorView(configuration: .default)
     }
 }

ios/Demo-iOS/Sources/ContentView.swift

@@ -4,7 +4,9 @@ import SwiftUI
 struct GutenbergApp: App {
     var body: some Scene {
         WindowGroup {
-            ContentView()
+            NavigationStack {
+                ContentView()
+            }
         }
     }
 }