chayns-api 1.0.68-0 → 1.0.69

package/dist/esm/hooks/scrollListener.js

@@ -2,8 +2,8 @@ import { useContextSelector } from 'use-context-selector';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChaynsFunctionsContext } from '../components/ChaynsContext';
 import { useWindowMetrics } from './windowMetricsListener';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useScrollListener = () => {
   const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addScrollListener);
@@ -18,8 +18,8 @@ export const useScrollListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useScrollPosition = function () {
   let {
@@ -46,8 +46,8 @@ export const useScrollPosition = function () {
   }, [getScrollPosition]);
   return value;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useScrollOffsetTop = function () {
   let {
@@ -69,8 +69,8 @@ export const useScrollOffsetTop = function () {
   }
   return 0;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useScrollOffsetBottom = function () {
   let {

package/dist/esm/hooks/useAccessToken.js

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { useContextSelector } from "use-context-selector";
 import { ChaynsFunctionsContext } from "../components/ChaynsContext";
 
-/**
- * @category Hooks
- * @deprecated Use {@link getAccessToken} instead
+/**
+ * @category Hooks
+ * @deprecated Use {@link getAccessToken} instead
  */
 export const useAccessToken = accessToken => {
   const [token, setToken] = useState(null);

package/dist/esm/hooks/useCurrentPage.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useCurrentPage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.currentPage);

package/dist/esm/hooks/useCustomData.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useCustomData = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.customData);

package/dist/esm/hooks/useDevice.js

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

package/dist/esm/hooks/useDialogState.js

@@ -1,8 +1,8 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext, ChaynsFunctionsContext } from '../components/ChaynsContext';
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useDialogState = () => {
   const setResult = useContextSelector(ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.setDialogResult);
@@ -20,8 +20,8 @@ export const useDialogState = () => {
   };
 };
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useDialogData = () => {
   const inputData = useContextSelector(ChaynsContext, v => {

package/dist/esm/hooks/useEnvironment.js

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

package/dist/esm/hooks/useFunctions.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from "use-context-selector";
 import { ChaynsFunctionsContext } from "../components/ChaynsContext";
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useFunctions = () => {
   const t = useContextSelector(ChaynsFunctionsContext, f => f || {});

package/dist/esm/hooks/useIsAdminMode.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useIsAdminMode = () => {
   var _useContextSelector;

package/dist/esm/hooks/useLanguage.js

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

package/dist/esm/hooks/usePages.js

@@ -1,8 +1,8 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 import { moduleWrapper } from '../components/moduleWrapper';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePages = function () {
   let {
@@ -16,8 +16,8 @@ export const usePages = function () {
   }
   return pages;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePage = _ref => {
   let {

package/dist/esm/hooks/useParameters.js

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

package/dist/esm/hooks/useSite.js

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

package/dist/esm/hooks/useUser.js

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

package/dist/esm/hooks/useValues.js

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

package/dist/esm/hooks/windowMetricsListener.js

@@ -2,8 +2,8 @@ import { useContextSelector } from 'use-context-selector';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChaynsFunctionsContext } from '../components/ChaynsContext';
 import { ScreenSize } from '../types/IChaynsReact';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useWindowMetricsListener = () => {
   const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addWindowMetricsListener);
@@ -18,8 +18,8 @@ export const useWindowMetricsListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useWindowMetrics = function () {
   let {

package/dist/esm/host/ChaynsHost.js

@@ -1,4 +1,4 @@
-import React, { startTransition, useEffect, useState } from 'react';
+import React from 'react';
 import HostIframe from './iframe/HostIframe';
 import ModuleHost from './module/ModuleHost';
 const ChaynsHost = _ref => {
@@ -9,6 +9,7 @@ const ChaynsHost = _ref => {
     src,
     iFrameRef = undefined,
     loadingComponent = undefined,
+    children = undefined,
     system,
     // shallow data
     pages,
@@ -24,23 +25,8 @@ 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,
@@ -52,7 +38,6 @@ const ChaynsHost = _ref => {
         currentPage: currentPage,
         functions: functions,
         src: src,
-        postForm: type === 'server-iframe',
         language: language,
         parameters: parameters,
         environment: environment,
@@ -61,7 +46,6 @@ const ChaynsHost = _ref => {
         dialog: dialog
       });
     case 'client-module':
-    case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
         system: system,
         pages: pages,
@@ -79,6 +63,43 @@ 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/iframe/HostIframe.js

@@ -1,4 +1,4 @@
-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); }
+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); }
 import React, { useEffect, useRef } from 'react';
 import * as comlink from 'comlink';
 import postIframeForm from '../../util/postIframeForm';

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import useDynamicScript from './utils/useDynamicScript';
 import loadComponent from './utils/loadComponent';
 import { replaceStagingUrl } from "../../util/url";
 const System = _ref => {
@@ -7,10 +8,25 @@ const System = _ref => {
     fallback,
     ...props
   } = _ref;
-  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, {
+  const {
+    ready,
+    failed
+  } = useDynamicScript({
+    url: system === null || system === void 0 ? void 0 : system.url,
+    scope: system === null || system === void 0 ? void 0 : system.scope
+  });
+  const Component = useMemo(() => {
+    // maybe return waitcursor instead
+    if (!system || !ready || failed) {
+      return null;
+    }
+    return /*#__PURE__*/React.lazy(loadComponent(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.createElement(React.Suspense, {
     fallback: fallback || ''
-  }, /*#__PURE__*/React.createElement(Component, props));
+  }, /*#__PURE__*/React.createElement(Component, props)) : fallback;
 };
 const ModuleHost = _ref2 => {
   let {
@@ -57,7 +73,6 @@ 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,106 +1,60 @@
-var _process$env$__PACKAG;
-import ReactDOM from 'react-dom';
+/* eslint-disable */
+// @ts-nocheck
+
 import semver from 'semver';
 import React from 'react';
-import { loadRemote, registerRemotes, loadShareSync, init } from '@module-federation/runtime';
-const registeredScopes = {};
-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 || preventSingleton
-    });
-    registeredScopes[scope] = url;
-    moduleMap[scope] = {};
-    componentMap[scope] = {};
-  }
-  if (!(module in moduleMap[scope])) {
-    const path = `${scope}/${module.replace(/^\.\//, '')}`;
-    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) {
+import { semaphore } from './useDynamicScript';
+let instances = {};
+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');
-  }
-  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];
-          }
-        });
-      });
-      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.CompatComponent
-        };
+  return async () => {
+    // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
+    await __webpack_init_sharing__('default');
+    const {
+      container
+    } = window[scope + "_list"].find(x => x.url === url); // or get the container somewhere else
+    // Initialize the container, it may provide shared modules
+    await container.init(__webpack_share_scopes__.default);
+    const factory = await container.get(module);
+    semaphore[scope].release();
+    let ModuleMap = instances[`${scope}__${module}`];
+    let Module;
+    if (!ModuleMap) {
+      ModuleMap = {};
+      instances[`${scope}__${module}`] = ModuleMap;
+    }
+    if (Object.keys(ModuleMap).length > 0) {
+      const newModule = factory();
+      Module = ModuleMap[`${newModule.default.buildEnv}__${newModule.default.appVersion}`];
+      if (!Module) {
+        Module = newModule;
+        ModuleMap[`${newModule.default.buildEnv}__${newModule.default.appVersion}`] = newModule;
       }
+    } else {
+      Module = factory();
+      ModuleMap[`${Module.default.buildEnv}__${Module.default.appVersion}`] = Module;
+    }
+    if (preventSingleton) {
+      // Intercom :)
+      window[scope + "_list"] = null;
+    }
+    if (skipCompatMode) return Module;
+    const hostVersion = semver.minVersion(React.version);
+    const {
+      requiredVersion,
+      environment
+    } = Module.default;
+    const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion) && !Object.keys(__webpack_share_scopes__.default.react).some(version => {
+      return semver.gt(version, hostVersion) && semver.satisfies(version, requiredVersion) || scope === __webpack_share_scopes__.default.react[version].from.split('-').join('_');
+    });
+    if (!matchReactVersion || environment !== 'production' || process.env.NODE_ENV === 'development') {
       return {
-        default: Module.default.Component
+        default: Module.default.CompatComponent
       };
-    });
-    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 componentMap[scope][module];
-};
-export default loadComponent;
+    }
+    return {
+      default: Module.default.Component
+    };
+  };
+}

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

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import Semaphore from 'semaphore-async-await';
+export const semaphore = {};
+const useDynamicScript = args => {
+  const [ready, setReady] = React.useState(false);
+  const [failed, setFailed] = React.useState(false);
+  useEffect(() => {
+    if (!args.url) {
+      return undefined;
+    }
+    const element = document.createElement('script');
+    element.src = args.url;
+    element.type = 'text/javascript';
+    element.async = true;
+    setReady(false);
+    setFailed(false);
+    if (!(args.scope in semaphore)) {
+      semaphore[args.scope] = new Semaphore(1);
+    }
+    (async () => {
+      await semaphore[args.scope].acquire();
+      element.onload = () => {
+        setReady(true);
+        const listKey = args.scope + "_list";
+        if (!window[listKey]) window[listKey] = [];
+        window[listKey].push({
+          url: args.url,
+          container: window[args.scope]
+        });
+        window[args.scope] = null;
+      };
+      element.onerror = () => {
+        setReady(false);
+        setFailed(true);
+      };
+      document.head.appendChild(element);
+    })();
+    return () => {
+      semaphore[args.scope].release();
+      if (document.head.contains(element)) {
+        document.head.removeChild(element);
+      }
+    };
+  }, [args.url]);
+  return {
+    ready,
+    failed
+  };
+};
+export default useDynamicScript;

package/dist/esm/index.js

@@ -8,10 +8,7 @@ export * from './hooks';
 export * from './components/WaitUntil';
 export * from './types/IChaynsReact';
 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, loadModule } from './host/module/utils/loadComponent';
 export { default as DialogHandler } from './handler/DialogHandler';
 import * as _dialog from './calls/dialogs/index';
 export { _dialog as dialog };

package/dist/esm/types/IChaynsReact.js

@@ -40,12 +40,12 @@ export let ScreenSize = /*#__PURE__*/function (ScreenSize) {
   return ScreenSize;
 }({});
 
-/**
- * @ignore
+/**
+ * @ignore
  */
 
-/**
- * @ignore
+/**
+ * @ignore
  */
 
 export let AccessMode = /*#__PURE__*/function (AccessMode) {

package/dist/esm/util/url.js

@@ -1,6 +1,6 @@
-import { Environment } from '../types/IChaynsReact';
+import { Environment } from "../types/IChaynsReact";
 export const replaceStagingUrl = (prevent, url, environment) => {
-  if (prevent || !url) return url;
+  if (prevent) return url;
   let replacedUrl = url;
   if (environment === Environment.Qa || environment === Environment.Development) {
     replacedUrl = replacedUrl.replace('tapp.chayns-static.space', 'tapp-dev.chayns-static.space');