cleanup(misc): add known preset dependencies before generating it (#15459)

packages/workspace/src/generators/new/__snapshots__/new.spec.ts.snap

@@ -1,23 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`new --preset angular-monorepo should generate necessary npm dependencies 1`] = `
+exports[`new --preset should generate necessary npm dependencies for empty preset 1`] = `
-Object {
-  "dependencies": Object {
-    "@nrwl/angular": "0.0.1",
-  },
-  "devDependencies": Object {
-    "@nrwl/workspace": "0.0.1",
-    "nx": "0.0.1",
-  },
-  "license": "MIT",
-  "name": "my-workspace",
-  "private": true,
-  "scripts": Object {},
-  "version": "0.0.0",
-}
-`;
-
-exports[`new --preset empty should generate necessary npm dependencies 1`] = `
 Object {
   "dependencies": Object {},
   "devDependencies": Object {
@@ -32,22 +15,6 @@ Object {
 }
 `;
 
-exports[`new --preset react-monorepo should generate necessary npm dependencies 1`] = `
-Object {
-  "dependencies": Object {},
-  "devDependencies": Object {
-    "@nrwl/react": "0.0.1",
-    "@nrwl/workspace": "0.0.1",
-    "nx": "0.0.1",
-  },
-  "license": "MIT",
-  "name": "my-workspace",
-  "private": true,
-  "scripts": Object {},
-  "version": "0.0.0",
-}
-`;
-
 exports[`new should generate an empty nx.json 1`] = `
 Object {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",

packages/workspace/src/generators/new/generate-preset.ts

@@ -4,7 +4,11 @@ import {
   Tree,
 } from '@nrwl/devkit';
 import { Preset } from '../utils/presets';
-import { nxVersion } from '../../utils/versions';
+import {
+  angularCliVersion,
+  nxVersion,
+  typescriptVersion,
+} from '../../utils/versions';
 import { getNpmPackageVersion } from '../utils/get-npm-package-version';
 import { NormalizedSchema } from './new';
 import { join } from 'path';
@@ -20,10 +24,7 @@ export function addPresetDependencies(host: Tree, options: NormalizedSchema) {
   ) {
     return;
   }
-  const { dependencies, dev } = getPresetDependencies(
+  const { dependencies, dev } = getPresetDependencies(options);
-    options.preset,
-    options.presetVersion
-  );
   return addDependenciesToPackageJson(
     host,
     dependencies,
@@ -86,29 +87,51 @@ export function generatePreset(host: Tree, opts: NormalizedSchema) {
   }
 }
 
-function getPresetDependencies(preset: string, version?: string) {
+function getPresetDependencies({
+  preset,
+  presetVersion,
+  bundler,
+}: NormalizedSchema) {
   switch (preset) {
     case Preset.TS:
       return { dependencies: {}, dev: { '@nrwl/js': nxVersion } };
 
     case Preset.AngularMonorepo:
     case Preset.AngularStandalone:
-      return { dependencies: { '@nrwl/angular': nxVersion }, dev: {} };
+      return {
+        dependencies: { '@nrwl/angular': nxVersion },
+        dev: {
+          '@angular-devkit/core': angularCliVersion,
+          '@angular-devkit/schematics': angularCliVersion,
+          '@schematics/angular': angularCliVersion,
+          typescript: typescriptVersion,
+        },
+      };
 
     case Preset.Express:
       return { dependencies: {}, dev: { '@nrwl/express': nxVersion } };
 
     case Preset.Nest:
-      return { dependencies: {}, dev: { '@nrwl/nest': nxVersion } };
+      return {
+        dependencies: {},
+        dev: { '@nrwl/nest': nxVersion, typescript: typescriptVersion },
+      };
 
     case Preset.NextJs:
       return { dependencies: { '@nrwl/next': nxVersion }, dev: {} };
 
     case Preset.ReactMonorepo:
-      return { dependencies: {}, dev: { '@nrwl/react': nxVersion } };
-
     case Preset.ReactStandalone:
-      return { dependencies: {}, dev: { '@nrwl/react': nxVersion } };
+      return {
+        dependencies: {},
+        dev: {
+          '@nrwl/react': nxVersion,
+          '@nrwl/cypress': nxVersion,
+          '@nrwl/jest': bundler !== 'vite' ? nxVersion : undefined,
+          '@nrwl/vite': bundler === 'vite' ? nxVersion : undefined,
+          '@nrwl/webpack': bundler === 'webpack' ? nxVersion : undefined,
+        },
+      };
 
     case Preset.ReactNative:
       return { dependencies: {}, dev: { '@nrwl/react-native': nxVersion } };
@@ -117,7 +140,10 @@ function getPresetDependencies(preset: string, version?: string) {
       return { dependencies: {}, dev: { '@nrwl/expo': nxVersion } };
 
     case Preset.WebComponents:
-      return { dependencies: {}, dev: { '@nrwl/web': nxVersion } };
+      return {
+        dependencies: {},
+        dev: { '@nrwl/web': nxVersion, typescript: typescriptVersion },
+      };
 
     case Preset.NodeServer:
       return { dependencies: {}, dev: { '@nrwl/node': nxVersion } };
@@ -125,7 +151,9 @@ function getPresetDependencies(preset: string, version?: string) {
     default: {
       return {
         dev: {},
-        dependencies: { [preset]: version ?? getNpmPackageVersion(preset) },
+        dependencies: {
+          [preset]: presetVersion ?? getNpmPackageVersion(preset),
+        },
       };
     }
   }

packages/workspace/src/generators/new/new.spec.ts

@@ -1,8 +1,14 @@
-import { createTree } from '@nrwl/devkit/testing';
 import { readJson, Tree, writeJson } from '@nrwl/devkit';
-import { newGenerator, NormalizedSchema } from './new';
+import { createTree } from '@nrwl/devkit/testing';
 import { Linter } from '../../utils/lint';
+import {
+  angularCliVersion,
+  nxVersion,
+  prettierVersion,
+  typescriptVersion,
+} from '../../utils/versions';
 import { Preset } from '../utils/presets';
+import { newGenerator, NormalizedSchema } from './new';
 
 const defaultOptions: Omit<
   NormalizedSchema,
@@ -33,22 +39,62 @@ describe('new', () => {
   });
 
   describe('--preset', () => {
-    describe.each([
+    it('should generate necessary npm dependencies for empty preset', async () => {
-      [Preset.Empty],
+      await newGenerator(tree, {
-      [Preset.AngularMonorepo],
+        ...defaultOptions,
-      [Preset.ReactMonorepo],
+        name: 'my-workspace',
-    ])('%s', (preset) => {
+        directory: 'my-workspace',
-      it('should generate necessary npm dependencies', async () => {
+        npmScope: 'npmScope',
-        await newGenerator(tree, {
+        appName: 'app',
-          ...defaultOptions,
+        preset: Preset.Empty,
-          name: 'my-workspace',
+      });
-          directory: 'my-workspace',
-          npmScope: 'npmScope',
-          appName: 'app',
-          preset,
-        });
 
-        expect(readJson(tree, 'my-workspace/package.json')).toMatchSnapshot();
+      expect(readJson(tree, 'my-workspace/package.json')).toMatchSnapshot();
+    });
+
+    it('should generate necessary npm dependencies for react preset', async () => {
+      await newGenerator(tree, {
+        ...defaultOptions,
+        name: 'my-workspace',
+        directory: 'my-workspace',
+        npmScope: 'npmScope',
+        appName: 'app',
+        preset: Preset.ReactMonorepo,
+        bundler: 'vite',
+      });
+
+      const { devDependencies } = readJson(tree, 'my-workspace/package.json');
+      expect(devDependencies).toStrictEqual({
+        '@nrwl/react': nxVersion,
+        '@nrwl/cypress': nxVersion,
+        '@nrwl/vite': nxVersion,
+        '@nrwl/workspace': nxVersion,
+        nx: nxVersion,
+      });
+    });
+
+    it('should generate necessary npm dependencies for angular preset', async () => {
+      await newGenerator(tree, {
+        ...defaultOptions,
+        name: 'my-workspace',
+        directory: 'my-workspace',
+        npmScope: 'npmScope',
+        appName: 'app',
+        preset: Preset.AngularMonorepo,
+      });
+
+      const { devDependencies, dependencies } = readJson(
+        tree,
+        'my-workspace/package.json'
+      );
+      expect(dependencies).toStrictEqual({ '@nrwl/angular': nxVersion });
+      expect(devDependencies).toStrictEqual({
+        '@angular-devkit/core': angularCliVersion,
+        '@angular-devkit/schematics': angularCliVersion,
+        '@nrwl/workspace': nxVersion,
+        '@schematics/angular': angularCliVersion,
+        nx: nxVersion,
+        typescript: typescriptVersion,
       });
     });
   });

packages/workspace/src/utils/versions.ts

@@ -1,7 +1,11 @@
 export const nxVersion = require('../../package.json').version;
 
-export const angularCliVersion = '~15.2.0';
 export const typescriptVersion = '~4.9.5';
 export const typescriptESLintVersion = '^5.36.1';
 export const eslintVersion = '~8.15.0';
 export const eslintConfigPrettierVersion = '8.1.0';
+
+// TODO: remove when preset generation is reworked and
+// deps are not installed from workspace
+export const angularCliVersion = '~15.2.0';
+export const prettierVersion = '^2.6.2';

scripts/check-imports.js

@@ -34,6 +34,7 @@ function check() {
     'packages/workspace/src/core/file-command-line-utils.ts',
     'packages/workspace/src/generators/preset/preset.ts',
     'packages/workspace/src/generators/new/generate-preset.ts',
+    'packages/workspace/src/generators/new/new.spec.ts',
     'packages/workspace/src/generators/init/init.ts',
     'packages/workspace/src/migrations/update-8-3-0/update-8-3-0.spec.ts',
     'packages/workspace/src/migrations/update-8-3-0/update-ng-cli-8-1.ts',