chayns-api 1.1.0-2 → 1.1.0-21

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,
@@ -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/iframe/HostIframe.js

@@ -31,10 +31,9 @@ const HostIframe = _ref => {
   if (!eventTarget.current) {
     eventTarget.current = global.document ? document.createElement('div') : undefined; // global.EventTarget ? new EventTarget() : undefined
   }
-
   const setHeight = value => {
     if (ref.current) {
-      ref.current.height = `${value}px`;
+      ref.current.style.height = `${value}px`;
     }
   };
 

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

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import useDynamicScript from './utils/useDynamicScript';
 import loadComponent from './utils/loadComponent';
 import { replaceStagingUrl } from "../../util/url";
 const System = _ref => {
@@ -8,25 +7,10 @@ const System = _ref => {
     fallback,
     ...props
   } = _ref;
-  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));
-
-    /* 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, {
+  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)) : fallback;
+  }, /*#__PURE__*/React.createElement(Component, props));
 };
 const ModuleHost = _ref2 => {
   let {
@@ -73,7 +57,9 @@ const ModuleHost = _ref2 => {
     system: {
       scope: system.scope,
       url: replaceStagingUrl(preventStagingReplacement, system.url, environment.buildEnvironment),
-      module: system.module
+      serverUrl: replaceStagingUrl(preventStagingReplacement, system.serverUrl, environment.buildEnvironment),
+      module: system.module,
+      preventSingleton: system.preventSingleton
     },
     data: initialData,
     functions: functions,

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

@@ -0,0 +1,135 @@
+import { semaphore } from "./utils/useDynamicScript";
+import Semaphore from "semaphore-async-await";
+import loadComponent from "./utils/loadComponent";
+import React from "react";
+const Test = () => {
+  return /*#__PURE__*/React.createElement("div", null, "Test12");
+};
+const Test2 = _ref => {
+  let {
+    fallback
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", null, fallback);
+};
+let status = 'pending';
+let error = false;
+function wrapPromise(promise) {
+  console.log("nice2222");
+  let response;
+  const suspender = promise.then(res => {
+    console.log("settttttt");
+    status = 'success';
+    response = res;
+  }, err => {
+    console.error(err);
+    status = 'error';
+    response = err;
+  });
+  const read = () => {
+    console.log("status", status);
+    switch (status) {
+      case 'pending':
+        throw suspender;
+      case 'error':
+        throw response;
+      default:
+        return response;
+    }
+  };
+  console.log("nice33333");
+  return {
+    read
+  };
+}
+export function fetchData(url) {
+  console.log("ahhh");
+  const promise = fetch(url).then(async res => {
+    var t = await res.json();
+    console.log("tttt", t);
+    return {
+      test: 1
+    };
+  });
+  return wrapPromise(promise);
+}
+let Raw = Test;
+const Component = _ref2 => {
+  let {
+    fallback,
+    system
+  } = _ref2;
+  //
+  // return <div>Nice</div>;
+
+  const p = new Promise(async res => {
+    if (!global.window) {
+      Raw = Test2;
+      res(true);
+      return;
+    }
+    const args = {
+      url: system.url,
+      scope: system === null || system === void 0 ? void 0 : system.scope
+    };
+    if (!args.url) {
+      return undefined;
+    }
+    const element = document.createElement('script');
+    element.src = args.url;
+    element.type = 'text/javascript';
+    element.async = true;
+    if (!(args.scope in semaphore)) {
+      semaphore[args.scope] = new Semaphore(1);
+    }
+    (async () => {
+      await semaphore[args.scope].acquire();
+      element.onload = async () => {
+        await new Promise(r => setTimeout(r, 3000));
+        console.log('dsajkhdkjashdkjashdkashjkdhsjakhdkjsa');
+        const listKey = args.scope + "_list";
+        if (!window[listKey]) window[listKey] = [];
+        window[listKey].push({
+          url: args.url,
+          container: window[args.scope]
+        });
+        window[args.scope] = null;
+        const tt = () => new Promise(async r2 => {
+          var test1 = await (await loadComponent(system.scope, system.module, system.url, undefined, system.preventSingleton))();
+          console.log("ööööö", test1.default);
+          r2(test1.default);
+        });
+
+        // return React.lazy(tt);
+        Raw = await tt();
+        res(true);
+        console.log("Raw", Raw);
+      };
+      element.onerror = () => {
+        console.log("errorrrrrrrrrrrr");
+        res(false);
+      };
+      document.head.appendChild(element);
+    })();
+  });
+  const l = wrapPromise(p);
+  console.error("l.read", status);
+  l.read();
+  console.error("l.read2", error, Raw);
+  // !system || !ready || failed
+
+  if (error) {
+    return /*#__PURE__*/React.createElement(Test, null);
+  }
+  if (global.window) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Raw, {
+      fallback: fallback
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Raw, {
+    fallback: fallback
+  });
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+};
+
+export default Component;

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

@@ -1,55 +1,101 @@
-/* eslint-disable */
-// @ts-nocheck
-
+import ReactDOM from 'react-dom';
 import semver from 'semver';
 import React from 'react';
-import { semaphore } from './useDynamicScript';
-let instances = {};
-export default function loadComponent(scope, module, url) {
-  let skipCompatMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return async () => {
-    // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
-    // eslint-disable-next-line no-undef
-    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
-    // eslint-disable-next-line no-undef
-    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;
+import { loadRemote, registerRemotes, loadShareSync, init } from '@module-federation/runtime';
+const registeredScopes = {};
+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
     }
-    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;
+  }
+});
+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}`);
     }
-    if (skipCompatMode) return Module;
-    const hostVersion = semver.minVersion(React.version);
-    const {
-      requiredVersion,
-      environment
-    } = Module.default;
-    const matchReactVersion = requiredVersion && semver.satisfies(hostVersion, requiredVersion);
-    if (!matchReactVersion || environment !== 'production') {
+    registerRemotes([{
+      name: scope,
+      entry: url,
+      alias: scope
+    }], {
+      force: scope in registeredScopes
+    });
+    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) {
+  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(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.CompatComponent
+        };
+      }
       return {
-        default: Module.default.CompatComponent
+        default: Module.default.Component
       };
-    }
-    return {
-      default: Module.default.Component
-    };
-  };
-}
+    });
+    componentMap[scope][module] = /*#__PURE__*/React.lazy(() => promise);
+  }
+  return componentMap[scope][module];
+};
+export default loadComponent;

package/dist/esm/index.js

@@ -1,5 +1,6 @@
+import './util/transferNestedFunctions';
 export { default as ChaynsProvider } from './components/ChaynsProvider';
-export { default as getDeviceInfo, getScreenSize } from './util/deviceHelper';
+export { default as getDeviceInfo, getScreenSize, getClientDeviceInfo } from './util/deviceHelper';
 export { default as ChaynsHost } from './host/ChaynsHost';
 export { withCompatMode } from './components/withCompatMode';
 export * from './calls';
@@ -7,6 +8,11 @@ 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 };
 export * from './types/IChaynsReact';