chayns-api 1.0.0 → 1.0.1

package/dist/esm/hooks/useIsAdminMode.js

@@ -3,7 +3,11 @@ import { ChaynsContext } from '../components/ChaynsContext';
 /**
  * @category Hooks
  */
-export const useIsAdminMode = () => {
+
+export var useIsAdminMode = function useIsAdminMode() {
   var _useContextSelector;
-  return (_useContextSelector = useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.isAdminModeActive)) !== null && _useContextSelector !== void 0 ? _useContextSelector : false;
+
+  return (_useContextSelector = useContextSelector(ChaynsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.isAdminModeActive;
+  })) !== null && _useContextSelector !== void 0 ? _useContextSelector : false;
 };

package/dist/esm/hooks/useLanguage.js

@@ -1,6 +1,11 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
-export const useLanguage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.language);
+export var useLanguage = function useLanguage() {
+  return useContextSelector(ChaynsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.language;
+  });
+};

package/dist/esm/hooks/usePages.js

@@ -1,32 +1,45 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
-export const usePages = function () {
-  let {
-    siteId
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+export var usePages = function usePages() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     siteId: undefined
-  };
-  const pages = useContextSelector(ChaynsContext, v => v.pages);
+  },
+      siteId = _ref.siteId;
+
+  var pages = useContextSelector(ChaynsContext, function (v) {
+    return v.pages;
+  });
+
   if (siteId) {
-    pages.filter(tapp => tapp.siteId === siteId);
+    pages.filter(function (tapp) {
+      return tapp.siteId === siteId;
+    });
   }
+
   return pages;
 };
 /**
  * @category Hooks
  */
-export const usePage = _ref => {
-  let {
-    id,
-    siteId
-  } = _ref;
-  const pages = useContextSelector(ChaynsContext, v => v.pages);
+
+export var usePage = function usePage(_ref2) {
+  var id = _ref2.id,
+      siteId = _ref2.siteId;
+  var pages = useContextSelector(ChaynsContext, function (v) {
+    return v.pages;
+  });
+
   if (id) {
     var _pages$find;
-    return (_pages$find = pages.find(x => x.id === id && (!siteId || x.siteId === siteId))) !== null && _pages$find !== void 0 ? _pages$find : null;
+
+    return (_pages$find = pages.find(function (x) {
+      return x.id === id && (!siteId || x.siteId === siteId);
+    })) !== null && _pages$find !== void 0 ? _pages$find : null;
   }
+
   return null;
 };

package/dist/esm/hooks/useParameters.js

@@ -1,6 +1,11 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
-export const useParameters = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.parameters) || []);
+export var useParameters = function useParameters() {
+  return useContextSelector(ChaynsContext, function (v) {
+    return (v === null || v === void 0 ? void 0 : v.parameters) || [];
+  });
+};

package/dist/esm/hooks/useSite.js

@@ -1,6 +1,11 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
-export const useSite = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.site);
+export var useSite = function useSite() {
+  return useContextSelector(ChaynsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.site;
+  });
+};

package/dist/esm/hooks/useUser.js

@@ -1,7 +1,12 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
 // @ts-ignore
-export const useUser = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.user) || {});
+export var useUser = function useUser() {
+  return useContextSelector(ChaynsContext, function (v) {
+    return (v === null || v === void 0 ? void 0 : v.user) || {};
+  });
+};

package/dist/esm/hooks/useValues.js

@@ -1,9 +1,12 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
+
 /**
  * @category Hooks
  */
-export const useValues = () => {
-  const t = useContextSelector(ChaynsContext, v => v || {});
+export var useValues = function useValues() {
+  var t = useContextSelector(ChaynsContext, function (v) {
+    return v || {};
+  });
   return t;
 };

package/dist/esm/hooks/windowMetricsListener.js

@@ -1,3 +1,15 @@
+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 { useContextSelector } from 'use-context-selector';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChaynsFunctionsContext } from '../components/ChaynsContext';
@@ -5,27 +17,34 @@ import { ScreenSize } from '../types/IChaynsReact';
 /**
  * @category Hooks
  */
-export const useWindowMetricsListener = () => {
-  const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addWindowMetricsListener);
-  const removeListener = useContextSelector(ChaynsFunctionsContext, v => v.removeWindowMetricsListener);
-  const promiseRef = useRef();
-  return useCallback(callback => {
+
+export var useWindowMetricsListener = function useWindowMetricsListener() {
+  var addListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v.addWindowMetricsListener;
+  });
+  var removeListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v.removeWindowMetricsListener;
+  });
+  var promiseRef = useRef();
+  return useCallback(function (callback) {
     promiseRef.current = addListener(callback);
-    return () => {
+    return function () {
       var _promiseRef$current;
+
       void ((_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.then(removeListener));
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
 /**
  * @category Hooks
  */
-export const useWindowMetrics = function () {
-  let {
-    enabled = true
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const [value, setValue] = useState({
+
+export var useWindowMetrics = function useWindowMetrics() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$enabled = _ref.enabled,
+      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+
+  var _useState = useState({
     bottomBarHeight: 0,
     offsetTop: 0,
     pageHeight: 0,
@@ -33,18 +52,25 @@ export const useWindowMetrics = function () {
     topBarHeight: 0,
     windowHeight: 0,
     pageSize: ScreenSize.XS
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var addListener = useWindowMetricsListener();
+  var getWindowMetrics = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v.getWindowMetrics;
   });
-  const addListener = useWindowMetricsListener();
-  const getWindowMetrics = useContextSelector(ChaynsFunctionsContext, v => v.getWindowMetrics);
-  useEffect(() => {
+  useEffect(function () {
     if (enabled) {
-      return addListener(v => {
+      return addListener(function (v) {
         setValue(v);
       });
     }
+
     return undefined;
   }, [enabled, addListener]);
-  useEffect(() => {
+  useEffect(function () {
     void getWindowMetrics().then(setValue);
   }, [getWindowMetrics]);
   return value;

package/dist/esm/host/ChaynsHost.js

@@ -1,27 +1,30 @@
 import React from 'react';
 import HostIframe from './iframe/HostIframe';
 import ModuleHost from './module/ModuleHost';
-const ChaynsHost = _ref => {
-  let {
-    type,
-    iFrameProps,
-    functions,
-    src,
-    iFrameRef = undefined,
-    children = undefined,
-    system,
-    // shallow data
-    pages,
-    language,
-    isAdminModeActive,
-    site,
-    user,
-    currentPage,
-    device,
-    parameters,
-    customData,
-    environment
-  } = _ref;
+
+var ChaynsHost = function ChaynsHost(_ref) {
+  var type = _ref.type,
+      iFrameProps = _ref.iFrameProps,
+      functions = _ref.functions,
+      src = _ref.src,
+      _ref$iFrameRef = _ref.iFrameRef,
+      iFrameRef = _ref$iFrameRef === void 0 ? undefined : _ref$iFrameRef,
+      _ref$loadingComponent = _ref.loadingComponent,
+      loadingComponent = _ref$loadingComponent === void 0 ? undefined : _ref$loadingComponent,
+      _ref$children = _ref.children,
+      children = _ref$children === void 0 ? undefined : _ref$children,
+      system = _ref.system,
+      pages = _ref.pages,
+      language = _ref.language,
+      isAdminModeActive = _ref.isAdminModeActive,
+      site = _ref.site,
+      user = _ref.user,
+      currentPage = _ref.currentPage,
+      device = _ref.device,
+      parameters = _ref.parameters,
+      customData = _ref.customData,
+      environment = _ref.environment;
+
   switch (type) {
     case 'client-iframe':
       return /*#__PURE__*/React.createElement(HostIframe, {
@@ -40,6 +43,7 @@ const ChaynsHost = _ref => {
         environment: environment,
         customData: customData
       });
+
     case 'client-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
         system: system,
@@ -49,12 +53,14 @@ const ChaynsHost = _ref => {
         user: user,
         device: device,
         currentPage: currentPage,
+        children: loadingComponent,
         functions: functions,
         language: language,
         parameters: parameters,
         customData: customData,
         environment: environment
       });
+
     case 'server-iframe':
       return /*#__PURE__*/React.createElement(HostIframe, {
         iFrameRef: iFrameRef,
@@ -73,6 +79,7 @@ const ChaynsHost = _ref => {
         environment: environment,
         customData: customData
       });
+
     case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
         system: system,
@@ -88,8 +95,10 @@ const ChaynsHost = _ref => {
         customData: customData,
         environment: environment
       }, children);
+
     default:
       return null;
   }
 };
+
 export default ChaynsHost;

package/dist/esm/host/HostIframe.js

@@ -0,0 +1,153 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 React, { useEffect, useRef } from 'react';
+import * as comlink from 'comlink';
+import postIframeForm from '../util/postIframeForm';
+
+var HostIframe = function HostIframe(_ref) {
+  var iFrameProps = _ref.iFrameProps,
+      src = _ref.src,
+      _ref$postForm = _ref.postForm,
+      postForm = _ref$postForm === void 0 ? false : _ref$postForm,
+      iFrameRef = _ref.iFrameRef,
+      pages = _ref.pages,
+      isAdminModeActive = _ref.isAdminModeActive,
+      site = _ref.site,
+      user = _ref.user,
+      currentPage = _ref.currentPage,
+      functions = _ref.functions,
+      device = _ref.device;
+  var eventTarget = useRef();
+
+  var _ref2 = useRef();
+
+  var currentDataRef = useRef();
+
+  if (!eventTarget.current) {
+    eventTarget.current = global.EventTarget ? new EventTarget() : undefined;
+  }
+
+  var setHeight = function setHeight(value) {
+    if (_ref2.current) {
+      _ref2.current.height = "".concat(value, "px");
+    }
+  }; // region initialData
+
+
+  var initialData = {
+    site: site,
+    isAdminModeActive: isAdminModeActive,
+    pages: pages,
+    currentPage: currentPage,
+    device: device,
+    user: user
+  }; // endregion
+
+  currentDataRef.current = initialData; // region postIframeForm
+
+  useEffect(function () {
+    if (postForm) {
+      void postIframeForm(src, JSON.stringify(_objectSpread(_objectSpread({}, initialData), {}, {
+        pages: undefined
+      })), 'chayns', iFrameProps.name);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // endregion
+
+  console.debug('functions', functions); // region expose data and functions to iframe
+
+  useEffect(function () {
+    var _ref$current;
+
+    if ((_ref$current = _ref2.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(_ref2.current.contentWindow));
+
+      _ref2.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
+
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'isAdminModeActive',
+          value: isAdminModeActive
+        }
+      }));
+    }
+  }, [isAdminModeActive]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'user',
+          value: user
+        }
+      }));
+    }
+  }, [user]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'site',
+          value: site
+        }
+      }));
+    }
+  }, [site]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'pages',
+          value: pages
+        }
+      }));
+    }
+  }, [pages]); // endregion
+
+  return /*#__PURE__*/React.createElement("iframe", _extends({
+    ref: function ref(r) {
+      _ref2.current = r;
+
+      if (iFrameRef) {
+        // eslint-disable-next-line no-param-reassign
+        iFrameRef.current = r;
+      }
+    },
+    title: " "
+  }, iFrameProps, {
+    src: postForm ? undefined : src
+  }));
+};
+
+export default HostIframe;