Update NetworkImage API

.github/workflows/format.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   format:
     name: swift-format
-    runs-on: macos-latest
+    runs-on: macos-10.15
     steps:
       - uses: actions/checkout@v2
       - name: Tap

Demo/NetworkImageDemo.xcodeproj/project.pbxproj

@@ -7,6 +7,8 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		735D6F3F276760BE00A55DCD /* RandomImageExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 735D6F3E276760BE00A55DCD /* RandomImageExampleView.swift */; };
+		735D6F40276760BE00A55DCD /* RandomImageExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 735D6F3E276760BE00A55DCD /* RandomImageExampleView.swift */; };
 		736FE2D1271166DF0096FFD5 /* NetworkImage in Frameworks */ = {isa = PBXBuildFile; productRef = 736FE2D0271166DF0096FFD5 /* NetworkImage */; };
 		736FE2D3271166E60096FFD5 /* NetworkImage in Frameworks */ = {isa = PBXBuildFile; productRef = 736FE2D2271166E60096FFD5 /* NetworkImage */; };
 		823B4EB625B08999003ACBD5 /* ImageListExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 823B4EB525B08999003ACBD5 /* ImageListExampleView.swift */; };
@@ -27,6 +29,7 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		735D6F3E276760BE00A55DCD /* RandomImageExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RandomImageExampleView.swift; sourceTree = "<group>"; };
 		736FE2CF271166B70096FFD5 /* NetworkImage */ = {isa = PBXFileReference; lastKnownFileType = folder; name = NetworkImage; path = ..; sourceTree = "<group>"; };
 		823B4EB525B08999003ACBD5 /* ImageListExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageListExampleView.swift; sourceTree = "<group>"; };
 		82BCD90725AE1B2D00FC3072 /* ExampleList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ExampleList.swift; sourceTree = "<group>"; };
@@ -83,6 +86,7 @@
 				82BCD91225AE21D400FC3072 /* SimpleExampleView.swift */,
 				82BCD91925AE2FD500FC3072 /* PlaceholderExampleView.swift */,
 				82F4ACDD25AE0E2600D19C29 /* StyleExampleView.swift */,
+				735D6F3E276760BE00A55DCD /* RandomImageExampleView.swift */,
 				823B4EB525B08999003ACBD5 /* ImageListExampleView.swift */,
 				82F4ACB225AE0C3100D19C29 /* Assets.xcassets */,
 			);
@@ -228,6 +232,7 @@
 			files = (
 				82BCD90825AE1B2D00FC3072 /* ExampleList.swift in Sources */,
 				82BCD92125AEC74900FC3072 /* ImageLoaderExampleView.swift in Sources */,
+				735D6F3F276760BE00A55DCD /* RandomImageExampleView.swift in Sources */,
 				82F4ACC325AE0C3200D19C29 /* NetworkImageDemoApp.swift in Sources */,
 				82F4ACDE25AE0E2600D19C29 /* StyleExampleView.swift in Sources */,
 				82BCD91A25AE2FD500FC3072 /* PlaceholderExampleView.swift in Sources */,
@@ -243,6 +248,7 @@
 				82BCD90925AE1B2D00FC3072 /* ExampleList.swift in Sources */,
 				82F4ACC425AE0C3200D19C29 /* NetworkImageDemoApp.swift in Sources */,
 				82F4ACDF25AE0E2600D19C29 /* StyleExampleView.swift in Sources */,
+				735D6F40276760BE00A55DCD /* RandomImageExampleView.swift in Sources */,
 				823B4EB725B08999003ACBD5 /* ImageListExampleView.swift in Sources */,
 				82BCD91B25AE2FD500FC3072 /* PlaceholderExampleView.swift in Sources */,
 				82BCD91425AE21D400FC3072 /* SimpleExampleView.swift in Sources */,

Demo/Shared/ExampleList.swift

@@ -6,6 +6,7 @@ struct ExampleList: View {
       NavigationLink("Displaying Network Images", destination: SimpleExampleView())
       NavigationLink("Styling Network Images", destination: StyleExampleView())
       NavigationLink("Placeholders and fallbacks", destination: PlaceholderExampleView())
+      NavigationLink("Random Image", destination: RandomImageExampleView())
       NavigationLink("Image List", destination: ImageListExampleView())
 
       #if os(iOS)

Demo/Shared/ImageListExampleView.swift

@@ -19,14 +19,15 @@ struct ImageListExampleView: View {
     ScrollView {
       LazyVStack {
         ForEach(urls, id: \.self) { url in
-          NetworkImage(url: url)
-            .aspectRatio(1.778, contentMode: .fill)
-            .background(Color.secondary.opacity(0.2))
-            .clipShape(RoundedRectangle(cornerRadius: 4))
-            .overlay(
-              RoundedRectangle(cornerRadius: 4)
-                .strokeBorder(Color.primary.opacity(0.25), lineWidth: 0.5)
-            )
+          NetworkImage(url: url, transaction: .init(animation: .default)) { image in
+            image.resizable().scaledToFill()
+          }
+          .aspectRatio(1.778, contentMode: .fill)
+          .clipShape(RoundedRectangle(cornerRadius: 4))
+          .overlay(
+            RoundedRectangle(cornerRadius: 4)
+              .strokeBorder(Color.primary.opacity(0.25), lineWidth: 0.5)
+          )
         }
       }
       .padding()

Demo/Shared/PlaceholderExampleView.swift

@@ -2,35 +2,31 @@ import NetworkImage
 import SwiftUI
 
 struct PlaceholderExampleView: View {
+  let delayedURL = URL(string: "https://deelay.me/2000/https://picsum.photos/id/1025/300/200")
+  let delayedInvalidURL = URL(string: "https://deelay.me/2000/https://example.com")
+
+  private func exampleImage(url: URL?) -> some View {
+    NetworkImage(url: url, transaction: .init(animation: .default)) { image in
+      image
+    } placeholder: {
+      ProgressView()
+    } fallback: {
+      Image(systemName: "photo.fill")
+        .imageScale(.large)
+        .blendMode(.overlay)
+    }
+    .frame(width: 200, height: 200)
+    .background(Color.secondary.opacity(0.25))
+    .clipShape(RoundedRectangle(cornerRadius: 8))
+  }
+
   private var content: some View {
     VStack(spacing: 8) {
       Text("This example is using a delay proxy to simulate the slow loading of images.")
         .padding()
 
-      NetworkImage(url: URL(string: "https://deelay.me/2000/https://picsum.photos/id/1025/300/200"))
-      {
-        ProgressView()
-      } fallback: {
-        Image(systemName: "photo.fill")
-          .imageScale(.large)
-          .blendMode(.overlay)
-      }
-      .scaledToFill()
-      .frame(width: 200, height: 200)
-      .background(Color.secondary.opacity(0.25))
-      .clipShape(RoundedRectangle(cornerRadius: 8))
-
-      NetworkImage(url: URL(string: "https://deelay.me/2000/https://example.com")) {
-        ProgressView()
-      } fallback: {
-        Image(systemName: "photo.fill")
-          .imageScale(.large)
-          .blendMode(.overlay)
-      }
-      .scaledToFill()
-      .frame(width: 200, height: 200)
-      .background(Color.secondary.opacity(0.25))
-      .clipShape(RoundedRectangle(cornerRadius: 8))
+      exampleImage(url: delayedURL)
+      exampleImage(url: delayedInvalidURL)
     }
     .navigationTitle("Placeholders and fallbacks")
   }

Demo/Shared/RandomImageExampleView.swift

@@ -0,0 +1,46 @@
+import NetworkImage
+import SwiftUI
+
+struct RandomImageExampleView: View {
+  private let identifiers = [
+    "0", "1", "10", "100", "1000", "1001",
+    "1002", "1003", "1004", "1005", "1006",
+    "1008", "1009", "101", "1010", "1011",
+    "1012", "1013", "1014", "1015", "1016",
+    "1018", "1019", "102", "1020", "1021",
+    "1022", "1023", "1024", "1025",
+  ]
+
+  @State var url = URL(string: "https://picsum.photos/id/0/300/200")
+
+  private var content: some View {
+    VStack {
+      NetworkImage(url: self.url, transaction: .init(animation: .default)) { image in
+        image.resizable().scaledToFill()
+      }
+      .id(self.url)
+      .frame(width: 200, height: 200)
+      .clipShape(RoundedRectangle(cornerRadius: 8))
+      Button("Random Image") {
+        if let id = self.identifiers.randomElement() {
+          self.url = URL(string: "https://picsum.photos/id/\(id)/300/200")
+        }
+      }
+    }
+    .navigationTitle("Random Image")
+  }
+
+  var body: some View {
+    #if os(iOS)
+      content.navigationBarTitleDisplayMode(.inline)
+    #else
+      content
+    #endif
+  }
+}
+
+struct RandomImageExampleView_Previews: PreviewProvider {
+  static var previews: some View {
+    RandomImageExampleView()
+  }
+}

Demo/Shared/SimpleExampleView.swift

@@ -5,11 +5,9 @@ struct SimpleExampleView: View {
   private var content: some View {
     VStack {
       NetworkImage(url: URL(string: "https://picsum.photos/id/1025/300/200"))
-        .scaledToFill()
         .frame(width: 200, height: 200)
         .clipShape(RoundedRectangle(cornerRadius: 8))
       NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200"))
-        .scaledToFill()
         .frame(width: 200, height: 200)
         .clipShape(RoundedRectangle(cornerRadius: 8))
     }

Demo/Shared/StyleExampleView.swift

@@ -4,14 +4,23 @@ import SwiftUI
 struct StyleExampleView: View {
   private var content: some View {
     VStack {
-      NetworkImage(url: URL(string: "https://picsum.photos/id/1025/300/200"))
-        .frame(width: 200, height: 200)
-        .clipShape(RoundedRectangle(cornerRadius: 8))
-      NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200"))
-        .frame(width: 200, height: 200)
-        .clipShape(RoundedRectangle(cornerRadius: 8))
+      NetworkImage(url: URL(string: "https://picsum.photos/id/1025/300/200")) { image in
+        image
+          .resizable()
+          .scaledToFill()
+          .grayscale(0.99)
+      }
+      .frame(width: 200, height: 200)
+      .clipShape(RoundedRectangle(cornerRadius: 8))
+      NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200")) { image in
+        image
+          .resizable()
+          .scaledToFill()
+          .blur(radius: 4)
+      }
+      .frame(width: 200, height: 200)
+      .clipShape(RoundedRectangle(cornerRadius: 8))
     }
-    .networkImageStyle(GrayscaleNetworkImageStyle())
     .navigationTitle("Styling Network Images")
   }
 
@@ -23,12 +32,3 @@ struct StyleExampleView: View {
     #endif
   }
 }
-
-struct GrayscaleNetworkImageStyle: NetworkImageStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    configuration.image
-      .resizable()
-      .scaledToFill()
-      .grayscale(0.99)
-  }
-}