Bundler agnostic unplugin to share federated types
npm install @module-federation/native-federation-typescriptBundler agnostic plugins to share federated types.
``bash`
npm i -D @module-federation/native-federation-typescript
This module provides two plugins:
This plugin is used to build the federated types.
#### Configuration
`typescript`
{
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.
This plugin is used to download the federated types.
`typescript`
{
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
}
Vite
`ts
// 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
`ts
// rollup.config.js
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/rollup';
export default {
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
};
`
Webpack
`ts`
// webpack.config.js
const { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } = require('@module-federation/native-federation-typescript/webpack');
module.exports = {
/ ... /
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
};
esbuild
`ts
// esbuild.config.js
import { build } from 'esbuild';
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/esbuild';
build({
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
});
`
Rspack
`ts`
// rspack.config.js
const { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } = require('@module-federation/native-federation-typescript/rspack');
module.exports = {
/ ... /
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
};
Rolldown
`ts
// rolldown.config.js
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/rolldown';
export default {
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
};
`
Farm
`ts
// farm.config.ts
import { NativeFederationTypeScriptHost, NativeFederationTypeScriptRemote } from '@module-federation/native-federation-typescript/farm';
const config: UserConfig = {
plugins: [
NativeFederationTypeScriptRemote({
/ options /
}),
NativeFederationTypeScriptHost({
/ options /
}),
],
};
`
To have the type definitions automatically found for imports, add paths to the compilerOptions in the tsconfig.json:
`json`
{
"paths": {
"": ["./@mf-types/"]
}
}
To use it in a host module, refer to this example. remote` module, refer to this example.
To use it in a