fix(react): clean-up after dependency removal from @nrwl/react (#13563)

docs/generated/devkit/index.md

@@ -1184,10 +1184,10 @@ When running with --dryRun, the function will throw when dependencies are missin
 #### Parameters
 
 | Name                      | Type                              | Description                                                        |
-| :------------------------ | :-------------------------------- | :------------------------------------- |
+| :------------------------ | :-------------------------------- | :----------------------------------------------------------------- |
 | `tree`                    | [`Tree`](../../devkit/index#tree) | the file system tree                                               |
 | `pkg`                     | `string`                          | the package to check (e.g. @nrwl/jest)                             |
-| `requiredVersion`         | `string`                          | the version to check                   |
+| `requiredVersion`         | `string`                          | the version or semver range to check (e.g. ~1.0.0, >=1.0.0 <2.0.0) |
 | `options`                 | `Object`                          |                                                                    |
 | `options.dev?`            | `boolean`                         | -                                                                  |
 | `options.throwOnMissing?` | `boolean`                         | -                                                                  |

docs/generated/packages/react.json

@@ -399,7 +399,8 @@
           "buildable": {
             "type": "boolean",
             "default": false,
-            "description": "Generate a buildable library. If a bundler is set then the library is buildable by default."
+            "description": "Generate a buildable library that uses rollup to bundle. Use 'bundler' option instead for greater control (none, vite, rollup).",
+            "x-deprecated": true
           },
           "importPath": {
             "type": "string",
@@ -438,13 +439,14 @@
             "type": "string",
             "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
             "enum": ["none", "vite", "rollup"],
+            "default": "none",
             "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup."
           },
           "compiler": {
             "type": "string",
             "enum": ["babel", "swc"],
             "default": "babel",
-            "description": "Which compiler to use. Does not apply if bundler is set to Vite."
+            "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
           },
           "skipPackageJson": {
             "description": "Do not add dependencies to `package.json`.",

docs/generated/packages/webpack.json

@@ -20,7 +20,7 @@
         "properties": {
           "uiFramework": {
             "type": "string",
-            "description": "UI Framework to use for Vite.",
+            "description": "UI Framework to use for Webpack.",
             "enum": ["react", "none"],
             "x-prompt": "What UI framework plugin should Webpack use?"
           },

e2e/react/src/react-package.test.ts

@@ -178,7 +178,7 @@ export async function h() { return 'c'; }
       // Setup
       const myLib = uniq('my-lib');
       runCLI(
-        `generate @nrwl/react:library ${myLib} --publishable --importPath="@mproj/${myLib}" --no-interactive`
+        `generate @nrwl/react:library ${myLib} --bundler=rollup --publishable --importPath="@mproj/${myLib}" --no-interactive`
       );
 
       /**

e2e/react/src/react.test.ts

@@ -3,7 +3,6 @@ import {
   checkFilesExist,
   cleanupProject,
   createFile,
-  expectJestTestsToPass,
   killPorts,
   newProject,
   readFile,
@@ -96,6 +95,34 @@ describe('React Applications', () => {
     });
   }, 250_000);
 
+  it('should be able to use Vite to build and test apps', async () => {
+    const appName = uniq('app');
+    const libName = uniq('lib');
+
+    runCLI(
+      `generate @nrwl/react:app ${appName} --bundler=vite --no-interactive`
+    );
+    runCLI(
+      `generate @nrwl/react:lib ${libName} --bundler=none --no-interactive`
+    );
+
+    // Library generated with Vite
+    checkFilesExist(`libs/${libName}/vite.config.ts`);
+
+    const mainPath = `apps/${appName}/src/main.tsx`;
+    updateFile(
+      mainPath,
+      `
+        import '@${proj}/${libName}';
+        ${readFile(mainPath)}
+      `
+    );
+
+    runCLI(`build ${appName}`);
+
+    checkFilesExist(`dist/apps/${appName}/index.html`);
+  }, 250_000);
+
   async function testGeneratedApp(
     appName,
     opts: {
@@ -243,9 +270,4 @@ describe('React Applications and Libs with PostCSS', () => {
     expect(buildResults.combinedOutput).toMatch(/HELLO FROM APP/);
     expect(buildResults.combinedOutput).not.toMatch(/HELLO FROM LIB/);
   }, 250_000);
-
-  it('should run default jest tests', async () => {
-    await expectJestTestsToPass('@nrwl/react:lib');
-    await expectJestTestsToPass('@nrwl/react:app');
-  }, 200000);
 });

e2e/web/src/web-vite.test.ts

@@ -60,7 +60,7 @@ describe('Web Components Applications with bundler set as vite', () => {
 
     runCLI(`generate @nrwl/web:app ${appName} --bundler=vite --no-interactive`);
     runCLI(
-      `generate @nrwl/react:lib ${libName} --buildable --no-interactive --compiler swc`
+      `generate @nrwl/react:lib ${libName} --bundler=vite --no-interactive`
     );
 
     createFile(`dist/apps/${appName}/_should_remove.txt`);

e2e/web/src/web.test.ts

@@ -80,7 +80,7 @@ describe('Web Components Applications', () => {
       `generate @nrwl/web:app ${appName} --bundler=webpack --no-interactive --compiler swc`
     );
     runCLI(
-      `generate @nrwl/react:lib ${libName} --buildable --no-interactive --compiler swc`
+      `generate @nrwl/react:lib ${libName} --bundler=rollup --no-interactive --compiler swc`
     );
 
     createFile(`dist/apps/${appName}/_should_remove.txt`);

packages/devkit/src/utils/package-json.ts

@@ -281,7 +281,7 @@ function requiresRemovingOfPackages(
  * @typedef EnsurePackageOptions
  * @type {object}
  * @property {boolean} dev indicate if the package is a dev dependency
- * @property {throwOnMissing} boolean throws an error when the packag is missing
+ * @property {throwOnMissing} boolean throws an error when the package is missing
  */
 
 /**
@@ -297,7 +297,7 @@ function requiresRemovingOfPackages(
  *
  * @param tree the file system tree
  * @param pkg the package to check (e.g. @nrwl/jest)
- * @param requiredVersion the version to check
+ * @param requiredVersion the version or semver range to check (e.g. ~1.0.0, >=1.0.0 <2.0.0)
  * @param {EnsurePackageOptions} options
  * @returns {Promise<void>}
  */

packages/linter/src/migrations/update-13-3-0/eslint-8-updates.ts

@@ -1,13 +1,16 @@
 import {
+  ensurePackage,
   formatFiles,
   normalizePath,
   Tree,
   visitNotIgnoredFiles,
 } from '@nrwl/devkit';
 import { tsquery } from '@phenomnomnominal/tsquery';
+import { nxVersion } from '../../utils/versions';
 
 export default async function eslint8Updates(tree: Tree) {
   try {
+    await ensurePackage(tree, '@nrwl/jest/', nxVersion);
     const { addPropertyToJestConfig } = await import('@nrwl/jest');
     const existingJestConfigPath = normalizePath(
       'tools/eslint-rules/jest.config.js'

packages/nest/src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint.spec.ts

@@ -1,3 +1,4 @@
+import * as devkit from '@nrwl/devkit';
 import {
   addProjectConfiguration,
   joinPathFragments,
@@ -9,12 +10,6 @@ import {
 import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
 import { exampleRootTslintJson } from '@nrwl/linter';
 import { conversionGenerator } from './convert-tslint-to-eslint';
-import * as devkit from '@nrwl/devkit';
-
-/**
- * Don't run actual child_process implementation of installPackagesTask()
- */
-// jest.mock('child_process');
 
 const appProjectName = 'nest-app-1';
 const appProjectRoot = `apps/${appProjectName}`;

packages/react/package.json

@@ -34,6 +34,7 @@
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/linter": "file:../linter",
     "@nrwl/workspace": "file:../workspace",
+    "@phenomnomnominal/tsquery": "4.1.1",
     "chalk": "4.1.0",
     "minimatch": "3.0.5",
     "semver": "7.3.4"

packages/react/src/generators/application/application.spec.ts

@@ -1021,4 +1021,21 @@ describe('app', () => {
       ).toBe(false);
     });
   });
+
+  describe('setting generator defaults', () => {
+    it('should set libraries to use vitest when app uses vite bundler', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        name: 'my-app',
+        bundler: 'vite',
+      });
+
+      const workspace = readWorkspaceConfiguration(appTree);
+      expect(workspace.generators['@nrwl/react']).toMatchObject({
+        library: {
+          unitTestRunner: 'vitest',
+        },
+      });
+    });
+  });
 });

packages/react/src/generators/application/lib/set-defaults.ts

@@ -22,25 +22,33 @@ export function setDefaults(host: Tree, options: NormalizedSchema) {
 
   const prev = { ...workspace.generators['@nrwl/react'] };
 
-  workspace.generators = {
+  const appDefaults = {
-    ...workspace.generators,
-    '@nrwl/react': {
-      ...prev,
-      application: {
     style: options.style,
     linter: options.linter,
     bundler: options.bundler,
     ...prev.application,
-      },
+  };
-      component: {
+  const componentDefaults = {
     style: options.style,
     ...prev.component,
-      },
+  };
-      library: {
+  const libDefaults = {
     style: options.style,
     linter: options.linter,
     ...prev.library,
-      },
+  };
+  // Future react libs should use same test runner as the app.
+  if (options.unitTestRunner === 'vitest') {
+    // Note: We don't set bundler: 'vite' for libraries because that means they are buildable.
+    libDefaults.unitTestRunner ??= 'vitest';
+  }
+  workspace.generators = {
+    ...workspace.generators,
+    '@nrwl/react': {
+      ...prev,
+      application: appDefaults,
+      component: componentDefaults,
+      library: libDefaults,
     },
   };
 

packages/react/src/generators/library/schema.json

@@ -125,7 +125,8 @@
     "buildable": {
       "type": "boolean",
       "default": false,
-      "description": "Generate a buildable library. If a bundler is set then the library is buildable by default."
+      "description": "Generate a buildable library that uses rollup to bundle. Use 'bundler' option instead for greater control (none, vite, rollup).",
+      "x-deprecated": true
     },
     "importPath": {
       "type": "string",
@@ -164,13 +165,14 @@
       "type": "string",
       "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
       "enum": ["none", "vite", "rollup"],
+      "default": "none",
       "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup."
     },
     "compiler": {
       "type": "string",
       "enum": ["babel", "swc"],
       "default": "babel",
-      "description": "Which compiler to use. Does not apply if bundler is set to Vite."
+      "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
     },
     "skipPackageJson": {
       "description": "Do not add dependencies to `package.json`.",

packages/react/src/migrations/update-15-3-0/install-webpack-rollup-dependencies.ts

@@ -24,7 +24,6 @@ export function installWebpackRollupDependencies(tree: Tree) {
       {
         '@babel/preset-react': '^7.14.5',
         '@pmmmwh/react-refresh-webpack-plugin': '^0.5.7',
-        '@phenomnomnominal/tsquery': '4.1.1',
         '@svgr/webpack': '^6.1.2',
         'css-loader': '^6.4.0',
         'react-refresh': '^0.10.0',

packages/webpack/src/generators/init/init.ts

@@ -16,7 +16,6 @@ import {
   swcHelpersVersion,
   swcLoaderVersion,
   tsLibVersion,
-  tsQueryVersion,
   urlLoaderVersion,
 } from '../../utils/versions';
 import { addBabelInputs } from '@nrwl/js/src/utils/add-babel-inputs';
@@ -57,7 +56,6 @@ export async function webpackInitGenerator(tree: Tree, schema: Schema) {
       {
         '@pmmmwh/react-refresh-webpack-plugin':
           reactRefreshWebpackPluginVersion,
-        '@phenomnomnominal/tsquery': tsQueryVersion,
         '@svgr/webpack': svgrWebpackVersion,
         'react-refresh': reactRefreshVersion,
         'url-loader': urlLoaderVersion,

packages/webpack/src/generators/init/schema.json

@@ -8,7 +8,7 @@
   "properties": {
     "uiFramework": {
       "type": "string",
-      "description": "UI Framework to use for Vite.",
+      "description": "UI Framework to use for Webpack.",
       "enum": ["react", "none"],
       "x-prompt": "What UI framework plugin should Webpack use?"
     },

packages/webpack/src/utils/versions.ts

@@ -6,7 +6,6 @@ export const tsLibVersion = '^2.3.0';
 
 // React apps
 export const reactRefreshWebpackPluginVersion = '^0.5.7';
-export const tsQueryVersion = '4.1.1';
 export const svgrWebpackVersion = '^6.1.2';
 export const reactRefreshVersion = '^0.10.0';
 export const urlLoaderVersion = '^4.1.1';