初始化3.0.0版本

km-console/packages/layout-clusters-fe/config/registerApps.js

@@ -0,0 +1,154 @@
+import * as singleSpa from 'single-spa';
+
+const customProps = {
+  env: {
+    NODE_ENV: process.env.NODE_ENV,
+  },
+};
+
+function fetchManifest(url, publicPath) {
+  return fetch(url)
+    .then((res) => {
+      return res.text();
+    })
+    .then((data) => {
+      if (data) {
+        const manifest = data.match(/<meta name="manifest" content="([\w|\d|-]+.json)">/);
+        let result = '';
+        if (publicPath && manifest) {
+          result = `${publicPath}${manifest[1]}?q=${new Date().getTime()}`;
+        }
+        return result;
+      }
+    });
+}
+
+function prefix(location, ident, matchPath) {
+  if (matchPath && Object.prototype.toString.call(matchPath) === '[object Function]') {
+    return matchPath(location);
+  }
+  if (location.href === `${location.origin}/${ident}`) {
+    return true;
+  }
+  return location.href.indexOf(`${location.origin}/${ident}`) !== -1;
+}
+
+function getStylesheetLink(ident) {
+  return document.getElementById(`${ident}-stylesheet`);
+}
+
+function createStylesheetLink(ident, path) {
+  const headEle = document.getElementsByTagName('head')[0];
+  const linkEle = document.createElement('link');
+  linkEle.id = `${ident}-stylesheet`;
+  linkEle.rel = 'stylesheet';
+  // linkEle.href = systemConf[process.env.NODE_ENV].css;
+  linkEle.href = path;
+  headEle.appendChild(linkEle);
+}
+
+function removeStylesheetLink(ident) {
+  const linkEle = getStylesheetLink(ident);
+  if (linkEle) linkEle.remove();
+}
+
+async function getPathBySuffix(systemConf, jsonData, suffix) {
+  let targetPath = '';
+  _.forEach(Object.values(jsonData.assetsByChunkName), (assetsArr) => {
+    if (typeof assetsArr === 'string' && assetsArr.indexOf(systemConf.ident) === 0 && _.endsWith(assetsArr, suffix)) {
+      targetPath = assetsArr;
+    }
+    if (Array.isArray(assetsArr)) {
+      targetPath = assetsArr.find((assetStr) => {
+        return assetStr.indexOf(systemConf.ident) === 0 && _.endsWith(assetStr, suffix);
+      });
+      if (targetPath) {
+        return false;
+      }
+    }
+  });
+  return `${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`;
+}
+
+async function loadAssertsFileBySuffix(systemConf, jsonData, suffix) {
+  const chunks = Object.values(jsonData.assetsByChunkName);
+  const isJS = /js$/.test(suffix);
+  await Promise.all(
+    chunks.map(async (assetsArr) => {
+      let targetPath = '';
+      if (typeof assetsArr === 'string') {
+        targetPath = assetsArr;
+      } else if (Array.isArray(assetsArr)) {
+        targetPath = assetsArr.find((assetStr) => {
+          if (isJS) {
+            return assetStr.indexOf(systemConf.ident) < 0 && _.endsWith(assetStr, suffix);
+          } else {
+            return _.endsWith(assetStr, suffix);
+          }
+        });
+      }
+      if (!targetPath) return Promise.resolve();
+      if (isJS) {
+        return System.import(`${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`);
+      } else {
+        return createStylesheetLink(systemConf.ident, `${systemConf[process.env.NODE_ENV].publicPath}${targetPath}`);
+      }
+    })
+  );
+}
+
+export default function registerApps(systemsConfig, props = {}, mountCbk) {
+  systemsConfig.forEach(async (systemsConfItem) => {
+    const { ident, matchPath } = systemsConfItem;
+    const sysUrl = systemsConfItem[process.env.NODE_ENV].index;
+
+    singleSpa.registerApplication(
+      ident,
+      async () => {
+        let manifestUrl = `${sysUrl}?q=${new Date().getTime()}`;
+
+        // html 作为入口文件
+        if (/.+html$/.test(sysUrl)) {
+          manifestUrl = await fetchManifest(sysUrl, systemsConfItem[process.env.NODE_ENV].publicPath);
+        }
+
+        const lifecyclesFile = await fetch(manifestUrl).then((res) => res.json());
+        let lifecycles = {};
+        if (lifecyclesFile) {
+          await loadAssertsFileBySuffix(systemsConfItem, lifecyclesFile, '.js');
+          const jsPath = await getPathBySuffix(systemsConfItem, lifecyclesFile, '.js');
+          lifecycles = await System.import(jsPath);
+        } else {
+          lifecycles = lifecyclesFile;
+        }
+        const { mount, unmount } = lifecycles;
+        mount.unshift(async () => {
+          if (lifecyclesFile) {
+            await loadAssertsFileBySuffix(systemsConfItem, lifecyclesFile, '.css');
+            // const cssPath = await getPathBySuffix(systemsConfItem, lifecyclesFile, '.css');
+            // createStylesheetLink(ident, cssPath);
+          }
+          return Promise.resolve();
+        });
+
+        if (mountCbk) {
+          mount.unshift(async () => {
+            mountCbk();
+            return Promise.resolve();
+          });
+        }
+        unmount.unshift(() => {
+          removeStylesheetLink(ident);
+          return Promise.resolve();
+        });
+        return lifecycles;
+      },
+      (location) => prefix(location, ident, matchPath),
+      {
+        ...customProps,
+        ...props,
+      }
+    );
+  });
+  singleSpa.start();
+}