@module-federation/dts-plugin

What is @module-federation/dts-plugin?

@module-federation/dts-plugin is a plugin designed to generate TypeScript declaration files (d.ts) for federated modules. It helps in creating type definitions for modules that are shared across different applications using Module Federation, ensuring type safety and better developer experience.

What are @module-federation/dts-plugin's main functionalities?

Generate TypeScript Declarations

This feature allows you to generate TypeScript declaration files for your federated modules. By configuring the DtsPlugin with the necessary options, you can ensure that your shared components have the appropriate type definitions.

const { DtsPlugin } = require('@module-federation/dts-plugin');

module.exports = {
  plugins: [
    new DtsPlugin({
      name: 'my-federated-module',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component',
      },
    }),
  ],
};

Custom Output Directory

This feature allows you to specify a custom output directory for the generated TypeScript declaration files. By setting the `outputDir` option, you can control where the type definitions are saved.

const { DtsPlugin } = require('@module-federation/dts-plugin');

module.exports = {
  plugins: [
    new DtsPlugin({
      name: 'my-federated-module',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component',
      },
      outputDir: 'types',
    }),
  ],
};

TypeScript Configuration

This feature allows you to specify a custom TypeScript configuration file for generating the declaration files. By setting the `tsConfigFile` option, you can ensure that the TypeScript compiler uses the correct settings.

const { DtsPlugin } = require('@module-federation/dts-plugin');

module.exports = {
  plugins: [
    new DtsPlugin({
      name: 'my-federated-module',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component',
      },
      tsConfigFile: 'tsconfig.json',
    }),
  ],
};

Other packages similar to @module-federation/dts-plugin

typescript

The TypeScript package itself can be used to generate declaration files using the `tsc` command with the `--declaration` flag. However, it does not provide the same level of integration with Module Federation as @module-federation/dts-plugin.

dts-bundle

dts-bundle is a tool that can bundle multiple TypeScript declaration files into a single file. While it can be used to manage type definitions, it does not specifically cater to the needs of Module Federation.

rollup-plugin-dts

rollup-plugin-dts is a Rollup plugin that generates TypeScript declaration files. It can be used in a Rollup-based build process, but it does not have built-in support for Module Federation like @module-federation/dts-plugin.

README

@module-federation/dts-plugin