@module-federation/nextjs-mf 5.2.2 → 5.3.1

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/include-defaults.js

@@ -1,6 +1,4 @@
-// if(process.browser && (typeof __webpack_share_scopes__ === "undefined" || !__webpack_share_scopes__.default)) {
-//   __webpack_init_sharing__('default');
-// }
+// this is needed to ensure webpack does not attempt to tree shake unused modules. Since these should always come from host
 require('react');
 require('react-dom');
 require('next/link');

package/lib/internal.js

@@ -0,0 +1,241 @@
+import { parseOptions } from 'webpack/lib/container/options';
+import { isRequiredVersion } from 'webpack/lib/sharing/utils';
+import path from 'path';
+
+// the share scope we attach by default
+// in hosts we re-key them to prevent webpack moving the modules into their own chunks (cause eager error)
+// in remote these are marked as import:false as we always expect the host to prove them
+export const DEFAULT_SHARE_SCOPE = {
+  react: {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react/jsx-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react-dom': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'next/dynamic': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'styled-jsx': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/link': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/router': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/script': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/head': {
+    requiredVersion: false,
+    singleton: true,
+  },
+};
+// put host infront of any shared module key, so "hostreact"
+export const reKeyHostShared = (options) => {
+  return Object.entries({
+    ...(options || {}),
+    ...DEFAULT_SHARE_SCOPE,
+  }).reduce((acc, item) => {
+    const [itemKey, shareOptions] = item;
+
+    const shareKey = 'host' + (item.shareKey || itemKey);
+    acc[shareKey] = shareOptions;
+    if (!shareOptions.import) {
+      acc[shareKey].import = itemKey;
+    }
+    if (!shareOptions.shareKey) {
+      acc[shareKey].shareKey = itemKey;
+    }
+
+    if (DEFAULT_SHARE_SCOPE[itemKey]) {
+      acc[shareKey].packageName = itemKey;
+    }
+    return acc;
+  }, {});
+};
+
+// split the @ syntax into url and global
+export const extractUrlAndGlobal = (urlAndGlobal) => {
+  const index = urlAndGlobal.indexOf('@');
+  if (index <= 0 || index === urlAndGlobal.length - 1) {
+    throw new Error(`Invalid request "${urlAndGlobal}"`);
+  }
+  return [urlAndGlobal.substring(index + 1), urlAndGlobal.substring(0, index)];
+};
+
+// browser template to convert remote into promise new promise and use require.loadChunk to load the chunk
+export const generateRemoteTemplate = (url, global) => {
+  return `promise new Promise(function (resolve, reject) {
+    var __webpack_error__ = new Error();
+    if (typeof ${global} !== 'undefined') return resolve();
+    __webpack_require__.l(
+      ${JSON.stringify(url)},
+      function (event) {
+        if (typeof ${global} !== 'undefined') return resolve();
+        var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+        var realSrc = event && event.target && event.target.src;
+        __webpack_error__.message =
+          'Loading script failed.\\n(' + errorType + ': ' + realSrc + ')';
+        __webpack_error__.name = 'ScriptExternalLoadError';
+        __webpack_error__.type = errorType;
+        __webpack_error__.request = realSrc;
+        reject(__webpack_error__);
+      },
+      ${JSON.stringify(global)},
+    );
+  }).then(function () {
+    const proxy = {
+      get: ${global}.get,
+      init: function(shareScope) {
+        const handler = {
+          get(target, prop) {
+            if (target[prop]) {
+              Object.values(target[prop]).forEach(function(o) {
+                if(o.from === '_N_E') {
+                  o.loaded = 1
+                }
+              })
+            }
+            return target[prop]
+          },
+          set(target, property, value, receiver) {
+            if (target[property]) {
+              return target[property]
+            }
+            target[property] = value
+            return true
+          }
+        }
+        try {
+          ${global}.init(new Proxy(shareScope, handler))
+        } catch (e) {
+
+        }
+        ${global}.__initialized = true
+      }
+    }
+    if (!${global}.__initialized) {
+      proxy.init()
+    }
+    return proxy
+  })`;
+}
+
+const parseShareOptions = (options) => {
+  const sharedOptions = parseOptions(
+    options.shared,
+    (item, key) => {
+      if (typeof item !== 'string')
+        throw new Error('Unexpected array in shared');
+      /** @type {SharedConfig} */
+      const config =
+        item === key || !isRequiredVersion(item)
+          ? {
+              import: item,
+            }
+          : {
+              import: key,
+              requiredVersion: item,
+            };
+      return config;
+    },
+    (item) => item
+  );
+  return sharedOptions.reduce((acc, [key, options]) => {
+    acc[key] = {
+      import: options.import,
+      shareKey: options.shareKey || key,
+      shareScope: options.shareScope,
+      requiredVersion: options.requiredVersion,
+      strictVersion: options.strictVersion,
+      singleton: options.singleton,
+      packageName: options.packageName,
+      eager: options.eager,
+    };
+    return acc;
+  }, {});
+};
+
+// shared packages must be compiled into webpack bundle, not require() pass through
+export const internalizeSharedPackages = (options, compiler) => {
+  //TODO: should use this util for other areas where we read MF options from userland
+  if (!options.shared) {
+    return;
+  }
+  const sharedOptions = parseShareOptions(options);
+  // get share keys from user, filter out ones that need to be external
+  const internalizableKeys = Object.keys(sharedOptions).filter((key) => {
+    if (!DEFAULT_SHARE_SCOPE[key]) {
+      return true;
+    }
+    if (!DEFAULT_SHARE_SCOPE[sharedOptions[key].import]) {
+      return true;
+    }
+  });
+  // take original externals regex
+  const backupExternals = compiler.options.externals[0];
+  // if externals is a function (like when you're not running in serverless mode or creating a single build)
+  if (typeof backupExternals === 'function') {
+    // replace externals function with short-circuit, or fall back to original algo
+    compiler.options.externals[0] = (mod, callback) => {
+      if (!internalizableKeys.some((v) => mod.request.includes(v))) {
+        return backupExternals(mod, callback);
+      }
+      // bundle it
+      return Promise.resolve();
+    };
+  }
+};
+
+export const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
+  (acc, item) => {
+    const [key, value] = item;
+    acc[key] = { ...value, import: false };
+    if (key === 'react/jsx-runtime') {
+      delete acc[key].import;
+    }
+    return acc;
+  },
+  {}
+);
+
+// determine output base path, derives .next folder location
+export const getOutputPath = (compiler) => {
+  const isServer = compiler.options.target !== 'client';
+  let outputPath = compiler.options.output.path.split(path.sep);
+  const foundIndex = outputPath.findIndex((i) => {
+    return i === (isServer ? 'server' : 'static');
+  });
+  outputPath = outputPath
+    .slice(0, foundIndex > 0 ? foundIndex : outputPath.length)
+    .join(path.sep);
+
+  return outputPath;
+};
+
+export const removePlugins = [
+  'NextJsRequireCacheHotReloader',
+  'BuildManifestPlugin',
+  'WellKnownErrorsPlugin',
+  'WebpackBuildEventsPlugin',
+  'HotModuleReplacementPlugin',
+  'NextMiniCssExtractPlugin',
+  'NextFederationPlugin',
+  'CopyFilePlugin',
+  'ProfilingPlugin',
+  'DropClientPage',
+  'ReactFreshWebpackPlugin',
+];