@nx/react 17.1.0-beta.4 → 17.1.0-rc.0

package/index.d.ts

@@ -19,3 +19,4 @@ export { componentTestGenerator } from './src/generators/component-test/componen
 export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
 export type { SupportedStyles } from './typings/style';
 export * from './plugins/with-react';
+export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

package/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
+exports.NxReactWebpackPlugin = exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
 const tslib_1 = require("tslib");
 var lint_1 = require("./src/utils/lint");
 Object.defineProperty(exports, "extraEslintDependencies", { enumerable: true, get: function () { return lint_1.extraEslintDependencies; } });
@@ -43,3 +43,5 @@ Object.defineProperty(exports, "componentTestGenerator", { enumerable: true, get
 var setup_tailwind_1 = require("./src/generators/setup-tailwind/setup-tailwind");
 Object.defineProperty(exports, "setupTailwindGenerator", { enumerable: true, get: function () { return setup_tailwind_1.setupTailwindGenerator; } });
 tslib_1.__exportStar(require("./plugins/with-react"), exports);
+var nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
+Object.defineProperty(exports, "NxReactWebpackPlugin", { enumerable: true, get: function () { return nx_react_webpack_plugin_1.NxReactWebpackPlugin; } });

package/package.json

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

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts

@@ -0,0 +1,4 @@
+import { Configuration, WebpackOptionsNormalized } from 'webpack';
+export declare function applyReactConfig(options: {
+    svgr?: boolean;
+}, config?: Partial<WebpackOptionsNormalized | Configuration>): void;

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyReactConfig = void 0;
+function applyReactConfig(options, config = {}) {
+    addHotReload(config);
+    if (options.svgr !== false) {
+        removeSvgLoaderIfPresent(config);
+        config.module.rules.push({
+            test: /\.svg$/,
+            issuer: /\.(js|ts|md)x?$/,
+            use: [
+                {
+                    loader: require.resolve('@svgr/webpack'),
+                    options: {
+                        svgo: false,
+                        titleProp: true,
+                        ref: true,
+                    },
+                },
+                {
+                    loader: require.resolve('file-loader'),
+                    options: {
+                        name: '[name].[hash].[ext]',
+                    },
+                },
+            ],
+        });
+    }
+    // enable webpack node api
+    config.node = {
+        __dirname: true,
+        __filename: true,
+    };
+}
+exports.applyReactConfig = applyReactConfig;
+function addHotReload(config) {
+    if (config.mode === 'development' && config['devServer']?.hot) {
+        // add `react-refresh/babel` to babel loader plugin
+        const babelLoader = config.module.rules.find((rule) => rule &&
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader'));
+        if (babelLoader && typeof babelLoader !== 'string') {
+            babelLoader.options['plugins'] = [
+                ...(babelLoader.options['plugins'] || []),
+                [
+                    require.resolve('react-refresh/babel'),
+                    {
+                        skipEnvCheck: true,
+                    },
+                ],
+            ];
+        }
+        const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+        config.plugins.push(new ReactRefreshPlugin());
+    }
+}
+// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
+// See https://github.com/nrwl/nx/issues/14383
+function removeSvgLoaderIfPresent(config) {
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    if (svgLoaderIdx === -1)
+        return;
+    config.module.rules.splice(svgLoaderIdx, 1);
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts

@@ -0,0 +1,8 @@
+import { Compiler } from 'webpack';
+export declare class NxReactWebpackPlugin {
+    private options;
+    constructor(options?: {
+        svgr?: boolean;
+    });
+    apply(compiler: Compiler): void;
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReactWebpackPlugin = void 0;
+const apply_react_config_1 = require("./lib/apply-react-config");
+class NxReactWebpackPlugin {
+    constructor(options = {}) {
+        this.options = options;
+    }
+    apply(compiler) {
+        (0, apply_react_config_1.applyReactConfig)(this.options, compiler.options);
+    }
+}
+exports.NxReactWebpackPlugin = NxReactWebpackPlugin;

package/plugins/storybook/merge-plugins.d.ts

@@ -1,3 +1,3 @@
 import { ResolvePluginInstance, RuleSetRule, WebpackPluginInstance } from 'webpack';
-export declare const mergeRules: (...args: RuleSetRule[]) => (RuleSetRule | WebpackPluginInstance)[];
+export declare const mergeRules: (...args: RuleSetRule[]) => (WebpackPluginInstance | RuleSetRule)[];
 export declare const mergePlugins: (...args: (WebpackPluginInstance | ResolvePluginInstance)[]) => (WebpackPluginInstance | ResolvePluginInstance)[];

package/plugins/with-react.d.ts

@@ -1,6 +1,5 @@
 import type { Configuration } from 'webpack';
-import type { WithWebOptions } from '@nx/webpack';
-import type { NxWebpackExecutionContext } from '@nx/webpack';
+import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
 interface WithReactOptions extends WithWebOptions {
     svgr?: false;
 }

package/plugins/with-react.js

@@ -1,36 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withReact = void 0;
+const apply_react_config_1 = require("./nx-react-webpack-plugin/lib/apply-react-config");
 const processed = new Set();
-function addHotReload(config) {
-    if (config.mode === 'development' && config['devServer']?.hot) {
-        // add `react-refresh/babel` to babel loader plugin
-        const babelLoader = config.module.rules.find((rule) => rule &&
-            typeof rule !== 'string' &&
-            rule.loader?.toString().includes('babel-loader'));
-        if (babelLoader && typeof babelLoader !== 'string') {
-            babelLoader.options['plugins'] = [
-                ...(babelLoader.options['plugins'] || []),
-                [
-                    require.resolve('react-refresh/babel'),
-                    {
-                        skipEnvCheck: true,
-                    },
-                ],
-            ];
-        }
-        const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-        config.plugins.push(new ReactRefreshPlugin());
-    }
-}
-// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
-// See https://github.com/nrwl/nx/issues/14383
-function removeSvgLoaderIfPresent(config) {
-    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
-    if (svgLoaderIdx === -1)
-        return;
-    config.module.rules.splice(svgLoaderIdx, 1);
-}
 /**
  * @param {WithReactOptions} pluginOptions
  * @returns {NxWebpackPlugin}
@@ -42,35 +14,7 @@ function withReact(pluginOptions = {}) {
             return config;
         // Apply web config for CSS, JSX, index.html handling, etc.
         config = withWeb(pluginOptions)(config, context);
-        addHotReload(config);
-        if (pluginOptions?.svgr !== false) {
-            removeSvgLoaderIfPresent(config);
-            config.module.rules.push({
-                test: /\.svg$/,
-                issuer: /\.(js|ts|md)x?$/,
-                use: [
-                    {
-                        loader: require.resolve('@svgr/webpack'),
-                        options: {
-                            svgo: false,
-                            titleProp: true,
-                            ref: true,
-                        },
-                    },
-                    {
-                        loader: require.resolve('file-loader'),
-                        options: {
-                            name: '[name].[hash].[ext]',
-                        },
-                    },
-                ],
-            });
-        }
-        // enable webpack node api
-        config.node = {
-            __dirname: true,
-            __filename: true,
-        };
+        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
         processed.add(config);
         return config;
     };

package/src/generators/federate-module/federate-module.js

@@ -59,10 +59,10 @@ async function federateModuleGenerator(tree, schema) {
     Now you can use the module from your host app like this:
 
     Static import:
-    import { MyComponent } from '${schema.name}/${remoteName}';
+    import { MyComponent } from '${remoteName}/${schema.name}';
     
     Dynamic import:
-    import('${schema.name}/${remoteName}').then((m) => m.${remoteName});
+    import('${remoteName}/${schema.name}').then((m) => m.${schema.name});
   `);
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }

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

@@ -18,12 +18,16 @@ async function setupSsrForRemote(tree, options, appName) {
     });
     // For hosts to use when running remotes in static mode.
     const originalOutputPath = project.targets.build?.options?.outputPath;
+    const serverOptions = project.targets.server?.options;
+    const serverOutputPath = serverOptions?.outputPath ??
+        (0, devkit_1.joinPathFragments)(originalOutputPath, 'server');
+    const serverOutputName = serverOptions?.outputName ?? 'main.js';
     project.targets['serve-static'] = {
         dependsOn: ['build', 'server'],
         executor: 'nx:run-commands',
         defaultConfiguration: 'development',
         options: {
-            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(originalOutputPath, 'server', 'main.js')}`,
+            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(serverOutputPath, serverOutputName)}`,
         },
     };
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);