@module-federation/nextjs-mf 5.2.1 → 5.3.0

package/lib/client/RemotePages.js

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../_virtual/_tslib.js');
+
+/**
+ * A class which prepares/loads a list of remotes pages and knows how
+ * to prepare NextJS pseudo-module of route data.
+ */
+var RemotePages = /** @class */ (function () {
+    function RemotePages(remoteToRoutes) {
+        var _this = this;
+        this.paths = {};
+        this.asyncLoadedPageMaps = new Set();
+        this.pageListCache = undefined;
+        remoteToRoutes === null || remoteToRoutes === void 0 ? void 0 : remoteToRoutes.forEach(function (routes, remote) {
+            _this.addRoutes(routes, remote);
+        });
+    }
+    /**
+     * Add remote routes for specific RemoteContainer which serves them.
+     */
+    RemotePages.prototype.addRoutes = function (routes, remote) {
+        var _this = this;
+        if (Array.isArray(routes)) {
+            routes.forEach(function (route) {
+                _this.paths[route] = remote;
+            });
+        }
+        else {
+            this.paths[routes] = remote;
+        }
+        this.pageListCache = Object.keys(this.paths);
+    };
+    /**
+     * Load a remote page map and add its routes to registry.
+     */
+    RemotePages.prototype.loadRemotePageMap = function (remote) {
+        return _tslib.__awaiter(this, void 0, void 0, function () {
+            var pageMap;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, remote.getPageMap()];
+                    case 1:
+                        pageMap = _a.sent();
+                        if (!pageMap)
+                            return [2 /*return*/, undefined];
+                        // init once page map from remote if it wasn't done before
+                        // here we updating real routes received from remote app in runtime
+                        if (!this.asyncLoadedPageMaps.has(remote)) {
+                            this.asyncLoadedPageMaps.add(remote);
+                            this.addRoutes(Object.keys(pageMap), remote);
+                        }
+                        return [2 /*return*/, pageMap];
+                }
+            });
+        });
+    };
+    /**
+     * Get remote module according to provided next route.
+     * Under the hood it automatically determines which remote need to be used.
+     */
+    RemotePages.prototype.routeToPageModule = function (route) {
+        return _tslib.__awaiter(this, void 0, void 0, function () {
+            var remote, pageMap, modulePath;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        remote = this.routeToRemote(route);
+                        if (!remote) {
+                            return [2 /*return*/, undefined];
+                        }
+                        return [4 /*yield*/, this.loadRemotePageMap(remote)];
+                    case 1:
+                        pageMap = _a.sent();
+                        if (!pageMap) {
+                            return [2 /*return*/, undefined];
+                        }
+                        modulePath = pageMap[route];
+                        if (!modulePath) {
+                            return [2 /*return*/, undefined];
+                        }
+                        return [2 /*return*/, remote.getModule(modulePath)];
+                }
+            });
+        });
+    };
+    /**
+     * Check that provided route present in registry.
+     */
+    RemotePages.prototype.hasRoute = function (route) {
+        var _a;
+        return !!((_a = this.pageListCache) === null || _a === void 0 ? void 0 : _a.includes(route));
+    };
+    /**
+     * Find remote according to provided route.
+     */
+    RemotePages.prototype.routeToRemote = function (route) {
+        var bestMatch;
+        for (var basepath in this.paths) {
+            if (route === basepath) {
+                return this.paths[basepath];
+            }
+            else if (route.startsWith("".concat(basepath, "/"))) {
+                if (!bestMatch) {
+                    bestMatch = basepath;
+                }
+                else if (bestMatch.length < basepath.length) {
+                    bestMatch = basepath;
+                }
+            }
+        }
+        if (bestMatch) {
+            return this.paths[bestMatch];
+        }
+        return undefined;
+    };
+    /**
+     * Get cached unsorted list of remote routes.
+     */
+    RemotePages.prototype.getPageList = function () {
+        // it's very important to return the same Array instance
+        // because it instance is used in CombinedPages for recalculation of sorted version of all routes
+        var pageList = this.pageListCache || Object.keys(this.paths);
+        this.pageListCache = pageList;
+        return pageList;
+    };
+    /**
+     * Get prepared pseudo-module which is consumed by Nextjs' router.
+     */
+    RemotePages.prototype.getRouteInfo = function (route) {
+        return _tslib.__awaiter(this, void 0, void 0, function () {
+            var routeInfo, mod, e_1;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.routeToPageModule(route)];
+                    case 1:
+                        mod = _a.sent();
+                        if (mod) {
+                            routeInfo = {
+                                component: mod.default,
+                                exports: mod,
+                                styles: [],
+                            };
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        routeInfo = {
+                            // TODO: provide ability to customize component with Error
+                            component: function () { return e_1.message; },
+                            exports: {},
+                            styles: [],
+                        };
+                        console.warn(e_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/, routeInfo];
+                }
+            });
+        });
+    };
+    return RemotePages;
+}());
+
+exports.RemotePages = RemotePages;

package/lib/client/UrlNode.d.ts

@@ -0,0 +1,18 @@
+/**
+ * This class provides a logic of sorting dynamic routes in NextJS.
+ *
+ * It was copied from
+ * @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
+ */
+export declare class UrlNode {
+    placeholder: boolean;
+    children: Map<string, UrlNode>;
+    slugName: string | null;
+    restSlugName: string | null;
+    optionalRestSlugName: string | null;
+    insert(urlPath: string): void;
+    smoosh(): string[];
+    private _smoosh;
+    private _insert;
+}
+//# sourceMappingURL=UrlNode.d.ts.map

package/lib/client/UrlNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlNode.d.ts","sourceRoot":"","sources":["../../src/client/UrlNode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,OAAO;IAClB,WAAW,EAAE,OAAO,CAAQ;IAC5B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAa;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC/B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAI7B,MAAM,IAAI,MAAM,EAAE;IAIlB,OAAO,CAAC,OAAO;IAoDf,OAAO,CAAC,OAAO;CAmIhB"}

package/lib/client/UrlNode.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../_virtual/_tslib.js');
+
+/**
+ * This class provides a logic of sorting dynamic routes in NextJS.
+ *
+ * It was copied from
+ * @see https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/utils/sorted-routes.ts
+ */
+var UrlNode = /** @class */ (function () {
+    function UrlNode() {
+        this.placeholder = true;
+        this.children = new Map();
+        this.slugName = null;
+        this.restSlugName = null;
+        this.optionalRestSlugName = null;
+    }
+    UrlNode.prototype.insert = function (urlPath) {
+        this._insert(urlPath.split('/').filter(Boolean), [], false);
+    };
+    UrlNode.prototype.smoosh = function () {
+        return this._smoosh();
+    };
+    UrlNode.prototype._smoosh = function (prefix) {
+        var _this = this;
+        if (prefix === void 0) { prefix = '/'; }
+        var childrenPaths = _tslib.__spreadArray([], _tslib.__read(this.children.keys()), false).sort();
+        if (this.slugName !== null) {
+            childrenPaths.splice(childrenPaths.indexOf('[]'), 1);
+        }
+        if (this.restSlugName !== null) {
+            childrenPaths.splice(childrenPaths.indexOf('[...]'), 1);
+        }
+        if (this.optionalRestSlugName !== null) {
+            childrenPaths.splice(childrenPaths.indexOf('[[...]]'), 1);
+        }
+        var routes = childrenPaths
+            .map(function (c) { return _this.children.get(c)._smoosh("".concat(prefix).concat(c, "/")); })
+            .reduce(function (prev, curr) { return _tslib.__spreadArray(_tslib.__spreadArray([], _tslib.__read(prev), false), _tslib.__read(curr), false); }, []);
+        if (this.slugName !== null) {
+            routes.push.apply(routes, _tslib.__spreadArray([], _tslib.__read(this.children.get('[]')._smoosh("".concat(prefix, "[").concat(this.slugName, "]/"))), false));
+        }
+        if (!this.placeholder) {
+            var r = prefix === '/' ? '/' : prefix.slice(0, -1);
+            if (this.optionalRestSlugName != null) {
+                throw new Error("You cannot define a route with the same specificity as a optional catch-all route (\"".concat(r, "\" and \"").concat(r, "[[...").concat(this.optionalRestSlugName, "]]\")."));
+            }
+            routes.unshift(r);
+        }
+        if (this.restSlugName !== null) {
+            routes.push.apply(routes, _tslib.__spreadArray([], _tslib.__read(this.children
+                .get('[...]')
+                ._smoosh("".concat(prefix, "[...").concat(this.restSlugName, "]/"))), false));
+        }
+        if (this.optionalRestSlugName !== null) {
+            routes.push.apply(routes, _tslib.__spreadArray([], _tslib.__read(this.children
+                .get('[[...]]')
+                ._smoosh("".concat(prefix, "[[...").concat(this.optionalRestSlugName, "]]/"))), false));
+        }
+        return routes;
+    };
+    UrlNode.prototype._insert = function (urlPaths, slugNames, isCatchAll) {
+        if (urlPaths.length === 0) {
+            this.placeholder = false;
+            return;
+        }
+        if (isCatchAll) {
+            throw new Error("Catch-all must be the last part of the URL.");
+        }
+        // The next segment in the urlPaths list
+        var nextSegment = urlPaths[0];
+        // Check if the segment matches `[something]`
+        if (nextSegment.startsWith('[') && nextSegment.endsWith(']')) {
+            // Strip `[` and `]`, leaving only `something`
+            var segmentName = nextSegment.slice(1, -1);
+            var isOptional = false;
+            if (segmentName.startsWith('[') && segmentName.endsWith(']')) {
+                // Strip optional `[` and `]`, leaving only `something`
+                segmentName = segmentName.slice(1, -1);
+                isOptional = true;
+            }
+            if (segmentName.startsWith('...')) {
+                // Strip `...`, leaving only `something`
+                segmentName = segmentName.substring(3);
+                isCatchAll = true;
+            }
+            if (segmentName.startsWith('[') || segmentName.endsWith(']')) {
+                throw new Error("Segment names may not start or end with extra brackets ('".concat(segmentName, "')."));
+            }
+            if (segmentName.startsWith('.')) {
+                throw new Error("Segment names may not start with erroneous periods ('".concat(segmentName, "')."));
+            }
+            var handleSlug = function handleSlug(previousSlug, nextSlug) {
+                if (previousSlug !== null) {
+                    // If the specific segment already has a slug but the slug is not `something`
+                    // This prevents collisions like:
+                    // pages/[post]/index.js
+                    // pages/[id]/index.js
+                    // Because currently multiple dynamic params on the same segment level are not supported
+                    if (previousSlug !== nextSlug) {
+                        // TODO: This error seems to be confusing for users, needs an error link, the description can be based on above comment.
+                        throw new Error("You cannot use different slug names for the same dynamic path ('".concat(previousSlug, "' !== '").concat(nextSlug, "')."));
+                    }
+                }
+                slugNames.forEach(function (slug) {
+                    if (slug === nextSlug) {
+                        throw new Error("You cannot have the same slug name \"".concat(nextSlug, "\" repeat within a single dynamic path"));
+                    }
+                    if (slug.replace(/\W/g, '') === nextSegment.replace(/\W/g, '')) {
+                        throw new Error("You cannot have the slug names \"".concat(slug, "\" and \"").concat(nextSlug, "\" differ only by non-word symbols within a single dynamic path"));
+                    }
+                });
+                slugNames.push(nextSlug);
+            };
+            if (isCatchAll) {
+                if (isOptional) {
+                    if (this.restSlugName != null) {
+                        throw new Error("You cannot use both an required and optional catch-all route at the same level (\"[...".concat(this.restSlugName, "]\" and \"").concat(urlPaths[0], "\" )."));
+                    }
+                    handleSlug(this.optionalRestSlugName, segmentName);
+                    // slugName is kept as it can only be one particular slugName
+                    this.optionalRestSlugName = segmentName;
+                    // nextSegment is overwritten to [[...]] so that it can later be sorted specifically
+                    nextSegment = '[[...]]';
+                }
+                else {
+                    if (this.optionalRestSlugName != null) {
+                        throw new Error("You cannot use both an optional and required catch-all route at the same level (\"[[...".concat(this.optionalRestSlugName, "]]\" and \"").concat(urlPaths[0], "\")."));
+                    }
+                    handleSlug(this.restSlugName, segmentName);
+                    // slugName is kept as it can only be one particular slugName
+                    this.restSlugName = segmentName;
+                    // nextSegment is overwritten to [...] so that it can later be sorted specifically
+                    nextSegment = '[...]';
+                }
+            }
+            else {
+                if (isOptional) {
+                    throw new Error("Optional route parameters are not yet supported (\"".concat(urlPaths[0], "\")."));
+                }
+                handleSlug(this.slugName, segmentName);
+                // slugName is kept as it can only be one particular slugName
+                this.slugName = segmentName;
+                // nextSegment is overwritten to [] so that it can later be sorted specifically
+                nextSegment = '[]';
+            }
+        }
+        // If this UrlNode doesn't have the nextSegment yet we create a new child UrlNode
+        if (!this.children.has(nextSegment)) {
+            this.children.set(nextSegment, new UrlNode());
+        }
+        this.children
+            .get(nextSegment)
+            ._insert(urlPaths.slice(1), slugNames, isCatchAll);
+    };
+    return UrlNode;
+}());
+
+exports.UrlNode = UrlNode;

package/lib/client/helpers.d.ts

@@ -0,0 +1,17 @@
+export declare function isDynamicRoute(route: string): boolean;
+export declare function getRouteRegex(normalizedRoute: string): {
+    re: RegExp;
+    groups: {};
+};
+/**
+ * Convert browser pathname to NextJs route.
+ * This method is required for proper work of Dynamic routes  in NextJS.
+ */
+export declare function pathnameToRoute(cleanPathname: string, routes: string[]): string | undefined;
+/**
+ * Sort provided pages in correct nextjs order.
+ * This sorting is required if you are using dynamic routes in your apps.
+ * If order is incorrect then Nextjs may use dynamicRoute instead of exact page.
+ */
+export declare function sortNextPages(pages: string[]): string[];
+//# sourceMappingURL=helpers.d.ts.map

package/lib/client/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/client/helpers.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,WAE3C;AA4CD,wBAAgB,aAAa,CAAC,eAAe,EAAE,MAAM;;;EAMpD;AAYD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EAAE,GACf,MAAM,GAAG,SAAS,CAYpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAKvD"}

package/lib/client/helpers.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../_virtual/_tslib.js');
+var UrlNode = require('./UrlNode.js');
+
+var TEST_DYNAMIC_ROUTE = /\/\[[^/]+?\](?=\/|$)/;
+function isDynamicRoute(route) {
+    return TEST_DYNAMIC_ROUTE.test(route);
+}
+/**
+ * Parses a given parameter from a route to a data structure that can be used
+ * to generate the parametrized route. Examples:
+ *   - `[...slug]` -> `{ name: 'slug', repeat: true, optional: true }`
+ *   - `[foo]` -> `{ name: 'foo', repeat: false, optional: true }`
+ *   - `bar` -> `{ name: 'bar', repeat: false, optional: false }`
+ */
+function parseParameter(param) {
+    var optional = param.startsWith('[') && param.endsWith(']');
+    if (optional) {
+        param = param.slice(1, -1);
+    }
+    var repeat = param.startsWith('...');
+    if (repeat) {
+        param = param.slice(3);
+    }
+    return { key: param, repeat: repeat, optional: optional };
+}
+function getParametrizedRoute(route) {
+    // const segments = removeTrailingSlash(route).slice(1).split('/')
+    var segments = route.slice(1).split('/');
+    var groups = {};
+    var groupIndex = 1;
+    return {
+        parameterizedRoute: segments
+            .map(function (segment) {
+            if (segment.startsWith('[') && segment.endsWith(']')) {
+                var _a = parseParameter(segment.slice(1, -1)), key = _a.key, optional = _a.optional, repeat = _a.repeat;
+                groups[key] = { pos: groupIndex++, repeat: repeat, optional: optional };
+                return repeat ? (optional ? '(?:/(.+?))?' : '/(.+?)') : '/([^/]+?)';
+            }
+            else {
+                return "/".concat(escapeStringRegexp(segment));
+            }
+        })
+            .join(''),
+        groups: groups,
+    };
+}
+function getRouteRegex(normalizedRoute) {
+    var _a = getParametrizedRoute(normalizedRoute), parameterizedRoute = _a.parameterizedRoute, groups = _a.groups;
+    return {
+        re: new RegExp("^".concat(parameterizedRoute, "(?:/)?$")),
+        groups: groups,
+    };
+}
+var reHasRegExp = /[|\\{}()[\]^$+*?.-]/;
+var reReplaceRegExp = /[|\\{}()[\]^$+*?.-]/g;
+function escapeStringRegexp(str) {
+    // see also: https://github.com/lodash/lodash/blob/2da024c3b4f9947a48517639de7560457cd4ec6c/escapeRegExp.js#L23
+    if (reHasRegExp.test(str)) {
+        return str.replace(reReplaceRegExp, '\\$&');
+    }
+    return str;
+}
+/**
+ * Convert browser pathname to NextJs route.
+ * This method is required for proper work of Dynamic routes  in NextJS.
+ */
+function pathnameToRoute(cleanPathname, routes) {
+    var e_1, _a;
+    if (routes.includes(cleanPathname)) {
+        return cleanPathname;
+    }
+    try {
+        for (var routes_1 = _tslib.__values(routes), routes_1_1 = routes_1.next(); !routes_1_1.done; routes_1_1 = routes_1.next()) {
+            var route = routes_1_1.value;
+            if (isDynamicRoute(route) && getRouteRegex(route).re.test(cleanPathname)) {
+                return route;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (routes_1_1 && !routes_1_1.done && (_a = routes_1.return)) _a.call(routes_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return undefined;
+}
+/**
+ * Sort provided pages in correct nextjs order.
+ * This sorting is required if you are using dynamic routes in your apps.
+ * If order is incorrect then Nextjs may use dynamicRoute instead of exact page.
+ */
+function sortNextPages(pages) {
+    var root = new UrlNode.UrlNode();
+    pages.forEach(function (pageRoute) { return root.insert(pageRoute); });
+    // Smoosh will then sort those sublevels up to the point where you get the correct route definition priority
+    return root.smoosh();
+}
+
+exports.getRouteRegex = getRouteRegex;
+exports.isDynamicRoute = isDynamicRoute;
+exports.pathnameToRoute = pathnameToRoute;
+exports.sortNextPages = sortNextPages;

package/lib/client/useMFClient.d.ts

@@ -0,0 +1,25 @@
+import type { MFClient } from './MFClient';
+import type { RemoteContainer } from './RemoteContainer';
+export declare type MFClientHookOptions = {
+    /**
+     * This callback will be called when user switches to federated page
+     *   - as a first arg you will receive RemoteContainer
+     * If user return back to the host application page
+     *   - then the first argument became `undefined`
+     *
+     * This callback is called only if changed remote from which served current visible page
+     * and does not called on internal nextjs route changes.
+     *
+     * This callback helps in very convenient way in _app.tsx (or any other React component)
+     * load additional data from RemoteContainer and pass it to your application. Eg.:
+     *   - application menu
+     *   - apollo configs
+     *   - translation strings
+     */
+    onChangeRemote?: (remote: RemoteContainer | undefined, MFClient: MFClient) => void;
+};
+/**
+ * React hook which provides convenient way for working with ModuleFederation runtime changes in runtime;
+ */
+export declare function useMFClient(opts: MFClientHookOptions): MFClient;
+//# sourceMappingURL=useMFClient.d.ts.map

package/lib/client/useMFClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMFClient.d.ts","sourceRoot":"","sources":["../../src/client/useMFClient.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,oBAAY,mBAAmB,GAAG;IAChC;;;;;;;;;;;;;;OAcG;IACH,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,eAAe,GAAG,SAAS,EACnC,QAAQ,EAAE,QAAQ,KACf,IAAI,CAAC;CACX,CAAC;AAQF;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,mBAAmB,GAAG,QAAQ,CAgD/D"}

package/lib/client/useMFClient.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var singletonRouter = require('next/dist/client/router');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var singletonRouter__default = /*#__PURE__*/_interopDefaultLegacy(singletonRouter);
+
+var isBrowser = typeof window !== 'undefined';
+/**
+ * React hook which provides convenient way for working with ModuleFederation runtime changes in runtime;
+ */
+function useMFClient(opts) {
+    var MFClient = isBrowser
+        ? window.mf_client
+        : /* TODO: inject here SSR version of MFClient if it will be needed in future */ {};
+    var innerState = React__namespace.useRef({
+        remote: undefined,
+    });
+    React__namespace.useEffect(function () {
+        // Step 1: Define handlers and helpers
+        var processRemoteChange = function (remote) {
+            if (innerState.current.remote !== remote) {
+                innerState.current.remote = remote;
+                if (opts === null || opts === void 0 ? void 0 : opts.onChangeRemote) {
+                    opts.onChangeRemote(remote, MFClient);
+                }
+            }
+        };
+        var handleRouterChange = function (pathname) {
+            if (MFClient.isFederatedPathname(pathname)) {
+                var remote = MFClient.remotePages.routeToRemote(pathname);
+                processRemoteChange(remote);
+            }
+            else {
+                processRemoteChange(undefined);
+            }
+        };
+        // Step 2: run bootstrap logic
+        var initialRemote = MFClient.isFederatedPathname(window.location.pathname)
+            ? MFClient.remotePages.routeToRemote(window.location.pathname)
+            : undefined;
+        if (initialRemote) {
+            // important for first load to fire `onChangeRemote` with different remote
+            // because in innerState by default we assume that used local application
+            processRemoteChange(initialRemote);
+        }
+        // Step 3: Subscribe on events
+        singletonRouter__default["default"].events.on('routeChangeStart', handleRouterChange);
+        return function () {
+            singletonRouter__default["default"].events.off('routeChangeStart', handleRouterChange);
+        };
+    }, []);
+    return MFClient;
+}
+
+exports.useMFClient = useMFClient;

package/lib/client/useMFRemote.d.ts

@@ -0,0 +1,17 @@
+import { RemoteContainer } from './RemoteContainer';
+declare type UseMFRemoteResult = {
+    /** is container loaded or not */
+    loaded: boolean;
+    /** remote is Lazy, so it will be loaded if getModule(), getContainer() were called */
+    remote: RemoteContainer;
+    /** Present if error occurs during remote container loading */
+    error: Error | undefined;
+};
+/**
+ * React hook which provides an access to RemoteContainer in Module Federation
+ *
+ * @param global - can be a global variable name OR connection string "global@url"
+ */
+export declare function useMFRemote(global: string): UseMFRemoteResult;
+export {};
+//# sourceMappingURL=useMFRemote.d.ts.map

package/lib/client/useMFRemote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMFRemote.d.ts","sourceRoot":"","sources":["../../src/client/useMFRemote.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,aAAK,iBAAiB,GAAG;IACvB,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,sFAAsF;IACtF,MAAM,EAAE,eAAe,CAAC;IACxB,8DAA8D;IAC9D,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,CAwC7D"}