chayns-api 1.1.0-11 → 1.1.0-18

package/dist/cjs/components/withHydrationBoundary.js

@@ -22,6 +22,9 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
       throw new Error('hydration boundary was not given a id which is required');
     }
     const [store] = (0, _react.useState)(() => {
+      if (!globalThis.window && id in value) {
+        return value[id];
+      }
       let initialValue = undefined;
       if (globalThis.window) {
         const htmlId = `__INITIAL_DATA_${id}__`;
@@ -32,14 +35,7 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
       }
       const s = initializer(initialValue);
       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/cjs/host/ChaynsHost.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _HostIframe = _interopRequireDefault(require("./iframe/HostIframe"));
 var _ModuleHost = _interopRequireDefault(require("./module/ModuleHost"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 const ChaynsHost = ({
   type,
   iFrameProps,
@@ -15,7 +17,6 @@ const ChaynsHost = ({
   src,
   iFrameRef = undefined,
   loadingComponent = undefined,
-  children = undefined,
   system,
   // shallow data
   pages,
@@ -31,8 +32,23 @@ const ChaynsHost = ({
   preventStagingReplacement,
   dialog
 }) => {
+  const [isVisible, setIsVisible] = (0, _react.useState)(type === 'server-iframe' || type === 'server-module' && (system === null || system === void 0 ? void 0 : system.serverUrl));
+  (0, _react.useEffect)(() => {
+    if (isVisible) return;
+    if (typeof _react.startTransition === 'function') {
+      (0, _react.startTransition)(() => {
+        setIsVisible(true);
+      });
+    } else {
+      setIsVisible(true);
+    }
+  }, []);
+  if (!isVisible) {
+    return null;
+  }
   switch (type) {
     case 'client-iframe':
+    case 'server-iframe':
       return /*#__PURE__*/_react.default.createElement(_HostIframe.default, {
         iFrameRef: iFrameRef,
         iFrameProps: iFrameProps,
@@ -44,6 +60,7 @@ const ChaynsHost = ({
         currentPage: currentPage,
         functions: functions,
         src: src,
+        postForm: type === 'server-iframe',
         language: language,
         parameters: parameters,
         environment: environment,
@@ -51,8 +68,8 @@ const ChaynsHost = ({
         preventStagingReplacement: preventStagingReplacement,
         dialog: dialog
       });
-    case 'server-module':
     case 'client-module':
+    case 'server-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
         system: system,
         pages: pages,
@@ -70,26 +87,6 @@ const ChaynsHost = ({
         preventStagingReplacement: preventStagingReplacement,
         dialog: dialog
       });
-    case 'server-iframe':
-      return /*#__PURE__*/_react.default.createElement(_HostIframe.default, {
-        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
-      });
     default:
       return null;
   }

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

@@ -4,37 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _runtime = require("@module-federation/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _loadComponent = _interopRequireDefault(require("./utils/loadComponent"));
 var _url = require("../../util/url");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-(0, _runtime.init)({
-  // @ts-expect-error will be set by chayns-toolkit via DefinePlugin
-  name: process.env.__PACKAGE_NAME__,
-  remotes: [],
-  shared: {
-    react: {
-      version: _react.default.version,
-      scope: 'default',
-      lib: () => _react.default
-    },
-    'react-dom': {
-      version: _reactDom.default.version,
-      scope: 'default',
-      lib: () => _reactDom.default
-    }
-  }
-});
 const System = ({
   system,
   fallback,
   ...props
 }) => {
-  const Component = (0, _react.useMemo)(() => (0, _loadComponent.default)(system.scope, system.module, system.url, undefined, system.preventSingleton), [system.scope, system.module, system.url, system.preventSingleton]);
+  const Component = (0, _react.useMemo)(() => (0, _loadComponent.default)(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.default.createElement(_react.default.Suspense, {
     fallback: fallback || ''
   }, /*#__PURE__*/_react.default.createElement(Component, props));
@@ -83,6 +64,7 @@ const ModuleHost = ({
     system: {
       scope: system.scope,
       url: (0, _url.replaceStagingUrl)(preventStagingReplacement, system.url, environment.buildEnvironment),
+      serverUrl: (0, _url.replaceStagingUrl)(preventStagingReplacement, system.serverUrl, environment.buildEnvironment),
       module: system.module,
       preventSingleton: system.preventSingleton
     },

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

@@ -3,17 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = loadComponent;
+exports.loadModule = exports.default = void 0;
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _semver = _interopRequireDefault(require("semver"));
 var _react = _interopRequireDefault(require("react"));
 var _runtime = require("@module-federation/runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const registeredScopes = {};
-const dynamicMap = {};
-function loadComponent(scope, module, url, skipCompatMode = false, preventSingleton = false) {
-  if (skipCompatMode) {
-    console.warn('[chayns-api] skipCompatMode-option is deprecated and is set automatically now');
+const moduleMap = {};
+const componentMap = {};
+(0, _runtime.init)({
+  // @ts-expect-error will be set by chayns-toolkit via DefinePlugin
+  name: process.env.__PACKAGE_NAME__,
+  remotes: [],
+  shared: {
+    react: {
+      version: _react.default.version,
+      scope: 'default',
+      lib: () => _react.default
+    },
+    'react-dom': {
+      version: _reactDom.default.version,
+      scope: 'default',
+      lib: () => _reactDom.default
+    }
   }
+});
+const loadModule = (scope, module, url, preventSingleton = false) => {
   if (registeredScopes[scope] !== url || preventSingleton) {
     (0, _runtime.registerRemotes)([{
       name: scope,
@@ -23,46 +39,64 @@ function loadComponent(scope, module, url, skipCompatMode = false, preventSingle
       force: scope in registeredScopes
     });
     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.default.lazy(() => {
-      return (0, _runtime.loadRemote)(path).then(async Module => {
-        // semantically equals skipCompatMode
-        if (typeof Module.default === 'function') {
-          return Module;
-        }
-        const hostVersion = _semver.default.minVersion(_react.default.version);
-        const {
-          requiredVersion,
-          environment
-        } = Module.default;
-        const shareScopes = await new Promise(resolve => {
-          (0, _runtime.loadShareSync)('react', {
-            resolver: shareOptions => {
-              resolve(shareOptions);
-              return shareOptions[0];
-            }
-          });
-        });
-        const matchReactVersion = requiredVersion && _semver.default.satisfies(hostVersion, requiredVersion) && !shareScopes.some(t => {
-          const {
-            version,
-            from
-          } = t;
-          return _semver.default.gt(version, hostVersion) && _semver.default.satisfies(version, requiredVersion) || scope === from.split('-').join('_');
+    const promise = (0, _runtime.loadRemote)(path);
+    promise.catch(() => {
+      // 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];
+};
+exports.loadModule = loadModule;
+const loadComponent = (scope, module, url, skipCompatMode = false, preventSingleton = 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.default.minVersion(_react.default.version);
+      const {
+        requiredVersion,
+        environment
+      } = Module.default;
+      const shareScopes = await new Promise(resolve => {
+        (0, _runtime.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.default.satisfies(hostVersion, requiredVersion) && !shareScopes.some(t => {
+        const {
+          version,
+          from
+        } = t;
+        return _semver.default.gt(version, hostVersion) && _semver.default.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
+      };
     });
+    componentMap[scope][module] = /*#__PURE__*/_react.default.lazy(() => promise);
   }
-  return dynamicMap[scope][module];
-}
+  return componentMap[scope][module];
+};
+var _default = exports.default = loadComponent;

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

@@ -7,10 +7,9 @@ exports.semaphore = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _semaphoreAsyncAwait = _interopRequireDefault(require("semaphore-async-await"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const semaphore = {};
-exports.semaphore = semaphore;
+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; }
+const semaphore = exports.semaphore = {};
 const useDynamicScript = args => {
   const [ready, setReady] = _react.default.useState(false);
   const [failed, setFailed] = _react.default.useState(false);
@@ -57,5 +56,4 @@ const useDynamicScript = args => {
     failed
   };
 };
-var _default = useDynamicScript;
-exports.default = _default;
+var _default = exports.default = useDynamicScript;

package/dist/cjs/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   withHydrationBoundary: true,
   StaticChaynsApi: true,
   loadComponent: true,
+  loadModule: true,
   DialogHandler: true,
   dialog: true
 };
@@ -65,6 +66,12 @@ Object.defineProperty(exports, "loadComponent", {
     return _loadComponent.default;
   }
 });
+Object.defineProperty(exports, "loadModule", {
+  enumerable: true,
+  get: function () {
+    return _loadComponent.loadModule;
+  }
+});
 Object.defineProperty(exports, "withCompatMode", {
   enumerable: true,
   get: function () {
@@ -155,7 +162,7 @@ Object.keys(_constants).forEach(function (key) {
 });
 var _withHydrationBoundary = _interopRequireDefault(require("./components/withHydrationBoundary"));
 var _StaticChaynsApi = _interopRequireDefault(require("./wrapper/StaticChaynsApi"));
-var _loadComponent = _interopRequireDefault(require("./host/module/utils/loadComponent"));
+var _loadComponent = _interopRequireWildcard(require("./host/module/utils/loadComponent"));
 var _DialogHandler = _interopRequireDefault(require("./handler/DialogHandler"));
 var _dialog = _interopRequireWildcard(require("./calls/dialogs/index"));
 exports.dialog = _dialog;

package/dist/cjs/util/url.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.replaceStagingUrl = void 0;
 var _IChaynsReact = require("../types/IChaynsReact");
 const replaceStagingUrl = (prevent, url, environment) => {
-  if (prevent) return url;
+  if (prevent || !url) return url;
   let replacedUrl = url;
   if (environment === _IChaynsReact.Environment.Qa || environment === _IChaynsReact.Environment.Development) {
     replacedUrl = replacedUrl.replace('tapp.chayns-static.space', 'tapp-dev.chayns-static.space');

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}__`;
@@ -25,14 +28,7 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
       }
       const s = initializer(initialValue);
       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/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 === 'server-iframe' || type === 'server-module' && (system === null || system === void 0 ? 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,
@@ -45,8 +60,8 @@ const ChaynsHost = _ref => {
         preventStagingReplacement: preventStagingReplacement,
         dialog: dialog
       });
-    case 'server-module':
     case 'client-module':
+    case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
         system: system,
         pages: pages,
@@ -64,26 +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
-      });
     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,14 +1,29 @@
+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({
+  // @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
+    }
   }
+});
+export const loadModule = function (scope, module, url) {
+  let preventSingleton = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (registeredScopes[scope] !== url || preventSingleton) {
     registerRemotes([{
       name: scope,
@@ -18,46 +33,65 @@ export default function loadComponent(scope, module, url) {
       force: scope in registeredScopes
     });
     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(() => {
+      // 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(t => {
+        const {
+          version,
+          from
+        } = t;
+        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
+      };
     });
+    componentMap[scope][module] = /*#__PURE__*/React.lazy(() => promise);
   }
-  return dynamicMap[scope][module];
-}
+  return componentMap[scope][module];
+};
+export default loadComponent;