feat(react): add Vite bundler option for buildable libraries

docs/generated/packages/react.json

@@ -48,6 +48,11 @@
             "type": "boolean",
             "default": false
           },
+          "skipBabelConfig": {
+            "description": "Do not generate a root babel.config.json (if babel is not needed).",
+            "type": "boolean",
+            "default": false
+          },
           "js": {
             "type": "boolean",
             "default": false,
@@ -243,7 +248,7 @@
           "bundler": {
             "description": "The bundler to use.",
             "enum": ["vite", "webpack"],
-            "x-prompt": "Which bundler do you want to use?",
+            "x-prompt": "Which bundler do you want to use to build the application?",
             "default": "webpack"
           }
         },
@@ -418,11 +423,17 @@
             "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
             "type": "boolean"
           },
+          "bundler": {
+            "type": "string",
+            "description": "The bundler to use.",
+            "enum": ["vite", "rollup"],
+            "default": "rollup"
+          },
           "compiler": {
             "type": "string",
             "enum": ["babel", "swc"],
             "default": "babel",
-            "description": "Which compiler to use."
+            "description": "Which compiler to use. Does not apply if bundler is set to Vite."
           },
           "skipPackageJson": {
             "description": "Do not add dependencies to `package.json`.",

docs/generated/packages/vite.json

@@ -60,6 +60,12 @@
             "x-dropdown": "project",
             "x-prompt": "What is the name of the project to set up a webpack for?"
           },
+          "includeLib": {
+            "type": "boolean",
+            "description": "Add a library build option.",
+            "default": false,
+            "x-prompt": "Does this project contain a buildable library?"
+          },
           "uiFramework": {
             "type": "string",
             "description": "UI Framework to use for Vite.",

docs/generated/packages/web.json

@@ -53,6 +53,11 @@
             "description": "Do not add dependencies to `package.json`.",
             "type": "boolean",
             "default": false
+          },
+          "skipBabelConfig": {
+            "description": "Do not generate a root babel.config.json (if babel is not needed).",
+            "type": "boolean",
+            "default": false
           }
         },
         "required": [],

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

@@ -252,4 +252,20 @@ export async function h() { return 'c'; }
       }).toThrow();
     }, 250000);
   });
+
+  it('should support bundling with Vite', async () => {
+    const libName = uniq('lib');
+
+    runCLI(
+      `generate @nrwl/react:lib ${libName} --buildable --bundler=vite --no-interactive`
+    );
+
+    const result = await runCLIAsync(`build ${libName}`);
+
+    expect(result).toMatch(/Vite builder finished/);
+    checkFilesExist(
+      `dist/libs/${libName}/index.js`,
+      `dist/libs/${libName}/index.mjs`
+    );
+  });
 });

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

@@ -19,7 +19,6 @@ describe('app', () => {
     compiler: 'babel',
     e2eTestRunner: 'cypress',
     skipFormat: false,
-    unitTestRunner: 'jest',
     name: 'myApp',
     linter: Linter.EsLint,
     style: 'css',

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

@@ -77,6 +77,7 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
   const initTask = await reactInitGenerator(host, {
     ...options,
     skipFormat: true,
+    skipBabelConfig: options.bundler === 'vite',
   });
 
   tasks.push(initTask);
@@ -108,9 +109,11 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
 
   const cypressTask = await addCypress(host, options);
   tasks.push(cypressTask);
-  const jestTask = await addJest(host, options);
-  tasks.push(jestTask);
-  updateSpecConfig(host, options);
+  if (options.unitTestRunner === 'jest') {
+    const jestTask = await addJest(host, options);
+    tasks.push(jestTask);
+    updateSpecConfig(host, options);
+  }
   const styledTask = addStyledModuleDependencies(host, options.styledModule);
   tasks.push(styledTask);
   const routingTask = addRouting(host, options);

packages/react/src/generators/application/lib/normalize-options.ts

@@ -40,20 +40,7 @@ export function normalizeOptions(
 
   assertValidStyle(options.style);
 
-  if (options.bundler === 'vite') {
-    options.unitTestRunner = 'vitest';
-  }
-
-  options.routing = options.routing ?? false;
-  options.strict = options.strict ?? true;
-  options.classComponent = options.classComponent ?? false;
-  options.unitTestRunner = options.unitTestRunner ?? 'jest';
-  options.e2eTestRunner = options.e2eTestRunner ?? 'cypress';
-  options.compiler = options.compiler ?? 'babel';
-  options.bundler = options.bundler ?? 'webpack';
-  options.devServerPort ??= findFreePort(host);
-
-  return {
+  const normalized = {
     ...options,
     name: names(options.name).fileName,
     projectName: appProjectName,
@@ -63,5 +50,18 @@ export function normalizeOptions(
     fileName,
     styledModule,
     hasStyles: options.style !== 'none',
-  };
+  } as NormalizedSchema;
+
+  normalized.routing = normalized.routing ?? false;
+  normalized.strict = normalized.strict ?? true;
+  normalized.classComponent = normalized.classComponent ?? false;
+  normalized.compiler = normalized.compiler ?? 'babel';
+  normalized.bundler = normalized.bundler ?? 'webpack';
+  normalized.unitTestRunner =
+    normalized.unitTestRunner ??
+    (normalized.bundler === 'vite' ? 'vitest' : 'jest');
+  normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress';
+  normalized.devServerPort ??= findFreePort(host);
+
+  return normalized;
 }

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

@@ -30,6 +30,7 @@ export function setDefaults(host: Tree, options: NormalizedSchema) {
         style: options.style,
         unitTestRunner: options.unitTestRunner,
         linter: options.linter,
+        bundler: options.bundler,
         ...prev.application,
       },
       component: {
@@ -40,6 +41,7 @@ export function setDefaults(host: Tree, options: NormalizedSchema) {
         style: options.style,
         unitTestRunner: options.unitTestRunner,
         linter: options.linter,
+        bundler: options.bundler,
         ...prev.library,
       },
     },

packages/react/src/generators/application/schema.d.ts

@@ -7,7 +7,7 @@ export interface Schema {
   skipFormat: boolean;
   directory?: string;
   tags?: string;
-  unitTestRunner: 'jest' | 'vitest' | 'none';
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
   inSourceTests?: boolean;
   /**
    * @deprecated
@@ -41,4 +41,5 @@ export interface NormalizedSchema extends Schema {
   fileName: string;
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
 }

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

@@ -184,7 +184,7 @@
     "bundler": {
       "description": "The bundler to use.",
       "enum": ["vite", "webpack"],
-      "x-prompt": "Which bundler do you want to use?",
+      "x-prompt": "Which bundler do you want to use to build the application?",
       "default": "webpack"
     }
   },

packages/react/src/generators/init/schema.d.ts

@@ -1,6 +1,7 @@
 export interface InitSchema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   e2eTestRunner?: 'cypress' | 'none';
+  skipBabelConfig?: boolean;
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   js?: boolean;

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

@@ -28,6 +28,11 @@
       "type": "boolean",
       "default": false
     },
+    "skipBabelConfig": {
+      "description": "Do not generate a root babel.config.json (if babel is not needed).",
+      "type": "boolean",
+      "default": false
+    },
     "js": {
       "type": "boolean",
       "default": false,

packages/react/src/generators/library/files/common/package.json__tmpl__

@@ -0,0 +1,12 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

packages/react/src/generators/library/files/vite/index.html__tmpl__

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %> Demo</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/demo.tsx"></script>
+  </body>
+</html>

packages/react/src/generators/library/files/vite/src/demo.tsx__tmpl__

@@ -0,0 +1,19 @@
+/*
+ * This a a demo file that can be helpful when developing components by serving and interacting with them in the browser.
+ */
+<% if (component) { %>
+import * as ReactDOM from 'react-dom/client';
+import { <%= className %> } from './index';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <<%= className %> />
+);
+<% } else { %>
+import * as ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <h1><%= className %> Demo</h1>
+);
+<% } %>

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

@@ -225,7 +225,11 @@ describe('lib', () => {
       `);
     });
     it('should update jest.config.ts for babel', async () => {
-      await libraryGenerator(appTree, { ...defaultSchema, compiler: 'babel' });
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        buildable: true,
+        compiler: 'babel',
+      });
       expect(appTree.read('libs/my-lib/jest.config.ts', 'utf-8')).toContain(
         "['babel-jest', { presets: ['@nrwl/react/babel'] }]"
       );
@@ -280,6 +284,7 @@ describe('lib', () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
         directory: 'myDir',
+        buildable: true,
         compiler: 'babel',
       });
       expect(
@@ -725,6 +730,7 @@ describe('lib', () => {
     it('should install swc dependencies if needed', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
+        buildable: true,
         compiler: 'swc',
       });
       const packageJson = readJson(appTree, 'package.json');
@@ -764,6 +770,7 @@ describe('lib', () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
         style,
+        compiler: 'babel',
         name: 'myLib',
       });