@module-federation/nextjs-mf 5.2.2 → 5.3.0

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"}

package/lib/client/useMFRemote.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../_virtual/_tslib.js');
+var React = require('react');
+var RemoteContainer = require('./RemoteContainer.js');
+
+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 isBrowser = typeof window !== '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"
+ */
+function useMFRemote(global) {
+    var remote;
+    if (isBrowser) {
+        // on client (we get instances from global variable because webpack breaks Singletons)
+        var MFClient_1 = window.mf_client;
+        remote = MFClient_1.remotes[global] || MFClient_1.registerRemote(global);
+    }
+    else {
+        // on server side
+        remote = RemoteContainer.RemoteContainer.createSingleton(global);
+    }
+    var _a = _tslib.__read(React__namespace.useState(remote.isLoaded()), 2), loaded = _a[0], setLoaded = _a[1];
+    var _b = _tslib.__read(React__namespace.useState(remote.error), 2), error = _b[0], setError = _b[1];
+    React__namespace.useEffect(function () {
+        var handleLoadComplete = function () {
+            setLoaded(true);
+        };
+        var handleLoadError = function (e) {
+            setError(e);
+        };
+        if (!loaded && remote.isLoaded()) {
+            handleLoadComplete();
+        }
+        remote.events.on('loadComplete', handleLoadComplete);
+        remote.events.on('loadError', handleLoadError);
+        return function () {
+            remote.events.off('loadComplete', handleLoadComplete);
+            remote.events.off('loadError', handleLoadError);
+        };
+    }, [remote]);
+    return {
+        remote: remote,
+        loaded: loaded,
+        error: error,
+    };
+}
+
+exports.useMFRemote = useMFRemote;

package/lib/loaders/UrlNode.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 🛑🛑🛑 Attention! 🛑🛑🛑
+ * Do not add type definitions to this file!!
+ * It already exists in src/client folder.
+ * So remove this file and import ts version from src/client/UrlNode.
+ *
+ * This file was add just for proper compilation of JS files without any rollup warnings:
+ * "(!) Unresolved dependencies"
+ * "nextjs-mf/src/client/UrlNode (imported by nextjs-mf/src/client/UrlNode?commonjs-external)"
+ */
+
+/**
+ * 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
+ */
+class UrlNode {
+  placeholder = true;
+  children = new Map();
+  slugName = null;
+  restSlugName = null;
+  optionalRestSlugName = null;
+
+  insert(urlPath) {
+    this._insert(urlPath.split('/').filter(Boolean), [], false);
+  }
+
+  smoosh() {
+    return this._smoosh();
+  }
+
+  _smoosh(prefix = '/') {
+    const childrenPaths = [...this.children.keys()].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);
+    }
+
+    const routes = childrenPaths
+      .map((c) => this.children.get(c)._smoosh(`${prefix}${c}/`))
+      .reduce((prev, curr) => [...prev, ...curr], []);
+
+    if (this.slugName !== null) {
+      routes.push(
+        ...this.children.get('[]')._smoosh(`${prefix}[${this.slugName}]/`)
+      );
+    }
+
+    if (!this.placeholder) {
+      const 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 ("${r}" and "${r}[[...${this.optionalRestSlugName}]]").`
+        );
+      }
+
+      routes.unshift(r);
+    }
+
+    if (this.restSlugName !== null) {
+      routes.push(
+        ...this.children
+          .get('[...]')
+          ._smoosh(`${prefix}[...${this.restSlugName}]/`)
+      );
+    }
+
+    if (this.optionalRestSlugName !== null) {
+      routes.push(
+        ...this.children
+          .get('[[...]]')
+          ._smoosh(`${prefix}[[...${this.optionalRestSlugName}]]/`)
+      );
+    }
+
+    return routes;
+  }
+
+  _insert(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
+    let nextSegment = urlPaths[0];
+
+    // Check if the segment matches `[something]`
+    if (nextSegment.startsWith('[') && nextSegment.endsWith(']')) {
+      // Strip `[` and `]`, leaving only `something`
+      let segmentName = nextSegment.slice(1, -1);
+
+      let 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 ('${segmentName}').`
+        );
+      }
+
+      if (segmentName.startsWith('.')) {
+        throw new Error(
+          `Segment names may not start with erroneous periods ('${segmentName}').`
+        );
+      }
+
+      const 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 ('${previousSlug}' !== '${nextSlug}').`
+            );
+          }
+        }
+
+        slugNames.forEach((slug) => {
+          if (slug === nextSlug) {
+            throw new Error(
+              `You cannot have the same slug name "${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 "${slug}" and "${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 ("[...${this.restSlugName}]" and "${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 ("[[...${this.optionalRestSlugName}]]" and "${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 ("${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);
+  }
+}
+
+exports.UrlNode = UrlNode;

package/lib/loaders/helpers.js

@@ -1,8 +1,13 @@
+'use strict';
+
+var helpers = require('../_virtual/helpers.js');
+
 /**
  * Inject a loader into the current module rule.
  * This function mutates `rule` argument!
  */
-module.exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
+
+helpers.__exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
   if (rule.loader) {
     rule.use = [loader, { loader: rule.loader, options: rule.options }];
     delete rule.loader;
@@ -15,7 +20,7 @@ module.exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
 /**
  * Check that current module rule has a loader with the provided name.
  */
-module.exports.hasLoader = function hasLoader(rule, loaderName) {
+helpers.__exports.hasLoader = function hasLoader(rule, loaderName) {
   if (rule.loader === loaderName) {
     return true;
   } else if (rule.use) {
@@ -34,7 +39,7 @@ module.exports.hasLoader = function hasLoader(rule, loaderName) {
   return false;
 };
 
-module.exports.toDisplayErrors = function toDisplayErrors(err) {
+helpers.__exports.toDisplayErrors = function toDisplayErrors(err) {
   return err
     .map((error) => {
       let message = error.message;
@@ -45,3 +50,5 @@ module.exports.toDisplayErrors = function toDisplayErrors(err) {
     })
     .join('\n');
 };
+
+module.exports = helpers.__exports;