@next/codemod 15.0.0-canary.172 → 15.0.0-canary.174

package/bin/next-codemod.js

@@ -30,7 +30,8 @@ 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"). Prompts to choose a dist tag if omitted.')
+    .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,21 +12,34 @@ 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 (revision !== undefined) {
+        const res = await fetch(`https://registry.npmjs.org/next/${revision}`);
         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`);
+            console.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')}, or choose one from below\n`);
         }
     }
     const installedNextVersion = await getInstalledNextVersion();
@@ -83,21 +96,41 @@ async function runUpgrade() {
         targetVersionSpecifier = response.version;
     }
     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);
     }
     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);
+    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 ' + targetVersionSpecifier)}...\n`);
+    (0, handle_package_1.installPackages)([nextDependency, ...reactDependencies], {
+        packageManager,
+        silent: !verbose,
+    });
     await suggestCodemods(installedNextVersion, targetNextVersion);
     console.log(`\n${chalk_1.default.green('✔')} Your Next.js project has been upgraded successfully. ${chalk_1.default.bold('Time to ship! 🚢')}`);
 }
@@ -196,29 +229,24 @@ async function suggestCodemods(initialNextVersion, targetNextVersion) {
     if (relevantCodemods.length === 0) {
         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',
-        });
+    for (const codemod of codemods) {
+        await (0, transform_1.runTransform)(codemod, process.cwd(), { force: true });
     }
 }
 //# 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.172",
+  "version": "15.0.0-canary.174",
   "license": "MIT",
   "repository": {
     "type": "git",

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

@@ -2,8 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicAPI = transformDynamicAPI;
 const utils_1 = require("./utils");
-function wrapParathnessIfNeeded(hasChainAccess, j, expression) {
-    return hasChainAccess ? j.parenthesizedExpression(expression) : expression;
+const DYNAMIC_IMPORT_WARN_COMMENT = ` The APIs under 'next/headers' are async now, need to be manually awaited. `;
+function findDynamicImportsAndComment(root, j) {
+    let modified = false;
+    // find all the dynamic imports of `next/headers`,
+    // and add a comment to the import expression to inform this needs to be manually handled
+    // find all the dynamic imports of `next/cookies`,
+    // Notice, import() is not handled as ImportExpression in current jscodeshift version,
+    // we need to use CallExpression to capture the dynamic imports.
+    const importPaths = root.find(j.CallExpression, {
+        callee: {
+            type: 'Import',
+        },
+        arguments: [{ value: 'next/headers' }],
+    });
+    importPaths.forEach((path) => {
+        (0, utils_1.insertCommentOnce)(path, j, DYNAMIC_IMPORT_WARN_COMMENT);
+        modified = true;
+    });
+    return modified;
 }
 function transformDynamicAPI(source, api, filePath) {
     const j = api.jscodeshift.withParser('tsx');
@@ -32,22 +49,26 @@ function transformDynamicAPI(source, api, filePath) {
             if (!isImportedTopLevel) {
                 return;
             }
-            const closetScope = j(path).closestScope();
-            // First search the closed function of the current path
-            let closestFunction;
-            closestFunction = j(path).closest(j.FunctionDeclaration);
-            if (closestFunction.size() === 0) {
-                closestFunction = j(path).closest(j.FunctionExpression);
-            }
-            if (closestFunction.size() === 0) {
-                closestFunction = j(path).closest(j.ArrowFunctionExpression);
+            let parentFunctionPath = (0, utils_1.findClosetParentFunctionScope)(path, j);
+            // We found the parent scope is not a function
+            let parentFunctionNode;
+            if (parentFunctionPath) {
+                if ((0, utils_1.isFunctionScope)(parentFunctionPath, j)) {
+                    parentFunctionNode = parentFunctionPath.node;
+                }
+                else {
+                    const scopeNode = parentFunctionPath.node;
+                    if (scopeNode.type === 'ReturnStatement' &&
+                        (0, utils_1.isFunctionType)(scopeNode.argument.type)) {
+                        parentFunctionNode = scopeNode.argument;
+                    }
+                }
             }
-            const isAsyncFunction = closestFunction
-                .nodes()
-                .some((node) => node.async);
+            const isAsyncFunction = parentFunctionNode?.async || false;
             const isCallAwaited = path.parentPath?.node?.type === 'AwaitExpression';
             const hasChainAccess = path.parentPath.value.type === 'MemberExpression' &&
                 path.parentPath.value.object === path.node;
+            const closetScope = j(path).closestScope();
             // For cookies/headers API, only transform server and shared components
             if (isAsyncFunction) {
                 if (!isCallAwaited) {
@@ -55,7 +76,7 @@ function transformDynamicAPI(source, api, filePath) {
                     const expr = j.awaitExpression(
                     // add parentheses to wrap the function call
                     j.callExpression(j.identifier(asyncRequestApiName), []));
-                    j(path).replaceWith(wrapParathnessIfNeeded(hasChainAccess, j, expr));
+                    j(path).replaceWith((0, utils_1.wrapParentheseIfNeeded)(hasChainAccess, j, expr));
                     modified = true;
                 }
             }
@@ -94,7 +115,7 @@ function transformDynamicAPI(source, api, filePath) {
                         }
                         if (canConvertToAsync) {
                             const expr = j.awaitExpression(j.callExpression(j.identifier(asyncRequestApiName), []));
-                            j(path).replaceWith(wrapParathnessIfNeeded(hasChainAccess, j, expr));
+                            j(path).replaceWith((0, utils_1.wrapParentheseIfNeeded)(hasChainAccess, j, expr));
                             (0, utils_1.turnFunctionReturnTypeToAsync)(closetScopePath.node, j);
                             modified = true;
                         }
@@ -102,10 +123,8 @@ function transformDynamicAPI(source, api, filePath) {
                 }
                 else {
                     // if parent is function and it's a hook, which starts with 'use', wrap the api call with 'use()'
-                    const parentFunction = j(path).closest(j.FunctionDeclaration) ||
-                        j(path).closest(j.FunctionExpression) ||
-                        j(path).closest(j.ArrowFunctionExpression);
-                    if (parentFunction.size() > 0) {
+                    const parentFunction = (0, utils_1.findClosetParentFunctionScope)(path, j);
+                    if (parentFunction) {
                         const parentFunctionName = parentFunction.get().node.id?.name;
                         const isParentFunctionHook = parentFunctionName?.startsWith('use');
                         if (isParentFunctionHook) {
@@ -115,11 +134,11 @@ function transformDynamicAPI(source, api, filePath) {
                             needsReactUseImport = true;
                         }
                         else {
-                            castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes);
+                            castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` TODO: please manually await this call, if it's a server component, you can turn it to async function `);
                         }
                     }
                     else {
-                        castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes);
+                        castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ' TODO: please manually await this call, codemod cannot transform due to undetermined async scope ');
                     }
                     modified = true;
                 }
@@ -127,17 +146,21 @@ function transformDynamicAPI(source, api, filePath) {
         });
     }
     const isClientComponent = (0, utils_1.determineClientDirective)(root, j, source);
-    const importedNextAsyncRequestApisMapping = findImportMappingFromNextHeaders(root, j);
     // Only transform the valid calls in server or shared components
-    if (!isClientComponent) {
-        for (const originName in importedNextAsyncRequestApisMapping) {
-            const aliasName = importedNextAsyncRequestApisMapping[originName];
-            processAsyncApiCalls(aliasName, originName);
-        }
-        // Add import { use } from 'react' if needed and not already imported
-        if (needsReactUseImport) {
-            (0, utils_1.insertReactUseImport)(root, j);
-        }
+    if (isClientComponent)
+        return null;
+    // Import declaration case, e.g. import { cookies } from 'next/headers'
+    const importedNextAsyncRequestApisMapping = findImportMappingFromNextHeaders(root, j);
+    for (const originName in importedNextAsyncRequestApisMapping) {
+        const aliasName = importedNextAsyncRequestApisMapping[originName];
+        processAsyncApiCalls(aliasName, originName);
+    }
+    // Add import { use } from 'react' if needed and not already imported
+    if (needsReactUseImport) {
+        (0, utils_1.insertReactUseImport)(root, j);
+    }
+    if (findDynamicImportsAndComment(root, j)) {
+        modified = true;
     }
     return modified ? root.toSource() : null;
 }
@@ -147,9 +170,12 @@ const API_CAST_TYPE_MAP = {
     headers: 'UnsafeUnwrappedHeaders',
     draftMode: 'UnsafeUnwrappedDraftMode',
 };
-function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes) {
+function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, customMessage) {
     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;
         /* Do type cast for headers, cookies, draftMode
           import {
             type UnsafeUnwrappedHeaders,
@@ -194,7 +220,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(' TODO: please manually await this call, codemod cannot transform due to undetermined async scope '),
+            j.commentBlock(customMessage),
             ...(path.node.comments || []),
         ];
     }

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

@@ -3,16 +3,95 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicProps = transformDynamicProps;
 const utils_1 = require("./utils");
 const PAGE_PROPS = 'props';
-function isAsyncFunctionDeclaration(path) {
-    const decl = path.value.declaration;
-    const isAsyncFunction = (decl.type === 'FunctionDeclaration' ||
-        decl.type === 'FunctionExpression' ||
-        decl.type === 'ArrowFunctionExpression') &&
-        decl.async;
-    return isAsyncFunction;
+function findFunctionBody(path) {
+    let functionBody = path.node.body;
+    if (functionBody && functionBody.type === 'BlockStatement') {
+        return functionBody.body;
+    }
+    return null;
+}
+function awaitMemberAccessOfProp(propIdName, path, j) {
+    // search the member access of the prop
+    const functionBody = findFunctionBody(path);
+    const memberAccess = j(functionBody).find(j.MemberExpression, {
+        object: {
+            type: 'Identifier',
+            name: propIdName,
+        },
+    });
+    let hasAwaited = false;
+    // await each member access
+    memberAccess.forEach((memberAccessPath) => {
+        const member = memberAccessPath.value;
+        // check if it's already awaited
+        if (memberAccessPath.parentPath?.value.type === 'AwaitExpression') {
+            return;
+        }
+        const awaitedExpr = j.awaitExpression(member);
+        const awaitMemberAccess = (0, utils_1.wrapParentheseIfNeeded)(true, j, awaitedExpr);
+        memberAccessPath.replace(awaitMemberAccess);
+        hasAwaited = true;
+    });
+    // If there's any awaited member access, we need to make the function async
+    if (hasAwaited) {
+        if (!path.value.async) {
+            if ('async' in path.value) {
+                path.value.async = true;
+                (0, utils_1.turnFunctionReturnTypeToAsync)(path.value, j);
+            }
+        }
+    }
+    return hasAwaited;
+}
+function applyUseAndRenameAccessedProp(propIdName, path, j) {
+    // search the member access of the prop, and rename the member access to the member value
+    // e.g.
+    // props.params => params
+    // props.params.foo => params.foo
+    // props.searchParams.search => searchParams.search
+    let modified = false;
+    const functionBody = findFunctionBody(path);
+    const memberAccess = j(functionBody).find(j.MemberExpression, {
+        object: {
+            type: 'Identifier',
+            name: propIdName,
+        },
+    });
+    const accessedNames = [];
+    // rename each member access
+    memberAccess.forEach((memberAccessPath) => {
+        const member = memberAccessPath.value;
+        const memberProperty = member.property;
+        if (j.Identifier.check(memberProperty)) {
+            accessedNames.push(memberProperty.name);
+        }
+        else if (j.MemberExpression.check(memberProperty)) {
+            let currentMember = memberProperty;
+            if (j.Identifier.check(currentMember.object)) {
+                accessedNames.push(currentMember.object.name);
+            }
+        }
+        memberAccessPath.replace(memberProperty);
+    });
+    // If there's any renamed member access, need to call `use()` onto member access
+    // e.g. ['params'] => insert `const params = use(props.params)`
+    if (accessedNames.length > 0) {
+        const accessedPropId = j.identifier(propIdName);
+        const accessedProp = j.memberExpression(accessedPropId, j.identifier(accessedNames[0]));
+        const useCall = j.callExpression(j.identifier('use'), [accessedProp]);
+        const useDeclaration = j.variableDeclaration('const', [
+            j.variableDeclarator(j.identifier(accessedNames[0]), useCall),
+        ]);
+        if (functionBody) {
+            functionBody.unshift(useDeclaration);
+        }
+        modified = true;
+    }
+    return modified;
 }
 function transformDynamicProps(source, api, _filePath) {
     let modified = false;
+    let modifiedPropArgument = false;
     const j = api.jscodeshift.withParser('tsx');
     const root = j(source);
     // Check if 'use' from 'react' needs to be imported
@@ -25,18 +104,22 @@ function transformDynamicProps(source, api, _filePath) {
     let insertedRenamedPropFunctionNames = new Set();
     function processAsyncPropOfEntryFile(isClientComponent) {
         // find `params` and `searchParams` in file, and transform the access to them
-        function renameAsyncPropIfExisted(path) {
-            const decl = path.value.declaration;
-            if (decl.type !== 'FunctionDeclaration' &&
-                decl.type !== 'FunctionExpression' &&
-                decl.type !== 'ArrowFunctionExpression') {
-                return;
-            }
+        function renameAsyncPropIfExisted(path, isDefaultExport) {
+            const decl = path.value;
             const params = decl.params;
+            const functionName = decl.id?.name || 'default';
+            // target properties mapping, only contains `params` and `searchParams`
             const propertiesMap = new Map();
-            // If there's no first param, return
-            if (params.length !== 1) {
-                return;
+            let allProperties = [];
+            // generateMetadata API has 2 params
+            if (functionName === 'generateMetadata') {
+                if (params.length > 2 || params.length === 0)
+                    return;
+            }
+            else {
+                // Page/Layout/Route handlers have 1 param
+                if (params.length !== 1)
+                    return;
             }
             const propsIdentifier = (0, utils_1.generateUniqueIdentifier)(PAGE_PROPS, path, j);
             const currentParam = params[0];
@@ -44,19 +127,25 @@ function transformDynamicProps(source, api, _filePath) {
             if (currentParam.type === 'ObjectPattern') {
                 // Validate if the properties are not `params` and `searchParams`,
                 // if they are, quit the transformation
+                let foundTargetProp = false;
                 for (const prop of currentParam.properties) {
                     if ('key' in prop && prop.key.type === 'Identifier') {
                         const propName = prop.key.name;
-                        if (!utils_1.TARGET_PROP_NAMES.has(propName)) {
-                            return;
+                        if (utils_1.TARGET_PROP_NAMES.has(propName)) {
+                            foundTargetProp = true;
                         }
                     }
                 }
+                // If there's no `params` or `searchParams` matched, return
+                if (!foundTargetProp)
+                    return;
+                allProperties = currentParam.properties;
                 currentParam.properties.forEach((prop) => {
                     if (
                     // Could be `Property` or `ObjectProperty`
                     'key' in prop &&
-                        prop.key.type === 'Identifier') {
+                        prop.key.type === 'Identifier' &&
+                        utils_1.TARGET_PROP_NAMES.has(prop.key.name)) {
                         const value = 'value' in prop ? prop.value : null;
                         propertiesMap.set(prop.key.name, value);
                     }
@@ -141,41 +230,139 @@ function transformDynamicProps(source, api, _filePath) {
                 // Override the first param to `props`
                 params[0] = propsIdentifier;
                 modified = true;
+                modifiedPropArgument = true;
             }
-            if (modified) {
-                resolveAsyncProp(path, propertiesMap, propsIdentifier.name);
-            }
-        }
-        function getBodyOfFunctionDeclaration(path) {
-            const decl = path.value.declaration;
-            let functionBody;
-            if (decl.type === 'FunctionDeclaration' ||
-                decl.type === 'FunctionExpression' ||
-                decl.type === 'ArrowFunctionExpression') {
-                if (decl.body && decl.body.type === 'BlockStatement') {
-                    functionBody = decl.body.body;
+            else if (currentParam.type === 'Identifier') {
+                // case of accessing the props.params.<name>:
+                // Page(props) {}
+                // generateMetadata(props, parent?) {}
+                const argName = currentParam.name;
+                if (isClientComponent) {
+                    const modifiedProp = applyUseAndRenameAccessedProp(argName, path, j);
+                    if (modifiedProp) {
+                        needsReactUseImport = true;
+                        modified = true;
+                    }
+                }
+                else {
+                    modified = awaitMemberAccessOfProp(argName, path, j);
                 }
+                // cases of passing down `props` into any function
+                // Page(props) { callback(props) }
+                // search for all the argument of CallExpression, where currentParam is one of the arguments
+                const callExpressions = j(path).find(j.CallExpression, {
+                    arguments: (args) => {
+                        return args.some((arg) => {
+                            return (j.Identifier.check(arg) &&
+                                arg.name === argName &&
+                                arg.type === 'Identifier');
+                        });
+                    },
+                });
+                // Add a comment to warn users that properties of `props` need to be awaited when accessed
+                callExpressions.forEach((callExpression) => {
+                    // 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 || []),
+                    ];
+                    modified = true;
+                });
+            }
+            if (modifiedPropArgument) {
+                resolveAsyncProp(path, propertiesMap, propsIdentifier.name, allProperties, isDefaultExport);
             }
-            return functionBody;
         }
         // Helper function to insert `const params = await asyncParams;` at the beginning of the function body
-        function resolveAsyncProp(path, propertiesMap, propsIdentifierName) {
-            const isDefaultExport = path.value.type === 'ExportDefaultDeclaration';
+        function resolveAsyncProp(path, propertiesMap, propsIdentifierName, allProperties, isDefaultExport) {
+            const node = path.value;
             // If it's sync default export, and it's also server component, make the function async
-            if (isDefaultExport &&
-                !isClientComponent &&
-                !isAsyncFunctionDeclaration(path)) {
-                if ('async' in path.value.declaration) {
-                    path.value.declaration.async = true;
-                    (0, utils_1.turnFunctionReturnTypeToAsync)(path.value.declaration, j);
+            if (isDefaultExport && !isClientComponent) {
+                if (!node.async) {
+                    if ('async' in node) {
+                        node.async = true;
+                        (0, utils_1.turnFunctionReturnTypeToAsync)(node, j);
+                    }
                 }
             }
-            const isAsyncFunc = isAsyncFunctionDeclaration(path);
-            // @ts-ignore quick way to check if it's a function and it has a name
-            const functionName = path.value.declaration.id?.name || 'default';
-            const functionBody = getBodyOfFunctionDeclaration(path);
-            for (const [propName, paramsProperty] of propertiesMap) {
-                const propNameIdentifier = j.identifier(propName);
+            const isAsyncFunc = !!node.async;
+            const functionName = path.value.id?.name || 'default';
+            const functionBody = findFunctionBody(path);
+            const hasOtherProperties = allProperties.length > propertiesMap.size;
+            function createDestructuringDeclaration(properties, destructPropsIdentifierName) {
+                const propsToKeep = [];
+                let restProperty = null;
+                // Iterate over the destructured properties
+                properties.forEach((property) => {
+                    if (j.ObjectProperty.check(property)) {
+                        // Handle normal and computed properties
+                        const keyName = j.Identifier.check(property.key)
+                            ? property.key.name
+                            : j.Literal.check(property.key)
+                                ? property.key.value
+                                : null; // for computed properties
+                        if (typeof keyName === 'string') {
+                            propsToKeep.push(property);
+                        }
+                    }
+                    else if (j.RestElement.check(property)) {
+                        restProperty = property;
+                    }
+                });
+                if (propsToKeep.length === 0 && !restProperty) {
+                    return null;
+                }
+                if (restProperty) {
+                    propsToKeep.push(restProperty);
+                }
+                return j.variableDeclaration('const', [
+                    j.variableDeclarator(j.objectPattern(propsToKeep), j.identifier(destructPropsIdentifierName)),
+                ]);
+            }
+            if (hasOtherProperties) {
+                /**
+                 * If there are other properties, we need to keep the original param with destructuring
+                 * e.g.
+                 * input:
+                 * Page({ params: { slug }, otherProp }) {
+                 *   const { slug } = await props.params;
+                 * }
+                 *
+                 * output:
+                 * Page(props) {
+                 *   const { otherProp } = props; // inserted
+                 *   // ...rest of the function body
+                 * }
+                 */
+                const restProperties = allProperties.filter((prop) => {
+                    const isTargetProps = 'key' in prop &&
+                        prop.key.type === 'Identifier' &&
+                        utils_1.TARGET_PROP_NAMES.has(prop.key.name);
+                    return !isTargetProps;
+                });
+                const destructionOtherPropertiesDeclaration = createDestructuringDeclaration(restProperties, propsIdentifierName);
+                if (functionBody && destructionOtherPropertiesDeclaration) {
+                    functionBody.unshift(destructionOtherPropertiesDeclaration);
+                }
+            }
+            for (const [matchedPropName, paramsProperty] of propertiesMap) {
+                if (!utils_1.TARGET_PROP_NAMES.has(matchedPropName)) {
+                    continue;
+                }
+                const propRenamedId = j.Identifier.check(paramsProperty)
+                    ? paramsProperty.name
+                    : null;
+                const propName = propRenamedId || matchedPropName;
+                // if propName is not used in lower scope, and it stars with unused prefix `_`,
+                // also skip the transformation
+                const hasDeclared = path.scope.declares(propName);
+                if (!hasDeclared && propName.startsWith('_'))
+                    continue;
+                const propNameIdentifier = j.identifier(matchedPropName);
                 const propsIdentifier = j.identifier(propsIdentifierName);
                 const accessedPropId = j.memberExpression(propsIdentifier, propNameIdentifier);
                 // Check param property value, if it's destructed, we need to destruct it as well
@@ -212,14 +399,14 @@ function transformDynamicProps(source, api, _filePath) {
                     }
                 }
                 else {
-                    const isFromExport = path.value.type === 'ExportNamedDeclaration';
-                    if (isFromExport) {
+                    // const isFromExport = true
+                    if (!isClientComponent) {
                         // If it's export function, populate the function to async
-                        if ((0, utils_1.isFunctionType)(path.value.declaration.type) &&
+                        if ((0, utils_1.isFunctionType)(node.type) &&
                             // Make TS happy
-                            'async' in path.value.declaration) {
-                            path.value.declaration.async = true;
-                            (0, utils_1.turnFunctionReturnTypeToAsync)(path.value.declaration, j);
+                            'async' in node) {
+                            node.async = true;
+                            (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(accessedPropId)),
@@ -243,42 +430,23 @@ function transformDynamicProps(source, api, _filePath) {
                 }
             }
         }
-        // Process Function Declarations
-        // Matching: default export function XXX(...) { ... }
-        const defaultExportFunctionDeclarations = root.find(j.ExportDefaultDeclaration, {
-            declaration: {
-                type: (type) => type === 'FunctionDeclaration' ||
-                    type === 'FunctionExpression' ||
-                    type === 'ArrowFunctionExpression',
-            },
-        });
-        defaultExportFunctionDeclarations.forEach((path) => {
-            renameAsyncPropIfExisted(path);
+        const defaultExportsDeclarations = root.find(j.ExportDefaultDeclaration);
+        defaultExportsDeclarations.forEach((path) => {
+            const functionPath = (0, utils_1.getFunctionPathFromExportPath)(path, j, root, () => true);
+            if (functionPath) {
+                renameAsyncPropIfExisted(functionPath, true);
+            }
         });
         // Matching Next.js functional named export of route entry:
         // - export function <named>(...) { ... }
         // - export const <named> = ...
-        const targetNamedExportDeclarations = root.find(j.ExportNamedDeclaration, 
-        // Filter the name is in TARGET_NAMED_EXPORTS
-        {
-            declaration: {
-                id: {
-                    name: (idName) => {
-                        return utils_1.TARGET_NAMED_EXPORTS.has(idName);
-                    },
-                },
-            },
-        });
-        targetNamedExportDeclarations.forEach((path) => {
-            renameAsyncPropIfExisted(path);
+        const namedExportDeclarations = root.find(j.ExportNamedDeclaration);
+        namedExportDeclarations.forEach((path) => {
+            const functionPath = (0, utils_1.getFunctionPathFromExportPath)(path, j, root, (idName) => utils_1.TARGET_NAMED_EXPORTS.has(idName));
+            if (functionPath) {
+                renameAsyncPropIfExisted(functionPath, false);
+            }
         });
-        // TDOO: handle targetNamedDeclarators
-        // const targetNamedDeclarators = root.find(
-        //   j.VariableDeclarator,
-        //   (node) =>
-        //     node.id.type === 'Identifier' &&
-        //     TARGET_NAMED_EXPORTS.has(node.id.name)
-        // )
     }
     const isClientComponent = (0, utils_1.determineClientDirective)(root, j, source);
     // Apply to `params` and `searchParams`

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

@@ -8,6 +8,11 @@ exports.isPromiseType = isPromiseType;
 exports.turnFunctionReturnTypeToAsync = turnFunctionReturnTypeToAsync;
 exports.insertReactUseImport = insertReactUseImport;
 exports.generateUniqueIdentifier = generateUniqueIdentifier;
+exports.isFunctionScope = isFunctionScope;
+exports.findClosetParentFunctionScope = findClosetParentFunctionScope;
+exports.getFunctionPathFromExportPath = getFunctionPathFromExportPath;
+exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
+exports.insertCommentOnce = insertCommentOnce;
 exports.TARGET_NAMED_EXPORTS = new Set([
     // For custom route
     'GET',
@@ -195,4 +200,151 @@ function generateUniqueIdentifier(defaultIdName, path, j) {
     const propsIdentifier = j.identifier(idName);
     return propsIdentifier;
 }
+function isFunctionScope(path, j) {
+    if (!path)
+        return false;
+    const node = path.node;
+    // Check if the node is a function (declaration, expression, or arrow function)
+    return (j.FunctionDeclaration.check(node) ||
+        j.FunctionExpression.check(node) ||
+        j.ArrowFunctionExpression.check(node));
+}
+function findClosetParentFunctionScope(path, j) {
+    let parentFunctionPath = path.scope.path;
+    while (parentFunctionPath && !isFunctionScope(parentFunctionPath, j)) {
+        parentFunctionPath = parentFunctionPath.parent;
+    }
+    return parentFunctionPath;
+}
+function getFunctionNodeFromBinding(bindingPath, idName, j, root) {
+    const bindingNode = bindingPath.node;
+    if (j.FunctionDeclaration.check(bindingNode) ||
+        j.FunctionExpression.check(bindingNode) ||
+        j.ArrowFunctionExpression.check(bindingNode)) {
+        return bindingPath;
+    }
+    else if (j.VariableDeclarator.check(bindingNode)) {
+        const init = bindingNode.init;
+        // If the initializer is a function (arrow or function expression), record it
+        if (j.FunctionExpression.check(init) ||
+            j.ArrowFunctionExpression.check(init)) {
+            return bindingPath.get('init');
+        }
+    }
+    else if (j.Identifier.check(bindingNode)) {
+        const variablePath = root.find(j.VariableDeclaration, {
+            // declarations, each is VariableDeclarator
+            declarations: [
+                {
+                    // VariableDeclarator
+                    type: 'VariableDeclarator',
+                    // id is Identifier
+                    id: {
+                        type: 'Identifier',
+                        name: idName,
+                    },
+                },
+            ],
+        });
+        if (variablePath.size()) {
+            const variableDeclarator = variablePath.get()?.node?.declarations?.[0];
+            if (j.VariableDeclarator.check(variableDeclarator)) {
+                const init = variableDeclarator.init;
+                if (j.FunctionExpression.check(init) ||
+                    j.ArrowFunctionExpression.check(init)) {
+                    return variablePath.get('declarations', 0, 'init');
+                }
+            }
+        }
+        const functionDeclarations = root.find(j.FunctionDeclaration, {
+            id: {
+                name: idName,
+            },
+        });
+        if (functionDeclarations.size()) {
+            return functionDeclarations.get();
+        }
+    }
+    return undefined;
+}
+function getFunctionPathFromExportPath(exportPath, j, root, namedExportFilter) {
+    // Default export
+    if (j.ExportDefaultDeclaration.check(exportPath.node)) {
+        const { declaration } = exportPath.node;
+        if (declaration) {
+            if (j.FunctionDeclaration.check(declaration) ||
+                j.FunctionExpression.check(declaration) ||
+                j.ArrowFunctionExpression.check(declaration)) {
+                return exportPath.get('declaration');
+            }
+            else if (j.Identifier.check(declaration)) {
+                const idName = declaration.name;
+                if (!namedExportFilter(idName))
+                    return;
+                const exportBinding = exportPath.scope.getBindings()[idName]?.[0];
+                if (exportBinding) {
+                    return getFunctionNodeFromBinding(exportBinding, idName, j, root);
+                }
+            }
+        }
+    }
+    else if (
+    // Named exports
+    j.ExportNamedDeclaration.check(exportPath.node)) {
+        const namedExportPath = exportPath;
+        // extract the named exports, name specifiers, and default specifiers
+        const { declaration, specifiers } = namedExportPath.node;
+        if (declaration) {
+            if (j.VariableDeclaration.check(declaration)) {
+                const { declarations } = declaration;
+                for (const decl of declarations) {
+                    if (j.VariableDeclarator.check(decl) && j.Identifier.check(decl.id)) {
+                        const idName = decl.id.name;
+                        if (!namedExportFilter(idName))
+                            return;
+                        // get bindings for each variable declarator
+                        const exportBinding = namedExportPath.scope.getBindings()[idName]?.[0];
+                        if (exportBinding) {
+                            return getFunctionNodeFromBinding(exportBinding, idName, j, root);
+                        }
+                    }
+                }
+            }
+            else if (j.FunctionDeclaration.check(declaration) ||
+                j.FunctionExpression.check(declaration) ||
+                j.ArrowFunctionExpression.check(declaration)) {
+                const funcName = declaration.id?.name;
+                if (!namedExportFilter(funcName))
+                    return;
+                return namedExportPath.get('declaration');
+            }
+        }
+        if (specifiers) {
+            for (const specifier of specifiers) {
+                if (j.ExportSpecifier.check(specifier)) {
+                    const idName = specifier.local.name;
+                    if (!namedExportFilter(idName))
+                        return;
+                    const exportBinding = namedExportPath.scope.getBindings()[idName]?.[0];
+                    if (exportBinding) {
+                        return getFunctionNodeFromBinding(exportBinding, idName, j, root);
+                    }
+                }
+            }
+        }
+    }
+    return undefined;
+}
+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);
+        if (hasComment) {
+            return;
+        }
+    }
+    path.node.comments = [j.commentBlock(comment), ...(path.node.comments || [])];
+}
 //# sourceMappingURL=utils.js.map

package/transforms/next-dynamic-access-named-export.js

@@ -13,7 +13,7 @@ function transformer(file, api) {
         const importDecl = dynamicImportDeclaration.get(0).node;
         const dynamicImportName = importDecl.specifiers?.[0]?.local?.name;
         if (!dynamicImportName) {
-            return root.toSource();
+            return file.source;
         }
         // Find call expressions where the callee is the imported 'dynamic'
         root