@nx/react 16.8.0-beta.1 → 16.8.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.8.0-beta.1",
+  "version": "16.8.0-beta.3",
   "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": {
@@ -31,11 +31,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.8.0-beta.1",
-    "@nx/devkit": "16.8.0-beta.1",
-    "@nx/js": "16.8.0-beta.1",
-    "@nx/linter": "16.8.0-beta.1",
-    "@nx/web": "16.8.0-beta.1",
+    "@nrwl/react": "16.8.0-beta.3",
+    "@nx/devkit": "16.8.0-beta.3",
+    "@nx/js": "16.8.0-beta.3",
+    "@nx/linter": "16.8.0-beta.3",
+    "@nx/web": "16.8.0-beta.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "231a998e004c13e559c171ba6c164a9127886153"
+  "gitHead": "dcd48165a485bc8db57a1fb02b96a0772de3b7e9"
 }

package/src/generators/application/application.js

@@ -22,6 +22,7 @@ const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencie
 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/linter/src/generators/utils/eslint-file");
 function addLinting(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
@@ -41,7 +42,9 @@ function addLinting(host, options) {
                 skipPackageJson: options.skipPackageJson,
             });
             tasks.push(lintTask);
-            (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, '.eslintrc.json'), lint_1.extendReactEslintJson);
+            if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
+                (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, 'plugin:@nx/react');
+            }
             if (!options.skipPackageJson) {
                 const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
                 const addSwcTask = (0, add_swc_dependencies_1.addSwcDependencies)(host);

package/src/generators/application/lib/create-application-files.js

@@ -56,32 +56,36 @@ function createApplicationFiles(host, options) {
                 ].filter(Boolean),
             });
         }
-        else if (options.style === 'styled-components' ||
-            options.style === '@emotion/styled' ||
-            options.style === 'styled-jsx') {
-            (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.swcrc`, {
+        else if (options.compiler === 'swc') {
+            const swcrc = {
                 jsc: {
-                    experimental: {
-                        plugins: [
-                            options.style === 'styled-components'
-                                ? [
-                                    '@swc/plugin-styled-components',
-                                    {
-                                        displayName: true,
-                                        ssr: true,
-                                    },
-                                ]
-                                : undefined,
-                            options.style === 'styled-jsx'
-                                ? ['@swc/plugin-styled-jsx', {}]
-                                : undefined,
-                            options.style === '@emotion/styled'
-                                ? ['@swc/plugin-emotion', {}]
-                                : undefined,
-                        ].filter(Boolean),
-                    },
+                    target: 'es2016',
                 },
-            });
+            };
+            if (options.style === 'styled-components') {
+                swcrc.jsc.experimental = {
+                    plugins: [
+                        [
+                            '@swc/plugin-styled-components',
+                            {
+                                displayName: true,
+                                ssr: true,
+                            },
+                        ],
+                    ],
+                };
+            }
+            else if (options.style === '@emotion/styled') {
+                swcrc.jsc.experimental = {
+                    plugins: [['@swc/plugin-emotion', {}]],
+                };
+            }
+            else if (options.style === 'styled-jsx') {
+                swcrc.jsc.experimental = {
+                    plugins: [['@swc/plugin-styled-jsx', {}]],
+                };
+            }
+            (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.swcrc`, swcrc);
         }
     }
     else if (options.bundler === 'rspack') {

package/src/generators/application/lib/normalize-options.js

@@ -32,20 +32,8 @@ function normalizeOptions(host, options, callingGenerator = '@nx/react:applicati
         });
         options.rootProject = appProjectRoot === '.';
         options.projectNameAndRootFormat = projectNameAndRootFormat;
-        let e2eProjectName = 'e2e';
-        let e2eProjectRoot = 'e2e';
-        if (!options.rootProject) {
-            const projectNameAndRoot = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
-                name: `${options.name}-e2e`,
-                projectType: 'application',
-                directory: options.directory,
-                projectNameAndRootFormat: options.projectNameAndRootFormat,
-                rootProject: options.rootProject,
-                callingGenerator,
-            });
-            e2eProjectName = projectNameAndRoot.projectName;
-            e2eProjectRoot = projectNameAndRoot.projectRoot;
-        }
+        const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
+        const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
         const parsedTags = options.tags
             ? options.tags.split(',').map((s) => s.trim())
             : [];

package/src/generators/component/component.js

@@ -10,6 +10,7 @@ const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source
 const versions_1 = require("../../utils/versions");
 const get_component_tests_1 = require("./get-component-tests");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
 function componentGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const options = yield normalizeOptions(host, schema);
@@ -32,7 +33,7 @@ exports.componentGenerator = componentGenerator;
 function createComponentFiles(host, options) {
     const componentDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
     const componentTests = (0, get_component_tests_1.getComponentTests)(options);
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), componentDir, Object.assign(Object.assign({}, options), { componentTests, inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests), tmpl: '' }));
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), componentDir, Object.assign(Object.assign({}, options), { componentTests, inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests), tmpl: '' }));
     for (const c of host.listChanges()) {
         let deleteFile = false;
         if ((options.skipTests || options.inSourceTests) &&

package/src/generators/component-test/component-test.js

@@ -66,7 +66,7 @@ function generateSpecsForComponents(tree, filePath) {
         }, [])
             .join(', ');
         const namedImportStatement = namedImports.length > 0 ? `, { ${namedImports} }` : '';
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), componentDir, {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), componentDir, {
             fileName,
             components,
             importStatement: defaultExport

package/src/generators/hook/hook.js

@@ -6,6 +6,7 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const ast_utils_1 = require("../../utils/ast-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
 function hookGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const options = yield normalizeOptions(host, schema);
@@ -17,7 +18,7 @@ function hookGenerator(host, schema) {
 exports.hookGenerator = hookGenerator;
 function createFiles(host, options) {
     const hookDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), hookDir, Object.assign(Object.assign({}, options), { tmpl: '' }));
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), hookDir, Object.assign(Object.assign({}, options), { tmpl: '' }));
     for (const c of host.listChanges()) {
         let deleteFile = false;
         if (options.skipTests && /.*spec.ts/.test(c.path)) {

package/src/generators/host/host.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hostGeneratorInternal = exports.hostGenerator = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
+const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
 const application_1 = require("../application/application");
 const normalize_options_1 = require("../application/lib/normalize-options");
-const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
-const add_module_federation_files_1 = require("./lib/add-module-federation-files");
-const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
 const remote_1 = require("../remote/remote");
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
+const add_module_federation_files_1 = require("./lib/add-module-federation-files");
+const normalize_remote_1 = require("./lib/normalize-remote");
 const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
+const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
 function hostGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         return hostGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
@@ -31,10 +32,11 @@ function hostGeneratorInternal(host, schema) {
         if (schema.remotes) {
             let remotePort = options.devServerPort + 1;
             for (const remote of schema.remotes) {
-                remotesWithPorts.push({ name: remote, port: remotePort });
+                const remoteName = yield (0, normalize_remote_1.normalizeRemoteName)(host, remote, options);
+                remotesWithPorts.push({ name: remoteName, port: remotePort });
                 yield (0, remote_1.default)(host, {
                     name: remote,
-                    directory: options.directory,
+                    directory: (0, normalize_remote_1.normalizeRemoteDirectory)(remote, options),
                     style: options.style,
                     unitTestRunner: options.unitTestRunner,
                     e2eTestRunner: options.e2eTestRunner,
@@ -42,6 +44,7 @@ function hostGeneratorInternal(host, schema) {
                     devServerPort: remotePort,
                     ssr: options.ssr,
                     skipFormat: true,
+                    projectNameAndRootFormat: options.projectNameAndRootFormat,
                 });
                 remotePort++;
             }

package/src/generators/host/lib/add-module-federation-files.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addModuleFederationFiles = void 0;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
-const normalize_options_1 = require("../../application/lib/normalize-options");
 function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     const templateVariables = Object.assign(Object.assign(Object.assign({}, (0, devkit_1.names)(options.name)), options), { tmpl: '', remotes: defaultRemoteManifest.map(({ name, port }) => {
-            const remote = (0, normalize_options_1.normalizeProjectName)(Object.assign(Object.assign({}, options), { name }));
-            return Object.assign(Object.assign({}, (0, devkit_1.names)(remote)), { port });
+            return Object.assign(Object.assign({}, (0, devkit_1.names)(name)), { port });
         }) });
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in

package/src/generators/host/lib/normalize-remote.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function normalizeRemoteName(tree: Tree, remote: string, options: NormalizedSchema): Promise<string>;
+export declare function normalizeRemoteDirectory(remote: string, options: NormalizedSchema): string;

package/src/generators/host/lib/normalize-remote.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeRemoteDirectory = exports.normalizeRemoteName = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+function normalizeRemoteName(tree, remote, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { projectName: remoteName } = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+            name: remote,
+            projectType: 'application',
+            directory: options.directory,
+            projectNameAndRootFormat: options.projectNameAndRootFormat,
+            callingGenerator: '@nx/react:host',
+        });
+        return remoteName;
+    });
+}
+exports.normalizeRemoteName = normalizeRemoteName;
+function normalizeRemoteDirectory(remote, options) {
+    if (options.projectNameAndRootFormat === 'derived' || !options.directory) {
+        return options.directory;
+    }
+    /**
+     * With the `as-provided` format, the provided directory would be the root
+     * of the host application. Append the remote name to the host parent
+     * directory to get the remote directory.
+     */
+    return (0, devkit_1.joinPathFragments)(options.directory, '..', remote);
+}
+exports.normalizeRemoteDirectory = normalizeRemoteDirectory;

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -4,7 +4,6 @@ exports.setupSsrForHost = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
-const normalize_options_1 = require("../../application/lib/normalize-options");
 function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
@@ -12,8 +11,7 @@ function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
         project.targets.serve.executor = '@nx/react:module-federation-ssr-dev-server';
         (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/module-federation-ssr'), project.root, Object.assign(Object.assign({}, options), { remotes: defaultRemoteManifest.map(({ name, port }) => {
-                const remote = (0, normalize_options_1.normalizeProjectName)(Object.assign(Object.assign({}, options), { name }));
-                return Object.assign(Object.assign({}, (0, devkit_1.names)(remote)), { port });
+                return Object.assign(Object.assign({}, (0, devkit_1.names)(name)), { port });
             }), appName, tmpl: '', browserBuildOutputPath: project.targets.build.options.outputPath }));
         const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
             '@module-federation/node': versions_1.moduleFederationNodeVersion,

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

@@ -4,9 +4,9 @@ exports.addLinting = void 0;
 const tslib_1 = require("tslib");
 const linter_1 = require("@nx/linter");
 const path_1 = require("nx/src/utils/path");
-const json_1 = require("nx/src/generators/utils/json");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("../../../utils/lint");
+const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
 function addLinting(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         if (options.linter === linter_1.Linter.EsLint) {
@@ -22,7 +22,9 @@ function addLinting(host, options) {
                 skipPackageJson: options.skipPackageJson,
                 setParserOptionsProject: options.setParserOptionsProject,
             });
-            (0, json_1.updateJson)(host, (0, path_1.joinPathFragments)(options.projectRoot, '.eslintrc.json'), lint_1.extendReactEslintJson);
+            if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
+                (0, eslint_file_1.addExtendsToLintConfig)(host, options.projectRoot, 'plugin:@nx/react');
+            }
             let installTask = () => { };
             if (!options.skipPackageJson) {
                 installTask = yield (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);

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

@@ -7,6 +7,7 @@ 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");
+const path_1 = require("path");
 let tsModule;
 function readEntryFile(host, path) {
     if (!tsModule) {
@@ -126,7 +127,7 @@ function setupSsrGenerator(tree, options) {
                 'server',
             ];
         }
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), projectRoot, {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
             tmpl: '',
             extraInclude: ((_e = options.extraInclude) === null || _e === void 0 ? void 0 : _e.length) > 0
                 ? `"${options.extraInclude.join('", "')}",`

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

@@ -6,6 +6,7 @@ const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const add_tailwind_style_imports_1 = require("./lib/add-tailwind-style-imports");
 const update_project_1 = require("./lib/update-project");
+const path_1 = require("path");
 function setupTailwindGenerator(tree, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const tasks = [];
@@ -15,7 +16,7 @@ function setupTailwindGenerator(tree, options) {
             devkit_1.logger.info(`Skipping setup since there are existing PostCSS or Tailwind configuration files. For manual setup instructions, see https://nx.dev/guides/using-tailwind-css-in-react.`);
             return;
         }
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files'), project.root, {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, {
             tmpl: '',
         });
         (0, add_tailwind_style_imports_1.addTailwindStyleImports)(tree, project, options);

package/src/utils/lint.d.ts

@@ -1,4 +1,4 @@
-import type { Linter } from 'eslint';
+import { Linter } from 'eslint';
 export declare const extraEslintDependencies: {
     dependencies: {};
     devDependencies: {
@@ -8,6 +8,9 @@ export declare const extraEslintDependencies: {
         'eslint-plugin-react-hooks': string;
     };
 };
+/**
+ * @deprecated Use `addExtendsToLintConfig` from `@nx/linter` instead.
+ */
 export declare const extendReactEslintJson: (json: Linter.Config) => {
     ignorePatterns?: string | string[];
     root?: boolean;
@@ -16,7 +19,7 @@ export declare const extendReactEslintJson: (json: Linter.Config) => {
         [name: string]: boolean;
     };
     globals?: {
-        [name: string]: boolean | "readonly" | "readable" | "writable" | "writeable";
+        [name: string]: boolean | "off" | "readonly" | "readable" | "writable" | "writeable";
     };
     noInlineConfig?: boolean;
     overrides?: Linter.ConfigOverride<Linter.RulesRecord>[];

package/src/utils/lint.js

@@ -12,6 +12,9 @@ exports.extraEslintDependencies = {
         'eslint-plugin-react-hooks': versions_1.eslintPluginReactHooksVersion,
     },
 };
+/**
+ * @deprecated Use `addExtendsToLintConfig` from `@nx/linter` instead.
+ */
 const extendReactEslintJson = (json) => {
     const { extends: pluginExtends } = json, config = tslib_1.__rest(json, ["extends"]);
     return Object.assign({ extends: ['plugin:@nx/react', ...(pluginExtends || [])] }, config);