chayns-api 1.0.66 → 1.0.68-0

package/dist/cjs/components/withHydrationBoundary.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+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 withHydrationBoundary = (Component, initializer, useHydrationId) => {
+  return ({
+    id: idProp,
+    children
+  }) => {
+    let value;
+    if (!globalThis.window) {
+      value = (0, _react.useContext)(_constants.HydrationContext);
+    }
+    const id = useHydrationId ? useHydrationId() : idProp;
+    if (!id) {
+      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}__`;
+        const $elem = document.getElementById(htmlId);
+        if ($elem) {
+          initialValue = JSON.parse($elem.innerHTML);
+        }
+      }
+      const s = initializer(initialValue);
+      if (!globalThis.window) {
+        value[id] = s;
+      }
+      return s;
+    });
+    (0, _react.useEffect)(() => {
+      const htmlId = `__INITIAL_DATA_${id}__`;
+      const $elem = document.getElementById(htmlId);
+      if ($elem) {
+        $elem.remove();
+      }
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(Component, {
+      value: store
+    }, children);
+  };
+};
+var _default = exports.default = withHydrationBoundary;

package/dist/cjs/constants/hydrationContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HydrationContext = void 0;
+var _react = require("react");
+let HydrationContext = exports.HydrationContext = void 0;
+
+// force single context on server-side (fake sharing)
+if (!globalThis.window && globalThis._hydrationContext) {
+  exports.HydrationContext = HydrationContext = globalThis._hydrationContext;
+} else {
+  exports.HydrationContext = HydrationContext = /*#__PURE__*/(0, _react.createContext)({});
+  globalThis._hydrationContext = HydrationContext;
+}

package/dist/cjs/constants/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _hydrationContext = require("./hydrationContext");
+Object.keys(_hydrationContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hydrationContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hydrationContext[key];
+    }
+  });
+});

package/dist/cjs/constants/languages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceLanguage = void 0;
+let DeviceLanguage = exports.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/cjs/hooks/geoLocationListener.js

@@ -7,8 +7,8 @@ exports.useGeoLocationListener = exports.useGeoLocation = void 0;
 var _useContextSelector = require("use-context-selector");
 var _react = require("react");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useGeoLocationListener = () => {
   const addListener = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v.addGeoLocationListener);
@@ -23,8 +23,8 @@ const useGeoLocationListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useGeoLocationListener = useGeoLocationListener;
 const useGeoLocation = ({

package/dist/cjs/hooks/scrollListener.js

@@ -8,8 +8,8 @@ var _useContextSelector = require("use-context-selector");
 var _react = require("react");
 var _ChaynsContext = require("../components/ChaynsContext");
 var _windowMetricsListener = require("./windowMetricsListener");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useScrollListener = () => {
   const addListener = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v.addScrollListener);
@@ -24,8 +24,8 @@ const useScrollListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useScrollListener = useScrollListener;
 const useScrollPosition = ({
@@ -52,8 +52,8 @@ const useScrollPosition = ({
   }, [getScrollPosition]);
   return value;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useScrollPosition = useScrollPosition;
 const useScrollOffsetTop = ({
@@ -75,8 +75,8 @@ const useScrollOffsetTop = ({
   }
   return 0;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useScrollOffsetTop = useScrollOffsetTop;
 const useScrollOffsetBottom = ({

package/dist/cjs/hooks/useAccessToken.js

@@ -7,9 +7,9 @@ exports.useAccessToken = void 0;
 var _react = require("react");
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
- * @deprecated Use {@link getAccessToken} instead
+/**
+ * @category Hooks
+ * @deprecated Use {@link getAccessToken} instead
  */
 const useAccessToken = accessToken => {
   const [token, setToken] = (0, _react.useState)(null);

package/dist/cjs/hooks/useCurrentPage.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCurrentPage = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useCurrentPage = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.currentPage);
 exports.useCurrentPage = useCurrentPage;

package/dist/cjs/hooks/useCustomData.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCustomData = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useCustomData = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.customData);
 exports.useCustomData = useCustomData;

package/dist/cjs/hooks/useDevice.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDevice = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useDevice = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.device);
 exports.useDevice = useDevice;

package/dist/cjs/hooks/useDialogState.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDialogState = exports.useDialogData = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useDialogState = () => {
   const setResult = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.setDialogResult);
@@ -25,8 +25,8 @@ const useDialogState = () => {
   };
 };
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useDialogState = useDialogState;
 const useDialogData = () => {

package/dist/cjs/hooks/useEnvironment.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useEnvironment = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useEnvironment = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.environment);
 exports.useEnvironment = useEnvironment;

package/dist/cjs/hooks/useFunctions.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFunctions = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useFunctions = () => {
   const t = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, f => f || {});

package/dist/cjs/hooks/useIsAdminMode.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIsAdminMode = void 0;
 var _useContextSelector2 = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useIsAdminMode = () => {
   var _useContextSelector;

package/dist/cjs/hooks/useLanguage.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useLanguage = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useLanguage = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.language);
 exports.useLanguage = useLanguage;

package/dist/cjs/hooks/usePages.js

@@ -7,8 +7,8 @@ exports.usePages = exports.usePage = exports.getPage = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
 var _moduleWrapper = require("../components/moduleWrapper");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const usePages = ({
   siteId
@@ -21,8 +21,8 @@ const usePages = ({
   }
   return pages;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.usePages = usePages;
 const usePage = ({

package/dist/cjs/hooks/useParameters.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useParameters = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useParameters = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.parameters) || []);
 exports.useParameters = useParameters;

package/dist/cjs/hooks/useSite.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSite = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useSite = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.site);
 exports.useSite = useSite;

package/dist/cjs/hooks/useUser.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUser = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useUser = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.user) || {});
 exports.useUser = useUser;

package/dist/cjs/hooks/useValues.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useValues = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useValues = () => {
   const t = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v || {});

package/dist/cjs/hooks/windowMetricsListener.js

@@ -8,8 +8,8 @@ var _useContextSelector = require("use-context-selector");
 var _react = require("react");
 var _ChaynsContext = require("../components/ChaynsContext");
 var _IChaynsReact = require("../types/IChaynsReact");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useWindowMetricsListener = () => {
   const addListener = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v.addWindowMetricsListener);
@@ -24,8 +24,8 @@ const useWindowMetricsListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useWindowMetricsListener = useWindowMetricsListener;
 const useWindowMetrics = ({

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(e) { return e && e.__esModule ? e : { default: e }; }
+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 !== 'client-module' && (type !== 'server-module' || !!(system !== null && system !== 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,
@@ -52,6 +69,7 @@ const ChaynsHost = ({
         dialog: dialog
       });
     case 'client-module':
+    case 'server-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
         system: system,
         pages: pages,
@@ -69,43 +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
-      });
-    case 'server-module':
-      return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
-        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/cjs/host/iframe/HostIframe.js

@@ -9,10 +9,10 @@ var comlink = _interopRequireWildcard(require("comlink"));
 var _postIframeForm = _interopRequireDefault(require("../../util/postIframeForm"));
 var _useUpdateData = _interopRequireDefault(require("./utils/useUpdateData"));
 var _url = require("../../util/url");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 const HostIframe = ({
   iFrameProps,
   src,

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

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _useDynamicScript = _interopRequireDefault(require("./utils/useDynamicScript"));
 var _loadComponent = _interopRequireDefault(require("./utils/loadComponent"));
 var _url = require("../../util/url");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 System = ({
@@ -16,25 +15,10 @@ const System = ({
   fallback,
   ...props
 }) => {
-  const {
-    ready,
-    failed
-  } = (0, _useDynamicScript.default)({
-    url: system === null || system === void 0 ? void 0 : system.url,
-    scope: system === null || system === void 0 ? void 0 : system.scope
-  });
-  const Component = (0, _react.useMemo)(() => {
-    // maybe return waitcursor instead
-    if (!system || !ready || failed) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.lazy((0, _loadComponent.default)(system.scope, system.module, system.url, undefined, system.preventSingleton));
-
-    /* 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.default.createElement(_react.default.Suspense, {
+  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)) : fallback;
+  }, /*#__PURE__*/_react.default.createElement(Component, props));
 };
 const ModuleHost = ({
   system,
@@ -80,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
     },