@next/codemod 15.0.0-rc.0 → 15.0.0-rc.1

package/transforms/cra-to-next.js

@@ -1,17 +1,9 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const execa_1 = __importDefault(require("execa"));
@@ -32,6 +24,18 @@ const craTransformsPath = path_1.default.join('../lib/cra-to-next');
 const globalCssTransformPath = require.resolve(path_1.default.join(craTransformsPath, 'global-css-transform.js'));
 const indexTransformPath = require.resolve(path_1.default.join(craTransformsPath, 'index-to-component.js'));
 class CraTransform {
+    appDir;
+    pagesDir;
+    isVite;
+    isCra;
+    isDryRun;
+    indexPage;
+    installClient;
+    shouldLogInfo;
+    packageJsonPath;
+    shouldUseTypeScript;
+    packageJsonData;
+    jscodeShiftFlags;
     constructor(files, flags) {
         this.isDryRun = flags.dry;
         this.jscodeShiftFlags = flags;
@@ -42,7 +46,7 @@ class CraTransform {
         this.pagesDir = this.getPagesDir();
         this.installClient = this.checkForYarn() ? 'yarn' : 'npm';
         const { dependencies, devDependencies } = this.packageJsonData;
-        const hasDep = (dep) => (dependencies === null || dependencies === void 0 ? void 0 : dependencies[dep]) || (devDependencies === null || devDependencies === void 0 ? void 0 : devDependencies[dep]);
+        const hasDep = (dep) => dependencies?.[dep] || devDependencies?.[dep];
         this.isCra = hasDep('react-scripts');
         this.isVite = !this.isCra && hasDep('vite');
         if (!this.isCra && !this.isVite) {
@@ -60,45 +64,43 @@ class CraTransform {
             fatalMessage('Error: unable to find `src/index`');
         }
     }
-    transform() {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log('Transforming CRA project at:', this.appDir);
-            // convert src/index.js to a react component to render
-            // inside of Next.js instead of the custom render root
-            const indexTransformRes = yield (0, run_jscodeshift_1.default)(indexTransformPath, Object.assign(Object.assign({}, this.jscodeShiftFlags), { silent: true, verbose: 0 }), [path_1.default.join(this.appDir, 'src', this.indexPage)]);
-            if (indexTransformRes.error > 0) {
-                fatalMessage(`Error: failed to apply transforms for src/${this.indexPage}, please check for syntax errors to continue`);
-            }
-            if (index_to_component_1.indexContext.multipleRenderRoots) {
-                fatalMessage(`Error: multiple ReactDOM.render roots in src/${this.indexPage}, migrate additional render roots to use portals instead to continue.\n` +
-                    `See here for more info: https://react.dev/reference/react-dom/createPortal`);
-            }
-            if (index_to_component_1.indexContext.nestedRender) {
-                fatalMessage(`Error: nested ReactDOM.render found in src/${this.indexPage}, please migrate this to a top-level render (no wrapping functions) to continue`);
-            }
-            // comment out global style imports and collect them
-            // so that we can add them to _app
-            const globalCssRes = yield (0, run_jscodeshift_1.default)(globalCssTransformPath, Object.assign({}, this.jscodeShiftFlags), [this.appDir]);
-            if (globalCssRes.error > 0) {
-                fatalMessage(`Error: failed to apply transforms for src/${this.indexPage}, please check for syntax errors to continue`);
-            }
-            if (!this.isDryRun) {
-                yield fs_1.default.promises.mkdir(path_1.default.join(this.appDir, this.pagesDir));
-            }
-            this.logCreate(this.pagesDir);
-            if (global_css_transform_1.globalCssContext.reactSvgImports.size > 0) {
-                // This de-opts webpack 5 since svg/webpack doesn't support webpack 5 yet,
-                // so we don't support this automatically
-                fatalMessage(`Error: import {ReactComponent} from './logo.svg' is not supported, please use normal SVG imports to continue.\n` +
-                    `React SVG imports found in:\n${[
-                        ...global_css_transform_1.globalCssContext.reactSvgImports,
-                    ].join('\n')}`);
-            }
-            yield this.updatePackageJson();
-            yield this.createNextConfig();
-            yield this.updateGitIgnore();
-            yield this.createPages();
-        });
+    async transform() {
+        console.log('Transforming CRA project at:', this.appDir);
+        // convert src/index.js to a react component to render
+        // inside of Next.js instead of the custom render root
+        const indexTransformRes = await (0, run_jscodeshift_1.default)(indexTransformPath, { ...this.jscodeShiftFlags, silent: true, verbose: 0 }, [path_1.default.join(this.appDir, 'src', this.indexPage)]);
+        if (indexTransformRes.error > 0) {
+            fatalMessage(`Error: failed to apply transforms for src/${this.indexPage}, please check for syntax errors to continue`);
+        }
+        if (index_to_component_1.indexContext.multipleRenderRoots) {
+            fatalMessage(`Error: multiple ReactDOM.render roots in src/${this.indexPage}, migrate additional render roots to use portals instead to continue.\n` +
+                `See here for more info: https://react.dev/reference/react-dom/createPortal`);
+        }
+        if (index_to_component_1.indexContext.nestedRender) {
+            fatalMessage(`Error: nested ReactDOM.render found in src/${this.indexPage}, please migrate this to a top-level render (no wrapping functions) to continue`);
+        }
+        // comment out global style imports and collect them
+        // so that we can add them to _app
+        const globalCssRes = await (0, run_jscodeshift_1.default)(globalCssTransformPath, { ...this.jscodeShiftFlags }, [this.appDir]);
+        if (globalCssRes.error > 0) {
+            fatalMessage(`Error: failed to apply transforms for src/${this.indexPage}, please check for syntax errors to continue`);
+        }
+        if (!this.isDryRun) {
+            await fs_1.default.promises.mkdir(path_1.default.join(this.appDir, this.pagesDir));
+        }
+        this.logCreate(this.pagesDir);
+        if (global_css_transform_1.globalCssContext.reactSvgImports.size > 0) {
+            // This de-opts webpack 5 since svg/webpack doesn't support webpack 5 yet,
+            // so we don't support this automatically
+            fatalMessage(`Error: import {ReactComponent} from './logo.svg' is not supported, please use normal SVG imports to continue.\n` +
+                `React SVG imports found in:\n${[
+                    ...global_css_transform_1.globalCssContext.reactSvgImports,
+                ].join('\n')}`);
+        }
+        await this.updatePackageJson();
+        await this.createNextConfig();
+        await this.updateGitIgnore();
+        await this.createPages();
     }
     checkForYarn() {
         try {
@@ -129,112 +131,111 @@ class CraTransform {
             console.log(...args);
         }
     }
-    createPages() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // load public/index.html and add tags to _document
-            const htmlContent = yield fs_1.default.promises.readFile(path_1.default.join(this.appDir, `${this.isCra ? 'public/' : ''}index.html`), 'utf8');
-            const $ = cheerio_1.default.load(htmlContent);
-            // note: title tag and meta[viewport] needs to be placed in _app
-            // not _document
-            const titleTag = $('title')[0];
-            const metaViewport = $('meta[name="viewport"]')[0];
-            const headTags = $('head').children();
-            const bodyTags = $('body').children();
-            const pageExt = this.shouldUseTypeScript ? 'tsx' : 'js';
-            const appPage = path_1.default.join(this.pagesDir, `_app.${pageExt}`);
-            const documentPage = path_1.default.join(this.pagesDir, `_document.${pageExt}`);
-            const catchAllPage = path_1.default.join(this.pagesDir, `[[...slug]].${pageExt}`);
-            const gatherTextChildren = (children) => {
-                return children
-                    .map((child) => {
-                    if (child.type === 'text') {
-                        return child.data;
-                    }
-                    return '';
-                })
-                    .join('');
-            };
-            const serializeAttrs = (attrs) => {
-                const attrStr = Object.keys(attrs || {})
-                    .map((name) => {
-                    const reactName = html_to_react_attributes_1.default[name] || name;
-                    const value = attrs[name];
-                    // allow process.env access to work dynamically still
-                    if (value.match(/%([a-zA-Z0-9_]{0,})%/)) {
-                        return `${reactName}={\`${value.replace(/%([a-zA-Z0-9_]{0,})%/g, (subStr) => {
-                            return `\${process.env.${subStr.slice(1, -1)}}`;
-                        })}\`}`;
-                    }
-                    return `${reactName}="${value}"`;
-                })
-                    .join(' ');
-                return attrStr.length > 0 ? ` ${attrStr}` : '';
-            };
-            const serializedHeadTags = [];
-            const serializedBodyTags = [];
-            headTags.map((_index, element) => {
-                if (element.tagName === 'title' ||
-                    (element.tagName === 'meta' && element.attribs.name === 'viewport')) {
-                    return element;
+    async createPages() {
+        // load public/index.html and add tags to _document
+        const htmlContent = await fs_1.default.promises.readFile(path_1.default.join(this.appDir, `${this.isCra ? 'public/' : ''}index.html`), 'utf8');
+        const $ = cheerio_1.default.load(htmlContent);
+        // note: title tag and meta[viewport] needs to be placed in _app
+        // not _document
+        const titleTag = $('title')[0];
+        const metaViewport = $('meta[name="viewport"]')[0];
+        const headTags = $('head').children();
+        const bodyTags = $('body').children();
+        const pageExt = this.shouldUseTypeScript ? 'tsx' : 'js';
+        const appPage = path_1.default.join(this.pagesDir, `_app.${pageExt}`);
+        const documentPage = path_1.default.join(this.pagesDir, `_document.${pageExt}`);
+        const catchAllPage = path_1.default.join(this.pagesDir, `[[...slug]].${pageExt}`);
+        const gatherTextChildren = (children) => {
+            return children
+                .map((child) => {
+                if (child.type === 'text') {
+                    return child.data;
                 }
-                let hasChildren = element.children.length > 0;
-                let serializedAttrs = serializeAttrs(element.attribs);
-                if (element.tagName === 'script' || element.tagName === 'style') {
-                    hasChildren = false;
-                    serializedAttrs += ` dangerouslySetInnerHTML={{ __html: \`${gatherTextChildren(element.children).replace(/`/g, '\\`')}\` }}`;
+                return '';
+            })
+                .join('');
+        };
+        const serializeAttrs = (attrs) => {
+            const attrStr = Object.keys(attrs || {})
+                .map((name) => {
+                const reactName = html_to_react_attributes_1.default[name] || name;
+                const value = attrs[name];
+                // allow process.env access to work dynamically still
+                if (value.match(/%([a-zA-Z0-9_]{0,})%/)) {
+                    return `${reactName}={\`${value.replace(/%([a-zA-Z0-9_]{0,})%/g, (subStr) => {
+                        return `\${process.env.${subStr.slice(1, -1)}}`;
+                    })}\`}`;
                 }
-                serializedHeadTags.push(hasChildren
-                    ? `<${element.tagName}${serializedAttrs}>${gatherTextChildren(element.children)}</${element.tagName}>`
-                    : `<${element.tagName}${serializedAttrs} />`);
+                return `${reactName}="${value}"`;
+            })
+                .join(' ');
+            return attrStr.length > 0 ? ` ${attrStr}` : '';
+        };
+        const serializedHeadTags = [];
+        const serializedBodyTags = [];
+        headTags.map((_index, element) => {
+            if (element.tagName === 'title' ||
+                (element.tagName === 'meta' && element.attribs.name === 'viewport')) {
                 return element;
-            });
-            bodyTags.map((_index, element) => {
-                if (element.tagName === 'div' && element.attribs.id === 'root') {
-                    return element;
-                }
-                let hasChildren = element.children.length > 0;
-                let serializedAttrs = serializeAttrs(element.attribs);
-                if (element.tagName === 'script' || element.tagName === 'style') {
-                    hasChildren = false;
-                    serializedAttrs += ` dangerouslySetInnerHTML={{ __html: \`${gatherTextChildren(element.children).replace(/`/g, '\\`')}\` }}`;
-                }
-                serializedHeadTags.push(hasChildren
-                    ? `<${element.tagName}${serializedAttrs}>${gatherTextChildren(element.children)}</${element.tagName}>`
-                    : `<${element.tagName}${serializedAttrs} />`);
+            }
+            let hasChildren = element.children.length > 0;
+            let serializedAttrs = serializeAttrs(element.attribs);
+            if (element.tagName === 'script' || element.tagName === 'style') {
+                hasChildren = false;
+                serializedAttrs += ` dangerouslySetInnerHTML={{ __html: \`${gatherTextChildren(element.children).replace(/`/g, '\\`')}\` }}`;
+            }
+            serializedHeadTags.push(hasChildren
+                ? `<${element.tagName}${serializedAttrs}>${gatherTextChildren(element.children)}</${element.tagName}>`
+                : `<${element.tagName}${serializedAttrs} />`);
+            return element;
+        });
+        bodyTags.map((_index, element) => {
+            if (element.tagName === 'div' && element.attribs.id === 'root') {
                 return element;
-            });
-            if (!this.isDryRun) {
-                yield fs_1.default.promises.writeFile(path_1.default.join(this.appDir, appPage), `${global_css_transform_1.globalCssContext.cssImports.size === 0
-                    ? ''
-                    : [...global_css_transform_1.globalCssContext.cssImports]
-                        .map((file) => {
-                        if (!this.isCra) {
-                            file = file.startsWith('/') ? file.slice(1) : file;
-                        }
-                        return `import '${file.startsWith('/')
-                            ? path_1.default.relative(path_1.default.join(this.appDir, this.pagesDir), file)
-                            : file}'`;
-                    })
-                        .join('\n') + '\n'}${titleTag ? `import Head from 'next/head'` : ''}
+            }
+            let hasChildren = element.children.length > 0;
+            let serializedAttrs = serializeAttrs(element.attribs);
+            if (element.tagName === 'script' || element.tagName === 'style') {
+                hasChildren = false;
+                serializedAttrs += ` dangerouslySetInnerHTML={{ __html: \`${gatherTextChildren(element.children).replace(/`/g, '\\`')}\` }}`;
+            }
+            serializedHeadTags.push(hasChildren
+                ? `<${element.tagName}${serializedAttrs}>${gatherTextChildren(element.children)}</${element.tagName}>`
+                : `<${element.tagName}${serializedAttrs} />`);
+            return element;
+        });
+        if (!this.isDryRun) {
+            await fs_1.default.promises.writeFile(path_1.default.join(this.appDir, appPage), `${global_css_transform_1.globalCssContext.cssImports.size === 0
+                ? ''
+                : [...global_css_transform_1.globalCssContext.cssImports]
+                    .map((file) => {
+                    if (!this.isCra) {
+                        file = file.startsWith('/') ? file.slice(1) : file;
+                    }
+                    return `import '${file.startsWith('/')
+                        ? path_1.default.relative(path_1.default.join(this.appDir, this.pagesDir), file)
+                        : file}'`;
+                })
+                    .join('\n') + '\n'}${titleTag ? `import Head from 'next/head'` : ''}
 
 export default function MyApp({ Component, pageProps}) {
   ${titleTag || metaViewport
-                    ? `return (
+                ? `return (
     <>
       <Head>
         ${titleTag
-                        ? `<title${serializeAttrs(titleTag.attribs)}>${gatherTextChildren(titleTag.children)}</title>`
-                        : ''}
+                    ? `<title${serializeAttrs(titleTag.attribs)}>${gatherTextChildren(titleTag.children)}</title>`
+                    : ''}
         ${metaViewport ? `<meta${serializeAttrs(metaViewport.attribs)} />` : ''}
       </Head>
       
       <Component {...pageProps} />
     </>
   )`
-                    : 'return <Component {...pageProps} />'}
+                : 'return <Component {...pageProps} />'}
 }
 `);
-                yield fs_1.default.promises.writeFile(path_1.default.join(this.appDir, documentPage), `import Document, { Html, Head, Main, NextScript } from 'next/document'
+            await fs_1.default.promises.writeFile(path_1.default.join(this.appDir, documentPage), `import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
   render() {
@@ -256,11 +257,11 @@ class MyDocument extends Document {
 
 export default MyDocument      
 `);
-                const relativeIndexPath = path_1.default.relative(path_1.default.join(this.appDir, this.pagesDir), path_1.default.join(this.appDir, 'src', this.isCra ? '' : 'main'));
-                // TODO: should we default to ssr: true below and recommend they
-                // set it to false if they encounter errors or prefer the more safe
-                // option to prevent their first start from having any errors?
-                yield fs_1.default.promises.writeFile(path_1.default.join(this.appDir, catchAllPage), `// import NextIndexWrapper from '${relativeIndexPath}'
+            const relativeIndexPath = path_1.default.relative(path_1.default.join(this.appDir, this.pagesDir), path_1.default.join(this.appDir, 'src', this.isCra ? '' : 'main'));
+            // TODO: should we default to ssr: true below and recommend they
+            // set it to false if they encounter errors or prefer the more safe
+            // option to prevent their first start from having any errors?
+            await fs_1.default.promises.writeFile(path_1.default.join(this.appDir, catchAllPage), `// import NextIndexWrapper from '${relativeIndexPath}'
 
 // next/dynamic is used to prevent breaking incompatibilities 
 // with SSR from window.SOME_VAR usage, if this is not used
@@ -276,90 +277,95 @@ export default function Page(props) {
   return <NextIndexWrapper {...props} />
 }
 `);
-            }
-            this.logCreate(appPage);
-            this.logCreate(documentPage);
-            this.logCreate(catchAllPage);
-        });
+        }
+        this.logCreate(appPage);
+        this.logCreate(documentPage);
+        this.logCreate(catchAllPage);
     }
-    updatePackageJson() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // rename react-scripts -> next and react-scripts test -> jest
-            // add needed dependencies for webpack compatibility
-            const newDependencies = [
-                // TODO: do we want to install jest automatically?
-                {
-                    name: 'next',
-                    version: 'latest',
-                },
-            ];
-            const packageName = this.isCra ? 'react-scripts' : 'vite';
-            const packagesToRemove = {
-                [packageName]: undefined,
-            };
-            const neededDependencies = [];
-            const { devDependencies, dependencies, scripts } = this.packageJsonData;
-            for (const dep of newDependencies) {
-                if (!(devDependencies === null || devDependencies === void 0 ? void 0 : devDependencies[dep.name]) && !(dependencies === null || dependencies === void 0 ? void 0 : dependencies[dep.name])) {
-                    neededDependencies.push(`${dep.name}@${dep.version}`);
-                }
+    async updatePackageJson() {
+        // rename react-scripts -> next and react-scripts test -> jest
+        // add needed dependencies for webpack compatibility
+        const newDependencies = [
+            // TODO: do we want to install jest automatically?
+            {
+                name: 'next',
+                version: 'latest',
+            },
+        ];
+        const packageName = this.isCra ? 'react-scripts' : 'vite';
+        const packagesToRemove = {
+            [packageName]: undefined,
+        };
+        const neededDependencies = [];
+        const { devDependencies, dependencies, scripts } = this.packageJsonData;
+        for (const dep of newDependencies) {
+            if (!devDependencies?.[dep.name] && !dependencies?.[dep.name]) {
+                neededDependencies.push(`${dep.name}@${dep.version}`);
             }
-            this.logInfo(`Installing ${neededDependencies.join(' ')} with ${this.installClient}`);
-            if (!this.isDryRun) {
-                yield fs_1.default.promises.writeFile(this.packageJsonPath, JSON.stringify(Object.assign(Object.assign({}, this.packageJsonData), { scripts: Object.keys(scripts).reduce((prev, cur) => {
-                        const command = scripts[cur];
-                        prev[cur] = command;
-                        if (command === packageName) {
-                            prev[cur] = 'next dev';
-                        }
-                        if (command.includes(`${packageName} `)) {
-                            prev[cur] = command.replace(`${packageName} `, command.includes(`${packageName} test`) ? 'jest ' : 'next ');
-                        }
-                        if (cur === 'eject') {
-                            prev[cur] = undefined;
-                        }
-                        // TODO: do we want to map start -> next start instead of CRA's
-                        // default of mapping starting to dev mode?
-                        if (cur === 'start') {
-                            prev[cur] = prev[cur].replace('next start', 'next dev');
-                            prev['start-production'] = 'next start';
-                        }
-                        return prev;
-                    }, {}), dependencies: Object.assign(Object.assign({}, dependencies), packagesToRemove), devDependencies: Object.assign(Object.assign({}, devDependencies), packagesToRemove) }), null, 2));
-                yield (0, install_1.install)(this.appDir, neededDependencies, {
-                    useYarn: this.installClient === 'yarn',
-                    // do we want to detect offline as well? they might not
-                    // have next in the local cache already
-                    isOnline: true,
-                });
-            }
-        });
-    }
-    updateGitIgnore() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // add Next.js specific items to .gitignore e.g. '.next'
-            const gitignorePath = path_1.default.join(this.appDir, '.gitignore');
-            let ignoreContent = yield fs_1.default.promises.readFile(gitignorePath, 'utf8');
-            const nextIgnores = (yield fs_1.default.promises.readFile(path_1.default.join(path_1.default.dirname(globalCssTransformPath), 'gitignore'), 'utf8')).split('\n');
-            if (!this.isDryRun) {
-                for (const ignore of nextIgnores) {
-                    if (!ignoreContent.includes(ignore)) {
-                        ignoreContent += `\n${ignore}`;
+        }
+        this.logInfo(`Installing ${neededDependencies.join(' ')} with ${this.installClient}`);
+        if (!this.isDryRun) {
+            await fs_1.default.promises.writeFile(this.packageJsonPath, JSON.stringify({
+                ...this.packageJsonData,
+                scripts: Object.keys(scripts).reduce((prev, cur) => {
+                    const command = scripts[cur];
+                    prev[cur] = command;
+                    if (command === packageName) {
+                        prev[cur] = 'next dev';
+                    }
+                    if (command.includes(`${packageName} `)) {
+                        prev[cur] = command.replace(`${packageName} `, command.includes(`${packageName} test`) ? 'jest ' : 'next ');
+                    }
+                    if (cur === 'eject') {
+                        prev[cur] = undefined;
                     }
+                    // TODO: do we want to map start -> next start instead of CRA's
+                    // default of mapping starting to dev mode?
+                    if (cur === 'start') {
+                        prev[cur] = prev[cur].replace('next start', 'next dev');
+                        prev['start-production'] = 'next start';
+                    }
+                    return prev;
+                }, {}),
+                dependencies: {
+                    ...dependencies,
+                    ...packagesToRemove,
+                },
+                devDependencies: {
+                    ...devDependencies,
+                    ...packagesToRemove,
+                },
+            }, null, 2));
+            await (0, install_1.install)(this.appDir, neededDependencies, {
+                useYarn: this.installClient === 'yarn',
+                // do we want to detect offline as well? they might not
+                // have next in the local cache already
+                isOnline: true,
+            });
+        }
+    }
+    async updateGitIgnore() {
+        // add Next.js specific items to .gitignore e.g. '.next'
+        const gitignorePath = path_1.default.join(this.appDir, '.gitignore');
+        let ignoreContent = await fs_1.default.promises.readFile(gitignorePath, 'utf8');
+        const nextIgnores = (await fs_1.default.promises.readFile(path_1.default.join(path_1.default.dirname(globalCssTransformPath), 'gitignore'), 'utf8')).split('\n');
+        if (!this.isDryRun) {
+            for (const ignore of nextIgnores) {
+                if (!ignoreContent.includes(ignore)) {
+                    ignoreContent += `\n${ignore}`;
                 }
-                yield fs_1.default.promises.writeFile(gitignorePath, ignoreContent);
             }
-            this.logModify('.gitignore');
-        });
+            await fs_1.default.promises.writeFile(gitignorePath, ignoreContent);
+        }
+        this.logModify('.gitignore');
     }
-    createNextConfig() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.isDryRun) {
-                const { proxy, homepage } = this.packageJsonData;
-                const homepagePath = new URL(homepage || '/', 'http://example.com')
-                    .pathname;
-                yield fs_1.default.promises.writeFile(path_1.default.join(this.appDir, 'next.config.js'), `module.exports = {${proxy
-                    ? `
+    async createNextConfig() {
+        if (!this.isDryRun) {
+            const { proxy, homepage } = this.packageJsonData;
+            const homepagePath = new URL(homepage || '/', 'http://example.com')
+                .pathname;
+            await fs_1.default.promises.writeFile(path_1.default.join(this.appDir, 'next.config.js'), `module.exports = {${proxy
+                ? `
   async rewrites() {
     return {
       fallback: [
@@ -370,7 +376,7 @@ export default function Page(props) {
       ]
     }
   },`
-                    : ''}
+                : ''}
   env: {
     PUBLIC_URL: '${homepagePath === '/' ? '' : homepagePath || ''}'
   },
@@ -384,9 +390,8 @@ export default function Page(props) {
   }  
 }
 `);
-            }
-            this.logCreate('next.config.js');
-        });
+        }
+        this.logCreate('next.config.js');
     }
     getPagesDir() {
         // prefer src/pages as CRA uses the src dir by default
@@ -428,17 +433,14 @@ export default function Page(props) {
         return appDir;
     }
 }
-function transformer(files, flags) {
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            const craTransform = new CraTransform(files, flags);
-            yield craTransform.transform();
-            console.log(`CRA to Next.js migration complete`, `\n${feedbackMessage}`);
-        }
-        catch (err) {
-            fatalMessage(`Error: failed to complete transform`, err);
-        }
-    });
+async function transformer(files, flags) {
+    try {
+        const craTransform = new CraTransform(files, flags);
+        await craTransform.transform();
+        console.log(`CRA to Next.js migration complete`, `\n${feedbackMessage}`);
+    }
+    catch (err) {
+        fatalMessage(`Error: failed to complete transform`, err);
+    }
 }
-exports.default = transformer;
 //# sourceMappingURL=cra-to-next.js.map

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transform;
+const next_async_dynamic_prop_1 = require("./next-async-dynamic-prop");
+const next_async_dynamic_api_1 = require("./next-async-dynamic-api");
+function transform(file, api) {
+    const transforms = [next_async_dynamic_prop_1.transformDynamicProps, next_async_dynamic_api_1.transformDynamicAPI];
+    return transforms.reduce((source, transformFn) => {
+        const result = transformFn(source, api, file.path);
+        if (!result) {
+            return source;
+        }
+        return result;
+    }, file.source);
+}
+//# sourceMappingURL=index.js.map