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

package/bin/next-codemod.js

@@ -23,10 +23,18 @@ 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.')

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

@@ -90,7 +90,7 @@ async function runUpgrade(revision, options) {
         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) {

package/lib/handle-package.js

@@ -39,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',
@@ -106,10 +111,5 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
         value: 'next-async-request-api',
         version: '15.0.0-canary.171',
     },
-    {
-        title: 'Transform App Router Route Segment Config `runtime` value from `experimental-edge` to `edge`',
-        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.182",
+  "version": "15.0.0-canary.183",
   "license": "MIT",
   "repository": {
     "type": "git",

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;
         }
@@ -494,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);
@@ -516,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;
@@ -538,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);
@@ -556,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);
@@ -566,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;