@vanillabp/bc-ui 0.0.3

package/dist/utils/module-federation.js

@@ -0,0 +1,182 @@
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { useEffect, useState } from "react";
+var UiUriType = /* @__PURE__ */ ((UiUriType2) => {
+  UiUriType2["External"] = "EXTERNAL";
+  UiUriType2["WebpackMfReact"] = "WEBPACK_MF_REACT";
+  return UiUriType2;
+})(UiUriType || {});
+;
+;
+;
+;
+;
+const modules = {};
+const attachScript = (webpackModuleId, url) => {
+  const elementId = "___" + webpackModuleId;
+  const existingElement = document.getElementById(elementId);
+  if (existingElement) {
+    if (window[webpackModuleId])
+      return Promise.resolve(true);
+    return Promise.reject(`Failed in previous attempt: ${webpackModuleId}`);
+  }
+  const element = document.createElement("script");
+  element.src = url;
+  element.type = "text/javascript";
+  element.async = true;
+  element.id = elementId;
+  const scriptLoadPromise = new Promise(
+    (resolve, reject) => {
+      element.onload = () => resolve(element);
+      element.onerror = (e) => {
+        reject(e);
+      };
+    }
+  );
+  document.head.appendChild(element);
+  return scriptLoadPromise;
+};
+const detachScript = (webpackModuleId) => {
+  const element = document.getElementById("___" + webpackModuleId);
+  if (element)
+    document.head.removeChild(element);
+};
+const fetchModule = (workflowModuleId, uiUri, initialTry, useCase) => __async(void 0, null, function* () {
+  const webpackModuleId = workflowModuleId.replaceAll("-", "_");
+  if (!initialTry) {
+    detachScript(webpackModuleId);
+  }
+  let container = window[webpackModuleId];
+  if (container === void 0) {
+    yield attachScript(webpackModuleId, uiUri);
+    yield __webpack_init_sharing__("default");
+    container = window[webpackModuleId];
+  }
+  if (!container.isInitialized) {
+    container.isInitialized = true;
+    yield container.init(__webpack_share_scopes__.default);
+  } else if (!("isInitialized" in container)) {
+    throw new Error(`Failed in last attempt: ${webpackModuleId}`);
+  }
+  const factory = yield window[webpackModuleId].get(useCase);
+  return factory();
+});
+const loadModule = (moduleId, moduleDefinition, useCase) => {
+  const callbacks = [];
+  let module = modules[moduleId];
+  if (module === void 0) {
+    module = { moduleId, workflowModuleId: moduleDefinition.workflowModuleId };
+    modules[moduleId] = module;
+  }
+  const publish = () => callbacks.forEach((callback) => callback(modules[moduleId]));
+  const retry = (retryCallback, initialTry) => __async(void 0, null, function* () {
+    if (module.buildTimestamp !== void 0)
+      return;
+    try {
+      if (moduleDefinition.uiUriType === "WEBPACK_MF_REACT" /* WebpackMfReact */) {
+        const webpackModule = yield fetchModule(moduleDefinition.workflowModuleId, moduleDefinition.uiUri, initialTry || false, useCase);
+        modules[moduleId] = __spreadValues(__spreadValues({}, webpackModule), module);
+      } else {
+        throw new Error(`Unsupported UiUriType: ${moduleDefinition.uiUriType}!`);
+      }
+    } catch (error) {
+      modules[moduleId] = __spreadProps(__spreadValues({}, module), {
+        retry
+      });
+    } finally {
+      publish();
+      if (retryCallback) {
+        retryCallback();
+      }
+    }
+  });
+  const subscribe = (callback) => {
+    if (callbacks.includes(callback))
+      return;
+    callbacks.push(callback);
+  };
+  const unsubscribe = (callback) => {
+    const index = callbacks.indexOf(callback);
+    if (index === -1)
+      return;
+    callbacks.splice(index, 1);
+  };
+  retry(void 0, true);
+  return { subscribe, unsubscribe };
+};
+const getModule = (moduleId, moduleDefinition, useCase) => {
+  let result = modules[moduleId];
+  if (result !== void 0) {
+    return {
+      subscribe: (handler) => handler(result),
+      unsubscribe: (handler) => {
+      }
+    };
+  }
+  return loadModule(moduleId, moduleDefinition, useCase);
+};
+const useFederationModule = (moduleDefinition, useCase) => {
+  const moduleId = moduleDefinition !== void 0 ? `${moduleDefinition.workflowModuleId}#${useCase}` : "undefined";
+  const [module, setModule] = useState(modules[moduleId]);
+  useEffect(() => {
+    if (moduleDefinition === void 0) {
+      return void 0;
+    }
+    const { subscribe, unsubscribe } = getModule(moduleId, moduleDefinition, useCase);
+    const handler = (loadedModule) => setModule(loadedModule);
+    subscribe(handler);
+    return () => unsubscribe(handler);
+  }, [setModule, moduleDefinition, useCase]);
+  return module;
+};
+const useFederationModules = (moduleDefinitions, useCase) => {
+  const [modules2, setModules] = useState(void 0);
+  useEffect(() => {
+    if (moduleDefinitions === void 0) {
+      return;
+    }
+    if (moduleDefinitions.length === 0) {
+      setModules([]);
+      return;
+    }
+    const distinctModuleDefinitions = moduleDefinitions.reduce(
+      (moduleIds, userTask) => moduleIds.includes(userTask.workflowModuleId) ? moduleIds : moduleIds.concat(userTask.workflowModuleId),
+      new Array()
+    ).map((moduleId) => moduleDefinitions.find((moduleDefinition) => moduleDefinition.workflowModuleId === moduleId));
+    const result = [];
+    distinctModuleDefinitions.forEach((moduleDefinition, i) => {
+      result[i] = {
+        moduleId: `${moduleDefinition.workflowModuleId}#${useCase}`,
+        workflowModuleId: moduleDefinition.workflowModuleId
+      };
+    });
+    const unsubscribers = distinctModuleDefinitions.map((moduleDefinition, index) => {
+      const { subscribe, unsubscribe } = getModule(result[index].moduleId, moduleDefinition, useCase);
+      const handler = (loadedModule) => {
+        result[index] = loadedModule;
+        const anyModuleStillLoading = result.reduce(
+          (anyModuleStillLoading2, module) => anyModuleStillLoading2 || module === void 0 || module.buildTimestamp === void 0 && module.retry === void 0,
+          false
+        );
+        if (anyModuleStillLoading) {
+          return;
+        }
+        setModules(result);
+      };
+      subscribe(handler);
+      return () => unsubscribe(handler);
+    });
+    return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+  }, [moduleDefinitions, useCase, setModules]);
+  return modules2;
+};
+export {
+  UiUriType,
+  attachScript,
+  detachScript,
+  useFederationModule,
+  useFederationModules
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@vanillabp/bc-ui",
+  "version": "0.0.3",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vanillabp/business-cockpit.git"
+  },
+  "homepage": "https://github.com/vanillabp/business-cockpit",
+  "sideEffects": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "dependencies": {
+    "@vanillabp/bc-official-gui-client": "0.0.3",
+    "@vanillabp/bc-shared": "0.0.3"
+  },
+  "peerDependencies": {
+    "@fontsource/roboto": "4.5.8",
+    "grommet": "2.33.2",
+    "grommet-icons": "4.10.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-jsx": "1.0.0",
+    "styled-components": "5.3.3"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.21.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.4",
+    "@storybook/addon-essentials": "7.0.6",
+    "@storybook/addon-interactions": "7.0.6",
+    "@storybook/addon-links": "7.0.6",
+    "@storybook/blocks": "7.0.6",
+    "@storybook/react": "7.0.6",
+    "@storybook/react-webpack5": "7.0.6",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@types/node": "16.18.23",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "@types/styled-components": "5.1.24",
+    "@types/web": "0.0.61",
+    "cross-env": "7.0.3",
+    "http-proxy-middleware": "2.0.6",
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "7.0.6",
+    "tsup": "6.7.0",
+    "typescript": "4.8.4"
+  },
+  "scripts": {
+    "storybook": "echo 'Run with sudo on Linux for HMR!' && storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "start": "tsup --watch",
+    "build": "tsup",
+    "unpublish:snapshot": "npm unpublish --force",
+    "publish:snapshot": "npm publish --tag snapshot",
+    "version:snapshot": "npm version ${npm_config_newversion} --no-git-tag-version",
+    "publish:release": "npm publish --access public"
+  }
+}