@nx/react 20.3.2 → 20.4.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/migrations.json +9 -0
  2. package/package.json +8 -7
  3. package/src/generators/application/application.js +4 -1
  4. package/src/generators/application/lib/install-common-dependencies.d.ts +1 -1
  5. package/src/generators/application/lib/install-common-dependencies.js +6 -3
  6. package/src/generators/application/schema.json +1 -1
  7. package/src/generators/init/init.d.ts +1 -1
  8. package/src/generators/init/init.js +8 -6
  9. package/src/generators/library/library.js +2 -0
  10. package/src/utils/version-utils.d.ts +14 -0
  11. package/src/utils/version-utils.js +56 -0
  12. package/src/utils/versions.d.ts +14 -7
  13. package/src/utils/versions.js +16 -8
package/migrations.json CHANGED
@@ -197,6 +197,15 @@
197
197
  "alwaysAddToPackageJson": false
198
198
  }
199
199
  }
200
+ },
201
+ "20.3.0": {
202
+ "version": "20.3.0-beta.0",
203
+ "packages": {
204
+ "@testing-library/react": {
205
+ "version": "16.1.0",
206
+ "alwaysAddToPackageJson": false
207
+ }
208
+ }
200
209
  }
201
210
  }
202
211
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nx/react",
3
- "version": "20.3.2",
3
+ "version": "20.4.0-beta.1",
4
4
  "private": false,
5
5
  "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, Vitest, Playwright, 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.",
6
6
  "repository": {
@@ -38,13 +38,14 @@
38
38
  "minimatch": "9.0.3",
39
39
  "picocolors": "^1.1.0",
40
40
  "tslib": "^2.3.0",
41
- "@nx/devkit": "20.3.2",
42
- "@nx/js": "20.3.2",
43
- "@nx/eslint": "20.3.2",
44
- "@nx/web": "20.3.2",
45
- "@nx/module-federation": "20.3.2",
41
+ "@nx/devkit": "20.4.0-beta.1",
42
+ "@nx/js": "20.4.0-beta.1",
43
+ "@nx/eslint": "20.4.0-beta.1",
44
+ "@nx/web": "20.4.0-beta.1",
45
+ "@nx/module-federation": "20.4.0-beta.1",
46
46
  "express": "^4.19.2",
47
- "http-proxy-middleware": "^3.0.3"
47
+ "http-proxy-middleware": "^3.0.3",
48
+ "semver": "^7.6.3"
48
49
  },
49
50
  "publishConfig": {
50
51
  "access": "public"
package/src/generators/application/application.js CHANGED
@@ -25,6 +25,7 @@ const add_webpack_1 = require("./lib/bundlers/add-webpack");
25
25
  const add_rspack_1 = require("./lib/bundlers/add-rspack");
26
26
  const add_rsbuild_1 = require("./lib/bundlers/add-rsbuild");
27
27
  const add_vite_1 = require("./lib/bundlers/add-vite");
28
+ const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
28
29
  async function applicationGenerator(tree, schema) {
29
30
  return await applicationGeneratorInternal(tree, {
30
31
  addPlugin: false,
@@ -39,6 +40,7 @@ async function applicationGeneratorInternal(tree, schema) {
39
40
  skipFormat: true,
40
41
  addTsPlugin: schema.useTsSolution,
41
42
  formatter: schema.formatter,
43
+ platform: 'web',
42
44
  });
43
45
  tasks.push(jsInitTask);
44
46
  const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
@@ -108,7 +110,7 @@ async function applicationGeneratorInternal(tree, schema) {
108
110
  }
109
111
  // Handle tsconfig.spec.json for jest or vitest
110
112
  (0, update_jest_config_1.updateSpecConfig)(tree, options);
111
- const stylePreprocessorTask = (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
113
+ const stylePreprocessorTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
112
114
  tasks.push(stylePreprocessorTask);
113
115
  const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(tree, options);
114
116
  tasks.push(styledTask);
@@ -130,6 +132,7 @@ async function applicationGeneratorInternal(tree, schema) {
130
132
  if (options.isUsingTsSolutionConfig) {
131
133
  (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
132
134
  }
135
+ (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
133
136
  if (!options.skipFormat) {
134
137
  await (0, devkit_1.formatFiles)(tree);
135
138
  }
package/src/generators/application/lib/install-common-dependencies.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { Tree } from '@nx/devkit';
2
2
  import { NormalizedSchema } from '../schema';
3
- export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;
3
+ export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;
package/src/generators/application/lib/install-common-dependencies.js CHANGED
@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.installCommonDependencies = installCommonDependencies;
4
4
  const devkit_1 = require("@nx/devkit");
5
5
  const versions_1 = require("../../../utils/versions");
6
- function installCommonDependencies(host, options) {
6
+ const version_utils_1 = require("../../../utils/version-utils");
7
+ async function installCommonDependencies(host, options) {
7
8
  if (options.skipPackageJson) {
8
9
  return () => { };
9
10
  }
11
+ const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
10
12
  const dependencies = {};
11
13
  const devDependencies = {
12
14
  '@types/node': versions_1.typesNodeVersion,
13
- '@types/react': versions_1.typesReactVersion,
14
- '@types/react-dom': versions_1.typesReactDomVersion,
15
+ '@types/react': reactDeps['@types/react'],
16
+ '@types/react-dom': reactDeps['@types/react-dom'],
15
17
  };
16
18
  if (options.bundler !== 'vite') {
17
19
  dependencies['tslib'] = versions_1.tsLibVersion;
@@ -41,6 +43,7 @@ function installCommonDependencies(host, options) {
41
43
  }
42
44
  if (options.unitTestRunner && options.unitTestRunner !== 'none') {
43
45
  devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
46
+ devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
44
47
  }
45
48
  return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
46
49
  }
package/src/generators/application/schema.json CHANGED
@@ -101,7 +101,7 @@
101
101
  "bundler": {
102
102
  "description": "The bundler to use.",
103
103
  "type": "string",
104
- "enum": ["vite", "webpack", "rspack", "rsbuild"],
104
+ "enum": ["vite", "rsbuild", "rspack", "webpack"],
105
105
  "x-prompt": "Which bundler do you want to use to build the application?",
106
106
  "default": "vite",
107
107
  "x-priority": "important"
package/src/generators/init/init.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { type GeneratorCallback, type Tree } from '@nx/devkit';
2
2
  import { InitSchema } from './schema';
3
- export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
3
+ export declare function reactInitGenerator(tree: Tree, schema: InitSchema): Promise<GeneratorCallback>;
4
4
  export default reactInitGenerator;
package/src/generators/init/init.js CHANGED
@@ -3,19 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.reactInitGenerator = reactInitGenerator;
4
4
  const devkit_1 = require("@nx/devkit");
5
5
  const versions_1 = require("../../utils/versions");
6
- async function reactInitGenerator(host, schema) {
6
+ const version_utils_1 = require("../../utils/version-utils");
7
+ async function reactInitGenerator(tree, schema) {
7
8
  const tasks = [];
8
9
  if (!schema.skipPackageJson) {
9
- tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));
10
- tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {
11
- react: versions_1.reactVersion,
12
- 'react-dom': versions_1.reactDomVersion,
10
+ tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(tree, ['@nx/react'], []));
11
+ const reactDeps = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(tree);
12
+ tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {
13
+ react: reactDeps.react,
14
+ 'react-dom': reactDeps['react-dom'],
13
15
  }, {
14
16
  '@nx/react': versions_1.nxVersion,
15
17
  }, undefined, schema.keepExistingVersions));
16
18
  }
17
19
  if (!schema.skipFormat) {
18
- await (0, devkit_1.formatFiles)(host);
20
+ await (0, devkit_1.formatFiles)(tree);
19
21
  }
20
22
  return (0, devkit_1.runTasksInSerial)(...tasks);
21
23
  }
package/src/generators/library/library.js CHANGED
@@ -22,6 +22,7 @@ const install_common_dependencies_1 = require("./lib/install-common-dependencies
22
22
  const set_defaults_1 = require("./lib/set-defaults");
23
23
  const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
24
24
  const determine_entry_fields_1 = require("./lib/determine-entry-fields");
25
+ const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
25
26
  async function libraryGenerator(host, schema) {
26
27
  return await libraryGeneratorInternal(host, {
27
28
  addPlugin: false,
@@ -209,6 +210,7 @@ async function libraryGeneratorInternal(host, schema) {
209
210
  if (options.isUsingTsSolutionConfig) {
210
211
  (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
211
212
  }
213
+ (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
212
214
  if (!options.skipFormat) {
213
215
  await (0, devkit_1.formatFiles)(host);
214
216
  }
package/src/utils/version-utils.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { type Tree } from '@nx/devkit';
2
+ type ReactDependenciesVersions = {
3
+ react: string;
4
+ 'react-dom': string;
5
+ 'react-is': string;
6
+ '@types/react': string;
7
+ '@types/react-dom': string;
8
+ '@types/react-is': string;
9
+ };
10
+ export declare function getReactDependenciesVersionsToInstall(tree: Tree): Promise<ReactDependenciesVersions>;
11
+ export declare function isReact18(tree: Tree): Promise<boolean>;
12
+ export declare function getInstalledReactVersion(tree: Tree): string;
13
+ export declare function getInstalledReactVersionFromGraph(): Promise<string>;
14
+ export {};
package/src/utils/version-utils.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getReactDependenciesVersionsToInstall = getReactDependenciesVersionsToInstall;
4
+ exports.isReact18 = isReact18;
5
+ exports.getInstalledReactVersion = getInstalledReactVersion;
6
+ exports.getInstalledReactVersionFromGraph = getInstalledReactVersionFromGraph;
7
+ const devkit_1 = require("@nx/devkit");
8
+ const semver_1 = require("semver");
9
+ const versions_1 = require("./versions");
10
+ async function getReactDependenciesVersionsToInstall(tree) {
11
+ if (await isReact18(tree)) {
12
+ return {
13
+ react: versions_1.reactV18Version,
14
+ 'react-dom': versions_1.reactDomV18Version,
15
+ 'react-is': versions_1.reactIsV18Version,
16
+ '@types/react': versions_1.typesReactV18Version,
17
+ '@types/react-dom': versions_1.typesReactDomV18Version,
18
+ '@types/react-is': versions_1.typesReactIsV18Version,
19
+ };
20
+ }
21
+ else {
22
+ return {
23
+ react: versions_1.reactVersion,
24
+ 'react-dom': versions_1.reactDomVersion,
25
+ 'react-is': versions_1.reactIsVersion,
26
+ '@types/react': versions_1.typesReactVersion,
27
+ '@types/react-dom': versions_1.typesReactDomVersion,
28
+ '@types/react-is': versions_1.typesReactIsVersion,
29
+ };
30
+ }
31
+ }
32
+ async function isReact18(tree) {
33
+ let installedReactVersion = await getInstalledReactVersionFromGraph();
34
+ if (!installedReactVersion) {
35
+ installedReactVersion = getInstalledReactVersion(tree);
36
+ }
37
+ return (0, semver_1.major)(installedReactVersion) === 18;
38
+ }
39
+ function getInstalledReactVersion(tree) {
40
+ const pkgJson = (0, devkit_1.readJson)(tree, 'package.json');
41
+ const installedReactVersion = pkgJson.dependencies && pkgJson.dependencies['react'];
42
+ if (!installedReactVersion ||
43
+ installedReactVersion === 'latest' ||
44
+ installedReactVersion === 'next') {
45
+ return (0, semver_1.clean)(versions_1.reactVersion) ?? (0, semver_1.coerce)(versions_1.reactVersion).version;
46
+ }
47
+ return (0, semver_1.clean)(installedReactVersion) ?? (0, semver_1.coerce)(installedReactVersion).version;
48
+ }
49
+ async function getInstalledReactVersionFromGraph() {
50
+ const graph = await (0, devkit_1.createProjectGraphAsync)();
51
+ const reactDep = graph.externalNodes?.['npm:react'];
52
+ if (!reactDep) {
53
+ return undefined;
54
+ }
55
+ return (0, semver_1.clean)(reactDep.data.version) ?? (0, semver_1.coerce)(reactDep.data.version).version;
56
+ }
package/src/utils/versions.d.ts CHANGED
@@ -1,12 +1,18 @@
1
1
  export declare const nxVersion: any;
2
- export declare const reactVersion = "18.3.1";
3
- export declare const reactDomVersion = "18.3.1";
4
- export declare const reactIsVersion = "18.3.1";
2
+ export declare const reactVersion = "19.0.0";
3
+ export declare const reactV18Version = "18.3.1";
4
+ export declare const reactDomVersion = "19.0.0";
5
+ export declare const reactDomV18Version = "18.3.1";
6
+ export declare const reactIsVersion = "19.0.0";
7
+ export declare const reactIsV18Version = "18.3.1";
5
8
  export declare const swcLoaderVersion = "0.1.15";
6
9
  export declare const babelLoaderVersion = "^9.1.2";
7
- export declare const typesReactVersion = "18.3.1";
8
- export declare const typesReactDomVersion = "18.3.0";
9
- export declare const typesReactIsVersion = "18.3.0";
10
+ export declare const typesReactV18Version = "18.3.1";
11
+ export declare const typesReactVersion = "19.0.0";
12
+ export declare const typesReactDomV18Version = "18.3.0";
13
+ export declare const typesReactDomVersion = "19.0.0";
14
+ export declare const typesReactIsV18Version = "18.3.0";
15
+ export declare const typesReactIsVersion = "19.0.0";
10
16
  export declare const reactViteVersion = "^4.2.0";
11
17
  export declare const typesNodeVersion = "18.16.9";
12
18
  export declare const babelPresetReactVersion = "^7.14.5";
@@ -18,7 +24,8 @@ export declare const emotionReactVersion = "11.11.1";
18
24
  export declare const emotionBabelPlugin = "11.11.0";
19
25
  export declare const styledJsxVersion = "5.1.2";
20
26
  export declare const reactRouterDomVersion = "6.11.2";
21
- export declare const testingLibraryReactVersion = "15.0.6";
27
+ export declare const testingLibraryReactVersion = "16.1.0";
28
+ export declare const testingLibraryDomVersion = "10.4.0";
22
29
  export declare const reduxjsToolkitVersion = "1.9.3";
23
30
  export declare const reactReduxVersion = "8.0.5";
24
31
  export declare const eslintPluginImportVersion = "2.31.0";
package/src/utils/versions.js CHANGED
@@ -1,15 +1,22 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxVersion = void 0;
3
+ exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryDomVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactIsV18Version = exports.typesReactDomVersion = exports.typesReactDomV18Version = exports.typesReactVersion = exports.typesReactV18Version = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsV18Version = exports.reactIsVersion = exports.reactDomV18Version = exports.reactDomVersion = exports.reactV18Version = exports.reactVersion = exports.nxVersion = void 0;
4
+ exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = void 0;
4
5
  exports.nxVersion = require('../../package.json').version;
5
- exports.reactVersion = '18.3.1';
6
- exports.reactDomVersion = '18.3.1';
7
- exports.reactIsVersion = '18.3.1';
6
+ exports.reactVersion = '19.0.0';
7
+ exports.reactV18Version = '18.3.1';
8
+ exports.reactDomVersion = '19.0.0';
9
+ exports.reactDomV18Version = '18.3.1';
10
+ exports.reactIsVersion = '19.0.0';
11
+ exports.reactIsV18Version = '18.3.1';
8
12
  exports.swcLoaderVersion = '0.1.15';
9
13
  exports.babelLoaderVersion = '^9.1.2';
10
- exports.typesReactVersion = '18.3.1';
11
- exports.typesReactDomVersion = '18.3.0';
12
- exports.typesReactIsVersion = '18.3.0';
14
+ exports.typesReactV18Version = '18.3.1';
15
+ exports.typesReactVersion = '19.0.0';
16
+ exports.typesReactDomV18Version = '18.3.0';
17
+ exports.typesReactDomVersion = '19.0.0';
18
+ exports.typesReactIsV18Version = '18.3.0';
19
+ exports.typesReactIsVersion = '19.0.0';
13
20
  exports.reactViteVersion = '^4.2.0';
14
21
  exports.typesNodeVersion = '18.16.9';
15
22
  exports.babelPresetReactVersion = '^7.14.5';
@@ -22,7 +29,8 @@ exports.emotionBabelPlugin = '11.11.0';
22
29
  // WARNING: This needs to be in sync with Next.js' dependency or else there might be issues.
23
30
  exports.styledJsxVersion = '5.1.2';
24
31
  exports.reactRouterDomVersion = '6.11.2';
25
- exports.testingLibraryReactVersion = '15.0.6';
32
+ exports.testingLibraryReactVersion = '16.1.0';
33
+ exports.testingLibraryDomVersion = '10.4.0';
26
34
  exports.reduxjsToolkitVersion = '1.9.3';
27
35
  exports.reactReduxVersion = '8.0.5';
28
36
  exports.eslintPluginImportVersion = '2.31.0';