Update for JSKit 0.11.1, add async task modifier (#457)

I've also moved sources in `TokamakDemo` directory into their respective subdirectories for easier navigation.

* Update for JSKit 0.11.0, add async `task` modifier

* Add back new file locations to `NativeDemo`

* Add compiler `#if` check to `TaskDemo`

* Update to JavaScriptKit 0.11.1

* Restrict `TaskDemo` with `compiler(>=5.5)` check

* Replace `compiler` with `swift` in some places

* Revert "Replace `compiler` with `swift` in some places"

This reverts commit 534784c.

* Use Xcode 13.2 on GitHub Actions hosts

* Find `TokamakPackageTests` in the build directory

* Fix macOS tests bundle path

* Make `task` modifier available only on macOS Monterey

* Revert "Use Xcode 13.2 on GitHub Actions hosts"

This reverts commit 63d044f.

* Revert "Fix macOS tests bundle path"

This reverts commit 3ccbc98.

* Revert "Find `TokamakPackageTests` in the build directory"

This reverts commit 68c845b.

* Use `canImport(Concurrency)` as an ultimate check

* Use `compiler(>=5.5) && canImport(Concurrency)`

* Clarify new browser version requirements in `README.md`

* Account for `_Concurrency` naming

* Update `README.md`

* Update README.md

Co-authored-by: ezraberch <49635435+ezraberch@users.noreply.github.com>

Author: MaxDesiatov

NativeDemo/TokamakDemo.xcodeproj/project.pbxproj

@@ -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.resolved

@@ -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",

Package.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

README.md

@@ -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/TokamakCore/Modifiers/TaskModifier.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/TokamakCore/Shapes/Path/PathLayout.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/DOMNode.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/TokamakDOM/DOMRenderer.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/TokamakDOM/Views/Canvas/Canvas.swift

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

Sources/TokamakDemo/ButtonStyleDemo.swift Sources/TokamakDemo/Buttons/ButtonStyleDemo.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/Counter.swift Sources/TokamakDemo/Buttons/Counter.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/ForEachDemo.swift Sources/TokamakDemo/Containers/ForEachDemo.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/ListDemo.swift Sources/TokamakDemo/Containers/ListDemo.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())