@next/codemod 15.0.0-canary.184 → 15.0.0-canary.185

package/bin/upgrade.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.runUpgrade = runUpgrade;
 const prompts_1 = __importDefault(require("prompts"));
 const fs_1 = __importDefault(require("fs"));
+const semver_1 = __importDefault(require("semver"));
+const compare_1 = __importDefault(require("semver/functions/compare"));
 const child_process_1 = require("child_process");
 const path_1 = __importDefault(require("path"));
-const compare_versions_1 = require("compare-versions");
 const picocolors_1 = __importDefault(require("picocolors"));
 const handle_package_1 = require("../lib/handle-package");
 const transform_1 = require("./transform");
@@ -49,8 +50,12 @@ async function runUpgrade(revision, options) {
     const installedNextVersion = getInstalledNextVersion();
     console.log(`Current Next.js version: v${installedNextVersion}`);
     const targetNextVersion = targetNextPackageJson.version;
-    if ((0, compare_versions_1.compareVersions)(installedNextVersion, targetNextVersion) >= 0) {
-        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on or higher than the target version "v${targetNextVersion}".`);
+    if ((0, compare_1.default)(installedNextVersion, targetNextVersion) === 0) {
+        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on the target version "v${targetNextVersion}".`);
+        return;
+    }
+    if ((0, compare_1.default)(installedNextVersion, targetNextVersion) > 0) {
+        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is higher than the target version "v${targetNextVersion}".`);
         return;
     }
     const installedReactVersion = getInstalledReactVersion();
@@ -64,7 +69,7 @@ async function runUpgrade(revision, options) {
     // we should only let the user stay on React 18 if they are using pure Pages Router.
     // x-ref(PR): https://github.com/vercel/next.js/pull/65058
     // x-ref(release): https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.45
-    (0, compare_versions_1.compareVersions)(installedNextVersion, '14.3.0-canary.45') >= 0 &&
+    (0, compare_1.default)(installedNextVersion, '14.3.0-canary.45') >= 0 &&
         installedReactVersion.startsWith('18')) {
         const shouldStayOnReact18Res = await (0, prompts_1.default)({
             type: 'confirm',
@@ -84,7 +89,7 @@ async function runUpgrade(revision, options) {
     const targetReactVersion = shouldStayOnReact18
         ? '18.3.1'
         : await loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`);
-    if ((0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
+    if ((0, compare_1.default)(targetNextVersion, '15.0.0-canary') >= 0) {
         await suggestTurbopack(appPackageJson);
     }
     const codemods = await suggestCodemods(installedNextVersion, targetNextVersion);
@@ -94,7 +99,7 @@ async function runUpgrade(revision, options) {
     let execCommand = 'npx';
     // The following React codemods are for React 19
     if (!shouldStayOnReact18 &&
-        (0, compare_versions_1.compareVersions)(targetReactVersion, '19.0.0-beta.0') >= 0) {
+        (0, compare_1.default)(targetReactVersion, '19.0.0-beta.0') >= 0) {
         shouldRunReactCodemods = await suggestReactCodemods();
         shouldRunReactTypesCodemods = await suggestReactTypesCodemods();
         const execCommandMap = {
@@ -219,11 +224,25 @@ async function suggestTurbopack(packageJson) {
         responseCustomDevScript.customDevScript || devScript;
 }
 async function suggestCodemods(initialNextVersion, targetNextVersion) {
-    const initialVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, initialNextVersion) > 0);
+    // Here we suggest pre-released codemods by their "stable" version.
+    // It is because if we suggest by the version range (installed ~ target),
+    // pre-released codemods for the target version are not suggested when upgrading.
+    // Let's say we have a codemod for v15.0.0-canary.x, and we're upgrading from
+    // v15.x -> v15.x. Our initial version is higher than the codemod's version,
+    // so the codemod will not be suggested.
+    // This is not ideal as the codemods for pre-releases are also targeting the major version.
+    // Also, when the user attempts to run the upgrade command twice, and have installed the
+    // target version, the behavior must be idempotent and suggest the codemods including the
+    // pre-releases of the target version.
+    const initial = semver_1.default.parse(initialNextVersion);
+    const initialVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => {
+        const codemod = semver_1.default.parse(versionCodemods.version);
+        return ((0, compare_1.default)(`${codemod.major}.${codemod.minor}.${codemod.patch}`, `${initial.major}.${initial.minor}.${initial.patch}`) >= 0);
+    });
     if (initialVersionIndex === -1) {
         return [];
     }
-    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, targetNextVersion) > 0);
+    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_1.default)(versionCodemods.version, targetNextVersion) > 0);
     if (targetVersionIndex === -1) {
         targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.length;
     }

package/lib/utils.js

@@ -39,62 +39,57 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
     {
         title: 'Transform the deprecated automatically injected url property on top level pages to using withRouter',
         value: 'url-to-withrouter',
-        version: '6.0',
+        version: '6.0.0',
     },
     {
         title: 'Transforms the withAmp HOC into Next.js 9 page configuration',
         value: 'withamp-to-config',
-        version: '8.0',
+        version: '8.0.0',
     },
     {
         title: 'Transforms anonymous components into named components to make sure they work with Fast Refresh',
         value: 'name-default-component',
-        version: '9.0',
+        version: '9.0.0',
     },
     {
         title: 'Transforms files that do not import `React` to include the import in order for the new React JSX transform',
         value: 'add-missing-react-import',
-        version: '10.0',
+        version: '10.0.0',
     },
     {
         title: 'Automatically migrates a Create React App project to Next.js (experimental)',
         value: 'cra-to-next',
-        version: '11.0',
+        version: '11.0.0',
     },
     {
         title: 'Ensures your <Link> usage is backwards compatible',
         value: 'new-link',
-        version: '13.0',
+        version: '13.0.0',
     },
     {
         title: 'Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props (experimental)',
         value: 'next-image-experimental',
-        version: '13.0',
+        version: '13.0.0',
     },
     {
         title: 'Safely migrate Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13',
         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',
+        version: '13.0.0',
     },
     {
         title: 'Uninstall `@next/font` and transform imports to `next/font`',
         value: 'built-in-next-font',
-        version: '13.2',
+        version: '13.2.0',
     },
     {
         title: 'Migrates certain viewport related metadata from the `metadata` export to a new `viewport` export',
         value: 'metadata-to-viewport-export',
-        version: '14.0',
+        version: '14.0.0',
     },
     {
         title: 'Transforms imports from `next/server` to `next/og` for usage of Dynamic OG Image Generation',
         value: 'next-og-import',
-        version: '14.0',
+        version: '14.0.0',
     },
     {
         title: 'Transform `next/dynamic` imports accessing named exports to return an object with a `default` property',
@@ -111,5 +106,10 @@ 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.184",
+  "version": "15.0.0-canary.185",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -10,14 +10,14 @@
   "dependencies": {
     "cheerio": "1.0.0-rc.9",
     "commander": "12.1.0",
-    "compare-versions": "6.1.1",
     "execa": "4.0.3",
     "find-up": "4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "1.1.0",
     "jscodeshift": "17.0.0",
     "picocolors": "1.0.0",
-    "prompts": "2.4.2"
+    "prompts": "2.4.2",
+    "semver": "7.6.3"
   },
   "files": [
     "transforms/*.js",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/find-up": "4.0.0",
     "@types/jscodeshift": "0.11.0",
-    "@types/prompts": "2.4.2"
+    "@types/prompts": "2.4.2",
+    "@types/semver": "7.3.1"
   }
 }

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicAPI = transformDynamicAPI;
 const utils_1 = require("./utils");
 const parser_1 = require("../../../lib/parser");
-const DYNAMIC_IMPORT_WARN_COMMENT = ` Next.js Dynamic Async API Codemod: The APIs under 'next/headers' are async now, need to be manually awaited. `;
+const DYNAMIC_IMPORT_WARN_COMMENT = ` @next-codemod-error 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`,
@@ -136,12 +136,12 @@ function transformDynamicAPI(source, _api, filePath) {
                             needsReactUseImport = true;
                         }
                         else {
-                            const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` Next.js Dynamic Async API Codemod: Manually await this call, if it's a Server Component `);
+                            const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} Manually await this call and refactor the function to be async `);
                             modified ||= casted;
                         }
                     }
                     else {
-                        const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ' Next.js Dynamic Async API Codemod: please manually await this call, codemod cannot transform due to undetermined async scope ');
+                        const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} please manually await this call, codemod cannot transform due to undetermined async scope `);
                         modified ||= casted;
                     }
                 }

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

@@ -142,7 +142,7 @@ function commentOnMatchedReExports(root, j) {
                         specifier.exported.name === 'default')) {
                     if (j.Literal.check(path.value.source)) {
                         const localName = specifier.local.name;
-                        const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                        const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
                         modified ||= commentInserted;
                     }
                     else if (path.value.source === null) {
@@ -155,7 +155,7 @@ function commentOnMatchedReExports(root, j) {
                             return importPath.value.specifiers.some((importSpecifier) => importSpecifier.local.name === localName);
                         });
                         if (importDeclaration.size() > 0) {
-                            const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                            const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
                             modified ||= commentInserted;
                         }
                     }
@@ -355,7 +355,7 @@ 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);
-                    const comment = ` Next.js Dynamic Async API Codemod: '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `;
+                    const comment = ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `;
                     const inserted = (0, utils_1.insertCommentOnce)(propPassedAsArg, j, comment);
                     modified ||= inserted;
                 });
@@ -698,7 +698,7 @@ function commentSpreadProps(path, propsIdentifierName, j) {
     const objSpreadProperties = functionBodyCollection.find(j.SpreadElement, {
         argument: { name: propsIdentifierName },
     });
-    const comment = ` Next.js Dynamic Async API Codemod: '${propsIdentifierName}' is used with spread syntax (...). Any asynchronous properties of '${propsIdentifierName}' must be awaited when accessed. `;
+    const comment = ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} '${propsIdentifierName}' is used with spread syntax (...). Any asynchronous properties of '${propsIdentifierName}' must be awaited when accessed. `;
     // Add comment before it
     jsxSpreadProperties.forEach((spread) => {
         const inserted = (0, utils_1.insertCommentOnce)(spread.value, j, comment);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = exports.NEXTJS_ENTRY_FILES = void 0;
+exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = exports.NEXT_CODEMOD_ERROR_PREFIX = exports.NEXTJS_ENTRY_FILES = void 0;
 exports.isFunctionType = isFunctionType;
 exports.isMatchedFunctionExported = isMatchedFunctionExported;
 exports.determineClientDirective = determineClientDirective;
@@ -15,6 +15,8 @@ exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
 exports.insertCommentOnce = insertCommentOnce;
 exports.getVariableDeclaratorId = getVariableDeclaratorId;
 exports.NEXTJS_ENTRY_FILES = /([\\/]|^)(page|layout|route|default)\.(t|j)sx?$/;
+exports.NEXT_CODEMOD_ERROR_PREFIX = '@next-codemod-error';
+const NEXT_CODEMOD_IGNORE_ERROR_PREFIX = '@next-codemod-ignore';
 exports.TARGET_ROUTE_EXPORTS = new Set([
     'GET',
     'POST',
@@ -321,15 +323,43 @@ function getFunctionPathFromExportPath(exportPath, j, root, namedExportFilter) {
 function wrapParentheseIfNeeded(hasChainAccess, j, expression) {
     return hasChainAccess ? j.parenthesizedExpression(expression) : expression;
 }
-function insertCommentOnce(node, j, comment) {
-    if (node.comments) {
-        const hasComment = node.comments.some((commentNode) => commentNode.value === comment);
+function existsComment(comments, comment) {
+    const isCodemodErrorComment = comment
+        .trim()
+        .startsWith(exports.NEXT_CODEMOD_ERROR_PREFIX);
+    let hasIgnoreComment = false;
+    let hasComment = false;
+    if (comments) {
+        comments.forEach((commentNode) => {
+            const currentComment = commentNode.value;
+            if (currentComment.trim().startsWith(NEXT_CODEMOD_IGNORE_ERROR_PREFIX)) {
+                hasIgnoreComment = true;
+            }
+            if (currentComment === comment) {
+                hasComment = true;
+            }
+        });
+        // If it's inserting codemod error comment,
+        // check if there's already a @next-codemod-ignore comment.
+        // if ignore comment exists, bypass the comment insertion.
+        if (hasIgnoreComment && isCodemodErrorComment) {
+            return true;
+        }
         if (hasComment) {
-            return false;
+            return true;
         }
     }
-    node.comments = [j.commentBlock(comment), ...(node.comments || [])];
-    return true;
+    return false;
+}
+function insertCommentOnce(node, j, comment) {
+    const hasCommentInInlineComments = existsComment(node.comments, comment);
+    const hasCommentInLeadingComments = existsComment(node.leadingComments, comment);
+    if (!hasCommentInInlineComments && !hasCommentInLeadingComments) {
+        // Always insert into inline comment
+        node.comments = [j.commentBlock(comment), ...(node.comments || [])];
+        return true;
+    }
+    return false;
 }
 function getVariableDeclaratorId(path, j) {
     const parent = path.parentPath;