Update for JSKit 0.11.1, add async task modifier

Package.resolved

@@ -6,8 +6,8 @@
         "repositoryURL": "https://github.com/swiftwasm/JavaScriptKit.git",
         "state": {
           "branch": null,
-          "revision": "b19e7c8b10a2750ed47753e31ed13613171f3294",
-          "version": "0.10.1"
+          "revision": "309e63c03d8116210ad0437f5d1f09a26d4de48b",
+          "version": "0.11.1"
         }
       },
       {
@@ -24,8 +24,8 @@
         "repositoryURL": "https://github.com/swiftwasm/OpenCombineJS.git",
         "state": {
           "branch": null,
-          "revision": "eaf324ce78710f53b52fb82e9a8de4693633e33a",
-          "version": "0.1.1"
+          "revision": "f1f1799ddbb9876a0ef8c5700a3b78d352d0b969",
+          "version": "0.1.2"
         }
       },
       {

Package.swift

@@ -4,6 +4,31 @@
 
 import PackageDescription
 
+var tokamakDOMDependencies: [Target.Dependency] = [
+  "TokamakCore",
+  "TokamakStaticHTML",
+  .product(
+    name: "OpenCombineShim",
+    package: "OpenCombine"
+  ),
+  .product(
+    name: "JavaScriptKit",
+    package: "JavaScriptKit",
+    condition: .when(platforms: [.wasi])
+  ),
+  "OpenCombineJS",
+]
+
+#if compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+tokamakDOMDependencies.append(
+  .product(
+    name: "JavaScriptEventLoop",
+    package: "JavaScriptKit",
+    condition: .when(platforms: [.wasi])
+  )
+)
+#endif
+
 let package = Package(
   name: "Tokamak",
   platforms: [
@@ -51,15 +76,15 @@ let package = Package(
     // .package(url: /* package url */, from: "1.0.0"),
     .package(
       url: "https://github.com/swiftwasm/JavaScriptKit.git",
-      .upToNextMinor(from: "0.10.0")
+      .upToNextMinor(from: "0.11.1")
     ),
     .package(
       url: "https://github.com/OpenCombine/OpenCombine.git",
       from: "0.12.0"
     ),
     .package(
       url: "https://github.com/swiftwasm/OpenCombineJS.git",
-      .upToNextMinor(from: "0.1.1")
+      .upToNextMinor(from: "0.1.2")
     ),
     .package(
       name: "Benchmark",
@@ -152,20 +177,7 @@ let package = Package(
     ),
     .target(
       name: "TokamakDOM",
-      dependencies: [
-        "TokamakCore",
-        "TokamakStaticHTML",
-        .product(
-          name: "OpenCombineShim",
-          package: "OpenCombine"
-        ),
-        .product(
-          name: "JavaScriptKit",
-          package: "JavaScriptKit",
-          condition: .when(platforms: [.wasi])
-        ),
-        "OpenCombineJS",
-      ]
+      dependencies: tokamakDOMDependencies
     ),
     .executableTarget(
       name: "TokamakDemo",

README.md

@@ -113,20 +113,33 @@ app.
 
 ## Requirements for app developers
 
-- macOS 11 and Xcode 13.0. *Xcode 13.1 is currently not supported.*
+- macOS 11 and Xcode 13.0 or later. Xcode 13.2 or later are recommended if you're developing
+multi-platform apps that target WebAssembly and macOS at the same time, as these versions support
+Swift concurrency back-deployment.
 - [Swift 5.4 or later](https://swift.org/download/) and Ubuntu 18.04 if you'd like to use Linux.
   Other Linux distributions are currently not supported.
 
 ## Requirements for app users
 
-Any browser that [supports WebAssembly](https://caniuse.com/#feat=wasm) should work, which currently includes:
+Any recent browser that [supports WebAssembly](https://caniuse.com/#feat=wasm) and [required
+JavaScript features](https://caniuse.com/?search=finalizationregistry) should work, which currently includes:
+
+- Edge 84+
+- Firefox 79+
+- Chrome 84+
+- Desktop Safari 14.1+
+- Mobile Safari 14.8+
+
+If you need to support older browser versions, you'll have to build with
+`JAVASCRIPTKIT_WITHOUT_WEAKREFS` flag, passing `-Xswiftc -DJAVASCRIPTKIT_WITHOUT_WEAKREFS` flags
+when compiling. This should lower browser requirements to these versions:
 
 - Edge 16+
 - Firefox 61+
 - Chrome 66+
 - (Mobile) Safari 12+
 
-Not all of these were tested though, compatibility reports are very welcome!
+Not all of these versions are tested on regular basis though, compatibility reports are very welcome!
 
 ## Getting started
 
@@ -141,7 +154,7 @@ app by following these steps:
 brew install swiftwasm/tap/carton
 ```
 
-If you had `carton` installed before this, make sure you have version 0.11.0 or greater:
+If you had `carton` installed before this, make sure you have version 0.12.0 or greater:
 
 ```
 carton --version

Sources/TokamakCore/Modifiers/TaskModifier.swift

@@ -0,0 +1,32 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+#if compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+
+public extension View {
+  func task(
+    priority: TaskPriority = .userInitiated,
+    _ action: @escaping @Sendable () async -> ()
+  ) -> some View {
+    var task: Task<(), Never>?
+    return onAppear {
+      task = Task(priority: priority, operation: action)
+    }
+    .onDisappear {
+      task?.cancel()
+    }
+  }
+}
+
+#endif

Sources/TokamakCore/Shapes/Path/PathLayout.swift

@@ -223,7 +223,7 @@ public extension Path {
 
   func applying(_ transform: CGAffineTransform) -> Path {
     guard transform != .identity else { return self }
-    let elements = self.elements.map { transform.transform(element: $0) }
+    let elements = elements.map { transform.transform(element: $0) }
     let box = _PathBox(elements: elements)
     return Path(storage: .path(box), sizing: .fixed)
   }

Sources/TokamakDOM/DOMNode.swift

@@ -60,7 +60,7 @@ extension AnyHTML {
     additionalAttributes: [HTMLAttribute: String],
     transaction: Transaction
   ) {
-    let attributes = self.attributes.merging(additionalAttributes, uniquingKeysWith: +)
+    let attributes = attributes.merging(additionalAttributes, uniquingKeysWith: +)
 
     dom.applyAttributes(attributes, with: transaction)
 
@@ -109,7 +109,9 @@ final class DOMNode: Target {
   func reinstall(_ listeners: [String: Listener]) {
     for (event, jsClosure) in self.listeners {
       _ = ref.removeEventListener!(event, jsClosure)
+      #if JAVASCRIPTKIT_WITHOUT_WEAKREFS
       jsClosure.release()
+      #endif
     }
     self.listeners = [:]
 

Sources/TokamakDOM/DOMRenderer.swift

@@ -20,6 +20,10 @@ import OpenCombineJS
 @_spi(TokamakCore) import TokamakCore
 import TokamakStaticHTML
 
+#if compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+import JavaScriptEventLoop
+#endif
+
 public typealias Sanitizers = TokamakStaticHTML.Sanitizers
 
 extension EnvironmentValues {
@@ -87,6 +91,10 @@ final class DOMRenderer: Renderer {
     rootRef = ref
     appendRootStyle(ref)
 
+    #if compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+    JavaScriptEventLoop.installGlobalExecutor()
+    #endif
+
     let scheduler = JSScheduler()
     self.scheduler = scheduler
     reconciler = StackReconciler(

Sources/TokamakDOM/Views/Canvas/Canvas.swift

@@ -62,15 +62,15 @@ struct _Canvas<Symbols: View>: View {
       HTML("canvas", [
         "style": "width: 100%; height: 100%;",
       ])
-        ._domRef($coordinator.canvas)
-        .onAppear { draw(in: proxy.size) }
-        ._onUpdate {
-          // Cancel the previous animation loop.
-          if let currentDrawLoop = coordinator.currentDrawLoop {
-            _ = JSObject.global.cancelAnimationFrame!(currentDrawLoop)
-          }
-          draw(in: proxy.size)
+      ._domRef($coordinator.canvas)
+      .onAppear { draw(in: proxy.size) }
+      ._onUpdate {
+        // Cancel the previous animation loop.
+        if let currentDrawLoop = coordinator.currentDrawLoop {
+          _ = JSObject.global.cancelAnimationFrame!(currentDrawLoop)
         }
+        draw(in: proxy.size)
+      }
     }
   }
 

Sources/TokamakDemo/ButtonStyleDemo.swift → Sources/TokamakDemo/Buttons/ButtonStyleDemo.swift

@@ -75,9 +75,9 @@ public struct ButtonStyleDemo: View {
           Text("Label").padding(.leading, 5)
         }
       })
-        .buttonStyle(
-          PressedButtonStyle(pressedColor: Color.red)
-        )
+      .buttonStyle(
+        PressedButtonStyle(pressedColor: Color.red)
+      )
       if #available(iOS 15.0, macOS 12.0, *) {
         Button("Prominent") {}
           .buttonStyle(BorderedProminentButtonStyle())

Sources/TokamakDemo/URLHashDemo.swift → Sources/TokamakDemo/DOM/URLHashDemo.swift

@@ -36,7 +36,9 @@ private final class HashState: ObservableObject {
 
   deinit {
     window.onhashchange = .undefined
+    #if JAVASCRIPTKIT_WITHOUT_WEAKREFS
     onHashChange.release()
+    #endif
   }
 }
 

Sources/TokamakDemo/Modifiers/ShadowDemo.swift

@@ -0,0 +1,22 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import TokamakShim
+
+struct ShadowDemo: View {
+  var body: some View {
+    Color.red.frame(width: 60, height: 60, alignment: .center)
+      .shadow(color: .black, radius: 5, x: 0, y: 10)
+  }
+}

Sources/TokamakDemo/Modifiers/TaskDemo.swift

@@ -0,0 +1,61 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+#if os(WASI) && compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+import JavaScriptKit
+import TokamakDOM
+
+private let jsFetch = JSObject.global.fetch.function!
+private func fetch(_ url: String) -> JSPromise {
+  JSPromise(jsFetch(url).object!)!
+}
+
+private struct Response: Decodable {
+  let uuid: String
+}
+
+struct TaskDemo: View {
+  @State private var response: Result<Response, Error>?
+
+  var body: some View {
+    VStack {
+      switch response {
+      case let .success(response):
+        Text("Fetched UUID is \(response.uuid)")
+      case let .failure(error):
+        Text("Error is \(error)")
+      default:
+        Text("Response not available yet")
+      }
+
+      Button("Fetch new UUID asynchronously") {
+        response = nil
+        Task { await fetchResponse() }
+      }
+    }.task {
+      await fetchResponse()
+    }
+  }
+
+  func fetchResponse() async {
+    do {
+      let fetchResult = try await fetch("https://httpbin.org/uuid").value
+      let json = try await JSPromise(fetchResult.json().object!)!.value
+      response = Result { try JSValueDecoder().decode(Response.self, from: json) }
+    } catch {
+      response = .failure(error)
+    }
+  }
+}
+#endif

Sources/TokamakDemo/TextDemo.swift → Sources/TokamakDemo/Text/TextDemo.swift

@@ -53,8 +53,8 @@ struct TextDemo: View {
           .heavy,
           .black,
         ], id: \.self) { weight in
-            Text("a")
-              .fontWeight(weight)
+          Text("a")
+            .fontWeight(weight)
         }
       }
       VStack {

Sources/TokamakDemo/TokamakDemo.swift

@@ -133,6 +133,9 @@ struct TokamakDemoView: View {
           }
           Section(header: Text("Modifiers")) {
             NavItem("Shadow", destination: ShadowDemo())
+            #if os(WASI) && compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
+            NavItem("Task", destination: TaskDemo())
+            #endif
           }
           Section(header: Text("Selectors")) {
             NavItem("DatePicker", destination: DatePickerDemo())