{"id":13492760,"url":"https://github.com/module-federation/typescript","last_synced_at":"2025-03-28T10:32:54.875Z","repository":{"id":58107356,"uuid":"474242945","full_name":"module-federation/typescript","owner":"module-federation","description":"Typescript Types Support For Module Federation ","archived":true,"fork":false,"pushed_at":"2022-10-06T14:02:35.000Z","size":60,"stargazers_count":105,"open_issues_count":7,"forks_count":9,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-29T14:22:25.266Z","etag":null,"topics":["federated-types","federation","module","remote","remote-types","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/module-federation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-26T04:40:16.000Z","updated_at":"2024-10-11T08:09:30.000Z","dependencies_parsed_at":"2023-01-19T18:18:36.437Z","dependency_job_id":null,"html_url":"https://github.com/module-federation/typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Ftypescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Ftypescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Ftypescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Ftypescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/module-federation","download_url":"https://codeload.github.com/module-federation/typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245699684,"owners_count":20658068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["federated-types","federation","module","remote","remote-types","typescript"],"created_at":"2024-07-31T19:01:08.956Z","updated_at":"2025-03-28T10:32:54.556Z","avatar_url":"https://github.com/module-federation.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Typescript support for module federated apps\n\n# Project Status\n\n\u003e ## 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.\n\u003e ## Going forward please raise any issues in the `NextJs-mf` repo.\n\n### Installation\n```\n$ npm i @module-federation/typescript\n```\n\n### Usage\nRegister the plugin in webpack.config.js file\n```javascript\nconst FederatedTypesPlugin = require('@module-federation/typescript')\n\nconst federationConfig = {\n  name: 'my-app',\n  filename: 'remoteEntry.js',\n  exposes: {\n    //...exposed components\n    './Button': './src/Button',\n    './Input': './src/Input',\n  },\n  remotes: {\n    app2: 'app2@http://localhost:3002/remoteEntry.js',\n  },\n  shared: ['react', 'react-dom'],\n}\n\nplugins: [\n  // ...\n  new ModuleFederationPlugin(federationConfig),\n  new FederatedTypesPlugin(), // Optional: you can pass federationConfig object here as well\n]\n```\n\nYou 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.\n\nIn your file:\n```javascript\nimport RemoteButtonType from \"../@mf-typescript/Button\";\n\nconst RemoteButton = React.lazy(\n  () =\u003e import(\"app2/Button\")\n) as unknown as typeof RemoteButtonType;\n```\n\n### Usage in Next.js\nYou need to manually pass the `federationConfig` object to the plugin. The `remotes` value should contain absolute path.\n\nSample code:\n```javascript\n// next.config.js\nconst FederatedTypesPlugin = require('@module-federation/typescript')\n\nmodule.exports = {\n  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =\u003e {\n    config.plugins.push(\n      new ModuleFederationPlugin(federationConfig),\n      new FederatedTypesPlugin({\n        ...federationConfig,\n        remotes: { app2: 'app2@http://localhost:3000/remoteEntry.js' }\n      })\n    )\n    return config\n  },\n}\n```\n\n### Support\nDrop me a message on twitter for support/feedback, or maybe just say Hi at [@prasannamestha](https://twitter.com/prasannamestha)\n\n### Credits\nShoutout to [@ScriptedAlchemy](https://twitter.com/ScriptedAlchemy) for helping with the development of this plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodule-federation%2Ftypescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodule-federation%2Ftypescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodule-federation%2Ftypescript/lists"}