feat: add different-react-versions-typescript (#2745)

Co-authored-by: Bruno Silva <bruno3dcontato@gmail.com>

Author: ScriptedAlchemy

different-react-versions-typescript/README.md

@@ -0,0 +1,77 @@
+# Mixed React Versions and Compatibility levels
+
+This example demos the ability to load two separate versions of react (v16.6.3 and v18.2.0).
+
+> Check the javascript version of this example [here](../different-react-versions/README.md).
+
+Module Federation allows us to create an adapter which attaches a hooks-friendly version to render a section of thr app using modern versions.
+
+- `app1` uses and older version of react, not compatible with react Hooks
+- `app2` uses a modern react version and its components are hooks based
+
+## 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/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
+
+## How it works
+
+This example contains two important components, the `ReactAdapterConsumer` and `ReactAdapterProvider`. They are responsible to make the two versions of react work together.
+
+The adapter consumes both versions of react to "translate" the props into a fresh render. This could be presented as a HOC or federated components could have a legacy export containing the adapter build in.
+
+### [ReactAdapterProvider](./app2/src/components/ReactAdaperProvider.tsx)
+
+This component is responsible to dynamic render/hydrate the federated component using it host version of React.
+
+> You can see the usage [here](./app2/src/components/ModernReactComponent.tsx#29).
+
+This is a generic component type, so you can pass the generic parameter to the component to specify the type of the props.
+
+```jsx
+import React from 'react';
+
+export interface ButtonProps {
+  color: 'red' | 'blue';
+}
+
+const Button = (props: ButtonProps) => {
+  return <button style={{ color: props.color }}>Click me</button>;
+};
+
+export const Adapted = React.forwardRef<
+    ReactAdaperProvider<ModernReactComponentProps>,
+    ModernReactComponentProps
+  >((props, ref) => {
+  // the intellisesne will show the type of the props if you try to modify it
+  return (
+    <ReactAdaperProvider<ButtonProps> component={Button} color="red" ref={ref} />
+  );
+});
+```
+
+### [ReactAdapterConsumer](./app1/src/components/ReactAdapterConsumer.tsx)
+
+This component is responsible to render the federated component using the remote version of React.
+
+> You can see the usage [here](./app1/src/components/App.tsx#41).
+
+This is a generic component type, so you can pass the generic parameter to the component to specify the type of the props.
+
+```jsx
+// remeber to add path alias to your tsconfig.base.json at the root of the workspace and the type definition file of the remote component
+// this demo contains an example that reproduce that but you can check in the gist below
+// https://gist.github.com/brunos3d/80235047c74b27573234c774ed474ef8
+import type { ButtonProps } from 'app2/Button';
+
+<ReactAdapterConsumer<ButtonProps>
+  // you can try to modify the color value and the intellisense automatically will show the type of the props
+  color="blue"
+  fallback={<div>Loading...</div>}
+  importer={() => import('app2/Button').then(module => ({ default: module.Adapted }))}
+/>;
+```
+
+<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/DifferentReactVersionsTypescript">

different-react-versions-typescript/app1/.babelrc

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

different-react-versions-typescript/app1/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'app2/Button' {
+  export * from 'app2/src/components/Button';
+}
+
+declare module 'app2/ModernComponent' {
+  export * from 'app2/src/components/ModernReactComponent';
+}

different-react-versions-typescript/app1/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@different-react-versions-typescript/app1",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "webpack-cli serve",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3001",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "react": "16.6.3",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.18.9",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.17",
+    "babel-loader": "8.2.5",
+    "html-webpack-plugin": "5.5.0",
+    "serve": "13.0.4",
+    "typescript": "~4.8.4",
+    "webpack": "5.72.1",
+    "webpack-cli": "4.9.2",
+    "webpack-dev-server": "4.9.3"
+  }
+}

different-react-versions-typescript/app1/public/index.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="<%= htmlWebpackPlugin.options.app2RemoteEntry %>"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

different-react-versions-typescript/app1/src/bootstrap.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+ReactDOM.render(<App />, document.getElementById('root'));

different-react-versions-typescript/app1/src/components/App.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactAdapterConsumer from './ReactAdapterConsumer';
+
+// you can import types with alias
+import type { ButtonProps } from 'app2/Button';
+
+const RemoteButton = React.lazy(
+  () => import('app2/Button') as Promise<{ default: React.ComponentType<ButtonProps> }>,
+);
+
+// const ModernComponent = React.lazy(() => import("app2/ModernComponent"));
+// Hooks not suppoorted, uncomment to verify this is a pre-hooks react version being used.
+// import HookComponent from './ComponentWithHook'
+
+export interface AppProps {}
+
+export interface AppState {
+  input: string;
+}
+
+class App extends React.Component<AppProps, AppState> {
+  constructor(props: AppProps) {
+    super(props);
+    this.state = { input: '' };
+    this.setValue = this.setValue.bind(this);
+  }
+
+  setValue(e: React.ChangeEvent<HTMLInputElement>) {
+    this.setState({ input: e.target.value });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Basic Host-Remote</h1>
+        <h2>App 1, Uses react version not compatible with hooks</h2>
+        <input onChange={this.setValue} placeholder="Type something into this input" />
+
+        <div style={{ border: '1px red solid', padding: '10px', margin: '20px 0' }}>
+          {/* the generic component accepts property types */}
+          <ReactAdapterConsumer<AppState>
+            // any other props, passed to ModernComponent
+            {...this.state}
+            fallback={<div>Loading...</div>}
+            importer={() =>
+              import('app2/ModernComponent').then(module => ({ default: module.Adapted }))
+            }
+          >
+            <h3>And these are children passed into it from the legacy app</h3>
+          </ReactAdapterConsumer>
+        </div>
+
+        {/*This will Fail*/}
+        {/*<HookComponent/>*/}
+
+        <div style={{ border: '1px red solid', padding: '10px', margin: '20px 0' }}>
+          <React.Suspense fallback="Loading Button">
+            {/* The autocomplete works here, try it modifing the color value */}
+            <RemoteButton color="red" />
+          </React.Suspense>
+        </div>
+
+        {/*This will fail without Adapter*/}
+        {/*<React.Suspense fallback="Loading Button">*/}
+        {/*  <ModernComponent />*/}
+        {/*</React.Suspense>*/}
+      </div>
+    );
+  }
+}
+
+export default App;

different-react-versions-typescript/app1/src/components/ComponentWithHook.tsx

@@ -0,0 +1,11 @@
+import React, { useEffect } from 'react';
+
+const ComponentWithHook = () => {
+  React.useEffect(() => {
+    console.log('some effect from app1');
+  }, []);
+
+  return <span>This should break, no hooks supported in this app.</span>;
+};
+
+export default ComponentWithHook;

different-react-versions-typescript/app1/src/components/ReactAdapterConsumer.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export type ReactAdapterConsumerProps<P = {}> = Partial<P> & {
+  fallback: React.SuspenseProps['fallback'];
+  // the Adapter will be the same as the exported from ReactAdapterProvider
+  importer: () => Promise<{
+    default: React.ComponentType<P> | React.ExoticComponent<P> | React.FunctionComponent<P>;
+  }>;
+};
+
+export interface ReactAdapterConsumerState {
+  Component: React.ReactNode;
+}
+
+class ReactAdapterConsumer<P = {}> extends React.Component<
+  ReactAdapterConsumerProps<P>,
+  ReactAdapterConsumerState
+> {
+  private RemoteComponent: React.LazyExoticComponent<React.ComponentType<P>>;
+
+  constructor(props: ReactAdapterConsumerProps<P>) {
+    super(props);
+    this.state = { Component: () => null };
+    this.RemoteComponent = React.lazy(() => this.props.importer());
+  }
+
+  render() {
+    return (
+      <React.Suspense fallback={this.props.fallback}>
+        <this.RemoteComponent {...(this.props as P)} />
+      </React.Suspense>
+    );
+  }
+}
+
+export default ReactAdapterConsumer;

different-react-versions-typescript/app1/src/index.ts

@@ -0,0 +1 @@
+import('./bootstrap');