@next/codemod 15.0.0-canary.181 → 15.0.0-canary.183

package/bin/next-codemod.js

@@ -23,18 +23,27 @@ const program = new commander_1.Command(packageJson.name)
     .helpOption('-h, --help', 'Display this help message.')
     .option('-f, --force', 'Bypass Git safety checks and forcibly run codemods')
     .option('-d, --dry', 'Dry run (no changes are made to files)')
-    .option('-p, --print', 'Print transformed files to your terminal')
+    .option('-p, --print', 'Print transformed files to stdout, useful for development')
+    .option('--verbose', 'Show more information about the transform process')
     .option('-j, --jscodeshift', '(Advanced) Pass options directly to jscodeshift')
     .action(transform_1.runTransform)
-    .allowUnknownOption();
+    .allowUnknownOption()
+    // This is needed for options for subcommands to be passed correctly.
+    // Because by default the options are not positional, which will pass options
+    // to the main command "@next/codemod" even if it was passed after subcommands,
+    // e.g. "@next/codemod upgrade --verbose" will be treated as "next-codemod --verbose upgrade"
+    // By enabling this, it will respect the position of the options and pass it to subcommands.
+    // x-ref: https://github.com/tj/commander.js/pull/1427
+    .enablePositionalOptions();
 program
     .command('upgrade')
     .description('Upgrade Next.js apps to desired versions with a single command.')
-    .argument('[revision]', 'NPM dist tag or exact version to upgrade to (e.g. "latest" or "15.0.0-canary.167"). Valid dist-tags are "latest", "canary" or "rc".', packageJson.version.includes('-canary.')
+    .argument('[revision]', 'Specify the target Next.js version using an NPM dist tag (e.g. "latest", "canary", "rc") or an exact version number (e.g. "15.0.0").', packageJson.version.includes('-canary.')
     ? 'canary'
     : packageJson.version.includes('-rc.')
         ? 'rc'
         : 'latest')
+    .usage('[revision] [options]')
     .option('--verbose', 'Verbose output', false)
     .action(upgrade_1.runUpgrade);
 program.parse(process.argv);

package/bin/transform.js

@@ -66,7 +66,7 @@ async function runTransform(transform, path, options) {
         return require(transformerPath).default(filesExpanded, options);
     }
     let args = [];
-    const { dry, print, runInBand, jscodeshift } = options;
+    const { dry, print, runInBand, jscodeshift, verbose } = options;
     if (dry) {
         args.push('--dry');
     }
@@ -76,7 +76,10 @@ async function runTransform(transform, path, options) {
     if (runInBand) {
         args.push('--run-in-band');
     }
-    args.push('--verbose=2');
+    if (verbose) {
+        args.push('--verbose=2');
+    }
+    args.push('--no-babel');
     args.push('--ignore-pattern=**/node_modules/**');
     args.push('--ignore-pattern=**/.next/**');
     args.push('--extensions=tsx,ts,jsx,js');
@@ -94,17 +97,28 @@ async function runTransform(transform, path, options) {
         throw new Error(`jscodeshift exited with code ${result.exitCode}`);
     }
     if (!dry && transformer === 'built-in-next-font') {
-        console.log('Uninstalling `@next/font`');
-        try {
+        const { uninstallNextFont } = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'uninstallNextFont',
+            message: 'Do you want to uninstall `@next/font`?',
+            initial: true,
+        });
+        if (uninstallNextFont) {
+            console.log('Uninstalling `@next/font`');
             (0, handle_package_1.uninstallPackage)('@next/font');
         }
-        catch {
-            console.error("Couldn't uninstall `@next/font`, please uninstall it manually");
-        }
     }
     if (!dry && transformer === 'next-request-geo-ip') {
-        console.log('Installing `@vercel/functions`...');
-        (0, handle_package_1.installPackages)(['@vercel/functions']);
+        const { installVercelFunctions } = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'installVercelFunctions',
+            message: 'Do you want to install `@vercel/functions`?',
+            initial: true,
+        });
+        if (installVercelFunctions) {
+            console.log('Installing `@vercel/functions`...');
+            (0, handle_package_1.installPackages)(['@vercel/functions']);
+        }
     }
 }
 //# sourceMappingURL=transform.js.map

package/bin/upgrade.js

@@ -9,7 +9,7 @@ const fs_1 = __importDefault(require("fs"));
 const child_process_1 = require("child_process");
 const path_1 = __importDefault(require("path"));
 const compare_versions_1 = require("compare-versions");
-const chalk_1 = __importDefault(require("chalk"));
+const picocolors_1 = __importDefault(require("picocolors"));
 const handle_package_1 = require("../lib/handle-package");
 const transform_1 = require("./transform");
 const utils_1 = require("../lib/utils");
@@ -19,11 +19,16 @@ const utils_1 = require("../lib/utils");
  */
 async function loadHighestNPMVersionMatching(query) {
     const versionsJSON = (0, child_process_1.execSync)(`npm --silent view "${query}" --json --field version`, { encoding: 'utf-8' });
-    const versions = JSON.parse(versionsJSON);
-    if (versions.length < 1) {
+    const versionOrVersions = JSON.parse(versionsJSON);
+    if (versionOrVersions.length < 1) {
         throw new Error(`Found no React versions matching "${query}". This is a bug in the upgrade tool.`);
     }
-    return versions[versions.length - 1];
+    // npm-view returns an array if there are multiple versions matching the query.
+    if (Array.isArray(versionOrVersions)) {
+        // The last entry will be the latest version published.
+        return versionOrVersions[versionOrVersions.length - 1];
+    }
+    return versionOrVersions;
 }
 async function runUpgrade(revision, options) {
     const { verbose } = options;
@@ -39,20 +44,21 @@ async function runUpgrade(revision, options) {
         'version' in targetNextPackageJson &&
         'peerDependencies' in targetNextPackageJson;
     if (!validRevision) {
-        throw new Error(`${chalk_1.default.yellow(`next@${revision}`)} does not exist. Make sure you entered a valid Next.js version or dist-tag. Check available versions at ${chalk_1.default.underline('https://www.npmjs.com/package/next?activeTab=versions')}.`);
+        throw new Error(`Invalid revision provided: "${revision}". Please provide a valid Next.js version or dist-tag (e.g. "latest", "canary", "rc", or "15.0.0").\nCheck available versions at https://www.npmjs.com/package/next?activeTab=versions.`);
     }
     const installedNextVersion = getInstalledNextVersion();
+    console.log(`Current Next.js version: v${installedNextVersion}`);
     const targetNextVersion = targetNextPackageJson.version;
+    if ((0, compare_versions_1.compareVersions)(installedNextVersion, targetNextVersion) >= 0) {
+        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on or higher than the target version "v${targetNextVersion}".`);
+        return;
+    }
     // We're resolving a specific version here to avoid including "ugly" version queries
     // in the manifest.
     // E.g. in peerDependencies we could have `^18.2.0 || ^19.0.0 || 20.0.0-canary`
     // If we'd just `npm add` that, the manifest would read the same version query.
     // This is basically a `npm --save-exact react@$versionQuery` that works for every package manager.
-    const [targetReactVersion, targetReactTypesVersion, targetReactDOMTypesVersion,] = await Promise.all([
-        loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`),
-        loadHighestNPMVersionMatching(`@types/react@${targetNextPackageJson.peerDependencies['react']}`),
-        loadHighestNPMVersionMatching(`@types/react-dom@${targetNextPackageJson.peerDependencies['react']}`),
-    ]);
+    const targetReactVersion = await loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`);
     if ((0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
         await suggestTurbopack(appPackageJson);
     }
@@ -71,18 +77,26 @@ async function runUpgrade(revision, options) {
         reactDependencies.push(`@types/react-dom@npm:types-react-dom@rc`);
     }
     else {
+        const [targetReactTypesVersion, targetReactDOMTypesVersion] = await Promise.all([
+            loadHighestNPMVersionMatching(`@types/react@${targetNextPackageJson.peerDependencies['react']}`),
+            loadHighestNPMVersionMatching(`@types/react-dom@${targetNextPackageJson.peerDependencies['react']}`),
+        ]);
         reactDependencies.push(`@types/react@${targetReactTypesVersion}`);
         reactDependencies.push(`@types/react-dom@${targetReactDOMTypesVersion}`);
     }
-    console.log(`Upgrading your project to ${chalk_1.default.blue('Next.js ' + targetNextVersion)}...\n`);
+    console.log(`Upgrading your project to ${picocolors_1.default.blue('Next.js ' + targetNextVersion)}...\n`);
     (0, handle_package_1.installPackages)([nextDependency, ...reactDependencies], {
         packageManager,
         silent: !verbose,
     });
     for (const codemod of codemods) {
-        await (0, transform_1.runTransform)(codemod, process.cwd(), { force: true });
+        await (0, transform_1.runTransform)(codemod, process.cwd(), { force: true, verbose });
+    }
+    console.log(); // new line
+    if (codemods.length > 0) {
+        console.log(`${picocolors_1.default.green('✔')} Codemods have been applied successfully.`);
     }
-    console.log(`\n${chalk_1.default.green('✔')} Your Next.js project has been upgraded successfully. ${chalk_1.default.bold('Time to ship! 🚢')}`);
+    console.log(`Please review the local changes and read the Next.js 15 migration guide to complete the migration. https://nextjs.org/docs/canary/app/building-your-application/upgrading/version-15`);
 }
 function getInstalledNextVersion() {
     try {
@@ -124,7 +138,7 @@ async function suggestTurbopack(packageJson) {
         packageJson.scripts['dev'] = devScript.replace('next dev', 'next dev --turbo');
         return;
     }
-    console.log(`${chalk_1.default.yellow('⚠')} Could not find "${chalk_1.default.bold('next dev')}" in your dev script.`);
+    console.log(`${picocolors_1.default.yellow('⚠')} Could not find "${picocolors_1.default.bold('next dev')}" in your dev script.`);
     const responseCustomDevScript = await (0, prompts_1.default)({
         type: 'text',
         name: 'customDevScript',
@@ -150,7 +164,7 @@ async function suggestCodemods(initialNextVersion, targetNextVersion) {
     const { codemods } = await (0, prompts_1.default)({
         type: 'multiselect',
         name: 'codemods',
-        message: `The following ${chalk_1.default.blue('codemods')} are recommended for your upgrade. Select the ones to apply.`,
+        message: `The following ${picocolors_1.default.blue('codemods')} are recommended for your upgrade. Select the ones to apply.`,
         choices: relevantCodemods.reverse().map(({ title, value, version }) => {
             return {
                 title: `(v${version}) ${value}`,

package/lib/handle-package.js

@@ -6,42 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPkgManager = getPkgManager;
 exports.uninstallPackage = uninstallPackage;
 exports.installPackages = installPackages;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const find_up_1 = __importDefault(require("find-up"));
 const execa_1 = __importDefault(require("execa"));
+const node_path_1 = require("node:path");
 function getPkgManager(baseDir) {
     try {
-        for (const { lockFile, packageManager } of [
-            { lockFile: 'yarn.lock', packageManager: 'yarn' },
-            { lockFile: 'pnpm-lock.yaml', packageManager: 'pnpm' },
-            { lockFile: 'package-lock.json', packageManager: 'npm' },
-            { lockFile: 'bun.lockb', packageManager: 'bun' },
-        ]) {
-            if (fs_1.default.existsSync(path_1.default.join(baseDir, lockFile))) {
-                return packageManager;
-            }
-        }
-        const userAgent = process.env.npm_config_user_agent;
-        if (userAgent) {
-            if (userAgent.startsWith('yarn')) {
-                return 'yarn';
-            }
-            else if (userAgent.startsWith('pnpm')) {
-                return 'pnpm';
-            }
-        }
-        try {
-            execa_1.default.sync('yarn --version', { stdio: 'ignore' });
-            return 'yarn';
-        }
-        catch {
-            try {
-                execa_1.default.sync('pnpm --version', { stdio: 'ignore' });
-                return 'pnpm';
-            }
-            catch {
-                execa_1.default.sync('bun --version', { stdio: 'ignore' });
-                return 'bun';
+        const lockFile = find_up_1.default.sync(['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml', 'bun.lockb'], { cwd: baseDir });
+        if (lockFile) {
+            switch ((0, node_path_1.basename)(lockFile)) {
+                case 'package-lock.json':
+                    return 'npm';
+                case 'yarn.lock':
+                    return 'yarn';
+                case 'pnpm-lock.yaml':
+                    return 'pnpm';
+                case 'bun.lockb':
+                    return 'bun';
+                default:
+                    return 'npm';
             }
         }
     }
@@ -57,7 +39,12 @@ function uninstallPackage(packageToUninstall, pkgManager) {
     if (pkgManager === 'yarn') {
         command = 'remove';
     }
-    execa_1.default.sync(pkgManager, [command, packageToUninstall], { stdio: 'inherit' });
+    try {
+        execa_1.default.sync(pkgManager, [command, packageToUninstall], { stdio: 'inherit' });
+    }
+    catch (error) {
+        throw new Error(`Failed to uninstall "${packageToUninstall}". Please uninstall it manually.`, { cause: error });
+    }
 }
 function installPackages(packageToInstall, options = {}) {
     const { packageManager = getPkgManager(process.cwd()), silent = false } = options;

package/lib/utils.js

@@ -76,6 +76,11 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
         value: 'next-image-to-legacy-image',
         version: '13.0',
     },
+    {
+        title: 'Transform App Router Route Segment Config `runtime` value from `experimental-edge` to `edge`',
+        value: 'app-dir-runtime-config-experimental-edge',
+        version: '13.1.2',
+    },
     {
         title: 'Uninstall `@next/font` and transform imports to `next/font`',
         value: 'built-in-next-font',
@@ -92,7 +97,7 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
         version: '14.0',
     },
     {
-        title: 'Transforms dynamic imports that return the named export itself to a module like object',
+        title: 'Transform `next/dynamic` imports accessing named exports to return an object with a `default` property',
         value: 'next-dynamic-access-named-export',
         version: '15.0.0-canary.44',
     },
@@ -106,10 +111,5 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
         value: 'next-async-request-api',
         version: '15.0.0-canary.171',
     },
-    {
-        title: 'Transforms `experimental-edge` to `edge` in the `runtime` route segment configuration within the App Router',
-        value: 'app-dir-runtime-config-experimental-edge',
-        version: '15.0.0-canary.179',
-    },
 ];
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.0.0-canary.181",
+  "version": "15.0.0-canary.183",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -8,11 +8,11 @@
     "directory": "packages/next-codemod"
   },
   "dependencies": {
-    "chalk": "4.1.2",
     "cheerio": "1.0.0-rc.9",
     "commander": "12.1.0",
     "compare-versions": "6.1.1",
     "execa": "4.0.3",
+    "find-up": "4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "1.1.0",
     "jscodeshift": "17.0.0",
@@ -34,6 +34,8 @@
   },
   "bin": "./bin/next-codemod.js",
   "devDependencies": {
-    "@types/jscodeshift": "0.11.0"
+    "@types/find-up": "4.0.0",
+    "@types/jscodeshift": "0.11.0",
+    "@types/prompts": "2.4.2"
   }
 }

package/transforms/lib/async-request-api/next-async-dynamic-api.js

@@ -17,12 +17,13 @@ function findDynamicImportsAndComment(root, j) {
         arguments: [{ value: 'next/headers' }],
     });
     importPaths.forEach((path) => {
-        (0, utils_1.insertCommentOnce)(path.node, j, DYNAMIC_IMPORT_WARN_COMMENT);
-        modified = true;
+        const inserted = (0, utils_1.insertCommentOnce)(path.node, j, DYNAMIC_IMPORT_WARN_COMMENT);
+        modified ||= inserted;
     });
     return modified;
 }
 function transformDynamicAPI(source, api, filePath) {
+    const isEntryFile = utils_1.NEXTJS_ENTRY_FILES.test(filePath);
     const j = api.jscodeshift.withParser('tsx');
     const root = j(source);
     let modified = false;
@@ -83,7 +84,7 @@ function transformDynamicAPI(source, api, filePath) {
             else {
                 // Determine if the function is an export
                 const closetScopePath = closetScope.get();
-                const isFromExport = (0, utils_1.isMatchedFunctionExported)(closetScopePath, j);
+                const isEntryFileExport = isEntryFile && (0, utils_1.isMatchedFunctionExported)(closetScopePath, j);
                 const closestFunctionNode = closetScope.size()
                     ? closetScopePath.node
                     : null;
@@ -92,7 +93,7 @@ function transformDynamicAPI(source, api, filePath) {
                 // If it's exporting a variable declaration, exportFunctionNode is the function declaration
                 // e.g. export const MyComponent = function() {}
                 let exportFunctionNode;
-                if (isFromExport) {
+                if (isEntryFileExport) {
                     if (closestFunctionNode &&
                         (0, utils_1.isFunctionType)(closestFunctionNode.type)) {
                         exportFunctionNode = closestFunctionNode;
@@ -104,7 +105,7 @@ function transformDynamicAPI(source, api, filePath) {
                 }
                 let canConvertToAsync = false;
                 // check if current path is under the default export function
-                if (isFromExport) {
+                if (isEntryFileExport) {
                     // if default export function is not async, convert it to async, and await the api call
                     if (!isCallAwaited) {
                         // If the scoped function is async function
@@ -134,13 +135,14 @@ function transformDynamicAPI(source, api, filePath) {
                             needsReactUseImport = true;
                         }
                         else {
-                            castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` Next.js Dynamic Async API Codemod: Manually await this call, if it's a Server Component `);
+                            const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` Next.js Dynamic Async API Codemod: Manually await this call, if it's a Server Component `);
+                            modified ||= casted;
                         }
                     }
                     else {
-                        castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ' Next.js Dynamic Async API Codemod: please manually await this call, codemod cannot transform due to undetermined async scope ');
+                        const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ' Next.js Dynamic Async API Codemod: please manually await this call, codemod cannot transform due to undetermined async scope ');
+                        modified ||= casted;
                     }
-                    modified = true;
                 }
             }
         });
@@ -183,9 +185,8 @@ function transformDynamicAPI(source, api, filePath) {
     if (needsReactUseImport) {
         (0, utils_1.insertReactUseImport)(root, j);
     }
-    if (findDynamicImportsAndComment(root, j)) {
-        modified = true;
-    }
+    const commented = findDynamicImportsAndComment(root, j);
+    modified ||= commented;
     return modified ? root.toSource() : null;
 }
 // cast to unknown first, then the specific type
@@ -195,11 +196,12 @@ const API_CAST_TYPE_MAP = {
     draftMode: 'UnsafeUnwrappedDraftMode',
 };
 function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, customMessage) {
+    let modified = false;
     const isTsFile = filePath.endsWith('.ts') || filePath.endsWith('.tsx');
     if (isTsFile) {
         // if the path of call expression is already being awaited, no need to cast
         if (path.parentPath?.node?.type === 'AwaitExpression')
-            return;
+            return false;
         /* Do type cast for headers, cookies, draftMode
           import {
             type UnsafeUnwrappedHeaders,
@@ -218,6 +220,7 @@ function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, in
         // Replace the original expression with the new cast expression,
         // also wrap () around the new cast expression.
         j(path).replaceWith(j.parenthesizedExpression(newCastExpression));
+        modified = true;
         // If cast types are not imported, add them to the import list
         const importDeclaration = root.find(j.ImportDeclaration, {
             source: { value: 'next/headers' },
@@ -243,8 +246,10 @@ function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, in
     }
     else {
         // Otherwise for JS file, leave a message to the user to manually handle the transformation
-        (0, utils_1.insertCommentOnce)(path.node, j, customMessage);
+        const inserted = (0, utils_1.insertCommentOnce)(path.node, j, customMessage);
+        modified ||= inserted;
     }
+    return modified;
 }
 function findImportMappingFromNextHeaders(root, j) {
     const mappings = {};

package/transforms/lib/async-request-api/next-async-dynamic-prop.js

@@ -23,6 +23,12 @@ function awaitMemberAccessOfProp(propIdName, path, j) {
     // await each member access
     memberAccess.forEach((memberAccessPath) => {
         const member = memberAccessPath.value;
+        const memberProperty = member.property;
+        const isAccessingMatchedProperty = j.Identifier.check(memberProperty) &&
+            utils_1.TARGET_PROP_NAMES.has(memberProperty.name);
+        if (!isAccessingMatchedProperty) {
+            return;
+        }
         if (isParentPromiseAllCallExpression(memberAccessPath, j)) {
             return;
         }
@@ -123,8 +129,43 @@ function applyUseAndRenameAccessedProp(propIdName, path, j) {
     }
     return modified;
 }
-const MATCHED_FILE_PATTERNS = /([\\/]|^)(page|layout|route)\.(t|j)sx?$/;
+function commentOnMatchedReExports(root, j) {
+    let modified = false;
+    root.find(j.ExportNamedDeclaration).forEach((path) => {
+        if (j.ExportSpecifier.check(path.value.specifiers[0])) {
+            const specifiers = path.value.specifiers;
+            for (const specifier of specifiers) {
+                if (j.ExportSpecifier.check(specifier) &&
+                    // Find matched named exports and default export
+                    (utils_1.TARGET_NAMED_EXPORTS.has(specifier.exported.name) ||
+                        specifier.exported.name === 'default')) {
+                    if (j.Literal.check(path.value.source)) {
+                        const localName = specifier.local.name;
+                        const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                        modified ||= commentInserted;
+                    }
+                    else if (path.value.source === null) {
+                        const localIdentifier = specifier.local;
+                        const localName = localIdentifier.name;
+                        // search if local identifier is from imports
+                        const importDeclaration = root
+                            .find(j.ImportDeclaration)
+                            .filter((importPath) => {
+                            return importPath.value.specifiers.some((importSpecifier) => importSpecifier.local.name === localName);
+                        });
+                        if (importDeclaration.size() > 0) {
+                            const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                            modified ||= commentInserted;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    return modified;
+}
 function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
+    let modified = false;
     if (paramTypeAnnotation && paramTypeAnnotation.typeAnnotation) {
         const typeAnnotation = paramTypeAnnotation.typeAnnotation;
         if (typeAnnotation.type === 'TSTypeLiteral') {
@@ -151,6 +192,7 @@ function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
                             // @ts-ignore
                             member.typeAnnotation.typeAnnotation,
                         ]));
+                        modified = true;
                     }
                 }
             });
@@ -189,6 +231,7 @@ function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
                                     member.typeAnnotation.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
                                         member.typeAnnotation.typeAnnotation,
                                     ]));
+                                    modified = true;
                                 }
                             }
                         });
@@ -197,11 +240,13 @@ function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
             }
         }
         propsIdentifier.typeAnnotation = paramTypeAnnotation;
+        modified = true;
     }
+    return modified;
 }
 function transformDynamicProps(source, api, filePath) {
-    const isMatched = MATCHED_FILE_PATTERNS.test(filePath);
-    if (!isMatched) {
+    const isEntryFile = utils_1.NEXTJS_ENTRY_FILES.test(filePath);
+    if (!isEntryFile) {
         return null;
     }
     let modified = false;
@@ -289,7 +334,8 @@ function transformDynamicProps(source, api, filePath) {
                     }
                 }
                 else {
-                    modified = awaitMemberAccessOfProp(argName, path, j);
+                    const awaited = awaitMemberAccessOfProp(argName, path, j);
+                    modified ||= awaited;
                 }
                 // cases of passing down `props` into any function
                 // Page(props) { callback(props) }
@@ -309,8 +355,8 @@ function transformDynamicProps(source, api, filePath) {
                     const args = callExpression.value.arguments;
                     const propPassedAsArg = args.find((arg) => j.Identifier.check(arg) && arg.name === argName);
                     const comment = ` Next.js Dynamic Async API Codemod: '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `;
-                    (0, utils_1.insertCommentOnce)(propPassedAsArg, j, comment);
-                    modified = true;
+                    const inserted = (0, utils_1.insertCommentOnce)(propPassedAsArg, j, comment);
+                    modified ||= inserted;
                 });
                 if (modified) {
                     modifyTypes(currentParam.typeAnnotation, propsIdentifier, root, j);
@@ -328,6 +374,14 @@ function transformDynamicProps(source, api, filePath) {
                     modified = true;
                 }
             }
+            else {
+                // When the prop argument is not destructured, we need to add comments to the spread properties
+                if (j.Identifier.check(currentParam)) {
+                    const commented = commentSpreadProps(path, currentParam.name, j);
+                    const modifiedTypes = modifyTypes(currentParam.typeAnnotation, propsIdentifier, root, j);
+                    modified ||= commented || modifiedTypes;
+                }
+            }
         }
         // Helper function to insert `const params = await asyncParams;` at the beginning of the function body
         function resolveAsyncProp(path, propertiesMap, propsIdentifierName, allProperties, isDefaultExport) {
@@ -446,20 +500,42 @@ function transformDynamicProps(source, api, filePath) {
                         continue;
                     }
                 }
-                const propRenamedId = j.Identifier.check(paramsProperty)
+                const paramsPropertyName = j.Identifier.check(paramsProperty)
                     ? paramsProperty.name
                     : null;
-                const propName = propRenamedId || matchedPropName;
+                const paramPropertyName = paramsPropertyName || matchedPropName;
                 // if propName is not used in lower scope, and it stars with unused prefix `_`,
                 // also skip the transformation
                 const functionBodyPath = path.get('body');
                 const hasUsedInBody = j(functionBodyPath)
                     .find(j.Identifier, {
-                    name: propName,
+                    name: paramPropertyName,
                 })
                     .size() > 0;
-                if (!hasUsedInBody && propName.startsWith('_'))
+                if (!hasUsedInBody && paramPropertyName.startsWith('_'))
                     continue;
+                // Search the usage of propName in the function body,
+                // if they're all awaited or wrapped with use(), skip the transformation
+                const propUsages = j(functionBodyPath).find(j.Identifier, {
+                    name: paramPropertyName,
+                });
+                // if there's usage of the propName, then do the check
+                if (propUsages.size()) {
+                    let hasMissingAwaited = false;
+                    propUsages.forEach((propUsage) => {
+                        // If the parent is not AwaitExpression, it's not awaited
+                        const isAwaited = propUsage.parentPath?.value.type === 'AwaitExpression';
+                        const isAwaitedByUse = isParentUseCallExpression(propUsage, j);
+                        if (!isAwaited && !isAwaitedByUse) {
+                            hasMissingAwaited = true;
+                            return;
+                        }
+                    });
+                    // If all the usages of parm are awaited, skip the transformation
+                    if (!hasMissingAwaited) {
+                        continue;
+                    }
+                }
                 modifiedPropertyCount++;
                 const propNameIdentifier = j.identifier(matchedPropName);
                 const propsIdentifier = j.identifier(propsIdentifierName);
@@ -468,7 +544,7 @@ function transformDynamicProps(source, api, filePath) {
                 // e.g.
                 // input: Page({ params: { slug } })
                 // output: const { slug } = await props.params; rather than const props = await props.params;
-                const uid = functionName + ':' + propName;
+                const uid = functionName + ':' + paramPropertyName;
                 if (paramsProperty?.type === 'ObjectPattern') {
                     const objectPattern = paramsProperty;
                     const objectPatternProperties = objectPattern.properties;
@@ -490,7 +566,7 @@ function transformDynamicProps(source, api, filePath) {
                 if (isAsyncFunc) {
                     // If it's async function, add await to the async props.<propName>
                     const paramAssignment = j.variableDeclaration('const', [
-                        j.variableDeclarator(j.identifier(propName), j.awaitExpression(accessedPropIdExpr)),
+                        j.variableDeclarator(j.identifier(paramPropertyName), j.awaitExpression(accessedPropIdExpr)),
                     ]);
                     if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
                         functionBody.unshift(paramAssignment);
@@ -508,7 +584,7 @@ function transformDynamicProps(source, api, filePath) {
                             (0, utils_1.turnFunctionReturnTypeToAsync)(node, j);
                             // Insert `const <propName> = await props.<propName>;` at the beginning of the function body
                             const paramAssignment = j.variableDeclaration('const', [
-                                j.variableDeclarator(j.identifier(propName), j.awaitExpression(accessedPropIdExpr)),
+                                j.variableDeclarator(j.identifier(paramPropertyName), j.awaitExpression(accessedPropIdExpr)),
                             ]);
                             if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
                                 functionBody.unshift(paramAssignment);
@@ -518,7 +594,7 @@ function transformDynamicProps(source, api, filePath) {
                     }
                     else {
                         const paramAssignment = j.variableDeclaration('const', [
-                            j.variableDeclarator(j.identifier(propName), j.callExpression(j.identifier('use'), [accessedPropIdExpr])),
+                            j.variableDeclarator(j.identifier(paramPropertyName), j.callExpression(j.identifier('use'), [accessedPropIdExpr])),
                         ]);
                         if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
                             needsReactUseImport = true;
@@ -555,6 +631,8 @@ function transformDynamicProps(source, api, filePath) {
     if (needsReactUseImport) {
         (0, utils_1.insertReactUseImport)(root, j);
     }
+    const commented = commentOnMatchedReExports(root, j);
+    modified ||= commented;
     return modified ? root.toSource() : null;
 }
 function findAllTypes(root, j, typeName) {
@@ -610,4 +688,27 @@ function findAllTypes(root, j, typeName) {
     });
     return types;
 }
+function commentSpreadProps(path, propsIdentifierName, j) {
+    let modified = false;
+    const functionBody = findFunctionBody(path);
+    const functionBodyCollection = j(functionBody);
+    // Find all the usage of spreading properties of `props`
+    const jsxSpreadProperties = functionBodyCollection.find(j.JSXSpreadAttribute, { argument: { name: propsIdentifierName } });
+    const objSpreadProperties = functionBodyCollection.find(j.SpreadElement, {
+        argument: { name: propsIdentifierName },
+    });
+    const comment = ` Next.js Dynamic Async API Codemod: '${propsIdentifierName}' is used with spread syntax (...). Any asynchronous properties of '${propsIdentifierName}' must be awaited when accessed. `;
+    // Add comment before it
+    jsxSpreadProperties.forEach((spread) => {
+        const inserted = (0, utils_1.insertCommentOnce)(spread.value, j, comment);
+        if (inserted)
+            modified = true;
+    });
+    objSpreadProperties.forEach((spread) => {
+        const inserted = (0, utils_1.insertCommentOnce)(spread.value, j, comment);
+        if (inserted)
+            modified = true;
+    });
+    return modified;
+}
 //# sourceMappingURL=next-async-dynamic-prop.js.map

package/transforms/lib/async-request-api/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = void 0;
+exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = exports.NEXTJS_ENTRY_FILES = void 0;
 exports.isFunctionType = isFunctionType;
 exports.isMatchedFunctionExported = isMatchedFunctionExported;
 exports.determineClientDirective = determineClientDirective;
@@ -14,6 +14,7 @@ exports.getFunctionPathFromExportPath = getFunctionPathFromExportPath;
 exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
 exports.insertCommentOnce = insertCommentOnce;
 exports.getVariableDeclaratorId = getVariableDeclaratorId;
+exports.NEXTJS_ENTRY_FILES = /([\\/]|^)(page|layout|route|default)\.(t|j)sx?$/;
 exports.TARGET_ROUTE_EXPORTS = new Set([
     'GET',
     'POST',
@@ -144,6 +145,8 @@ function insertReactUseImport(root, j) {
             source: {
                 value: 'react',
             },
+            // Skip the type only react imports
+            importKind: 'value',
         });
         if (reactImportDeclaration.size() > 0) {
             const importNode = reactImportDeclaration.get().node;
@@ -152,13 +155,8 @@ function insertReactUseImport(root, j) {
         }
         else {
             // Final all type imports to 'react'
-            const reactImport = root.find(j.ImportDeclaration, {
-                source: {
-                    value: 'react',
-                },
-            });
-            if (reactImport.size() > 0) {
-                reactImport
+            if (reactImportDeclaration.size() > 0) {
+                reactImportDeclaration
                     .get()
                     .node.specifiers.push(j.importSpecifier(j.identifier('use')));
             }
@@ -327,10 +325,11 @@ function insertCommentOnce(node, j, comment) {
     if (node.comments) {
         const hasComment = node.comments.some((commentNode) => commentNode.value === comment);
         if (hasComment) {
-            return;
+            return false;
         }
     }
     node.comments = [j.commentBlock(comment), ...(node.comments || [])];
+    return true;
 }
 function getVariableDeclaratorId(path, j) {
     const parent = path.parentPath;