update typescript example to stream typescript (#2240)

* update typescript example to strteam typescript

* update readme and contributors

README.md

@@ -40,7 +40,7 @@ This repository is to showcase examples of how Webpack 5's new Module Federation
 - [x] Non-UI Module
 - [x] [Routing](./shared-routing/README.md) — An example of sharing router context. Also worth looking at - [Routing 2](./shared-routes2/README.md)
 - [x] [Version Discrepancy](./version-discrepancy/README.md) — Federated apps depending on different versions of a dependency without side-effects.
-- [x] [TypeScript](./typescript/README.md) — Simple host/remote example using TypeScript.
+- [x] [TypeScript](./typescript/README.md) — Streaming TypeScript between module-federation apps.
 - [x] [Angular Universal](./angular-universal-ssr/README.md) — Remote and Host app with SSR, lazy modules and components.
 - [x] [NextJS Sidecar Build](./nextjs-sidecar/README.md) — Sidecar build to enable module-federation alongside Next codebases.
 - [x] 💰[NextJS](./nextjs/README.md) — Operation, with [nextjs-mf](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf).

package.json

@@ -4,6 +4,9 @@
  "description": "Examples showcasing Webpack 5's Module Federation",
  "repository": "https://github.com/module-federation/module-federation-examples.git",
  "author": "Zack Jackson <[email protected]> (https://github.com/ScriptedAlchemy)",
+ "contributors": [
+ "Prasanna Mestha <[email protected]> (https://github.com/prasannamestha)"
+ ],
  "license": "MIT",
  "private": true,
  "workspaces": {

typescript/README.md

@@ -1,11 +1,19 @@
 # TypeScript Example
 
-This example demos a basic host/remote application with TypeScript.
+This example demos a basic host/remote application with TypeScript and also streams types.
+
+# Installation
+You can grab a free license for this plugin via privjs.com: [https://app.privjs.com/buy/packageDetail?pkg=@module-federation/typescript](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/typescript). Then run the following commands:
+```bash
+$ npm config set @module-federation:registry https://r.privjs.com
+$ npm i @module-federation/typescript
+```
 
 # Running Demo
 
 Run `yarn start`. This will build and serve both `app1` and `app2` on ports 3001 and 3002 respectively.
 
 - [localhost:3001](http://localhost:3001/)
 - [localhost:3002](http://localhost:3002/)
- <img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/TypeScript">
+
+<img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/TypeScript">

typescript/app1/package.json

@@ -23,6 +23,7 @@
  "clean": "rm -rf dist"
  },
  "dependencies": {
+ "@module-federation/typescript": "^0.1.8",
  "react": "^16.13.0",
  "react-dom": "^16.13.0"
  }

typescript/app1/src/App.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
+// @mf-typescript directory is autogenerated when you start the server
+import RemoteButtonType from '../@mf-typescript/Button';
 
-const RemoteButton = React.lazy(() => import('app2/Button'));
+const RemoteButton = React.lazy(() => import('app2/Button')) as unknown as typeof RemoteButtonType;
 
 const App = () => (
  <div>
  <h1>Typescript</h1>
  <h2>App 1</h2>
  <React.Suspense fallback="Loading Button">
- <RemoteButton />
+ <RemoteButton size='large' />
+ <br />
+ <RemoteButton size='small' />
  </React.Suspense>
  </div>
 );

typescript/app1/webpack.config.js

@@ -1,5 +1,6 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
+const FederatedTypesPlugin = require('@module-federation/typescript')
 const path = require('path');
 
 module.exports = {
@@ -37,6 +38,7 @@ module.exports = {
  },
  shared: ['react', 'react-dom'],
  }),
+ new FederatedTypesPlugin(),
  new HtmlWebpackPlugin({
  template: './public/index.html',
  }),

typescript/app2/package.json

@@ -23,6 +23,7 @@
  "clean": "rm -rf dist"
  },
  "dependencies": {
+ "@module-federation/typescript": "^0.1.8",
  "react": "^16.13.0",
  "react-dom": "^16.13.0"
  }

typescript/app2/src/Button.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
 
-const Button = () => <button>App 2 Button</button>;
+type ButtonProps = {
+ size: 'small' | 'large'
+}
+const Button: React.FC<ButtonProps> = ({ size }) => {
+ if (size === 'large') {
+ return <button>App2 Large Button</button>
+ }
+ return <button>App 2 Small Button</button>
+};
 
 export default Button;

typescript/app2/webpack.config.js

@@ -1,5 +1,6 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
+const FederatedTypesPlugin = require('@module-federation/typescript')
 const path = require('path');
 
 module.exports = {
@@ -38,6 +39,7 @@ module.exports = {
  },
  shared: ['react', 'react-dom'],
  }),
+ new FederatedTypesPlugin(),
  new HtmlWebpackPlugin({
  template: './public/index.html',
  }),