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

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

@@ -0,0 +1,221 @@
+"use strict";
+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;
+}
+function transformDynamicAPI(source, api, filePath) {
+    const j = api.jscodeshift.withParser('tsx');
+    const root = j(source);
+    let modified = false;
+    // Check if 'use' from 'react' needs to be imported
+    let needsReactUseImport = false;
+    const insertedTypes = new Set();
+    function isImportedInModule(path, functionName) {
+        const closestDef = j(path)
+            .closestScope()
+            .findVariableDeclarators(functionName);
+        return closestDef.size() === 0;
+    }
+    function processAsyncApiCalls(asyncRequestApiName, originRequestApiName) {
+        // Process each call to cookies() or headers()
+        root
+            .find(j.CallExpression, {
+            callee: {
+                type: 'Identifier',
+                name: asyncRequestApiName,
+            },
+        })
+            .forEach((path) => {
+            const isImportedTopLevel = isImportedInModule(path, asyncRequestApiName);
+            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);
+            }
+            const isAsyncFunction = closestFunction
+                .nodes()
+                .some((node) => node.async);
+            const isCallAwaited = path.parentPath?.node?.type === 'AwaitExpression';
+            const hasChainAccess = path.parentPath.value.type === 'MemberExpression' &&
+                path.parentPath.value.object === path.node;
+            // For cookies/headers API, only transform server and shared components
+            if (isAsyncFunction) {
+                if (!isCallAwaited) {
+                    // Add 'await' in front of cookies() call
+                    const expr = j.awaitExpression(
+                    // add parentheses to wrap the function call
+                    j.callExpression(j.identifier(asyncRequestApiName), []));
+                    j(path).replaceWith(wrapParathnessIfNeeded(hasChainAccess, j, expr));
+                    modified = true;
+                }
+            }
+            else {
+                // Determine if the function is an export
+                const closetScopePath = closetScope.get();
+                const isFromExport = (0, utils_1.isMatchedFunctionExported)(closetScopePath, j);
+                const closestFunctionNode = closetScope.size()
+                    ? closetScopePath.node
+                    : null;
+                // If it's exporting a function directly, exportFunctionNode is same as exportNode
+                // e.g. export default function MyComponent() {}
+                // If it's exporting a variable declaration, exportFunctionNode is the function declaration
+                // e.g. export const MyComponent = function() {}
+                let exportFunctionNode;
+                if (isFromExport) {
+                    if (closestFunctionNode &&
+                        (0, utils_1.isFunctionType)(closestFunctionNode.type)) {
+                        exportFunctionNode = closestFunctionNode;
+                    }
+                }
+                else {
+                    // Is normal async function
+                    exportFunctionNode = closestFunctionNode;
+                }
+                let canConvertToAsync = false;
+                // check if current path is under the default export function
+                if (isFromExport) {
+                    // if default export function is not async, convert it to async, and await the api call
+                    if (!isCallAwaited) {
+                        // If the scoped function is async function
+                        if ((0, utils_1.isFunctionType)(exportFunctionNode.type) &&
+                            exportFunctionNode.async === false) {
+                            canConvertToAsync = true;
+                            exportFunctionNode.async = true;
+                        }
+                        if (canConvertToAsync) {
+                            const expr = j.awaitExpression(j.callExpression(j.identifier(asyncRequestApiName), []));
+                            j(path).replaceWith(wrapParathnessIfNeeded(hasChainAccess, j, expr));
+                            (0, utils_1.turnFunctionReturnTypeToAsync)(closetScopePath.node, j);
+                            modified = true;
+                        }
+                    }
+                }
+                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 parentFunctionName = parentFunction.get().node.id?.name;
+                        const isParentFunctionHook = parentFunctionName?.startsWith('use');
+                        if (isParentFunctionHook) {
+                            j(path).replaceWith(j.callExpression(j.identifier('use'), [
+                                j.callExpression(j.identifier(asyncRequestApiName), []),
+                            ]));
+                            needsReactUseImport = true;
+                        }
+                        else {
+                            castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes);
+                        }
+                    }
+                    else {
+                        castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes);
+                    }
+                    modified = true;
+                }
+            }
+        });
+    }
+    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);
+        }
+    }
+    return modified ? root.toSource() : null;
+}
+// cast to unknown first, then the specific type
+const API_CAST_TYPE_MAP = {
+    cookies: 'UnsafeUnwrappedCookies',
+    headers: 'UnsafeUnwrappedHeaders',
+    draftMode: 'UnsafeUnwrappedDraftMode',
+};
+function castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes) {
+    const isTsFile = filePath.endsWith('.ts') || filePath.endsWith('.tsx');
+    if (isTsFile) {
+        /* Do type cast for headers, cookies, draftMode
+          import {
+            type UnsafeUnwrappedHeaders,
+            type UnsafeUnwrappedCookies,
+            type UnsafeUnwrappedDraftMode
+          } from 'next/headers'
+          
+          cookies() as unknown as UnsafeUnwrappedCookies
+          headers() as unknown as UnsafeUnwrappedHeaders
+          draftMode() as unknown as UnsafeUnwrappedDraftMode
+          
+          e.g. `<path>` is cookies(), convert it to `(<path> as unknown as UnsafeUnwrappedCookies)`
+        */
+        const targetType = API_CAST_TYPE_MAP[originRequestApiName];
+        const newCastExpression = j.tsAsExpression(j.tsAsExpression(path.node, j.tsUnknownKeyword()), j.tsTypeReference(j.identifier(targetType)));
+        // Replace the original expression with the new cast expression,
+        // also wrap () around the new cast expression.
+        j(path).replaceWith(j.parenthesizedExpression(newCastExpression));
+        // If cast types are not imported, add them to the import list
+        const importDeclaration = root.find(j.ImportDeclaration, {
+            source: { value: 'next/headers' },
+        });
+        if (importDeclaration.size() > 0) {
+            const hasImportedType = importDeclaration
+                .find(j.TSTypeAliasDeclaration, {
+                id: { name: targetType },
+            })
+                .size() > 0 ||
+                importDeclaration
+                    .find(j.ImportSpecifier, {
+                    imported: { name: targetType },
+                })
+                    .size() > 0;
+            if (!hasImportedType && !insertedTypes.has(targetType)) {
+                importDeclaration
+                    .get()
+                    .node.specifiers.push(j.importSpecifier(j.identifier(`type ${targetType}`)));
+                insertedTypes.add(targetType);
+            }
+        }
+    }
+    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 '),
+            ...(path.node.comments || []),
+        ];
+    }
+}
+function findImportMappingFromNextHeaders(root, j) {
+    const mappings = {};
+    // Find the import declaration from 'next/headers'
+    root
+        .find(j.ImportDeclaration, { source: { value: 'next/headers' } })
+        .forEach((importPath) => {
+        const importDeclaration = importPath.node;
+        // Iterate over the specifiers and build the mappings
+        importDeclaration.specifiers.forEach((specifier) => {
+            if (j.ImportSpecifier.check(specifier)) {
+                const importedName = specifier.imported.name; // Original name (e.g., cookies)
+                const localName = specifier.local.name; // Local name (e.g., myCookies or same as importedName)
+                // Add to the mappings
+                mappings[importedName] = localName;
+            }
+        });
+    });
+    return mappings;
+}
+//# sourceMappingURL=next-async-dynamic-api.js.map

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

@@ -0,0 +1,345 @@
+"use strict";
+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 transformDynamicProps(source, api, _filePath) {
+    let modified = false;
+    const j = api.jscodeshift.withParser('tsx');
+    const root = j(source);
+    // Check if 'use' from 'react' needs to be imported
+    let needsReactUseImport = false;
+    // Based on the prop names
+    // e.g. destruct `params` { slug } = params
+    // e.g. destruct `searchParams `{ search } = searchParams
+    let insertedDestructPropNames = new Set();
+    // Rename props to `prop` argument for the function
+    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;
+            }
+            const params = decl.params;
+            const propertiesMap = new Map();
+            // If there's no first param, return
+            if (params.length !== 1) {
+                return;
+            }
+            const propsIdentifier = (0, utils_1.generateUniqueIdentifier)(PAGE_PROPS, path, j);
+            const currentParam = params[0];
+            // Argument destructuring case
+            if (currentParam.type === 'ObjectPattern') {
+                // Validate if the properties are not `params` and `searchParams`,
+                // if they are, quit the transformation
+                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;
+                        }
+                    }
+                }
+                currentParam.properties.forEach((prop) => {
+                    if (
+                    // Could be `Property` or `ObjectProperty`
+                    'key' in prop &&
+                        prop.key.type === 'Identifier') {
+                        const value = 'value' in prop ? prop.value : null;
+                        propertiesMap.set(prop.key.name, value);
+                    }
+                });
+                const paramTypeAnnotation = currentParam.typeAnnotation;
+                if (paramTypeAnnotation && paramTypeAnnotation.typeAnnotation) {
+                    const typeAnnotation = paramTypeAnnotation.typeAnnotation;
+                    if (typeAnnotation.type === 'TSTypeLiteral') {
+                        const typeLiteral = typeAnnotation;
+                        // Find the type property for `params`
+                        typeLiteral.members.forEach((member) => {
+                            if (member.type === 'TSPropertySignature' &&
+                                member.key.type === 'Identifier' &&
+                                propertiesMap.has(member.key.name)) {
+                                // if it's already a Promise, don't wrap it again, return
+                                if (member.typeAnnotation &&
+                                    member.typeAnnotation.typeAnnotation &&
+                                    member.typeAnnotation.typeAnnotation.type ===
+                                        'TSTypeReference' &&
+                                    member.typeAnnotation.typeAnnotation.typeName.type ===
+                                        'Identifier' &&
+                                    member.typeAnnotation.typeAnnotation.typeName.name ===
+                                        'Promise') {
+                                    return;
+                                }
+                                // Wrap the `params` type in Promise<>
+                                if (member.typeAnnotation &&
+                                    member.typeAnnotation.typeAnnotation &&
+                                    j.TSType.check(member.typeAnnotation.typeAnnotation)) {
+                                    member.typeAnnotation.typeAnnotation = j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
+                                        // @ts-ignore
+                                        member.typeAnnotation.typeAnnotation,
+                                    ]));
+                                }
+                            }
+                        });
+                    }
+                    else if (typeAnnotation.type === 'TSTypeReference') {
+                        // If typeAnnotation is a type or interface, change the properties to Promise<type of property>
+                        // e.g. interface PageProps { params: { slug: string } } => interface PageProps { params: Promise<{ slug: string }> }
+                        const typeReference = typeAnnotation;
+                        if (typeReference.typeName.type === 'Identifier') {
+                            // Find the actual type of the type reference
+                            const foundTypes = findAllTypes(root, j, typeReference.typeName.name);
+                            // Deal with interfaces
+                            if (foundTypes.interfaces.length > 0) {
+                                const interfaceDeclaration = foundTypes.interfaces[0];
+                                if (interfaceDeclaration.type === 'TSInterfaceDeclaration' &&
+                                    interfaceDeclaration.body?.type === 'TSInterfaceBody') {
+                                    const typeBody = interfaceDeclaration.body.body;
+                                    // if it's already a Promise, don't wrap it again, return
+                                    // traverse the typeReference's properties, if any is in propNames, wrap it in Promise<> if needed
+                                    typeBody.forEach((member) => {
+                                        if (member.type === 'TSPropertySignature' &&
+                                            member.key.type === 'Identifier' &&
+                                            utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
+                                            // if it's already a Promise, don't wrap it again, return
+                                            if (member.typeAnnotation &&
+                                                member.typeAnnotation.typeAnnotation &&
+                                                member.typeAnnotation?.typeAnnotation?.typeName
+                                                    ?.name === 'Promise') {
+                                                return;
+                                            }
+                                            // Wrap the prop type in Promise<>
+                                            if (member.typeAnnotation &&
+                                                member.typeAnnotation.typeAnnotation &&
+                                                // check if member name is in propNames
+                                                utils_1.TARGET_PROP_NAMES.has(member.key.name)) {
+                                                member.typeAnnotation.typeAnnotation =
+                                                    j.tsTypeReference(j.identifier('Promise'), j.tsTypeParameterInstantiation([
+                                                        member.typeAnnotation.typeAnnotation,
+                                                    ]));
+                                            }
+                                        }
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    propsIdentifier.typeAnnotation = paramTypeAnnotation;
+                }
+                // Override the first param to `props`
+                params[0] = propsIdentifier;
+                modified = 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;
+                }
+            }
+            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';
+            // 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);
+                }
+            }
+            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 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
+                // e.g.
+                // input: Page({ params: { slug } })
+                // output: const { slug } = await props.params; rather than const props = await props.params;
+                const uid = functionName + ':' + propName;
+                if (paramsProperty?.type === 'ObjectPattern') {
+                    const objectPattern = paramsProperty;
+                    const objectPatternProperties = objectPattern.properties;
+                    // destruct the object pattern, e.g. { slug } => const { slug } = params;
+                    const destructedObjectPattern = j.variableDeclaration('const', [
+                        j.variableDeclarator(j.objectPattern(objectPatternProperties.map((prop) => {
+                            if (prop.type === 'Property' &&
+                                prop.key.type === 'Identifier') {
+                                return j.objectProperty(j.identifier(prop.key.name), j.identifier(prop.key.name));
+                            }
+                            return prop;
+                        })), propNameIdentifier),
+                    ]);
+                    if (!insertedDestructPropNames.has(uid) && functionBody) {
+                        functionBody.unshift(destructedObjectPattern);
+                        insertedDestructPropNames.add(uid);
+                    }
+                }
+                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(accessedPropId)),
+                    ]);
+                    if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
+                        functionBody.unshift(paramAssignment);
+                        insertedRenamedPropFunctionNames.add(uid);
+                    }
+                }
+                else {
+                    const isFromExport = path.value.type === 'ExportNamedDeclaration';
+                    if (isFromExport) {
+                        // If it's export function, populate the function to async
+                        if ((0, utils_1.isFunctionType)(path.value.declaration.type) &&
+                            // Make TS happy
+                            'async' in path.value.declaration) {
+                            path.value.declaration.async = true;
+                            (0, utils_1.turnFunctionReturnTypeToAsync)(path.value.declaration, 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)),
+                            ]);
+                            if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
+                                functionBody.unshift(paramAssignment);
+                                insertedRenamedPropFunctionNames.add(uid);
+                            }
+                        }
+                    }
+                    else {
+                        const paramAssignment = j.variableDeclaration('const', [
+                            j.variableDeclarator(j.identifier(propName), j.callExpression(j.identifier('use'), [accessedPropId])),
+                        ]);
+                        if (!insertedRenamedPropFunctionNames.has(uid) && functionBody) {
+                            needsReactUseImport = true;
+                            functionBody.unshift(paramAssignment);
+                            insertedRenamedPropFunctionNames.add(uid);
+                        }
+                    }
+                }
+            }
+        }
+        // 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);
+        });
+        // 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);
+        });
+        // 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`
+    processAsyncPropOfEntryFile(isClientComponent);
+    // Add import { use } from 'react' if needed and not already imported
+    if (needsReactUseImport) {
+        (0, utils_1.insertReactUseImport)(root, j);
+    }
+    return modified ? root.toSource() : null;
+}
+function findAllTypes(root, j, typeName) {
+    const types = {
+        interfaces: [],
+        typeAliases: [],
+        imports: [],
+        references: [],
+    };
+    // Step 1: Find all interface declarations with the specified name
+    root
+        .find(j.TSInterfaceDeclaration, {
+        id: {
+            type: 'Identifier',
+            name: typeName,
+        },
+    })
+        .forEach((path) => {
+        types.interfaces.push(path.node);
+    });
+    // Step 2: Find all type alias declarations with the specified name
+    root
+        .find(j.TSTypeAliasDeclaration, {
+        id: {
+            type: 'Identifier',
+            name: typeName,
+        },
+    })
+        .forEach((path) => {
+        types.typeAliases.push(path.node);
+    });
+    // Step 3: Find all imported types with the specified name
+    root
+        .find(j.ImportSpecifier, {
+        imported: {
+            type: 'Identifier',
+            name: typeName,
+        },
+    })
+        .forEach((path) => {
+        types.imports.push(path.node);
+    });
+    // Step 4: Find all references to the specified type
+    root
+        .find(j.TSTypeReference, {
+        typeName: {
+            type: 'Identifier',
+            name: typeName,
+        },
+    })
+        .forEach((path) => {
+        types.references.push(path.node);
+    });
+    return types;
+}
+//# sourceMappingURL=next-async-dynamic-prop.js.map