@nx/react 17.3.0-beta.2 → 17.3.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.3.0-beta.2",
+  "version": "17.3.0-beta.4",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -37,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.3.0-beta.2",
-    "@nx/js": "17.3.0-beta.2",
-    "@nx/eslint": "17.3.0-beta.2",
-    "@nx/web": "17.3.0-beta.2",
-    "@nrwl/react": "17.3.0-beta.2"
+    "@nx/devkit": "17.3.0-beta.4",
+    "@nx/js": "17.3.0-beta.4",
+    "@nx/eslint": "17.3.0-beta.4",
+    "@nx/web": "17.3.0-beta.4",
+    "@nrwl/react": "17.3.0-beta.4"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/application.js

@@ -21,6 +21,7 @@ const chalk = require("chalk");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const add_e2e_1 = require("./lib/add-e2e");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const js_1 = require("@nx/js");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -58,19 +59,28 @@ async function applicationGeneratorInternal(host, schema) {
     const tasks = [];
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
+    const jsInitTask = await (0, js_1.initGenerator)(host, {
+        ...schema,
+        tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
     const initTask = await (0, init_1.default)(host, {
         ...options,
         skipFormat: true,
-        skipHelperLibs: options.bundler === 'vite',
     });
     tasks.push(initTask);
     if (options.bundler === 'webpack') {
         const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
         const webpackInitTask = await webpackInitGenerator(host, {
-            uiFramework: 'react',
+            skipPackageJson: options.skipPackageJson,
             skipFormat: true,
         });
         tasks.push(webpackInitTask);
+        if (!options.skipPackageJson) {
+            const { ensureDependencies } = await Promise.resolve().then(() => require('@nx/webpack/src/utils/ensure-dependencies'));
+            tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
+        }
     }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);

package/src/generators/application/lib/add-jest.js

@@ -4,10 +4,10 @@ exports.addJest = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 async function addJest(host, options) {
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
-    if (options.unitTestRunner !== 'jest') {
+    if (options.unitTestRunner === 'none') {
         return () => { };
     }
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     return await configurationGenerator(host, {
         ...options,
         project: options.projectName,

package/src/generators/application/lib/install-common-dependencies.js

@@ -4,7 +4,18 @@ exports.installCommonDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 function installCommonDependencies(host, options) {
-    const devDependencies = {};
+    if (options.skipPackageJson) {
+        return () => { };
+    }
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -28,6 +39,9 @@ function installCommonDependencies(host, options) {
             devDependencies['@babel/core'] = versions_1.babelCoreVersion;
         }
     }
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
     return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }
 exports.installCommonDependencies = installCommonDependencies;

package/src/generators/application/lib/set-defaults.js

@@ -14,6 +14,7 @@ function setDefaults(host, options) {
     nxJson.generators['@nx/react'] = nxJson.generators['@nx/react'] || {};
     const prev = { ...nxJson.generators['@nx/react'] };
     const appDefaults = {
+        babel: true,
         style: options.style,
         linter: options.linter,
         bundler: options.bundler,

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -5,5 +5,5 @@ import { CypressComponentConfigurationSchema } from './schema.d';
  * storybook components then use componentCypressGenerator instead.
  *
  */
-export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<() => void>;
+export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -32,9 +32,7 @@ async function cypressComponentConfigGenerator(tree, options) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return () => {
-        installTask();
-    };
+    return installTask;
 }
 exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
 exports.default = cypressComponentConfigGenerator;

package/src/generators/init/init.d.ts

@@ -1,4 +1,4 @@
-import { GeneratorCallback, Tree } from '@nx/devkit';
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import { InitSchema } from './schema';
 export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
 export default reactInitGenerator;

package/src/generators/init/init.js

@@ -2,59 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactInitGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
-function setDefault(host) {
-    const workspace = (0, devkit_1.readNxJson)(host);
-    workspace.generators = workspace.generators || {};
-    const reactGenerators = workspace.generators['@nx/react'] || {};
-    const generators = {
-        ...workspace.generators,
-        '@nx/react': {
-            ...reactGenerators,
-            application: {
-                ...reactGenerators.application,
-                babel: true,
-            },
-        },
-    };
-    (0, devkit_1.updateNxJson)(host, { ...workspace, generators });
-}
-function updateDependencies(host, schema) {
-    (0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []);
-    const dependencies = {
-        react: versions_1.reactVersion,
-        'react-dom': versions_1.reactDomVersion,
-    };
-    if (!schema.skipHelperLibs) {
-        dependencies['tslib'] = versions_1.tsLibVersion;
-    }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, {
-        '@nx/react': versions_1.nxVersion,
-        '@types/node': versions_1.typesNodeVersion,
-        '@types/react': versions_1.typesReactVersion,
-        '@types/react-dom': versions_1.typesReactDomVersion,
-        '@testing-library/react': versions_1.testingLibraryReactVersion,
-    });
-}
 async function reactInitGenerator(host, schema) {
     const tasks = [];
-    const jsInitTask = await (0, js_1.initGenerator)(host, {
-        ...schema,
-        tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
-        skipFormat: true,
-    });
-    tasks.push(jsInitTask);
-    setDefault(host);
-    if (!schema.e2eTestRunner || schema.e2eTestRunner === 'cypress') {
-        (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-        const { cypressInitGenerator } = (await Promise.resolve().then(() => require('@nx/cypress/src/generators/init/init')));
-        const cypressTask = await cypressInitGenerator(host, schema);
-        tasks.push(cypressTask);
-    }
     if (!schema.skipPackageJson) {
-        const installTask = updateDependencies(host, schema);
-        tasks.push(installTask);
+        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {
+            react: versions_1.reactVersion,
+            'react-dom': versions_1.reactDomVersion,
+        }, {
+            '@nx/react': versions_1.nxVersion,
+        }));
+    }
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }

package/src/generators/init/schema.d.ts

@@ -1,10 +1,4 @@
 export interface InitSchema {
-  unitTestRunner?: 'jest' | 'vitest' | 'none';
-  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   skipFormat?: boolean;
   skipPackageJson?: boolean;
-  skipHelperLibs?: boolean;
-  js?: boolean;
-
-  rootProject?: boolean;
 }

package/src/generators/init/schema.json

@@ -6,18 +6,6 @@
   "cli": "nx",
   "type": "object",
   "properties": {
-    "unitTestRunner": {
-      "description": "Adds the specified unit test runner.",
-      "type": "string",
-      "enum": ["jest", "none"],
-      "default": "jest"
-    },
-    "e2eTestRunner": {
-      "description": "Adds the specified E2E test runner.",
-      "type": "string",
-      "enum": ["cypress", "playwright", "none"],
-      "default": "cypress"
-    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",
@@ -27,17 +15,6 @@
       "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
       "default": false
-    },
-    "skipHelperLibs": {
-      "description": "Do not install  tslib.",
-      "type": "boolean",
-      "default": false,
-      "hidden": true
-    },
-    "js": {
-      "type": "boolean",
-      "default": false,
-      "description": "Use JavaScript instead of TypeScript"
     }
   },
   "required": []

package/src/generators/library/lib/add-linting.js

@@ -24,7 +24,7 @@ async function addLinting(host, options) {
         }
         let installTask = () => { };
         if (!options.skipPackageJson) {
-            installTask = await (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
         }
         return (0, devkit_1.runTasksInSerial)(lintTask, installTask);
     }

package/src/generators/library/lib/add-rollup-build-target.d.ts

@@ -1,3 +1,4 @@
 import { Tree } from 'nx/src/generators/tree';
+import { GeneratorCallback } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
-export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function addRollupBuildTarget(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/library/lib/add-rollup-build-target.js

@@ -5,12 +5,20 @@ const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("./maybe-js");
 const versions_1 = require("../../../utils/versions");
 async function addRollupBuildTarget(host, options) {
-    const { rollupInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
-    // These are used in `@nx/react/plugins/bundle-rollup`
-    (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
-        '@rollup/plugin-url': versions_1.rollupPluginUrlVersion,
-        '@svgr/rollup': versions_1.svgrRollupVersion,
-    });
+    const tasks = [];
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rollup', versions_1.nxVersion);
+    tasks.push(await configurationGenerator(host, {
+        ...options,
+        project: options.name,
+        skipFormat: true,
+    }));
+    if (!options.skipPackageJson) {
+        // These are used in `@nx/react/plugins/bundle-rollup`
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+            '@rollup/plugin-url': versions_1.rollupPluginUrlVersion,
+            '@svgr/rollup': versions_1.svgrRollupVersion,
+        }));
+    }
     const { targets } = (0, devkit_1.readProjectConfiguration)(host, options.name);
     const external = ['react', 'react-dom'];
     if (options.style === '@emotion/styled') {
@@ -46,6 +54,6 @@ async function addRollupBuildTarget(host, options) {
         tags: options.parsedTags,
         targets,
     });
-    return rollupInitGenerator(host, { ...options, skipFormat: true });
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.addRollupBuildTarget = addRollupBuildTarget;

package/src/generators/library/lib/install-common-dependencies.js

@@ -6,7 +6,15 @@ const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencie
 const versions_1 = require("../../../utils/versions");
 function installCommonDependencies(host, options) {
     const tasks = [];
-    const devDependencies = {};
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     // TODO(jack): Once we clean up webpack we can remove this check
@@ -20,10 +28,10 @@ function installCommonDependencies(host, options) {
                 break;
         }
     }
-    const baseInstallTask = (0, devkit_1.addDependenciesToPackageJson)(host, {
-        react: versions_1.reactVersion,
-        'react-dom': versions_1.reactDomVersion,
-    }, devDependencies);
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
+    const baseInstallTask = (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
     tasks.push(baseInstallTask);
     if (options.compiler === 'swc') {
         tasks.push((0, add_swc_dependencies_1.addSwcDependencies)(host));

package/src/generators/library/library.js

@@ -33,11 +33,14 @@ async function libraryGeneratorInternal(host, schema) {
     if (!options.component) {
         options.style = 'none';
     }
+    const jsInitTask = await (0, js_1.initGenerator)(host, {
+        ...schema,
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
     const initTask = await (0, init_1.default)(host, {
         ...options,
-        e2eTestRunner: 'none',
         skipFormat: true,
-        skipHelperLibs: options.bundler === 'vite',
     });
     tasks.push(initTask);
     (0, devkit_1.addProjectConfiguration)(host, options.name, {
@@ -161,7 +164,7 @@ async function libraryGeneratorInternal(host, schema) {
         });
     }
     if (!options.skipPackageJson) {
-        const installReactTask = await (0, install_common_dependencies_1.installCommonDependencies)(host, options);
+        const installReactTask = (0, install_common_dependencies_1.installCommonDependencies)(host, options);
         tasks.push(installReactTask);
     }
     const routeTask = (0, update_app_routes_1.updateAppRoutes)(host, options);

package/src/generators/setup-ssr/setup-ssr.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const init_1 = require("../init/init");
 const versions_1 = require("../../utils/versions");
 const ast_utils_1 = require("../../utils/ast-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
@@ -19,7 +18,6 @@ function readEntryFile(host, path) {
     };
 }
 async function setupSsrGenerator(tree, options) {
-    await (0, init_1.default)(tree, { skipFormat: true });
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const projectRoot = projectConfig.root;
     const appImportCandidates = [

package/src/generators/storybook-configuration/configuration.d.ts

@@ -2,3 +2,4 @@ import { StorybookConfigureSchema } from './schema';
 import { Tree } from '@nx/devkit';
 export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default storybookConfigurationGenerator;
+export declare function findWebpackConfig(tree: Tree, projectRoot: string): string | undefined;

package/src/generators/storybook-configuration/configuration.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storybookConfigurationGenerator = void 0;
+exports.findWebpackConfig = exports.storybookConfigurationGenerator = void 0;
 const stories_1 = require("../stories/stories");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
@@ -24,8 +24,7 @@ async function storybookConfigurationGenerator(host, schema) {
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
     let uiFramework = '@storybook/react-vite';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
-    if (projectConfig.targets['build']?.executor === '@nx/webpack:webpack' ||
-        projectConfig.targets['build']?.executor === '@nrwl/webpack:webpack' ||
+    if (findWebpackConfig(host, projectConfig.root) ||
         projectConfig.targets['build']?.executor === '@nx/rollup:rollup' ||
         projectConfig.targets['build']?.executor === '@nrwl/rollup:rollup') {
         uiFramework = '@storybook/react-webpack5';
@@ -50,3 +49,13 @@ async function storybookConfigurationGenerator(host, schema) {
 }
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
 exports.default = storybookConfigurationGenerator;
+function findWebpackConfig(tree, projectRoot) {
+    const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];
+    for (const ext of allowsExt) {
+        const webpackConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `webpack.config.${ext}`);
+        if (tree.exists(webpackConfigPath)) {
+            return webpackConfigPath;
+        }
+    }
+}
+exports.findWebpackConfig = findWebpackConfig;