@nx/react 19.7.0-canary.20240816-ce2dff3 → 19.7.0-canary.20240820-0853690

package/README.md

@@ -22,7 +22,7 @@
 
 # Nx: Smart Monorepos · Fast CI
 
-Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
+Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
 
 This package is a [React plugin for Nx](https://nx.dev/nx-api/react).
 

package/migrations.json

@@ -53,6 +53,12 @@
       "version": "19.6.0-beta.4",
       "description": "Update the server file for Module Federation SSR port value to be the same as the 'serve' target port value.",
       "factory": "./src/migrations/update-19-6-0/update-ssr-server-port"
+    },
+    "update-19-6-1-ensure-module-federation-target-defaults": {
+      "cli": "nx",
+      "version": "19.6.1-beta.0",
+      "description": "Ensure Target Defaults are set correctly for Module Federation.",
+      "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.7.0-canary.20240816-ce2dff3",
+  "version": "19.7.0-canary.20240820-0853690",
   "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, 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.",
   "repository": {
@@ -39,11 +39,11 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "~0.2.3",
-    "@nx/devkit": "19.7.0-canary.20240816-ce2dff3",
-    "@nx/js": "19.7.0-canary.20240816-ce2dff3",
-    "@nx/eslint": "19.7.0-canary.20240816-ce2dff3",
-    "@nx/web": "19.7.0-canary.20240816-ce2dff3",
-    "@nrwl/react": "19.7.0-canary.20240816-ce2dff3"
+    "@nx/devkit": "19.7.0-canary.20240820-0853690",
+    "@nx/js": "19.7.0-canary.20240820-0853690",
+    "@nx/eslint": "19.7.0-canary.20240820-0853690",
+    "@nx/web": "19.7.0-canary.20240820-0853690",
+    "@nrwl/react": "19.7.0-canary.20240820-0853690"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -187,7 +187,10 @@ async function* moduleFederationDevServer(options, context) {
     }, pathToManifestFile);
     options.staticRemotesPort ??= remotes.staticRemotePort;
     // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
-    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify([
+        ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []),
+        p.name,
+    ]);
     const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');

package/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.js

@@ -162,7 +162,10 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
         root: context.root,
     }, pathToManifestFile);
     options.staticRemotesPort ??= remotes.staticRemotePort;
-    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify([
+        ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []),
+        projectConfig.name,
+    ]);
     const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options);

package/src/generators/application/schema.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -12,7 +12,7 @@ export interface Schema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   inSourceTests?: boolean;
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
-  linter: Linter;
+  linter: Linter | LinterType;
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   routing?: boolean;

package/src/generators/federate-module/schema.d.ts

@@ -1,3 +1,5 @@
+import { Linter, LinterType } from '@nx/eslint';
+
 export interface Schema {
   name: string;
   path: string;
@@ -6,7 +8,7 @@ export interface Schema {
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   host?: string;
-  linter?: Linter;
+  linter?: Linter | LinterType;
   skipFormat?: boolean;
   style?: SupportedStyles;
   unitTestRunner?: 'jest' | 'vitest' | 'none';

package/src/generators/host/schema.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -11,7 +11,7 @@ export interface Schema {
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
   globalCss?: boolean;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   remotes?: string[];

package/src/generators/library/library.js

@@ -137,7 +137,11 @@ async function libraryGeneratorInternal(host, schema) {
                 "'react-dom'",
                 "'react/jsx-runtime'",
             ],
-            imports: [`import react from '@vitejs/plugin-react'`],
+            imports: [
+                options.compiler === 'swc'
+                    ? `import react from '@vitejs/plugin-react-swc'`
+                    : `import react from '@vitejs/plugin-react'`,
+            ],
             plugins: ['react()'],
         }, true);
     }

package/src/generators/library/schema.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -14,7 +14,7 @@ export interface Schema {
   importPath?: string;
   inSourceTests?: boolean;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   publishable?: boolean;

package/src/generators/remote/schema.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
 
@@ -13,7 +13,7 @@ export interface Schema {
   globalCss?: boolean;
   host?: string;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   routing?: boolean;

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/eslint';
+import { Linter, LinterType } from '@nx/eslint';
 
 export interface StorybookConfigureSchema {
   project: string;
@@ -6,7 +6,7 @@ export interface StorybookConfigureSchema {
   generateStories?: boolean;
   js?: boolean;
   tsConfiguration?: boolean;
-  linter?: Linter;
+  linter?: Linter | LinterType;
   ignorePaths?: string[];
   configureStaticServe?: boolean;
   configureCypress?: boolean;

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+async function default_1(tree) {
+    let usesModuleFederation = false;
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, projectName, targetName) => {
+        const webpackConfig = options.webpackConfig;
+        if (!webpackConfig) {
+            return;
+        }
+        const webpackContents = tree.read(webpackConfig, 'utf-8');
+        if (['withModuleFederation', 'withModuleFederationForSSR'].some((p) => webpackContents.includes(p))) {
+            usesModuleFederation = true;
+        }
+    });
+    if (!usesModuleFederation) {
+        return;
+    }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const nxMFDevRemotesEnvVar = 'NX_MF_DEV_REMOTES';
+    if (!nxJson.targetDefaults ||
+        !nxJson.targetDefaults?.['@nx/webpack:webpack']) {
+        nxJson.targetDefaults ??= {};
+        nxJson.targetDefaults['@nx/webpack:webpack'] = {
+            cache: true,
+            inputs: ['production', '^production', { env: nxMFDevRemotesEnvVar }],
+            dependsOn: ['^build'],
+        };
+    }
+    else {
+        nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn ??= [];
+        if (!nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.includes('^build')) {
+            nxJson.targetDefaults['@nx/webpack:webpack'].dependsOn.push('^build');
+        }
+        nxJson.targetDefaults['@nx/webpack:webpack'].inputs ??= [];
+        if (!nxJson.targetDefaults['@nx/webpack:webpack'].inputs.find((i) => typeof i === 'string' ? false : i['env'] === nxMFDevRemotesEnvVar)) {
+            nxJson.targetDefaults['@nx/webpack:webpack'].inputs.push({
+                env: nxMFDevRemotesEnvVar,
+            });
+        }
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+    await (0, devkit_1.formatFiles)(tree);
+}

package/src/utils/add-mf-env-to-inputs.js

@@ -12,6 +12,7 @@ function addMfEnvToTargetDefaultInputs(tree) {
         'production',
         '^production',
     ];
+    nxJson.targetDefaults[webpackExecutor].dependsOn ??= ['^build'];
     let mfEnvVarExists = false;
     for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {