chayns-api 1.1.0-9 → 1.2.0-0

package/dist/cjs/wrapper/AppWrapper.js

@@ -12,6 +12,7 @@ var _deviceHelper = _interopRequireWildcard(require("../util/deviceHelper"));
 var _getUserInfo = _interopRequireDefault(require("../calls/getUserInfo"));
 var _sendMessage = require("../calls/sendMessage");
 var _apiListenerHelper = require("../helper/apiListenerHelper");
+var _languages = require("../constants/languages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,13 +27,15 @@ class AppWrapper {
     var _window, _colorMode, _window2, _AppInfo$TappSelected;
     const {
       AppInfo,
-      AppUser
+      AppUser,
+      Device
     } = retVal;
     this.accessToken = AppUser.TobitAccessToken;
     const urlParams = new URLSearchParams(location.search);
     const urlParamsLowerCase = new URLSearchParams(location.search.toLowerCase());
     let tappId = urlParamsLowerCase.get('tappid');
     let colorMode = urlParamsLowerCase.get('colormode');
+    let color = AppInfo.color;
     if (colorMode) {
       try {
         colorMode = Number.parseInt(colorMode, 10);
@@ -45,6 +48,24 @@ class AppWrapper {
         // ignore
       }
     }
+    let language = AppInfo.Language;
+    if (!language) {
+      language = _languages.DeviceLanguage[Number.parseInt(Device === null || Device === void 0 ? void 0 : Device.LanguageID, 10)] || 'de';
+    }
+    if (!color && urlParamsLowerCase.has('color')) {
+      color = urlParamsLowerCase.get('color');
+      if (!color.startsWith('#')) {
+        color = `#${color}`;
+      }
+    }
+    let userId = AppUser.TobitUserID;
+    if (typeof userId === 'string') {
+      try {
+        userId = Number.parseInt(userId, 10);
+      } catch {
+        // ignore
+      }
+    }
     return {
       device: (0, _deviceHelper.default)(navigator.userAgent, 'image/webp'),
       environment: {
@@ -52,12 +73,11 @@ class AppWrapper {
         runtimeEnvironment: _IChaynsReact.RuntimeEnviroment.Unknown
       },
       language: {
-        site: AppInfo.Language,
+        site: language,
         translation: null,
-        device: AppInfo.Language,
-        active: AppInfo.Language
+        device: language,
+        active: language
       },
-      // ToDo: Find better way to detect
       site: {
         id: AppInfo.SiteID,
         locationId: AppInfo.LocationID,
@@ -73,7 +93,7 @@ class AppWrapper {
         },
         title: AppInfo.Title,
         colorMode: (_colorMode = colorMode) !== null && _colorMode !== void 0 ? _colorMode : AppInfo.colorMode,
-        color: AppInfo.color,
+        color,
         domain: AppInfo.domain,
         font: {
           id: _IChaynsReact.Font.Roboto,
@@ -89,14 +109,14 @@ class AppWrapper {
         firstName: AppUser.FirstName,
         lastName: AppUser.LastName,
         gender: _IChaynsReact.Gender.Unknown,
-        userId: AppUser.TobitUserID,
+        userId: userId,
         personId: AppUser.PersonID,
         uacGroups: []
       },
       customData: null,
       isAdminModeActive: AppUser.AdminMode,
       currentPage: {
-        id: ((_AppInfo$TappSelected = AppInfo.TappSelected) === null || _AppInfo$TappSelected === void 0 ? void 0 : _AppInfo$TappSelected.TappID) || tappId,
+        id: tappId || ((_AppInfo$TappSelected = AppInfo.TappSelected) === null || _AppInfo$TappSelected === void 0 ? void 0 : _AppInfo$TappSelected.TappID),
         siteId: AppInfo.SiteID
       },
       pages: AppInfo.Tapps.map(x => ({
@@ -116,12 +136,6 @@ class AppWrapper {
   notImplemented(call) {
     console.warn(`call ${call} not implement in app`);
   }
-  dispatchDialogChange(detail) {
-    this.dialogs = detail;
-    this.dialogEventTarget.dispatchEvent(new CustomEvent('change', {
-      detail
-    }));
-  }
   counter = 0;
   appCall(action, value = {}, {
     callback,
@@ -313,7 +327,7 @@ class AppWrapper {
       (0, _appCall.default)(callObj);
     },
     login: async (value, callback, closeCallback) => {
-      const res = await this.appCall({}, callback);
+      const res = await this.appCall(54, value);
       return {
         loginState: res === null || res === void 0 ? void 0 : res.loginState
       };
@@ -365,7 +379,8 @@ class AppWrapper {
         shouldRemove
       } = (0, _apiListenerHelper.removeApiListener)('geoLocationListener', id);
       if (shouldRemove) {
-        // App does not support removal of request geo location call with permanent true which makes this a no-op
+        // App does not support removal of request geo location call with permanent true which makes this a
+        // no-op
       }
     },
     removeScrollListener: async id => {
@@ -520,51 +535,74 @@ class AppWrapper {
       });
     },
     createDialog: config => {
-      return new _DialogHandler.default(config, this.functions.openDialog, this.functions.closeDialog);
+      return new _DialogHandler.default(config, this.functions.openDialog, this.functions.closeDialog, this.functions.dispatchEventToDialogClient, this.functions.addDialogClientEventListener);
     },
     openDialog: async (config, callback) => {
       const currentDialogId = appWrapperDialogId++;
-      const eventTarget = new EventTarget();
-      const resolve = result => {
+      this.appCall(184, {
+        dialogContent: {
+          apiVersion: 5,
+          config
+        },
+        externalDialogUrl: 'https://tapp.chayns-static.space/api/dialog-v2/v1/index.html'
+      }, {
+        awaitResult: true
+      }).then(result => {
         callback(result);
-        this.dispatchDialogChange(this.dialogs.filter(x => x.dialogId !== currentDialogId));
-      };
-      this.dispatchDialogChange([...this.dialogs, {
-        config,
-        resolve,
-        dialogId: currentDialogId,
-        eventTarget
-      }]);
+      });
       return currentDialogId;
     },
-    closeDialog: dialogId => {
+    closeDialog: (dialogId, result, buttonType = -1) => {
       const dialog = this.dialogs.find(x => x.dialogId === dialogId);
       if (dialog) {
         dialog.resolve({
-          buttonType: -1
+          buttonType,
+          result
         });
       }
+    },
+    dispatchEventToDialogClient: () => this.notImplemented('dispatchEventToDialogClient'),
+    addDialogClientEventListener: () => this.notImplemented('addDialogClientEventListener'),
+    addAnonymousAccount: async () => {
+      return this.appCall(302);
     }
   };
   dialogs = [];
-  dialogEventTarget = new EventTarget();
-  getDialogEventTarget() {
-    return this.dialogEventTarget;
-  }
   async init() {
     this.values = this.mapOldApiToNew(await this.appCall(18));
-    const callbackName = `chaynsApiV5Callback_${this.counter++}`;
-    window.disablev4AccessTokenChangeListener = true;
-    window[callbackName] = ({
-      retVal: value
-    }) => {
-      this.mapOldApiToNew(value);
-    };
     this.appCall(66, {
-      enabled: true,
-      callback: callbackName
+      enabled: true
     }, {
-      awaitResult: false
+      callback: async () => {
+        this.values = this.mapOldApiToNew(await this.appCall(18));
+        document.dispatchEvent(new CustomEvent('chayns_api_data', {
+          detail: {
+            type: 'user',
+            value: this.values.user
+          }
+        }));
+      },
+      awaitResult: true
+    });
+    window.disablev4DesignSettingsChangeListener = true;
+    this.appCall(254, {
+      enabled: true
+    }, {
+      callback: ({
+        colorMode
+      }) => {
+        this.values.site = {
+          ...this.values.site,
+          colorMode
+        };
+        document.dispatchEvent(new CustomEvent('chayns_api_data', {
+          detail: {
+            type: 'site',
+            value: this.values.site
+          }
+        }));
+      },
+      awaitResult: true
     });
     return undefined;
   }

package/dist/cjs/wrapper/FrameWrapper.js

@@ -296,7 +296,11 @@ class FrameWrapper {
         // this.exposedFunctions.removeDialogHostEventListener(0);
       }
     },
-    removeDialogClientEventListener: async () => {}
+    removeDialogClientEventListener: async () => {},
+    addAnonymousAccount: async () => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.addAnonymousAccount();
+    }
   };
   initialized = false;
   constructor() {

package/dist/cjs/wrapper/StaticChaynsApi.js

@@ -17,6 +17,13 @@ class StaticChaynsApi {
       this[k] = v;
     });
   }
+  getUser = () => this._wrapper.values.user;
   getSite = () => this._wrapper.values.site;
+  getCurrentPage = () => this._wrapper.values.currentPage;
+  getDevice = () => this._wrapper.values.device;
+  getLanguage = () => this._wrapper.values.language;
+  getParameters = () => this._wrapper.values.parameters;
+  getPages = () => this._wrapper.values.pages;
+  getEnvironment = () => this._wrapper.values.environment;
 }
 var _default = exports.default = StaticChaynsApi;

package/dist/esm/calls/index.js

@@ -282,18 +282,23 @@ export const storageSetItem = function () {
 export const vibrate = function () {
   return moduleWrapper.current.functions.vibrate(...arguments);
 };
+
 /**
  * This method creates a dialog
  */
-export const createDialog = function () {
-  return moduleWrapper.current.functions.createDialog(...arguments);
-};
+// @ts-ignore
+export const createDialog = config => moduleWrapper.current.functions.createDialog(config);
 /**
  * Displays an overlay
  */
 export const setOverlay = function () {
   return moduleWrapper.current.functions.setOverlay(...arguments);
 };
+
+/**
+ * Generates a temp accesstoken, only valid for short period of time (~3 days), works only when no user is logged in
+ */
+export const addAnonymousAccount = () => moduleWrapper.current.functions.addAnonymousAccount();
 /**
  * Returns user information, only when user is logged in
  * @category User functions

package/dist/esm/components/ChaynsProvider.js

@@ -7,7 +7,6 @@ import { FrameWrapper } from '../wrapper/FrameWrapper';
 import { ModuleFederationWrapper } from '../wrapper/ModuleFederationWrapper';
 import { SsrWrapper } from '../wrapper/SsrWrapper';
 import { ChaynsContext, ChaynsFunctionsContext } from './ChaynsContext';
-import AppDialogWrapper from './AppDialogWrapper';
 import { moduleWrapper } from './moduleWrapper';
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -30,7 +29,7 @@ const InitialDataProvider = /*#__PURE__*/React.memo(_ref => {
   });
 }, () => true);
 const ChaynsProvider = _ref2 => {
-  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3, _customWrapper$curren4;
+  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3;
   let {
     children,
     data,
@@ -101,9 +100,7 @@ const ChaynsProvider = _ref2 => {
     value: state
   }, /*#__PURE__*/React.createElement(ChaynsFunctionsContext.Provider, {
     value: (_customWrapper$curren3 = customWrapper.current) === null || _customWrapper$curren3 === void 0 ? void 0 : _customWrapper$curren3.functions
-  }, children, customWrapper.current instanceof AppWrapper ? /*#__PURE__*/React.createElement(AppDialogWrapper, {
-    dialogEventTarget: (_customWrapper$curren4 = customWrapper.current) === null || _customWrapper$curren4 === void 0 ? void 0 : _customWrapper$curren4.getDialogEventTarget()
-  }) : false)), /*#__PURE__*/React.createElement(InitialDataProvider, {
+  }, children)), /*#__PURE__*/React.createElement(InitialDataProvider, {
     data: state,
     renderedByServer: renderedByServer
   }));

package/dist/esm/components/withHydrationBoundary.js

@@ -15,6 +15,9 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
       throw new Error('hydration boundary was not given a id which is required');
     }
     const [store] = useState(() => {
+      if (!globalThis.window && id in value) {
+        return value[id];
+      }
       let initialValue = undefined;
       if (globalThis.window) {
         const htmlId = `__INITIAL_DATA_${id}__`;
@@ -23,16 +26,9 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
           initialValue = JSON.parse($elem.innerHTML);
         }
       }
-      const s = initializer(initialValue);
+      const s = initializer(initialValue, id);
       if (!globalThis.window) {
-        if (id in value) {
-          console.warn(`Dehydration function for id "${id}" has been defined multiple times. This can have two reasons. The children cause suspension and therefor the hydration boundary has to mount from scratch again. You can avoid this by adding a Suspense around the children. The id is not unique. This has to be fixed or might cause hydration issues.`);
-        }
-        value[id] = {
-          getState: s.getState,
-          abort: s.abort,
-          type: s.type
-        };
+        value[id] = s;
       }
       return s;
     });

package/dist/esm/constants/languages.js

@@ -0,0 +1,13 @@
+export let DeviceLanguage = /*#__PURE__*/function (DeviceLanguage) {
+  DeviceLanguage[DeviceLanguage["de"] = 1] = "de";
+  DeviceLanguage[DeviceLanguage["en"] = 2] = "en";
+  DeviceLanguage[DeviceLanguage["fr"] = 3] = "fr";
+  DeviceLanguage[DeviceLanguage["it"] = 4] = "it";
+  DeviceLanguage[DeviceLanguage["nl"] = 5] = "nl";
+  DeviceLanguage[DeviceLanguage["es"] = 6] = "es";
+  DeviceLanguage[DeviceLanguage["pt"] = 7] = "pt";
+  DeviceLanguage[DeviceLanguage["tr"] = 8] = "tr";
+  DeviceLanguage[DeviceLanguage["pl"] = 9] = "pl";
+  DeviceLanguage[DeviceLanguage["uk"] = 10] = "uk";
+  return DeviceLanguage;
+}({});

package/dist/esm/handler/DialogHandler.js

@@ -4,7 +4,6 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 export default class DialogHandler {
   constructor(config, open, close, dispatchEvent, addDataListener) {
     _defineProperty(this, "isOpen", false);
-    _defineProperty(this, "result", undefined);
     _defineProperty(this, "listeners", []);
     this._open = open;
     this._close = close;
@@ -38,7 +37,7 @@ export default class DialogHandler {
       return;
     }
     this.isOpen = false;
-    this._close(this.dialogId, data);
+    this._close(this.dialogId, data, buttonType);
   }
   dispatchEvent(data) {
     if (!this.isOpen) {

package/dist/esm/host/ChaynsHost.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { startTransition, useEffect, useState } from 'react';
 import HostIframe from './iframe/HostIframe';
 import ModuleHost from './module/ModuleHost';
 const ChaynsHost = _ref => {
@@ -9,7 +9,6 @@ const ChaynsHost = _ref => {
     src,
     iFrameRef = undefined,
     loadingComponent = undefined,
-    children = undefined,
     system,
     // shallow data
     pages,
@@ -25,8 +24,23 @@ const ChaynsHost = _ref => {
     preventStagingReplacement,
     dialog
   } = _ref;
+  const [isVisible, setIsVisible] = useState(type !== 'client-module' && (type !== 'server-module' || !!(system !== null && system !== void 0 && system.serverUrl)));
+  useEffect(() => {
+    if (isVisible) return;
+    if (typeof startTransition === 'function') {
+      startTransition(() => {
+        setIsVisible(true);
+      });
+    } else {
+      setIsVisible(true);
+    }
+  }, []);
+  if (!isVisible) {
+    return null;
+  }
   switch (type) {
     case 'client-iframe':
+    case 'server-iframe':
       return /*#__PURE__*/React.createElement(HostIframe, {
         iFrameRef: iFrameRef,
         iFrameProps: iFrameProps,
@@ -38,6 +52,7 @@ const ChaynsHost = _ref => {
         currentPage: currentPage,
         functions: functions,
         src: src,
+        postForm: type === 'server-iframe',
         language: language,
         parameters: parameters,
         environment: environment,
@@ -46,6 +61,7 @@ const ChaynsHost = _ref => {
         dialog: dialog
       });
     case 'client-module':
+    case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
         system: system,
         pages: pages,
@@ -63,43 +79,6 @@ const ChaynsHost = _ref => {
         preventStagingReplacement: preventStagingReplacement,
         dialog: dialog
       });
-    case 'server-iframe':
-      return /*#__PURE__*/React.createElement(HostIframe, {
-        iFrameRef: iFrameRef,
-        iFrameProps: iFrameProps,
-        pages: pages,
-        isAdminModeActive: isAdminModeActive,
-        site: site,
-        user: user,
-        device: device,
-        currentPage: currentPage,
-        functions: functions,
-        src: src,
-        postForm: true,
-        language: language,
-        parameters: parameters,
-        environment: environment,
-        customData: customData,
-        preventStagingReplacement: preventStagingReplacement,
-        dialog: dialog
-      });
-    case 'server-module':
-      return /*#__PURE__*/React.createElement(ModuleHost, {
-        system: system,
-        pages: pages,
-        isAdminModeActive: isAdminModeActive,
-        site: site,
-        user: user,
-        device: device,
-        currentPage: currentPage,
-        functions: functions,
-        language: language,
-        parameters: parameters,
-        customData: customData,
-        environment: environment,
-        preventStagingReplacement: preventStagingReplacement,
-        dialog: dialog
-      }, children);
     default:
       return null;
   }

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

@@ -1,32 +1,13 @@
-import { init } from '@module-federation/runtime';
 import React, { useMemo } from 'react';
-import ReactDOM from 'react-dom';
 import loadComponent from './utils/loadComponent';
 import { replaceStagingUrl } from "../../util/url";
-init({
-  // @ts-expect-error will be set by chayns-toolkit via DefinePlugin
-  name: process.env.__PACKAGE_NAME__,
-  remotes: [],
-  shared: {
-    react: {
-      version: React.version,
-      scope: 'default',
-      lib: () => React
-    },
-    'react-dom': {
-      version: ReactDOM.version,
-      scope: 'default',
-      lib: () => ReactDOM
-    }
-  }
-});
 const System = _ref => {
   let {
     system,
     fallback,
     ...props
   } = _ref;
-  const Component = useMemo(() => loadComponent(system.scope, system.module, system.url, undefined, system.preventSingleton), [system.scope, system.module, system.url, system.preventSingleton]);
+  const Component = useMemo(() => loadComponent(system.scope, system.module, globalThis.window ? system.url : system.serverUrl, undefined, system.preventSingleton), [system.scope, system.module, system.url, system.serverUrl, system.preventSingleton]);
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: fallback || ''
   }, /*#__PURE__*/React.createElement(Component, props));
@@ -76,6 +57,7 @@ const ModuleHost = _ref2 => {
     system: {
       scope: system.scope,
       url: replaceStagingUrl(preventStagingReplacement, system.url, environment.buildEnvironment),
+      serverUrl: replaceStagingUrl(preventStagingReplacement, system.serverUrl, environment.buildEnvironment),
       module: system.module,
       preventSingleton: system.preventSingleton
     },

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

@@ -1,63 +1,106 @@
+var _process$env$__PACKAG;
+import ReactDOM from 'react-dom';
 import semver from 'semver';
 import React from 'react';
-import { loadRemote, registerRemotes, loadShareSync } from '@module-federation/runtime';
+import { loadRemote, registerRemotes, loadShareSync, init } from '@module-federation/runtime';
 const registeredScopes = {};
-const dynamicMap = {};
-export default function loadComponent(scope, module, url) {
-  let skipCompatMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  let preventSingleton = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  if (skipCompatMode) {
-    console.warn('[chayns-api] skipCompatMode-option is deprecated and is set automatically now');
+const moduleMap = {};
+const componentMap = {};
+init({
+  // will be set by chayns-toolkit via DefinePlugin
+  name: (_process$env$__PACKAG = process.env.__PACKAGE_NAME__) !== null && _process$env$__PACKAG !== void 0 ? _process$env$__PACKAG : '',
+  remotes: [],
+  shared: {
+    react: {
+      version: React.version,
+      scope: 'default',
+      lib: () => React
+    },
+    'react-dom': {
+      version: ReactDOM.version,
+      scope: 'default',
+      lib: () => ReactDOM
+    }
   }
+});
+export const loadModule = function (scope, module, url) {
+  let preventSingleton = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (registeredScopes[scope] !== url || preventSingleton) {
+    if (scope in registeredScopes) {
+      console.error(`[chayns-api] call registerRemote with force for scope ${scope}. url: ${url}`);
+    }
     registerRemotes([{
       name: scope,
       entry: url,
       alias: scope
     }], {
-      force: scope in registeredScopes
+      force: scope in registeredScopes || preventSingleton
     });
     registeredScopes[scope] = url;
-    dynamicMap[scope] = {};
+    moduleMap[scope] = {};
+    componentMap[scope] = {};
   }
-  if (!(module in dynamicMap[scope])) {
+  if (!(module in moduleMap[scope])) {
     const path = `${scope}/${module.replace(/^\.\//, '')}`;
-    dynamicMap[scope][module] = /*#__PURE__*/React.lazy(() => {
-      return loadRemote(path).then(async Module => {
-        // semantically equals skipCompatMode
-        if (typeof Module.default === 'function') {
-          return Module;
-        }
-        const hostVersion = semver.minVersion(React.version);
-        const {
-          requiredVersion,
-          environment
-        } = Module.default;
-        const shareScopes = await new Promise(resolve => {
-          loadShareSync('react', {
-            resolver: shareOptions => {
-              resolve(shareOptions);
-              return shareOptions[0];
-            }
-          });
-        });
-        const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion) && !shareScopes.some(t => {
-          const {
-            version,
-            from
-          } = t;
-          return semver.gt(version, hostVersion) && semver.satisfies(version, requiredVersion) || scope === from.split('-').join('_');
+    const promise = loadRemote(path);
+    promise.catch(e => {
+      console.error("[chayns-api] Failed to load module", scope, url, e);
+      // causes registerRemote with force = true on next attempt to load the component which tries to load the component again
+      registeredScopes[scope] = '';
+    });
+    return promise;
+  }
+  return moduleMap[scope][module];
+};
+const loadComponent = function (scope, module, url) {
+  let skipCompatMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let preventSingleton = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  if (skipCompatMode) {
+    console.warn('[chayns-api] skipCompatMode-option is deprecated and is set automatically now');
+  }
+  if (!componentMap[scope]) {
+    componentMap[scope] = {};
+  }
+  if (!(module in componentMap[scope])) {
+    const promise = loadModule(scope, module, url, preventSingleton).then(async Module => {
+      if (typeof Module.default === 'function') {
+        return Module;
+      }
+      const hostVersion = semver.minVersion(React.version);
+      const {
+        requiredVersion,
+        environment
+      } = Module.default;
+      const shareScopes = await new Promise(resolve => {
+        loadShareSync('react', {
+          resolver: shareOptions => {
+            resolve(shareOptions);
+            return shareOptions[0];
+          }
         });
-        if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development') {
-          return {
-            default: Module.default.CompatComponent
-          };
-        }
+      });
+      const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion) && !shareScopes.some(_ref => {
+        let {
+          version,
+          from
+        } = _ref;
+        return semver.gt(version, hostVersion) && semver.satisfies(version, requiredVersion) || scope === from.split('-').join('_');
+      });
+      if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development') {
         return {
-          default: Module.default.Component
+          default: Module.default.CompatComponent
         };
-      });
+      }
+      return {
+        default: Module.default.Component
+      };
+    });
+    promise.catch(e => {
+      console.error("[chayns-api] Failed to load component", scope, url, e);
+      delete componentMap[scope][module];
     });
+    componentMap[scope][module] = /*#__PURE__*/React.lazy(() => promise);
   }
-  return dynamicMap[scope][module];
-}
+  return componentMap[scope][module];
+};
+export default loadComponent;

package/dist/esm/index.js

@@ -11,7 +11,7 @@ export * from './components/withCompatMode';
 export * from './constants';
 export { default as withHydrationBoundary } from './components/withHydrationBoundary';
 export { default as StaticChaynsApi } from './wrapper/StaticChaynsApi';
-export { default as loadComponent } from './host/module/utils/loadComponent';
+export { default as loadComponent, loadModule } from './host/module/utils/loadComponent';
 export { default as DialogHandler } from './handler/DialogHandler';
 import * as _dialog from './calls/dialogs/index';
 export { _dialog as dialog };