remote-reload-utils 0.0.14 → 0.0.16

package/dist/main.js

@@ -1,19 +1,4 @@
 import { createInstance } from "@module-federation/enhanced/runtime";
-import react, { Suspense, lazy, useCallback, useEffect, useState } from "react";
-var __webpack_modules__ = {
-    "./src/styles/index.css": function() {}
-};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
-__webpack_require__("./src/styles/index.css");
 async function loadReactVersion(version) {
     const runtime = await createInstance({
         name: `react_${version}_runtime`,
@@ -195,15 +180,46 @@ const DEFAULT_SHARED_CONFIG = {
         shareConfig: {
             singleton: true,
             eager: true,
-            requiredVersion: false
-        }
+            requiredVersion: false,
+            strictVersion: false
+        },
+        strategy: 'loaded-first'
     },
     'react-dom': {
         shareConfig: {
             singleton: true,
             eager: true,
-            requiredVersion: false
-        }
+            requiredVersion: false,
+            strictVersion: false
+        },
+        strategy: 'loaded-first'
+    },
+    'react-dom/client': {
+        shareConfig: {
+            singleton: true,
+            eager: true,
+            requiredVersion: false,
+            strictVersion: false
+        },
+        strategy: 'loaded-first'
+    },
+    'react/jsx-runtime': {
+        shareConfig: {
+            singleton: true,
+            eager: true,
+            requiredVersion: false,
+            strictVersion: false
+        },
+        strategy: 'loaded-first'
+    },
+    'react/jsx-dev-runtime': {
+        shareConfig: {
+            singleton: true,
+            eager: true,
+            requiredVersion: false,
+            strictVersion: false
+        },
+        strategy: 'loaded-first'
     }
 };
 async function fetchLatestVersion(pkg) {
@@ -238,41 +254,146 @@ function setVersionCache(pkg, version) {
 function buildCdnUrls(pkg, version) {
     return DEFAULT_CDN_TEMPLATES.map((template)=>template.replace('{pkg}', pkg).replace('{version}', version));
 }
+const mfInstanceCache = new Map();
+const mfInstanceLoadingCache = new Map();
 async function tryLoadRemote(scopeName, url, retries, delay, sharedConfig, plugins) {
-    let lastError;
-    for(let i = 0; i < retries; i++)try {
-        const mf = createInstance({
-            name: 'host',
-            remotes: [
-                {
-                    name: scopeName,
-                    entry: url
-                }
-            ],
-            shared: sharedConfig,
-            plugins: [
-                ...plugins,
-                fallbackPlugin()
-            ]
+    const cacheKey = `${scopeName}::${url}`;
+    const cachedMfs = mfInstanceCache.get(cacheKey);
+    if (cachedMfs) return {
+        scopeName,
+        mf: cachedMfs
+    };
+    const loadingMfs = mfInstanceLoadingCache.get(cacheKey);
+    if (loadingMfs) return loadingMfs;
+    const createProcess = (async ()=>{
+        let lastError;
+        for(let i = 0; i < retries; i++)try {
+            const mf = createInstance({
+                name: 'host',
+                remotes: [
+                    {
+                        name: scopeName,
+                        entry: url
+                    }
+                ],
+                shared: sharedConfig,
+                plugins: [
+                    ...plugins,
+                    fallbackPlugin()
+                ]
+            });
+            const result = {
+                scopeName,
+                mf
+            };
+            mfInstanceCache.set(cacheKey, mf);
+            return result;
+        } catch (e) {
+            lastError = e;
+            console.warn(`[MF] URL ${url} 加载失败，第 ${i + 1} 次重试...`);
+            if (i < retries - 1) await new Promise((res)=>setTimeout(res, delay));
+        }
+        throw new Error(`[MF] URL ${url} 经过 ${retries} 次重试仍加载失败。`, {
+            cause: lastError
         });
-        return {
-            scopeName,
-            mf
-        };
-    } catch (e) {
-        lastError = e;
-        console.warn(`[MF] URL ${url} 加载失败，第 ${i + 1} 次重试...`);
-        if (i < retries - 1) await new Promise((res)=>setTimeout(res, delay));
+    })();
+    mfInstanceLoadingCache.set(cacheKey, createProcess);
+    try {
+        return await createProcess;
+    } finally{
+        mfInstanceLoadingCache.delete(cacheKey);
     }
-    throw new Error(`[MF] URL ${url} 经过 ${retries} 次重试仍加载失败。`, {
-        cause: lastError
-    });
 }
 function getFinalSharedConfig(customShared) {
-    return {
+    const globalReact = window.React;
+    const globalReactDOM = window.ReactDOM;
+    const globalShared = {};
+    if (globalReact && globalReactDOM) {
+        const isValidReact = 'object' == typeof globalReact && 'function' == typeof globalReact.useCallback;
+        if (isValidReact) {
+            globalShared.react = {
+                version: globalReact.version || '18.0.0',
+                lib: ()=>globalReact,
+                shareConfig: {
+                    singleton: true,
+                    eager: true,
+                    requiredVersion: false,
+                    strictVersion: false
+                },
+                strategy: 'loaded-first'
+            };
+            globalShared['react-dom'] = {
+                version: globalReactDOM.version || '18.0.0',
+                lib: ()=>globalReactDOM,
+                shareConfig: {
+                    singleton: true,
+                    eager: true,
+                    requiredVersion: false,
+                    strictVersion: false
+                },
+                strategy: 'loaded-first'
+            };
+            globalShared['react-dom/client'] = {
+                version: globalReactDOM.version || '18.0.0',
+                lib: ()=>globalReactDOM,
+                shareConfig: {
+                    singleton: true,
+                    eager: true,
+                    requiredVersion: false,
+                    strictVersion: false
+                },
+                strategy: 'loaded-first'
+            };
+            console.log('[getFinalSharedConfig] Using global React instance', {
+                version: globalReact.version
+            });
+        } else console.warn('[getFinalSharedConfig] Global React found but is invalid', {
+            type: typeof globalReact,
+            useCallback: typeof globalReact?.useCallback
+        });
+    } else console.log('[getFinalSharedConfig] No global React found, using default shared config');
+    const mergedShared = {
         ...DEFAULT_SHARED_CONFIG,
+        ...globalShared,
         ...customShared || {}
     };
+    const keepSingletonPackages = [
+        'react',
+        'react-dom',
+        'react-dom/client',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime'
+    ];
+    for (const pkgName of keepSingletonPackages){
+        const base = mergedShared[pkgName] || {};
+        mergedShared[pkgName] = {
+            ...base,
+            strategy: 'loaded-first',
+            shareConfig: {
+                singleton: true,
+                eager: true,
+                requiredVersion: false,
+                strictVersion: false,
+                ...base.shareConfig || {}
+            }
+        };
+    }
+    if ('function' == typeof globalShared.react?.lib) mergedShared.react = {
+        ...mergedShared.react || {},
+        lib: globalShared.react.lib,
+        version: globalShared.react.version
+    };
+    if ('function' == typeof globalShared['react-dom']?.lib) mergedShared['react-dom'] = {
+        ...mergedShared['react-dom'] || {},
+        lib: globalShared['react-dom'].lib,
+        version: globalShared['react-dom'].version
+    };
+    if ('function' == typeof globalShared['react-dom/client']?.lib) mergedShared['react-dom/client'] = {
+        ...mergedShared['react-dom/client'] || {},
+        lib: globalShared['react-dom/client'].lib,
+        version: globalShared['react-dom/client'].version
+    };
+    return mergedShared;
 }
 async function resolveFinalVersion(pkg, version, cacheTTL, revalidate) {
     let finalVersion = version;
@@ -306,6 +427,7 @@ async function loadRemoteMultiVersion(options, plugins) {
     const scopeName = `${name}`;
     const urls = buildFinalUrls(pkg, finalVersion, localFallback);
     const finalSharedConfig = getFinalSharedConfig(customShared);
+    console.log(finalSharedConfig, 'finalSharedConfig');
     for (const url of urls)try {
         return await tryLoadRemote(scopeName, url, retries, delay, finalSharedConfig, plugins);
     } catch (e) {
@@ -699,291 +821,4 @@ const eventBus = EventBusClass.create();
 function createEventBus() {
     return EventBusClass.create();
 }
-class ErrorBoundary extends react.Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            hasError: false,
-            error: null,
-            errorInfo: null
-        };
-    }
-    static getDerivedStateFromError(error) {
-        return {
-            hasError: true,
-            error,
-            errorInfo: null
-        };
-    }
-    componentDidCatch(error, errorInfo) {
-        this.setState({
-            errorInfo
-        });
-        this.props.onError?.(error, errorInfo);
-        console.error('[RemoteReloadUtils] ErrorBoundary caught error:', error, errorInfo);
-    }
-    handleReset = ()=>{
-        this.setState({
-            hasError: false,
-            error: null,
-            errorInfo: null
-        });
-        this.props.onReset?.();
-    };
-    render() {
-        if (this.state.hasError && this.state.error) {
-            if ('function' == typeof this.props.fallback) return this.props.fallback(this.state.error, this.handleReset);
-            if (void 0 !== this.props.fallback) return this.props.fallback;
-            return /*#__PURE__*/ react.createElement("div", {
-                role: "alert",
-                className: "p-4 border border-red-200 bg-red-50 rounded-lg"
-            }, /*#__PURE__*/ react.createElement("h3", {
-                className: "text-lg font-semibold mb-2"
-            }, "Something went wrong"), /*#__PURE__*/ react.createElement("p", {
-                className: "text-red-700"
-            }, this.state.error.message), /*#__PURE__*/ react.createElement("button", {
-                onClick: this.handleReset,
-                className: "mt-3 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded hover:bg-red-700 cursor-pointer transition-colors"
-            }, "Try again"));
-        }
-        return this.props.children;
-    }
-}
-function useRemoteModule({ pkg, version, moduleName, scopeName, onError, onLoad, retryKey = 0 }) {
-    const [moduleState, setModuleState] = useState({
-        loading: true,
-        error: null,
-        component: null
-    });
-    useEffect(()=>{
-        let mounted = true;
-        async function loadModule() {
-            try {
-                setModuleState((prev)=>({
-                        ...prev,
-                        loading: true,
-                        error: null
-                    }));
-                const { mf } = await loadRemoteMultiVersion({
-                    name: scopeName,
-                    pkg,
-                    version
-                }, []);
-                if (!mf || !mounted) return;
-                const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
-                if (!mounted) return;
-                if (mod && 'object' == typeof mod && 'default' in mod) {
-                    const Component = mod.default;
-                    setModuleState({
-                        loading: false,
-                        error: null,
-                        component: Component
-                    });
-                    onLoad?.(Component);
-                } else throw new Error(`Module "${scopeName}/${moduleName}" does not export a default component`);
-            } catch (err) {
-                if (mounted) {
-                    const error = err instanceof Error ? err : new Error(String(err));
-                    setModuleState({
-                        loading: false,
-                        error,
-                        component: null
-                    });
-                    onError?.(error);
-                }
-            }
-        }
-        loadModule();
-        return ()=>{
-            mounted = false;
-        };
-    }, [
-        pkg,
-        version,
-        moduleName,
-        scopeName,
-        onError,
-        onLoad,
-        retryKey
-    ]);
-    return moduleState;
-}
-function RemoteModuleRenderer({ pkg, version, moduleName, scopeName, loadingFallback, errorFallback, componentProps, className, style, onError, onLoad }) {
-    const moduleState = useRemoteModule({
-        pkg,
-        version,
-        moduleName,
-        scopeName,
-        onError,
-        onLoad
-    });
-    const [retryKey, setRetryKey] = useState(0);
-    const handleRetry = useCallback(()=>{
-        setRetryKey((prev)=>prev + 1);
-    }, []);
-    useEffect(()=>{}, [
-        retryKey
-    ]);
-    if (moduleState.loading) return /*#__PURE__*/ react.createElement("div", {
-        className: className,
-        style: style,
-        role: "status",
-        "aria-live": "polite"
-    }, loadingFallback || /*#__PURE__*/ react.createElement("div", {
-        className: "module-card module-card--loading"
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "loading-spinner",
-        "aria-hidden": "true"
-    }), /*#__PURE__*/ react.createElement("span", {
-        className: "text-gray-600"
-    }, "Loading ", moduleName, "...")));
-    if (moduleState.error) {
-        if ('function' == typeof errorFallback) return /*#__PURE__*/ react.createElement(react.Fragment, null, errorFallback(moduleState.error, handleRetry));
-        if (void 0 !== errorFallback) return /*#__PURE__*/ react.createElement(react.Fragment, null, errorFallback);
-        return /*#__PURE__*/ react.createElement("div", {
-            className: className,
-            style: style,
-            role: "alert"
-        }, /*#__PURE__*/ react.createElement("div", {
-            className: "module-card module-card--error"
-        }, /*#__PURE__*/ react.createElement("span", {
-            className: "error-icon",
-            "aria-hidden": "true"
-        }, "!"), /*#__PURE__*/ react.createElement("span", null, "Failed to load ", moduleName), /*#__PURE__*/ react.createElement("p", {
-            className: "error-message"
-        }, moduleState.error.message), /*#__PURE__*/ react.createElement("button", {
-            onClick: handleRetry,
-            className: "retry-button",
-            type: "button"
-        }, "Retry")));
-    }
-    if (!moduleState.component) return null;
-    const Component = moduleState.component;
-    return /*#__PURE__*/ react.createElement("div", {
-        className: className,
-        style: style
-    }, /*#__PURE__*/ react.createElement(Component, componentProps));
-}
-function RemoteModuleProvider(props) {
-    const { disableErrorBoundary, errorFallback, loadingFallback, errorBoundaryOptions } = props;
-    if (disableErrorBoundary) return /*#__PURE__*/ react.createElement(Suspense, {
-        fallback: loadingFallback || /*#__PURE__*/ react.createElement("div", null, "Loading...")
-    }, /*#__PURE__*/ react.createElement(RemoteModuleRenderer, props));
-    return /*#__PURE__*/ react.createElement(ErrorBoundary, {
-        fallback: errorFallback,
-        onError: errorBoundaryOptions?.onError,
-        onReset: errorBoundaryOptions?.onReset
-    }, /*#__PURE__*/ react.createElement(Suspense, {
-        fallback: loadingFallback || /*#__PURE__*/ react.createElement("div", null, "Loading...")
-    }, /*#__PURE__*/ react.createElement(RemoteModuleRenderer, props)));
-}
-function lazyRemote(options) {
-    const { pkg, version = 'latest', moduleName, scopeName, maxRetries = 3, retryDelay = 1000 } = options;
-    let retryCount = 0;
-    const loadComponent = async ()=>{
-        try {
-            const { mf } = await loadRemoteMultiVersion({
-                name: scopeName,
-                pkg,
-                version
-            }, []);
-            if (!mf) throw new Error(`[RemoteReloadUtils] Failed to get Module Federation instance for ${scopeName}`);
-            const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
-            if (!mod || 'object' != typeof mod || !('default' in mod)) throw new Error(`[RemoteReloadUtils] Module "${scopeName}/${moduleName}" does not export a default component`);
-            return {
-                default: mod.default
-            };
-        } catch (error) {
-            if (retryCount < maxRetries) {
-                retryCount++;
-                await new Promise((resolve)=>setTimeout(resolve, retryDelay * retryCount));
-                return loadComponent();
-            }
-            throw error;
-        }
-    };
-    return /*#__PURE__*/ lazy(loadComponent);
-}
-function SuspenseRemote({ fallback, children }) {
-    return /*#__PURE__*/ react.createElement(Suspense, {
-        fallback: fallback || /*#__PURE__*/ react.createElement("div", null, "Loading...")
-    }, children);
-}
-function SuspenseRemoteLoader({ pkg, version = 'latest', moduleName, scopeName, fallback, errorFallback, componentProps }) {
-    const RemoteComponent = lazyRemote({
-        pkg,
-        version,
-        moduleName,
-        scopeName
-    });
-    if (errorFallback) return /*#__PURE__*/ react.createElement(ErrorBoundary, {
-        fallback: errorFallback
-    }, /*#__PURE__*/ react.createElement(Suspense, {
-        fallback: fallback || /*#__PURE__*/ react.createElement("div", null, "Loading...")
-    }, /*#__PURE__*/ react.createElement(RemoteComponent, componentProps)));
-    return /*#__PURE__*/ react.createElement(Suspense, {
-        fallback: fallback || /*#__PURE__*/ react.createElement("div", null, "Loading...")
-    }, /*#__PURE__*/ react.createElement(RemoteComponent, componentProps));
-}
-function withRemote(WrappedComponent, options) {
-    const RemoteComponent = lazyRemote(options);
-    return function(props) {
-        return /*#__PURE__*/ react.createElement(Suspense, {
-            fallback: /*#__PURE__*/ react.createElement("div", null, "Loading...")
-        }, /*#__PURE__*/ react.createElement(RemoteComponent, props));
-    };
-}
-function useRemoteModuleHook(options) {
-    const { pkg, version = 'latest', moduleName, scopeName } = options;
-    const [state, setState] = useState({
-        component: null,
-        loading: true,
-        error: null
-    });
-    useEffect(()=>{
-        let mounted = true;
-        async function load() {
-            try {
-                setState((prev)=>({
-                        ...prev,
-                        loading: true,
-                        error: null
-                    }));
-                const { mf } = await loadRemoteMultiVersion({
-                    name: scopeName,
-                    pkg,
-                    version
-                }, []);
-                if (!mf) throw new Error(`[RemoteReloadUtils] Failed to get Module Federation instance for ${scopeName}`);
-                const mod = await mf.loadRemote(`${scopeName}/${moduleName}`);
-                if (mounted) if (mod && 'object' == typeof mod && 'default' in mod) setState({
-                    component: mod.default,
-                    loading: false,
-                    error: null
-                });
-                else throw new Error(`[RemoteReloadUtils] Module "${scopeName}/${moduleName}" does not export a default component`);
-            } catch (err) {
-                if (mounted) setState({
-                    component: null,
-                    loading: false,
-                    error: err instanceof Error ? err : new Error(String(err))
-                });
-            }
-        }
-        load();
-        return ()=>{
-            mounted = false;
-        };
-    }, [
-        pkg,
-        version,
-        moduleName,
-        scopeName
-    ]);
-    return {
-        component: state.component,
-        loading: state.loading,
-        error: state.error
-    };
-}
-export { ErrorBoundary, RemoteModuleProvider, RemoteModuleRenderer, SuspenseRemote, SuspenseRemoteLoader, buildCdnUrls, buildFinalUrls, cancelPreload, checkModuleLoadable, checkRemoteHealth, checkVersionCompatibility, clearPreloadCache, compareVersions, createEventBus, eventBus, extractMajorVersion, fallbackPlugin, fetchAvailableVersions, fetchLatestVersion, findCompatibleVersion, formatHealthStatus, getCompatibleReactVersions, getFinalSharedConfig, getLatestVersion, getLoadedRemotes, getPreloadStatus, getRemoteHealthReport, getStableVersions, getVersionCache, isPrerelease, isRemoteLoaded, lazyRemote, loadReactVersion, loadRemoteMultiVersion, parseVersion, preloadRemote, preloadRemoteList, registerLoadedModule, registerRemoteInstance, resolveFinalVersion, satisfiesVersion, setVersionCache, sortVersions, tryLoadRemote, unloadAll, unloadRemote, useRemoteModule, useRemoteModuleHook, withRemote };
+export { buildCdnUrls, buildFinalUrls, cancelPreload, checkModuleLoadable, checkRemoteHealth, checkVersionCompatibility, clearPreloadCache, compareVersions, createEventBus, eventBus, extractMajorVersion, fallbackPlugin, fetchAvailableVersions, fetchLatestVersion, findCompatibleVersion, formatHealthStatus, getCompatibleReactVersions, getFinalSharedConfig, getLatestVersion, getLoadedRemotes, getPreloadStatus, getRemoteHealthReport, getStableVersions, getVersionCache, isPrerelease, isRemoteLoaded, loadReactVersion, loadRemoteMultiVersion, parseVersion, preloadRemote, preloadRemoteList, registerLoadedModule, registerRemoteInstance, resolveFinalVersion, satisfiesVersion, setVersionCache, sortVersions, tryLoadRemote, unloadAll, unloadRemote };

package/dist/plugins/register-shared-react.d.ts

@@ -0,0 +1,6 @@
+import type { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+export declare function initSharedScope(): void;
+/**
+ * 注册全局 React/ReactDOM 到 Module Federation 共享作用域
+ */
+export declare const registerSharedReact: () => ModuleFederationRuntimePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-reload-utils",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "description": "Utilities for remote reload in Module Federation & React Component",
   "exports": {
@@ -13,6 +13,26 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/main.cjs"
       }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/main.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/main.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/main.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/main.cjs"
+      }
     }
   },
   "main": "./dist/main.cjs",
@@ -29,7 +49,13 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-dom": ">=17.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "rslib build",

package/dist/components/ErrorBoundary.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-export interface ErrorBoundaryProps {
-    children: React.ReactNode;
-    fallback?: React.ReactNode | ((error: Error, resetError: () => void) => React.ReactNode);
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-    onReset?: () => void;
-}
-interface ErrorBoundaryState {
-    hasError: boolean;
-    error: Error | null;
-    errorInfo?: React.ErrorInfo | null;
-}
-/**
- * 错误边界组件
- * 用于捕获子组件树中的错误，并显示降级 UI
- *
- * @example
- * ```tsx
- * <ErrorBoundary
- *   fallback={(error, reset) => <div onClick={reset}>Error: {error.message}</div>}
- *   onError={(error, info) => console.error(error, info)}
- * >
- *   <MyComponent />
- * </ErrorBoundary>
- * ```
- */
-export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    handleReset: () => void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-}
-export {};