[next/codemod]: Preserve type-only imports when using next-image-to-legacy-image

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 export async function Home() {
   const Image = await import("next/image");
   const Named = await import("next/image");
@@ -11,4 +13,4 @@ export async function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 export async function Home() {
   const Image = await import("next/legacy/image");
   const Named = await import("next/legacy/image");
@@ -11,4 +13,4 @@ export async function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.tsx

@@ -1,5 +1,9 @@
+// @ts-nocheck
+/* eslint-disable */
 import Image from "next/image";
 import Named from "next/image";
+import type { ImageProps } from "next/image";
+import { type ImageLoaderProps } from "next/image";
 import Foo from "foo";
 import Future1 from "next/future/image";
 import Future2 from "next/future/image";
@@ -12,4 +16,4 @@ export default function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.tsx

@@ -1,5 +1,9 @@
+// @ts-nocheck
+/* eslint-disable */
 import Image from "next/legacy/image";
 import Named from "next/legacy/image";
+import type { ImageProps } from "next/legacy/image";
+import { type ImageLoaderProps } from "next/legacy/image";
 import Foo from "foo";
 import Future1 from "next/image";
 import Future2 from "next/image";
@@ -12,4 +16,4 @@ export default function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.input.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.input.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 export async function Home() {
   const Image = require("next/image");
   const Named = require("next/image");
@@ -11,4 +13,4 @@ export async function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.output.js → packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.output.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 export async function Home() {
   const Image = require("next/legacy/image");
   const Named = require("next/legacy/image");
@@ -11,4 +13,4 @@ export async function Home() {
     <Future1 src="/test.webp" width="60" height="70" />
     <Future2 src="/test.avif" width="80" height="90" />
   </div>)
-}
+}

packages/next-codemod/transforms/__tests__/next-image-to-legacy-image.test.js

@@ -7,10 +7,10 @@ const { join } = require('path')
 const fixtureDir = 'next-image-to-legacy-image'
 const fixtureDirPath = join(__dirname, '..', '__testfixtures__', fixtureDir)
 const fixtures = readdirSync(fixtureDirPath)
-  .filter(file => file.endsWith('.input.js'))
-  .map(file => file.replace('.input.js', ''))
+  .filter(file => file.endsWith('.input.tsx'))
+  .map(file => file.replace('.input.tsx', ''))
 
 for (const fixture of fixtures) {
   const prefix = `${fixtureDir}/${fixture}`;
-  defineTest(__dirname, fixtureDir,  null, prefix)
+  defineTest(__dirname, fixtureDir,  null, prefix, { parser: 'tsx' });
 }

packages/next-codemod/transforms/next-image-to-legacy-image.ts

@@ -15,12 +15,7 @@ export default function transformer(
       source: { value: 'next/image' },
     })
     .forEach((imageImport) => {
-      j(imageImport).replaceWith(
-        j.importDeclaration(
-          imageImport.node.specifiers,
-          j.stringLiteral('next/legacy/image')
-        )
-      )
+      imageImport.node.source = j.stringLiteral('next/legacy/image')
     })
   // Before: const Image = await import("next/image")
   //  After: const Image = await import("next/legacy/image")