Module Federation Types Plugin

Typing your microfrontends created with the Webpack Module Federation is easy! 🎉

Description

This webpack plugin types the Webpack Module Federation microfrontends.

The plugin merges type declaration files (.d.ts) from common microfrontend modules, specified in the exposes object for the ModuleFederation plugin and created with the generated ts-loader (see configuration settings below), into one declaration file.

In addition, the plugin allows you to upload type declaration files (.d.ts) from the specified URLs to the microfrontends, in the remotes object for the ModuleFederation plugin.

Options:

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |name|String|required option|Name of your app (like name option in ModuleFederation)| |outDir|String|types|The path where the generated type declaration file will be saved in the project build folder (for the current application)| |exposes|Object|undefined|The object exposes the entities you are sharing (like exposes option in ModuleFederation)| |remotes|Object|undefined|The object remotes with url adreses to remoteEntry files of your microfrontends (like remotes option in ModuleFederation)| |remoteTypesDir|String|../../src/microfrontends/types|The path to which the type declarations (.d.ts) files of your microfronts specified in the remotes option will be downloaded| |clearOnStart|String|undefined|The path to the folder to be delete before build| |clearOnEnd|String|undefined|The path to the folder to be delete after the build|

Example configuration:

In host app:

//webpack.config.ts
import ModuleFederationTypesPlugin from 'module-federation-types-plugin'

const appName = 'app'
const exposes = {
  './component': './src/component',
  './component_2': './src/component_2'
} // ModuleFederationTypesPlugin generate one file with types declaration for your exposes modules
const remotes = export const prodRemotes = {
  app1: 'app1@http://127.0.0.1:3000/remoteEntry.js',  // ModuleFederationTypesPlugin download app1.d.ts file from this URL
  app2: 'app2@http://127.0.0.1:3001/remoteEntry.js' // ModuleFederationTypesPlugin download app2.d.ts file from this URL
}

//...
  module: {
    rules: {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              declaration: true, // generate type declaration files for all project
              declarationDir: 'types', // This folder with generated .d.ts files for all project may be delete with option clearOnStart in ModuleFederationTypesPlugin after build
            },
          },
        },
      ],
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      name: appName,
      filename: 'remoteEntry.js',
      exposes: exposes,
      remotes: remotes,
    }),
    new ModuleFederationTypesPlugin({
      name: appName,
      outDir: `./types`,
      exposes: exposes,
      remotes: remotes,
      remoteTypesDir: './src/types',
      clearOnStart: 'build',
      clearOnEnd: 'types',
    }),
  ]
// ...

After build

build/types folder (generated .d.ts file)

  // build/types/app.d.ts
  declare module "app/component" {
    //... component types
  }

  declare module "app/component_2" {
    //... component_2 types
  }

src/types folder (downloaded .d.ts files)

  app1.d.ts
  app2.d.ts