Module Federation options, usage, hints

module-federation-options.ts

/**
 * ContainerPlugin
 *
 * @see https://github.com/webpack/webpack/blob/v5.19.0/schemas/plugins/container/ModuleFederationPlugin.json
 */
interface ModuleFederationPlugin {
  // ContainerPlugin
  //
  name?: string;

  /**
   * { './widget': './src/widget' }
   *
   * can be imported as `import ... from 'appX/widget'`
   *
   * { '.': './src/widget' }
   *
   * can be imported as `import ... from 'appX'`
   *
   * { Title: './src/components/Title' }
   *
   * works with dynamic remote container concept
   *  because we can do: container.get('Title')
   *
   * doesn't work with static or dynamic imports
   *
   * { "./newReact": require.resolve("react") }
   */
  exposes?: Exposes;

  // seen: remoteEntry.js, container.js
  filename?: string;

  /**
   * default: { type: "var", name: name }
   *
   * { type: 'var', name: 'appX' }
   *
   * works fine, default export, named export
   * con: pollutes global with `appX` var
   *
   * { type: 'global', name: 'appX' }
   * todo: need to check
   *
   * { type: "commonjs-module" }
   * todo: seen this in SSR setup, need to check
   */
  library?: LibraryOptions;

  // ContainerReferencePlugin
  //
  /**
   * default: library.type if 'in' RemoteType or 'script'
   */
  remoteType?: RemoteType;

  /**
   * { appX: 'appX@http://localhost:3001/remoteEntry.js' }
   * { appX: 'appX@//localhost:3001/remoteEntry.js' }
   *
   * remoteType need to be 'script' (defaults to if not set or when library.type is not set)
   * when used with remoteType='var' throws "Uncaught SyntaxError: illegal character U+0040"
   * remoteType might (if not set) default to library.type, so watch out
   *
   * left side `appX` can be a different name, which can be used in `import ... from 'appX/...'`
   * right side `appX` before `@http` should match with keys defined in `exposes` in remote container
   *
   * { appX: 'appX' }
   * ['appX']
   *
   * 'remoteEntry.js' of remote container need to be loaded
   * remoteType need to be the same as remote container library.type, otherwise throws "Uncaught SyntaxError: expected expression, got '!=='"
   *
   * note: it can happen that static import throws "Uncaught TypeError: __webpack_modules__[moduleId] is not a function" error
   *  this can be resolved if we dynamically load the using module or one of its parents.
   */
  remotes?: Remotes;

  // SharePlugin
  //
  shared?: Shared,
  shareScope?: string;
}

/**
 * ContainerPlugin
 *
 * @see https://github.com/webpack/webpack/blob/v5.19.0/schemas/plugins/container/ContainerPlugin.json
 */
interface ContainerPlugin {
  // the name of this container
  name: string;

  // modules that should be exposed by this container. when provided, property name is used as public name, otherwise public name is automatically inferred from request.
  exposes: Exposes;

  // the filename for this container relative path inside the `output.path` directory
  // default: undefined
  filename?: string;

  // default: { type: "var", name: name }
  library?: LibraryOptions;

  // the name of the share scope which is shared with the host (defaults to 'default')
  // default: 'default'
  shareScope?: string;
}

type Exposes = ExposesArrayItem[] | ExposesObject;

type ExposesArrayItem = string | ExposesObject;

interface ExposesObject {
  // property names are used as public paths
  [prop]: string | string[] | SharedConfig;
}

interface ExposesConfig {
  // request to a module that should be exposed by this container
  import: string | string[]
}

interface LibraryOptions {
  // type of library
  type: LibraryType;

  // the name of the library (some types allow unnamed libraries too)
  // string[]: a part of the library name
  name?: string | string[];

  // specify which export should be exposed as library
  // string[]: part of the export that should be exposed as library
  export?: string | string[];

  // if `output.libraryTarget` is set to umd and `output.library` is set, setting this to true will name the AMD module
  umdNamedDefine?: boolean
}

// others might be added by plugins
type LibraryType = 'var' | 'module' | 'assign' | 'assign-properties' | 'this' | 'window' | 'self' | 'global' | 'commonjs' | 'commonjs2' | 'commonjs-module' | 'amd' | 'amd-require' | 'umd' | 'umd2' | 'jsonp' | 'system';

/**
 * ContainerReferencePlugin
 *
 * @see https://github.com/webpack/webpack/blob/v5.19.0/schemas/plugins/container/ContainerReferencePlugin.json
 */
interface ContainerReferencePlugin {
  // the external type of the remote containers
  // specifies the default type of externals ('amd*', 'umd*', 'system' and 'jsonp' depend on output.libraryTarget set to the same value)
  remoteType: RemoteType;

  // container locations and request scopes from which modules should be resolved and loaded at runtime. when provided, property name is used as request scope, otherwise request scope is automatically inferred from container location
  remotes: Remotes;

  // the name of the share scope shared with all remotes (defaults to 'default')
  // default: 'default'
  shareScope?: string;
}

type RemoteType = 'var' | 'module' | 'assign' | 'this' | 'window' | 'self' | 'global' | 'commonjs' | 'commonjs2' | 'commonjs-module' | 'amd' | 'amd-require' | 'umd' | 'umd2' | 'jsonp' | 'system' | 'promise' | 'import' | 'script';

type Remotes = RemotesArrayItem[] | RemotesObject;

type RemotesArrayItem = string | RemotesObject;

interface RemotesObject {
  // property names are used as request scopes
  [prop]: string | string[] | RemotesConfig;
}

interface RemotesConfig {
  // container locations from which modules should be resolved and loaded at runtime.
  external: string | string[];

  // the name of the share scope shared with this remote
  shareScope?: string;
}

/**
 * SharePlugin
 *
 * @see https://github.com/webpack/webpack/blob/v5.19.0/schemas/plugins/sharing/SharePlugin.json
 */
interface SharePlugin {
  // when provided, property names are used to match requested modules in this compilation
  shared: Shared;

  // share scope name used for all shared modules (defaults to 'default')
  shareScope?: string;
}

type Shared = SharedArrayItem[] | SharedObject;

type SharedArrayItem = string | SharedObject

interface SharedObject {
  // property names are used to match requested modules in this compilation. relative requests are resolved, module requests are matched unresolved, absolute paths will match resolved requests. a trailing slash will match all requests with this prefix. in this case `shareKey` must also have a trailing slash
  [prop]: string | SharedConfig;
}

interface SharedConfig {
  /**
   * provided module that should be provided to share scope. also acts as fallback module if no shared module is found in share scope or version isn't valid. defaults to the property name.
   *
   * false: no provided or fallback module
   *
   * note: with `false` we can prevent providing
   */
  import?: false | string;

  // module is looked up under this key from the share scope
  shareKey?: string;

  shareScope?: string;

  // allow only a single version of the shared module in share scope (disabled by default)
  singleton?: boolean;

  /**
   * version requirement from module in share scope
   *
   * false: no version requirement check
   * string: "Version as string. Can be prefixed with '^' or '~' for minimum matches. Each part of the version should be separated by a dot '.'
   *
   * note: need to set it if not present in package.json and we want to define a minimum version
   */
  requiredVersion?: false | string;

  // do not accept shared module if version is not valid (defaults to yes, if local fallback module is available and shared module is not a singleton, otherwise no, has no effect if there is no required version specified)
  strictVersion?: boolean;

  /**
   * version of the provided module. will replace lower matching versions, but not higher
   *
   * false: don't provide a version
   * string: version as string. each part of the version should be separated by a dot '.'
   */
  version?: false | string;

  // include the provided and fallback module directly instead behind an async request. This allows to use this shared module in initial load too. All possible shared modules need to be eager too.
  eager?: boolean;

  // package name to determine required version from description file. This is only needed when package name can't be automatically determined from request.
  packageName?: string;
}

interface ConsumeSharedPlugin {
  // todo: if needed, used by SharePlugin
}

interface ProvideSharedPlugin {
  // todo: if needed, used by SharePlugin
}