Next support

dashboard-plugin/README.md

@@ -17,8 +17,8 @@ const DashboardPlugin = require("@module-federation/dashboard-plugin");
 ```js
 plugins: [
   ...new DashboardPlugin({
-    dashboardURL: "https://api.medusa.codes/update?token=writeToken",
-  }),
+    dashboardURL: "https://api.medusa.codes/update?token=writeToken"
+  })
 ];
 ```
 
@@ -46,12 +46,14 @@ plugins: [
   ...new DashboardPlugin({
     dashboardURL: "https://api.medusa.codes/update?token=writeToken",
     metadata: {
+     // baseurl is needed in order for medusa to know where to find the remoteEntry.js file
+      baseUrl: 'http://localhost:3001/assets/',
       source: {
-        url: "http://github.com/myorg/myproject/tree/master",
+        url: "http://github.com/myorg/myproject/tree/master"
       },
-      remote: "http://localhost:8081/remoteEntry.js",
-    },
-  }),
+      remote: "http://localhost:8081/remoteEntry.js"
+    }
+  })
 ];
 ```
 
@@ -100,28 +102,28 @@ module.exports = withPlugins(
           lodash: {
             import: "lodash",
             requiredVersion: require("lodash").version,
-            singleton: true,
+            singleton: true
           },
           chakra: {
             shareKey: "@chakra-ui/react",
-            import: "@chakra-ui/react",
+            import: "@chakra-ui/react"
           },
           "use-sse": {
             singleton: true,
-            requiredVersion: false,
-          },
-        },
+            requiredVersion: false
+          }
+        }
       },
       {
         experiments: {
           flushChunks: true,
-          hot: true,
-        },
+          hot: true
+        }
       }
     ),
     withMedusa({
       name: "home",
-      
+
       publishVersion: require("./package.json").version,
       filename: "dashboard.json",
       dashboardURL: `https://api.medusa.codes/update?token=${process.env.DASHBOARD_WRITE_TOKEN}`,
@@ -131,13 +133,14 @@ module.exports = withPlugins(
           ? "https://" + process.env.VERCEL_URL
           : "http://localhost:3001",
         source: {
-          url: "https://github.com/module-federation/federation-dashboard/tree/master/dashboard-example/home",
+          url:
+            "https://github.com/module-federation/federation-dashboard/tree/master/dashboard-example/home"
         },
         remote: process.env.VERCEL_URL
           ? "https://" + process.env.VERCEL_URL + "/remoteEntry.js"
-          : "http://localhost:3001/remoteEntry.js",
-      },
-    }),
+          : "http://localhost:3001/remoteEntry.js"
+      }
+    })
   ],
   nextConfig
 );

dashboard-plugin/client-version.js

@@ -1,4 +1,4 @@
-module.exports = ({ currentHost, remoteName, dashboardURL }) => {
+module.exports = ({ currentHost, remoteName, dashboardURL, remoteBasePath }) => {
   //language=JS
   return `promise new Promise((resolve, reject) => {
     fetch("${dashboardURL}&currentHost=${currentHost}&remoteName=${remoteName}", {
@@ -13,8 +13,9 @@ module.exports = ({ currentHost, remoteName, dashboardURL }) => {
       .then(function (data) {
         var name = data.name + "_" + data.version;
         var filename = data.version + '.remoteEntry.js';
-        var url = new URL(filename, data.remoteURL)
-
+        var path = \`${remoteBasePath}/\${filename}\`.replace(/\\/\\/+/g, '/');
+        var url = new URL(path, data.remoteURL);
+
         new Promise(function (resolve, reject) {
           var __webpack_error__ = new Error()
           if (typeof window[name] !== 'undefined') return resolve();

dashboard-plugin/convertToGraph.js

@@ -10,7 +10,7 @@ const fs = require("fs");
  */
 function getLicenses(packageJson) {
   if (packageJson.licenses && packageJson.licenses instanceof Array) {
-    return packageJson.licenses.map((license) => license.type).join(", ");
+    return packageJson.licenses.map(license => license.type).join(", ");
   } else if (packageJson.licenses) {
     // TODO: Refactor this to reduce duplicate code. Note "licenses" vs "license".
     return (
@@ -38,7 +38,7 @@ const convertToGraph = (
     group,
     functionRemotes,
     sha,
-    buildHash,
+    buildHash
   },
   standalone
 ) => {
@@ -53,22 +53,30 @@ const convertToGraph = (
   const modulesObj = {};
   const npmModules = new Map();
 
-  modules.forEach((mod) => {
+  modules.forEach(mod => {
     const { identifier, reasons, moduleType, nameForCondition, size } = mod;
     const data = identifier.split(" ");
 
     if (moduleType === "remote-module") {
       if (data.length === 4) {
         const name = data[3].replace("./", "");
-        let applicationID = data[2].replace("webpack/container/reference/", "")
-        if(applicationID.includes("?")){
-           applicationID = new URLSearchParams(applicationID.split('?')[1]).get('remoteName');
+        let applicationID = data[2].replace("webpack/container/reference/", "");
+        if (applicationID.includes("?")) {
+          const params = new URLSearchParams(applicationID.split("?")[1]);
+          const remoteReference =
+            params.get("remoteName") || params.get("remote");
+          if (remoteReference && remoteReference.includes("@")) {
+            const [global] = remoteReference.split("@");
+            applicationID = global;
+          } else {
+            applicationID = remoteReference;
+          }
         }
         const consume = {
           consumingApplicationID: name,
           applicationID,
           name,
-          usedIn: new Set(),
+          usedIn: new Set()
         };
 
         consumes.push(consume);
@@ -91,7 +99,7 @@ const convertToGraph = (
           name,
           applicationID: name,
           requires: new Set(),
-          file: file.import[0],
+          file: file.import[0]
         };
       });
     } else if (nameForCondition && nameForCondition.includes("node_modules")) {
@@ -105,35 +113,38 @@ const convertToGraph = (
       const npmModule = contextArray[contextArray.indexOf("node_modules") + 1];
 
       const packageJsonFile = path.join(context, "package.json");
-      const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, "UTF-8"));
+      // if the package.json file exists, we can use it to get the name and version
+      if(!fs.existsSync(packageJsonFile)) {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, "UTF-8"));
 
-      const existingPackage = npmModules.get(packageJson.name);
-      if (existingPackage) {
-        const existingReference = existingPackage[packageJson.version];
-        const data = {
-          name: packageJson.name,
-          version: packageJson.version,
-          homepage: packageJson.homepage,
-          license: getLicenses(packageJson),
-          size: ((existingReference && existingReference.size) || 0) + size,
-        };
-        if (existingReference) {
-          Object.assign(existingReference, data);
-        } else {
-          existingPackage[packageJson.version] = data;
-        }
-        npmModules.set(packageJson.name, existingPackage);
-      } else {
-        const newDep = {
-          [packageJson.version]: {
+        const existingPackage = npmModules.get(packageJson.name);
+        if (existingPackage) {
+          const existingReference = existingPackage[packageJson.version];
+          const data = {
             name: packageJson.name,
             version: packageJson.version,
             homepage: packageJson.homepage,
             license: getLicenses(packageJson),
-            size,
-          },
-        };
-        npmModules.set(packageJson.name, newDep);
+            size: ((existingReference && existingReference.size) || 0) + size
+          };
+          if (existingReference) {
+            Object.assign(existingReference, data);
+          } else {
+            existingPackage[packageJson.version] = data;
+          }
+          npmModules.set(packageJson.name, existingPackage);
+        } else {
+          const newDep = {
+            [packageJson.version]: {
+              name: packageJson.name,
+              version: packageJson.version,
+              homepage: packageJson.homepage,
+              license: getLicenses(packageJson),
+              size
+            }
+          };
+          npmModules.set(packageJson.name, newDep);
+        }
       }
     }
   });
@@ -144,30 +155,32 @@ const convertToGraph = (
 
       const versionVal = version.replace(`${name}-`, "");
       if (dataFromGraph) {
-        const foundInGraph = Object.values(dataFromGraph).find((depData) => depData.version.startsWith(versionVal));
+        const foundInGraph = Object.values(dataFromGraph).find(depData =>
+          depData.version.startsWith(versionVal)
+        );
 
         if (foundInGraph) {
           const { name, version, license, size } = foundInGraph;
           return {
             name,
             version,
             license,
-            size,
+            size
           };
         }
       }
       return {
         name,
-        version: versionVal,
+        version: versionVal
       };
     });
   const convertedDeps = {
     dependencies: convertDeps(topLevelPackage.dependencies),
     devDependencies: convertDeps(topLevelPackage.devDependencies),
-    optionalDependencies: convertDeps(topLevelPackage.optionalDependencies),
+    optionalDependencies: convertDeps(topLevelPackage.optionalDependencies)
   };
 
-  modules.forEach((mod) => {
+  modules.forEach(mod => {
     const { identifier, issuerName, reasons, moduleType } = mod;
 
     if (moduleType === "provide-module") {
@@ -203,8 +216,8 @@ const convertToGraph = (
         [
           convertedDeps.dependencies,
           convertedDeps.devDependencies,
-          convertedDeps.optionalDependencies,
-        ].forEach((deps) => {
+          convertedDeps.optionalDependencies
+        ].forEach(deps => {
           const dep = deps.find(({ name }) => name === data[2]);
           if (dep) {
             version = dep.version;
@@ -217,7 +230,7 @@ const convertToGraph = (
         name,
         version,
         location: name,
-        applicationID: name,
+        applicationID: name
       };
     }
 
@@ -251,8 +264,8 @@ const convertToGraph = (
       [
         convertedDeps.dependencies,
         convertedDeps.devDependencies,
-        convertedDeps.optionalDependencies,
-      ].forEach((deps) => {
+        convertedDeps.optionalDependencies
+      ].forEach(deps => {
         const dep = deps.find(({ name }) => name === data[2]);
         if (dep) {
           version = dep.version;
@@ -264,7 +277,7 @@ const convertToGraph = (
       name: data[2],
       version,
       location: data[2],
-      applicationID: name,
+      applicationID: name
     };
   });
 
@@ -275,10 +288,11 @@ const convertToGraph = (
         const cleanName = name.replace("./", "");
         const objectId = `${applicationID}/${cleanName}`;
         const cleanFile = file.replace("./", "");
-        const foundExistingConsume = consumes.find((consumeObj) => (
-          consumeObj.applicationID === applicationID &&
-          consumeObj.name === cleanName
-        ));
+        const foundExistingConsume = consumes.find(
+          consumeObj =>
+            consumeObj.applicationID === applicationID &&
+            consumeObj.name === cleanName
+        );
         if (foundExistingConsume) {
           foundExistingConsume.usedIn.add(cleanFile);
           return acc;
@@ -291,7 +305,7 @@ const convertToGraph = (
           applicationID,
           name: cleanName,
           consumingApplicationID: name,
-          usedIn: new Set([cleanFile]),
+          usedIn: new Set([cleanFile])
         };
         return acc;
       }, {})
@@ -310,23 +324,23 @@ const convertToGraph = (
     metadata,
     versionData,
     overrides: Object.values(overrides),
-    consumes: consumes.map((con) => ({
+    consumes: consumes.map(con => ({
       ...con,
-      usedIn: Array.from(con.usedIn.values()).map((file) => ({
+      usedIn: Array.from(con.usedIn.values()).map(file => ({
         file,
-        url: `${sourceUrl}/${file}`,
-      })),
+        url: `${sourceUrl}/${file}`
+      }))
     })),
-    modules: Object.values(modulesObj).map((mod) => ({
+    modules: Object.values(modulesObj).map(mod => ({
       ...mod,
-      requires: Array.from(mod.requires.values()),
+      requires: Array.from(mod.requires.values())
     })),
     environment,
     version,
     posted,
     group,
     sha,
-    buildHash,
+    buildHash
   };
 };
 

dashboard-plugin/medusa-client.d.ts

@@ -0,0 +1,28 @@
+declare module "medusa-client" {
+  type FetchClient = typeof fetch;
+  type Environment = string | undefined;
+
+  interface RemoteResponse {
+    // Define the shape of the response object here
+  }
+
+  type RemoteRequestOptions = {
+    fetchClient?: FetchClient;
+    environment?: Environment;
+    currentHost?: string;
+    remote: string;
+    token: string;
+    apiHost?: string;
+  };
+
+  function getRemote({
+    fetchClient,
+    environment,
+    currentHost,
+    remote,
+    token,
+    apiHost
+  }: RemoteRequestOptions): Promise<RemoteResponse>;
+
+  export default getRemote;
+}