@nx/react 0.0.0-pr-22179-271588f

package/src/migrations/update-15-6-3/webpack-config-setup.d.ts

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

package/src/migrations/update-15-6-3/webpack-config-setup.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const path_1 = require("path");
+async function default_1(tree) {
+    // Since projects can have multiple configurations, we need to know if the default options
+    // need to be migrated or not. If so then the subsequent configurations with `webpackConfig` also need to be.
+    const defaultOptionsUpdated = new Set();
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/webpack:webpack', (options, projectName, targetName, configurationName) => {
+        const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+        const defaultOptions = projectConfiguration.targets[targetName].options;
+        const defaultWasUpdated = defaultOptionsUpdated.has(projectName);
+        // If default was not updated (for different configurations), we don't do anything
+        // If isolatedConfig is set, we don't need to do anything
+        // If it is NOT React, we don't need to do anything
+        if (!defaultWasUpdated &&
+            (defaultOptions?.['isolatedConfig'] ||
+                !(defaultOptions?.['main']?.match(/main\.(t|j)sx$/) ||
+                    defaultOptions?.['webpackConfig'] === '@nrwl/react/plugins/webpack'))) {
+            return;
+        }
+        defaultOptionsUpdated.add(projectName);
+        // If this is not the default options (e.g. for development, production, or something custom),
+        // then skip it unless it specifically configures a webpackConfig file
+        if (configurationName && !options?.webpackConfig) {
+            return;
+        }
+        // If webpackConfig is set, update it with the new options
+        // If webpackConfig is not set, we need to create a new
+        // webpack.config.js file and set the path to it in the
+        // executor options
+        if (options?.['webpackConfig'] &&
+            options['webpackConfig'] !== '@nrwl/react/plugins/webpack') {
+            let oldName = options['webpackConfig'];
+            if (options['webpackConfig'].endsWith('.js')) {
+                oldName = options['webpackConfig'].replace('.js', '.old.js');
+            }
+            if (options['webpackConfig'].endsWith('.ts')) {
+                oldName = options['webpackConfig'].replace('.ts', '.old.ts');
+            }
+            renameFile(tree, options['webpackConfig'], oldName);
+            const justTheFileName = (0, path_1.basename)(oldName);
+            tree.write(options['webpackConfig'], `
+            const { composePlugins, withNx } = require('@nrwl/webpack');
+            const { withReact } = require('@nrwl/react');
+
+            // Nx plugins for webpack.
+            module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
+              // Note: This was added by an Nx migration.
+              // You should consider inlining the logic into this file.
+              // For more information on webpack config and Nx see:
+              // https://nx.dev/recipes/webpack/webpack-config-setup
+              return require('./${justTheFileName}')(config, context);
+            });
+            `);
+            options['isolatedConfig'] = true;
+            projectConfiguration.targets[targetName][configurationName ?? 'options'] = options;
+            (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfiguration);
+            devkit_1.logger.info(`
+          ${options['webpackConfig']} has been renamed to ${oldName} and a new ${options['webpackConfig']} 
+          has been created for your project ${projectName}. 
+          You should consider inlining the logic from ${oldName} into ${options['webpackConfig']}.
+          You can read our guide on how to do this here: 
+          
+          https://nx.dev/recipes/webpack/webpack-config-setup
+          `);
+        }
+        else {
+            const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+            if (!options) {
+                options = {};
+            }
+            options['webpackConfig'] = `${projectConfiguration.root}/webpack.config.js`;
+            options['isolatedConfig'] = true;
+            tree.write(options['webpackConfig'], `
+          const { composePlugins, withNx } = require('@nrwl/webpack');
+          const { withReact } = require('@nrwl/react');
+          
+          // Nx plugins for webpack.
+          module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
+            // Update the webpack config as needed here.
+            // e.g. config.plugins.push(new MyPlugin())
+            // For more information on webpack config and Nx see:
+            // https://nx.dev/recipes/webpack/webpack-config-setup
+            return config;
+          });
+        `);
+            projectConfiguration.targets[targetName].options = options;
+            (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfiguration);
+        }
+    });
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function renameFile(tree, from, to) {
+    const buffer = tree.read(from);
+    if (!buffer) {
+        return;
+    }
+    tree.write(to, buffer);
+    tree.delete(from);
+}

package/src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages.d.ts

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

package/src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const replace_package_1 = require("@nx/devkit/src/utils/replace-package");
+async function replacePackage(tree) {
+    await (0, replace_package_1.replaceNrwlPackageWithNxPackage)(tree, '@nrwl/react', '@nx/react');
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = replacePackage;

package/src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package.d.ts

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

package/src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function removePackage(tree) {
+    (0, devkit_1.removeDependenciesFromPackageJson)(tree, [], ['react-test-renderer']);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = removePackage;

package/src/migrations/update-16-3-0/remove-types-react-router-dom-package.d.ts

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

package/src/migrations/update-16-3-0/remove-types-react-router-dom-package.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function removePackage(tree) {
+    (0, devkit_1.removeDependenciesFromPackageJson)(tree, [], ['react-test-renderer']);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = removePackage;

package/src/migrations/update-16-7-0/add-babel-core.d.ts

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

package/src/migrations/update-16-7-0/add-babel-core.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+async function addBabelCore(tree) {
+    const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
+    if (packageJson?.devDependencies['@babel/preset-react']) {
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@babel/core': versions_1.babelCoreVersion,
+        });
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.default = addBabelCore;

package/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.d.ts

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

package/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function addTypings(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    const buildExecutors = [
+        '@nx/webpack:webpack',
+        '@nx/vite:build',
+        '@nx/rspack:rspack',
+    ];
+    const serveExecutors = [
+        '@nx/webpack:dev-server',
+        '@nx/vite:dev-server',
+        '@nx/rspack:dev-server',
+    ];
+    const relatedTsConfigs = [
+        'tsconfig.app.json',
+        'tsconfig.lib.json',
+        'tsconfig.spec.json',
+    ];
+    const typesToAdd = [
+        '@nx/react/typings/cssmodule.d.ts',
+        '@nx/react/typings/image.d.ts',
+    ];
+    for (const [, config] of projects) {
+        if (!buildExecutors.includes(config?.targets?.build?.executor)) {
+            continue;
+        }
+        if (config?.targets?.serve?.executor &&
+            !serveExecutors.includes(config?.targets?.serve?.executor)) {
+            continue;
+        }
+        const rootPath = config.root;
+        const projectTsConfigPath = (0, devkit_1.joinPathFragments)(rootPath, 'tsconfig.json');
+        const projectTsConfig = (0, devkit_1.readJson)(tree, projectTsConfigPath);
+        if (projectTsConfig.compilerOptions?.jsx !== 'react-jsx') {
+            continue;
+        }
+        relatedTsConfigs.forEach((tsConfig) => {
+            const tsConfigPath = (0, devkit_1.joinPathFragments)(rootPath, tsConfig);
+            if (tree.exists(tsConfigPath)) {
+                (0, devkit_1.updateJson)(tree, tsConfigPath, (json) => {
+                    const compilerOptions = json.compilerOptions || {};
+                    compilerOptions.types = [
+                        ...new Set([...(compilerOptions.types || []), ...typesToAdd]),
+                    ];
+                    if (json.files?.length > 0) {
+                        json.files = json.files.filter((file) => !['cssmodule.d.ts', 'image.d.ts'].includes(file));
+                    }
+                    return { ...json, compilerOptions };
+                });
+            }
+        });
+    }
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = addTypings;

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.d.ts

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

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
+async function default_1(tree) {
+    if (!hasModuleFederationProject(tree)) {
+        return;
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function hasModuleFederationProject(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const project of projects.values()) {
+        const targets = project.targets || {};
+        for (const [_, target] of Object.entries(targets)) {
+            if (target.executor === '@nx/webpack:webpack' &&
+                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

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

@@ -0,0 +1,8 @@
+import type * as ts from 'typescript';
+import { StringChange } from '@nx/devkit';
+export declare function addRemoteToConfig(source: ts.SourceFile, app: string): StringChange[];
+export declare function addRemoteDefinition(source: ts.SourceFile, app: string): StringChange[];
+export declare function addRemoteRoute(source: ts.SourceFile, names: {
+    fileName: string;
+    className: string;
+}): StringChange[];

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRemoteRoute = exports.addRemoteDefinition = exports.addRemoteToConfig = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const ast_utils_1 = require("../utils/ast-utils");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function addRemoteToConfig(source, app) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const assignments = (0, js_1.findNodes)(source, tsModule.SyntaxKind.PropertyAssignment);
+    const remotesAssignment = assignments.find((s) => s.name.getText() === 'remotes');
+    if (remotesAssignment) {
+        const arrayExpression = remotesAssignment.initializer;
+        if (!arrayExpression.elements)
+            return [];
+        const lastElement = arrayExpression.elements[arrayExpression.elements.length - 1];
+        return [
+            lastElement && !arrayExpression.elements.hasTrailingComma
+                ? {
+                    type: devkit_1.ChangeType.Insert,
+                    index: lastElement.end,
+                    text: `,`,
+                }
+                : null,
+            {
+                type: devkit_1.ChangeType.Insert,
+                index: remotesAssignment.end - 1,
+                text: `'${app}',\n`,
+            },
+        ].filter(Boolean);
+    }
+    const binaryExpressions = (0, js_1.findNodes)(source, tsModule.SyntaxKind.BinaryExpression);
+    const exportExpression = binaryExpressions.find((b) => {
+        if (b.left.kind === tsModule.SyntaxKind.PropertyAccessExpression) {
+            const pae = b.left;
+            return (pae.expression.getText() === 'module' &&
+                pae.name.getText() === 'exports');
+        }
+    });
+    if (exportExpression?.right.kind === tsModule.SyntaxKind.ObjectLiteralExpression) {
+        const ole = exportExpression.right;
+        return [
+            {
+                type: devkit_1.ChangeType.Insert,
+                index: ole.end - 1,
+                text: `remotes: ['${app}']\n`,
+            },
+        ];
+    }
+    return [];
+}
+exports.addRemoteToConfig = addRemoteToConfig;
+function addRemoteDefinition(source, app) {
+    return [
+        {
+            type: devkit_1.ChangeType.Insert,
+            index: source.end,
+            text: `\ndeclare module '${app}/Module';`,
+        },
+    ];
+}
+exports.addRemoteDefinition = addRemoteDefinition;
+function addRemoteRoute(source, names) {
+    const routes = (0, ast_utils_1.findElements)(source, 'Route');
+    const links = (0, ast_utils_1.findElements)(source, 'Link');
+    if (routes.length === 0) {
+        return [];
+    }
+    else {
+        const changes = [];
+        const firstRoute = routes[0];
+        const firstLink = links[0];
+        changes.push(...(0, ast_utils_1.addImport)(source, `const ${names.className} = React.lazy(() => import('${names.fileName}/Module'));`));
+        changes.push({
+            type: devkit_1.ChangeType.Insert,
+            index: firstRoute.end,
+            text: `\n<Route path="/${names.fileName}" element={<${names.className} />} />`,
+        });
+        if (firstLink) {
+            const parentLi = (0, ast_utils_1.findClosestOpening)('li', firstLink);
+            if (parentLi) {
+                changes.push({
+                    type: devkit_1.ChangeType.Insert,
+                    index: parentLi.end,
+                    text: `\n<li><Link to="/${names.fileName}">${names.className}</Link></li>`,
+                });
+            }
+            else {
+                changes.push({
+                    type: devkit_1.ChangeType.Insert,
+                    index: firstLink.parent.end,
+                    text: `\n<Link to="/${names.fileName}">${names.className}</Link>`,
+                });
+            }
+        }
+        return changes;
+    }
+}
+exports.addRemoteRoute = addRemoteRoute;

package/src/module-federation/load-config.d.ts

@@ -0,0 +1,3 @@
+import { ExecutorContext } from '@nx/devkit';
+import { ModuleFederationConfig } from './models';
+export declare function loadModuleFederationConfigFromContext(context: ExecutorContext): ModuleFederationConfig;

package/src/module-federation/load-config.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadModuleFederationConfigFromContext = void 0;
+const path_1 = require("path");
+function loadModuleFederationConfigFromContext(context) {
+    const p = context.projectsConfigurations.projects[context.projectName];
+    const moduleFederationConfigPath = (0, path_1.join)(context.root, p.root, 'module-federation.config.js');
+    try {
+        return require(moduleFederationConfigPath);
+    }
+    catch {
+        // TODO(jack): Add a link to guide
+        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?`);
+    }
+}
+exports.loadModuleFederationConfigFromContext = loadModuleFederationConfigFromContext;

package/src/module-federation/models.d.ts

@@ -0,0 +1,24 @@
+export type ModuleFederationLibrary = {
+    type: string;
+    name: string;
+};
+export type Remotes = string[] | [remoteName: string, remoteUrl: string][];
+export interface SharedLibraryConfig {
+    singleton?: boolean;
+    strictVersion?: boolean;
+    requiredVersion?: false | string;
+    eager?: boolean;
+}
+export type SharedFunction = (libraryName: string, sharedConfig: SharedLibraryConfig) => undefined | false | SharedLibraryConfig;
+export type AdditionalSharedConfig = Array<string | [libraryName: string, sharedConfig: SharedLibraryConfig] | {
+    libraryName: string;
+    sharedConfig: SharedLibraryConfig;
+}>;
+export interface ModuleFederationConfig {
+    name: string;
+    remotes?: Remotes;
+    library?: ModuleFederationLibrary;
+    exposes?: Record<string, string>;
+    shared?: SharedFunction;
+    additionalShared?: AdditionalSharedConfig;
+}

package/src/module-federation/models.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/module-federation/package-json.d.ts

@@ -0,0 +1,8 @@
+export declare function readRootPackageJson(): {
+    dependencies?: {
+        [key: string]: string;
+    };
+    devDependencies?: {
+        [key: string]: string;
+    };
+};

package/src/module-federation/package-json.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readRootPackageJson = void 0;
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+function readRootPackageJson() {
+    const pkgJsonPath = (0, devkit_1.joinPathFragments)(devkit_1.workspaceRoot, 'package.json');
+    if (!(0, fs_1.existsSync)(pkgJsonPath)) {
+        throw new Error('NX MFE: Could not find root package.json to determine dependency versions.');
+    }
+    return (0, devkit_1.readJsonFile)(pkgJsonPath);
+}
+exports.readRootPackageJson = readRootPackageJson;

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

@@ -0,0 +1,12 @@
+import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+export declare function getFunctionDeterminateRemoteUrl(isServer?: boolean): (remote: string) => string;
+export declare function getModuleFederationConfig(mfConfig: ModuleFederationConfig, options?: {
+    isServer: boolean;
+    determineRemoteUrl?: (remote: string) => string;
+}): Promise<{
+    sharedLibraries: import("@nx/webpack/src/utils/module-federation").SharedWorkspaceLibraryConfig;
+    sharedDependencies: {
+        [x: string]: import("@nx/webpack/src/utils/module-federation").SharedLibraryConfig;
+    };
+    mappedRemotes: {};
+}>;

package/src/module-federation/utils.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModuleFederationConfig = exports.getFunctionDeterminateRemoteUrl = void 0;
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const devkit_1 = require("@nx/devkit");
+const project_graph_1 = require("nx/src/project-graph/project-graph");
+function getFunctionDeterminateRemoteUrl(isServer = false) {
+    const target = 'serve';
+    const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
+    return function (remote) {
+        const mappedStaticRemotesFromEnv = process.env
+            .NX_MF_DEV_SERVER_STATIC_REMOTES
+            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
+            : undefined;
+        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
+            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
+        }
+        let remoteConfiguration = null;
+        try {
+            remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        }
+        catch (e) {
+            throw new Error(`Cannot find remote: "${remote}". Check that the remote name is correct in your module federation config file.\n`);
+        }
+        const serveTarget = remoteConfiguration?.targets?.[target];
+        if (!serveTarget) {
+            throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "${serveTarget}" target.\n
+      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``);
+        }
+        const host = serveTarget.options?.host ??
+            `http${serveTarget.options.ssl ? 's' : ''}://localhost`;
+        const port = serveTarget.options?.port ?? 4201;
+        return `${host.endsWith('/') ? host.slice(0, -1) : host}:${port}/${remoteEntry}`;
+    };
+}
+exports.getFunctionDeterminateRemoteUrl = getFunctionDeterminateRemoteUrl;
+async function getModuleFederationConfig(mfConfig, options = { isServer: false }) {
+    let projectGraph;
+    try {
+        projectGraph = (0, devkit_1.readCachedProjectGraph)();
+    }
+    catch (e) {
+        projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    }
+    const project = projectGraph.nodes[mfConfig.name]?.data;
+    if (!project) {
+        throw Error(`Cannot find project "${mfConfig.name}". Check that the name is correct in module-federation.config.js`);
+    }
+    const dependencies = (0, module_federation_1.getDependentPackagesForProject)(projectGraph, mfConfig.name);
+    if (mfConfig.shared) {
+        dependencies.workspaceLibraries = dependencies.workspaceLibraries.filter((lib) => mfConfig.shared(lib.importKey, {}) !== false);
+        dependencies.npmPackages = dependencies.npmPackages.filter((pkg) => mfConfig.shared(pkg, {}) !== false);
+    }
+    const sharedLibraries = (0, module_federation_1.shareWorkspaceLibraries)(dependencies.workspaceLibraries);
+    const npmPackages = (0, module_federation_1.sharePackages)(dependencies.npmPackages);
+    const sharedDependencies = {
+        ...sharedLibraries.getLibraries(project.root),
+        ...npmPackages,
+    };
+    (0, module_federation_1.applySharedFunction)(sharedDependencies, mfConfig.shared);
+    (0, module_federation_1.applyAdditionalShared)(sharedDependencies, mfConfig.additionalShared, projectGraph);
+    // Choose the correct mapRemotes function based on the server state.
+    const mapRemotesFunction = options.isServer ? module_federation_1.mapRemotesForSSR : module_federation_1.mapRemotes;
+    // Determine the URL function, either from provided options or by using a default.
+    const determineRemoteUrlFunction = options.determineRemoteUrl
+        ? options.determineRemoteUrl
+        : getFunctionDeterminateRemoteUrl(options.isServer);
+    // Map the remotes if they exist, otherwise default to an empty object.
+    let mappedRemotes = {};
+    if (mfConfig.remotes && mfConfig.remotes.length > 0) {
+        const isLibraryTypeVar = mfConfig.library?.type === 'var';
+        mappedRemotes = mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFunction, isLibraryTypeVar);
+    }
+    return { sharedLibraries, sharedDependencies, mappedRemotes };
+}
+exports.getModuleFederationConfig = getModuleFederationConfig;

package/src/module-federation/with-module-federation-ssr.d.ts

@@ -0,0 +1,2 @@
+import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederationForSSR(options: ModuleFederationConfig): Promise<(config: any) => any>;

package/src/module-federation/with-module-federation-ssr.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withModuleFederationForSSR = void 0;
+const utils_1 = require("./utils");
+async function withModuleFederationForSSR(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
+    const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
+        isServer: true,
+    });
+    return (config) => {
+        config.target = false;
+        config.output.uniqueName = options.name;
+        config.optimization = {
+            runtimeChunk: false,
+        };
+        config.plugins.push(new (require('@module-federation/node').UniversalFederationPlugin)({
+            name: options.name,
+            filename: 'remoteEntry.js',
+            exposes: options.exposes,
+            remotes: mappedRemotes,
+            shared: {
+                ...sharedDependencies,
+            },
+            library: {
+                type: 'commonjs-module',
+            },
+            isServer: true,
+        }, {}), sharedLibraries.getReplacementPlugin());
+        return config;
+    };
+}
+exports.withModuleFederationForSSR = withModuleFederationForSSR;

package/src/module-federation/with-module-federation.d.ts

@@ -0,0 +1,7 @@
+import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
+/**
+ * @param {ModuleFederationConfig} options
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
+ */
+export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxComposableWebpackPlugin>;

package/src/module-federation/with-module-federation.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withModuleFederation = void 0;
+const utils_1 = require("./utils");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
+/**
+ * @param {ModuleFederationConfig} options
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
+ */
+async function withModuleFederation(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
+    const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
+    const isGlobal = isVarOrWindow(options.library?.type);
+    return (config, ctx) => {
+        config.output.uniqueName = options.name;
+        config.output.publicPath = 'auto';
+        if (isGlobal) {
+            config.output.scriptType = 'text/javascript';
+        }
+        config.optimization = {
+            runtimeChunk: false,
+        };
+        config.experiments = {
+            ...config.experiments,
+            outputModule: !isGlobal,
+        };
+        config.plugins.push(new ModuleFederationPlugin({
+            name: options.name,
+            library: options.library ?? { type: 'module' },
+            filename: 'remoteEntry.js',
+            exposes: options.exposes,
+            remotes: mappedRemotes,
+            shared: {
+                ...sharedDependencies,
+            },
+            /**
+             * remoteType: 'script' is required for the remote to be loaded as a script tag.
+             * remotes will need to be defined as:
+             *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
+             *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
+             */
+            ...(isGlobal ? { remoteType: 'script' } : {}),
+        }), sharedLibraries.getReplacementPlugin());
+        return config;
+    };
+}
+exports.withModuleFederation = withModuleFederation;

package/src/rules/add-styled-dependencies.d.ts

@@ -0,0 +1,5 @@
+import { Tree } from '@nx/devkit';
+export declare function addStyledModuleDependencies(host: Tree, options: {
+    styledModule?: string;
+    compiler?: 'babel' | 'swc';
+}): import("@nx/devkit").GeneratorCallback;