@module-federation/runtime-tools 0.0.0-next-20231221061836

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present zhouxiao(zhoushaw)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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/dist/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/dist/index.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@module-federation/runtime');
+
+
+
+Object.keys(runtime).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return runtime[k]; }
+	});
+});

package/dist/index.esm.js

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/dist/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@module-federation/runtime-tools",
+  "version": "0.0.4",
+  "author": "zhanghang <hanric.zhang@gmail.com>",
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./dist/index.cjs.d.ts",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./runtime": {
+      "import": "./dist/runtime.esm.js",
+      "require": "./dist/runtime.cjs.js"
+    },
+    "./webpack-bundler-runtime": {
+      "import": "./dist/webpack-bundler-runtime.esm.js",
+      "require": "./dist/webpack-bundler-runtime.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.cjs.d.ts"
+      ],
+      "runtime": [
+        "./dist/runtime.cjs.d.ts"
+      ],
+      "webpack-bundler-runtime": [
+        "./dist/webpack-bundler-runtime.cjs.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@module-federation/runtime": "workspace:*",
+    "@module-federation/webpack-bundler-runtime": "workspace:*"
+  }
+}

package/dist/runtime.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/runtime";

package/dist/runtime.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@module-federation/runtime');
+
+
+
+Object.keys(runtime).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return runtime[k]; }
+	});
+});

package/dist/runtime.esm.js

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/dist/src/runtime.d.ts

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/dist/src/webpack-bundler-runtime.d.ts

@@ -0,0 +1 @@
+export * from '@module-federation/webpack-bundler-runtime';

package/dist/webpack-bundler-runtime.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/webpack-bundler-runtime";

package/dist/webpack-bundler-runtime.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var webpackBundlerRuntime = require('@module-federation/webpack-bundler-runtime');
+
+
+
+Object.keys(webpackBundlerRuntime).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return webpackBundlerRuntime[k]; }
+	});
+});

package/dist/webpack-bundler-runtime.esm.js

@@ -0,0 +1 @@
+export * from '@module-federation/webpack-bundler-runtime';

package/jest.config.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import { readFileSync } from 'fs';
+
+// Reading the SWC compilation config and remove the "exclude"
+// for the test files to be compiled by SWC
+const { exclude: _, ...swcJestConfig } = JSON.parse(
+  readFileSync(`${__dirname}/.swcrc`, 'utf-8'),
+);
+
+// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
+// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
+if (swcJestConfig.swcrc === undefined) {
+  swcJestConfig.swcrc = false;
+}
+
+// Uncomment if using global setup/teardown files being transformed via swc
+// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries
+// jest needs EsModule Interop to find the default exported setup/teardown functions
+// swcJestConfig.module.noInterop = false;
+
+export default {
+  displayName: 'runtime',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  testEnvironment: 'node',
+  coverageDirectory: '../../coverage/packages/runtime',
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@module-federation/runtime-tools",
+  "version": "0.0.0-next-20231221061836",
+  "author": "zhanghang <hanric.zhang@gmail.com>",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.cjs.d.ts",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./runtime": {
+      "import": "./dist/runtime.esm.js",
+      "require": "./dist/runtime.cjs.js"
+    },
+    "./webpack-bundler-runtime": {
+      "import": "./dist/webpack-bundler-runtime.esm.js",
+      "require": "./dist/webpack-bundler-runtime.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.cjs.d.ts"
+      ],
+      "runtime": [
+        "./dist/runtime.cjs.d.ts"
+      ],
+      "webpack-bundler-runtime": [
+        "./dist/webpack-bundler-runtime.cjs.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@module-federation/runtime": "0.0.0-next-20231221061836",
+    "@module-federation/webpack-bundler-runtime": "0.0.0-next-20231221061836"
+  }
+}

package/project.json

@@ -0,0 +1,83 @@
+{
+  "name": "runtime-tools",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/runtime-tools/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{workspaceRoot}/packages/runtime-tools/dist"],
+      "options": {
+        "parallel": false,
+        "outputPath": "packages/runtime-tools/dist",
+        "main": "packages/runtime-tools/src/index.ts",
+        "additionalEntryPoints": [
+          "packages/runtime-tools/src/runtime.ts",
+          "packages/runtime-tools/src/webpack-bundler-runtime.ts"
+        ],
+        "tsConfig": "packages/runtime-tools/tsconfig.lib.json",
+        "assets": [],
+        "project": "packages/runtime-tools/package.json",
+        "compiler": "swc",
+        "rollupConfig": "packages/runtime-tools/rollup.config.js",
+        "format": ["cjs", "esm"],
+        "external": ["@module-federation/*"],
+        "buildableProjectDepsInPackageJsonType": "dependencies",
+        "updateBuildableProjectDepsInPackageJson": true
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/runtime-tools/**/*.ts",
+          "packages/runtime-tools/package.json"
+        ]
+      }
+    },
+    "release": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": false,
+        "commands": [
+          {
+            "command": "nx run runtime:test",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "nx run runtime:build",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "nx run runtime:semantic-release",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "semantic-release": {
+      "executor": "@goestav/nx-semantic-release:semantic-release"
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "config": "packages/runtime-tools/vitest.config.ts"
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": ["package"]
+}

package/rollup.config.js

@@ -0,0 +1,10 @@
+module.exports = (rollupConfig) => {
+  rollupConfig.input = {
+    index: 'packages/runtime-tools/src/index.ts',
+    runtime: 'packages/runtime-tools/src/runtime.ts',
+    'webpack-bundler-runtime':
+      'packages/runtime-tools/src/webpack-bundler-runtime.ts',
+  };
+
+  return rollupConfig;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/src/runtime.ts

@@ -0,0 +1 @@
+export * from '@module-federation/runtime';

package/src/webpack-bundler-runtime.ts

@@ -0,0 +1 @@
+export * from '@module-federation/webpack-bundler-runtime';

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "global.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}