fix(core): reserve package.json for nx init react

e2e/nx-init/src/nx-init-react.test.ts

@@ -40,6 +40,8 @@ describe('nx init (for React)', () => {
  expect(packageJson.devDependencies['@nx/jest']).toBeDefined();
  expect(packageJson.devDependencies['@nx/vite']).toBeUndefined();
  expect(packageJson.devDependencies['@nx/webpack']).toBeDefined();
+ expect(packageJson.dependencies['redux']).toBeDefined();
+ expect(packageJson.name).toEqual(appName);
 
  runCLI(`build ${appName}`, {
  env: {
@@ -149,6 +151,8 @@ describe('nx init (for React)', () => {
 
  const packageJson = readJson('package.json');
  expect(packageJson.devDependencies['@nx/jest']).toBeUndefined();
+ expect(packageJson.dependencies['redux']).toBeDefined();
+ expect(packageJson.name).toEqual(appName);
 
  const viteConfig = readFile(`vite.config.js`);
  expect(viteConfig).toContain('port: 4200'); // default port
@@ -186,6 +190,7 @@ function createReactApp(appName: string) {
  'react-dom': '^18.2.0',
  'react-scripts': '5.0.1',
  'web-vitals': '2.1.4',
+ redux: '^3.6.0',
  },
  scripts: {
  start: 'react-scripts start',

packages/nx/src/nx-init/react/index.ts

@@ -2,13 +2,14 @@ import { execSync } from 'child_process';
 import { copySync, moveSync, readdirSync, removeSync } from 'fs-extra';
 import { join } from 'path';
 import { InitArgs } from '../../command-line/init';
-import { fileExists, readJsonFile } from '../../utils/fileutils';
+import { fileExists, readJsonFile, writeJsonFile } from '../../utils/fileutils';
 import { output } from '../../utils/output';
 import {
  detectPackageManager,
  getPackageManagerCommand,
  PackageManagerCommands,
 } from '../../utils/package-manager';
+import { PackageJson } from '../../utils/package-json';
 import { askAboutNxCloud, printFinalMessage } from '../utils';
 import { checkForCustomWebpackSetup } from './check-for-custom-webpack-setup';
 import { checkForUncommittedChanges } from './check-for-uncommitted-changes';
@@ -76,7 +77,7 @@ async function normalizeOptions(options: Options): Promise<NormalizedOptions> {
  const appIsJs = !fileExists(`tsconfig.json`);
 
  const reactAppName = readNameFromPackageJson();
- const packageJson = readJsonFile('package.json');
+ const packageJson = readJsonFile(join(process.cwd(), 'package.json'));
  const deps = {
  ...packageJson.dependencies,
  ...packageJson.devDependencies,
@@ -105,6 +106,13 @@ async function normalizeOptions(options: Options): Promise<NormalizedOptions> {
  };
 }
 
+/**
+ * - Create a temp workspace
+ * - Move all files to temp workspace
+ * - Add bundler to temp workspace
+ * - Move files back to root
+ * - Clean up unused files
+ */
 async function reorgnizeWorkspaceStructure(options: NormalizedOptions) {
  createTempWorkspace(options);
 
@@ -162,6 +170,8 @@ async function reorgnizeWorkspaceStructure(options: NormalizedOptions) {
 }
 
 function createTempWorkspace(options: NormalizedOptions) {
+ removeSync('temp-workspace');
+
  execSync(
  `npx ${
  options.npxYesFlagNeeded ? '-y' : ''
@@ -187,12 +197,60 @@ function createTempWorkspace(options: NormalizedOptions) {
  removeSync('node_modules');
 }
 
+function copyPackageJsonDepsFromTempWorkspace() {
+ const repoRoot = process.cwd();
+ let rootPackageJson = readJsonFile(join(repoRoot, 'package.json'));
+ const tempWorkspacePackageJson = readJsonFile(
+ join(repoRoot, 'temp-workspace', 'package.json')
+ );
+
+ rootPackageJson = overridePackageDeps(
+ 'dependencies',
+ rootPackageJson,
+ tempWorkspacePackageJson
+ );
+ rootPackageJson = overridePackageDeps(
+ 'devDependencies',
+ rootPackageJson,
+ tempWorkspacePackageJson
+ );
+ rootPackageJson.scripts = {}; // remove existing scripts
+ writeJsonFile(join(repoRoot, 'package.json'), rootPackageJson);
+ writeJsonFile(
+ join(repoRoot, 'temp-workspace', 'package.json'),
+ rootPackageJson
+ );
+}
+
+function overridePackageDeps(
+ depConfigName: 'dependencies' | 'devDependencies',
+ base: PackageJson,
+ override: PackageJson
+): PackageJson {
+ if (!base[depConfigName]) {
+ base[depConfigName] = override[depConfigName];
+ return base;
+ }
+ const deps = override[depConfigName];
+ Object.keys(deps).forEach((dep) => {
+ if (base.dependencies?.[dep]) {
+ delete base.dependencies[dep];
+ }
+ if (base.devDependencies?.[dep]) {
+ delete base.devDependencies[dep];
+ }
+ base[depConfigName][dep] = deps[dep];
+ });
+ return base;
+}
+
 function moveFilesToTempWorkspace(options: NormalizedOptions) {
  output.log({ title: '🚚 Moving your React app in your new Nx workspace' });
 
+ copyPackageJsonDepsFromTempWorkspace();
  const requiredCraFiles = [
  'project.json',
- options.isStandalone ? null : 'package.json',
+ 'package.json',
  'src',
  'public',
  options.appIsJs ? null : 'tsconfig.json',
@@ -292,7 +350,7 @@ function cleanUpUnusedFilesAndAddConfigFiles(options: NormalizedOptions) {
  setupE2eProject(options.reactAppName);
  } else {
  removeSync(join('apps', `${options.reactAppName}-e2e`));
- execSync(`${options.pmc.rm} @nx/cypress eslint-plugin-cypress`);
+ execSync(`${options.pmc.rm} cypress @nx/cypress eslint-plugin-cypress`);
  }
 
  if (options.isStandalone) {