@module-federation/runtime 0.0.0-feat-node-support-1702930274548 → 0.0.0-next-20231219093556

package/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
+  ]
+}

package/.swcrc

@@ -0,0 +1,29 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": false,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @module-federation/runtime
+
+## 0.0.0-next-20231219093556
+
+### Patch Changes
+
+- 7d3f3d9: fix: add runtime api
+  - @module-federation/sdk@0.0.0-next-20231219093556

package/README.md

@@ -0,0 +1,301 @@
+# `@module-federation/runtime`
+
+- Can be combined with the build plug-in to share basic dependencies according to policies to reduce the number of module downloads and improve the loading speed of modules.
+- Only consume part of the export of the remote module and will not fully download the remote module
+- The runtime calling process can be extended through the module-runtime plug-in mechanism
+
+## Usage
+
+```javascript
+// Can load modules using only the runtime SDK without relying on build plugins
+// When not using build plugins, shared dependencies cannot be automatically reused
+import { init, loadRemote } from '@module-federation/runtime';
+
+init({
+    name: '@demo/app-main',
+    remotes: [
+        {
+            name: "@demo/app2",
+            entry: "http://localhost:3006/remoteEntry.js"
+        },
+        {
+            name: "@demo/app3",
+            alias: "app3",
+            entry: "http://localhost:2001/module-federation-manifest.json"
+        },
+    ],
+});
+
+// Load by alias
+loadRemote<{add: (...args: Array<number>)=> number }>("app3/util").then((md)=>{
+    md.add(1,2,3);
+});
+```
+
+### init
+
+- Type: `init(options: InitOptions): void`
+- It is used to dynamically register the module at runtime
+- InitOptions:
+
+```ts
+type InitOptions {
+    name: string;
+    version?: string;
+    shared?: ShareInfos;
+};
+
+type RemoteInfo = (RemotesWithEntry | RemotesWithVersion) & {
+  alias?: string;
+};
+
+interface RemotesWithVersion {
+  name: string;
+  version: string;
+}
+
+interface RemotesWithEntry {
+  name: string;
+  entry: string;
+}
+
+type ShareInfos = {
+  // Package name and dependency basic information and sharing strategy
+  [pkgName: string]: Share;
+};
+
+type Share = {
+  // Versions of shared dependencies
+  version: string;
+  // Which modules consume the current shared dependencies?
+  useIn?: Array<string>;
+  // Which module does the shared dependency come from?
+  from?: string;
+  // Get the factory function of the shared dependency instance. When the cached shared instance cannot be loaded, its own shared dependency will be loaded.
+  lib: () => Module;
+  // Sharing strategy, what strategy will be used to determine the reuse of shared dependencies
+  shareConfig?: SharedConfig;
+  // Dependencies between shares
+  deps?: Array<string>;
+  // The scope under which the current shared dependencies are placed, the default is default
+  scope?: string | Array<string>;
+};
+```
+
+- Example
+
+```js
+import { init, loadRemote } from '@module-federation/runtime';
+
+init({
+  name: '@demo/main-app',
+  remotes: [
+    {
+      name: '@demo/app2',
+      entry: 'http://localhost:3006/remoteEntry.js',
+    },
+    {
+      name: '@demo/app3',
+      alias: 'app3',
+      entry: 'http://localhost:2001/module-federation-manifest.json',
+    },
+  ],
+});
+```
+
+### loadRemote
+
+- Type: `loadRemote(id: string)`
+- Used to load initialized remote modules, when used with build plugins, it can be loaded directly through native `import("remoteName/expose")` syntax, and the build plugin will automatically convert it into `loadRemote` usage.
+
+- Example
+
+```javascript
+import { init, loadRemote } from '@module-federation/runtime';
+
+init({
+  name: '@demo/main-app',
+  remotes: [
+    {
+      name: '@demo/app3',
+      alias: 'app3',
+      entry: 'http://localhost:2001/module-federation-manifest.json',
+    },
+  ],
+});
+
+// remoteName + expose
+loadRemote('@demo/app3/util').then((m) => m.add(1, 2, 3));
+
+// alias + expose
+loadRemote('app3/util').then((m) => m.add(1, 2, 3));
+```
+
+### loadShare
+
+- Type: `loadShare(pkgName: string)`
+- Gets the `share` dependency. When there are `share` dependencies that match the current `host` in the global environment, the existing and satisfying `share` dependencies will be reused first. Otherwise, load its own dependencies and store them in the global cache.
+- This `API` is generally not called directly by users, but is used by build plugins to convert their own dependencies.
+
+- Example
+
+```js
+import { init, loadRemote, loadShare } from '@module-federation/runtime';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+init({
+  name: '@demo/main-app',
+  remotes: [],
+  shared: {
+    react: {
+      version: '17.0.0',
+      scope: 'default',
+      lib: () => React,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: '^17.0.0',
+      },
+    },
+    'react-dom': {
+      version: '17.0.0',
+      scope: 'default',
+      lib: () => ReactDOM,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: '^17.0.0',
+      },
+    },
+  },
+});
+
+loadShare('react').then((reactFactory) => {
+  console.log(reactFactory());
+});
+```
+
+### usePlugin
+
+Used to extend the internal loading process of `ModuleFederation`, affecting the entire loading process through hook triggers and return values.
+
+- Example
+
+```ts
+import { init } from '@module-federation/runtime';
+
+// mock get remote data remotes config
+function getDataConfig() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        remotes: [
+          {
+            name: '@demo/sub',
+            alias: 'sub',
+            entry: 'http://localhost:2001/module-federation-manifest.json',
+          },
+        ],
+      });
+    }, 2000);
+  });
+}
+
+function RemotesDataPlugin() {
+  return {
+    name: 'data-config',
+    async beforeRequest(args) {
+      const remotes = await getDataConfig();
+      origin.initOptions({
+        remotes,
+      });
+      return args;
+    },
+  };
+}
+
+init({
+  name: '@demo/micro-app',
+  remotes: [],
+  pluigns: [RemotesDataPlugin()],
+});
+
+loadRemote('sub/utils').then((m) => {
+  m.add(1, 2, 3, 4);
+});
+```
+
+- Type
+
+```typescript
+type Plugin = {
+  name: string;
+  core: {
+    beforeRequest: AsyncWaterfallHook<{
+      id: string;
+      options: Options;
+      origin: VmokHost;
+    }>;
+  };
+  snapshot: {};
+};
+type usePlugin = (plugin: Plugin) => void;
+```
+
+### preloadRemote
+
+- Type
+
+```typescript
+async function preloadRemote(preloadOptions: Array<PreloadRemoteArgs>) {}
+
+type depsPreloadArg = Omit<PreloadRemoteArgs, 'depsRemote'>;
+type PreloadRemoteArgs = {
+  // Preload the name and alias of the remote
+  nameOrAlias: string;
+  // Expose to be preloaded
+  // Default to preload all exposes
+  // Only the required expose will be loaded when an expose is provided
+  exposes?: Array<string>; // Default request
+  // Default is sync, only load synchronous code referenced in the expose
+  // Set to all to load synchronous and asynchronous references
+  resourceCategory?: 'all' | 'sync';
+  // Load all dependencies when no value is configured
+  // Only the resources needed will be loaded after configuring the dependency
+  depsRemote?: boolean | Array<depsPreloadArg>;
+  // No filtering of resources when not configured
+  // Will filter out unwanted resources after configuring
+  filter?: (assetUrl: string) => boolean;
+};
+```
+
+- Details
+
+Through `preloadRemote`, module resources can be preloaded at an earlier stage to avoid waterfall requests. `preloadRemote` can preload the following content:
+
+- The `remoteEntry` of `remote`
+- `expose` of `remote`
+- Synchronous resources or asynchronous resources of `remote`
+- `remote` resources that `remote` depends on
+
+* Example
+
+```ts
+import { init, preloadRemote } from '@module-federation/runtime';
+init({
+  name: '@demo/preload-remote',
+  remotes: [
+    {
+      name: '@demo/sub1',
+      entry: 'http://localhost:2001/vmok-manifest.json',
+    },
+    {
+      name: '@demo/sub2',
+      entry: 'http://localhost:2001/vmok-manifest.json',
+    },
+    {
+      name: '@demo/sub3',
+      entry: 'http://localhost:2001/vmok-manifest.json',
+    },
+  ],
+});
+```

package/__tests__/__snapshots__/preload-remote.spec.ts.snap

@@ -0,0 +1,111 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`preload-remote inBrowser > 1 preload with default config 1`] = `
+{
+  "links": [
+    {
+      "href": "http://localhost:1111/resources/preload/preload-resource/button.sync.css",
+      "type": "style",
+    },
+  ],
+  "scripts": [
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub1-button/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/button.sync.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub1-button/button.sync.js",
+    },
+  ],
+}
+`;
+
+exports[`preload-remote inBrowser > 2 preload with all config  1`] = `
+{
+  "links": [
+    {
+      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.async.css",
+      "type": "style",
+    },
+    {
+      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.sync.css",
+      "type": "style",
+    },
+  ],
+  "scripts": [
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2-button/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2/button.async.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2/button.sync.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2-button/button.async.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2-button/button.sync.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2-add/add.async.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub2-add/add.sync.js",
+    },
+  ],
+}
+`;
+
+exports[`preload-remote inBrowser > 3 preload with expose config  1`] = `
+{
+  "links": [],
+  "scripts": [
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub3/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub3/add.sync.js",
+    },
+  ],
+}
+`;
+
+exports[`preload-remote inBrowser > 3 preload with expose config  2`] = `
+{
+  "links": [],
+  "scripts": [
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub3/federation-remote-entry.js",
+    },
+    {
+      "crossorigin": "",
+      "src": "http://localhost:1111/resources/preload/preload-resource/sub3/add.sync.js",
+    },
+  ],
+}
+`;

package/__tests__/api.spec.ts

@@ -0,0 +1,153 @@
+import { describe, it } from 'vitest';
+import { init } from '../src';
+
+// eslint-disable-next-line max-lines-per-function
+describe('api', () => {
+  it('apis', () => {
+    const FM = init({
+      name: '@federation/name',
+      remotes: [],
+    });
+    expect(FM.loadShare).not.toBe(null);
+    expect(FM.loadRemote).not.toBe(null);
+  });
+
+  it('init with same name', () => {
+    // get same instance
+    const FM1 = init({
+      name: '@federation/same-name',
+      remotes: [],
+    });
+    const FM2 = init({
+      name: '@federation/same-name',
+      remotes: [],
+    });
+    expect(FM1).toBe(FM2);
+  });
+
+  it('init with same name with diffrent version', () => {
+    // get same instance
+    const FM1 = init({
+      name: '@federation/same-name-with-version',
+      version: '1.0.1',
+      remotes: [],
+    });
+    const FM2 = init({
+      name: '@federation/same-name-with-version',
+      version: '1.0.2',
+      remotes: [],
+    });
+    expect(FM1).not.toBe(FM2);
+  });
+
+  it('init merge remotes', () => {
+    // get same instance
+    const FM1 = init({
+      name: '@federation/merge-remotes',
+      remotes: [
+        {
+          name: '@federation/sub2',
+          entry: 'xxx',
+        },
+      ],
+    });
+    const FM2 = init({
+      name: '@federation/merge-remotes',
+      remotes: [
+        {
+          name: '@federation/sub3',
+          entry: 'xxx',
+        },
+      ],
+    });
+    // merge remotes
+    expect(FM1.options.remotes).toEqual(
+      expect.arrayContaining([
+        {
+          name: '@federation/sub2',
+          entry: new URL('xxx', location.origin).href,
+          shareScope: 'default',
+          type: 'global',
+        },
+        {
+          name: '@federation/sub3',
+          entry: new URL('xxx', location.origin).href,
+          shareScope: 'default',
+          type: 'global',
+        },
+      ]),
+    );
+  });
+
+  it('init with diffrent same name', () => {
+    // get different instance
+    const FM3 = init({
+      name: '@federation/main3',
+      remotes: [],
+    });
+    const FM4 = init({
+      name: '@federation/main4',
+      remotes: [],
+    });
+    expect(FM3).not.toBe(FM4);
+  });
+
+  it('alias check', () => {
+    // 校验 alias 是否等于 remote.name 和 remote.alias 的前缀，如果是则报错
+    // 因为引用支持多级路径的引用时无法保证名称是否唯一，所以不支持 alias 为 remote.name 的前缀
+    //     需要注意的是不要将 alias 和 name 的前缀相等，例如：
+
+    // ```js
+    // remotes: [
+    //     {
+    //         name: "@scope/button",
+    //         version: "1.0.2"
+    //     },
+    //     {
+    //         name: "@scope/component",
+    //         alias: "@scope",
+    //         version: "1.0.1"
+    //     }
+    // ]
+
+    // 因为引用支持多级路径的引用，在使用 `@scope/button` 时内部无法判断是从 `"@scope/button"` 获取的还是从 `"@scope/component"` 获取的
+    expect(() => {
+      init({
+        name: '@federation/init-alias',
+        remotes: [
+          {
+            name: '@scope/button',
+            version: '1.0.2',
+          },
+          {
+            name: '@scope/component',
+            alias: '@scope',
+            version: '1.0.1',
+          },
+        ],
+      });
+    }).toThrow(
+      /The alias @scope of remote @scope\/component is not allowed to be the prefix of @scope\/button name or alias/,
+    );
+
+    expect(() => {
+      init({
+        name: '@federation/init-alias1',
+        remotes: [
+          {
+            name: '@federation/button',
+            alias: '@scope/button',
+            version: '1.0.2',
+          },
+          {
+            name: '@scope/component',
+            alias: '@scope',
+            version: '1.0.1',
+          },
+        ],
+      });
+    }).toThrow(
+      /The alias @scope of remote @scope\/component is not allowed to be the prefix of @federation\/button name or alias/,
+    );
+  });
+});

package/__tests__/globa.spec.ts

@@ -0,0 +1,19 @@
+import { assert, describe, test, it, vi } from 'vitest';
+import { init } from '../src/index';
+
+describe('global', () => {
+  it('inject mode', () => {
+    globalThis.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = vi.fn() as any;
+    const injectArgs = {
+      name: '@federation/inject-mode',
+      remotes: [],
+    };
+    const GM = init(injectArgs);
+    expect(GM.constructor).toBe(
+      globalThis.__FEDERATION__.__DEBUG_CONSTRUCTOR__,
+    );
+    expect(globalThis.__FEDERATION__.__DEBUG_CONSTRUCTOR__).toBeCalledWith(
+      injectArgs,
+    );
+  });
+});