remote-reload-utils 0.0.1

package/README.md

@@ -0,0 +1,37 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```
+
+### 使用方式
+
+```ts
+import { loadRemoteMultiVersion } from 'remote-reload-utils';
+const scope = await loadRemoteMultiVersion({
+  name: 'my-lib',
+  pkg: 'my-lib',
+  version: 'latest',
+});
+
+// scope 形如 "my-lib@1.2.3"
+const { Button } = await loadRemote(`${scope}/Button`);
+```

package/dist/index.d.ts

@@ -0,0 +1 @@
+export declare const squared: (n: number) => number;

package/dist/loadRemote.d.ts

@@ -0,0 +1,14 @@
+export interface LoadRemoteOptions {
+    name: string;
+    pkg: string;
+    version?: string;
+    retries?: number;
+    delay?: number;
+    localFallback?: string;
+    cacheTTL?: number;
+    revalidate?: boolean;
+}
+/**
+ * 多版本共存的 loadRemote
+ */
+export declare function loadRemoteMultiVersion(options: LoadRemoteOptions): Promise<string>;

package/dist/main.cjs

@@ -0,0 +1,110 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    loadRemoteMultiVersion: ()=>loadRemoteMultiVersion
+});
+const runtime_namespaceObject = require("@module-federation/runtime");
+async function fetchLatestVersion(pkg) {
+    const res = await fetch(`https://registry.npmjs.org/${pkg}`);
+    if (!res.ok) throw new Error(`\u{65E0}\u{6CD5}\u{83B7}\u{53D6} ${pkg} \u{7684}\u{7248}\u{672C}\u{4FE1}\u{606F}`);
+    const data = await res.json();
+    return data['dist-tags']?.latest;
+}
+function getVersionCache() {
+    try {
+        return JSON.parse(localStorage.getItem('mf-multi-version') || '{}');
+    } catch  {
+        return {};
+    }
+}
+function setVersionCache(pkg, version) {
+    const cache = getVersionCache();
+    cache[pkg] = cache[pkg] || {};
+    cache[pkg][version] = {
+        timestamp: Date.now()
+    };
+    localStorage.setItem('mf-multi-version', JSON.stringify(cache));
+}
+function buildCdnUrls(pkg, version) {
+    return [
+        `https://cdn.jsdelivr.net/npm/${pkg}@${version}/dist/remoteEntry.js`,
+        `https://unpkg.com/${pkg}@${version}/dist/remoteEntry.js`
+    ];
+}
+async function loadRemoteMultiVersion(options) {
+    let { name, pkg, version = 'latest', retries = 3, delay = 1000, localFallback, cacheTTL = 86400000, revalidate = true } = options;
+    let finalVersion = version;
+    if ('latest' === version) {
+        const cache = getVersionCache();
+        const versions = cache[pkg] || {};
+        const latestCached = Object.keys(versions).sort((a, b)=>versions[b].timestamp - versions[a].timestamp)[0];
+        if (latestCached && Date.now() - versions[latestCached].timestamp < cacheTTL) {
+            console.log(`[MF] \u{4F7F}\u{7528}\u{7F13}\u{5B58}\u{7248}\u{672C}: ${pkg}@${latestCached}`);
+            finalVersion = latestCached;
+            if (revalidate) fetchLatestVersion(pkg).then((latest)=>{
+                if (latest !== latestCached) {
+                    console.log(`[MF] \u{68C0}\u{6D4B}\u{5230}\u{65B0}\u{7248}\u{672C}: ${pkg}@${latest} (\u{4E0B}\u{6B21}\u{53EF}\u{7528})`);
+                    setVersionCache(pkg, latest);
+                }
+            }).catch((err)=>console.warn(`[MF] \u{68C0}\u{67E5}\u{66F4}\u{65B0}\u{5931}\u{8D25}: ${pkg}`, err));
+        } else {
+            finalVersion = await fetchLatestVersion(pkg);
+            console.log(`[MF] \u{83B7}\u{53D6}\u{6700}\u{65B0}\u{7248}\u{672C}: ${pkg}@${finalVersion}`);
+            setVersionCache(pkg, finalVersion);
+        }
+    }
+    const scopeName = `${name}@${finalVersion}`;
+    const urls = buildCdnUrls(pkg, finalVersion);
+    if (localFallback) urls.push(localFallback);
+    for (let url of urls){
+        let success = false;
+        for(let i = 0; i < retries; i++)try {
+            console.log(`[MF] \u{5C1D}\u{8BD5}\u{52A0}\u{8F7D}: ${url} (\u{7B2C} ${i + 1} \u{6B21})`);
+            (0, runtime_namespaceObject.registerRemotes)([
+                {
+                    name: scopeName,
+                    entry: url
+                }
+            ]);
+            await (0, runtime_namespaceObject.loadRemote)(`${scopeName}/remoteEntry`);
+            console.log(`[MF] \u{6210}\u{529F}\u{52A0}\u{8F7D}: ${scopeName}`);
+            success = true;
+            break;
+        } catch (err) {
+            console.warn(`[MF] \u{52A0}\u{8F7D}\u{5931}\u{8D25}: ${url}, \u{91CD}\u{8BD5}\u{4E2D}...`, err);
+            await new Promise((res)=>setTimeout(res, delay));
+        }
+        if (success) return scopeName;
+    }
+    throw new Error(`[MF] \u{6240}\u{6709} CDN \u{52A0}\u{8F7D}\u{5931}\u{8D25}: ${urls.join(', ')}`);
+}
+exports.loadRemoteMultiVersion = __webpack_exports__.loadRemoteMultiVersion;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "loadRemoteMultiVersion"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/main.js

@@ -0,0 +1,76 @@
+import { loadRemote, registerRemotes } from "@module-federation/runtime";
+async function fetchLatestVersion(pkg) {
+    const res = await fetch(`https://registry.npmjs.org/${pkg}`);
+    if (!res.ok) throw new Error(`\u{65E0}\u{6CD5}\u{83B7}\u{53D6} ${pkg} \u{7684}\u{7248}\u{672C}\u{4FE1}\u{606F}`);
+    const data = await res.json();
+    return data['dist-tags']?.latest;
+}
+function getVersionCache() {
+    try {
+        return JSON.parse(localStorage.getItem('mf-multi-version') || '{}');
+    } catch  {
+        return {};
+    }
+}
+function setVersionCache(pkg, version) {
+    const cache = getVersionCache();
+    cache[pkg] = cache[pkg] || {};
+    cache[pkg][version] = {
+        timestamp: Date.now()
+    };
+    localStorage.setItem('mf-multi-version', JSON.stringify(cache));
+}
+function buildCdnUrls(pkg, version) {
+    return [
+        `https://cdn.jsdelivr.net/npm/${pkg}@${version}/dist/remoteEntry.js`,
+        `https://unpkg.com/${pkg}@${version}/dist/remoteEntry.js`
+    ];
+}
+async function loadRemoteMultiVersion(options) {
+    let { name, pkg, version = 'latest', retries = 3, delay = 1000, localFallback, cacheTTL = 86400000, revalidate = true } = options;
+    let finalVersion = version;
+    if ('latest' === version) {
+        const cache = getVersionCache();
+        const versions = cache[pkg] || {};
+        const latestCached = Object.keys(versions).sort((a, b)=>versions[b].timestamp - versions[a].timestamp)[0];
+        if (latestCached && Date.now() - versions[latestCached].timestamp < cacheTTL) {
+            console.log(`[MF] \u{4F7F}\u{7528}\u{7F13}\u{5B58}\u{7248}\u{672C}: ${pkg}@${latestCached}`);
+            finalVersion = latestCached;
+            if (revalidate) fetchLatestVersion(pkg).then((latest)=>{
+                if (latest !== latestCached) {
+                    console.log(`[MF] \u{68C0}\u{6D4B}\u{5230}\u{65B0}\u{7248}\u{672C}: ${pkg}@${latest} (\u{4E0B}\u{6B21}\u{53EF}\u{7528})`);
+                    setVersionCache(pkg, latest);
+                }
+            }).catch((err)=>console.warn(`[MF] \u{68C0}\u{67E5}\u{66F4}\u{65B0}\u{5931}\u{8D25}: ${pkg}`, err));
+        } else {
+            finalVersion = await fetchLatestVersion(pkg);
+            console.log(`[MF] \u{83B7}\u{53D6}\u{6700}\u{65B0}\u{7248}\u{672C}: ${pkg}@${finalVersion}`);
+            setVersionCache(pkg, finalVersion);
+        }
+    }
+    const scopeName = `${name}@${finalVersion}`;
+    const urls = buildCdnUrls(pkg, finalVersion);
+    if (localFallback) urls.push(localFallback);
+    for (let url of urls){
+        let success = false;
+        for(let i = 0; i < retries; i++)try {
+            console.log(`[MF] \u{5C1D}\u{8BD5}\u{52A0}\u{8F7D}: ${url} (\u{7B2C} ${i + 1} \u{6B21})`);
+            registerRemotes([
+                {
+                    name: scopeName,
+                    entry: url
+                }
+            ]);
+            await loadRemote(`${scopeName}/remoteEntry`);
+            console.log(`[MF] \u{6210}\u{529F}\u{52A0}\u{8F7D}: ${scopeName}`);
+            success = true;
+            break;
+        } catch (err) {
+            console.warn(`[MF] \u{52A0}\u{8F7D}\u{5931}\u{8D25}: ${url}, \u{91CD}\u{8BD5}\u{4E2D}...`, err);
+            await new Promise((res)=>setTimeout(res, delay));
+        }
+        if (success) return scopeName;
+    }
+    throw new Error(`[MF] \u{6240}\u{6709} CDN \u{52A0}\u{8F7D}\u{5931}\u{8D25}: ${urls.join(', ')}`);
+}
+export { loadRemoteMultiVersion };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "remote-reload-utils",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@rslib/core": "^0.12.2",
+    "@types/node": "^22.17.2",
+    "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "^0.18.3"
+  }
+}