@next/codemod 15.0.0-canary.17 → 15.0.0-canary.170

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

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = void 0;
+exports.isFunctionType = isFunctionType;
+exports.isMatchedFunctionExported = isMatchedFunctionExported;
+exports.determineClientDirective = determineClientDirective;
+exports.isPromiseType = isPromiseType;
+exports.turnFunctionReturnTypeToAsync = turnFunctionReturnTypeToAsync;
+exports.insertReactUseImport = insertReactUseImport;
+exports.generateUniqueIdentifier = generateUniqueIdentifier;
+exports.TARGET_NAMED_EXPORTS = new Set([
+    // For custom route
+    'GET',
+    'HEAD',
+    'POST',
+    'PUT',
+    'DELETE',
+    'PATCH',
+    'OPTIONS',
+    // For page and layout
+    'generateMetadata',
+]);
+exports.TARGET_PROP_NAMES = new Set(['params', 'searchParams']);
+function isFunctionType(type) {
+    return (type === 'FunctionDeclaration' ||
+        type === 'FunctionExpression' ||
+        type === 'ArrowFunctionExpression');
+}
+function isMatchedFunctionExported(path, j) {
+    const matchedFunctionNameFilter = (idName) => exports.TARGET_NAMED_EXPORTS.has(idName);
+    const directNamedExport = j(path).closest(j.ExportNamedDeclaration, {
+        declaration: {
+            type: 'FunctionDeclaration',
+            id: {
+                name: matchedFunctionNameFilter,
+            },
+        },
+    });
+    if (directNamedExport.size() > 0) {
+        return true;
+    }
+    // Check for default export (`export default function() {}`)
+    const isDefaultExport = j(path).closest(j.ExportDefaultDeclaration).size() > 0;
+    if (isDefaultExport) {
+        return true;
+    }
+    // Look for named export elsewhere in the file (`export { <named> }`)
+    const root = j(path).closestScope().closest(j.Program);
+    const isNamedExport = root
+        .find(j.ExportNamedDeclaration, {
+        specifiers: [
+            {
+                type: 'ExportSpecifier',
+                exported: {
+                    name: matchedFunctionNameFilter,
+                },
+            },
+        ],
+    })
+        .size() > 0;
+    // Look for variable export but still function, e.g. `export const <named> = function() {}`,
+    // also check if variable is a function or arrow function
+    const isVariableExport = root
+        .find(j.ExportNamedDeclaration, {
+        declaration: {
+            declarations: [
+                {
+                    type: 'VariableDeclarator',
+                    id: {
+                        type: 'Identifier',
+                        name: matchedFunctionNameFilter,
+                    },
+                    init: {
+                        type: isFunctionType,
+                    },
+                },
+            ],
+        },
+    })
+        .size() > 0;
+    if (isVariableExport)
+        return true;
+    return isNamedExport;
+}
+function determineClientDirective(root, j, source) {
+    const hasStringDirective = root
+        .find(j.Literal)
+        .filter((path) => {
+        const expr = path.node;
+        return (expr.value === 'use client' && path.parentPath.node.type === 'Program');
+    })
+        .size() > 0;
+    // 'use client';
+    const hasStringDirectiveWithSemicolon = root
+        .find(j.StringLiteral)
+        .filter((path) => {
+        const expr = path.node;
+        return (expr.type === 'StringLiteral' &&
+            expr.value === 'use client' &&
+            path.parentPath.node.type === 'Program');
+    })
+        .size() > 0;
+    if (hasStringDirective || hasStringDirectiveWithSemicolon)
+        return true;
+    // Since the client detection is not reliable with AST in jscodeshift,
+    // determine if 'use client' or "use client" is leading in the source code.
+    const trimmedSource = source.trim();
+    const containsClientDirective = /^'use client'/.test(trimmedSource) || /^"use client"/g.test(trimmedSource);
+    return containsClientDirective;
+}
+function isPromiseType(typeAnnotation) {
+    return (typeAnnotation.type === 'TSTypeReference' &&
+        typeAnnotation.typeName.name === 'Promise');
+}
+function turnFunctionReturnTypeToAsync(node, j) {
+    if (j.FunctionDeclaration.check(node) ||
+        j.FunctionExpression.check(node) ||
+        j.ArrowFunctionExpression.check(node)) {
+        if (node.returnType) {
+            const returnTypeAnnotation = node.returnType.typeAnnotation;
+            const isReturnTypePromise = isPromiseType(returnTypeAnnotation);
+            // Turn <return type> to Promise<return type>
+            // e.g. () => { slug: string } to () => Promise<{ slug: string }>
+            // e.g. Anything to Promise<Anything>
+            if (!isReturnTypePromise) {
+                if (node.returnType &&
+                    j.TSTypeAnnotation.check(node.returnType) &&
+                    (j.TSTypeReference.check(node.returnType.typeAnnotation) ||
+                        j.TSUnionType.check(node.returnType.typeAnnotation) ||
+                        j.TSTypePredicate.check(node.returnType.typeAnnotation))) {
+                    // Change the return type to Promise<void>
+                    node.returnType.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), 
+                    // @ts-ignore ignore the super strict type checking on the type annotation
+                    j.tsTypeParameterInstantiation([returnTypeAnnotation]));
+                }
+            }
+        }
+    }
+}
+function insertReactUseImport(root, j) {
+    const hasReactUseImport = root
+        .find(j.ImportSpecifier, {
+        imported: {
+            type: 'Identifier',
+            name: 'use',
+        },
+    })
+        .size() > 0;
+    if (!hasReactUseImport) {
+        const reactImportDeclaration = root.find(j.ImportDeclaration, {
+            source: {
+                type: 'Literal',
+                value: 'react',
+            },
+        });
+        if (reactImportDeclaration.size() > 0) {
+            // Add 'use' to existing 'react' import declaration
+            reactImportDeclaration
+                .get()
+                .node.specifiers.push(j.importSpecifier(j.identifier('use')));
+        }
+        else {
+            // Final all type imports to 'react'
+            const reactImport = root.find(j.ImportDeclaration, {
+                source: {
+                    type: 'Literal',
+                    value: 'react',
+                },
+            });
+            if (reactImport.size() > 0) {
+                reactImport
+                    .get()
+                    .node.specifiers.push(j.importSpecifier(j.identifier('use')));
+            }
+            else {
+                // Add new import declaration for 'react' and 'use'
+                root
+                    .get()
+                    .node.program.body.unshift(j.importDeclaration([j.importSpecifier(j.identifier('use'))], j.literal('react')));
+            }
+        }
+    }
+}
+function findSubScopeArgumentIdentifier(path, j, argName) {
+    const defCount = j(path).find(j.Identifier, { name: argName }).size();
+    return defCount > 0;
+}
+function generateUniqueIdentifier(defaultIdName, path, j) {
+    let idName = defaultIdName;
+    let idNameSuffix = 0;
+    while (findSubScopeArgumentIdentifier(path, j, idName)) {
+        idName = defaultIdName + idNameSuffix;
+        idNameSuffix++;
+    }
+    const propsIdentifier = j.identifier(idName);
+    return propsIdentifier;
+}
+//# sourceMappingURL=utils.js.map

package/transforms/metadata-to-viewport-export.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 function transformer(file, api) {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -56,5 +57,4 @@ function transformer(file, api) {
     }
     return root.toSource();
 }
-exports.default = transformer;
 //# sourceMappingURL=metadata-to-viewport-export.js.map

package/transforms/name-default-component.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 const path_1 = require("path");
 const camelCase = (value) => {
     const val = value.replace(/[-_\s.]+(.)?/g, (_match, chr) => chr ? chr.toUpperCase() : '');
@@ -14,11 +15,10 @@ function transformer(file, api, options) {
         (node.type === 'BlockStatement' &&
             j(node)
                 .find(j.ReturnStatement)
-                .some((path) => { var _a; return ((_a = path.value.argument) === null || _a === void 0 ? void 0 : _a.type) === 'JSXElement'; }));
+                .some((path) => path.value.argument?.type === 'JSXElement'));
     const hasRootAsParent = (path) => {
-        var _a;
         const program = path.parentPath.parentPath.parentPath.parentPath.parentPath;
-        return !program || ((_a = program === null || program === void 0 ? void 0 : program.value) === null || _a === void 0 ? void 0 : _a.type) === 'Program';
+        return !program || program?.value?.type === 'Program';
     };
     const nameFunctionComponent = (path) => {
         const node = path.value;
@@ -62,5 +62,4 @@ function transformer(file, api, options) {
     root.find(j.ExportDefaultDeclaration).forEach(nameFunctionComponent);
     return hasModifications ? root.toSource(options) : null;
 }
-exports.default = transformer;
 //# sourceMappingURL=name-default-component.js.map

package/transforms/new-link.js

@@ -1,5 +1,8 @@
 "use strict";
+// It might insert extra parnes for JSX components
+// x-ref: https://github.com/facebook/jscodeshift/issues/534
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 function transformer(file, api) {
     const j = api.jscodeshift.withParser('tsx');
     const $j = j(file.source);
@@ -68,11 +71,10 @@ function transformer(file, api) {
                 // Add only unique props to <Link> (skip duplicate props)
                 const linkPropNames = $link
                     .get('attributes')
-                    .value.map((linkProp) => { var _a; return (_a = linkProp === null || linkProp === void 0 ? void 0 : linkProp.name) === null || _a === void 0 ? void 0 : _a.name; });
+                    .value.map((linkProp) => linkProp?.name?.name);
                 const uniqueProps = [];
                 props.forEach((anchorProp) => {
-                    var _a;
-                    if (!linkPropNames.includes((_a = anchorProp === null || anchorProp === void 0 ? void 0 : anchorProp.name) === null || _a === void 0 ? void 0 : _a.name)) {
+                    if (!linkPropNames.includes(anchorProp?.name?.name)) {
                         uniqueProps.push(anchorProp);
                     }
                 });
@@ -86,5 +88,4 @@ function transformer(file, api) {
     })
         .toSource();
 }
-exports.default = transformer;
 //# sourceMappingURL=new-link.js.map

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

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var index_1 = require("./lib/async-request-api/index");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
+//# sourceMappingURL=next-async-request-api.js.map

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    // Find the import declaration for 'next/dynamic'
+    const dynamicImportDeclaration = root.find(j.ImportDeclaration, {
+        source: { value: 'next/dynamic' },
+    });
+    // If the import declaration is found
+    if (dynamicImportDeclaration.size() > 0) {
+        const importDecl = dynamicImportDeclaration.get(0).node;
+        const dynamicImportName = importDecl.specifiers?.[0]?.local?.name;
+        if (!dynamicImportName) {
+            return root.toSource();
+        }
+        // Find call expressions where the callee is the imported 'dynamic'
+        root
+            .find(j.CallExpression, {
+            callee: { name: dynamicImportName },
+        })
+            .forEach((path) => {
+            const arrowFunction = path.node.arguments[0];
+            // Ensure the argument is an ArrowFunctionExpression
+            if (arrowFunction && arrowFunction.type === 'ArrowFunctionExpression') {
+                const importCall = arrowFunction.body;
+                // Ensure the parent of the import call is a CallExpression with a .then
+                if (importCall &&
+                    importCall.type === 'CallExpression' &&
+                    importCall.callee.type === 'MemberExpression' &&
+                    'name' in importCall.callee.property &&
+                    importCall.callee.property.name === 'then') {
+                    const thenFunction = importCall.arguments[0];
+                    // handle case of block statement case `=> { return mod.Component }`
+                    // transform to`=> { return { default: mod.Component } }`
+                    if (thenFunction &&
+                        thenFunction.type === 'ArrowFunctionExpression' &&
+                        thenFunction.body.type === 'BlockStatement') {
+                        const returnStatement = thenFunction.body.body[0];
+                        // Ensure the body of the arrow function has a return statement with a MemberExpression
+                        if (returnStatement &&
+                            returnStatement.type === 'ReturnStatement' &&
+                            returnStatement.argument?.type === 'MemberExpression') {
+                            returnStatement.argument = j.objectExpression([
+                                j.property('init', j.identifier('default'), returnStatement.argument),
+                            ]);
+                        }
+                    }
+                    // handle case `=> mod.Component`
+                    // transform to`=> ({ default: mod.Component })`
+                    if (thenFunction &&
+                        thenFunction.type === 'ArrowFunctionExpression' &&
+                        thenFunction.body.type === 'MemberExpression') {
+                        thenFunction.body = j.objectExpression([
+                            j.property('init', j.identifier('default'), thenFunction.body),
+                        ]);
+                    }
+                }
+            }
+        });
+    }
+    return root.toSource();
+}
+//# sourceMappingURL=next-dynamic-access-named-export.js.map

package/transforms/next-image-experimental.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 const path_1 = require("path");
 const fs_1 = require("fs");
 function findAndReplaceProps(j, root, tagName) {
@@ -21,14 +22,12 @@ function findAndReplaceProps(j, root, tagName) {
         el.value.openingElement.name.type === 'JSXIdentifier' &&
         el.value.openingElement.name.name === tagName)
         .forEach((el) => {
-        var _a;
         let layout = 'intrinsic';
         let objectFit = null;
         let objectPosition = null;
         let styleExpProps = [];
         let sizesAttr = null;
-        const attributes = (_a = el.node.openingElement.attributes) === null || _a === void 0 ? void 0 : _a.filter((a) => {
-            var _a, _b;
+        const attributes = el.node.openingElement.attributes?.filter((a) => {
             if (a.type !== 'JSXAttribute') {
                 return true;
             }
@@ -51,11 +50,11 @@ function findAndReplaceProps(j, root, tagName) {
                 return false;
             }
             if (a.name.name === 'style') {
-                if (((_a = a.value) === null || _a === void 0 ? void 0 : _a.type) === 'JSXExpressionContainer' &&
+                if (a.value?.type === 'JSXExpressionContainer' &&
                     a.value.expression.type === 'ObjectExpression') {
                     styleExpProps = a.value.expression.properties;
                 }
-                else if (((_b = a.value) === null || _b === void 0 ? void 0 : _b.type) === 'JSXExpressionContainer' &&
+                else if (a.value?.type === 'JSXExpressionContainer' &&
                     a.value.expression.type === 'Identifier') {
                     styleExpProps = [
                         j.spreadElement(j.identifier(a.value.expression.name)),
@@ -208,9 +207,8 @@ function transformer(file, api, options) {
         source: { value: 'next/legacy/image' },
     })
         .forEach((imageImport) => {
-        var _a, _b;
-        const defaultSpecifier = (_a = imageImport.node.specifiers) === null || _a === void 0 ? void 0 : _a.find((node) => node.type === 'ImportDefaultSpecifier');
-        const tagName = (_b = defaultSpecifier === null || defaultSpecifier === void 0 ? void 0 : defaultSpecifier.local) === null || _b === void 0 ? void 0 : _b.name;
+        const defaultSpecifier = imageImport.node.specifiers?.find((node) => node.type === 'ImportDefaultSpecifier');
+        const tagName = defaultSpecifier?.local?.name;
         imageImport.node.source = j.stringLiteral('next/image');
         if (tagName) {
             findAndReplaceProps(j, root, tagName);
@@ -220,7 +218,7 @@ function transformer(file, api, options) {
     //  After: const Image = await import("next/image")
     root.find(j.AwaitExpression).forEach((awaitExp) => {
         const arg = awaitExp.value.argument;
-        if ((arg === null || arg === void 0 ? void 0 : arg.type) === 'CallExpression' && arg.callee.type === 'Import') {
+        if (arg?.type === 'CallExpression' && arg.callee.type === 'Import') {
             if (arg.arguments[0].type === 'StringLiteral' &&
                 arg.arguments[0].value === 'next/legacy/image') {
                 arg.arguments[0] = j.stringLiteral('next/image');
@@ -230,14 +228,13 @@ function transformer(file, api, options) {
     // Before: const Image = require("next/legacy/image")
     //  After: const Image = require("next/image")
     root.find(j.CallExpression).forEach((requireExp) => {
-        var _a, _b, _c, _d, _e;
-        if (((_b = (_a = requireExp === null || requireExp === void 0 ? void 0 : requireExp.value) === null || _a === void 0 ? void 0 : _a.callee) === null || _b === void 0 ? void 0 : _b.type) === 'Identifier' &&
+        if (requireExp?.value?.callee?.type === 'Identifier' &&
             requireExp.value.callee.name === 'require') {
             let firstArg = requireExp.value.arguments[0];
             if (firstArg &&
                 firstArg.type === 'StringLiteral' &&
                 firstArg.value === 'next/legacy/image') {
-                const tagName = (_e = (_d = (_c = requireExp === null || requireExp === void 0 ? void 0 : requireExp.parentPath) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.name;
+                const tagName = requireExp?.parentPath?.value?.id?.name;
                 if (tagName) {
                     requireExp.value.arguments[0] = j.stringLiteral('next/image');
                     findAndReplaceProps(j, root, tagName);
@@ -248,5 +245,4 @@ function transformer(file, api, options) {
     // TODO: do the same transforms for dynamic imports
     return root.toSource(options);
 }
-exports.default = transformer;
 //# sourceMappingURL=next-image-experimental.js.map

package/transforms/next-image-to-legacy-image.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 function transformer(file, api, options) {
     const j = api.jscodeshift.withParser('tsx');
     const root = j(file.source);
@@ -16,7 +17,7 @@ function transformer(file, api, options) {
     //  After: const Image = await import("next/legacy/image")
     root.find(j.AwaitExpression).forEach((awaitExp) => {
         const arg = awaitExp.value.argument;
-        if ((arg === null || arg === void 0 ? void 0 : arg.type) === 'CallExpression' && arg.callee.type === 'Import') {
+        if (arg?.type === 'CallExpression' && arg.callee.type === 'Import') {
             if (arg.arguments[0].type === 'StringLiteral' &&
                 arg.arguments[0].value === 'next/image') {
                 arg.arguments[0] = j.stringLiteral('next/legacy/image');
@@ -36,7 +37,7 @@ function transformer(file, api, options) {
     //  After: const Image = await import("next/image")
     root.find(j.AwaitExpression).forEach((awaitExp) => {
         const arg = awaitExp.value.argument;
-        if ((arg === null || arg === void 0 ? void 0 : arg.type) === 'CallExpression' && arg.callee.type === 'Import') {
+        if (arg?.type === 'CallExpression' && arg.callee.type === 'Import') {
             if (arg.arguments[0].type === 'StringLiteral' &&
                 arg.arguments[0].value === 'next/future/image') {
                 arg.arguments[0] = j.stringLiteral('next/image');
@@ -46,8 +47,7 @@ function transformer(file, api, options) {
     // Before: const Image = require("next/image")
     //  After: const Image = require("next/legacy/image")
     root.find(j.CallExpression).forEach((requireExp) => {
-        var _a, _b;
-        if (((_b = (_a = requireExp === null || requireExp === void 0 ? void 0 : requireExp.value) === null || _a === void 0 ? void 0 : _a.callee) === null || _b === void 0 ? void 0 : _b.type) === 'Identifier' &&
+        if (requireExp?.value?.callee?.type === 'Identifier' &&
             requireExp.value.callee.name === 'require') {
             let firstArg = requireExp.value.arguments[0];
             if (firstArg &&
@@ -60,8 +60,7 @@ function transformer(file, api, options) {
     // Before: const Image = require("next/future/image")
     //  After: const Image = require("next/image")
     root.find(j.CallExpression).forEach((requireExp) => {
-        var _a, _b;
-        if (((_b = (_a = requireExp === null || requireExp === void 0 ? void 0 : requireExp.value) === null || _a === void 0 ? void 0 : _a.callee) === null || _b === void 0 ? void 0 : _b.type) === 'Identifier' &&
+        if (requireExp?.value?.callee?.type === 'Identifier' &&
             requireExp.value.callee.name === 'require') {
             let firstArg = requireExp.value.arguments[0];
             if (firstArg &&
@@ -75,5 +74,4 @@ function transformer(file, api, options) {
     // https://www.codeshiftcommunity.com/docs/import-manipulation/#replacerename-an-import-declaration
     return root.toSource(options);
 }
-exports.default = transformer;
 //# sourceMappingURL=next-image-to-legacy-image.js.map

package/transforms/next-og-import.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 const importToChange = 'ImageResponse';
 function transformer(file, api) {
     const j = api.jscodeshift;
@@ -31,5 +32,4 @@ function transformer(file, api) {
         .toSource();
     return file.source;
 }
-exports.default = transformer;
 //# sourceMappingURL=next-og-import.js.map