feat: enhance type capabilities

.changeset/config.json

@@ -11,7 +11,13 @@
       "@module-federation/sdk",
       "@module-federation/runtime-tools",
       "@module-federation/managers",
-      "@module-federation/manifest"
+      "@module-federation/manifest",
+      "@module-federation/dev-server",
+      "@module-federation/dev-kit",
+      "@module-federation/dev-plugin",
+      "@module-federation/dts-kit",
+      "@module-federation/third-party-dts-extractor",
+      "@module-federation/native-federation-typescript"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/late-mice-hope.md

@@ -0,0 +1,14 @@
+---
+'@module-federation/native-federation-typescript': patch
+'@module-federation/third-party-dts-extractor': patch
+'@module-federation/enhanced-rspack': patch
+'@module-federation/dev-plugin': patch
+'@module-federation/dev-server': patch
+'@module-federation/enhanced': patch
+'@module-federation/manifest': patch
+'@module-federation/dev-kit': patch
+'@module-federation/dts-kit': patch
+'@module-federation/sdk': patch
+---
+
+feat: enhance type capability

.gitignore

@@ -54,3 +54,4 @@ apps/**/dist
 !packages/enhanced/test/configCases/**/**/node_modules
 packages/enhanced/test/js
 .ignored
+/.mf

apps/3000-home/next.config.js

@@ -12,7 +12,9 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
-
+    config.watchOptions = {
+      ignored: ['**/node_modules/**', '**/@mf-types/**'],
+    };
     // used for testing build output snapshots
     const remotes = {
       checkout: `checkout@http://localhost:3002/_next/static/${

apps/3001-shop/next.config.js

@@ -11,7 +11,9 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
-
+    config.watchOptions = {
+      ignored: ['**/node_modules/**', '**/@mf-types/**'],
+    };
     config.plugins.push(
       new NextFederationPlugin({
         name: 'shop',

apps/3002-checkout/next.config.js

@@ -12,6 +12,9 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
+    config.watchOptions = {
+      ignored: ['**/node_modules/**', '**/@mf-types/**'],
+    };
     config.plugins.push(
       new NextFederationPlugin({
         name: 'checkout',

apps/react-ts-host/@mf-types/index.d.ts

@@ -0,0 +1,24 @@
+import type {
+  PackageType as PackageType_0,
+  RemoteKeys as RemoteKeys_0,
+} from './react_ts_nested_remote/apis.d.ts';
+declare module '@module-federation/runtime' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@module-federation/runtime-tools' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}

apps/react-ts-host/@mf-types/react_ts_nested_remote/Module.d.ts

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

apps/react-ts-host/@mf-types/react_ts_nested_remote/apis.d.ts

@@ -0,0 +1,8 @@
+export type RemoteKeys =
+  | 'react_ts_nested_remote/Module'
+  | 'react_ts_nested_remote/utils';
+type PackageType<T> = T extends 'react_ts_nested_remote/utils'
+  ? typeof import('react_ts_nested_remote/utils')
+  : T extends 'react_ts_nested_remote/Module'
+  ? typeof import('react_ts_nested_remote/Module')
+  : any;

apps/react-ts-host/@mf-types/react_ts_nested_remote/compiled-types/nx-welcome.d.ts

@@ -0,0 +1,2 @@
+import RemoteModule from 'react_ts_remote/Module';
+export default RemoteModule;

apps/react-ts-host/@mf-types/react_ts_nested_remote/compiled-types/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function add(a: number, b: number, c: number): number;
+export declare function sub(a: number, b: number, c: number): number;

apps/react-ts-host/@mf-types/react_ts_nested_remote/utils.d.ts

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

apps/react-ts-host/package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "@module-federation/core": "workspace:*",
-    "@module-federation/typescript": "workspace:*",
     "@module-federation/enhanced": "workspace:*",
+    "@module-federation/core": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "react-refresh": "0.14.0"
   }

apps/react-ts-host/project.json

@@ -9,7 +9,7 @@
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "compiler": "swc",
+        "compiler": "babel",
         "outputPath": "apps/react-ts-host/dist",
         "index": "apps/react-ts-host/src/index.html",
         "baseHref": "/",

apps/react-ts-host/src/app/App.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
 import NxWelcome from './nx-welcome';
 import { Link, Route, Routes } from 'react-router-dom';
+import { loadRemote } from '@module-federation/runtime';
 import useDynamicModule from './useDynamicRemote';
 
-const ReactTsRemote = React.lazy(() => import('react_ts_remote/Module'));
+const ReactTsRemote = React.lazy(() => import('react_ts_nested_remote/Module'));
+
+loadRemote('react_ts_nested_remote/utils').then((utils) => {
+  console.log(utils.add(1, 2, 3) + utils.sub(1, 2, 3));
+});
 
 const DynamicReactTsRemote = React.lazy(() =>
   useDynamicModule({
-    name: 'react_ts_remote',
-    url: 'http://localhost:3004/remoteEntry.js',
+    name: 'react_ts_nested_remote',
+    url: 'http://localhost:3005/remoteEntry.js',
     modulePath: './Module',
   }),
 );
@@ -29,7 +34,10 @@ export function App() {
       </ul>
       <Routes>
         <Route path="/" element={<NxWelcome title="react-ts-host" />} />
-        <Route path="/react-ts-remote" element={<ReactTsRemote />} />
+        <Route
+          path="/react-ts-remote"
+          element={<ReactTsRemote title="xxx" />}
+        />
         <Route
           path="/dynamic-react-ts-remote"
           element={

apps/react-ts-host/tsconfig.app.json

@@ -1,27 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "baseUrl": "./",
     "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
   },
-  "files": [
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nx/react/typings/image.d.ts"
-  ],
-  "exclude": [
-    "jest.config.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx"
-  ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "exclude": ["dist/**"]
 }

apps/react-ts-host/tsconfig.json

@@ -1,6 +1,6 @@
 {
-  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "baseUrl": "./",
     "jsx": "react-jsx",
     "allowJs": true,
     "esModuleInterop": true,
@@ -10,8 +10,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": ["./remotes.d.ts"]
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  }
 }

apps/react-ts-host/webpack.config.js

@@ -1,34 +1,30 @@
 const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
 
 registerPluginTSTranspiler();
-const { withModuleFederation } = require('@nx/react/module-federation');
-const { FederatedTypesPlugin } = require('@module-federation/typescript');
 const { ModuleFederationPlugin } = require('@module-federation/enhanced');
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
+process.env.FEDERATION_DEBUG = true;
 
 module.exports = composePlugins(
   withNx(),
   withReact(),
   async (config, context) => {
+    // prevent cyclic updates
+    config.watchOptions = {
+      ignored: ['**/node_modules/**', '**/@mf-types/**'],
+    };
     const baseConfig = {
       name: 'react_ts_host',
       filename: 'remoteEntry.js',
       remotes: {
-        react_ts_remote: 'react_ts_remote@http://localhost:3004/remoteEntry.js',
+        react_ts_nested_remote:
+          // 'react_ts_nested_remote@http://localhost:3005/remoteEntry.js',
+          'react_ts_nested_remote@http://localhost:3005/mf-manifest.json',
       },
     };
     config.plugins.push(new ModuleFederationPlugin(baseConfig));
 
-    config.plugins.push(
-      new FederatedTypesPlugin({
-        federationConfig: {
-          ...baseConfig,
-          filename: 'remoteEntry.js',
-        },
-      }),
-    );
-
     config.optimization.runtimeChunk = false;
     config.plugins.forEach((p) => {
       if (p.constructor.name === 'ModuleFederationPlugin') {
@@ -50,50 +46,6 @@ module.exports = composePlugins(
       runtimeChunk: false,
       minimize: false,
     };
-    // const mf = await withModuleFederation(defaultConfig);
     return config;
-
-    // const mf = await withModuleFederation(defaultConfig);
-
-    // /** @type {import('webpack').Configuration} */
-    // const parsedConfig = mf(config, context);
-
-    // const remotes = baseConfig.remotes.reduce((remotes, remote) => {
-    //   const [name, url] = remote;
-    //   remotes[name] = url;
-    //   return remotes;
-    // }, {});
-
-    // parsedConfig.plugins.forEach((plugin) => {
-    //   if (plugin.constructor.name === 'ModuleFederationPlugin') {
-    //     //Temporary workaround - https://github.com/nrwl/nx/issues/16983
-    //     plugin._options.library = undefined;
-    //   }
-    // });
-
-    // parsedConfig.plugins.push(
-    //   new FederatedTypesPlugin({
-    //     federationConfig: {
-    //       ...baseConfig,
-    //       filename: 'remoteEntry.js',
-    //       remotes,
-    //     },
-    //   }),
-    // );
-
-    // parsedConfig.infrastructureLogging = {
-    //   level: 'verbose',
-    //   colors: true,
-    // };
-
-    // //Temporary workaround - https://github.com/nrwl/nx/issues/16983
-    // parsedConfig.experiments = { outputModule: false };
-
-    // parsedConfig.output = {
-    //   ...parsedConfig.output,
-    //   scriptType: 'text/javascript',
-    // };
-
-    // return parsedConfig;
   },
 );

apps/react-ts-nested-remote/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/react-ts-nested-remote/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/react-ts-nested-remote/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "node_modules/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}