@module-federation/nextjs-mf 0.0.0-feat-node-support-1702694175665 → 0.0.0-feat-node-support-1702930274547

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/nextjs-mf",
-  "version": "0.0.0-feat-node-support-1702694175665",
+  "version": "0.0.0-feat-node-support-1702930274547",
   "license": "MIT",
   "main": "./src/index.js",
   "types": "src/index.d.ts",
@@ -22,12 +22,12 @@
     "semver": "7.5.4",
     "tapable": "2.2.1",
     "webpack-sources": "^3.2.3",
-    "@module-federation/enhanced": "0.0.0-feat-node-support-1702694175663",
-    "@module-federation/node": "0.0.0-feat-node-support-1702694175665",
-    "@module-federation/runtime": "0.0.0-feat-node-support-1702694175665",
-    "@module-federation/sdk": "0.0.0-feat-node-support-1702694175665",
-    "@module-federation/utilities": "0.0.0-feat-node-support-1702694175668",
-    "@module-federation/webpack-bundler-runtime": "0.0.0-feat-node-support-1702694175669"
+    "@module-federation/enhanced": "0.0.0-feat-node-support-1702930274546",
+    "@module-federation/node": "0.0.0-feat-node-support-1702930274547",
+    "@module-federation/runtime": "0.0.0-feat-node-support-1702930274548",
+    "@module-federation/sdk": "0.0.0-feat-node-support-1702930274548",
+    "@module-federation/utilities": "0.0.0-feat-node-support-1702930274548",
+    "@module-federation/webpack-bundler-runtime": "0.0.0-feat-node-support-1702930274549"
   },
   "peerDependencies": {
     "next": "^12 || ^13 || ^14",

package/src/plugins/container/InvertedContainerPlugin.js

@@ -16,7 +16,8 @@ class InvertedContainerPlugin {
             chunkToEmbed: this.options.chunkToEmbed,
         }).apply(compiler);
         new enhanced_1.AsyncBoundaryPlugin({
-            eager: (module) => /.federation/.test(module.identifier()),
+            // @ts-ignore
+            eager: (module) => /\.federation/.test(module?.request || ''),
             //@ts-ignore
         }).apply(compiler);
     }

package/src/plugins/container/InvertedContainerPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvertedContainerPlugin.js","sourceRoot":"","sources":["../../../../../../packages/nextjs-mf/src/plugins/container/InvertedContainerPlugin.ts"],"names":[],"mappings":";;;;;AAEA,wFAAgE;AAChE,0DAAkE;AAUlE,MAAM,uBAAuB;IAG3B,YAAY,OAAiC;QAC3C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAEM,KAAK,CAAC,QAAkB;QAC7B,IAAI,iCAAuB,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY;SACxC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,8BAAmB,CAAC;YACtB,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YAC1D,YAAY;SACb,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC;CACF;AAED,kBAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InvertedContainerPlugin.js","sourceRoot":"","sources":["../../../../../../packages/nextjs-mf/src/plugins/container/InvertedContainerPlugin.ts"],"names":[],"mappings":";;;;;AAEA,wFAAgE;AAChE,0DAAkE;AAUlE,MAAM,uBAAuB;IAG3B,YAAY,OAAiC;QAC3C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAEM,KAAK,CAAC,QAAkB;QAC7B,IAAI,iCAAuB,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY;SACxC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,8BAAmB,CAAC;YACtB,aAAa;YACb,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,EAAE,CAAC;YAC7D,YAAY;SACb,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC;CACF;AAED,kBAAe,uBAAuB,CAAC"}

package/utils/build-utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Computes the remote filename based on the server status and the provided filename.
+ * If the server is active and a filename is provided, it returns the basename of the filename.
+ * Otherwise, it returns the provided filename.
+ *
+ * @param {boolean} isServer - Indicates if the server is active.
+ * @param {string} filename - The filename to compute.
+ * @returns {string} The computed filename.
+ */
+export declare const computeRemoteFilename: (isServer: boolean, filename: string) => string;

package/utils/build-utils.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeRemoteFilename = void 0;
+const path_1 = __importDefault(require("path"));
+/**
+ * Computes the remote filename based on the server status and the provided filename.
+ * If the server is active and a filename is provided, it returns the basename of the filename.
+ * Otherwise, it returns the provided filename.
+ *
+ * @param {boolean} isServer - Indicates if the server is active.
+ * @param {string} filename - The filename to compute.
+ * @returns {string} The computed filename.
+ */
+const computeRemoteFilename = (isServer, filename) => {
+    if (isServer && filename) {
+        return path_1.default.basename(filename);
+    }
+    return filename;
+};
+exports.computeRemoteFilename = computeRemoteFilename;
+//# sourceMappingURL=build-utils.js.map

package/utils/build-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-utils.js","sourceRoot":"","sources":["../../../../packages/nextjs-mf/utils/build-utils.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AAExB;;;;;;;;GAQG;AACI,MAAM,qBAAqB,GAAG,CAAC,QAAiB,EAAE,QAAgB,EAAE,EAAE;IAC3E,IAAI,QAAQ,IAAI,QAAQ,EAAE;QACxB,OAAO,cAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;KAChC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AALW,QAAA,qBAAqB,yBAKhC"}

package/utils/flushedChunks.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * FlushedChunks component.
+ * This component creates script and link elements for each chunk.
+ *
+ * @param {FlushedChunksProps} props - The properties of the component.
+ * @param {string[]} props.chunks - The chunks to be flushed.
+ * @returns {React.ReactElement} The created script and link elements.
+ */
+export declare const FlushedChunks: ({ chunks }: FlushedChunksProps) => React.FunctionComponentElement<{
+    children?: React.ReactNode;
+}>;
+/**
+ * FlushedChunksProps interface.
+ * This interface represents the properties of the FlushedChunks component.
+ *
+ * @interface
+ * @property {string[]} chunks - The chunks to be flushed.
+ */
+export interface FlushedChunksProps {
+    chunks: string[];
+}

package/utils/flushedChunks.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlushedChunks = void 0;
+const React = __importStar(require("react"));
+/**
+ * FlushedChunks component.
+ * This component creates script and link elements for each chunk.
+ *
+ * @param {FlushedChunksProps} props - The properties of the component.
+ * @param {string[]} props.chunks - The chunks to be flushed.
+ * @returns {React.ReactElement} The created script and link elements.
+ */
+const FlushedChunks = ({ chunks = [] }) => {
+    const scripts = chunks
+        .filter((c) => {
+        // TODO: host shouldnt flush its own remote out
+        // if(c.includes('?')) {
+        //   return c.split('?')[0].endsWith('.js')
+        // }
+        return c.endsWith('.js');
+    })
+        .map((chunk) => {
+        if (!chunk.includes('?') && chunk.includes('remoteEntry')) {
+            chunk = chunk + '?t=' + Date.now();
+        }
+        return React.createElement('script', {
+            key: chunk,
+            src: chunk,
+            async: true,
+        }, null);
+    });
+    const css = chunks
+        .filter((c) => c.endsWith('.css'))
+        .map((chunk) => {
+        return React.createElement('link', {
+            key: chunk,
+            href: chunk,
+            rel: 'stylesheet',
+        }, null);
+    });
+    return React.createElement(React.Fragment, null, css, scripts);
+};
+exports.FlushedChunks = FlushedChunks;
+//# sourceMappingURL=flushedChunks.js.map

package/utils/flushedChunks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flushedChunks.js","sourceRoot":"","sources":["../../../../packages/nextjs-mf/utils/flushedChunks.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B;;;;;;;GAOG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,GAAG,EAAE,EAAsB,EAAE,EAAE;IACnE,MAAM,OAAO,GAAG,MAAM;SACnB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;QACZ,+CAA+C;QAC/C,wBAAwB;QACxB,2CAA2C;QAC3C,IAAI;QACJ,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YACzD,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;SACpC;QACD,OAAO,KAAK,CAAC,aAAa,CACxB,QAAQ,EACR;YACE,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,IAAI;SACZ,EACD,IAAI,CACL,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,MAAM,GAAG,GAAG,MAAM;SACf,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACjC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACb,OAAO,KAAK,CAAC,aAAa,CACxB,MAAM,EACN;YACE,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,YAAY;SAClB,EACD,IAAI,CACL,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;AACjE,CAAC,CAAC;AAvCW,QAAA,aAAa,iBAuCxB"}

package/utils/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Extracts the URL and global from the module federation utilities.
+ * @module @module-federation/utilities/src/utils/pure
+ */
+export { extractUrlAndGlobal } from '@module-federation/utilities/src/utils/pure';
+/**
+ * Injects a script from the module federation utilities.
+ * @module @module-federation/utilities/src/utils/common
+ */
+export { injectScript } from '@module-federation/utilities/src/utils/common';
+/**
+ * Flushes chunks from the module federation node utilities.
+ * @module @module-federation/node/utils
+ */
+export { flushChunks } from '@module-federation/node/utils';
+/**
+ * Exports the FlushedChunks component from the current directory.
+ */
+export { FlushedChunks } from './flushedChunks';
+/**
+ * Exports the FlushedChunksProps type from the current directory.
+ */
+export type { FlushedChunksProps } from './flushedChunks';
+/**
+ * Revalidates the current state.
+ * If the function is called on the client side, it logs an error and returns a resolved promise with false.
+ * If the function is called on the server side, it imports the revalidate function from the module federation node utilities and returns the result of calling that function.
+ * @returns {Promise<boolean>} A promise that resolves with a boolean.
+ */
+export declare const revalidate: () => Promise<boolean>;

package/utils/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.revalidate = exports.FlushedChunks = exports.flushChunks = exports.injectScript = exports.extractUrlAndGlobal = void 0;
+/**
+ * Extracts the URL and global from the module federation utilities.
+ * @module @module-federation/utilities/src/utils/pure
+ */
+var pure_1 = require("@module-federation/utilities/src/utils/pure");
+Object.defineProperty(exports, "extractUrlAndGlobal", { enumerable: true, get: function () { return pure_1.extractUrlAndGlobal; } });
+/**
+ * Injects a script from the module federation utilities.
+ * @module @module-federation/utilities/src/utils/common
+ */
+var common_1 = require("@module-federation/utilities/src/utils/common");
+Object.defineProperty(exports, "injectScript", { enumerable: true, get: function () { return common_1.injectScript; } });
+/**
+ * Flushes chunks from the module federation node utilities.
+ * @module @module-federation/node/utils
+ */
+// @ts-ignore
+var utils_1 = require("@module-federation/node/utils");
+Object.defineProperty(exports, "flushChunks", { enumerable: true, get: function () { return utils_1.flushChunks; } });
+/**
+ * Exports the FlushedChunks component from the current directory.
+ */
+var flushedChunks_1 = require("./flushedChunks");
+Object.defineProperty(exports, "FlushedChunks", { enumerable: true, get: function () { return flushedChunks_1.FlushedChunks; } });
+/**
+ * Revalidates the current state.
+ * If the function is called on the client side, it logs an error and returns a resolved promise with false.
+ * If the function is called on the server side, it imports the revalidate function from the module federation node utilities and returns the result of calling that function.
+ * @returns {Promise<boolean>} A promise that resolves with a boolean.
+ */
+const revalidate = () => {
+    if (typeof window !== 'undefined') {
+        console.error('revalidate should only be called server-side');
+        return Promise.resolve(false);
+    }
+    // @ts-ignore
+    return Promise.resolve().then(() => __importStar(require('@module-federation/node/utils'))).then((utils) => {
+        return utils.revalidate();
+    });
+};
+exports.revalidate = revalidate;
+//# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/nextjs-mf/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;GAGG;AACH,oEAAkF;AAAzE,2GAAA,mBAAmB,OAAA;AAE5B;;;GAGG;AACH,wEAA6E;AAApE,sGAAA,YAAY,OAAA;AAErB;;;GAGG;AACH,aAAa;AACb,uDAA4D;AAAnD,oGAAA,WAAW,OAAA;AAEpB;;GAEG;AACH,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AAOtB;;;;;GAKG;AACI,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,CAAC,KAAK,CAAC,8CAA8C,CAAC,CAAC;QAC9D,OAAO,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC/B;IACD,aAAa;IACb,OAAO,kDAAO,+BAA+B,IAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5D,OAAO,KAAK,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AATW,QAAA,UAAU,cASrB"}