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

…legacy-image` (#46460

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->

Fix for #46459

In order to test this, I've updated the `next-image-to-legacy-image`
tests to use fixtures that are written in TypeScript. I've disabled
type-checking and linting on those test fixtures, because they are
pretty noisy.

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

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")