Update typescript sample

different-react-versions-typescript/README.md

@@ -2,6 +2,8 @@
 
 This example demos the ability to load two separate versions of react (v16.6.3 and v18.2.0).
 
+Read more about TypeScript and Federation: https://module-federation.io/guide/basic/type-prompt.html
+
 > 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.
@@ -62,8 +64,7 @@ This is a generic component type, so you can pass the generic parameter to the c
 
 ```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
+// Read more here: https://module-federation.io/guide/basic/type-prompt.html
 import type { ButtonProps } from 'app2/Button';
 
 <ReactAdapterConsumer<ButtonProps>

different-react-versions-typescript/app1/@mf-types/app2/Button.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/Button';
+export { default } from './compiled-types/Button';

different-react-versions-typescript/app1/@mf-types/app2/ModernComponent.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/ModernReactComponent';
+export { default } from './compiled-types/ModernReactComponent';

different-react-versions-typescript/app1/@mf-types/app2/compiled-types/Button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ButtonProps {
+    color?: 'blue' | 'red';
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

different-react-versions-typescript/app1/@mf-types/app2/compiled-types/ModernReactComponent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactAdapterProvider from './ReactAdapterProvider';
+export interface ModernReactComponentProps {
+    children?: React.ReactNode;
+    input: string;
+}
+declare const ModernReactComponent: React.FC<ModernReactComponentProps>;
+export declare const Adapted: React.ForwardRefExoticComponent<ModernReactComponentProps & React.RefAttributes<ReactAdapterProvider<ModernReactComponentProps>>>;
+export default ModernReactComponent;

different-react-versions-typescript/app1/@mf-types/app2/compiled-types/ReactAdapterProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type ReactAdapterProviderProps<P = {}> = P & {
+    component: React.FunctionComponent<P> | React.ComponentClass<P> | keyof React.ReactHTML | string;
+    children?: React.ReactNode;
+};
+export interface ReactAdapterProviderState {
+    Component: React.ReactNode;
+}
+declare class ReactAdapterProvider<P = {}> extends React.Component<ReactAdapterProviderProps<P>, ReactAdapterProviderState> {
+    private refHold;
+    constructor(props: ReactAdapterProviderProps<P>);
+    init: (hydrate?: boolean) => void;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export default ReactAdapterProvider;

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

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

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

@@ -2,7 +2,7 @@
   "name": "different-react-versions-typescript_app1",
   "version": "0.0.0",
   "scripts": {
-    "legacy:start": "webpack-cli serve",
+    "legacy:start": "webpack serve",
     "start": "rspack serve",
     "legacy:build": "webpack --mode production",
     "build": "rspack --mode production",
@@ -32,4 +32,4 @@
     "@rspack/cli": "^0.6.2",
     "@rspack/dev-server": "^0.6.2"
   }
-}
+}

different-react-versions-typescript/app1/rspack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin } = require('@rspack/core').container;
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
 const path = require('path');
 const deps = require('./package.json').dependencies;
 
@@ -46,9 +46,8 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: 'app1',
-      library: { type: 'var', name: 'app1' },
       remotes: {
-        app2: 'app2',
+        app2: 'app2@http://localhost:3002/remoteEntry.js',
       },
       shared: {
         ...deps,

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

@@ -1,6 +1,10 @@
 {
   "extends": "../tsconfig.base.json",
-  "compilerOptions": {},
+  "compilerOptions": {
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
   "include": ["src/**/*", "**/*.d.ts"],
   "exclude": ["node_modules"]
 }

different-react-versions-typescript/app1/webpack.config.js

@@ -37,9 +37,9 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: 'app1',
-      library: { type: 'var', name: 'app1' },
+      dts:true,
       remotes: {
-        app2: 'app2',
+        app2: 'app2@http://localhost:3002/remoteEntry.js',
       },
       shared: {
         ...deps,

different-react-versions-typescript/app2/rspack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin } = require('@rspack/core').container;
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
 const path = require('path');
 
 module.exports = {
@@ -44,7 +44,6 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: 'app2',
-      library: { type: 'var', name: 'app2' },
       filename: 'remoteEntry.js',
       exposes: {
         './Button': './src/components/Button',

different-react-versions-typescript/app2/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "../tsconfig.base.json",
-  "compilerOptions": {},
+  "compilerOptions": {
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
   "include": ["src/**/*", "**/*.d.ts"],
   "exclude": ["node_modules"]
 }

different-react-versions-typescript/app2/webpack.config.js

@@ -36,7 +36,6 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: 'app2',
-      library: { type: 'var', name: 'app2' },
       filename: 'remoteEntry.js',
       exposes: {
         './Button': './src/components/Button',

different-react-versions-typescript/tsconfig.base.json

@@ -15,8 +15,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
     "paths": {
-      "@app1/*": ["./app1/src/*"],
-      "@app2/*": ["./app2/src/*"]
+      "*": ["./@mf-types/*"]
     }
   },
   "exclude": ["node_modules", "tmp"]

dynamic-remotes-node/README.md

@@ -5,6 +5,3 @@ Similar to browser side dynamic remotes.
 This allows you to dynamically load remote containers on the server.
 
 `pnpm run start` will initiate a build and http server, then node will execute a simple test.
-
-## runtime-container
-This example shows the same thing but how to do it outside of the webpack runtime (outside a webpack bundle). See the script `import-remote.js`, which is not compiled by webpack. Run the command `yarn import-remote` or simply, `node import-remote.js`

dynamic-remotes-node/app1/rspack.config.js

@@ -0,0 +1,19 @@
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  output: {
+    library: {type: 'commonjs-module',}
+  },
+  target: 'async-node',
+  plugins: [
+    new ModuleFederationPlugin({
+      remoteType: 'script',
+      name: 'app1',
+      runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
+      exposes: {
+        './noop': './noop.js',
+      }
+    }),
+  ]
+}

dynamic-remotes-node/app1/webpack.config.js

@@ -11,6 +11,7 @@ module.exports = {
       remoteType: 'script',
       isServer: true,
       name: 'app1',
+      useRuntimePlugin: true,
       exposes: {
         './noop': './noop.js',
       }

dynamic-remotes-node/app2/rspack.config.js

@@ -0,0 +1,22 @@
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  target: 'async-node',
+  output: {
+    library: {type: 'commonjs-module',}
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      remoteType: 'script',
+      isServer: true,
+      name: 'app2',
+      library: {type: 'commonjs-module',},
+      runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
+      filename: 'remoteEntry.js',
+      exposes: {
+        './sample': './expose-sample.js',
+      }
+    }),
+  ]
+}

dynamic-remotes-node/app2/webpack.config.js

@@ -11,6 +11,7 @@ module.exports = {
       remoteType: 'script',
       isServer: true,
       name: 'app2',
+      useRuntimePlugin: true,
       library: {type: 'commonjs-module',},
       filename: 'remoteEntry.js',
       exposes: {

dynamic-remotes-node/package.json

@@ -6,16 +6,21 @@
   "license": "MIT",
   "scripts": {
     "serve": "concurrently 'serve -s app1/dist -l 3001' 'serve -s app2/dist -l 3002'",
-    "build": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js'  'cd app2; webpack --config ./webpack.config.js'",
-    "start": "pnpm build && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'",
-    "import-remote": "node import-remote.js"
+    "build:legacy": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js'  'cd app2; webpack --config ./webpack.config.js'",
+    "build": "rimraf dist/server && concurrently 'cd app1; rspack --config ./rspack.config.js' 'cd runtime-container; rspack --config ./rspack.config.js'  'cd app2; rspack --config ./rspack.config.js'",
+    "start:legacy": "pnpm build:legacy && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'",
+    "start": "pnpm build && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'"
   },
   "dependencies": {
     "@module-federation/node": "^2.2.0",
+    "@module-federation/enhanced": "^0.1.9",
     "@module-federation/runtime": "^0.1.9",
     "concurrently": "^8.0.1",
     "webpack": "^5.91.0",
     "rimraf": "^5.0.5",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "@rspack/cli": "^0.6.2",
+    "@rspack/core": "^0.6.2",
+    "@rspack/dev-server": "^0.6.2"
   }
-}
+}

dynamic-remotes-node/runtime-container/rspack.config.js

@@ -0,0 +1,26 @@
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
+
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  target: 'async-node',
+  output: {
+    library: {type: 'commonjs-module',}
+  },
+  optimization: {
+    runtimeChunk: 'single',
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      remoteType: 'script',
+      isServer: true,
+      name: 'app2',
+      library: {type: 'commonjs-module',},
+      runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
+      filename: 'remoteEntry.js',
+      exposes: {
+        './sample': './expose-sample.js',
+      }
+    }),
+  ]
+}

dynamic-remotes-node/runtime-container/webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
       remoteType: 'script',
       isServer: true,
       name: 'app2',
+      useRuntimePlugin: true,
       library: {type: 'commonjs-module',},
       filename: 'remoteEntry.js',
       exposes: {