Add Image implementation, bump JSKit to 0.9.0 (#155)

* Add Image view

* Add image to demo

* Update progress.md

* Alt text

* Use Bundle type to load images, remove systemName

* Add `logo-header.png` resource to `TokamakDemo`

* Reduce image size in the demo

* Allow bundles passed to `Image` to be optional

* Pass `nil` as a default `bundle` to `Image`

Co-authored-by: Max Desiatov <max@desiatov.com>

Package.resolved

@@ -6,8 +6,8 @@
         "repositoryURL": "https://github.com/swiftwasm/JavaScriptKit.git",
         "state": {
           "branch": null,
-          "revision": "8ba4135d5fd6a734c3771ef3fac66896bbcb0214",
-          "version": "0.8.0"
+          "revision": "b7a02434c6e973c08c3fd5069105ef44dd82b891",
+          "version": "0.9.0"
         }
       },
       {

Package.swift

@@ -39,7 +39,7 @@ let package = Package(
     // .package(url: /* package url */, from: "1.0.0"),
     .package(
       url: "https://github.com/swiftwasm/JavaScriptKit.git",
-      .upToNextMinor(from: "0.8.0")
+      .upToNextMinor(from: "0.9.0")
     ),
     .package(url: "https://github.com/MaxDesiatov/Runtime.git", from: "2.1.2"),
     .package(url: "https://github.com/TokamakUI/OpenCombine.git", from: "0.12.0-alpha2"),
@@ -95,7 +95,8 @@ let package = Package(
           package: "JavaScriptKit",
           condition: .when(platforms: [.wasi])
         ),
-      ]
+      ],
+      resources: [.copy("logo-header.png")]
     ),
     .target(
       name: "TokamakStaticDemo",

README.md

@@ -1,4 +1,4 @@
-<img alt="Tokamak logo" src="docs/logo-header.png" width="640px"/>
+<img alt="Tokamak logo" src="Sources/TokamakDemo/logo-header.png" width="640px"/>
 
 ## SwiftUI-compatible framework for building browser apps with WebAssembly
 

Sources/TokamakCore/Views/Image.swift

@@ -0,0 +1,57 @@
+// Copyright 2018-2020 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.
+//
+//  Created by Jed Fox on 07/01/2020.
+//
+
+import Foundation
+
+public struct Image: View {
+  let label: Text?
+  let name: String
+  let bundle: Bundle?
+
+  public init(_ name: String, bundle: Bundle? = nil) {
+    label = Text(name)
+    self.name = name
+    self.bundle = bundle
+  }
+
+  public init(_ name: String, bundle: Bundle? = nil, label: Text) {
+    self.label = label
+    self.name = name
+    self.bundle = bundle
+  }
+
+  public init(decorative name: String, bundle: Bundle? = nil) {
+    label = nil
+    self.name = name
+    self.bundle = bundle
+  }
+
+  public var body: Never {
+    neverBody("Image")
+  }
+}
+
+/// This is a helper class that works around absence of "package private" access control in Swift
+public struct _ImageProxy {
+  public let subject: Image
+
+  public init(_ subject: Image) { self.subject = subject }
+
+  public var labelString: String? { subject.label?.storage.rawText }
+  public var name: String { subject.name }
+  public var path: String? { subject.bundle?.path(forResource: subject.name, ofType: nil) }
+}

Sources/TokamakDOM/Core.swift

@@ -94,6 +94,7 @@ public typealias GeometryReader = TokamakCore.GeometryReader
 public typealias GridItem = TokamakCore.GridItem
 public typealias Group = TokamakCore.Group
 public typealias HStack = TokamakCore.HStack
+public typealias Image = TokamakCore.Image
 public typealias LazyHGrid = TokamakCore.LazyHGrid
 public typealias LazyVGrid = TokamakCore.LazyVGrid
 public typealias List = TokamakCore.List

Sources/TokamakDemo/TokamakDemo.swift

@@ -68,6 +68,9 @@ struct TokamakDemoView: View {
     NavigationView { () -> AnyView in
       let list = title(
         List {
+          Image("logo-header.png", label: Text("Tokamak Demo"))
+            .frame(height: 50)
+            .padding(.bottom, 20)
           Section(header: Text("Buttons")) {
             NavItem(
               "Counter",

Sources/TokamakStaticHTML/Views/Images/Image.swift

@@ -0,0 +1,40 @@
+// Copyright 2020 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.
+//
+//  Created by Max Desiatov on 11/04/2020.
+//
+
+import TokamakCore
+
+public typealias Image = TokamakCore.Image
+
+extension Image: ViewDeferredToRenderer {
+  public var deferredBody: AnyView {
+    AnyView(_HTMLImage(proxy: _ImageProxy(self)))
+  }
+}
+
+struct _HTMLImage: View {
+  let proxy: _ImageProxy
+  public var body: some View {
+    var attributes: [HTMLAttribute: String] = [
+      "src": proxy.path ?? proxy.name,
+      "style": "max-width: 100%; max-height: 100%",
+    ]
+    if let label = proxy.labelString {
+      attributes["alt"] = label
+    }
+    return AnyView(HTML("img", attributes))
+  }
+}

docs/progress.md

@@ -26,7 +26,7 @@ Table columns:
 
 |     |                                                                  |     |
 | --- | ---------------------------------------------------------------- | :-: |
-|     | [Image](https://developer.apple.com/documentation/swiftui/image) |     |
+| 🚧  | [Image](https://developer.apple.com/documentation/swiftui/image) |     |
 
 ### Buttons