feat(runtime): automatically complete the snapshot so that devtool can visualize it (#1982)

Co-authored-by: zhouxiao.shaw <[email protected]>

Author: zhoushaw

.changeset/odd-tomatoes-fetch.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/runtime': patch
+---
+
+feat(runtime): automatically complete the snapshot so that devtool can visualize it

packages/runtime/__tests__/global.spec.ts

@@ -1,5 +1,6 @@
 import { assert, describe, test, it, vi } from 'vitest';
 import { init } from '../src/index';
+import { getInfoWithoutType } from '../src/global';
 
 describe('global', () => {
   it('inject mode', () => {
@@ -16,4 +17,31 @@ describe('global', () => {
       injectArgs,
     );
   });
+
+  it('getInfoWithoutType', () => {
+    const snapshot = {
+      '@federation/app1': 1,
+      '@federation/app2': 2,
+      'app:@federation/app3': 3,
+      'npm:@federation/app4': 4,
+    };
+
+    const res = getInfoWithoutType(snapshot, '@federation/app1');
+    expect(res).toMatchObject({
+      key: '@federation/app1',
+      value: 1,
+    });
+
+    const res2 = getInfoWithoutType(snapshot, '@federation/app3' as any);
+    expect(res2).toMatchObject({
+      key: 'app:@federation/app3',
+      value: 3,
+    });
+
+    const res3 = getInfoWithoutType(snapshot, '@federation/app4' as any);
+    expect(res3).toMatchObject({
+      key: 'npm:@federation/app4',
+      value: 4,
+    });
+  });
 });

packages/runtime/__tests__/hooks.spec.ts

@@ -186,8 +186,8 @@ describe('hooks', () => {
     );
     assert(res);
     expect(res()).toBe('hello app2');
-    // @ts-ignore fakeSrc is local mock attr, which value is the same as src
     const testLoadedScript = [...document.querySelectorAll('script')].find(
+      // @ts-ignore fakeSrc is local mock attr, which value is the same as src
       (script) => script.fakeSrc === testRemoteEntry,
     );
     assert(testLoadedScript);

packages/runtime/__tests__/load-remote.spec.ts

@@ -3,7 +3,12 @@ import { assert, describe, it } from 'vitest';
 import { FederationHost, init } from '../src/index';
 import { mockRemoteSnapshot } from './mock/utils';
 import { matchRemoteWithNameAndExpose } from '../src/utils/manifest';
-import { addGlobalSnapshot, getGlobalSnapshot, Global } from '../src/global';
+import {
+  addGlobalSnapshot,
+  getGlobalSnapshot,
+  Global,
+  setGlobalFederationConstructor,
+} from '../src/global';
 import { requestList } from './mock/env';
 
 describe('matchRemote', () => {
@@ -395,7 +400,7 @@ describe('loadRemote with manifest.json', () => {
   });
 
   it('circulate deps', async () => {
-    globalThis.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationHost;
+    setGlobalFederationConstructor(FederationHost, true);
     const FM = init({
       name: '@circulate-deps/app1',
       remotes: [
@@ -415,7 +420,7 @@ describe('loadRemote with manifest.json', () => {
     expect(res).toBe('@circulate-deps/app2');
 
     Global.__FEDERATION__.__INSTANCES__ = [];
-    globalThis.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = undefined;
+    setGlobalFederationConstructor(undefined, true);
   });
 
   it('manifest.json with query', async () => {
@@ -479,6 +484,10 @@ describe('lazy loadRemote add remote into snapshot', () => {
     });
     const snapshot = getGlobalSnapshot();
     const hostModuleInfo = snapshot['@demo/app1'];
+    assert(
+      hostModuleInfo && 'remotesInfo' in hostModuleInfo,
+      'hostModuleInfo Cannot be empty',
+    );
     const beforeHostRemotesInfo = hostModuleInfo.remotesInfo;
     const beforeRemotesLength = Object.keys(beforeHostRemotesInfo).length;
     expect(beforeRemotesLength).toBe(0);
@@ -519,6 +528,10 @@ describe('lazy loadRemote add remote into snapshot', () => {
     });
     const snapshot = getGlobalSnapshot();
     const hostModuleInfo = snapshot['@demo/app1'];
+    assert(
+      hostModuleInfo && 'remotesInfo' in hostModuleInfo,
+      'hostModuleInfo Cannot be empty',
+    );
     const beforeHostRemotesInfo = hostModuleInfo.remotesInfo;
     const beforeRemotesLength = Object.keys(beforeHostRemotesInfo).length;
     expect(beforeRemotesLength).toBe(0);
@@ -595,7 +608,7 @@ describe('loadRemote', () => {
     );
     // @ts-ignore fakeSrc is local mock attr, which value is the same as src
     const loadedSrcs = [...document.querySelectorAll('script')].map(
-      (i) => i.fakeSrc,
+      (i) => (i as any).fakeSrc,
     );
     expect(loadedSrcs.includes(`${remotePublicPath}${jsSyncAssetPath}`));
     reset();

packages/runtime/__tests__/resources/snapshot/remote1/federation-manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "@snapshot/remote1",
+  "name": "@snapshot/remote1",
+  "metaData": {
+    "name": "@snapshot/remote1",
+    "publicPath": "http://localhost:1111/",
+    "type": "app",
+    "globalName": "@snapshot/remote1",
+    "buildInfo": {
+      "buildVersion": "custom"
+    },
+    "remoteEntry": {
+      "name": "federation-remote-entry.js",
+      "path": "resources/snapshot/remote1"
+    },
+    "types": {
+      "name": "index.d.ts",
+      "path": "./"
+    }
+  },
+  "remotes": [],
+  "shared": [],
+  "exposes": []
+}

packages/runtime/__tests__/resources/snapshot/remote1/federation-remote-entry.js

@@ -0,0 +1,11 @@
+globalThis[`@snapshot/remote1`] = {
+  get(scope) {
+    const moduleMap = {
+      './say'() {
+        return () => 'hello world "@snapshot/remote1"';
+      },
+    };
+    return moduleMap[scope];
+  },
+  init() {},
+};

packages/runtime/__tests__/resources/snapshot/remote2/federation-manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "@snapshot/remote2",
+  "name": "@snapshot/remote2",
+  "metaData": {
+    "name": "@snapshot/remote2",
+    "publicPath": "http://localhost:1111/",
+    "type": "app",
+    "globalName": "@snapshot/remote2",
+    "buildInfo": {
+      "buildVersion": "custom"
+    },
+    "remoteEntry": {
+      "name": "federation-remote-entry.js",
+      "path": "resources/snapshot/remote2"
+    },
+    "types": {
+      "name": "index.d.ts",
+      "path": "./"
+    }
+  },
+  "remotes": [],
+  "shared": [],
+  "exposes": []
+}

packages/runtime/__tests__/resources/snapshot/remote2/federation-remote-entry.js

@@ -0,0 +1,11 @@
+globalThis[`@snapshot/remote2`] = {
+  get(scope) {
+    const moduleMap = {
+      './say'() {
+        return () => 'hello world "@snapshot/remote2"';
+      },
+    };
+    return moduleMap[scope];
+  },
+  init() {},
+};

packages/runtime/__tests__/share.ts

@@ -1,4 +1,4 @@
-import { GlobalShareScope, Options } from '../src/type';
+import { GlobalShareScopeMap, Options } from '../src/type';
 export const mergeShareInfo1 = {
   name: '@federation/merge-shared',
   remotes: [],
@@ -68,6 +68,7 @@ export const localMergeShareInfos: Options['shared'] = {
     scope: ['default'],
     useIn: [],
     deps: [],
+    strategy: 'version-first',
   },
   'react-dom': {
     version: '17.0.0',
@@ -81,83 +82,6 @@ export const localMergeShareInfos: Options['shared'] = {
     scope: ['default', 'sub2'],
     useIn: [],
     deps: [],
-  },
-};
-
-export const globalMergeShareInfos: GlobalShareScope = {
-  default: {
-    react: {
-      '16.0.0': {
-        version: '16.0.0',
-        from: mergeShareInfo1.name,
-        get: mergeShareInfo1.shared.react.get,
-        shareConfig: {
-          singleton: false,
-          requiredVersion: '^16.0.0',
-          eager: false,
-        },
-        scope: ['default'],
-        useIn: [],
-        deps: [],
-      },
-    },
-    'react-dom': {
-      '17.0.0': {
-        version: '17.0.0',
-        from: mergeShareInfo2.name,
-        get: mergeShareInfo2.shared['react-dom'].get,
-        shareConfig: {
-          singleton: false,
-          requiredVersion: '^16.0.0',
-          eager: false,
-        },
-        scope: ['default', 'sub2'],
-        useIn: [],
-        deps: [],
-      },
-      '16.0.0': {
-        version: '16.0.0',
-        from: mergeShareInfo3.name,
-        get: mergeShareInfo3.shared['react-dom'].get,
-        shareConfig: {
-          singleton: false,
-          requiredVersion: '^16.0.0',
-          eager: false,
-        },
-        scope: ['default', 'sub2'],
-        useIn: [],
-        deps: [],
-      },
-    },
-  },
-  sub2: {
-    'react-dom': {
-      '16.0.0': {
-        version: '16.0.0',
-        from: mergeShareInfo3.name,
-        get: mergeShareInfo3.shared['react-dom'].get,
-        shareConfig: {
-          singleton: false,
-          requiredVersion: '^16.0.0',
-          eager: false,
-        },
-        scope: ['default', 'sub2'],
-        useIn: [],
-        deps: [],
-      },
-      '17.0.0': {
-        version: '17.0.0',
-        from: mergeShareInfo2.name,
-        get: mergeShareInfo2.shared['react-dom'].get,
-        shareConfig: {
-          singleton: false,
-          requiredVersion: '^16.0.0',
-          eager: false,
-        },
-        scope: ['default', 'sub2'],
-        useIn: [],
-        deps: [],
-      },
-    },
+    strategy: 'version-first',
   },
 };