@nx/react 23.0.0-beta.20 → 23.0.0-beta.21

package/src/generators/provider/files/vite/vite.config.ts__tmpl__

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { federation } from '@module-federation/vite';
+
+// Port deliberately avoids 5000 (macOS AirTunes binds it on 0.0.0.0, leading
+// to silent EADDRINUSE on 127.0.0.1). Override `--port` only if 5000+ is free.
+const PORT = <%= port %>;
+
+export default defineConfig({
+  server: {
+    port: PORT,
+    strictPort: true,
+    origin: `http://localhost:${PORT}`,
+    host: '127.0.0.1',
+    // Allow cross-origin fetches of mf-manifest.json + chunks from a consumer
+    // running on a different port. Vite 8 narrows the default CORS allowlist
+    // to specific localhost patterns; setting `cors: true` emits a wildcard
+    // `Access-Control-Allow-Origin: *` for dev which is what federation needs.
+    cors: true,
+  },
+  preview: { port: PORT, strictPort: true, cors: true },
+  build: { target: 'chrome89' },
+  plugins: [
+    federation({
+      name: '<%= federationName %>',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './<%= exposeName %>': './src/<%= componentName %>.tsx',
+      },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+    react(),
+  ],
+});

package/src/generators/provider/provider.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import type { ProviderGeneratorSchema } from './schema';
+export declare function providerGenerator(tree: Tree, schema: ProviderGeneratorSchema): Promise<GeneratorCallback>;
+export default providerGenerator;
+//# sourceMappingURL=provider.d.ts.map

package/src/generators/provider/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/provider/provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIjB,IAAI,EACL,MAAM,YAAY,CAAC;AAWpB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAgBxD,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,uBAAuB,GAC9B,OAAO,CAAC,iBAAiB,CAAC,CAwF5B;AAED,eAAe,iBAAiB,CAAC"}

package/src/generators/provider/provider.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.providerGenerator = providerGenerator;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("@nx/js/src/utils/versions");
+const versions_2 = require("../../utils/versions");
+const mfVersions = tslib_1.__importStar(require("../_utils/mf-versions"));
+const mf_dependencies_1 = require("../_utils/mf-dependencies");
+const normalize_1 = require("../_utils/normalize");
+// `--mode=...` is rspack's portable equivalent of `NODE_ENV=...` and works on
+// Windows without a shell prefix.
+const BUNDLER_DEV_COMMAND = {
+    vite: 'vite',
+    rsbuild: 'rsbuild dev',
+    rspack: 'rspack serve --mode=development',
+};
+const BUNDLER_BUILD_COMMAND = {
+    vite: 'vite build',
+    rsbuild: 'rsbuild build',
+    rspack: 'rspack build --mode=production',
+};
+async function providerGenerator(tree, schema) {
+    const opts = await (0, normalize_1.normalizeScaffoldOptions)(tree, {
+        directory: schema.directory,
+        surface: 'provider',
+        bundler: schema.bundler,
+        port: schema.port,
+    });
+    // `exposeName` is the public MF expose key (consumers reference
+    // `<provider>/<exposeName>`) and may be kebab-case, e.g. `cart-widget`.
+    // `componentName` is the PascalCase identifier used for the React function
+    // and its filename, since `export function cart-widget()` would be invalid.
+    const exposeName = schema.exposeName?.trim() || 'App';
+    const componentName = (0, devkit_1.names)(exposeName).className;
+    // `dependsOn` on a `continuous: true` target lets nx spin up the consumer
+    // alongside the provider - matches the deprecated host/remote 'serve a
+    // remote, host comes along' UX. Only wired when --consumer is set (e.g.
+    // when the consumer generator scaffolds this provider).
+    const serveTarget = {
+        executor: 'nx:run-commands',
+        continuous: true,
+        options: {
+            command: BUNDLER_DEV_COMMAND[opts.bundler],
+            cwd: opts.projectRoot,
+        },
+    };
+    if (schema.consumer) {
+        serveTarget.dependsOn = [`${schema.consumer}:serve`];
+    }
+    (0, devkit_1.addProjectConfiguration)(tree, opts.projectName, {
+        root: opts.projectRoot,
+        sourceRoot: (0, devkit_1.joinPathFragments)(opts.projectRoot, 'src'),
+        projectType: 'application',
+        targets: {
+            serve: serveTarget,
+            build: {
+                executor: 'nx:run-commands',
+                options: {
+                    command: BUNDLER_BUILD_COMMAND[opts.bundler],
+                    cwd: opts.projectRoot,
+                },
+            },
+        },
+    });
+    const templateSubstitutions = {
+        projectName: opts.projectName,
+        federationName: opts.federationName,
+        port: opts.port,
+        exposeName,
+        componentName,
+        versions: {
+            ...mfVersions,
+            reactVersion: versions_2.reactVersion,
+            reactDomVersion: versions_2.reactDomVersion,
+            typesReactVersion: versions_2.typesReactVersion,
+            typesReactDomVersion: versions_2.typesReactDomVersion,
+            typescriptVersion: versions_1.typescriptVersion,
+        },
+        tmpl: '',
+    };
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', '_common'), opts.projectRoot, templateSubstitutions);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', opts.bundler), opts.projectRoot, templateSubstitutions);
+    // Write deps into the workspace root package.json so bare bundler bins
+    // resolve when nx invokes the generated run-commands serve target. The
+    // per-project package.json template still ships for pnpm-workspace setups.
+    const deps = (0, mf_dependencies_1.getProviderDeps)(opts.bundler);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, deps.dependencies, deps.devDependencies);
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_1.runTasksInSerial)(installTask);
+}
+exports.default = providerGenerator;

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

@@ -0,0 +1,9 @@
+import type { SupportedBundler } from '../_utils/normalize';
+
+export interface ProviderGeneratorSchema {
+  directory: string;
+  bundler?: SupportedBundler;
+  port?: number;
+  exposeName?: string;
+  consumer?: string;
+}

package/src/generators/provider/schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxReactProvider",
+  "title": "Create a Module Federation provider",
+  "description": "Scaffold a React Module Federation provider that exposes a federated component. The bundler is selected at generation time; the generated project has no Nx-wrapped bundler config.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "directory": {
+      "type": "string",
+      "description": "Directory the provider is generated in, e.g. `apps/my-provider`. The project name (also used as the federation `name`, with hyphens converted to underscores) is inferred from the trailing path segment.",
+      "alias": "dir",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which directory do you want to create the provider in?"
+    },
+    "bundler": {
+      "type": "string",
+      "description": "Bundler used by the provider. The choice is final - the bundler config is too different to switch later.",
+      "enum": ["vite", "rsbuild", "rspack"],
+      "default": "vite",
+      "x-prompt": {
+        "message": "Which bundler should the provider use?",
+        "type": "list",
+        "items": [
+          { "value": "vite", "label": "Vite (default)" },
+          { "value": "rsbuild", "label": "Rsbuild" },
+          { "value": "rspack", "label": "Rspack" }
+        ]
+      }
+    },
+    "port": {
+      "type": "number",
+      "description": "Dev-server port the provider listens on. Defaults to a non-5000 port to avoid the macOS AirTunes collision on Vite."
+    },
+    "exposeName": {
+      "type": "string",
+      "description": "Name under which the federated component is exposed (consumers reference `<name>/<exposeName>`).",
+      "default": "App"
+    },
+    "consumer": {
+      "type": "string",
+      "description": "Name of a consumer project whose `serve` target this provider should depend on. When set, `nx serve <provider>` also spins up the consumer (the 'serve a remote, host comes along' UX from the deprecated host/remote generators). Set automatically when the provider is generated as part of `@nx/react:consumer --providerNames=...`."
+    }
+  },
+  "required": ["directory"]
+}

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

@@ -1 +1 @@
-{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/remote/remote.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,iBAAiB,EAOjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAmBpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAmFlC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAqK/D;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/remote/remote.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,iBAAiB,EAOjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAmFlC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAsK/D;AAED,eAAe,eAAe,CAAC"}

package/src/generators/remote/remote.js

@@ -12,6 +12,7 @@ const update_module_federation_project_1 = require("../../rules/update-module-fe
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const normalize_remote_1 = require("../../utils/normalize-remote");
 const maybe_js_1 = require("../../utils/maybe-js");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 const versions_1 = require("../../utils/versions");
 const application_1 = tslib_1.__importDefault(require("../application/application"));
 const create_application_files_1 = require("../application/lib/create-application-files");
@@ -68,6 +69,7 @@ function addModuleFederationFiles(host, options) {
     }
 }
 async function remoteGenerator(host, schema) {
+    (0, module_federation_deprecation_1.warnReactRemoteGeneratorDeprecation)();
     const tasks = [];
     const name = await (0, normalize_remote_1.normalizeRemoteName)(host, schema.name, schema);
     const options = {

package/src/utils/module-federation-deprecation.d.ts

@@ -0,0 +1,13 @@
+export declare const REACT_HOST_GENERATOR_DEPRECATION_MESSAGE = "The `@nx/react:host` generator is deprecated and will be removed in Nx v24. Use `nx g @nx/react:consumer` (dynamic federation, no static-serve orchestration). See https://nx.dev/docs/technologies/module-federation/consumer-and-provider for the v23 migration guide.";
+export declare const REACT_REMOTE_GENERATOR_DEPRECATION_MESSAGE = "The `@nx/react:remote` generator is deprecated and will be removed in Nx v24. Use `nx g @nx/react:provider` instead. See https://nx.dev/docs/technologies/module-federation/consumer-and-provider for the v23 migration guide.";
+export declare const REACT_FEDERATE_MODULE_GENERATOR_DEPRECATION_MESSAGE = "The `@nx/react:federate-module` generator is deprecated and will be removed in Nx v24. The new `@nx/react:provider` generator exposes modules directly. See https://nx.dev/docs/technologies/module-federation/consumer-and-provider for the v23 migration guide.";
+export declare const REACT_MF_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = "The `@nx/react:module-federation-dev-server` executor is deprecated and will be removed in Nx v24. Dynamic federation in `@nx/react:consumer` removes the need for host-orchestrated remote serving. See https://nx.dev/docs/technologies/module-federation/consumer-and-provider for the v23 migration guide.";
+export declare const REACT_MF_SSR_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = "The `@nx/react:module-federation-ssr-dev-server` executor is deprecated and will be removed in Nx v24. SSR is not first-classed in the new generators; see https://nx.dev/docs/technologies/module-federation/consumer-and-provider for guidance on wiring SSR with `@nx/react:consumer`.";
+export declare const REACT_MF_STATIC_SERVER_EXECUTOR_DEPRECATION_MESSAGE = "The `@nx/react:module-federation-static-server` executor is deprecated and will be removed in Nx v24. Use plain `vite preview` / `rsbuild preview` via `nx:run-commands` if a static-serve workflow is still needed. See https://nx.dev/docs/technologies/module-federation/consumer-and-provider for details.";
+export declare function warnReactHostGeneratorDeprecation(): void;
+export declare function warnReactRemoteGeneratorDeprecation(): void;
+export declare function warnReactFederateModuleGeneratorDeprecation(): void;
+export declare function warnReactMfDevServerExecutorDeprecation(): void;
+export declare function warnReactMfSsrDevServerExecutorDeprecation(): void;
+export declare function warnReactMfStaticServerExecutorDeprecation(): void;
+//# sourceMappingURL=module-federation-deprecation.d.ts.map

package/src/utils/module-federation-deprecation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module-federation-deprecation.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/utils/module-federation-deprecation.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,wCAAwC,6QAAyN,CAAC;AAE/Q,eAAO,MAAM,0CAA0C,mOAA+K,CAAC;AAEvO,eAAO,MAAM,mDAAmD,sQAAkN,CAAC;AAEnR,eAAO,MAAM,gDAAgD,mTAA+P,CAAC;AAE7T,eAAO,MAAM,oDAAoD,8RAA0O,CAAC;AAE5S,eAAO,MAAM,mDAAmD,mTAAmQ,CAAC;AAEpU,wBAAgB,iCAAiC,IAAI,IAAI,CAExD;AAED,wBAAgB,mCAAmC,IAAI,IAAI,CAE1D;AAED,wBAAgB,2CAA2C,IAAI,IAAI,CAElE;AAWD,wBAAgB,uCAAuC,IAAI,IAAI,CAK9D;AAED,wBAAgB,0CAA0C,IAAI,IAAI,CAKjE;AAED,wBAAgB,0CAA0C,IAAI,IAAI,CAKjE"}

package/src/utils/module-federation-deprecation.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACT_MF_STATIC_SERVER_EXECUTOR_DEPRECATION_MESSAGE = exports.REACT_MF_SSR_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = exports.REACT_MF_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = exports.REACT_FEDERATE_MODULE_GENERATOR_DEPRECATION_MESSAGE = exports.REACT_REMOTE_GENERATOR_DEPRECATION_MESSAGE = exports.REACT_HOST_GENERATOR_DEPRECATION_MESSAGE = void 0;
+exports.warnReactHostGeneratorDeprecation = warnReactHostGeneratorDeprecation;
+exports.warnReactRemoteGeneratorDeprecation = warnReactRemoteGeneratorDeprecation;
+exports.warnReactFederateModuleGeneratorDeprecation = warnReactFederateModuleGeneratorDeprecation;
+exports.warnReactMfDevServerExecutorDeprecation = warnReactMfDevServerExecutorDeprecation;
+exports.warnReactMfSsrDevServerExecutorDeprecation = warnReactMfSsrDevServerExecutorDeprecation;
+exports.warnReactMfStaticServerExecutorDeprecation = warnReactMfStaticServerExecutorDeprecation;
+const devkit_1 = require("@nx/devkit");
+// TODO(v24): Remove these surfaces. Replaced by `@nx/react:consumer`
+// and `@nx/react:provider` (React, dynamic federation, Vite/Rsbuild/Rspack).
+const MIGRATION_URL = 'https://nx.dev/docs/technologies/module-federation/consumer-and-provider';
+exports.REACT_HOST_GENERATOR_DEPRECATION_MESSAGE = `The \`@nx/react:host\` generator is deprecated and will be removed in Nx v24. Use \`nx g @nx/react:consumer\` (dynamic federation, no static-serve orchestration). See ${MIGRATION_URL} for the v23 migration guide.`;
+exports.REACT_REMOTE_GENERATOR_DEPRECATION_MESSAGE = `The \`@nx/react:remote\` generator is deprecated and will be removed in Nx v24. Use \`nx g @nx/react:provider\` instead. See ${MIGRATION_URL} for the v23 migration guide.`;
+exports.REACT_FEDERATE_MODULE_GENERATOR_DEPRECATION_MESSAGE = `The \`@nx/react:federate-module\` generator is deprecated and will be removed in Nx v24. The new \`@nx/react:provider\` generator exposes modules directly. See ${MIGRATION_URL} for the v23 migration guide.`;
+exports.REACT_MF_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = `The \`@nx/react:module-federation-dev-server\` executor is deprecated and will be removed in Nx v24. Dynamic federation in \`@nx/react:consumer\` removes the need for host-orchestrated remote serving. See ${MIGRATION_URL} for the v23 migration guide.`;
+exports.REACT_MF_SSR_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE = `The \`@nx/react:module-federation-ssr-dev-server\` executor is deprecated and will be removed in Nx v24. SSR is not first-classed in the new generators; see ${MIGRATION_URL} for guidance on wiring SSR with \`@nx/react:consumer\`.`;
+exports.REACT_MF_STATIC_SERVER_EXECUTOR_DEPRECATION_MESSAGE = `The \`@nx/react:module-federation-static-server\` executor is deprecated and will be removed in Nx v24. Use plain \`vite preview\` / \`rsbuild preview\` via \`nx:run-commands\` if a static-serve workflow is still needed. See ${MIGRATION_URL} for details.`;
+function warnReactHostGeneratorDeprecation() {
+    devkit_1.logger.warn(exports.REACT_HOST_GENERATOR_DEPRECATION_MESSAGE);
+}
+function warnReactRemoteGeneratorDeprecation() {
+    devkit_1.logger.warn(exports.REACT_REMOTE_GENERATOR_DEPRECATION_MESSAGE);
+}
+function warnReactFederateModuleGeneratorDeprecation() {
+    devkit_1.logger.warn(exports.REACT_FEDERATE_MODULE_GENERATOR_DEPRECATION_MESSAGE);
+}
+// Executor warnings fire once per process (dev-server reload loops would
+// otherwise flood the console).
+const executorWarned = new Set();
+function warnOnce(key, message) {
+    if (executorWarned.has(key))
+        return;
+    executorWarned.add(key);
+    devkit_1.logger.warn(message);
+}
+function warnReactMfDevServerExecutorDeprecation() {
+    warnOnce('react-mf-dev-server', exports.REACT_MF_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE);
+}
+function warnReactMfSsrDevServerExecutorDeprecation() {
+    warnOnce('react-mf-ssr-dev-server', exports.REACT_MF_SSR_DEV_SERVER_EXECUTOR_DEPRECATION_MESSAGE);
+}
+function warnReactMfStaticServerExecutorDeprecation() {
+    warnOnce('react-mf-static-server', exports.REACT_MF_STATIC_SERVER_EXECUTOR_DEPRECATION_MESSAGE);
+}