@nx/react 22.0.0-beta.0 → 22.0.0-canary.20251001-e28a97a

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.
package/migrations.json CHANGED
@@ -1,23 +1,5 @@
1
1
  {
2
2
  "generators": {
3
- "update-19-6-0-turn-module-federation-dts-off": {
4
- "cli": "nx",
5
- "version": "19.6.0-beta.4",
6
- "description": "Ensure Module Federation DTS is turned off by default.",
7
- "factory": "./src/migrations/update-19-6-0/turn-off-dts-by-default"
8
- },
9
- "update-module-federation-ssr-server-file": {
10
- "cli": "nx",
11
- "version": "19.6.0-beta.4",
12
- "description": "Update the server file for Module Federation SSR port value to be the same as the 'serve' target port value.",
13
- "factory": "./src/migrations/update-19-6-0/update-ssr-server-port"
14
- },
15
- "update-19-6-1-ensure-module-federation-target-defaults": {
16
- "cli": "nx",
17
- "version": "19.6.1-beta.0",
18
- "description": "Ensure Target Defaults are set correctly for Module Federation.",
19
- "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf"
20
- },
21
3
  "update-20-2-0-update-module-federation-config-import": {
22
4
  "cli": "nx",
23
5
  "version": "20.2.0-beta.2",
@@ -47,82 +29,15 @@
47
29
  "version": "21.0.0-beta.11",
48
30
  "description": "Replaces `classProperties.loose` option with `loose`.",
49
31
  "factory": "./src/migrations/update-21-0-0/update-babel-loose"
32
+ },
33
+ "update-22-0-0-add-svgr-to-webpack-config": {
34
+ "cli": "nx",
35
+ "version": "22.0.0-beta.0",
36
+ "description": "Updates webpack configs using React to use the new withSvgr composable function instead of the svgr option in withReact or NxReactWebpackPlugin.",
37
+ "factory": "./src/migrations/update-22-0-0/add-svgr-to-webpack-config"
50
38
  }
51
39
  },
52
40
  "packageJsonUpdates": {
53
- "19.0.0": {
54
- "version": "19.0.0-beta.12",
55
- "packages": {
56
- "react": {
57
- "version": "18.3.1",
58
- "alwaysAddToPackageJson": false
59
- },
60
- "react-dom": {
61
- "version": "18.3.1",
62
- "alwaysAddToPackageJson": false
63
- },
64
- "react-is": {
65
- "version": "18.3.1",
66
- "alwaysAddToPackageJson": false
67
- },
68
- "@types/react": {
69
- "version": "18.3.1",
70
- "alwaysAddToPackageJson": false
71
- },
72
- "@types/react-dom": {
73
- "version": "18.3.0",
74
- "alwaysAddToPackageJson": false
75
- },
76
- "@types/react-is": {
77
- "version": "18.3.0",
78
- "alwaysAddToPackageJson": false
79
- },
80
- "@testing-library/react": {
81
- "version": "15.0.6",
82
- "alwaysAddToPackageJson": false
83
- }
84
- }
85
- },
86
- "19.0.3": {
87
- "version": "19.0.3-beta.0",
88
- "packages": {
89
- "tailwindcss": {
90
- "version": "3.4.3",
91
- "alwaysAddToPackageJson": false
92
- }
93
- }
94
- },
95
- "19.2.0": {
96
- "version": "19.2.0-beta.8",
97
- "packages": {
98
- "postcss": {
99
- "version": "8.4.38",
100
- "alwaysAddToPackageJson": false
101
- }
102
- }
103
- },
104
- "19.5.0-module-federation": {
105
- "version": "19.5.0-beta.0",
106
- "packages": {
107
- "@module-federation/node": {
108
- "version": "^2.3.0",
109
- "alwaysAddToPackageJson": false
110
- }
111
- }
112
- },
113
- "19.7.0": {
114
- "version": "19.7.0-beta.0",
115
- "packages": {
116
- "@module-federation/enhanced": {
117
- "version": "~0.6.0",
118
- "alwaysAddToPackageJson": false
119
- },
120
- "@module-federation/node": {
121
- "version": "~2.5.0",
122
- "alwaysAddToPackageJson": false
123
- }
124
- }
125
- },
126
41
  "20.0.0": {
127
42
  "version": "20.0.0-beta.8",
128
43
  "packages": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nx/react",
3
- "version": "22.0.0-beta.0",
3
+ "version": "22.0.0-canary.20251001-e28a97a",
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,19 +38,19 @@
38
38
  "minimatch": "9.0.3",
39
39
  "picocolors": "^1.1.0",
40
40
  "tslib": "^2.3.0",
41
- "@nx/devkit": "22.0.0-beta.0",
42
- "@nx/js": "22.0.0-beta.0",
43
- "@nx/eslint": "22.0.0-beta.0",
44
- "@nx/web": "22.0.0-beta.0",
45
- "@nx/vite": "22.0.0-beta.0",
46
- "@nx/module-federation": "22.0.0-beta.0",
47
- "@nx/rollup": "22.0.0-beta.0",
41
+ "@nx/devkit": "22.0.0-canary.20251001-e28a97a",
42
+ "@nx/js": "22.0.0-canary.20251001-e28a97a",
43
+ "@nx/eslint": "22.0.0-canary.20251001-e28a97a",
44
+ "@nx/web": "22.0.0-canary.20251001-e28a97a",
45
+ "@nx/vite": "22.0.0-canary.20251001-e28a97a",
46
+ "@nx/module-federation": "22.0.0-canary.20251001-e28a97a",
47
+ "@nx/rollup": "22.0.0-canary.20251001-e28a97a",
48
48
  "express": "^4.21.2",
49
49
  "http-proxy-middleware": "^3.0.5",
50
50
  "semver": "^7.6.3"
51
51
  },
52
52
  "devDependencies": {
53
- "nx": "22.0.0-beta.0"
53
+ "nx": "22.0.0-canary.20251001-e28a97a"
54
54
  },
55
55
  "publishConfig": {
56
56
  "access": "public"
@@ -1,6 +1,3 @@
1
1
  import { Configuration, WebpackOptionsNormalized } from 'webpack';
2
- import { SvgrOptions } from '../../with-react';
3
- export declare function applyReactConfig(options: {
4
- svgr?: boolean | SvgrOptions;
5
- }, config?: Partial<WebpackOptionsNormalized | Configuration>): void;
2
+ export declare function applyReactConfig(options?: Record<string, any>, config?: Partial<WebpackOptionsNormalized | Configuration>): void;
6
3
  //# sourceMappingURL=apply-react-config.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"apply-react-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAA;CAAE,EACzC,MAAM,GAAE,OAAO,CAAC,wBAAwB,GAAG,aAAa,CAAM,GAC7D,IAAI,CAwCN"}
1
+ {"version":3,"file":"apply-react-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,MAAM,GAAE,OAAO,CAAC,wBAAwB,GAAG,aAAa,CAAM,GAC7D,IAAI,CAUN"}
@@ -1,35 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.applyReactConfig = applyReactConfig;
4
- function applyReactConfig(options, config = {}) {
4
+ function applyReactConfig(options = {}, config = {}) {
5
5
  if (!process.env['NX_TASK_TARGET_PROJECT'])
6
6
  return;
7
7
  addHotReload(config);
8
- if (options.svgr !== false || typeof options.svgr === 'object') {
9
- removeSvgLoaderIfPresent(config);
10
- const defaultSvgrOptions = {
11
- svgo: false,
12
- titleProp: true,
13
- ref: true,
14
- };
15
- const svgrOptions = typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
16
- config.module.rules.push({
17
- test: /\.svg$/,
18
- issuer: /\.(js|ts|md)x?$/,
19
- use: [
20
- {
21
- loader: require.resolve('@svgr/webpack'),
22
- options: svgrOptions,
23
- },
24
- {
25
- loader: require.resolve('file-loader'),
26
- options: {
27
- name: '[name].[hash].[ext]',
28
- },
29
- },
30
- ],
31
- });
32
- }
33
8
  // enable webpack node api
34
9
  config.node = {
35
10
  __dirname: true,
@@ -59,13 +34,3 @@ function addHotReload(config) {
59
34
  config.plugins.push(new ReactRefreshPlugin({ overlay: false }));
60
35
  }
61
36
  }
62
- // We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
63
- // See https://github.com/nrwl/nx/issues/14383
64
- function removeSvgLoaderIfPresent(config) {
65
- const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' &&
66
- typeof rule.test !== 'undefined' &&
67
- rule.test.toString().includes('svg'));
68
- if (svgLoaderIdx === -1)
69
- return;
70
- config.module.rules.splice(svgLoaderIdx, 1);
71
- }
@@ -1,9 +1,7 @@
1
1
  import { Compiler } from 'webpack';
2
2
  export declare class NxReactWebpackPlugin {
3
3
  private options;
4
- constructor(options?: {
5
- svgr?: boolean;
6
- });
4
+ constructor(options?: Record<string, any>);
7
5
  apply(compiler: Compiler): void;
8
6
  }
9
7
  //# sourceMappingURL=nx-react-webpack-plugin.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"nx-react-webpack-plugin.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,qBAAa,oBAAoB;IACnB,OAAO,CAAC,OAAO;gBAAP,OAAO,GAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAO;IAEpD,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAGhC"}
1
+ {"version":3,"file":"nx-react-webpack-plugin.d.ts","sourceRoot":"","sources":["../../../../../packages/react/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,qBAAa,oBAAoB;IACnB,OAAO,CAAC,OAAO;gBAAP,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IAErD,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAGhC"}
@@ -1,16 +1,6 @@
1
1
  import type { Configuration } from 'webpack';
2
2
  import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
3
- export interface SvgrOptions {
4
- svgo?: boolean;
5
- titleProp?: boolean;
6
- ref?: boolean;
7
- }
8
3
  export interface WithReactOptions extends WithWebOptions {
9
- /**
10
- * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
11
- * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
12
- * */
13
- svgr?: boolean | SvgrOptions;
14
4
  }
15
5
  /**
16
6
  * @param {WithReactOptions} pluginOptions
@@ -1 +1 @@
1
- {"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../../../../packages/react/plugins/with-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7E,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AACD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;SAGK;IACL,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,aAAa,GAAE,gBAAqB,IAE1D,QAAQ,aAAa,EACrB,SAAS,yBAAyB,KACjC,aAAa,CAajB"}
1
+ {"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../../../../packages/react/plugins/with-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7E,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG;AAE3D;;;GAGG;AACH,wBAAgB,SAAS,CAAC,aAAa,GAAE,gBAAqB,IAE1D,QAAQ,aAAa,EACrB,SAAS,yBAAyB,KACjC,aAAa,CAajB"}
@@ -14,7 +14,7 @@ function withReact(pluginOptions = {}) {
14
14
  return config;
15
15
  // Apply web config for CSS, JSX, index.html handling, etc.
16
16
  config = withWeb(pluginOptions)(config, context);
17
- (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
17
+ (0, apply_react_config_1.applyReactConfig)({}, config);
18
18
  processed.add(config);
19
19
  return config;
20
20
  };
@@ -0,0 +1,3 @@
1
+ import { type Tree } from '@nx/devkit';
2
+ export default function addSvgrToWebpackConfig(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;
3
+ //# sourceMappingURL=add-svgr-to-webpack-config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"add-svgr-to-webpack-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-22-0-0/add-svgr-to-webpack-config.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EAOV,MAAM,YAAY,CAAC;AAuGpB,wBAA8B,sBAAsB,CAAC,IAAI,EAAE,IAAI,mDA+X9D"}
@@ -0,0 +1,403 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = addSvgrToWebpackConfig;
4
+ const devkit_1 = require("@nx/devkit");
5
+ const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
6
+ const tsquery_1 = require("@phenomnomnominal/tsquery");
7
+ const ts = require("typescript");
8
+ const withSvgrFunctionForWithReact = `
9
+
10
+ // SVGR support function (migrated from svgr option in withReact/NxReactWebpackPlugin)
11
+ function withSvgr(svgrOptions = {}) {
12
+ const defaultOptions = {
13
+ svgo: false,
14
+ titleProp: true,
15
+ ref: true,
16
+ };
17
+
18
+ const options = { ...defaultOptions, ...svgrOptions };
19
+
20
+ return function configure(config) {
21
+ // Remove existing SVG loader if present
22
+ const svgLoaderIdx = config.module.rules.findIndex(
23
+ (rule) =>
24
+ typeof rule === 'object' &&
25
+ typeof rule.test !== 'undefined' &&
26
+ rule.test.toString().includes('svg')
27
+ );
28
+
29
+ if (svgLoaderIdx !== -1) {
30
+ config.module.rules.splice(svgLoaderIdx, 1);
31
+ }
32
+
33
+ // Add SVGR loader
34
+ config.module.rules.push({
35
+ test: /\\.svg$/,
36
+ issuer: /\\.(js|ts|md)x?$/,
37
+ use: [
38
+ {
39
+ loader: require.resolve('@svgr/webpack'),
40
+ options,
41
+ },
42
+ {
43
+ loader: require.resolve('file-loader'),
44
+ options: {
45
+ name: '[name].[hash].[ext]',
46
+ },
47
+ },
48
+ ],
49
+ });
50
+
51
+ return config;
52
+ };
53
+ }
54
+ `;
55
+ const withSvgrFunctionForNxReactWebpackPlugin = `
56
+
57
+ // SVGR support function (migrated from svgr option in withReact/NxReactWebpackPlugin)
58
+ function withSvgr(svgrOptions = {}) {
59
+ const defaultOptions = {
60
+ svgo: false,
61
+ titleProp: true,
62
+ ref: true,
63
+ };
64
+
65
+ const options = { ...defaultOptions, ...svgrOptions };
66
+
67
+ return (config) => {
68
+ config.plugins.push({
69
+ apply: (compiler) => {
70
+ // Remove ALL existing SVG loaders
71
+ compiler.options.module.rules = compiler.options.module.rules.filter(
72
+ (rule) =>
73
+ !(
74
+ rule &&
75
+ typeof rule === 'object' &&
76
+ rule.test &&
77
+ rule.test.toString().includes('svg')
78
+ )
79
+ );
80
+
81
+ // Add SVGR loader with both default and named exports
82
+ compiler.options.module.rules.push({
83
+ test: /\.svg$/,
84
+ issuer: /\.[jt]sx?$/,
85
+ use: [
86
+ {
87
+ loader: require.resolve('@svgr/webpack'),
88
+ options,
89
+ },
90
+ {
91
+ loader: require.resolve('file-loader'),
92
+ options: {
93
+ name: '[name].[hash].[ext]',
94
+ },
95
+ },
96
+ ],
97
+ });
98
+ },
99
+ });
100
+ return config;
101
+ };
102
+ }
103
+ `;
104
+ async function addSvgrToWebpackConfig(tree) {
105
+ const projects = new Map();
106
+ // Find all React webpack projects using either withReact OR NxReactWebpackPlugin
107
+ (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, project, target) => {
108
+ if (!options.webpackConfig)
109
+ return;
110
+ const webpackConfigPath = options.webpackConfig;
111
+ if (!tree.exists(webpackConfigPath))
112
+ return;
113
+ const content = tree.read(webpackConfigPath, 'utf-8');
114
+ const ast = tsquery_1.tsquery.ast(content);
115
+ // Check if this is a withReact setup
116
+ if (content.includes('withReact')) {
117
+ const withReactCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=withReact]');
118
+ if (withReactCalls.length > 0) {
119
+ const callExpr = withReactCalls[0];
120
+ if (callExpr.arguments.length === 0)
121
+ return;
122
+ const arg = callExpr.arguments[0];
123
+ if (!ts.isObjectLiteralExpression(arg))
124
+ return;
125
+ const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
126
+ ts.isIdentifier(prop.name) &&
127
+ prop.name.text === 'svgr');
128
+ if (svgrProp) {
129
+ let svgrValue;
130
+ if (ts.isObjectLiteralExpression(svgrProp.initializer)) {
131
+ svgrValue = {};
132
+ for (const prop of svgrProp.initializer.properties) {
133
+ if (!ts.isPropertyAssignment(prop))
134
+ continue;
135
+ if (!ts.isIdentifier(prop.name))
136
+ continue;
137
+ const key = prop.name.text;
138
+ if (prop.initializer.kind === ts.SyntaxKind.TrueKeyword) {
139
+ svgrValue[key] = true;
140
+ }
141
+ else if (prop.initializer.kind === ts.SyntaxKind.FalseKeyword) {
142
+ svgrValue[key] = false;
143
+ }
144
+ }
145
+ }
146
+ else {
147
+ svgrValue =
148
+ svgrProp.initializer.kind === ts.SyntaxKind.TrueKeyword;
149
+ }
150
+ projects.set(webpackConfigPath, {
151
+ svgrOptions: svgrValue,
152
+ isWithReact: true,
153
+ });
154
+ }
155
+ }
156
+ }
157
+ // Otherwise check if this is NxReactWebpackPlugin setup
158
+ else if (content.includes('NxReactWebpackPlugin')) {
159
+ const pluginCalls = (0, tsquery_1.tsquery)(ast, 'NewExpression[expression.name=NxReactWebpackPlugin]');
160
+ if (pluginCalls.length > 0) {
161
+ const newExpr = pluginCalls[0];
162
+ if (!newExpr.arguments || newExpr.arguments.length === 0)
163
+ return;
164
+ const arg = newExpr.arguments[0];
165
+ if (!ts.isObjectLiteralExpression(arg))
166
+ return;
167
+ const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
168
+ ts.isIdentifier(prop.name) &&
169
+ prop.name.text === 'svgr');
170
+ if (svgrProp) {
171
+ let svgrValue;
172
+ if (ts.isObjectLiteralExpression(svgrProp.initializer)) {
173
+ svgrValue = {};
174
+ for (const prop of svgrProp.initializer.properties) {
175
+ if (!ts.isPropertyAssignment(prop))
176
+ continue;
177
+ if (!ts.isIdentifier(prop.name))
178
+ continue;
179
+ const key = prop.name.text;
180
+ if (prop.initializer.kind === ts.SyntaxKind.TrueKeyword) {
181
+ svgrValue[key] = true;
182
+ }
183
+ else if (prop.initializer.kind === ts.SyntaxKind.FalseKeyword) {
184
+ svgrValue[key] = false;
185
+ }
186
+ }
187
+ }
188
+ else if (svgrProp.initializer.kind === ts.SyntaxKind.TrueKeyword) {
189
+ svgrValue = true;
190
+ }
191
+ else if (svgrProp.initializer.kind === ts.SyntaxKind.FalseKeyword) {
192
+ svgrValue = false;
193
+ }
194
+ // Add to projects if svgr is explicitly set
195
+ if (svgrValue !== undefined) {
196
+ projects.set(webpackConfigPath, {
197
+ svgrOptions: svgrValue,
198
+ isWithReact: false,
199
+ });
200
+ }
201
+ }
202
+ }
203
+ }
204
+ });
205
+ if (projects.size === 0)
206
+ return;
207
+ // Update webpack configs to add withSvgr function inline
208
+ for (const [webpackConfigPath, config] of projects.entries()) {
209
+ let content = tree.read(webpackConfigPath, 'utf-8');
210
+ const ast = tsquery_1.tsquery.ast(content);
211
+ const changes = [];
212
+ // Build the svgr options for this specific config
213
+ let svgrOptionsStr = '';
214
+ if (config.svgrOptions) {
215
+ const importStatements = (0, tsquery_1.tsquery)(ast, 'ImportDeclaration');
216
+ const requireStatements = (0, tsquery_1.tsquery)(ast, 'VariableStatement:has(CallExpression[expression.name=require])');
217
+ const allImportRequires = [
218
+ ...importStatements,
219
+ ...requireStatements,
220
+ ].sort((a, b) => a.getEnd() - b.getEnd());
221
+ const lastImportOrRequire = allImportRequires[allImportRequires.length - 1];
222
+ if (config.svgrOptions === true || config.svgrOptions === undefined) {
223
+ svgrOptionsStr = '';
224
+ }
225
+ else if (typeof config.svgrOptions === 'object') {
226
+ const options = Object.entries(config.svgrOptions)
227
+ .map(([key, value]) => ` ${key}: ${value}`)
228
+ .join(',\n');
229
+ svgrOptionsStr = `{\n${options}\n}`;
230
+ }
231
+ if (lastImportOrRequire) {
232
+ changes.push({
233
+ type: devkit_1.ChangeType.Insert,
234
+ index: lastImportOrRequire.getEnd(),
235
+ text: config.isWithReact
236
+ ? withSvgrFunctionForWithReact
237
+ : withSvgrFunctionForNxReactWebpackPlugin,
238
+ });
239
+ }
240
+ else {
241
+ changes.push({
242
+ type: devkit_1.ChangeType.Insert,
243
+ index: 0,
244
+ text: (config.isWithReact
245
+ ? withSvgrFunctionForWithReact
246
+ : withSvgrFunctionForNxReactWebpackPlugin) + '\n',
247
+ });
248
+ }
249
+ }
250
+ // Remove svgr option based on the style (withReact OR NxReactWebpackPlugin)
251
+ if (config.isWithReact) {
252
+ // Remove svgr option from first withReact call (only one expected)
253
+ const withReactCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=withReact]');
254
+ if (withReactCalls.length > 0) {
255
+ const callExpr = withReactCalls[0];
256
+ if (callExpr.arguments.length > 0) {
257
+ const arg = callExpr.arguments[0];
258
+ if (ts.isObjectLiteralExpression(arg)) {
259
+ const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
260
+ ts.isIdentifier(prop.name) &&
261
+ prop.name.text === 'svgr');
262
+ if (svgrProp) {
263
+ changes.push({
264
+ type: devkit_1.ChangeType.Delete,
265
+ start: arg.getStart(),
266
+ length: arg.getEnd() - arg.getStart(),
267
+ });
268
+ if (config.svgrOptions) {
269
+ const composePluginsCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=composePlugins]');
270
+ if (composePluginsCalls.length > 0) {
271
+ const composeCall = composePluginsCalls[0];
272
+ let svgrCallStr = '';
273
+ if (config.svgrOptions === true ||
274
+ config.svgrOptions === undefined) {
275
+ svgrCallStr = 'withSvgr()';
276
+ }
277
+ else if (typeof config.svgrOptions === 'object') {
278
+ svgrCallStr = `withSvgr(${svgrOptionsStr})`;
279
+ }
280
+ const withReactIdx = composeCall.arguments.findIndex((arg) => arg.getText().includes('withReact'));
281
+ // Insert withSvgr as the last argument before the closing paren
282
+ const argToInsertAfter = composeCall.arguments[withReactIdx];
283
+ if (argToInsertAfter) {
284
+ changes.push({
285
+ type: devkit_1.ChangeType.Insert,
286
+ index: argToInsertAfter.getEnd(),
287
+ text: `, ${svgrCallStr}`,
288
+ });
289
+ }
290
+ }
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+ }
297
+ else {
298
+ // Remove svgr option from first NxReactWebpackPlugin call
299
+ const pluginCalls = (0, tsquery_1.tsquery)(ast, 'NewExpression[expression.name=NxReactWebpackPlugin]');
300
+ if (pluginCalls.length > 0) {
301
+ const newExpr = pluginCalls[0];
302
+ if (newExpr.arguments && newExpr.arguments.length > 0) {
303
+ const arg = newExpr.arguments[0];
304
+ if (ts.isObjectLiteralExpression(arg)) {
305
+ const svgrProp = arg.properties.find((prop) => ts.isPropertyAssignment(prop) &&
306
+ ts.isIdentifier(prop.name) &&
307
+ prop.name.text === 'svgr');
308
+ if (svgrProp) {
309
+ const hasOnlySvgrProperty = arg.properties.length === 1;
310
+ // Replace entire object argument with empty parentheses when only svgr property exists
311
+ if (hasOnlySvgrProperty) {
312
+ changes.push({
313
+ type: devkit_1.ChangeType.Delete,
314
+ start: arg.getStart(),
315
+ length: arg.getEnd() - arg.getStart(),
316
+ });
317
+ }
318
+ // If more properties exist, just remove the svgr property
319
+ else {
320
+ const propIndex = arg.properties.indexOf(svgrProp);
321
+ const isLastProp = propIndex === arg.properties.length - 1;
322
+ const isFirstProp = propIndex === 0;
323
+ let removeStart = svgrProp.getFullStart();
324
+ let removeEnd = svgrProp.getEnd();
325
+ if (!isLastProp) {
326
+ const nextProp = arg.properties[propIndex + 1];
327
+ removeEnd = nextProp.getFullStart();
328
+ }
329
+ else if (!isFirstProp) {
330
+ const prevProp = arg.properties[propIndex - 1];
331
+ const textBetween = content.substring(prevProp.getEnd(), svgrProp.getFullStart());
332
+ const commaIndex = textBetween.indexOf(',');
333
+ if (commaIndex !== -1) {
334
+ removeStart = prevProp.getEnd() + commaIndex;
335
+ }
336
+ }
337
+ changes.push({
338
+ type: devkit_1.ChangeType.Delete,
339
+ start: removeStart,
340
+ length: removeEnd - removeStart,
341
+ });
342
+ }
343
+ }
344
+ }
345
+ }
346
+ }
347
+ // For NxReactWebpackPlugin style, wrap the entire module.exports or export default with withSvgr
348
+ if (config.svgrOptions) {
349
+ const allAssignments = (0, tsquery_1.tsquery)(ast, 'BinaryExpression');
350
+ // Find the one that has module.exports on the left side
351
+ const moduleExportsAssignment = allAssignments.find((node) => {
352
+ const binaryExpr = node;
353
+ const left = binaryExpr.left;
354
+ return (ts.isPropertyAccessExpression(left) &&
355
+ ts.isIdentifier(left.expression) &&
356
+ left.expression.text === 'module' &&
357
+ ts.isIdentifier(left.name) &&
358
+ left.name.text === 'exports');
359
+ });
360
+ // Also check for export default
361
+ const exportDefaultStatements = (0, tsquery_1.tsquery)(ast, 'ExportAssignment');
362
+ const exportDefaultStatement = exportDefaultStatements[0];
363
+ // Use whichever export style is found
364
+ let exportValue;
365
+ if (moduleExportsAssignment) {
366
+ exportValue = moduleExportsAssignment.right;
367
+ }
368
+ else if (exportDefaultStatement) {
369
+ exportValue = exportDefaultStatement.expression;
370
+ }
371
+ if (exportValue) {
372
+ let svgrCallStr = '';
373
+ if (config.svgrOptions === true || config.svgrOptions === undefined) {
374
+ svgrCallStr = 'withSvgr()';
375
+ }
376
+ else if (typeof config.svgrOptions === 'object') {
377
+ const options = Object.entries(config.svgrOptions)
378
+ .map(([key, value]) => ` ${key}: ${value}`)
379
+ .join(',\n');
380
+ svgrCallStr = `withSvgr({\n${options}\n})`;
381
+ }
382
+ changes.push({
383
+ type: devkit_1.ChangeType.Insert,
384
+ index: exportValue.getStart(),
385
+ text: `${svgrCallStr}(`,
386
+ });
387
+ changes.push({
388
+ type: devkit_1.ChangeType.Insert,
389
+ index: exportValue.getEnd(),
390
+ text: ')',
391
+ });
392
+ }
393
+ }
394
+ }
395
+ content = (0, devkit_1.applyChangesToString)(content, changes);
396
+ tree.write(webpackConfigPath, content);
397
+ }
398
+ await (0, devkit_1.formatFiles)(tree);
399
+ // Add file-loader as a dev dependency since it's now required for SVGR
400
+ return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
401
+ 'file-loader': '^6.2.0',
402
+ });
403
+ }
@@ -1,3 +0,0 @@
1
- import { type Tree } from '@nx/devkit';
2
- export default function (tree: Tree): Promise<void>;
3
- //# sourceMappingURL=turn-off-dts-by-default.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"turn-off-dts-by-default.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-0/turn-off-dts-by-default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAqC,MAAM,YAAY,CAAC;AAK1E,yBAA+B,IAAI,EAAE,IAAI,iBA+ExC"}
@@ -1,56 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = default_1;
4
- const devkit_1 = require("@nx/devkit");
5
- const minimatch_1 = require("minimatch");
6
- const tsquery_1 = require("@phenomnomnominal/tsquery");
7
- async function default_1(tree) {
8
- (0, devkit_1.visitNotIgnoredFiles)(tree, '', (path) => {
9
- const webpackConfigGlob = '**/webpack*.config*.{js,ts,mjs,cjs}';
10
- const result = (0, minimatch_1.minimatch)(path, webpackConfigGlob);
11
- if (!result) {
12
- return;
13
- }
14
- let webpackConfigContents = tree.read(path, 'utf-8');
15
- if (!/withModuleFederationSSR|withModuleFederation/.test(webpackConfigContents)) {
16
- return;
17
- }
18
- const WITH_MODULE_FEDERATION_SELECTOR = 'CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederation]),CallExpression:has(Identifier[name=composePlugins]) > CallExpression:has(Identifier[name=withModuleFederationForSSR])';
19
- const EXISTING_MF_OVERRIDES_SELECTOR = 'ObjectLiteralExpression';
20
- const ast = tsquery_1.tsquery.ast(webpackConfigContents);
21
- const withModuleFederationNodes = (0, tsquery_1.tsquery)(ast, WITH_MODULE_FEDERATION_SELECTOR, { visitAllChildren: true });
22
- if (!withModuleFederationNodes.length) {
23
- return;
24
- }
25
- const withModuleFederationNode = withModuleFederationNodes[0];
26
- const existingOverridesNodes = (0, tsquery_1.tsquery)(withModuleFederationNode, EXISTING_MF_OVERRIDES_SELECTOR, { visitAllChildren: true });
27
- if (!existingOverridesNodes.length) {
28
- // doesn't exist, add it
29
- webpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationNode.getEnd() - 1)},${JSON.stringify({ dts: false })}${webpackConfigContents.slice(withModuleFederationNode.getEnd() - 1)}`;
30
- }
31
- else {
32
- let existingOverrideNode;
33
- for (const node of existingOverridesNodes) {
34
- if (!existingOverrideNode) {
35
- existingOverrideNode = node;
36
- }
37
- if (existingOverrideNode.getText().includes(node.getText())) {
38
- continue;
39
- }
40
- existingOverrideNode = node;
41
- }
42
- const DTS_PROPERTY_SELECTOR = 'PropertyAssignment > Identifier[name=dts]';
43
- const dtsPropertyNode = (0, tsquery_1.tsquery)(existingOverrideNode, DTS_PROPERTY_SELECTOR);
44
- if (dtsPropertyNode.length) {
45
- // dts already exists, do nothing
46
- return;
47
- }
48
- const newOverrides = `{ dts: false, ${existingOverrideNode
49
- .getText()
50
- .slice(1)}`;
51
- webpackConfigContents = `${webpackConfigContents.slice(0, existingOverrideNode.getStart())}${newOverrides}${webpackConfigContents.slice(existingOverrideNode.getEnd())}`;
52
- }
53
- tree.write(path, webpackConfigContents);
54
- });
55
- await (0, devkit_1.formatFiles)(tree);
56
- }
@@ -1,3 +0,0 @@
1
- import { type Tree } from '@nx/devkit';
2
- export default function update(tree: Tree): void;
3
- //# sourceMappingURL=update-ssr-server-port.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"update-ssr-server-port.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-0/update-ssr-server-port.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,YAAY,CAAC;AAOpB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,IAAI,EAAE,IAAI,QAqCxC"}
@@ -1,74 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = update;
4
- const devkit_1 = require("@nx/devkit");
5
- const tsquery_1 = require("@phenomnomnominal/tsquery");
6
- const ts = require("typescript");
7
- const minimatch_1 = require("minimatch");
8
- const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
9
- function update(tree) {
10
- const projects = (0, devkit_1.getProjects)(tree);
11
- const executors = [
12
- '@nx/webpack:ssr-dev-server',
13
- '@nx/react:module-federation-ssr-dev-server',
14
- ];
15
- executors.forEach((executor) => {
16
- (0, executor_options_utils_1.forEachExecutorOptions)(tree, executor, (options, projectName) => {
17
- const project = projects.get(projectName);
18
- if (isModuleFederationSSRProject(tree, project)) {
19
- const port = options.port;
20
- if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'server.ts'))) {
21
- const serverContent = tree.read((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), 'utf-8');
22
- if (serverContent && port) {
23
- const updatedServerContent = updateServerPort(serverContent, port);
24
- if (updatedServerContent) {
25
- tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), updatedServerContent);
26
- }
27
- }
28
- }
29
- }
30
- });
31
- });
32
- }
33
- function updateServerPort(serverContent, port) {
34
- const sourceFile = tsquery_1.tsquery.ast(serverContent);
35
- const serverPortNode = (0, tsquery_1.tsquery)(sourceFile, `VariableDeclaration:has(Identifier[name="port"])`)[0];
36
- if (serverPortNode) {
37
- const binaryExpression = (0, tsquery_1.tsquery)(serverPortNode, 'BinaryExpression')[0];
38
- if (binaryExpression) {
39
- const leftExpression = (0, tsquery_1.tsquery)(binaryExpression, 'PropertyAccessExpression:has(Identifier[name="env"])')[0];
40
- const rightExpression = (0, tsquery_1.tsquery)(binaryExpression, 'NumericLiteral[text="4200"]')[0];
41
- if (leftExpression && rightExpression) {
42
- const serverPortDeclaration = serverPortNode;
43
- const newInitializer = ts.factory.createBinaryExpression(
44
- // process.env.PORT
45
- ts.factory.createPropertyAccessExpression(ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('process'), ts.factory.createIdentifier('env')), 'PORT'),
46
- // ||
47
- ts.SyntaxKind.BarBarToken,
48
- // port value
49
- ts.factory.createNumericLiteral(port.toString()));
50
- const updatePortDeclaration = ts.factory.updateVariableDeclaration(serverPortDeclaration, serverPortDeclaration.name, serverPortDeclaration.exclamationToken, serverPortDeclaration.type, newInitializer);
51
- const updatedStatements = sourceFile.statements.map((statement) => {
52
- if (ts.isVariableStatement(statement)) {
53
- const updatedDeclarationList = statement.declarationList.declarations.map((decl) => decl === serverPortDeclaration ? updatePortDeclaration : decl);
54
- const updatedDeclList = ts.factory.updateVariableDeclarationList(statement.declarationList, updatedDeclarationList);
55
- return ts.factory.updateVariableStatement(statement, statement.modifiers, updatedDeclList);
56
- }
57
- return statement;
58
- });
59
- const updatedSourceFile = ts.factory.updateSourceFile(sourceFile, updatedStatements);
60
- const printer = ts.createPrinter();
61
- return printer.printNode(ts.EmitHint.Unspecified, updatedSourceFile, sourceFile);
62
- }
63
- }
64
- }
65
- }
66
- function isModuleFederationSSRProject(tree, project) {
67
- let hasMfeServerConfig = false;
68
- (0, devkit_1.visitNotIgnoredFiles)(tree, project.root, (filePath) => {
69
- if ((0, minimatch_1.minimatch)(filePath, '**/module-federation*.server.config.*')) {
70
- hasMfeServerConfig = true;
71
- }
72
- });
73
- return hasMfeServerConfig;
74
- }
@@ -1,3 +0,0 @@
1
- import { type Tree } from '@nx/devkit';
2
- export default function (tree: Tree): Promise<void>;
3
- //# sourceMappingURL=ensure-depends-on-for-mf.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ensure-depends-on-for-mf.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-19-6-1/ensure-depends-on-for-mf.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,IAAI,EAAgB,MAAM,YAAY,CAAC;AAI9E,yBAA+B,IAAI,EAAE,IAAI,iBA2DxC"}
@@ -1,46 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = default_1;
4
- const devkit_1 = require("@nx/devkit");
5
- const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
6
- async function default_1(tree) {
7
- let usesModuleFederation = false;
8
- (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, projectName, targetName) => {
9
- const webpackConfig = options.webpackConfig;
10
- if (!webpackConfig || webpackConfig === '@nx/react/plugins/webpack') {
11
- return;
12
- }
13
- const webpackContents = tree.read(webpackConfig, 'utf-8');
14
- if (['withModuleFederation', 'withModuleFederationForSSR'].some((p) => webpackContents.includes(p))) {
15
- usesModuleFederation = true;
16
- }
17
- });
18
- if (!usesModuleFederation) {
19
- return;
20
- }
21
- const nxJson = (0, devkit_1.readNxJson)(tree);
22
- const nxMFDevRemotesEnvVar = 'NX_MF_DEV_REMOTES';
23
- if (!nxJson.targetDefaults ||
24
- !nxJson.targetDefaults?.['@nx/webpack:webpack']) {
25
- nxJson.targetDefaults ??= {};
26
- nxJson.targetDefaults['@nx/webpack:webpack'] = {
27
- cache: true,
28
- inputs: ['production', '^production', { env: nxMFDevRemotesEnvVar }],
29
- dependsOn: ['^build'],
30
- };
31
- }
32
- else {
33
- nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn ??= [];
34
- if (!nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.includes('^build')) {
35
- nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.push('^build');
36
- }
37
- nxJson.targetDefaults['@nx/webpack:webpack'].inputs ??= [];
38
- if (!nxJson.targetDefaults['@nx/webpack:webpack'].inputs.find((i) => typeof i === 'string' ? false : i['env'] === nxMFDevRemotesEnvVar)) {
39
- nxJson.targetDefaults['@nx/webpack:webpack'].inputs.push({
40
- env: nxMFDevRemotesEnvVar,
41
- });
42
- }
43
- }
44
- (0, devkit_1.updateNxJson)(tree, nxJson);
45
- await (0, devkit_1.formatFiles)(tree);
46
- }