chayns-api 3.0.0 → 3.1.0-beta.0

package/dist/esm/hooks/history.js

@@ -0,0 +1,428 @@
+import { c as _c } from "react-compiler-runtime";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
+import { useChaynsHistoryLayerContext } from '../contexts/HistoryLayerContext';
+import { shallowEqualObj } from '../utils/equality';
+export function useChaynsHistoryLayer() {
+  const $ = _c(1);
+  const ctx = useChaynsHistoryLayerContext();
+  if (ctx) {
+    return ctx;
+  }
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    var _chaynsHost, _chaynsHost$getOwnLay;
+    t0 = typeof window !== "undefined" ? (_chaynsHost = window.__chaynsHost) === null || _chaynsHost === void 0 || (_chaynsHost = _chaynsHost.history) === null || _chaynsHost === void 0 || (_chaynsHost$getOwnLay = _chaynsHost.getOwnLayer) === null || _chaynsHost$getOwnLay === void 0 ? void 0 : _chaynsHost$getOwnLay.call(_chaynsHost) : undefined;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const globalLayer = t0;
+  if (globalLayer) {
+    return globalLayer;
+  }
+  throw new Error("[chaynsHistory] useChaynsHistoryLayer must be used inside a <ChaynsHistoryLayerProvider>.");
+}
+export function useChaynsHistoryRoute() {
+  const $ = _c(10);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const segRef = useRef(t0);
+  let t1;
+  if ($[1] !== layer) {
+    t1 = () => {
+      const next = layer.getRoute();
+      const prev = segRef.current;
+      if (prev.length === next.length && prev.every((s, i) => s === next[i])) {
+        return prev;
+      }
+      return segRef.current = next;
+    };
+    $[1] = layer;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const getSnapshot = t1;
+  let t2;
+  if ($[3] !== layer) {
+    t2 = notify => {
+      const unsub1 = layer.addEventListener("change", notify);
+      const unsub2 = layer.addEventListener("popstate", notify);
+      return () => {
+        unsub1();
+        unsub2();
+      };
+    };
+    $[3] = layer;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const subscribe = t2;
+  const segments = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  let t3;
+  if ($[5] !== layer) {
+    t3 = (route, opts) => layer.setRoute(route, opts);
+    $[5] = layer;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const setRoute = t3;
+  let t4;
+  if ($[7] !== segments || $[8] !== setRoute) {
+    t4 = {
+      segments,
+      setRoute
+    };
+    $[7] = segments;
+    $[8] = setRoute;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+export function useChaynsHistoryState() {
+  const $ = _c(9);
+  const layer = useChaynsHistoryLayer();
+  const stateRef = useRef(undefined);
+  let t0;
+  if ($[0] !== layer) {
+    t0 = () => {
+      const next = layer.getState();
+      if (shallowEqualStateSnapshot(stateRef.current, next)) {
+        return stateRef.current;
+      }
+      return stateRef.current = next;
+    };
+    $[0] = layer;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const getSnapshot = t0;
+  let t1;
+  if ($[2] !== layer) {
+    t1 = notify => {
+      const unsub1 = layer.addEventListener("change", notify);
+      const unsub2 = layer.addEventListener("popstate", notify);
+      return () => {
+        unsub1();
+        unsub2();
+      };
+    };
+    $[2] = layer;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const subscribe = t1;
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  let t2;
+  if ($[4] !== layer) {
+    t2 = (s, opts) => layer.setState(s, opts);
+    $[4] = layer;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const setState = t2;
+  let t3;
+  if ($[6] !== setState || $[7] !== state) {
+    t3 = [state, setState];
+    $[6] = setState;
+    $[7] = state;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+export function useChaynsHistoryNavigate() {
+  const $ = _c(2);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] !== layer) {
+    t0 = opts => layer.navigate(opts);
+    $[0] = layer;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+export function useChaynsHistoryParams() {
+  const $ = _c(10);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const paramsRef = useRef(t0);
+  let t1;
+  if ($[1] !== layer) {
+    t1 = () => {
+      const next = layer.getParams();
+      if (shallowEqualObj(paramsRef.current, next)) {
+        return paramsRef.current;
+      }
+      return paramsRef.current = next;
+    };
+    $[1] = layer;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const getSnapshot = t1;
+  let t2;
+  if ($[3] !== layer) {
+    t2 = notify => {
+      const unsub1 = layer.addEventListener("change", notify);
+      const unsub2 = layer.addEventListener("popstate", notify);
+      return () => {
+        unsub1();
+        unsub2();
+      };
+    };
+    $[3] = layer;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const subscribe = t2;
+  const params = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  let t3;
+  if ($[5] !== layer) {
+    t3 = (p, opts) => layer.setParams(p, opts);
+    $[5] = layer;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const setParams = t3;
+  let t4;
+  if ($[7] !== params || $[8] !== setParams) {
+    t4 = [params, setParams];
+    $[7] = params;
+    $[8] = setParams;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+export function useChaynsHistoryHash() {
+  const $ = _c(11);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] !== layer) {
+    t0 = notify => {
+      const unsub1 = layer.addEventListener("change", notify);
+      const unsub2 = layer.addEventListener("popstate", notify);
+      return () => {
+        unsub1();
+        unsub2();
+      };
+    };
+    $[0] = layer;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const subscribe = t0;
+  let t1;
+  if ($[2] !== layer) {
+    t1 = () => layer.getHash();
+    $[2] = layer;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const getSnapshot = t1;
+  let t2;
+  if ($[4] !== layer) {
+    t2 = () => layer.getHash();
+    $[4] = layer;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const getServerSnapshot = t2;
+  const hash = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  let t3;
+  if ($[6] !== layer) {
+    t3 = (h, opts) => layer.setHash(h, opts);
+    $[6] = layer;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const setHash = t3;
+  let t4;
+  if ($[8] !== hash || $[9] !== setHash) {
+    t4 = [hash, setHash];
+    $[8] = hash;
+    $[9] = setHash;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+export function useChaynsHistoryBlock(callback, t0) {
+  const $ = _c(9);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const opts = t1;
+  const layer = useChaynsHistoryLayer();
+  const {
+    isEnabled: t2,
+    scope,
+    isBeforeUnload
+  } = opts;
+  const isEnabled = t2 === undefined ? true : t2;
+  let t3;
+  let t4;
+  if ($[2] !== callback || $[3] !== isBeforeUnload || $[4] !== isEnabled || $[5] !== layer || $[6] !== scope) {
+    t3 = () => {
+      if (!isEnabled) {
+        return;
+      }
+      return layer.addBlock(callback, {
+        scope,
+        isBeforeUnload
+      });
+    };
+    t4 = [layer, callback, isEnabled, scope, isBeforeUnload];
+    $[2] = callback;
+    $[3] = isBeforeUnload;
+    $[4] = isEnabled;
+    $[5] = layer;
+    $[6] = scope;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t3 = $[7];
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+}
+export function useChaynsHistoryEvent(type, handler) {
+  const $ = _c(5);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  let t1;
+  if ($[0] !== handler || $[1] !== layer || $[2] !== type) {
+    t0 = () => layer.addEventListener(type, handler);
+    t1 = [layer, type, handler];
+    $[0] = handler;
+    $[1] = layer;
+    $[2] = type;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+}
+export function useChaynsHistoryChildLayer(id) {
+  const $ = _c(6);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] !== id || $[1] !== layer) {
+    t0 = layer.getChildLayer(id);
+    $[0] = id;
+    $[1] = layer;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let child = t0;
+  if (!child) {
+    let t1;
+    if ($[3] !== id || $[4] !== layer) {
+      t1 = layer.createChildLayer(id);
+      $[3] = id;
+      $[4] = layer;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    child = t1;
+  }
+  return child;
+}
+export function useChaynsHistoryActiveChild() {
+  const $ = _c(9);
+  const layer = useChaynsHistoryLayer();
+  let t0;
+  if ($[0] !== layer) {
+    t0 = notify => layer.addEventListener("change", notify);
+    $[0] = layer;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const subscribe = t0;
+  let t1;
+  if ($[2] !== layer) {
+    t1 = () => layer.getActiveChildId();
+    $[2] = layer;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const getSnapshot = t1;
+  const activeChildId = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  let t2;
+  if ($[4] !== layer) {
+    t2 = (id, init) => layer.setActiveChild(id, init);
+    $[4] = layer;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const setActiveChild = t2;
+  let t3;
+  if ($[6] !== activeChildId || $[7] !== setActiveChild) {
+    t3 = {
+      activeChildId,
+      setActiveChild
+    };
+    $[6] = activeChildId;
+    $[7] = setActiveChild;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+function shallowEqualStateSnapshot(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ak = Object.keys(a);
+  const bk = Object.keys(b);
+  if (ak.length !== bk.length) return false;
+  for (const k of ak) {
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+export { ChaynsHistoryLayerProvider, useChaynsHistoryLayerContext } from '../contexts/HistoryLayerContext';

package/dist/esm/hooks/index.js

@@ -18,4 +18,5 @@ export { useDialogState, useDialogData } from './useDialogState';
 export { useCustomCallbackFunction } from './useCustomCallbackFunction';
 export { useCustomFunction } from './useCustomFunction';
 export { useStyleSettings } from './useStyleSettings';
-export { useChaynsApiId } from './useChaynsApiId';
+export { useChaynsApiId } from './useChaynsApiId';
+export { useChaynsHistoryLayer, useChaynsHistoryRoute, useChaynsHistoryParams, useChaynsHistoryHash, useChaynsHistoryState, useChaynsHistoryNavigate, useChaynsHistoryBlock, useChaynsHistoryEvent, useChaynsHistoryChildLayer, useChaynsHistoryActiveChild } from './history';

package/dist/esm/host/ChaynsHost.js

@@ -2,9 +2,11 @@ import { c as _c } from "react-compiler-runtime";
 import React, { useDeferredValue, useSyncExternalStore } from 'react';
 import HostIframe from './iframe/HostIframe';
 import ModuleHost from './module/ModuleHost';
+import { ChaynsHistoryLayerProvider } from '../contexts/HistoryLayerContext';
+import { getOrInitRootChaynsHistoryLayer } from '../utils/history/rootLayer';
 const subscribeToHydration = () => () => {};
 const ChaynsHost = t0 => {
-  const $ = _c(38);
+  const $ = _c(53);
   const {
     type,
     iFrameProps,
@@ -26,24 +28,51 @@ const ChaynsHost = t0 => {
     environment,
     preventStagingReplacement,
     dialog,
-    styleSettings
+    styleSettings,
+    historyLayer,
+    historyChildId,
+    isHistoryDisabled: t3
   } = t0;
   const iFrameRef = t1 === undefined ? undefined : t1;
   const loadingComponent = t2 === undefined ? undefined : t2;
+  const isHistoryDisabled = t3 === undefined ? true : t3;
   const isInitiallyVisible = type !== "client-module" && (type !== "server-module" || !!(system !== null && system !== void 0 && system.serverUrl));
   const isHydrated = useSyncExternalStore(subscribeToHydration, _temp, _temp2);
   const isVisible = useDeferredValue(isInitiallyVisible || isHydrated);
   if (!isVisible) {
     return null;
   }
+  let t4;
+  if ($[0] !== historyLayer) {
+    t4 = historyLayer !== null && historyLayer !== void 0 ? historyLayer : getOrInitRootChaynsHistoryLayer().rootLayer;
+    $[0] = historyLayer;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const resolvedLayer = t4;
+  let layer;
+  if (!isHistoryDisabled) {
+    let t5;
+    if ($[2] !== historyChildId || $[3] !== resolvedLayer) {
+      var _resolvedLayer$getChi;
+      t5 = historyChildId ? (_resolvedLayer$getChi = resolvedLayer.getChildLayer(historyChildId)) !== null && _resolvedLayer$getChi !== void 0 ? _resolvedLayer$getChi : resolvedLayer.createChildLayer(historyChildId) : resolvedLayer;
+      $[2] = historyChildId;
+      $[3] = resolvedLayer;
+      $[4] = t5;
+    } else {
+      t5 = $[4];
+    }
+    layer = t5;
+  }
   switch (type) {
     case "client-iframe":
     case "server-iframe":
       {
-        const t3 = type === "server-iframe";
-        let t4;
-        if ($[0] !== currentPage || $[1] !== customData || $[2] !== customFunctions || $[3] !== device || $[4] !== dialog || $[5] !== environment || $[6] !== functions || $[7] !== iFrameProps || $[8] !== iFrameRef || $[9] !== isAdminModeActive || $[10] !== language || $[11] !== pages || $[12] !== parameters || $[13] !== preventStagingReplacement || $[14] !== site || $[15] !== src || $[16] !== styleSettings || $[17] !== t3 || $[18] !== user) {
-          t4 = React.createElement(HostIframe, {
+        const t5 = type === "server-iframe";
+        let t6;
+        if ($[5] !== currentPage || $[6] !== customData || $[7] !== customFunctions || $[8] !== device || $[9] !== dialog || $[10] !== environment || $[11] !== functions || $[12] !== iFrameProps || $[13] !== iFrameRef || $[14] !== isAdminModeActive || $[15] !== isHistoryDisabled || $[16] !== language || $[17] !== layer || $[18] !== pages || $[19] !== parameters || $[20] !== preventStagingReplacement || $[21] !== site || $[22] !== src || $[23] !== styleSettings || $[24] !== t5 || $[25] !== user) {
+          t6 = React.createElement(HostIframe, {
             iFrameRef: iFrameRef,
             iFrameProps: iFrameProps,
             pages: pages,
@@ -55,46 +84,61 @@ const ChaynsHost = t0 => {
             functions: functions,
             customFunctions: customFunctions,
             src: src,
-            postForm: t3,
+            postForm: t5,
             language: language,
             parameters: parameters,
             environment: environment,
             customData: customData,
             preventStagingReplacement: preventStagingReplacement,
             dialog: dialog,
-            styleSettings: styleSettings
+            styleSettings: styleSettings,
+            historyLayer: layer,
+            isHistoryDisabled: isHistoryDisabled
           });
-          $[0] = currentPage;
-          $[1] = customData;
-          $[2] = customFunctions;
-          $[3] = device;
-          $[4] = dialog;
-          $[5] = environment;
-          $[6] = functions;
-          $[7] = iFrameProps;
-          $[8] = iFrameRef;
-          $[9] = isAdminModeActive;
-          $[10] = language;
-          $[11] = pages;
-          $[12] = parameters;
-          $[13] = preventStagingReplacement;
-          $[14] = site;
-          $[15] = src;
-          $[16] = styleSettings;
-          $[17] = t3;
-          $[18] = user;
-          $[19] = t4;
+          $[5] = currentPage;
+          $[6] = customData;
+          $[7] = customFunctions;
+          $[8] = device;
+          $[9] = dialog;
+          $[10] = environment;
+          $[11] = functions;
+          $[12] = iFrameProps;
+          $[13] = iFrameRef;
+          $[14] = isAdminModeActive;
+          $[15] = isHistoryDisabled;
+          $[16] = language;
+          $[17] = layer;
+          $[18] = pages;
+          $[19] = parameters;
+          $[20] = preventStagingReplacement;
+          $[21] = site;
+          $[22] = src;
+          $[23] = styleSettings;
+          $[24] = t5;
+          $[25] = user;
+          $[26] = t6;
+        } else {
+          t6 = $[26];
+        }
+        let t7;
+        if ($[27] !== resolvedLayer || $[28] !== t6) {
+          t7 = React.createElement(ChaynsHistoryLayerProvider, {
+            layer: resolvedLayer
+          }, t6);
+          $[27] = resolvedLayer;
+          $[28] = t6;
+          $[29] = t7;
         } else {
-          t4 = $[19];
+          t7 = $[29];
         }
-        return t4;
+        return t7;
       }
     case "client-module":
     case "server-module":
       {
-        let t3;
-        if ($[20] !== currentPage || $[21] !== customData || $[22] !== customFunctions || $[23] !== device || $[24] !== dialog || $[25] !== environment || $[26] !== functions || $[27] !== isAdminModeActive || $[28] !== language || $[29] !== loadingComponent || $[30] !== pages || $[31] !== parameters || $[32] !== preventStagingReplacement || $[33] !== site || $[34] !== styleSettings || $[35] !== system || $[36] !== user) {
-          t3 = React.createElement(ModuleHost, {
+        let t5;
+        if ($[30] !== currentPage || $[31] !== customData || $[32] !== customFunctions || $[33] !== device || $[34] !== dialog || $[35] !== environment || $[36] !== functions || $[37] !== isAdminModeActive || $[38] !== isHistoryDisabled || $[39] !== language || $[40] !== layer || $[41] !== loadingComponent || $[42] !== pages || $[43] !== parameters || $[44] !== preventStagingReplacement || $[45] !== site || $[46] !== styleSettings || $[47] !== system || $[48] !== user) {
+          t5 = React.createElement(ModuleHost, {
             system: system,
             pages: pages,
             isAdminModeActive: isAdminModeActive,
@@ -111,30 +155,45 @@ const ChaynsHost = t0 => {
             environment: environment,
             preventStagingReplacement: preventStagingReplacement,
             dialog: dialog,
-            styleSettings: styleSettings
+            styleSettings: styleSettings,
+            historyLayer: layer,
+            isHistoryDisabled: isHistoryDisabled
           });
-          $[20] = currentPage;
-          $[21] = customData;
-          $[22] = customFunctions;
-          $[23] = device;
-          $[24] = dialog;
-          $[25] = environment;
-          $[26] = functions;
-          $[27] = isAdminModeActive;
-          $[28] = language;
-          $[29] = loadingComponent;
-          $[30] = pages;
-          $[31] = parameters;
-          $[32] = preventStagingReplacement;
-          $[33] = site;
-          $[34] = styleSettings;
-          $[35] = system;
-          $[36] = user;
-          $[37] = t3;
+          $[30] = currentPage;
+          $[31] = customData;
+          $[32] = customFunctions;
+          $[33] = device;
+          $[34] = dialog;
+          $[35] = environment;
+          $[36] = functions;
+          $[37] = isAdminModeActive;
+          $[38] = isHistoryDisabled;
+          $[39] = language;
+          $[40] = layer;
+          $[41] = loadingComponent;
+          $[42] = pages;
+          $[43] = parameters;
+          $[44] = preventStagingReplacement;
+          $[45] = site;
+          $[46] = styleSettings;
+          $[47] = system;
+          $[48] = user;
+          $[49] = t5;
+        } else {
+          t5 = $[49];
+        }
+        let t6;
+        if ($[50] !== resolvedLayer || $[51] !== t5) {
+          t6 = React.createElement(ChaynsHistoryLayerProvider, {
+            layer: resolvedLayer
+          }, t5);
+          $[50] = resolvedLayer;
+          $[51] = t5;
+          $[52] = t6;
         } else {
-          t3 = $[37];
+          t6 = $[52];
         }
-        return t3;
+        return t6;
       }
     default:
       {