codemod: make parser more comptible (#71122)

Author: huozhi

packages/next-codemod/lib/cra-to-next/global-css-transform.ts

@@ -1,5 +1,6 @@
 import nodePath from 'path'
 import type { API, FileInfo, Options } from 'jscodeshift'
+import { createParserFromPath } from '../parser'
 
 export const globalCssContext = {
   cssImports: new Set<string>(),
@@ -9,10 +10,10 @@ const globalStylesRegex = /(?<!\.module)\.(css|scss|sass)$/i
 
 export default function transformer(
   file: FileInfo,
-  api: API,
+  _api: API,
   options: Options
 ) {
-  const j = api.jscodeshift.withParser('tsx')
+  const j = createParserFromPath(file.path)
   const root = j(file.source)
   let hasModifications = false
 

packages/next-codemod/lib/cra-to-next/index-to-component.ts

@@ -1,4 +1,5 @@
 import type { API, FileInfo, JSXElement, Options } from 'jscodeshift'
+import { createParserFromPath } from '../parser'
 
 export const indexContext = {
   multipleRenderRoots: false,
@@ -7,10 +8,10 @@ export const indexContext = {
 
 export default function transformer(
   file: FileInfo,
-  api: API,
+  _api: API,
   options: Options
 ) {
-  const j = api.jscodeshift.withParser('tsx')
+  const j = createParserFromPath(file.path)
   const root = j(file.source)
   let hasModifications = false
   let foundReactRender = 0

packages/next-codemod/lib/parser.ts

@@ -0,0 +1,26 @@
+import j from 'jscodeshift'
+import babylonParse from 'jscodeshift/parser/babylon'
+import tsOptions from 'jscodeshift/parser/tsOptions'
+
+const dtsOptions = {
+  ...tsOptions,
+  plugins: [
+    ...tsOptions.plugins.filter((plugin) => plugin !== 'typescript'),
+    ['typescript', { dts: true }],
+  ],
+}
+
+function createParserFromPath(filePath: string): j.JSCodeshift {
+  const isDeclarationFile = /\.d\.(m|c)?ts$/.test(filePath)
+  if (isDeclarationFile) {
+    return j.withParser(babylonParse(dtsOptions))
+  }
+
+  // jsx is allowed in .js files, feed them into the tsx parser.
+  // tsx parser :.js, .jsx, .tsx
+  // ts parser: .ts, .mts, .cts
+  const isTsFile = /\.(m|c)?.ts$/.test(filePath)
+  return isTsFile ? j.withParser('ts') : j.withParser('tsx')
+}
+
+export { createParserFromPath }

packages/next-codemod/lib/run-jscodeshift.ts

@@ -13,10 +13,6 @@ export default function runJscodeshift(
       '**/node_modules/**',
       '**/.next/**',
       '**/build/**',
-      // type files
-      '**/*.d.ts',
-      '**/*.d.cts',
-      '**/*.d.mts',
       // test files
       '**/*.test.*',
       '**/*.spec.*',

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-03-env.d.input.ts

@@ -0,0 +1,5 @@
+import type { cookies } from 'next/headers'
+
+export {
+  cookies
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/origin-name-03-env.d.output.ts

@@ -0,0 +1,5 @@
+import type { cookies } from 'next/headers'
+
+export {
+  cookies
+}

packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block.input.js renamed to packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.input.js

@@ -0,0 +1,8 @@
+import type { JSX } from 'react'
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(
+  () => import('./component').then(mod => {
+    return mod.default;
+  })
+)

packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block.output.js renamed to packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.output.js

@@ -0,0 +1,10 @@
+import type { JSX } from 'react'
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(
+  () => import('./component').then(mod => {
+    return {
+      default: mod.default
+    };
+  })
+)