feat: support config multiple shared (#2313)

Author: 2heal1

.changeset/violet-rice-admire.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/webpack-bundler-runtime': patch
+'@module-federation/enhanced': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+feat: support config multiple versions shared

apps/website-new/docs/en/guide/basic/runtime.mdx

@@ -71,9 +71,25 @@ type InitOptions = {
   // The list of dependencies that the current consumer needs to share
   // When using the build plugin, users can configure the dependencies to be shared in the build plugin, and the build plugin will inject the shared dependencies into the runtime sharing configuration
   // Shared must be manually passed in the version instance when passed at runtime because it cannot be directly passed at runtime.
-  shared?: ShareInfos;
+  shared?: {
+    [pkgName: string]: ShareArgs | ShareArgs[];
+  };
 };
 
+type ShareArgs =
+  | (SharedBaseArgs & { get: SharedGetter })
+  | (SharedBaseArgs & { lib: () => Module });
+
+type SharedBaseArgs = {
+  version: string;
+  shareConfig?: SharedConfig;
+  scope?: string | Array<string>;
+  deps?: Array<string>;
+  strategy?: 'version-first' | 'loaded-first';
+};
+
+type SharedGetter = (() => () => Module) | (() => Promise<() => Module>);
+
 type RemoteInfo = (RemotesWithEntry | RemotesWithVersion) & {
   alias?: string;
 };
@@ -139,7 +155,7 @@ loadRemote('app2/util').then((m) => m.add(1, 2, 3));
 
 ### loadShare
 
-- Type: `loadShare(pkgName: string)`
+- Type: `loadShare(pkgName: string, extraOptions?: { customShareInfo?: Partial<Shared>;resolver?: (sharedOptions: ShareInfos[string]) => Shared;})`
 - Obtains the `share` dependency. When a "shared" dependency matching the current consumer exists in the global environment, the existing and eligible dependency will be reused first. Otherwise, it loads its own dependency and stores it in the global cache.
 - This `API` is usually not called directly by users but is used by the build plugin to convert its own dependencies.
 
@@ -180,6 +196,50 @@ loadShare('react').then((reactFactory) => {
 });
 ```
 
+If has set multiple version shared, `loadShare` will return the loaded and has max version shared. The behavior can be controlled by set `extraOptions.resolver`:
+
+```js
+import { init, loadRemote, loadShare } from '@module-federation/runtime';
+
+init({
+  name: '@demo/main-app',
+  remotes: [],
+  shared: {
+    react: [
+      {
+        version: '17.0.0',
+        scope: 'default',
+        get: async ()=>() => ({ version: '17.0.0)' }),
+        shareConfig: {
+          singleton: true,
+          requiredVersion: '^17.0.0',
+        },
+      },
+      {
+        version: '18.0.0',
+        scope: 'default',
+        // pass lib means the shared has loaded
+        lib: () => ({ version: '18.0.0)' }),
+        shareConfig: {
+          singleton: true,
+          requiredVersion: '^18.0.0',
+        },
+      },
+    ],
+  },
+});
+
+loadShare('react', {
+   resolver: (sharedOptions) => {
+      return (
+        sharedOptions.find((i) => i.version === '17.0.0') ?? sharedOptions[0]
+      );
+  },
+ }).then((reactFactory) => {
+  console.log(reactFactory()); // { version: '17.0.0' }
+});
+```
+
 ### preloadRemote
 
 :::warning

apps/website-new/docs/en/plugin/dev/index.mdx

@@ -380,8 +380,21 @@ const customSharedPlugin: () => FederationRuntimePlugin = function () {
         return args;
       }
 
+      // set lib
       args.resolver = function () {
-        shareScopeMap[scope][pkgName][version] = window.React; // Manually replace the local share scope with the desired module
+        shareScopeMap[scope][pkgName][version] = {
+          lib: ()=>window.React,
+          loaded:true,
+          loading: Promise.resolve(()=>window.React)
+        }; // Manually replace the local share scope with the desired module
+        return shareScopeMap[scope][pkgName][version];
+      };
+
+      // set get
+      args.resolver = function () {
+        shareScopeMap[scope][pkgName][version] = {
+          get: async ()=>()=>window.React,
+        }; // Manually replace the local share scope with the desired module
         return shareScopeMap[scope][pkgName][version];
       };
       return args;
@@ -496,3 +509,5 @@ const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
   };
 };
 ```
+import { resolve } from "path"
+

apps/website-new/docs/zh/guide/basic/runtime.mdx

@@ -71,9 +71,25 @@ type InitOptions {
     // 当前消费者需要共享的依赖项列表
     // 当使用构建插件时，用户可以在构建插件中配置需要共享的依赖项，而构建插件会将需要共享的依赖项注入到运行时共享配置中
     // Shared 在运行时传入时必须在版本实例引用中手动传入，因为它不能在运行时直接传入。
-    shared?: ShareInfos;
+    shared?: {
+      [pkgName: string]: ShareArgs | ShareArgs[];
+    };
+  };
+
+type ShareArgs =
+  | (SharedBaseArgs & { get: SharedGetter })
+  | (SharedBaseArgs & { lib: () => Module });
+
+type SharedBaseArgs = {
+  version: string;
+  shareConfig?: SharedConfig;
+  scope?: string | Array<string>;
+  deps?: Array<string>;
+  strategy?: 'version-first' | 'loaded-first';
 };
 
+type SharedGetter = (() => () => Module) | (() => Promise<() => Module>);
+
 type RemoteInfo = (RemotesWithEntry | RemotesWithVersion) & {
    alias?: string;
 };
@@ -139,7 +155,7 @@ loadRemote('app2/util').then((m) => m.add(1, 2, 3));
 
 ### loadShare
 
-- Type: `loadShare(pkgName: string)`
+- Type: `loadShare(pkgName: string, extraOptions?: { customShareInfo?: Partial<Shared>;resolver?: (sharedOptions: ShareInfos[string]) => Shared;})`
 - 获取 `share` 依赖项。当全局环境中存在与当前消费者匹配的“共享”依赖时，现有的和符合共享条件的依赖将首先被复用。否则，加载它自己的依赖项并将它们存储在全局缓存中。
 - 这个 `API` 通常不是由用户直接调用，而是由构建插件使用来转换它们自己的依赖项。
 
@@ -180,6 +196,50 @@ loadShare('react').then((reactFactory) => {
 });
 ```
 
+如果设置了多个版本 shared，默认会返回已加载且最高版本的 shared 。可以通过设置 `extraOptions.resolver` 来改变这个行为：
+
+```js
+import { init, loadRemote, loadShare } from '@module-federation/runtime';
+
+init({
+  name: '@demo/main-app',
+  remotes: [],
+  shared: {
+    react: [
+      {
+        version: '17.0.0',
+        scope: 'default',
+        get: async ()=>() => ({ version: '17.0.0)' }),
+        shareConfig: {
+          singleton: true,
+          requiredVersion: '^17.0.0',
+        },
+      },
+      {
+        version: '18.0.0',
+        scope: 'default',
+        // pass lib means the shared has loaded
+        lib: () => ({ version: '18.0.0)' }),
+        shareConfig: {
+          singleton: true,
+          requiredVersion: '^18.0.0',
+        },
+      },
+    ],
+  },
+});
+
+loadShare('react', {
+   resolver: (sharedOptions) => {
+      return (
+        sharedOptions.find((i) => i.version === '17.0.0') ?? sharedOptions[0]
+      );
+  },
+ }).then((reactFactory) => {
+  console.log(reactFactory()); // { version: '17.0.0' }
+});
+```
+
 ### preloadRemote
 
 :::warning

apps/website-new/docs/zh/plugin/dev/index.mdx

@@ -381,8 +381,21 @@ const customSharedPlugin: () => FederationRuntimePlugin = function () {
         return args;
       }
 
+      // set lib
       args.resolver = function () {
-        shareScopeMap[scope][pkgName][version] = window.React; // replace local share scope manually with desired module
+        shareScopeMap[scope][pkgName][version] = {
+          lib: ()=>window.React,
+          loaded:true,
+          loading: Promise.resolve(()=>window.React)
+        }; // Manually replace the local share scope with the desired module
+        return shareScopeMap[scope][pkgName][version];
+      };
+
+      // set get
+      args.resolver = function () {
+        shareScopeMap[scope][pkgName][version] = {
+          get: async ()=>()=>window.React,
+        }; // Manually replace the local share scope with the desired module
         return shareScopeMap[scope][pkgName][version];
       };
       return args;

packages/chrome-devtools/src/utils/chrome/fast-refresh.ts

@@ -1,4 +1,7 @@
-import type { FederationRuntimePlugin } from '@module-federation/runtime/types';
+import type {
+  FederationRuntimePlugin,
+  Shared,
+} from '@module-federation/runtime/types';
 import { loadScript } from '@module-federation/sdk';
 
 import { isObject, getUnpkgUrl } from '../index';
@@ -29,53 +32,54 @@ const fastRefreshPlugin = (): FederationRuntimePlugin => {
           orderResolve = resolve;
         });
         Object.keys(shareInfo).forEach(async (share) => {
-          let get: () => any;
-          if (share === 'react') {
-            get = () =>
-              loadScript(
-                getUnpkgUrl(share, shareInfo[share].version) as string,
-                {
-                  attrs: { defer: true, async: false },
-                },
-              ).then(() => {
-                orderResolve();
-              });
-          }
-          if (share === 'react-dom') {
-            get = () =>
-              orderPromise.then(() =>
-                loadScript(
-                  getUnpkgUrl(share, shareInfo[share].version) as string,
-                  {
-                    attrs: { defer: true, async: false },
-                  },
-                ),
-              );
-          }
-          // @ts-expect-error
-          if (enableFastRefresh && typeof get === 'function') {
+          // @ts-expect-error legacy runtime shareInfo[share] is shared , and latest i shard[]
+          const sharedArr: Shared[] = Array.isArray(shareInfo[share])
+            ? shareInfo[share]
+            : [shareInfo[share]];
+
+          sharedArr.forEach((shared) => {
+            let get: () => any;
             if (share === 'react') {
-              shareInfo[share].get = async () => {
-                if (!window.React) {
-                  await get();
-                  console.warn(
-                    '[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools',
-                  );
-                }
-                shareInfo[share].lib = () => window.React;
-                return () => window.React;
-              };
+              get = () =>
+                loadScript(getUnpkgUrl(share, shared.version) as string, {
+                  attrs: { defer: true, async: false },
+                }).then(() => {
+                  orderResolve();
+                });
             }
             if (share === 'react-dom') {
-              shareInfo[share].get = async () => {
-                if (!window.ReactDOM) {
-                  await get();
-                }
-                shareInfo[share].lib = () => window.ReactDOM;
-                return () => window.ReactDOM;
-              };
+              get = () =>
+                orderPromise.then(() =>
+                  loadScript(getUnpkgUrl(share, shared.version) as string, {
+                    attrs: { defer: true, async: false },
+                  }),
+                );
+            }
+            // @ts-expect-error
+            if (enableFastRefresh && typeof get === 'function') {
+              if (share === 'react') {
+                shared.get = async () => {
+                  if (!window.React) {
+                    await get();
+                    console.warn(
+                      '[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools',
+                    );
+                  }
+                  shared.lib = () => window.React;
+                  return () => window.React;
+                };
+              }
+              if (share === 'react-dom') {
+                shared.get = async () => {
+                  if (!window.ReactDOM) {
+                    await get();
+                  }
+                  shared.lib = () => window.ReactDOM;
+                  return () => window.ReactDOM;
+                };
+              }
             }
-          }
+          });
         });
 
         return {

packages/enhanced/src/lib/sharing/ShareRuntimeModule.ts

@@ -39,7 +39,7 @@ class ShareRuntimeModule extends RuntimeModule {
       throw new Error('ChunkGraph is undefined');
     }
     const initCodePerScope: Map<string, Map<number, Set<string>>> = new Map();
-    let sharedInitOptionsStr = '';
+    const sharedInitOptions: Record<string, any[]> = {};
 
     for (const chunk of this.chunk?.getAllReferencedChunks() || []) {
       if (!chunk) {
@@ -77,17 +77,39 @@ class ShareRuntimeModule extends RuntimeModule {
           'share-init-option',
         );
         if (sharedOption) {
-          sharedInitOptionsStr += `
-					"${sharedOption.name}" : {
-						version: ${sharedOption.version},
-						get: ${sharedOption.getter},
-						scope: ${JSON.stringify(sharedOption.shareScope)},
-            shareConfig: ${JSON.stringify(sharedOption.shareConfig)}
-					},
-					`;
+          sharedInitOptions[sharedOption.name] =
+            sharedInitOptions[sharedOption.name] || [];
+          const isSameVersion = sharedInitOptions[sharedOption.name].find(
+            (s) => s.version === sharedOption.version,
+          );
+          if (!isSameVersion) {
+            sharedInitOptions[sharedOption.name].push(sharedOption);
+          }
         }
       }
     }
+
+    const sharedInitOptionsStr = Object.keys(sharedInitOptions).reduce(
+      (sum, sharedName) => {
+        const sharedOptions = sharedInitOptions[sharedName];
+        let str = '';
+        sharedOptions.forEach((sharedOption) => {
+          str += `{${Template.indent([
+            `version: ${sharedOption.version},`,
+            `get: ${sharedOption.getter},`,
+            `scope: ${JSON.stringify(sharedOption.shareScope)},`,
+            `shareConfig: ${JSON.stringify(sharedOption.shareConfig)}`,
+          ])}},`;
+        });
+        str = `[${str}]`;
+
+        sum += `${Template.indent([`"${sharedName}": ${str},`])}`;
+
+        return sum;
+      },
+      '',
+    );
+
     const federationGlobal = getFederationGlobalScope(
       RuntimeGlobals || ({} as typeof RuntimeGlobals),
     );