cleanup(misc): refactor cra-to-nx to be faster and smaller (#13038)

packages/cra-to-nx/package.json

@@ -23,8 +23,6 @@
   },
   "homepage": "https://nx.dev",
   "dependencies": {
-    "@nrwl/devkit": "file:../devkit",
-    "@nrwl/workspace": "file:../workspace",
     "fs-extra": "^10.1.0",
     "nx": "file:../nx",
     "tslib": "^2.3.0",

packages/cra-to-nx/src/index.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 import { createNxWorkspaceForReact } from './lib/cra-to-nx';
 import * as yargsParser from 'yargs-parser';
 
@@ -6,11 +7,7 @@ export * from './lib/cra-to-nx';
 
 const args = yargsParser(process.argv);
 
-createNxWorkspaceForReact(args)
+createNxWorkspaceForReact(args).catch((e) => {
-  .then(() => {
+  console.log(e);
-    process.exit(0);
+  process.exit(1);
-  })
+});
-  .catch((e) => {
-    console.log(e);
-    process.exit(1);
-  });

packages/cra-to-nx/src/lib/add-cra-commands-to-nx.ts

@@ -1,7 +1,7 @@
-import { readJsonSync, writeJsonSync } from 'fs-extra';
+import { readJsonFile, writeJsonFile } from 'nx/src/utils/fileutils';
 
 export function addCRAcracoScriptsToPackageJson(appName: string) {
-  const packageJson = readJsonSync(`apps/${appName}/package.json`);
+  const packageJson = readJsonFile(`apps/${appName}/package.json`);
   packageJson.scripts = {
     ...packageJson.scripts,
     start: 'craco start',
@@ -9,5 +9,5 @@ export function addCRAcracoScriptsToPackageJson(appName: string) {
     build: `cross-env BUILD_PATH=../../dist/apps/${appName} craco build`,
     test: 'craco test',
   };
-  writeJsonSync(`apps/${appName}/package.json`, packageJson, { spaces: 2 });
+  writeJsonFile(`apps/${appName}/package.json`, packageJson);
 }

packages/cra-to-nx/src/lib/clean-up-files.ts

@@ -1,15 +1,11 @@
 import { removeSync } from 'fs-extra';
-import * as fs from 'fs';
+import { readJsonFile, writeJsonFile } from 'nx/src/utils/fileutils';
 
 export function cleanUpFiles(appName: string) {
   // Delete targets from project since we delegate to npm scripts.
-  const data = fs.readFileSync(`apps/${appName}/project.json`);
+  const json = readJsonFile(`apps/${appName}/project.json`);
-  const json = JSON.parse(data.toString());
   delete json.targets;
-  fs.writeFileSync(
+  writeJsonFile(`apps/${appName}/project.json`, json);
-    `apps/${appName}/project.json`,
-    JSON.stringify(json, null, 2)
-  );
 
   removeSync('temp-workspace');
 }

packages/cra-to-nx/src/lib/cra-to-nx.ts

@@ -1,15 +1,13 @@
-#!/usr/bin/env node
-import { fileExists } from '@nrwl/workspace/src/utilities/fileutils';
 import { execSync } from 'child_process';
+import { copySync, moveSync, removeSync, readdirSync } from 'fs-extra';
+
+import { fileExists, readJsonFile } from 'nx/src/utils/fileutils';
+import { output } from 'nx/src/utils/output';
 import {
-  copySync,
+  detectPackageManager,
-  existsSync,
+  getPackageManagerCommand,
-  moveSync,
+  PackageManagerCommands,
-  readJsonSync,
+} from 'nx/src/utils/package-manager';
-  removeSync,
-  readdirSync,
-} from 'fs-extra';
-import { output } from '@nrwl/devkit';
 
 import { addCRAcracoScriptsToPackageJson } from './add-cra-commands-to-nx';
 import { checkForUncommittedChanges } from './check-for-uncommitted-changes';
@@ -19,31 +17,15 @@ import { setupTsConfig } from './tsconfig-setup';
 import { writeCracoConfig } from './write-craco-config';
 import { cleanUpFiles } from './clean-up-files';
 
-let packageManager: string;
+function addDependency(pmc: PackageManagerCommands, dep: string) {
-function checkPackageManager() {
-  packageManager = existsSync('yarn.lock')
-    ? 'yarn'
-    : existsSync('pnpm-lock.yaml')
-    ? 'pnpm'
-    : 'npm';
-}
-
-function addDependency(dep: string, dev?: boolean) {
   output.log({ title: `📦 Adding dependency: ${dep}` });
-  if (packageManager === 'yarn') {
+  execSync(`${pmc.addDev} ${dep}`, { stdio: [0, 1, 2] });
-    execSync(`yarn add ${dev ? '-D ' : ''}${dep}`, { stdio: [0, 1, 2] });
-  } else if (packageManager === 'pnpm') {
-    execSync(`pnpm i ${dev ? '--save-dev ' : ''}${dep}`, { stdio: [0, 1, 2] });
-  } else {
-    execSync(`npm i --force ${dev ? '--save-dev ' : ''}${dep}`, {
-      stdio: [0, 1, 2],
-    });
-  }
 }
 
 export async function createNxWorkspaceForReact(options: Record<string, any>) {
   checkForUncommittedChanges();
-  checkPackageManager();
+  const packageManager = detectPackageManager();
+  const pmc = getPackageManagerCommand(packageManager);
 
   output.log({ title: '🐳 Nx initialization' });
 
@@ -54,7 +36,7 @@ export async function createNxWorkspaceForReact(options: Record<string, any>) {
   }
 
   const reactAppName = readNameFromPackageJson();
-  const packageJson = readJsonSync('package.json');
+  const packageJson = readJsonFile('package.json');
   const deps = {
     ...packageJson.dependencies,
     ...packageJson.devDependencies,
@@ -159,17 +141,15 @@ export async function createNxWorkspaceForReact(options: Record<string, any>) {
     title: '🧶 Adding npm packages to your new Nx workspace to support CRA',
   });
 
-  addDependency('react-scripts', true);
+  addDependency(pmc, 'react-scripts');
-  addDependency('@testing-library/jest-dom', true);
+  addDependency(pmc, '@testing-library/jest-dom');
-  addDependency('eslint-config-react-app', true);
+  addDependency(pmc, 'eslint-config-react-app');
-  addDependency('@craco/craco', true);
+  addDependency(pmc, '@craco/craco');
-  addDependency('web-vitals', true);
+  addDependency(pmc, 'web-vitals');
-  addDependency('jest-watch-typeahead', true); // Only for ts apps?
+  addDependency(pmc, 'jest-watch-typeahead'); // Only for ts apps?
-  addDependency('cross-env', true);
+  addDependency(pmc, 'cross-env');
 
-  output.log({
+  output.log({ title: '🎉 Done!' });
-    title: '🎉 Done!',
-  });
   output.note({
     title: 'First time using Nx? Check out this interactive Nx tutorial.',
     bodyLines: [

packages/cra-to-nx/src/lib/read-name-from-package-json.ts

@@ -1,11 +1,9 @@
-import { fileExists } from '@nrwl/workspace/src/utilities/fileutils';
+import { fileExists, readJsonFile } from 'nx/src/utils/fileutils';
-import * as fs from 'fs';
 
 export function readNameFromPackageJson(): string {
   let appName = 'webapp';
   if (fileExists('package.json')) {
-    const data = fs.readFileSync('package.json');
+    const json = readJsonFile('package.json');
-    const json = JSON.parse(data.toString());
     if (
       json['name'] &&
       json['name'].length &&

packages/cra-to-nx/src/lib/setup-e2e-project.ts

@@ -1,9 +1,12 @@
-import { fileExists } from '@nrwl/workspace/src/utilities/fileutils';
+import {
-import * as fs from 'fs';
+  fileExists,
+  readJsonFile,
+  writeJsonFile,
+} from 'nx/src/utils/fileutils';
+import { writeFileSync } from 'fs';
 
 export function setupE2eProject(appName: string) {
-  const data = fs.readFileSync(`apps/${appName}-e2e/project.json`);
+  const json = readJsonFile(`apps/${appName}-e2e/project.json`);
-  const json = JSON.parse(data.toString());
   json.targets.e2e = {
     executor: 'nx:run-commands',
     options: {
@@ -25,10 +28,7 @@ export function setupE2eProject(appName: string) {
       readyWhen: 'can now view',
     },
   };
-  fs.writeFileSync(
+  writeJsonFile(`apps/${appName}-e2e/project.json`, json);
-    `apps/${appName}-e2e/project.json`,
-    JSON.stringify(json, null, 2)
-  );
 
   if (fileExists(`apps/${appName}-e2e/src/integration/app.spec.ts`)) {
     const integrationE2eTest = `
@@ -38,7 +38,7 @@ export function setupE2eProject(appName: string) {
           cy.get('body').should('exist');
         });
       });`;
-    fs.writeFileSync(
+    writeFileSync(
       `apps/${appName}-e2e/src/integration/app.spec.ts`,
       integrationE2eTest
     );

packages/cra-to-nx/src/lib/tsconfig-setup.ts

@@ -1,5 +1,8 @@
-import { fileExists } from '@nrwl/workspace/src/utilities/fileutils';
+import {
-import * as fs from 'fs';
+  fileExists,
+  readJsonFile,
+  writeJsonFile,
+} from 'nx/src/utils/fileutils';
 
 const defaultTsConfig = {
   extends: '../../tsconfig.base.json',
@@ -57,8 +60,7 @@ const defaultTsConfigSpec = {
 
 export function setupTsConfig(appName: string) {
   if (fileExists(`apps/${appName}/tsconfig.json`)) {
-    const data = fs.readFileSync(`apps/${appName}/tsconfig.json`);
+    const json = readJsonFile(`apps/${appName}/tsconfig.json`);
-    const json = JSON.parse(data.toString());
     json.extends = '../../tsconfig.base.json';
     if (json.compilerOptions) {
       json.compilerOptions.jsx = 'react';
@@ -70,44 +72,24 @@ export function setupTsConfig(appName: string) {
         allowSyntheticDefaultImports: true,
       };
     }
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.json`, json);
-      `apps/${appName}/tsconfig.json`,
-      JSON.stringify(json, null, 2)
-    );
   } else {
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.json`, defaultTsConfig);
-      `apps/${appName}/tsconfig.json`,
-      JSON.stringify(defaultTsConfig, null, 2)
-    );
   }
 
   if (fileExists(`apps/${appName}/tsconfig.app.json`)) {
-    const data = fs.readFileSync(`apps/${appName}/tsconfig.app.json`);
+    const json = readJsonFile(`apps/${appName}/tsconfig.app.json`);
-    const json = JSON.parse(data.toString());
     json.extends = './tsconfig.json';
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.app.json`, json);
-      `apps/${appName}/tsconfig.app.json`,
-      JSON.stringify(json, null, 2)
-    );
   } else {
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.app.json`, defaultTsConfigApp);
-      `apps/${appName}/tsconfig.app.json`,
-      JSON.stringify(defaultTsConfigApp, null, 2)
-    );
   }
 
   if (fileExists(`apps/${appName}/tsconfig.spec.json`)) {
-    const data = fs.readFileSync(`apps/${appName}/tsconfig.spec.json`);
+    const json = readJsonFile(`apps/${appName}/tsconfig.spec.json`);
-    const json = JSON.parse(data.toString());
     json.extends = './tsconfig.json';
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.spec.json`, json);
-      `apps/${appName}/tsconfig.spec.json`,
-      JSON.stringify(json, null, 2)
-    );
   } else {
-    fs.writeFileSync(
+    writeJsonFile(`apps/${appName}/tsconfig.spec.json`, defaultTsConfigSpec);
-      `apps/${appName}/tsconfig.spec.json`,
-      JSON.stringify(defaultTsConfigSpec, null, 2)
-    );
   }
 }

packages/cra-to-nx/src/lib/write-craco-config.ts

@@ -1,4 +1,4 @@
-import * as fs from 'fs';
+import { writeFileSync } from 'fs';
 
 export function writeCracoConfig(appName: string, isCRA5: boolean) {
   const configOverride = `
@@ -57,5 +57,5 @@ export function writeCracoConfig(appName: string, isCRA5: boolean) {
     },
   };
   `;
-  fs.writeFileSync(`apps/${appName}/craco.config.js`, configOverride);
+  writeFileSync(`apps/${appName}/craco.config.js`, configOverride);
 }

packages/cra-to-nx/tsconfig.lib.json

@@ -3,8 +3,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "outDir": "../../dist/out-tsc",
-    "declaration": true,
+    "declaration": false,
-    "types": ["node"]
+    "types": ["node"],
+    "sourceMap": false
   },
   "exclude": ["**/*.spec.ts", "jest.config.ts"],
   "include": ["**/*.ts"]