@next/codemod 15.0.0-canary.173 → 15.0.0-canary.175

package/bin/next-codemod.js

@@ -30,7 +30,12 @@ const program = new commander_1.Command(packageJson.name)
 program
     .command('upgrade')
     .description('Upgrade Next.js apps to desired versions with a single command.')
-    .usage('[options]')
+    .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.')
+    ? 'canary'
+    : packageJson.version.includes('-rc.')
+        ? 'rc'
+        : 'latest')
+    .option('--verbose', 'Verbose output', false)
     .action(upgrade_1.runUpgrade);
 program.parse(process.argv);
 //# sourceMappingURL=next-codemod.js.map

package/bin/transform.js

@@ -98,7 +98,7 @@ async function runTransform(transform, path, options) {
     }
     if (!dry && transformer === 'next-request-geo-ip') {
         console.log('Installing `@vercel/functions`...');
-        (0, handle_package_1.installPackage)('@vercel/functions');
+        (0, handle_package_1.installPackages)(['@vercel/functions']);
     }
 }
 //# sourceMappingURL=transform.js.map

package/bin/upgrade.js

@@ -12,93 +12,73 @@ const compare_versions_1 = require("compare-versions");
 const chalk_1 = __importDefault(require("chalk"));
 const codemods_1 = require("../lib/codemods");
 const handle_package_1 = require("../lib/handle-package");
-async function runUpgrade() {
+const transform_1 = require("./transform");
+/**
+ * @param query
+ * @example loadHighestNPMVersionMatching("react@^18.3.0 || ^19.0.0") === Promise<"19.0.0">
+ */
+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) {
+        throw new Error(`Found no React versions matching "${query}". This is a bug in the upgrade tool.`);
+    }
+    return versions[versions.length - 1];
+}
+async function runUpgrade(revision, options) {
+    const { verbose } = options;
     const appPackageJsonPath = path_1.default.resolve(process.cwd(), 'package.json');
     let appPackageJson = JSON.parse(fs_1.default.readFileSync(appPackageJsonPath, 'utf8'));
     await detectWorkspace(appPackageJson);
     let targetNextPackageJson;
-    let targetVersionSpecifier = '';
-    const shortcutVersion = process.argv[2]?.replace('@', '');
-    if (shortcutVersion) {
-        const res = await fetch(`https://registry.npmjs.org/next/${shortcutVersion}`);
-        if (res.status === 200) {
-            targetNextPackageJson = await res.json();
-            targetVersionSpecifier = targetNextPackageJson.version;
-        }
-        else {
-            console.error(`${chalk_1.default.yellow('Next.js ' + shortcutVersion)} does not exist. Check available versions at ${chalk_1.default.underline('https://www.npmjs.com/package/next?activeTab=versions')}, or choose one from below\n`);
-        }
+    const res = await fetch(`https://registry.npmjs.org/next/${revision}`);
+    if (res.status === 200) {
+        targetNextPackageJson = await res.json();
     }
-    const installedNextVersion = await getInstalledNextVersion();
-    if (!targetNextPackageJson) {
-        let nextPackageJson = {};
-        try {
-            const resCanary = await fetch(`https://registry.npmjs.org/next/canary`);
-            nextPackageJson['canary'] = await resCanary.json();
-            const resRc = await fetch(`https://registry.npmjs.org/next/rc`);
-            nextPackageJson['rc'] = await resRc.json();
-            const resLatest = await fetch(`https://registry.npmjs.org/next/latest`);
-            nextPackageJson['latest'] = await resLatest.json();
-        }
-        catch (error) {
-            console.error('Failed to fetch versions from npm registry.');
-            return;
-        }
-        let showRc = true;
-        if (nextPackageJson['latest'].version && nextPackageJson['rc'].version) {
-            showRc =
-                (0, compare_versions_1.compareVersions)(nextPackageJson['rc'].version, nextPackageJson['latest'].version) === 1;
-        }
-        const choices = [
-            {
-                title: 'Canary',
-                value: 'canary',
-                description: `Experimental version with latest features (${nextPackageJson['canary'].version})`,
-            },
-        ];
-        if (showRc) {
-            choices.push({
-                title: 'Release Candidate',
-                value: 'rc',
-                description: `Pre-release version for final testing (${nextPackageJson['rc'].version})`,
-            });
-        }
-        choices.push({
-            title: 'Stable',
-            value: 'latest',
-            description: `Production-ready release (${nextPackageJson['latest'].version})`,
-        });
-        if (installedNextVersion) {
-            console.log(`You are currently using ${chalk_1.default.blue('Next.js ' + installedNextVersion)}`);
-        }
-        const initialVersionSpecifierIdx = await getVersionSpecifierIdx(installedNextVersion, showRc);
-        const response = await (0, prompts_1.default)({
-            type: 'select',
-            name: 'version',
-            message: 'What Next.js version do you want to upgrade to?',
-            choices: choices,
-            initial: initialVersionSpecifierIdx,
-        }, { onCancel: () => process.exit(0) });
-        targetNextPackageJson = nextPackageJson[response.version];
-        targetVersionSpecifier = response.version;
+    else {
+        throw new Error(`${chalk_1.default.yellow(`next@${revision}`)} does not exist. Check available versions at ${chalk_1.default.underline('https://www.npmjs.com/package/next?activeTab=versions')}.`);
     }
+    const installedNextVersion = await getInstalledNextVersion();
     const targetNextVersion = targetNextPackageJson.version;
-    if (targetNextVersion &&
-        (0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
+    // 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']}`),
+    ]);
+    if ((0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
         await suggestTurbopack(appPackageJson);
     }
+    const codemods = await suggestCodemods(installedNextVersion, targetNextVersion);
     fs_1.default.writeFileSync(appPackageJsonPath, JSON.stringify(appPackageJson, null, 2));
     const packageManager = (0, handle_package_1.getPkgManager)(process.cwd());
     const nextDependency = `next@${targetNextVersion}`;
     const reactDependencies = [
-        `react@${targetNextPackageJson.peerDependencies['react']}`,
-        `@types/react@${targetNextPackageJson.devDependencies['@types/react']}`,
-        `react-dom@${targetNextPackageJson.peerDependencies['react-dom']}`,
-        `@types/react-dom@${targetNextPackageJson.devDependencies['@types/react-dom']}`,
+        `react@${targetReactVersion}`,
+        `react-dom@${targetReactVersion}`,
     ];
-    (0, handle_package_1.installPackage)([nextDependency, ...reactDependencies], packageManager);
-    console.log(`Upgrading your project to ${chalk_1.default.blue('Next.js ' + targetVersionSpecifier)}...\n`);
-    await suggestCodemods(installedNextVersion, targetNextVersion);
+    if (targetReactVersion.startsWith('19.0.0-canary') ||
+        targetReactVersion.startsWith('19.0.0-beta') ||
+        targetReactVersion.startsWith('19.0.0-rc')) {
+        reactDependencies.push(`@types/react@npm:types-react@rc`);
+        reactDependencies.push(`@types/react-dom@npm:types-react-dom@rc`);
+    }
+    else {
+        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`);
+    (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 });
+    }
     console.log(`\n${chalk_1.default.green('✔')} Your Next.js project has been upgraded successfully. ${chalk_1.default.bold('Time to ship! 🚢')}`);
 }
 async function detectWorkspace(appPackageJson) {
@@ -124,22 +104,6 @@ async function getInstalledNextVersion() {
     const installedNextPackageJson = JSON.parse(fs_1.default.readFileSync(installedNextPackageJsonDir, 'utf8'));
     return installedNextPackageJson.version;
 }
-/*
- * Returns the index of the current version's specifier in the
- * array ['canary', 'rc', 'latest'] or ['canary', 'latest']
- */
-async function getVersionSpecifierIdx(installedNextVersion, showRc) {
-    if (installedNextVersion == null) {
-        return 0;
-    }
-    if (installedNextVersion.includes('canary')) {
-        return 0;
-    }
-    if (installedNextVersion.includes('rc')) {
-        return 1;
-    }
-    return showRc ? 2 : 1;
-}
 /*
  * Heuristics are used to determine whether to Turbopack is enabled or not and
  * to determine how to update the dev script.
@@ -184,7 +148,7 @@ async function suggestTurbopack(packageJson) {
 async function suggestCodemods(initialNextVersion, targetNextVersion) {
     const initialVersionIndex = codemods_1.availableCodemods.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, initialNextVersion) > 0);
     if (initialVersionIndex === -1) {
-        return;
+        return [];
     }
     let targetVersionIndex = codemods_1.availableCodemods.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, targetNextVersion) > 0);
     if (targetVersionIndex === -1) {
@@ -194,31 +158,24 @@ async function suggestCodemods(initialNextVersion, targetNextVersion) {
         .slice(initialVersionIndex, targetVersionIndex)
         .flatMap((versionCodemods) => versionCodemods.codemods);
     if (relevantCodemods.length === 0) {
-        return;
+        return [];
     }
-    let codemodsString = `\nThe following ${chalk_1.default.blue('codemods')} are available for your upgrade:`;
-    relevantCodemods.forEach((codemod) => {
-        codemodsString += `\n- ${codemod.title} ${chalk_1.default.gray(`(${codemod.value})`)}`;
-    });
-    codemodsString += '\n';
-    console.log(codemodsString);
-    const responseCodemods = await (0, prompts_1.default)({
-        type: 'confirm',
-        name: 'apply',
-        message: `Do you want to apply these codemods?`,
-        initial: true,
+    const { codemods } = await (0, prompts_1.default)({
+        type: 'multiselect',
+        name: 'codemods',
+        message: `\nThe following ${chalk_1.default.blue('codemods')} are recommended for your upgrade. Would you like to apply them?`,
+        choices: relevantCodemods.map((codemod) => {
+            return {
+                title: `${codemod.title} ${chalk_1.default.grey(`(${codemod.value})`)}`,
+                value: codemod.value,
+                selected: true,
+            };
+        }),
     }, {
         onCancel: () => {
             process.exit(0);
         },
     });
-    if (!responseCodemods.apply) {
-        return;
-    }
-    for (const codemod of relevantCodemods) {
-        (0, child_process_1.execSync)(`npx @next/codemod@latest ${codemod.value} ${process.cwd()} --force`, {
-            stdio: 'inherit',
-        });
-    }
+    return codemods;
 }
 //# sourceMappingURL=upgrade.js.map

package/lib/codemods.js

@@ -87,17 +87,22 @@ exports.availableCodemods = [
         ],
     },
     {
-        version: '15.0',
+        version: '15.0.0-canary.153',
         codemods: [
-            {
-                title: 'Transforms usage of Next.js async Request APIs',
-                value: 'next-async-request-api',
-            },
             {
                 title: 'Migrate `geo` and `ip` properties on `NextRequest`',
                 value: 'next-request-geo-ip',
             },
         ],
     },
+    {
+        version: '15.0.0-canary.171',
+        codemods: [
+            {
+                title: 'Transforms usage of Next.js async Request APIs',
+                value: 'next-async-request-api',
+            },
+        ],
+    },
 ];
 //# sourceMappingURL=codemods.js.map

package/lib/handle-package.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPkgManager = getPkgManager;
 exports.uninstallPackage = uninstallPackage;
-exports.installPackage = installPackage;
+exports.installPackages = installPackages;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const execa_1 = __importDefault(require("execa"));
@@ -59,15 +59,15 @@ function uninstallPackage(packageToUninstall, pkgManager) {
     }
     execa_1.default.sync(pkgManager, [command, packageToUninstall], { stdio: 'inherit' });
 }
-function installPackage(packageToInstall, pkgManager) {
-    pkgManager ??= getPkgManager(process.cwd());
-    if (!pkgManager)
+function installPackages(packageToInstall, options = {}) {
+    const { packageManager = getPkgManager(process.cwd()), silent = false } = options;
+    if (!packageManager)
         throw new Error('Failed to find package manager');
-    if (Array.isArray(packageToInstall)) {
-        packageToInstall = packageToInstall.join(' ');
-    }
     try {
-        execa_1.default.sync(pkgManager, ['add', packageToInstall], { stdio: 'inherit' });
+        execa_1.default.sync(packageManager, ['add', ...packageToInstall], {
+            // Keeping stderr since it'll likely be relevant later when it fails.
+            stdio: silent ? ['ignore', 'ignore', 'inherit'] : 'inherit',
+        });
     }
     catch (error) {
         throw new Error(`Failed to install "${packageToInstall}". Please install it manually.`, { cause: error });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.0.0-canary.173",
+  "version": "15.0.0-canary.175",
   "license": "MIT",
   "repository": {
     "type": "git",

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

@@ -17,7 +17,7 @@ function findDynamicImportsAndComment(root, j) {
         arguments: [{ value: 'next/headers' }],
     });
     importPaths.forEach((path) => {
-        (0, utils_1.insertCommentOnce)(path, j, DYNAMIC_IMPORT_WARN_COMMENT);
+        (0, utils_1.insertCommentOnce)(path.node, j, DYNAMIC_IMPORT_WARN_COMMENT);
         modified = true;
     });
     return modified;
@@ -145,7 +145,7 @@ function transformDynamicAPI(source, api, filePath) {
             }
         });
     }
-    const isClientComponent = (0, utils_1.determineClientDirective)(root, j, source);
+    const isClientComponent = (0, utils_1.determineClientDirective)(root, j);
     // Only transform the valid calls in server or shared components
     if (isClientComponent)
         return null;
@@ -219,10 +219,7 @@ function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, in
     }
     else {
         // Otherwise for JS file, leave a message to the user to manually handle the transformation
-        path.node.comments = [
-            j.commentBlock(customMessage),
-            ...(path.node.comments || []),
-        ];
+        (0, utils_1.insertCommentOnce)(path.node, j, customMessage);
     }
 }
 function findImportMappingFromNextHeaders(root, j) {

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

@@ -89,7 +89,87 @@ function applyUseAndRenameAccessedProp(propIdName, path, j) {
     }
     return modified;
 }
-function transformDynamicProps(source, api, _filePath) {
+const MATCHED_FILE_PATTERNS = /([\\/]|^)(page|layout)\.(t|j)sx?$/;
+function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
+    if (paramTypeAnnotation && paramTypeAnnotation.typeAnnotation) {
+        const typeAnnotation = paramTypeAnnotation.typeAnnotation;
+        if (typeAnnotation.type === 'TSTypeLiteral') {
+            const typeLiteral = typeAnnotation;
+            // Find the type property for `params`
+            typeLiteral.members.forEach((member) => {
+                if (member.type === 'TSPropertySignature' &&
+                    member.key.type === 'Identifier' &&
+                    utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
+                    // if it's already a Promise, don't wrap it again, return
+                    if (member.typeAnnotation &&
+                        member.typeAnnotation.typeAnnotation &&
+                        member.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                        member.typeAnnotation.typeAnnotation.typeName.type ===
+                            'Identifier' &&
+                        member.typeAnnotation.typeAnnotation.typeName.name === 'Promise') {
+                        return;
+                    }
+                    // Wrap the `params` type in Promise<>
+                    if (member.typeAnnotation &&
+                        member.typeAnnotation.typeAnnotation &&
+                        j.TSType.check(member.typeAnnotation.typeAnnotation)) {
+                        member.typeAnnotation.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
+                            // @ts-ignore
+                            member.typeAnnotation.typeAnnotation,
+                        ]));
+                    }
+                }
+            });
+        }
+        else if (typeAnnotation.type === 'TSTypeReference') {
+            // If typeAnnotation is a type or interface, change the properties to Promise<type of property>
+            // e.g. interface PageProps { params: { slug: string } } => interface PageProps { params: Promise<{ slug: string }> }
+            const typeReference = typeAnnotation;
+            if (typeReference.typeName.type === 'Identifier') {
+                // Find the actual type of the type reference
+                const foundTypes = findAllTypes(root, j, typeReference.typeName.name);
+                // Deal with interfaces
+                if (foundTypes.interfaces.length > 0) {
+                    const interfaceDeclaration = foundTypes.interfaces[0];
+                    if (interfaceDeclaration.type === 'TSInterfaceDeclaration' &&
+                        interfaceDeclaration.body?.type === 'TSInterfaceBody') {
+                        const typeBody = interfaceDeclaration.body.body;
+                        // if it's already a Promise, don't wrap it again, return
+                        // traverse the typeReference's properties, if any is in propNames, wrap it in Promise<> if needed
+                        typeBody.forEach((member) => {
+                            if (member.type === 'TSPropertySignature' &&
+                                member.key.type === 'Identifier' &&
+                                utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
+                                // if it's already a Promise, don't wrap it again, return
+                                if (member.typeAnnotation &&
+                                    member.typeAnnotation.typeAnnotation &&
+                                    member.typeAnnotation?.typeAnnotation?.typeName?.name ===
+                                        'Promise') {
+                                    return;
+                                }
+                                // Wrap the prop type in Promise<>
+                                if (member.typeAnnotation &&
+                                    member.typeAnnotation.typeAnnotation &&
+                                    // check if member name is in propNames
+                                    utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
+                                    member.typeAnnotation.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
+                                        member.typeAnnotation.typeAnnotation,
+                                    ]));
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        }
+        propsIdentifier.typeAnnotation = paramTypeAnnotation;
+    }
+}
+function transformDynamicProps(source, api, filePath) {
+    const isMatched = MATCHED_FILE_PATTERNS.test(filePath);
+    if (!isMatched) {
+        return null;
+    }
     let modified = false;
     let modifiedPropArgument = false;
     const j = api.jscodeshift.withParser('tsx');
@@ -100,29 +180,39 @@ function transformDynamicProps(source, api, _filePath) {
     // e.g. destruct `params` { slug } = params
     // e.g. destruct `searchParams `{ search } = searchParams
     let insertedDestructPropNames = new Set();
-    // Rename props to `prop` argument for the function
-    let insertedRenamedPropFunctionNames = new Set();
     function processAsyncPropOfEntryFile(isClientComponent) {
         // find `params` and `searchParams` in file, and transform the access to them
         function renameAsyncPropIfExisted(path, isDefaultExport) {
             const decl = path.value;
             const params = decl.params;
-            const functionName = decl.id?.name || 'default';
+            let functionName = decl.id?.name;
+            // If it's const <id> = function () {}, locate the <id> to get function name
+            if (!decl.id) {
+                functionName = (0, utils_1.getVariableDeclaratorId)(path, j)?.name;
+            }
             // target properties mapping, only contains `params` and `searchParams`
             const propertiesMap = new Map();
             let allProperties = [];
+            const isRoute = !isDefaultExport && utils_1.TARGET_ROUTE_EXPORTS.has(functionName);
             // generateMetadata API has 2 params
             if (functionName === 'generateMetadata') {
                 if (params.length > 2 || params.length === 0)
                     return;
             }
+            else if (isRoute) {
+                if (params.length !== 2)
+                    return;
+            }
             else {
-                // Page/Layout/Route handlers have 1 param
+                // Page/Layout default export have 1 param
                 if (params.length !== 1)
                     return;
             }
             const propsIdentifier = (0, utils_1.generateUniqueIdentifier)(PAGE_PROPS, path, j);
-            const currentParam = params[0];
+            const propsArgumentIndex = isRoute ? 1 : 0;
+            const currentParam = params[propsArgumentIndex];
+            if (!currentParam)
+                return;
             // Argument destructuring case
             if (currentParam.type === 'ObjectPattern') {
                 // Validate if the properties are not `params` and `searchParams`,
@@ -150,85 +240,9 @@ function transformDynamicProps(source, api, _filePath) {
                         propertiesMap.set(prop.key.name, value);
                     }
                 });
-                const paramTypeAnnotation = currentParam.typeAnnotation;
-                if (paramTypeAnnotation && paramTypeAnnotation.typeAnnotation) {
-                    const typeAnnotation = paramTypeAnnotation.typeAnnotation;
-                    if (typeAnnotation.type === 'TSTypeLiteral') {
-                        const typeLiteral = typeAnnotation;
-                        // Find the type property for `params`
-                        typeLiteral.members.forEach((member) => {
-                            if (member.type === 'TSPropertySignature' &&
-                                member.key.type === 'Identifier' &&
-                                propertiesMap.has(member.key.name)) {
-                                // if it's already a Promise, don't wrap it again, return
-                                if (member.typeAnnotation &&
-                                    member.typeAnnotation.typeAnnotation &&
-                                    member.typeAnnotation.typeAnnotation.type ===
-                                        'TSTypeReference' &&
-                                    member.typeAnnotation.typeAnnotation.typeName.type ===
-                                        'Identifier' &&
-                                    member.typeAnnotation.typeAnnotation.typeName.name ===
-                                        'Promise') {
-                                    return;
-                                }
-                                // Wrap the `params` type in Promise<>
-                                if (member.typeAnnotation &&
-                                    member.typeAnnotation.typeAnnotation &&
-                                    j.TSType.check(member.typeAnnotation.typeAnnotation)) {
-                                    member.typeAnnotation.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
-                                        // @ts-ignore
-                                        member.typeAnnotation.typeAnnotation,
-                                    ]));
-                                }
-                            }
-                        });
-                    }
-                    else if (typeAnnotation.type === 'TSTypeReference') {
-                        // If typeAnnotation is a type or interface, change the properties to Promise<type of property>
-                        // e.g. interface PageProps { params: { slug: string } } => interface PageProps { params: Promise<{ slug: string }> }
-                        const typeReference = typeAnnotation;
-                        if (typeReference.typeName.type === 'Identifier') {
-                            // Find the actual type of the type reference
-                            const foundTypes = findAllTypes(root, j, typeReference.typeName.name);
-                            // Deal with interfaces
-                            if (foundTypes.interfaces.length > 0) {
-                                const interfaceDeclaration = foundTypes.interfaces[0];
-                                if (interfaceDeclaration.type === 'TSInterfaceDeclaration' &&
-                                    interfaceDeclaration.body?.type === 'TSInterfaceBody') {
-                                    const typeBody = interfaceDeclaration.body.body;
-                                    // if it's already a Promise, don't wrap it again, return
-                                    // traverse the typeReference's properties, if any is in propNames, wrap it in Promise<> if needed
-                                    typeBody.forEach((member) => {
-                                        if (member.type === 'TSPropertySignature' &&
-                                            member.key.type === 'Identifier' &&
-                                            utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
-                                            // if it's already a Promise, don't wrap it again, return
-                                            if (member.typeAnnotation &&
-                                                member.typeAnnotation.typeAnnotation &&
-                                                member.typeAnnotation?.typeAnnotation?.typeName
-                                                    ?.name === 'Promise') {
-                                                return;
-                                            }
-                                            // Wrap the prop type in Promise<>
-                                            if (member.typeAnnotation &&
-                                                member.typeAnnotation.typeAnnotation &&
-                                                // check if member name is in propNames
-                                                utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
-                                                member.typeAnnotation.typeAnnotation =
-                                                    j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
-                                                        member.typeAnnotation.typeAnnotation,
-                                                    ]));
-                                            }
-                                        }
-                                    });
-                                }
-                            }
-                        }
-                    }
-                    propsIdentifier.typeAnnotation = paramTypeAnnotation;
-                }
+                modifyTypes(currentParam.typeAnnotation, propsIdentifier, root, j);
                 // Override the first param to `props`
-                params[0] = propsIdentifier;
+                params[propsArgumentIndex] = propsIdentifier;
                 modified = true;
                 modifiedPropArgument = true;
             }
@@ -264,14 +278,13 @@ function transformDynamicProps(source, api, _filePath) {
                     // find the argument `currentParam`
                     const args = callExpression.value.arguments;
                     const propPassedAsArg = args.find((arg) => j.Identifier.check(arg) && arg.name === argName);
-                    // insert a comment to the argument
-                    const comment = j.commentBlock(` '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `, true, false);
-                    propPassedAsArg.comments = [
-                        comment,
-                        ...(propPassedAsArg.comments || []),
-                    ];
+                    const comment = ` '${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;
                 });
+                if (modified) {
+                    modifyTypes(currentParam.typeAnnotation, propsIdentifier, root, j);
+                }
             }
             if (modifiedPropArgument) {
                 resolveAsyncProp(path, propertiesMap, propsIdentifier.name, allProperties, isDefaultExport);
@@ -279,6 +292,8 @@ function transformDynamicProps(source, api, _filePath) {
         }
         // Helper function to insert `const params = await asyncParams;` at the beginning of the function body
         function resolveAsyncProp(path, propertiesMap, propsIdentifierName, allProperties, isDefaultExport) {
+            // Rename props to `prop` argument for the function
+            const insertedRenamedPropFunctionNames = new Set();
             const node = path.value;
             // If it's sync default export, and it's also server component, make the function async
             if (isDefaultExport && !isClientComponent) {
@@ -289,6 +304,27 @@ function transformDynamicProps(source, api, _filePath) {
                     }
                 }
             }
+            // If it's arrow function and function body is not block statement, check if the properties are used there
+            if (j.ArrowFunctionExpression.check(path.node) &&
+                !j.BlockStatement.check(path.node.body)) {
+                const objectExpression = path.node.body;
+                let hasUsedProps = false;
+                j(objectExpression)
+                    .find(j.Identifier)
+                    .forEach((identifierPath) => {
+                    const idName = identifierPath.value.name;
+                    if (propertiesMap.has(idName)) {
+                        hasUsedProps = true;
+                        return;
+                    }
+                });
+                // Turn the function body to block statement, return the object expression
+                if (hasUsedProps) {
+                    path.node.body = j.blockStatement([
+                        j.returnStatement(objectExpression),
+                    ]);
+                }
+            }
             const isAsyncFunc = !!node.async;
             const functionName = path.value.id?.name || 'default';
             const functionBody = findFunctionBody(path);
@@ -448,7 +484,7 @@ function transformDynamicProps(source, api, _filePath) {
             }
         });
     }
-    const isClientComponent = (0, utils_1.determineClientDirective)(root, j, source);
+    const isClientComponent = (0, utils_1.determineClientDirective)(root, j);
     // Apply to `params` and `searchParams`
     processAsyncPropOfEntryFile(isClientComponent);
     // Add import { use } from 'react' if needed and not already imported

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 = void 0;
+exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = void 0;
 exports.isFunctionType = isFunctionType;
 exports.isMatchedFunctionExported = isMatchedFunctionExported;
 exports.determineClientDirective = determineClientDirective;
@@ -13,17 +13,20 @@ exports.findClosetParentFunctionScope = findClosetParentFunctionScope;
 exports.getFunctionPathFromExportPath = getFunctionPathFromExportPath;
 exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
 exports.insertCommentOnce = insertCommentOnce;
-exports.TARGET_NAMED_EXPORTS = new Set([
-    // For custom route
+exports.getVariableDeclaratorId = getVariableDeclaratorId;
+exports.TARGET_ROUTE_EXPORTS = new Set([
     'GET',
-    'HEAD',
     'POST',
     'PUT',
-    'DELETE',
     'PATCH',
+    'DELETE',
     'OPTIONS',
+    'HEAD',
+]);
+exports.TARGET_NAMED_EXPORTS = new Set([
     // For page and layout
     'generateMetadata',
+    ...exports.TARGET_ROUTE_EXPORTS,
 ]);
 exports.TARGET_PROP_NAMES = new Set(['params', 'searchParams']);
 function isFunctionType(type) {
@@ -87,31 +90,15 @@ function isMatchedFunctionExported(path, j) {
         return true;
     return isNamedExport;
 }
-function determineClientDirective(root, j, source) {
-    const hasStringDirective = root
-        .find(j.Literal)
-        .filter((path) => {
-        const expr = path.node;
-        return (expr.value === 'use client' && path.parentPath.node.type === 'Program');
-    })
-        .size() > 0;
-    // 'use client';
-    const hasStringDirectiveWithSemicolon = root
-        .find(j.StringLiteral)
-        .filter((path) => {
-        const expr = path.node;
-        return (expr.type === 'StringLiteral' &&
-            expr.value === 'use client' &&
-            path.parentPath.node.type === 'Program');
-    })
-        .size() > 0;
-    if (hasStringDirective || hasStringDirectiveWithSemicolon)
-        return true;
-    // Since the client detection is not reliable with AST in jscodeshift,
-    // determine if 'use client' or "use client" is leading in the source code.
-    const trimmedSource = source.trim();
-    const containsClientDirective = /^'use client'/.test(trimmedSource) || /^"use client"/g.test(trimmedSource);
-    return containsClientDirective;
+// directive is not parsed into AST, so we need to manually find it
+// by going through the tokens. Use the 1st string token as the directive
+function determineClientDirective(root, j) {
+    const { program } = root.get().node;
+    const directive = program.directives[0];
+    if (j.Directive.check(directive)) {
+        return directive.value.value === 'use client';
+    }
+    return false;
 }
 function isPromiseType(typeAnnotation) {
     return (typeAnnotation.type === 'TSTypeReference' &&
@@ -338,13 +325,23 @@ function getFunctionPathFromExportPath(exportPath, j, root, namedExportFilter) {
 function wrapParentheseIfNeeded(hasChainAccess, j, expression) {
     return hasChainAccess ? j.parenthesizedExpression(expression) : expression;
 }
-function insertCommentOnce(path, j, comment) {
-    if (path.node.comments) {
-        const hasComment = path.node.comments.some((commentNode) => commentNode.value === comment);
+function insertCommentOnce(node, j, comment) {
+    if (node.comments) {
+        const hasComment = node.comments.some((commentNode) => commentNode.value === comment);
         if (hasComment) {
             return;
         }
     }
-    path.node.comments = [j.commentBlock(comment), ...(path.node.comments || [])];
+    node.comments = [j.commentBlock(comment), ...(node.comments || [])];
+}
+function getVariableDeclaratorId(path, j) {
+    const parent = path.parentPath;
+    if (j.VariableDeclarator.check(parent.node)) {
+        const id = parent.node.id;
+        if (j.Identifier.check(id)) {
+            return id;
+        }
+    }
+    return undefined;
 }
 //# sourceMappingURL=utils.js.map