chayns-api 1.0.1 → 1.0.2

package/dist/esm/host/iframe/utils/useUpdateData.js

@@ -1,16 +1,14 @@
 import { useEffect } from 'react';
-
-var useUpdateData = function useUpdateData(target, type, value) {
-  useEffect(function () {
+const useUpdateData = (target, type, value) => {
+  useEffect(() => {
     if (target) {
       target.dispatchEvent(new CustomEvent('data_update', {
         detail: {
-          type: type,
-          value: value
+          type,
+          value
         }
       }));
     }
   }, [target, type, value]);
 };
-
 export default useUpdateData;

package/dist/esm/host/module/ModuleHost.js

@@ -1,71 +1,65 @@
-var _excluded = ["system", "fallback"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useMemo } from 'react';
 import useDynamicScript from './utils/useDynamicScript';
 import loadComponent from './utils/loadComponent';
-
-var System = function System(_ref) {
-  var system = _ref.system,
-      fallback = _ref.fallback,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useDynamicScript = useDynamicScript({
+const System = _ref => {
+  let {
+    system,
+    fallback,
+    ...props
+  } = _ref;
+  const {
+    ready,
+    failed
+  } = useDynamicScript({
     url: system === null || system === void 0 ? void 0 : system.url,
     scope: system === null || system === void 0 ? void 0 : system.scope
-  }),
-      ready = _useDynamicScript.ready,
-      failed = _useDynamicScript.failed;
-
-  var Component = useMemo(function () {
+  });
+  const Component = useMemo(() => {
     // maybe return waitcursor instead
     if (!system || !ready || failed) {
       return null;
     }
-
     return /*#__PURE__*/React.lazy(loadComponent(system.scope, system.module, system.url));
+
     /* eslint-disable react-hooks/exhaustive-deps */
   }, [system === null || system === void 0 ? void 0 : system.scope, ready, system === null || system === void 0 ? void 0 : system.url]);
   return Component ? /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: fallback || ''
   }, /*#__PURE__*/React.createElement(Component, props)) : fallback;
 };
-
-var ModuleHost = function ModuleHost(_ref2) {
-  var system = _ref2.system,
-      _ref2$children = _ref2.children,
-      children = _ref2$children === void 0 ? null : _ref2$children,
-      functions = _ref2.functions,
-      pages = _ref2.pages,
-      isAdminModeActive = _ref2.isAdminModeActive,
-      site = _ref2.site,
-      user = _ref2.user,
-      currentPage = _ref2.currentPage,
-      device = _ref2.device,
-      language = _ref2.language,
-      parameters = _ref2.parameters,
-      customData = _ref2.customData,
-      environment = _ref2.environment;
+const ModuleHost = _ref2 => {
+  let {
+    system,
+    children = null,
+    functions,
+    // shallow data
+    pages,
+    isAdminModeActive,
+    site,
+    user,
+    currentPage,
+    device,
+    language,
+    parameters,
+    customData,
+    environment
+  } = _ref2;
   // region initialData
-  var initialData = {
-    site: site,
-    isAdminModeActive: isAdminModeActive,
-    pages: pages,
-    currentPage: currentPage,
-    device: device,
-    language: language,
-    parameters: parameters,
-    customData: customData,
-    environment: environment
+  const initialData = {
+    site,
+    isAdminModeActive,
+    pages,
+    currentPage,
+    device,
+    language,
+    parameters,
+    customData,
+    environment
   };
-
   if (user) {
     initialData.user = user;
-  } // endregion
-
+  }
+  // endregion
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "module-css"
@@ -77,5 +71,4 @@ var ModuleHost = function ModuleHost(_ref2) {
     isModule: true
   }));
 };
-
 export default ModuleHost;

package/dist/esm/host/module/PagemakerFrame.js

@@ -0,0 +1,97 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { useEffect, useRef } from 'react';
+import * as comlink from 'comlink';
+import useUpdateData from "../iframe/utils/useUpdateData";
+
+var PagemakerFrame = function PagemakerFrame(_ref) {
+  var iFrameProps = _ref.iFrameProps,
+      _ref$postForm = _ref.postForm,
+      postForm = _ref$postForm === void 0 ? false : _ref$postForm,
+      children = _ref.children,
+      iFrameRef = _ref.iFrameRef,
+      pages = _ref.pages,
+      isAdminModeActive = _ref.isAdminModeActive,
+      site = _ref.site,
+      user = _ref.user,
+      currentPage = _ref.currentPage,
+      functions = _ref.functions,
+      device = _ref.device,
+      language = _ref.language,
+      parameters = _ref.parameters,
+      environment = _ref.environment;
+  var eventTarget = useRef();
+  var ref = useRef();
+  var currentDataRef = useRef();
+
+  if (!eventTarget.current) {
+    eventTarget.current = global.document ? document.createElement('div') : undefined; // global.EventTarget ? new EventTarget() : undefined
+  }
+
+  var setHeight = function setHeight(value) {
+    if (ref.current) {
+      ref.current.height = "".concat(value, "px");
+    }
+  }; // region initialData
+
+
+  var initialData = {
+    site: site,
+    isAdminModeActive: isAdminModeActive,
+    pages: pages,
+    currentPage: currentPage,
+    device: device,
+    user: user,
+    language: language,
+    parameters: parameters,
+    environment: environment
+  }; // endregion
+
+  currentDataRef.current = initialData;
+  console.debug('functions', functions); // region expose data and functions to iframe
+
+  useEffect(function () {
+    var _ref$current;
+
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contentWindow) {
+      var obj = _defineProperty({}, iFrameProps.name, {
+        functions: _objectSpread(_objectSpread({}, functions), {}, {
+          setHeight: setHeight
+        }),
+        addDataListener: function addDataListener(cb) {
+          if (eventTarget.current) eventTarget.current.addEventListener('data_update', function (e) {
+            return e.detail && cb(e.detail);
+          });
+        },
+        getInitialData: function getInitialData() {
+          return currentDataRef.current;
+        }
+      });
+
+      comlink.expose(obj, comlink.windowEndpoint(ref.current.contentWindow));
+      ref.current.contentWindow.postMessage('chayns-api-host-ready', '*'); // https://github.com/GoogleChromeLabs/comlink/pull/469 might be better approach once released
+
+      return function () {
+        delete obj[iFrameProps.name];
+      };
+    }
+
+    return undefined; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // endregion
+  // region dispatch data update
+
+  useUpdateData(eventTarget.current, 'isAdminModeActive', isAdminModeActive);
+  useUpdateData(eventTarget.current, 'user', user);
+  useUpdateData(eventTarget.current, 'site', site);
+  useUpdateData(eventTarget.current, 'pages', pages);
+  useUpdateData(eventTarget.current, 'language', language);
+  useUpdateData(eventTarget.current, 'parameters', parameters); // endregion
+
+  return children;
+};
+
+export default PagemakerFrame;

package/dist/esm/host/module/utils/loadComponent.js

@@ -1,93 +1,55 @@
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 /* eslint-disable */
 // @ts-nocheck
+
 import semver from 'semver';
 import React from 'react';
 import { semaphore } from './useDynamicScript';
-var instances = {};
+let instances = {};
 export default function loadComponent(scope, module, url) {
-  var skipCompatMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _window$find, container, factory, ModuleMap, Module, newModule, hostVersion, _Module$default, requiredVersion, environment, matchReactVersion;
-
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return __webpack_init_sharing__('default');
-
-          case 2:
-            _window$find = window[scope + "_list"].find(function (x) {
-              return x.url === url;
-            }), container = _window$find.container; // or get the container somewhere else
-            // Initialize the container, it may provide shared modules
-            // eslint-disable-next-line no-undef
-
-            _context.next = 5;
-            return container.init(__webpack_share_scopes__.default);
-
-          case 5:
-            _context.next = 7;
-            return container.get(module);
-
-          case 7:
-            factory = _context.sent;
-            semaphore[scope].release();
-            ModuleMap = instances["".concat(scope, "__").concat(module)];
-
-            if (!ModuleMap) {
-              ModuleMap = {};
-              instances["".concat(scope, "__").concat(module)] = ModuleMap;
-            }
-
-            if (Object.keys(ModuleMap).length > 0) {
-              newModule = factory();
-              Module = ModuleMap["".concat(newModule.default.buildEnv, "__").concat(newModule.default.appVersion)];
-
-              if (!Module) {
-                Module = newModule;
-                ModuleMap["".concat(newModule.default.buildEnv, "__").concat(newModule.default.appVersion)] = newModule;
-              }
-            } else {
-              Module = factory();
-              ModuleMap["".concat(Module.default.buildEnv, "__").concat(Module.default.appVersion)] = Module;
-            }
-
-            if (!skipCompatMode) {
-              _context.next = 14;
-              break;
-            }
-
-            return _context.abrupt("return", Module);
-
-          case 14:
-            hostVersion = semver.minVersion(React.version);
-            _Module$default = Module.default, requiredVersion = _Module$default.requiredVersion, environment = _Module$default.environment;
-            matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion);
-
-            if (!(!matchReactVersion || environment !== 'production')) {
-              _context.next = 19;
-              break;
-            }
-
-            return _context.abrupt("return", {
-              default: Module.default.CompatComponent
-            });
-
-          case 19:
-            return _context.abrupt("return", {
-              default: Module.default.Component
-            });
-
-          case 20:
-          case "end":
-            return _context.stop();
-        }
+  let skipCompatMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return async () => {
+    // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
+    // eslint-disable-next-line no-undef
+    await __webpack_init_sharing__('default');
+    const {
+      container
+    } = window[scope + "_list"].find(x => x.url === url); // or get the container somewhere else
+    // Initialize the container, it may provide shared modules
+    // eslint-disable-next-line no-undef
+    await container.init(__webpack_share_scopes__.default);
+    const factory = await container.get(module);
+    semaphore[scope].release();
+    let ModuleMap = instances[`${scope}__${module}`];
+    let Module;
+    if (!ModuleMap) {
+      ModuleMap = {};
+      instances[`${scope}__${module}`] = ModuleMap;
+    }
+    if (Object.keys(ModuleMap).length > 0) {
+      const newModule = factory();
+      Module = ModuleMap[`${newModule.default.buildEnv}__${newModule.default.appVersion}`];
+      if (!Module) {
+        Module = newModule;
+        ModuleMap[`${newModule.default.buildEnv}__${newModule.default.appVersion}`] = newModule;
       }
-    }, _callee);
-  }));
+    } else {
+      Module = factory();
+      ModuleMap[`${Module.default.buildEnv}__${Module.default.appVersion}`] = Module;
+    }
+    if (skipCompatMode) return Module;
+    const hostVersion = semver.minVersion(React.version);
+    const {
+      requiredVersion,
+      environment
+    } = Module.default;
+    const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion);
+    if (!matchReactVersion || environment !== 'production') {
+      return {
+        default: Module.default.CompatComponent
+      };
+    }
+    return {
+      default: Module.default.Component
+    };
+  };
 }

package/dist/esm/host/module/utils/useDynamicScript.js

@@ -1,97 +1,50 @@
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import React, { useEffect } from 'react';
 import Semaphore from 'semaphore-async-await';
-export var semaphore = {};
-
-var useDynamicScript = function useDynamicScript(args) {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      ready = _React$useState2[0],
-      setReady = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      failed = _React$useState4[0],
-      setFailed = _React$useState4[1];
-
-  useEffect(function () {
+export const semaphore = {};
+const useDynamicScript = args => {
+  const [ready, setReady] = React.useState(false);
+  const [failed, setFailed] = React.useState(false);
+  useEffect(() => {
     if (!args.url) {
       return undefined;
     }
-
-    var element = document.createElement('script');
+    const element = document.createElement('script');
     element.src = args.url;
     element.type = 'text/javascript';
     element.async = true;
     setReady(false);
     setFailed(false);
-
     if (!(args.scope in semaphore)) {
       semaphore[args.scope] = new Semaphore(1);
     }
-
-    _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return semaphore[args.scope].acquire();
-
-            case 2:
-              element.onload = function () {
-                setReady(true);
-                var listKey = args.scope + "_list";
-                if (!window[listKey]) window[listKey] = [];
-                window[listKey].push({
-                  url: args.url,
-                  container: window[args.scope]
-                });
-                window[args.scope] = null;
-              };
-
-              element.onerror = function () {
-                setReady(false);
-                setFailed(true);
-              };
-
-              document.head.appendChild(element);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }))();
-
-    return function () {
+    (async () => {
+      await semaphore[args.scope].acquire();
+      element.onload = () => {
+        setReady(true);
+        const listKey = args.scope + "_list";
+        if (!window[listKey]) window[listKey] = [];
+        window[listKey].push({
+          url: args.url,
+          container: window[args.scope]
+        });
+        window[args.scope] = null;
+      };
+      element.onerror = () => {
+        setReady(false);
+        setFailed(true);
+      };
+      document.head.appendChild(element);
+    })();
+    return () => {
       semaphore[args.scope].release();
-
       if (document.head.contains(element)) {
         document.head.removeChild(element);
       }
     };
   }, [args.url]);
   return {
-    ready: ready,
-    failed: failed
+    ready,
+    failed
   };
 };
-
 export default useDynamicScript;