Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@module-federation/native-federation-typescript

Package Overview
Dependencies
Maintainers
8
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@module-federation/native-federation-typescript

Bundler agnostic unplugin to share federated types

  • 0.0.0-next-20240325035415
  • npm
  • Socket score

Version published
Weekly downloads
5.4K
increased by3.36%
Maintainers
8
Weekly downloads
 
Created
Source

native-federation-typescript

Bundler agnostic plugins to share federated types.

Install

npm i -D @module-federation/native-federation-typescript

This module provides two plugins:

NativeFederationTypeScriptRemote

This plugin is used to build the federated types.

Configuration
{
    moduleFederationConfig: any; // the configuration same configuration provided to the module federation plugin, it is MANDATORY
    tsConfigPath?: string; // path where the tsconfig file is located, default is ''./tsconfig.json'
    typesFolder?: string; // folder where all the files will be stored, default is '@mf-types',
    compiledTypesFolder?: string; // folder where the federated modules types will be stored, default is 'compiled-types'
    deleteTypesFolder?: boolean; // indicate if the types folder will be deleted when the job completes, default is 'true'
    additionalFilesToCompile?: string[] // The path of each additional file which should be emitted
    compilerInstance?: 'tsc' | 'vue-tsc' // The compiler to use to emit files, default is 'tsc'
}
Additional configuration

Note that, for Webpack, the plugin automatically inject the devServer.static.directory configuration.
For the other bundlers, you should configure it by yourself.

NativeFederationTypeScriptHost

This plugin is used to download the federated types.

Configuration

{
    moduleFederationConfig: any; // the configuration same configuration provided to the module federation plugin, it is MANDATORY
    typesFolder?: string; // folder where all the files will be stored, default is '@mf-types',
    deleteTypesFolder?: boolean; // indicate if the types folder will be deleted before the job starts, default is 'true'
    maxRetries?: number; // The number of times the plugin will try to download the types before failing, default is 3
}

Bundler configuration

Vite
// vite.config.ts
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/vite';

export default defineConfig({
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
  /* ... */
  server: {
    // This is needed to emulate the devServer.static.directory of WebPack and correctly serve the zip file
    /* ... */
    proxy: {
      '/@mf-types.zip': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: () => `/@fs/${process.cwd()}/dist/@mf-types.zip`,
      },
    },
    fs: {
      /* ... */
      allow: ['./dist'],
      /* ... */
    },
  },
});

Rollup
// rollup.config.js
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/rollup';

export default {
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
};

Webpack
// webpack.config.js
const { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } = require('@module-federation/native-federation-typescript/webpack');
module.exports = {
  /* ... */
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
};

esbuild
// esbuild.config.js
import { build } from 'esbuild';
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/esbuild';

build({
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
});

Rspack
// rspack.config.js
const { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } = require('@module-federation/native-federation-typescript/rspack');
module.exports = {
  /* ... */
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
};

Rolldown
// rolldown.config.js
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/rolldown';

export default {
  plugins: [
    NativeFederationTypeScriptRemote({
      /* options */
    }),
    NativeFederationTypeScriptHost({
      /* options */
    }),
  ],
};

TypeScript configuration

To have the type definitions automatically found for imports, add paths to the compilerOptions in the tsconfig.json:

{
  "paths": {
    "*": ["./@mf-types/*"]
  }
}

Examples

To use it in a host module, refer to this example.
To use it in a remote module, refer to this example.

Keywords

FAQs

Package last updated on 25 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc