@nx/react 16.10.0 → 17.0.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 (42) hide show
  1. package/generators.json +14 -0
  2. package/migrations.json +0 -698
  3. package/package.json +6 -6
  4. package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js +1 -1
  5. package/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__ +8 -0
  6. package/src/generators/federate-module/federate-module.d.ts +5 -0
  7. package/src/generators/federate-module/federate-module.js +58 -0
  8. package/src/generators/federate-module/lib/utils.d.ts +23 -0
  9. package/src/generators/federate-module/lib/utils.js +97 -0
  10. package/src/generators/federate-module/schema.d.ts +12 -0
  11. package/src/generators/federate-module/schema.json +116 -0
  12. package/src/generators/remote/remote.js +1 -1
  13. package/src/generators/setup-ssr/setup-ssr.js +4 -1
  14. package/src/generators/storybook-configuration/configuration.js +1 -1
  15. package/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.js +32 -17
  16. package/src/module-federation/with-module-federation.js +1 -2
  17. package/src/migrations/update-12-0-0/remove-react-redux-types-package.d.ts +0 -3
  18. package/src/migrations/update-12-0-0/remove-react-redux-types-package.js +0 -9
  19. package/src/migrations/update-12-0-0/update-emotion-setup.d.ts +0 -3
  20. package/src/migrations/update-12-0-0/update-emotion-setup.js +0 -61
  21. package/src/migrations/update-12-0-0/use-react-jsx-in-tsconfig.d.ts +0 -3
  22. package/src/migrations/update-12-0-0/use-react-jsx-in-tsconfig.js +0 -22
  23. package/src/migrations/update-12-8-0/update-12-8-0.d.ts +0 -3
  24. package/src/migrations/update-12-8-0/update-12-8-0.js +0 -11
  25. package/src/migrations/update-13-0-0/migrate-storybook-to-webpack-5.d.ts +0 -3
  26. package/src/migrations/update-13-0-0/migrate-storybook-to-webpack-5.js +0 -34
  27. package/src/migrations/update-13-0-0/update-emotion-setup.d.ts +0 -3
  28. package/src/migrations/update-13-0-0/update-emotion-setup.js +0 -35
  29. package/src/migrations/update-13-0-0/webpack5-changes-utils.d.ts +0 -11
  30. package/src/migrations/update-13-0-0/webpack5-changes-utils.js +0 -264
  31. package/src/migrations/update-13-10-0/update-13-10-0.d.ts +0 -3
  32. package/src/migrations/update-13-10-0/update-13-10-0.js +0 -25
  33. package/src/migrations/update-14-0-0/add-default-development-configurations.d.ts +0 -3
  34. package/src/migrations/update-14-0-0/add-default-development-configurations.js +0 -34
  35. package/src/migrations/update-14-0-0/replace-testing-library-react-hook.d.ts +0 -3
  36. package/src/migrations/update-14-0-0/replace-testing-library-react-hook.js +0 -22
  37. package/src/migrations/update-14-0-0/update-react-dom-render-for-v18.d.ts +0 -5
  38. package/src/migrations/update-14-0-0/update-react-dom-render-for-v18.js +0 -64
  39. package/src/migrations/update-14-1-0/update-external-emotion-jsx-runtime.d.ts +0 -3
  40. package/src/migrations/update-14-1-0/update-external-emotion-jsx-runtime.js +0 -34
  41. package/src/migrations/update-14-6-0/add-preset-jest-config.d.ts +0 -3
  42. package/src/migrations/update-14-6-0/add-preset-jest-config.js +0 -38
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.migrateStorybookToWebPack5 = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- const webpack5_changes_utils_1 = require("./webpack5-changes-utils");
6
- let needsInstall = false;
7
- async function migrateStorybookToWebPack5(tree) {
8
- const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
9
- if ((0, webpack5_changes_utils_1.workspaceHasStorybookForReact)(packageJson)) {
10
- (0, devkit_1.updateJson)(tree, 'package.json', (json) => {
11
- json.dependencies = json.dependencies || {};
12
- json.devDependencies = json.devDependencies || {};
13
- if (!json.dependencies['@storybook/builder-webpack5'] &&
14
- !json.devDependencies['@storybook/builder-webpack5']) {
15
- needsInstall = true;
16
- json.devDependencies['@storybook/builder-webpack5'] =
17
- (0, webpack5_changes_utils_1.workspaceHasStorybookForReact)(packageJson);
18
- }
19
- if (!json.dependencies['@storybook/manager-webpack5'] &&
20
- !json.devDependencies['@storybook/manager-webpack5']) {
21
- needsInstall = true;
22
- json.devDependencies['@storybook/manager-webpack5'] =
23
- (0, webpack5_changes_utils_1.workspaceHasStorybookForReact)(packageJson);
24
- }
25
- return json;
26
- });
27
- await (0, webpack5_changes_utils_1.migrateToWebPack5)(tree);
28
- if (needsInstall) {
29
- devkit_1.logger.info('Please make sure to run npm install or yarn install to get the latest packages added by this migration');
30
- }
31
- }
32
- }
33
- exports.migrateStorybookToWebPack5 = migrateStorybookToWebPack5;
34
- exports.default = migrateStorybookToWebPack5;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function updateEmotionSetup(host: Tree): Promise<void>;
3
- export default updateEmotionSetup;
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.updateEmotionSetup = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- async function updateEmotionSetup(host) {
6
- const projects = (0, devkit_1.getProjects)(host);
7
- projects.forEach((p) => {
8
- let hasEmotion = false;
9
- const babelrcPath = `${p.root}/.babelrc`;
10
- const tsConfigPath = `${p.root}/tsconfig.json`;
11
- if (host.exists(babelrcPath)) {
12
- const babelrc = (0, devkit_1.readJson)(host, babelrcPath);
13
- if (babelrc.presets) {
14
- for (const [idx, preset] of babelrc.presets.entries()) {
15
- if (Array.isArray(preset)) {
16
- if (!preset[0].includes('@nrwl/react/babel'))
17
- continue;
18
- const emotionOptions = preset[1];
19
- hasEmotion = emotionOptions.importSource === '@emotion/react';
20
- break;
21
- }
22
- }
23
- }
24
- }
25
- if (hasEmotion && host.exists(tsConfigPath)) {
26
- (0, devkit_1.updateJson)(host, tsConfigPath, (json) => {
27
- json.compilerOptions.jsxImportSource = '@emotion/react';
28
- return json;
29
- });
30
- }
31
- });
32
- await (0, devkit_1.formatFiles)(host);
33
- }
34
- exports.updateEmotionSetup = updateEmotionSetup;
35
- exports.default = updateEmotionSetup;
@@ -1,11 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- import ts = require('typescript');
3
- export declare function migrateToWebPack5(tree: Tree): Promise<void>;
4
- export declare function workspaceHasStorybookForReact(packageJson: any): string | undefined;
5
- export declare function allReactProjectsWithStorybookConfiguration(tree: Tree): {
6
- projectName: string;
7
- storybookConfigPath: string;
8
- }[];
9
- export declare function editProjectMainJs(tree: Tree, projectMainJsFile: string, projectName: string): void;
10
- export declare function checkMainJsForOldSyntax(nodeList: ts.Node[], fileContent: string): string | undefined;
11
- export declare function getTsSourceFile(host: Tree, path: string): ts.SourceFile;
@@ -1,264 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getTsSourceFile = exports.checkMainJsForOldSyntax = exports.editProjectMainJs = exports.allReactProjectsWithStorybookConfiguration = exports.workspaceHasStorybookForReact = exports.migrateToWebPack5 = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- const devkit_2 = require("@nx/devkit");
6
- const ts = require("typescript");
7
- const js_1 = require("@nx/js");
8
- async function migrateToWebPack5(tree) {
9
- allReactProjectsWithStorybookConfiguration(tree).forEach((project) => {
10
- let storybookConfigFile = `${project.storybookConfigPath}/main.js`;
11
- if (!tree.exists(storybookConfigFile)) {
12
- // try to see whether there's a main.ts file
13
- storybookConfigFile = `${project.storybookConfigPath}/main.ts`;
14
- }
15
- if (!tree.exists(storybookConfigFile)) {
16
- // ok...give up
17
- return;
18
- }
19
- editProjectMainJs(tree, storybookConfigFile, project.projectName);
20
- });
21
- await (0, devkit_2.formatFiles)(tree);
22
- }
23
- exports.migrateToWebPack5 = migrateToWebPack5;
24
- function workspaceHasStorybookForReact(packageJson) {
25
- return (packageJson.dependencies['@storybook/react'] ||
26
- packageJson.devDependencies['@storybook/react']);
27
- }
28
- exports.workspaceHasStorybookForReact = workspaceHasStorybookForReact;
29
- function allReactProjectsWithStorybookConfiguration(tree) {
30
- const projects = (0, devkit_1.getProjects)(tree);
31
- const reactProjectsThatHaveStorybookConfiguration = [...projects.entries()]
32
- ?.filter(([_, projectConfig]) => projectConfig.targets &&
33
- projectConfig.targets.storybook &&
34
- projectConfig.targets.storybook.options)
35
- ?.map(([projectName, projectConfig]) => {
36
- if (projectConfig.targets &&
37
- projectConfig.targets.storybook &&
38
- projectConfig.targets.storybook.options?.config?.configFolder &&
39
- projectConfig.targets.storybook.options?.uiFramework ===
40
- '@storybook/react') {
41
- return {
42
- projectName,
43
- storybookConfigPath: projectConfig.targets.storybook.options.config.configFolder,
44
- };
45
- }
46
- })
47
- ?.filter((entry) => !!entry);
48
- return reactProjectsThatHaveStorybookConfiguration;
49
- }
50
- exports.allReactProjectsWithStorybookConfiguration = allReactProjectsWithStorybookConfiguration;
51
- function editProjectMainJs(tree, projectMainJsFile, projectName) {
52
- let newContents;
53
- let moduleExportsIsEmptyOrNonExistentOrInvalid = false;
54
- let alreadyHasBuilder;
55
- const rootMainJsExists = tree.exists(projectMainJsFile);
56
- let moduleExportsFull = [];
57
- if (rootMainJsExists) {
58
- const file = getTsSourceFile(tree, projectMainJsFile);
59
- const appFileContent = tree.read(projectMainJsFile, 'utf-8');
60
- newContents = appFileContent;
61
- moduleExportsFull = (0, js_1.findNodes)(file, [ts.SyntaxKind.ExpressionStatement]);
62
- if (moduleExportsFull && moduleExportsFull[0]) {
63
- const moduleExports = moduleExportsFull[0];
64
- const listOfStatements = (0, js_1.findNodes)(moduleExports, [
65
- ts.SyntaxKind.SyntaxList,
66
- ]);
67
- /**
68
- * Keep the index of the stories node
69
- * to put the core object before it
70
- * if it does not exist already
71
- */
72
- let indexOfStoriesNode = -1;
73
- const hasCoreObject = listOfStatements[0]?.getChildren()?.find((node) => {
74
- if (node &&
75
- node.getText().length > 0 &&
76
- indexOfStoriesNode < 0 &&
77
- node?.getText().startsWith('stories')) {
78
- indexOfStoriesNode = node.getStart();
79
- }
80
- return (node?.kind === ts.SyntaxKind.PropertyAssignment &&
81
- node?.getText().startsWith('core'));
82
- });
83
- if (hasCoreObject) {
84
- const contentsOfCoreNode = hasCoreObject.getChildren().find((node) => {
85
- return node.kind === ts.SyntaxKind.ObjectLiteralExpression;
86
- });
87
- const everyAttributeInsideCoreNode = contentsOfCoreNode
88
- .getChildren()
89
- .find((node) => node.kind === ts.SyntaxKind.SyntaxList);
90
- alreadyHasBuilder = everyAttributeInsideCoreNode
91
- .getChildren()
92
- .find((node) => node.getText() === "builder: 'webpack5'");
93
- if (!alreadyHasBuilder) {
94
- newContents = (0, devkit_2.applyChangesToString)(newContents, [
95
- {
96
- type: devkit_2.ChangeType.Insert,
97
- index: contentsOfCoreNode.getEnd() - 1,
98
- text: ", builder: 'webpack5'",
99
- },
100
- ]);
101
- }
102
- }
103
- else if (indexOfStoriesNode >= 0) {
104
- /**
105
- * Does not have core object,
106
- * so just write one, at the start.
107
- */
108
- newContents = (0, devkit_2.applyChangesToString)(newContents, [
109
- {
110
- type: devkit_2.ChangeType.Insert,
111
- index: indexOfStoriesNode - 1,
112
- text: "core: { ...rootMain.core, builder: 'webpack5' }, ",
113
- },
114
- ]);
115
- }
116
- else {
117
- /**
118
- * Module exports is empty or does not
119
- * contain stories - most probably invalid
120
- */
121
- moduleExportsIsEmptyOrNonExistentOrInvalid = true;
122
- }
123
- }
124
- else {
125
- /**
126
- * module.exports does not exist
127
- */
128
- moduleExportsIsEmptyOrNonExistentOrInvalid = true;
129
- }
130
- }
131
- else {
132
- moduleExportsIsEmptyOrNonExistentOrInvalid = true;
133
- }
134
- if (moduleExportsIsEmptyOrNonExistentOrInvalid) {
135
- const usesOldSyntax = checkMainJsForOldSyntax(moduleExportsFull, newContents);
136
- if (moduleExportsFull.length > 0 && usesOldSyntax) {
137
- newContents = usesOldSyntax;
138
- tree.write(projectMainJsFile, newContents);
139
- return;
140
- }
141
- else {
142
- devkit_2.logger.info(`Please configure Storybook for project "${projectName}"", since it has not been configured properly.`);
143
- return;
144
- }
145
- }
146
- if (!alreadyHasBuilder) {
147
- tree.write(projectMainJsFile, newContents);
148
- }
149
- }
150
- exports.editProjectMainJs = editProjectMainJs;
151
- function checkMainJsForOldSyntax(nodeList, fileContent) {
152
- let alreadyContainsBuilder = false;
153
- let coreNode;
154
- let hasCoreNode = false;
155
- const lastIndexOfFirstNode = nodeList[0].getEnd();
156
- if (!fileContent.includes('stories.push') || nodeList.length === 0) {
157
- return undefined;
158
- }
159
- // Go through the node list and find if the core object exists
160
- // If it does, then we need to check if it has the builder property
161
- // If it does not, then we need to add it
162
- for (let topNode of nodeList) {
163
- if (topNode.kind === ts.SyntaxKind.ExpressionStatement &&
164
- topNode.getChildren()?.length > 0) {
165
- for (let node of topNode.getChildren()) {
166
- if (node.kind === ts.SyntaxKind.BinaryExpression &&
167
- node.getChildren()?.length) {
168
- for (let childNode of node.getChildren()) {
169
- if (childNode.kind === ts.SyntaxKind.PropertyAccessExpression &&
170
- childNode.getChildren()?.length) {
171
- for (let grandChildNode of childNode.getChildren()) {
172
- if (grandChildNode.kind === ts.SyntaxKind.Identifier &&
173
- grandChildNode.getText() === 'core') {
174
- coreNode = node;
175
- hasCoreNode = true;
176
- break;
177
- }
178
- }
179
- }
180
- if (hasCoreNode) {
181
- break;
182
- }
183
- }
184
- }
185
- if (hasCoreNode) {
186
- if (coreNode.getChildren()?.length) {
187
- for (let coreChildNode of coreNode.getChildren()) {
188
- if (coreChildNode.kind === ts.SyntaxKind.ObjectLiteralExpression &&
189
- coreChildNode.getChildren()?.length) {
190
- for (let coreChildNodeChild of coreChildNode.getChildren()) {
191
- if (coreChildNodeChild.kind === ts.SyntaxKind.SyntaxList) {
192
- for (let coreChildNodeGrandChild of coreChildNodeChild.getChildren()) {
193
- if (coreChildNodeGrandChild.kind ===
194
- ts.SyntaxKind.PropertyAssignment &&
195
- coreChildNodeGrandChild.getText().startsWith('builder')) {
196
- for (let coreChildNodeGrandChildChild of coreChildNodeGrandChild.getChildren()) {
197
- if (coreChildNodeGrandChildChild.kind ===
198
- ts.SyntaxKind.StringLiteral &&
199
- coreChildNodeGrandChildChild.getText() ===
200
- 'webpack5') {
201
- alreadyContainsBuilder = true;
202
- break;
203
- }
204
- }
205
- }
206
- if (alreadyContainsBuilder) {
207
- break;
208
- }
209
- }
210
- }
211
- if (alreadyContainsBuilder) {
212
- break;
213
- }
214
- }
215
- }
216
- if (alreadyContainsBuilder) {
217
- break;
218
- }
219
- }
220
- }
221
- break;
222
- }
223
- }
224
- }
225
- if (hasCoreNode) {
226
- if (alreadyContainsBuilder) {
227
- break;
228
- }
229
- else {
230
- // Add builder
231
- const indexOfCoreNodeEnd = coreNode.getEnd();
232
- fileContent = (0, devkit_2.applyChangesToString)(fileContent, [
233
- {
234
- type: devkit_2.ChangeType.Insert,
235
- index: indexOfCoreNodeEnd - 1,
236
- text: ", builder: 'webpack5'",
237
- },
238
- ]);
239
- break;
240
- }
241
- }
242
- }
243
- if (!hasCoreNode) {
244
- fileContent = (0, devkit_2.applyChangesToString)(fileContent, [
245
- {
246
- type: devkit_2.ChangeType.Insert,
247
- index: lastIndexOfFirstNode + 1,
248
- text: "rootMain.core = { ...rootMain.core, builder: 'webpack5' };\n",
249
- },
250
- ]);
251
- }
252
- return fileContent;
253
- }
254
- exports.checkMainJsForOldSyntax = checkMainJsForOldSyntax;
255
- function getTsSourceFile(host, path) {
256
- const buffer = host.read(path);
257
- if (!buffer) {
258
- throw new Error(`Could not read TS file (${path}).`);
259
- }
260
- const content = buffer.toString();
261
- const source = ts.createSourceFile(path, content, ts.ScriptTarget.Latest, true);
262
- return source;
263
- }
264
- exports.getTsSourceFile = getTsSourceFile;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function updateToReact18(host: Tree): Promise<import("@nx/devkit").GeneratorCallback>;
3
- export default updateToReact18;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.updateToReact18 = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- // Putting this here because React Native 0.67 is incompatible with React 18.
6
- // Waiting for 0.68 to come out with support for React 18.
7
- // TODO(jack): For Nx 14 let's add another migration for React 18 in migrations.json because by then React Native 0.68.0 should be released.
8
- async function updateToReact18(host) {
9
- const { dependencies } = (0, devkit_1.readJson)(host, 'package.json');
10
- if (dependencies['react-native'] &&
11
- !dependencies['react-native'].match(/[\^~]?0.68/)) {
12
- devkit_1.logger.info(`React Native ${dependencies['react-native']} is incompatible with React 18. Skipping update until React Native 0.68.0 is released.`);
13
- }
14
- else {
15
- return (0, devkit_1.addDependenciesToPackageJson)(host, {
16
- react: '18.0.0',
17
- 'react-dom': '18.0.0',
18
- 'react-is': '18.0.0',
19
- }, {
20
- 'react-test-renderer': '18.0.0',
21
- });
22
- }
23
- }
24
- exports.updateToReact18 = updateToReact18;
25
- exports.default = updateToReact18;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function update(tree: Tree): Promise<void>;
3
- export default update;
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.update = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- async function update(tree) {
6
- const projects = (0, devkit_1.getProjects)(tree);
7
- projects.forEach((config, name) => {
8
- let shouldUpdate = false;
9
- if (config.targets?.build?.executor === '@nrwl/web:webpack') {
10
- shouldUpdate = true;
11
- config.targets.build.defaultConfiguration ??= 'production';
12
- config.targets.build.configurations ??= {};
13
- config.targets.build.configurations.development ??= {
14
- extractLicenses: false,
15
- optimization: false,
16
- sourceMap: true,
17
- vendorChunk: true,
18
- };
19
- }
20
- if (config.targets?.serve?.executor === '@nrwl/web:dev-server') {
21
- shouldUpdate = true;
22
- config.targets.serve.defaultConfiguration ??= 'development';
23
- config.targets.serve.configurations ??= {};
24
- config.targets.serve.configurations.development ??= {
25
- buildTarget: `${name}:build:development`,
26
- };
27
- }
28
- if (shouldUpdate)
29
- (0, devkit_1.updateProjectConfiguration)(tree, name, config);
30
- });
31
- await (0, devkit_1.formatFiles)(tree);
32
- }
33
- exports.update = update;
34
- exports.default = update;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function update(tree: Tree): Promise<void>;
3
- export default update;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.update = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- async function update(tree) {
6
- const projects = (0, devkit_1.getProjects)(tree);
7
- projects.forEach((config) => {
8
- if (config.targets?.test?.executor !== '@nrwl/jest:jest')
9
- return;
10
- (0, devkit_1.visitNotIgnoredFiles)(tree, config.sourceRoot, (file) => {
11
- if (!file.endsWith('.spec.ts'))
12
- return;
13
- const content = tree.read(file).toString();
14
- if (content.includes('@testing-library/react-hooks')) {
15
- tree.write(file, content.replace(/@testing-library\/react-hooks/g, '@testing-library/react'));
16
- }
17
- });
18
- });
19
- (0, devkit_1.removeDependenciesFromPackageJson)(tree, ['@testing-library/react-hooks'], ['@testing-library/react-hooks']);
20
- }
21
- exports.update = update;
22
- exports.default = update;
@@ -1,5 +0,0 @@
1
- import { StringChange, Tree } from '@nx/devkit';
2
- import * as ts from 'typescript';
3
- export declare function update(tree: Tree): Promise<void>;
4
- export declare function migrateReactDomRender(sourcePath: string, source: ts.SourceFile): StringChange[];
5
- export default update;
@@ -1,64 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.migrateReactDomRender = exports.update = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- const js_1 = require("@nx/js");
6
- const ts = require("typescript");
7
- async function update(tree) {
8
- const projects = (0, devkit_1.getProjects)(tree);
9
- projects.forEach((config, name) => {
10
- const isReactProject = config.targets?.build?.executor === '@nrwl/web:webpack' &&
11
- /main\.(t|j)sx?$/.test(config.targets.build.options.main);
12
- if (isReactProject) {
13
- const sourcePath = config.targets.build.options.main;
14
- const sourceCode = tree.read(sourcePath).toString();
15
- const source = ts.createSourceFile(sourcePath, sourceCode, ts.ScriptTarget.Latest, true);
16
- const result = (0, devkit_1.applyChangesToString)(sourceCode, migrateReactDomRender(sourcePath, source));
17
- tree.write(sourcePath, result);
18
- }
19
- });
20
- await (0, devkit_1.formatFiles)(tree);
21
- }
22
- exports.update = update;
23
- function migrateReactDomRender(sourcePath, source) {
24
- const allImports = (0, js_1.findNodes)(source, ts.SyntaxKind.ImportDeclaration);
25
- const reactDomImport = allImports.find((x) => x.moduleSpecifier.getText() === "'react-dom'");
26
- const changes = [];
27
- if (reactDomImport) {
28
- changes.push({
29
- type: devkit_1.ChangeType.Insert,
30
- index: reactDomImport.moduleSpecifier.end - 1,
31
- text: '/client',
32
- });
33
- }
34
- const calls = (0, js_1.findNodes)(source, ts.SyntaxKind.CallExpression);
35
- const renderCall = calls.find((x) => {
36
- if (x.expression.kind !== ts.SyntaxKind.PropertyAccessExpression)
37
- return false;
38
- const expr = x.expression;
39
- return (expr.expression.getText() === 'ReactDOM' &&
40
- expr.name.getText() === 'render');
41
- });
42
- if (renderCall) {
43
- const [element, querySelector] = renderCall.arguments;
44
- changes.push({
45
- type: devkit_1.ChangeType.Delete,
46
- start: renderCall.getStart(),
47
- length: renderCall.end,
48
- }, {
49
- type: devkit_1.ChangeType.Insert,
50
- index: renderCall.getStart(),
51
- text: (0, devkit_1.stripIndents) `
52
- const root = ReactDOM.createRoot(
53
- ${querySelector.getText()}${sourcePath.endsWith('.tsx') ? ' as HTMLElement' : ''}
54
- );
55
- root.render(
56
- ${element.getText()}
57
- );
58
- `,
59
- });
60
- }
61
- return changes;
62
- }
63
- exports.migrateReactDomRender = migrateReactDomRender;
64
- exports.default = update;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function updateExternalEmotionJsxRuntime(tree: Tree): Promise<void>;
3
- export default updateExternalEmotionJsxRuntime;
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.updateExternalEmotionJsxRuntime = void 0;
4
- const devkit_1 = require("@nx/devkit");
5
- const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
6
- async function updateExternalEmotionJsxRuntime(tree) {
7
- (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/web:rollup', (options, projectName, targetName, configurationName) => {
8
- const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, projectName);
9
- const config = configurationName
10
- ? projectConfiguration.targets[targetName].configurations[configurationName]
11
- : projectConfiguration.targets[targetName].options;
12
- if (config.external && config.external.length > 0) {
13
- const hasEmotionStyledBase = config.external.includes('@emotion/styled/base');
14
- const hasReactJsxRuntime = config.external.includes('react/jsx-runtime');
15
- if (hasEmotionStyledBase && hasReactJsxRuntime) {
16
- // Replace 'react/jsx-runtime' with '@emotion/react/jsx-runtime'
17
- config.external.forEach((value, index) => {
18
- if (value === 'react/jsx-runtime') {
19
- config.external.splice(index, 1, '@emotion/react/jsx-runtime');
20
- }
21
- });
22
- // Remove '@emotion/styled/base'
23
- config.external.forEach((value, index) => {
24
- if (value === '@emotion/styled/base') {
25
- config.external.splice(index, 1);
26
- }
27
- });
28
- }
29
- (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfiguration);
30
- }
31
- });
32
- }
33
- exports.updateExternalEmotionJsxRuntime = updateExternalEmotionJsxRuntime;
34
- exports.default = updateExternalEmotionJsxRuntime;
@@ -1,3 +0,0 @@
1
- import { Tree } from '@nx/devkit';
2
- export declare function addBabelJestPresetTransformerOption(tree: Tree): void;
3
- export default addBabelJestPresetTransformerOption;
@@ -1,38 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.addBabelJestPresetTransformerOption = void 0;
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
- function addBabelJestPresetTransformerOption(tree) {
8
- (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/jest:jest', (options, project, target, configuration) => {
9
- if (options.jestConfig &&
10
- tree.exists(options.jestConfig) &&
11
- isReactProject(tree, (0, devkit_1.readProjectConfiguration)(tree, project))) {
12
- const oldConfig = tree.read(options.jestConfig, 'utf-8');
13
- const updatedConfig = tsquery_1.tsquery.replace(oldConfig, 'PropertyAssignment > StringLiteral[value="babel-jest"]', (node) => {
14
- return `['babel-jest', { presets: ['@nrwl/react/babel'] }]`;
15
- });
16
- tree.write(options.jestConfig, updatedConfig);
17
- }
18
- });
19
- }
20
- exports.addBabelJestPresetTransformerOption = addBabelJestPresetTransformerOption;
21
- function isReactProject(tree, projectConfig) {
22
- const knownInvalidExecutors = [
23
- '@nrwl/next:build',
24
- '@nrwl/angular',
25
- '@angular-devkit/build-angular:browser',
26
- '@nrwl/js:tsc',
27
- '@nrwl/js:swc',
28
- '@nrwl/workspace:run-commands',
29
- 'nx:run-commands',
30
- '@nrwl/node:webpack',
31
- ];
32
- if (knownInvalidExecutors.includes(projectConfig?.targets?.build?.executor) ||
33
- tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'next.config.js'))) {
34
- return false;
35
- }
36
- return true;
37
- }
38
- exports.default = addBabelJestPresetTransformerOption;