feat(react): add --bundler=none option for React lib generator if the…

docs/generated/packages/react.json

@@ -436,9 +436,9 @@
           },
           "bundler": {
             "type": "string",
-            "description": "The bundler to use.",
-            "enum": ["vite", "rollup"],
-            "x-prompt": "Which bundler would you like to use to build the library?"
+            "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
+            "enum": ["none", "vite", "rollup"],
+            "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup."
           },
           "compiler": {
             "type": "string",
@@ -735,9 +735,7 @@
           },
           "bundler": {
             "description": "The Storybook builder to use.",
-            "enum": ["vite", "webpack"],
-            "x-prompt": "Which Storybook builder do you want to use?",
-            "default": "webpack"
+            "enum": ["vite", "webpack"]
           }
         },
         "required": ["name"],

docs/generated/packages/vite.json

@@ -68,8 +68,7 @@
           "includeLib": {
             "type": "boolean",
             "description": "Add a library build option and skip the server option.",
-            "default": false,
-            "x-prompt": "Does this project contain a buildable library?"
+            "hidden": true
           },
           "uiFramework": {
             "type": "string",

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

@@ -0,0 +1,48 @@
+import {
+  checkFilesExist,
+  newProject,
+  runCLI,
+  runCLIAsync,
+  uniq,
+} from '@nrwl/e2e/utils';
+
+describe('React Applications: additional packages', () => {
+  beforeAll(() => newProject());
+
+  it('should generate app with routing', async () => {
+    const appName = uniq('app');
+
+    runCLI(
+      `generate @nrwl/react:app ${appName} --routing --bundler=webpack --no-interactive`
+    );
+
+    runCLI(`build ${appName} --outputHashing none`);
+
+    checkFilesExist(
+      `dist/apps/${appName}/index.html`,
+      `dist/apps/${appName}/runtime.js`,
+      `dist/apps/${appName}/polyfills.js`,
+      `dist/apps/${appName}/main.js`
+    );
+  }, 250_000);
+
+  it('should be able to add a redux slice', async () => {
+    const appName = uniq('app');
+    const libName = uniq('lib');
+
+    runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
+    runCLI(`g @nrwl/react:redux lemon --project=${appName}`);
+    runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
+    runCLI(`g @nrwl/react:redux orange --project=${libName}`);
+
+    const appTestResults = await runCLIAsync(`test ${appName}`);
+    expect(appTestResults.combinedOutput).toContain(
+      'Test Suites: 2 passed, 2 total'
+    );
+
+    const libTestResults = await runCLIAsync(`test ${libName}`);
+    expect(libTestResults.combinedOutput).toContain(
+      'Test Suites: 2 passed, 2 total'
+    );
+  }, 250_000);
+});

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

@@ -67,13 +67,13 @@ describe('Build React libraries and apps', () => {
 
     // generate buildable libs
     runCLI(
-      `generate @nrwl/react:library ${parentLib} --buildable --importPath=@${proj}/${parentLib} --no-interactive `
+      `generate @nrwl/react:library ${parentLib} --bundler=rollup --importPath=@${proj}/${parentLib} --no-interactive `
     );
     runCLI(
-      `generate @nrwl/react:library ${childLib} --buildable --importPath=@${proj}/${childLib} --no-interactive `
+      `generate @nrwl/react:library ${childLib} --bundler=rollup --importPath=@${proj}/${childLib} --no-interactive `
     );
     runCLI(
-      `generate @nrwl/react:library ${childLib2} --buildable --importPath=@${proj}/${childLib2} --no-interactive `
+      `generate @nrwl/react:library ${childLib2} --bundler=rollup --importPath=@${proj}/${childLib2} --no-interactive `
     );
 
     createDep(parentLib, [childLib, childLib2]);
@@ -237,7 +237,7 @@ export async function h() { return 'c'; }
       const libName = uniq('lib');
 
       runCLI(
-        `generate @nrwl/react:lib ${libName} --buildable --importPath=@${proj}/${libName} --no-interactive`
+        `generate @nrwl/react:lib ${libName} --bundler=rollup --importPath=@${proj}/${libName} --no-interactive`
       );
 
       const mainPath = `libs/${libName}/src/lib/${libName}.tsx`;
@@ -261,24 +261,37 @@ describe('Build React applications and libraries with Vite', () => {
   });
 
   it('should support bundling with Vite', async () => {
-    const libName = uniq('lib');
+    const viteLib = uniq('vitelib');
 
     runCLI(
-      `generate @nrwl/react:lib ${libName} --bundler=vite --no-interactive`
+      `generate @nrwl/react:lib ${viteLib} --bundler=vite --no-interactive`
     );
 
     const packageJson = readJson('package.json');
     // Vite does not need these libraries to work.
     expect(packageJson.dependencies['core-js']).toBeUndefined();
     expect(packageJson.dependencies['tslib']).toBeUndefined();
 
-    await runCLIAsync(`build ${libName}`);
+    await runCLIAsync(`build ${viteLib}`);
 
     checkFilesExist(
-      `dist/libs/${libName}/package.json`,
-      `dist/libs/${libName}/index.d.ts`,
-      `dist/libs/${libName}/index.js`,
-      `dist/libs/${libName}/index.mjs`
+      `dist/libs/${viteLib}/package.json`,
+      `dist/libs/${viteLib}/index.d.ts`,
+      `dist/libs/${viteLib}/index.js`,
+      `dist/libs/${viteLib}/index.mjs`
     );
-  });
+
+    // Convert non-buildable lib to buildable one
+    const nonBuildableLib = uniq('nonbuildablelib');
+    runCLI(`generate @nrwl/react:lib ${nonBuildableLib} --no-interactive`);
+    runCLI(
+      `generate @nrwl/vite:configuration ${nonBuildableLib} --uiFramework=react --no-interactive`
+    );
+    await runCLIAsync(`build ${nonBuildableLib}`);
+    checkFilesExist(
+      `dist/libs/${nonBuildableLib}/index.d.ts`,
+      `dist/libs/${nonBuildableLib}/index.js`,
+      `dist/libs/${nonBuildableLib}/index.mjs`
+    );
+  }, 300_000);
 });

e2e/react/src/react.test.ts

@@ -74,34 +74,6 @@ describe('React Applications', () => {
     });
   }, 500000);
 
-  it('should generate app with legacy-ie support', async () => {
-    const appName = uniq('app');
-
-    runCLI(
-      `generate @nrwl/react:app ${appName} --style=css --bundler=webpack --no-interactive`
-    );
-
-    // changing browser support of this application
-    updateFile(`apps/${appName}/.browserslistrc`, `IE 11`);
-
-    await testGeneratedApp(appName, {
-      checkStyles: false,
-      checkLinter: false,
-      checkE2E: false,
-    });
-
-    const filesToCheck = [
-      `dist/apps/${appName}/polyfills.es5.js`,
-      `dist/apps/${appName}/main.es5.js`,
-    ];
-
-    checkFilesExist(...filesToCheck);
-
-    expect(readFile(`dist/apps/${appName}/index.html`)).toContain(
-      '<script src="main.js" type="module"></script><script src="main.es5.js" nomodule defer></script>'
-    );
-  }, 250_000);
-
   it('should be able to use JS and JSX', async () => {
     const appName = uniq('app');
     const libName = uniq('lib');
@@ -222,47 +194,6 @@ describe('React Applications: --style option', () => {
   });
 });
 
-describe('React Applications: additional packages', () => {
-  beforeAll(() => newProject());
-
-  it('should generate app with routing', async () => {
-    const appName = uniq('app');
-
-    runCLI(
-      `generate @nrwl/react:app ${appName} --routing --bundler=webpack --no-interactive`
-    );
-
-    runCLI(`build ${appName} --outputHashing none`);
-
-    checkFilesExist(
-      `dist/apps/${appName}/index.html`,
-      `dist/apps/${appName}/runtime.js`,
-      `dist/apps/${appName}/polyfills.js`,
-      `dist/apps/${appName}/main.js`
-    );
-  }, 250_000);
-
-  it('should be able to add a redux slice', async () => {
-    const appName = uniq('app');
-    const libName = uniq('lib');
-
-    runCLI(`g @nrwl/react:app ${appName} --bundler=webpack --no-interactive`);
-    runCLI(`g @nrwl/react:redux lemon --project=${appName}`);
-    runCLI(`g @nrwl/react:lib ${libName} --no-interactive`);
-    runCLI(`g @nrwl/react:redux orange --project=${libName}`);
-
-    const appTestResults = await runCLIAsync(`test ${appName}`);
-    expect(appTestResults.combinedOutput).toContain(
-      'Test Suites: 2 passed, 2 total'
-    );
-
-    const libTestResults = await runCLIAsync(`test ${libName}`);
-    expect(libTestResults.combinedOutput).toContain(
-      'Test Suites: 2 passed, 2 total'
-    );
-  }, 250_000);
-});
-
 describe('React Applications and Libs with PostCSS', () => {
   let proj: string;
 

packages/react/src/generators/library/lib/normalize-options.spec.ts

@@ -10,7 +10,7 @@ describe('normalizeOptions', () => {
     tree = createTreeWithEmptyWorkspace();
   });
 
-  it('should set unitTestRunner=jest and bundler=rollup by default', async () => {
+  it('should set unitTestRunner=jest and bundler=none by default', async () => {
     const options = normalizeOptions(tree, {
       name: 'test',
       style: 'css',
@@ -19,12 +19,38 @@ describe('normalizeOptions', () => {
 
     expect(options).toMatchObject({
       buildable: false,
-      bundler: 'rollup',
+      bundler: 'none',
       compiler: 'babel',
       unitTestRunner: 'jest',
     });
   });
 
+  it('should set buildable to true when bundler is not "none"', async () => {
+    let options = normalizeOptions(tree, {
+      name: 'test',
+      style: 'css',
+      linter: Linter.None,
+      bundler: 'rollup',
+    });
+
+    expect(options).toMatchObject({
+      buildable: true,
+      bundler: 'rollup',
+    });
+
+    options = normalizeOptions(tree, {
+      name: 'test',
+      style: 'css',
+      linter: Linter.None,
+      bundler: 'vite',
+    });
+
+    expect(options).toMatchObject({
+      buildable: true,
+      bundler: 'vite',
+    });
+  });
+
   it('should set unitTestRunner=vitest by default when bundler is vite', async () => {
     const options = normalizeOptions(tree, {
       name: 'test',

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

@@ -40,7 +40,7 @@ export function normalizeOptions(
   const normalized = {
     ...options,
     compiler: options.compiler ?? 'babel',
-    bundler: options.bundler ?? 'rollup',
+    bundler: options.bundler ?? 'none',
     fileName,
     routePath: `/${name}`,
     name: projectName,
@@ -53,7 +53,7 @@ export function normalizeOptions(
 
   // Libraries with a bundler or is publishable must also be buildable.
   normalized.buildable = Boolean(
-    options.bundler || options.buildable || options.publishable
+    normalized.bundler !== 'none' || options.buildable || options.publishable
   );
 
   normalized.unitTestRunner =