@next/codemod 15.0.0-canary.197 → 15.0.0-canary.199

package/bin/upgrade.js

@@ -30,7 +30,6 @@ exports.runUpgrade = runUpgrade;
 const os = __importStar(require("os"));
 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"));
@@ -149,8 +148,8 @@ async function runUpgrade(revision, options) {
     let execCommand = 'npx';
     // The following React codemods are for React 19
     if (!shouldStayOnReact18 &&
-        (0, compare_1.default)(targetReactVersion, '18.9999.9999') > 0 &&
-        (0, compare_1.default)(installedReactVersion, '18.9999.9999') <= 0) {
+        (0, compare_1.default)(targetReactVersion, '19.0.0-0') >= 0 &&
+        (0, compare_1.default)(installedReactVersion, '19.0.0-0') < 0) {
         shouldRunReactCodemods = await suggestReactCodemods();
         shouldRunReactTypesCodemods = await suggestReactTypesCodemods();
         const execCommandMap = {
@@ -336,25 +335,21 @@ async function suggestTurbopack(packageJson) {
         responseCustomDevScript.customDevScript || devScript;
 }
 async function suggestCodemods(initialNextVersion, targetNextVersion) {
-    // 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);
+    // example:
+    // codemod version: 15.0.0-canary.45
+    // 14.3             -> 15.0.0-canary.45: apply
+    // 14.3             -> 15.0.0-canary.44: don't apply
+    // 15.0.0-canary.44 -> 15.0.0-canary.45: apply
+    // 15.0.0-canary.45 -> 15.0.0-canary.46: don't apply
+    // 15.0.0-canary.45 -> 15.0.0          : don't apply
+    // 15.0.0-canary.44 -> 15.0.0          : apply
+    const initialVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((codemod) => {
+        return (0, compare_1.default)(codemod.version, initialNextVersion) > 0;
     });
     if (initialVersionIndex === -1) {
         return [];
     }
-    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_1.default)(versionCodemods.version, targetNextVersion) > 0);
+    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((codemod) => (0, compare_1.default)(codemod.version, targetNextVersion) > 0);
     if (targetVersionIndex === -1) {
         targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.length;
     }

package/package.json

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

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

@@ -108,10 +108,10 @@ function transformDynamicAPI(source, _api, filePath) {
                 // check if current path is under the default export function
                 if (isEntryFileExport) {
                     // if default export function is not async, convert it to async, and await the api call
-                    if (!isCallAwaited) {
+                    if (!isCallAwaited && (0, utils_1.isFunctionType)(exportFunctionNode.type)) {
+                        const hasReactHooksUsage = (0, utils_1.containsReactHooksCallExpressions)(closetScopePath, j);
                         // If the scoped function is async function
-                        if ((0, utils_1.isFunctionType)(exportFunctionNode.type) &&
-                            exportFunctionNode.async === false) {
+                        if (exportFunctionNode.async === false && !hasReactHooksUsage) {
                             canConvertToAsync = true;
                             exportFunctionNode.async = true;
                         }
@@ -121,15 +121,25 @@ function transformDynamicAPI(source, _api, filePath) {
                             (0, utils_1.turnFunctionReturnTypeToAsync)(closetScopePath.node, j);
                             modified = true;
                         }
+                        else {
+                            // If it's still sync function that cannot be converted to async, wrap the api call with 'use()' if needed
+                            if (!(0, utils_1.isParentUseCallExpression)(path, j)) {
+                                j(path).replaceWith(j.callExpression(j.identifier('use'), [
+                                    j.callExpression(j.identifier(asyncRequestApiName), []),
+                                ]));
+                                needsReactUseImport = true;
+                                modified = true;
+                            }
+                        }
                     }
                 }
                 else {
                     // if parent is function and it's a hook, which starts with 'use', wrap the api call with 'use()'
                     const parentFunction = (0, utils_1.findClosetParentFunctionScope)(path, j);
                     if (parentFunction) {
-                        const parentFunctionName = parentFunction.get().node.id?.name;
-                        const isParentFunctionHook = parentFunctionName?.startsWith('use');
-                        if (isParentFunctionHook) {
+                        const parentFunctionName = parentFunction.get().node.id?.name || '';
+                        const isParentFunctionHook = (0, utils_1.isReactHookName)(parentFunctionName);
+                        if (isParentFunctionHook && !(0, utils_1.isParentUseCallExpression)(path, j)) {
                             j(path).replaceWith(j.callExpression(j.identifier('use'), [
                                 j.callExpression(j.identifier(asyncRequestApiName), []),
                             ]));

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

@@ -4,16 +4,9 @@ exports.transformDynamicProps = transformDynamicProps;
 const utils_1 = require("./utils");
 const parser_1 = require("../../../lib/parser");
 const PAGE_PROPS = 'props';
-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 functionBody = (0, utils_1.findFunctionBody)(path);
     const memberAccess = j(functionBody).find(j.MemberExpression, {
         object: {
             type: 'Identifier',
@@ -30,7 +23,7 @@ function awaitMemberAccessOfProp(propIdName, path, j) {
         if (!isAccessingMatchedProperty) {
             return;
         }
-        if (isParentPromiseAllCallExpression(memberAccessPath, j)) {
+        if ((0, utils_1.isParentPromiseAllCallExpression)(memberAccessPath, j)) {
             return;
         }
         // check if it's already awaited
@@ -42,44 +35,16 @@ function awaitMemberAccessOfProp(propIdName, path, j) {
         memberAccessPath.replace(awaitMemberAccess);
         hasAwaited = true;
     });
+    const hasReactHooksUsage = (0, utils_1.containsReactHooksCallExpressions)(path.get('body'), j);
     // 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);
-            }
+        if (path.value.async === false && !hasReactHooksUsage) {
+            path.value.async = true;
+            (0, utils_1.turnFunctionReturnTypeToAsync)(path.value, j);
         }
     }
     return hasAwaited;
 }
-function isParentUseCallExpression(path, j) {
-    if (
-    // member access parentPath is argument
-    j.CallExpression.check(path.parent.value) &&
-        // member access is first argument
-        path.parent.value.arguments[0] === path.value &&
-        // function name is `use`
-        j.Identifier.check(path.parent.value.callee) &&
-        path.parent.value.callee.name === 'use') {
-        return true;
-    }
-    return false;
-}
-function isParentPromiseAllCallExpression(path, j) {
-    const argsParent = path.parent;
-    const callParent = argsParent?.parent;
-    if (j.ArrayExpression.check(argsParent.value) &&
-        j.CallExpression.check(callParent.value) &&
-        j.MemberExpression.check(callParent.value.callee) &&
-        j.Identifier.check(callParent.value.callee.object) &&
-        callParent.value.callee.object.name === 'Promise' &&
-        j.Identifier.check(callParent.value.callee.property) &&
-        callParent.value.callee.property.name === 'all') {
-        return true;
-    }
-    return false;
-}
 function applyUseAndRenameAccessedProp(propIdName, path, j) {
     // search the member access of the prop, and rename the member access to the member value
     // e.g.
@@ -87,7 +52,7 @@ function applyUseAndRenameAccessedProp(propIdName, path, j) {
     // props.params.foo => params.foo
     // props.searchParams.search => searchParams.search
     let modified = false;
-    const functionBody = findFunctionBody(path);
+    const functionBody = (0, utils_1.findFunctionBody)(path);
     const memberAccess = j(functionBody).find(j.MemberExpression, {
         object: {
             type: 'Identifier',
@@ -98,7 +63,7 @@ function applyUseAndRenameAccessedProp(propIdName, path, j) {
     // rename each member access
     memberAccess.forEach((memberAccessPath) => {
         // If the member access expression is first argument of `use()`, we skip
-        if (isParentUseCallExpression(memberAccessPath, j)) {
+        if ((0, utils_1.isParentUseCallExpression)(memberAccessPath, j)) {
             return;
         }
         const member = memberAccessPath.value;
@@ -391,11 +356,10 @@ function transformDynamicProps(source, _api, filePath) {
             const node = path.value;
             // If it's sync default export, and it's also server component, make the function async
             if (isDefaultExport && !isClientComponent) {
-                if (!node.async) {
-                    if ('async' in node) {
-                        node.async = true;
-                        (0, utils_1.turnFunctionReturnTypeToAsync)(node, j);
-                    }
+                const hasReactHooksUsage = (0, utils_1.containsReactHooksCallExpressions)(path.get('body'), j);
+                if (node.async === false && !hasReactHooksUsage) {
+                    node.async = true;
+                    (0, utils_1.turnFunctionReturnTypeToAsync)(node, j);
                 }
             }
             // If it's arrow function and function body is not block statement, check if the properties are used there
@@ -421,7 +385,9 @@ function transformDynamicProps(source, _api, filePath) {
             }
             const isAsyncFunc = !!node.async;
             const functionName = path.value.id?.name || 'default';
-            const functionBody = findFunctionBody(path);
+            const functionBody = (0, utils_1.findFunctionBody)(path);
+            const functionBodyPath = path.get('body');
+            const hasReactHooksUsage = (0, utils_1.containsReactHooksCallExpressions)(functionBodyPath, j);
             const hasOtherProperties = allProperties.length > propertiesMap.size;
             function createDestructuringDeclaration(properties, destructPropsIdentifierName) {
                 const propsToKeep = [];
@@ -491,7 +457,7 @@ function transformDynamicProps(source, _api, filePath) {
                         name: matchedPropName,
                     });
                     for (const propPath of propPaths.paths()) {
-                        if (isParentUseCallExpression(propPath, j)) {
+                        if ((0, utils_1.isParentUseCallExpression)(propPath, j)) {
                             // Skip transformation
                             shouldSkip = true;
                             break;
@@ -507,7 +473,6 @@ function transformDynamicProps(source, _api, filePath) {
                 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: paramPropertyName,
@@ -526,7 +491,7 @@ function transformDynamicProps(source, _api, filePath) {
                     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);
+                        const isAwaitedByUse = (0, utils_1.isParentUseCallExpression)(propUsage, j);
                         if (!isAwaited && !isAwaitedByUse) {
                             hasMissingAwaited = true;
                             return;
@@ -575,22 +540,19 @@ function transformDynamicProps(source, _api, filePath) {
                     }
                 }
                 else {
-                    // const isFromExport = true
-                    if (!isClientComponent) {
+                    if (!isClientComponent &&
+                        (0, utils_1.isFunctionType)(node.type) &&
+                        !hasReactHooksUsage) {
                         // If it's export function, populate the function to async
-                        if ((0, utils_1.isFunctionType)(node.type) &&
-                            // Make TS happy
-                            '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(paramPropertyName), j.awaitExpression(accessedPropIdExpr)),
-                            ]);
-                            if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
-                                functionBody.unshift(paramAssignment);
-                                insertedRenamedPropFunctionNames.add(uid);
-                            }
+                        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(paramPropertyName), j.awaitExpression(accessedPropIdExpr)),
+                        ]);
+                        if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
+                            functionBody.unshift(paramAssignment);
+                            insertedRenamedPropFunctionNames.add(uid);
                         }
                     }
                     else {
@@ -691,7 +653,7 @@ function findAllTypes(root, j, typeName) {
 }
 function commentSpreadProps(path, propsIdentifierName, j) {
     let modified = false;
-    const functionBody = findFunctionBody(path);
+    const functionBody = (0, utils_1.findFunctionBody)(path);
     const functionBodyCollection = j(functionBody);
     // Find all the usage of spreading properties of `props`
     const jsxSpreadProperties = functionBodyCollection.find(j.JSXSpreadAttribute, { argument: { name: propsIdentifierName } });

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.NEXT_CODEMOD_ERROR_PREFIX = exports.NEXTJS_ENTRY_FILES = void 0;
+exports.isReactHookName = 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;
@@ -14,6 +14,10 @@ exports.getFunctionPathFromExportPath = getFunctionPathFromExportPath;
 exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
 exports.insertCommentOnce = insertCommentOnce;
 exports.getVariableDeclaratorId = getVariableDeclaratorId;
+exports.findFunctionBody = findFunctionBody;
+exports.containsReactHooksCallExpressions = containsReactHooksCallExpressions;
+exports.isParentUseCallExpression = isParentUseCallExpression;
+exports.isParentPromiseAllCallExpression = isParentPromiseAllCallExpression;
 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';
@@ -371,4 +375,99 @@ function getVariableDeclaratorId(path, j) {
     }
     return undefined;
 }
+function findFunctionBody(path) {
+    let functionBody = path.node.body;
+    if (functionBody && functionBody.type === 'BlockStatement') {
+        return functionBody.body;
+    }
+    return null;
+}
+const isPascalCase = (s) => /^[A-Z][a-z0-9]*$/.test(s);
+const isReactHookName = (name) => 
+// function name is `use`
+name === 'use' ||
+    // function name is `useX*`
+    (name.startsWith('use') && name[3] === name[3].toUpperCase());
+exports.isReactHookName = isReactHookName;
+// Determine a path of function contains any React hooks call expressions.
+// e.g. if there's any of those call expressions in the function body:
+// use() => true
+// React.use() => false
+// useXxxx() => true
+// Foo.use() => true
+// Foo.useXxxx() => true
+function containsReactHooksCallExpressions(path, j) {
+    const hasReactHooks = j(path)
+        .find(j.CallExpression)
+        .filter((callPath) => {
+        // It's matching:
+        // - use(<callPath>) => true
+        // - useX*(<callPath>) => true
+        const isUseHookOrReactHookCall = j.Identifier.check(callPath.value.callee) &&
+            (0, exports.isReactHookName)(callPath.value.callee.name);
+        // It's matching member access:
+        // - React.use(<callPath>) => true
+        // - Foo.useFoo(<callPath>) => true
+        // - foo.useFoo(<callPath>) => false
+        // - foo.use(<callPath>) => false
+        const isReactUseCall = j.MemberExpression.check(callPath.value.callee) &&
+            j.Identifier.check(callPath.value.callee.object) &&
+            j.Identifier.check(callPath.value.callee.property) &&
+            isPascalCase(callPath.value.callee.object.name) &&
+            (0, exports.isReactHookName)(callPath.value.callee.property.name);
+        return isUseHookOrReactHookCall || isReactUseCall;
+    })
+        .size() > 0;
+    return hasReactHooks;
+}
+// Capture the parent of the current path is wrapped by `use()` call expression
+// e.g.
+// use(<path>) => true
+// use2(<path>) => false
+// React.use(<path>) => true
+// Robust.use(<path>) => false
+function isParentUseCallExpression(path, j) {
+    const isParentUseCall = 
+    // member access parentPath is argument
+    j.CallExpression.check(path.parent.value) &&
+        // member access is first argument
+        path.parent.value.arguments[0] === path.value &&
+        path.parent.value.arguments.length === 1 &&
+        // function name is `use`
+        j.Identifier.check(path.parent.value.callee) &&
+        path.parent.value.callee.name === 'use';
+    const isParentReactUseCall = 
+    // member access parentPath is argument
+    j.CallExpression.check(path.parent.value) &&
+        // member access is first argument
+        path.parent.value.arguments[0] === path.value &&
+        path.parent.value.arguments.length === 1 &&
+        // function name is `use`
+        j.MemberExpression.check(path.parent.value.callee) &&
+        j.Identifier.check(path.parent.value.callee.object) &&
+        path.parent.value.callee.object.name === 'React' &&
+        j.Identifier.check(path.parent.value.callee.property) &&
+        path.parent.value.callee.property.name === 'use';
+    return isParentUseCall || isParentReactUseCall;
+}
+// Determine if a path is wrapped by `Promise.all()`
+// e.g.
+// Promise.all(<path>) => true
+// Promise.allSettled(<path>) => false
+function isParentPromiseAllCallExpression(path, j) {
+    const argsParent = path.parent;
+    const callParent = argsParent?.parent;
+    if (argsParent &&
+        callParent &&
+        j.ArrayExpression.check(argsParent.value) &&
+        j.CallExpression.check(callParent.value) &&
+        j.MemberExpression.check(callParent.value.callee) &&
+        j.Identifier.check(callParent.value.callee.object) &&
+        callParent.value.callee.object.name === 'Promise' &&
+        j.Identifier.check(callParent.value.callee.property) &&
+        callParent.value.callee.property.name === 'all') {
+        return true;
+    }
+    return false;
+}
 //# sourceMappingURL=utils.js.map