https://github.com/module-federation/typescript

Typescript Types Support For Module Federation
https://github.com/module-federation/typescript

federated-types federation module remote remote-types typescript

Last synced: about 2 months ago
JSON representation

Typescript Types Support For Module Federation

• Host: GitHub
• URL: https://github.com/module-federation/typescript
• Owner: module-federation
• Archived: true
• Created: 2022-03-26T04:40:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T14:02:35.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T21:48:09.737Z (5 months ago)
• Topics: federated-types, federation, module, remote, remote-types, typescript
• Language: JavaScript
• Homepage:
• Size: 58.6 KB
• Stars: 104
• Watchers: 6
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Typescript support for module federated apps

# Project Status

> ## This project is now moved to [module-federation/nextjs-mf](https://github.com/module-federation/nextjs-mf/tree/main/packages/typescript). All the feature development for this package will be made from the new repo.

> ## Going forward please raise any issues in the `NextJs-mf` repo.

### Installation

```

$ npm i @module-federation/typescript

```

### Usage

Register the plugin in webpack.config.js file

```javascript

const FederatedTypesPlugin = require('@module-federation/typescript')

const federationConfig = {

  name: 'my-app',

  filename: 'remoteEntry.js',

  exposes: {

    //...exposed components

    './Button': './src/Button',

    './Input': './src/Input',

  },

  remotes: {

    app2: 'app2@http://localhost:3002/remoteEntry.js',

  },

  shared: ['react', 'react-dom'],

}

plugins: [

  // ...

  new ModuleFederationPlugin(federationConfig),

  new FederatedTypesPlugin(), // Optional: you can pass federationConfig object here as well

]

```

You need to register this plugin in both remote and host apps. The plugin will automatically create a directory named `@mf-typescript` in the host app - that contains all the types exported by the remote apps.

In your file:

```javascript

import RemoteButtonType from "../@mf-typescript/Button";

const RemoteButton = React.lazy(

  () => import("app2/Button")

) as unknown as typeof RemoteButtonType;

```

### Usage in Next.js

You need to manually pass the `federationConfig` object to the plugin. The `remotes` value should contain absolute path.

Sample code:

```javascript

// next.config.js

const FederatedTypesPlugin = require('@module-federation/typescript')

module.exports = {

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

    config.plugins.push(

      new ModuleFederationPlugin(federationConfig),

      new FederatedTypesPlugin({

        ...federationConfig,

        remotes: { app2: 'app2@http://localhost:3000/remoteEntry.js' }

      })

    )

    return config

  },

}

```

### Support

Drop me a message on twitter for support/feedback, or maybe just say Hi at [@prasannamestha](https://twitter.com/prasannamestha)

### Credits

Shoutout to [@ScriptedAlchemy](https://twitter.com/ScriptedAlchemy) for helping with the development of this plugin.