Turbopack: Fix images.remotePatterns port/protocol serialization

packages/next-swc/crates/next-core/src/next_config.rs

@@ -321,9 +321,12 @@ pub enum ImageFormat {
 #[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize, TraceRawVcs)]
 #[serde(rename_all = "camelCase")]
 pub struct RemotePattern {
-    pub protocol: Option<RemotePatternProtocal>,
     pub hostname: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub protocol: Option<RemotePatternProtocal>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub port: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub pathname: Option<String>,
 }
 

packages/next-swc/crates/next-dev-tests/tests/integration/next/image/remotepattern/input/components/img.jsx

@@ -0,0 +1,3 @@
+import img from "../public/triangle-black.png";
+
+export { img };

packages/next-swc/crates/next-dev-tests/tests/integration/next/image/remotepattern/input/next.config.js

@@ -0,0 +1,12 @@
+/**@type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [{
+      hostname: 'image-optimization-test.vercel.app',
+      pathname: '/test.jpg',
+    }],
+  }
+};
+
+module.exports = config;

packages/next-swc/crates/next-dev-tests/tests/integration/next/image/remotepattern/input/pages/index.js

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import { useEffect } from "react";
+
+export default function Home() {
+  useEffect(() => {
+    // Only run on client
+    import("@turbo/pack-test-harness").then(runTests);
+  });
+
+  // Only the jpg is approved in the NextConfig's image.remotePatterns.
+  return <Image
+    id="external"
+    alt="test src image"
+    src="https://image-optimization-test.vercel.app/test.jpg"
+    width="100"
+    height="100"
+  />;
+}
+
+function runTests() {
+  it("it should link to approved external image", () => {
+    const img = document.querySelector("#external");
+    expect(img.src).toContain(encodeURIComponent("test.jpg"));
+  });
+
+  it("it should not link to unapproved external image", async () => {
+    const res = await fetch('/invalid');
+    const text = await res.text();
+    expect(text).toMatch(/Error: Invalid src prop/)
+  });
+}

packages/next-swc/crates/next-dev-tests/tests/integration/next/image/remotepattern/input/pages/invalid.js

@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+export default function Home() {
+  // Only the jpg is approved in the NextConfig's image.remotePatterns.
+  return <Image
+    id="external"
+    alt="test src image"
+    src="https://image-optimization-test.vercel.app/test.webp"
+    width="100"
+    height="100"
+  />;
+}

packages/next-swc/crates/next-dev-tests/tests/integration/next/image/transpilePackages/input/pages/index.js

@@ -11,7 +11,6 @@ export default function Home() {
 }
 
 function runTests() {
-  console.log(document.querySelectorAll("img"));
   it("it should link to imported image from a package", function () {
     const img = document.querySelector("#magic");
     expect(img.src).toContain(encodeURIComponent("_next/static/assets"));