tessl/npm-rspack--core

Fast Rust-based web bundler with webpack-compatible API

—

Pending

Overview

Eval results

Files

Module Federation

Name: tessl/npm-rspack--core
Author: tessl

Micro-frontend architecture enabling code sharing between independent applications at runtime, with enhanced features beyond standard webpack Module Federation.

Capabilities

Module Federation Plugin

Enhanced Module Federation plugin with runtime plugin support and configurable sharing strategies.

/** Enhanced Module Federation with runtime plugins and share strategies */
class ModuleFederationPlugin extends RspackBuiltinPlugin {
  name: "ModuleFederationPlugin";
  constructor(options: ModuleFederationPluginOptions);
}

interface ModuleFederationPluginOptions {
  /** Unique name for this federated application */
  name: string;
  /** Filename for the remote entry file */
  filename?: string;
  /** Modules to expose to other applications */
  exposes?: Exposes;
  /** Remote applications to consume */
  remotes?: Remotes;
  /** Dependencies to share between applications */
  shared?: Shared;
  /** Runtime plugins to enhance federation behavior */
  runtimePlugins?: string[];
  /** Custom implementation for federation runtime */
  implementation?: string;
  /** Strategy for resolving shared dependencies */
  shareStrategy?: "version-first" | "loaded-first";
  /** Runtime chunk configuration */
  runtime?: string | false;
  /** Library configuration for the exposed bundle */
  library?: LibraryOptions;
  /** Share scope name */
  shareScope?: string;
}

/** Runtime plugin paths for enhanced functionality */
type RuntimePlugins = string[];

Usage Examples:

import { ModuleFederationPlugin } from "@rspack/core";

// Host application
const hostConfig = {
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        mfe1: "mfe1@http://localhost:3001/remoteEntry.js",
        mfe2: "mfe2@http://localhost:3002/remoteEntry.js"
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true }
      },
      shareStrategy: "version-first"
    })
  ]
};

// Remote application
const remoteConfig = {
  plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button",
        "./utils": "./src/utils"
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true }
      },
      runtimePlugins: ["./federation-runtime-plugin.js"]
    })
  ]
};

Legacy Module Federation V1

Original Module Federation interface for backward compatibility.

/** Legacy V1 Module Federation plugin */
class ModuleFederationPluginV1 extends RspackBuiltinPlugin {
  name: "ModuleFederationPluginV1";
  constructor(options: ModuleFederationPluginV1Options);
}

interface ModuleFederationPluginV1Options {
  /** Unique name for this federated application */
  name: string;
  /** Modules to expose */
  exposes?: Exposes;
  /** Filename for remote entry */
  filename?: string;
  /** Library configuration */
  library?: LibraryOptions;
  /** Remote type for loading */
  remoteType?: ExternalsType;
  /** Remote applications to consume */
  remotes?: Remotes;
  /** Runtime chunk name */
  runtime?: string | false;
  /** Share scope name */
  shareScope?: string;
  /** Shared dependencies */
  shared?: Shared;
  /** Enable enhanced mode */
  enhanced?: boolean;
}

Container Plugins

Core plugins for exposing and consuming federated modules.

/** Expose modules to other applications */
class ContainerPlugin extends RspackBuiltinPlugin {
  name: "ContainerPlugin";
  constructor(options: ContainerPluginOptions);
}

interface ContainerPluginOptions {
  /** Unique name for this container */
  name: string;
  /** Modules to expose */
  exposes: Exposes;
  /** Filename for the container bundle */
  filename?: string;
  /** Library configuration */
  library?: LibraryOptions;
  /** Runtime chunk configuration */
  runtime?: string | false;
  /** Share scope name */
  shareScope?: string;
  /** Enable enhanced mode */
  enhanced?: boolean;
}

/** Consume modules from remote applications */
class ContainerReferencePlugin extends RspackBuiltinPlugin {
  name: "ContainerReferencePlugin";
  constructor(options: ContainerReferencePluginOptions);
}

interface ContainerReferencePluginOptions {
  /** Remote type for loading */
  remoteType: ExternalsType;
  /** Remote containers to reference */
  remotes: Remotes;
  /** Share scope name */
  shareScope?: string;
  /** Enable enhanced mode */
  enhanced?: boolean;
}

Expose Configuration Types

Types for configuring module exposure.

/** Configuration for exposing modules */
type Exposes = (ExposesItem | ExposesObject)[] | ExposesObject;

/** Simple string expose */
type ExposesItem = string;

/** Array of expose items */
type ExposesItems = ExposesItem[];

/** Object notation for exposes */
interface ExposesObject {
  [key: string]: ExposesConfig | ExposesItem | ExposesItems;
}

/** Detailed expose configuration */
interface ExposesConfig {
  /** Module(s) to expose */
  import: ExposesItem | ExposesItems;
  /** Custom name for the exposed module */
  name?: string;
}

Expose Examples:

// String array exposes
const exposes1 = ["./Button", "./Input"];

// Object exposes with simple strings
const exposes2 = {
  "./Button": "./src/components/Button",
  "./Input": "./src/components/Input",
  "./utils": "./src/utils"
};

// Detailed expose configuration
const exposes3 = {
  "./Button": {
    import: "./src/components/Button",
    name: "CustomButton"
  },
  "./components": {
    import: ["./src/components/Button", "./src/components/Input"]
  }
};

Remote Configuration Types

Types for configuring remote container consumption.

/** Configuration for consuming remotes */
type Remotes = (RemotesItem | RemotesObject)[] | RemotesObject;

/** Simple string remote */
type RemotesItem = string;

/** Array of remote items */
type RemotesItems = RemotesItem[];

/** Object notation for remotes */
interface RemotesObject {
  [key: string]: RemotesConfig | RemotesItem | RemotesItems;
}

/** Detailed remote configuration */
interface RemotesConfig {
  /** External reference to remote */
  external: RemotesItem | RemotesItems;
  /** Share scope for this remote */
  shareScope?: string;
}

/** External types for remote loading */
type ExternalsType = "var" | "module" | "assign" | "this" | "window" | "self" | "global" | 
  "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | "umd" | "umd2" | 
  "jsonp" | "system" | "promise" | "import" | "script";

Remote Examples:

// String array remotes
const remotes1 = ["mfe1@http://localhost:3001/remoteEntry.js"];

// Object remotes with simple strings  
const remotes2 = {
  mfe1: "mfe1@http://localhost:3001/remoteEntry.js",
  mfe2: "mfe2@http://localhost:3002/remoteEntry.js"
};

// Detailed remote configuration
const remotes3 = {
  mfe1: {
    external: "mfe1@http://localhost:3001/remoteEntry.js",
    shareScope: "mfe1-scope"
  },
  mfe2: {
    external: ["mfe2@http://localhost:3002/remoteEntry.js", "mfe2-fallback@http://backup.com/remoteEntry.js"]
  }
};

Sharing Plugins

Plugins for managing shared dependencies between federated applications.

/** Configure shared dependencies */
class SharePlugin extends RspackBuiltinPlugin {
  name: "SharePlugin";
  constructor(options: SharePluginOptions);
}

interface SharePluginOptions {
  /** Share scope name */
  shareScope?: string;
  /** Shared dependencies configuration */
  shared: Shared;
  /** Enable enhanced mode */
  enhanced: boolean;
}

/** Consume shared dependencies */
class ConsumeSharedPlugin extends RspackBuiltinPlugin {
  name: "ConsumeSharedPlugin";
  constructor(options: ConsumeSharedPluginOptions);
}

interface ConsumeSharedPluginOptions {
  /** Dependencies to consume */
  consumes: Consumes;
  /** Share scope name */
  shareScope?: string;
  /** Enable enhanced mode */
  enhanced?: boolean;
}

/** Provide shared dependencies */
class ProvideSharedPlugin extends RspackBuiltinPlugin {
  name: "ProvideSharedPlugin";
  constructor(options: ProvideSharedPluginOptions<Enhanced>);
}

interface ProvideSharedPluginOptions<Enhanced extends boolean = false> {
  /** Dependencies to provide */
  provides: Provides<Enhanced>;
  /** Share scope name */
  shareScope?: string;
  /** Enable enhanced mode */
  enhanced?: Enhanced;
}

Shared Dependencies Configuration

Types for configuring shared dependencies across federated applications.

/** Configuration for shared dependencies */
type Shared = (SharedItem | SharedObject)[] | SharedObject;

/** Simple string shared dependency */
type SharedItem = string;

/** Object notation for shared dependencies */
interface SharedObject {
  [key: string]: SharedConfig | SharedItem;
}

/** Detailed shared dependency configuration */
interface SharedConfig {
  /** Load shared dependency immediately */
  eager?: boolean;
  /** Module to import (false to not import) */
  import?: false | SharedItem;
  /** Package name for version detection */
  packageName?: string;
  /** Required version constraint */
  requiredVersion?: false | string;
  /** Key for sharing this dependency */
  shareKey?: string;
  /** Share scope name */
  shareScope?: string;
  /** Enforce single instance across all remotes */
  singleton?: boolean;
  /** Strict version checking */
  strictVersion?: boolean;
  /** Version to provide */
  version?: false | string;
}

Shared Examples:

// Simple string array
const shared1 = ["react", "react-dom", "lodash"];

// Object with simple configuration
const shared2 = {
  react: "^18.0.0",
  "react-dom": "^18.0.0",
  lodash: "*"
};

// Detailed shared configuration
const shared3 = {
  react: {
    singleton: true,
    requiredVersion: "^18.0.0",
    strictVersion: true,
    eager: false
  },
  "react-dom": {
    singleton: true,
    requiredVersion: "^18.0.0",
    import: "react-dom"
  },
  lodash: {
    version: "4.17.21",
    shareKey: "lodash",
    shareScope: "default"
  }
};

Consume Configuration Types

Types for configuring consumption of shared dependencies.

/** Configuration for consuming shared dependencies */
type Consumes = (ConsumesItem | ConsumesObject)[] | ConsumesObject;

/** Simple string consume item */
type ConsumesItem = string;

/** Object notation for consumes */
interface ConsumesObject {
  [key: string]: ConsumesConfig | ConsumesItem;
}

/** Detailed consume configuration */
interface ConsumesConfig {
  /** Load immediately */
  eager?: boolean;
  /** Module to import */
  import?: false | ConsumesItem;
  /** Package name */
  packageName?: string;
  /** Required version */
  requiredVersion?: false | string;
  /** Share key */
  shareKey?: string;
  /** Share scope */
  shareScope?: string;
  /** Singleton enforcement */
  singleton?: boolean;
  /** Strict version checking */
  strictVersion?: boolean;
}

Provide Configuration Types

Types for configuring provision of shared dependencies.

/** Configuration for providing shared dependencies */
type Provides<Enhanced extends boolean> = 
  | (ProvidesItem | ProvidesObject<Enhanced>)[]
  | ProvidesObject<Enhanced>;

/** Simple string provide item */
type ProvidesItem = string;

/** Object notation for provides */
interface ProvidesObject<Enhanced extends boolean> {
  [key: string]: ProvidesConfig<Enhanced> | ProvidesItem;
}

/** Detailed provide configuration (Enhanced mode adds more options) */
type ProvidesConfig<Enhanced extends boolean> = Enhanced extends true
  ? ProvidesEnhancedConfig
  : ProvidesV1Config;

/** V1 provide configuration */
interface ProvidesV1Config {
  /** Load immediately */
  eager?: boolean;
  /** Share key */
  shareKey: string;
  /** Share scope */
  shareScope?: string;
  /** Version to provide */
  version?: false | string;
}

/** Enhanced provide configuration (includes V1 + additional options) */
interface ProvidesEnhancedConfig extends ProvidesV1Config {
  /** Singleton enforcement */
  singleton?: boolean;
  /** Strict version checking */
  strictVersion?: boolean;
  /** Required version constraint */
  requiredVersion?: false | string;
}

Runtime Integration

Module Federation runtime configuration and utilities.

/** Runtime plugin for Module Federation enhancements */
class ModuleFederationRuntimePlugin extends RspackBuiltinPlugin {
  name: "ModuleFederationRuntimePlugin";
  constructor(options?: ModuleFederationRuntimeOptions);
}

interface ModuleFederationRuntimeOptions {
  /** Entry runtime configuration */
  entryRuntime?: string;
}

/** Container namespace exports */
declare const container: {
  ContainerPlugin: typeof ContainerPlugin;
  ContainerReferencePlugin: typeof ContainerReferencePlugin;
  ModuleFederationPlugin: typeof ModuleFederationPlugin;
  ModuleFederationPluginV1: typeof ModuleFederationPluginV1;
};

/** Sharing namespace exports */
declare const sharing: {
  ProvideSharedPlugin: typeof ProvideSharedPlugin;
  ConsumeSharedPlugin: typeof ConsumeSharedPlugin;
  SharePlugin: typeof SharePlugin;
};

Runtime Usage:

// Dynamic remote loading
const loadRemoteModule = async (remoteName: string, moduleName: string) => {
  try {
    const remote = await import(remoteName);
    const module = await remote.get(moduleName);
    return module();
  } catch (error) {
    console.error(`Failed to load ${moduleName} from ${remoteName}:`, error);
    throw error;
  }
};

// Usage in React
const RemoteButton = React.lazy(() => loadRemoteModule("mfe1", "./Button"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RemoteButton />
    </Suspense>
  );
}

Advanced Module Federation Patterns

// Bi-directional federation
const shellConfig = {
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      exposes: {
        "./Header": "./src/Header",
        "./Navigation": "./src/Navigation"
      },
      remotes: {
        checkout: "checkout@http://localhost:3001/remoteEntry.js",
        products: "products@http://localhost:3002/remoteEntry.js"
      },
      shared: {
        react: { singleton: true, version: "18.2.0" },
        "react-dom": { singleton: true, version: "18.2.0" },
        "react-router-dom": { singleton: true }
      }
    })
  ]
};

// Error boundaries for remote modules
class RemoteModuleErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Remote module error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong loading the remote module.</div>;
    }

    return this.props.children;
  }
}

Install with Tessl CLI