chayns-api 3.0.0 → 3.1.0-beta.0

package/dist/cjs/utils/history/stateProjector.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._extractNode = extractNode;
+exports.applyStateToTree = applyStateToTree;
+exports.diffIncomingState = diffIncomingState;
+exports.hasChaynsHistoryState = hasChaynsHistoryState;
+exports.projectToState = projectToState;
+var _equality = require("../equality");
+const ROOT_KEY = '__chaynsHistory';
+const SCHEMA_VERSION = 1;
+function buildNode(layer) {
+  const node = {
+    ...layer._getOwnState()
+  };
+  const params = layer._getOwnParams();
+  if (Object.keys(params).length > 0) node.__params = {
+    ...params
+  };
+  const hash = layer._getOwnHash();
+  if (hash !== undefined) node.__hash = hash;
+  const activeChildId = layer.getActiveChildId();
+  if (activeChildId) {
+    node.activeChild = activeChildId;
+    const child = layer.getChildLayer(activeChildId);
+    if (child) {
+      node.childState = buildNode(child);
+    }
+  }
+  return node;
+}
+function projectToState(root, existing = {}) {
+  const tree = buildNode(root);
+  return {
+    ...existing,
+    [ROOT_KEY]: {
+      v: SCHEMA_VERSION,
+      tree
+    }
+  };
+}
+function applyNode(layer, node) {
+  const {
+    activeChild,
+    childState,
+    __params,
+    __hash,
+    ...ownProps
+  } = node;
+  layer._setOwnStateSilent(ownProps);
+  layer._setOwnParamsSilent(__params !== null && __params !== void 0 ? __params : {});
+  layer._setOwnHashSilent('__hash' in node ? __hash : undefined);
+  if (activeChild !== undefined) {
+    layer._setActiveChildSilent(activeChild);
+    if (childState) {
+      const child = layer.getChildLayer(activeChild);
+      if (child) applyNode(child, childState);
+    }
+  } else {
+    layer._setActiveChildSilent(null);
+  }
+}
+function applyStateToTree(root, raw) {
+  const node = extractNode(raw);
+  if (!node) return {
+    changedLayerIds: new Set()
+  };
+  const changedLayerIds = new Set();
+  applyNodeTracked(root, node, changedLayerIds);
+  return {
+    changedLayerIds
+  };
+}
+function diffIncomingState(root, raw) {
+  const node = extractNode(raw);
+  if (!node) return {
+    changedLayerIds: new Set()
+  };
+  const changedLayerIds = new Set();
+  diffNodeTracked(root, node, changedLayerIds);
+  return {
+    changedLayerIds
+  };
+}
+function extractNode(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  const entry = raw[ROOT_KEY];
+  if (!entry || typeof entry !== 'object') return null;
+  const {
+    tree
+  } = entry;
+  return tree !== null && tree !== void 0 ? tree : null;
+}
+function applyNodeTracked(layer, node, changed) {
+  const {
+    activeChild,
+    childState,
+    __params,
+    __hash,
+    ...ownProps
+  } = node;
+  const prevState = layer._getOwnState();
+  const prevActiveChild = layer.getActiveChildId();
+  const prevParams = layer._getOwnParams();
+  const prevHash = layer._getOwnHash();
+  const incomingParams = __params !== null && __params !== void 0 ? __params : {};
+  const incomingHash = '__hash' in node ? __hash : undefined;
+  const ownPropsClean = ownProps;
+  const stateChanged = !(0, _equality.shallowEqualObj)(prevState, ownPropsClean);
+  const activeChildChanged = prevActiveChild !== (activeChild !== null && activeChild !== void 0 ? activeChild : null);
+  const paramsChanged = !(0, _equality.shallowEqualObj)(prevParams, incomingParams);
+  const hashChanged = prevHash !== incomingHash;
+  const child = activeChild ? layer.getChildLayer(activeChild) : undefined;
+  layer._setOwnStateSilent(ownPropsClean);
+  layer._setActiveChildSilent(activeChild !== null && activeChild !== void 0 ? activeChild : null);
+  layer._setOwnParamsSilent(incomingParams);
+  layer._setOwnHashSilent(incomingHash);
+  if (stateChanged || activeChildChanged || paramsChanged || hashChanged) {
+    changed.add(layer.id);
+  }
+  if (activeChild && childState) {
+    if (child) applyNodeTracked(child, childState, changed);
+  }
+}
+function diffNodeTracked(layer, node, changed) {
+  const {
+    activeChild,
+    childState,
+    __params,
+    __hash,
+    ...ownProps
+  } = node;
+  const prevState = layer._getOwnState();
+  const prevActiveChild = layer.getActiveChildId();
+  const prevParams = layer._getOwnParams();
+  const prevHash = layer._getOwnHash();
+  const incomingParams = __params !== null && __params !== void 0 ? __params : {};
+  const incomingHash = '__hash' in node ? __hash : undefined;
+  const ownPropsClean = ownProps;
+  const stateChanged = !(0, _equality.shallowEqualObj)(prevState, ownPropsClean);
+  const activeChildChanged = prevActiveChild !== (activeChild !== null && activeChild !== void 0 ? activeChild : null);
+  const paramsChanged = !(0, _equality.shallowEqualObj)(prevParams, incomingParams);
+  const hashChanged = prevHash !== incomingHash;
+  const child = activeChild ? layer.getChildLayer(activeChild) : undefined;
+  if (stateChanged || activeChildChanged || paramsChanged || hashChanged) {
+    changed.add(layer.id);
+  }
+  if (activeChild && childState) {
+    if (child) diffNodeTracked(child, childState, changed);
+  }
+}
+function hasChaynsHistoryState(raw) {
+  return extractNode(raw) !== null;
+}

package/dist/cjs/utils/history/url.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseFromUrl = parseFromUrl;
+exports.projectToUrl = projectToUrl;
+var _layerTree = require("./layerTree");
+var _segments = require("./segments");
+function projectToUrl(root) {
+  const chain = (0, _layerTree.getChaynsHistoryActiveChain)(root);
+  const parts = [];
+  const mergedParams = {};
+  let hash;
+  for (const layer of chain) {
+    for (const seg of (0, _segments.normalizeHistorySegments)(layer._getOwnSegments())) {
+      parts.push(seg);
+    }
+    Object.assign(mergedParams, layer._getOwnParams());
+    const layerHash = layer._getOwnHash();
+    if (layerHash !== undefined) hash = layerHash;
+  }
+  let url = '/' + parts.join('/');
+  const search = new URLSearchParams(mergedParams).toString();
+  if (search) url += '?' + search;
+  if (hash) url += '#' + hash;
+  return url;
+}
+function parseFromUrl(url, root) {
+  const perLayerSegments = new Map();
+  const pathname = url.startsWith('/') ? url.slice(1) : url;
+  const all = pathname ? pathname.split('/') : [];
+  let offset = 0;
+  const chain = (0, _layerTree.getChaynsHistoryActiveChain)(root);
+  for (const layer of chain) {
+    const count = layer.getSegmentCount();
+    const slice = all.slice(offset, offset + count);
+    while (slice.length < count) slice.push('');
+    perLayerSegments.set(layer.id, slice);
+    offset += count;
+  }
+  const pendingSegments = offset < all.length ? all.slice(offset) : [];
+  return {
+    perLayerSegments,
+    pendingSegments
+  };
+}

package/dist/cjs/utils/history/window.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasWindowHistory = hasWindowHistory;
+function hasWindowHistory() {
+  return typeof window !== 'undefined' && typeof window.history !== 'undefined';
+}

package/dist/cjs/wrapper/AppWrapper.js

@@ -10,12 +10,12 @@ var _sendMessage = require("../calls/sendMessage");
 var _constants = require("../constants");
 var _languages = require("../constants/languages");
 var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
-var _apiListenerHelper = require("../helper/apiListenerHelper");
+var _apiListener = require("../utils/apiListener");
 var _IChaynsReact = require("../types/IChaynsReact");
-var _appCall = _interopRequireDefault(require("../util/appCall"));
-var _appStorage = require("../util/appStorage");
-var _deviceHelper = _interopRequireWildcard(require("../util/deviceHelper"));
-var _is = require("../util/is");
+var _appCall = _interopRequireDefault(require("../utils/appCall"));
+var _appStorage = require("../utils/appStorage");
+var _deviceHelper = _interopRequireWildcard(require("../utils/deviceHelper"));
+var _is = require("../utils/is");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class AppWrapper {
@@ -197,14 +197,14 @@ class AppWrapper {
       const {
         id,
         shouldInitialize
-      } = (0, _apiListenerHelper.addApiListener)('geoLocationListener', callback);
+      } = (0, _apiListener.addApiListener)('geoLocationListener', callback);
       if (shouldInitialize) {
         this.appCall(14, {
           permanent: true
         }, {
           callback: v => {
             var _v$accuracy, _v$isAccurate, _v$code;
-            (0, _apiListenerHelper.dispatchApiEvent)('geoLocationListener', {
+            (0, _apiListener.dispatchApiEvent)('geoLocationListener', {
               latitude: v.latitude,
               longitude: v.longitude,
               accuracy: (_v$accuracy = v.accuracy) !== null && _v$accuracy !== void 0 ? _v$accuracy : null,
@@ -225,11 +225,11 @@ class AppWrapper {
       const {
         id,
         shouldInitialize
-      } = (0, _apiListenerHelper.addApiListener)('scrollListener', throttledCallback);
+      } = (0, _apiListener.addApiListener)('scrollListener', throttledCallback);
       if (shouldInitialize) {
         window.addEventListener('scroll', this.scrollListener = () => {
           void (async () => {
-            (0, _apiListenerHelper.dispatchApiEvent)('scrollListener', {
+            (0, _apiListener.dispatchApiEvent)('scrollListener', {
               scrollX: window.scrollX,
               scrollY: window.scrollY
             });
@@ -242,11 +242,11 @@ class AppWrapper {
       const {
         id,
         shouldInitialize
-      } = (0, _apiListenerHelper.addApiListener)('visibilityChangeListener', callback);
+      } = (0, _apiListener.addApiListener)('visibilityChangeListener', callback);
       if (shouldInitialize) {
         this.appCall(60, {}, {
           callback: v => {
-            (0, _apiListenerHelper.dispatchApiEvent)('visibilityChangeListener', {
+            (0, _apiListener.dispatchApiEvent)('visibilityChangeListener', {
               isVisible: v.tappEvent !== _IChaynsReact.TappEvent.OnHide,
               tappEvent: v.tappEvent
             });
@@ -259,11 +259,11 @@ class AppWrapper {
       const {
         id,
         shouldInitialize
-      } = (0, _apiListenerHelper.addApiListener)('toolbarChangeListener', callback);
+      } = (0, _apiListener.addApiListener)('toolbarChangeListener', callback);
       if (shouldInitialize) {
         this.appCall(293, {}, {
           callback: v => {
-            (0, _apiListenerHelper.dispatchApiEvent)('toolbarChangeListener', {
+            (0, _apiListener.dispatchApiEvent)('toolbarChangeListener', {
               isVisible: v.isVisible,
               toolbarHeight: v.toolbarHeight
             });
@@ -276,11 +276,11 @@ class AppWrapper {
       const {
         id,
         shouldInitialize
-      } = (0, _apiListenerHelper.addApiListener)('windowMetricsListener', callback);
+      } = (0, _apiListener.addApiListener)('windowMetricsListener', callback);
       if (shouldInitialize) {
         window.addEventListener('resize', this.resizeListener = () => {
           void (async () => {
-            (0, _apiListenerHelper.dispatchApiEvent)('windowMetricsListener', await this.functions.getWindowMetrics());
+            (0, _apiListener.dispatchApiEvent)('windowMetricsListener', await this.functions.getWindowMetrics());
           })();
         });
       }
@@ -429,13 +429,13 @@ class AppWrapper {
     removeGeoLocationListener: async id => {
       const {
         shouldRemove
-      } = (0, _apiListenerHelper.removeApiListener)('geoLocationListener', id);
+      } = (0, _apiListener.removeApiListener)('geoLocationListener', id);
       if (shouldRemove) {}
     },
     removeScrollListener: async id => {
       const {
         shouldRemove
-      } = (0, _apiListenerHelper.removeApiListener)('scrollListener', id);
+      } = (0, _apiListener.removeApiListener)('scrollListener', id);
       if (shouldRemove && this.scrollListener) {
         window.removeEventListener('scroll', this.scrollListener);
         this.scrollListener = null;
@@ -444,17 +444,17 @@ class AppWrapper {
     removeVisibilityChangeListener: async id => {
       const {
         shouldRemove
-      } = (0, _apiListenerHelper.removeApiListener)('visibilityChangeListener', id);
+      } = (0, _apiListener.removeApiListener)('visibilityChangeListener', id);
       if (shouldRemove) {}
     },
     removeToolbarChangeListener: async id => {
       const {
         shouldRemove
-      } = (0, _apiListenerHelper.removeApiListener)('toolbarChangeListener', id);
+      } = (0, _apiListener.removeApiListener)('toolbarChangeListener', id);
       if (shouldRemove) {}
     },
     removeWindowMetricsListener: async id => {
-      const shouldRemove = (0, _apiListenerHelper.removeApiListener)('windowMetricsListener', id);
+      const shouldRemove = (0, _apiListener.removeApiListener)('windowMetricsListener', id);
       if (shouldRemove) {
         void this.exposedFunctions.removeWindowMetricsListener(id);
         if (this.resizeListener) window.removeEventListener('resize', this.resizeListener);
@@ -699,13 +699,13 @@ class AppWrapper {
     addAccessTokenChangeListener: async (options, callback) => {
       const {
         id
-      } = (0, _apiListenerHelper.addApiListener)('accessTokenChangeListener', callback);
+      } = (0, _apiListener.addApiListener)('accessTokenChangeListener', callback);
       return id;
     },
     removeAccessTokenChangeListener: async id => {
       const {
         shouldRemove
-      } = (0, _apiListenerHelper.removeApiListener)('accessTokenChangeListener', id);
+      } = (0, _apiListener.removeApiListener)('accessTokenChangeListener', id);
       if (shouldRemove) {}
     },
     redirect: async options => {
@@ -722,7 +722,7 @@ class AppWrapper {
     }, {
       callback: async () => {
         this.values = this.mapOldApiToNew(await this.appCall(18));
-        (0, _apiListenerHelper.dispatchApiEvent)('accessTokenChangeListener', {
+        (0, _apiListener.dispatchApiEvent)('accessTokenChangeListener', {
           accessToken: this.accessToken,
           isExternal: false
         });

package/dist/cjs/wrapper/FrameWrapper.js

@@ -9,8 +9,9 @@ var _getUserInfo = _interopRequireDefault(require("../calls/getUserInfo"));
 var _sendMessage = require("../calls/sendMessage");
 var _visibilityChangeListener = require("../calls/visibilityChangeListener");
 var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
-var _heightHelper = require("../util/heightHelper");
-var _transferNestedFunctions = require("../util/transferNestedFunctions");
+var _FrameHistoryLayer = require("../handler/history/FrameHistoryLayer");
+var _heightHelper = require("../utils/heightHelper");
+var _transferNestedFunctions = require("../utils/transferNestedFunctions");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 class FrameWrapper {
@@ -19,6 +20,7 @@ class FrameWrapper {
   exposedCustomFunctions = {};
   exposedCustomFunctionNames = [];
   resizeListener = null;
+  _historyLayer = null;
   ready = new Promise(res => {
     this.resolve = res;
   });
@@ -301,6 +303,12 @@ class FrameWrapper {
     redirect: async options => {
       if (!this.initialized) await this.ready;
       return this.exposedFunctions.redirect(options);
+    },
+    getHistoryLayer: () => {
+      if (!this._historyLayer) {
+        throw new Error('[chaynsHistory] No history layer available. Ensure historyLayer prop is set on the parent HostIframe.');
+      }
+      return this._historyLayer;
     }
   };
   customFunctions = new Proxy({}, {
@@ -361,6 +369,31 @@ class FrameWrapper {
       p[e] = (...args) => this.exposedCustomFunctions[e](...args.map(a => typeof a === 'function' ? comlink.proxy(a) : a));
       return p;
     }, {});
+    const exposedHistory = exposed.history;
+    if (exposedHistory) {
+      const initialState = await exposedHistory.getInitialState();
+      if (initialState) {
+        this._historyLayer = new _FrameHistoryLayer.FrameHistoryLayer({
+          setRoute: (route, opts) => exposedHistory.setRoute(route, opts),
+          setParams: (params, opts) => exposedHistory.setParams(params, opts),
+          setHash: (hash, opts) => exposedHistory.setHash(hash, opts),
+          setState: (state, opts) => exposedHistory.setState(state, opts),
+          navigate: opts => exposedHistory.navigate(opts),
+          setActiveChild: (id, init) => exposedHistory.setActiveChild(id, init),
+          setSegmentCount: n => exposedHistory.setSegmentCount(n),
+          addBlock: async (callback, opts) => {
+            const remoteUnsub = await exposedHistory.addBlock(comlink.proxy(callback), opts);
+            return () => void remoteUnsub();
+          }
+        }, initialState);
+        await exposedHistory.addChangeListener(comlink.proxy(e => {
+          this._historyLayer._applyAndEmit(e);
+        }));
+        await exposedHistory.addPopstateListener(comlink.proxy(e => {
+          this._historyLayer._applyAndEmit(e);
+        }));
+      }
+    }
     this.initialized = true;
     this.resolve(null);
     (0, _heightHelper.setTappHeight)(this.functions.setHeight);

package/dist/cjs/wrapper/ModuleFederationWrapper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModuleFederationWrapper = void 0;
 var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
+var _rootLayer = require("../utils/history/rootLayer");
 var _visibilityChangeListener = require("../calls/visibilityChangeListener");
 var _getUserInfo = _interopRequireDefault(require("../calls/getUserInfo"));
 var _sendMessage = require("../calls/sendMessage");
@@ -31,6 +32,7 @@ class ModuleFederationWrapper {
     this.functions.createDialog = config => {
       return new _DialogHandler.default(config, functions.openDialog, functions.closeDialog, functions.dispatchEventToDialogClient, functions.addDialogClientEventListener);
     };
+    this.functions.getHistoryLayer = () => (0, _rootLayer.getOrInitRootChaynsHistoryLayer)().rootLayer;
   }
   async init() {
     return undefined;

package/dist/cjs/wrapper/StaticChaynsApi.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _moduleWrapper = require("../components/moduleWrapper");
 var _IChaynsReact = require("../types/IChaynsReact");
-var _deviceHelper = _interopRequireDefault(require("../util/deviceHelper"));
+var _deviceHelper = _interopRequireDefault(require("../utils/deviceHelper"));
 var _AppWrapper = require("./AppWrapper");
 var _FrameWrapper = require("./FrameWrapper");
 var _ModuleFederationWrapper = require("./ModuleFederationWrapper");

package/dist/esm/calls/index.js

@@ -1,4 +1,5 @@
 import { moduleWrapper } from '../components/moduleWrapper';
+import { getCurrentChaynsHistoryLayer } from '../contexts/HistoryLayerContext';
 export const addGeoLocationListener = (...args) => moduleWrapper.current.functions.addGeoLocationListener(...args);
 export const addScrollListener = (...args) => moduleWrapper.current.functions.addScrollListener(...args);
 export const addVisibilityChangeListener = (...args) => moduleWrapper.current.functions.addVisibilityChangeListener(...args);
@@ -54,6 +55,7 @@ export const createDialog = config => moduleWrapper.current.functions.createDial
 export const setOverlay = (...args) => moduleWrapper.current.functions.setOverlay(...args);
 export const addAnonymousAccount = () => moduleWrapper.current.functions.addAnonymousAccount();
 export const getUser = () => moduleWrapper.current.values.user;
+export const getChaynsHistoryLayer = () => getCurrentChaynsHistoryLayer();
 export const getSite = () => moduleWrapper.current.values.site;
 export const getCurrentPage = () => moduleWrapper.current.values.currentPage;
 export const getDevice = () => moduleWrapper.current.values.device;

package/dist/esm/calls/visibilityChangeListener.js

@@ -1,4 +1,4 @@
-import { addApiListener, dispatchApiEvent, removeApiListener } from '../helper/apiListenerHelper';
+import { addApiListener, dispatchApiEvent, removeApiListener } from '../utils/apiListener';
 const key = 'visibilityChangeListener';
 const handleVisibilityChange = () => {
   dispatchApiEvent(key, {

package/dist/esm/components/ChaynsProvider.js

@@ -3,13 +3,15 @@ import htmlEscape from 'htmlescape';
 import React, { useEffect, useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { AppName } from '../types/IChaynsReact';
-import getDeviceInfo from '../util/deviceHelper';
+import getDeviceInfo from '../utils/deviceHelper';
 import { AppWrapper } from '../wrapper/AppWrapper';
 import { FrameWrapper } from '../wrapper/FrameWrapper';
 import { ModuleFederationWrapper } from '../wrapper/ModuleFederationWrapper';
 import { SsrWrapper } from '../wrapper/SsrWrapper';
 import { ChaynsContext } from './ChaynsContext';
 import { addModuleWrapper, moduleWrapper, removeModuleWrapper } from './moduleWrapper';
+import { ChaynsHistoryLayerProvider, useChaynsHistoryLayerContext } from '../contexts/HistoryLayerContext';
+import { getOrInitRootChaynsHistoryLayer } from '../utils/history/rootLayer';
 const isServer = typeof window === 'undefined';
 const InitialDataProvider = React.memo(t0 => {
   const $ = _c(6);
@@ -59,11 +61,18 @@ const ChaynsProvider = ({
   customFunctions,
   renderedByServer,
   isModule,
-  chaynsApiId
+  chaynsApiId,
+  historyLayer,
+  history,
+  isHistoryDisabled,
+  segmentCount
 }) => {
-  var _ref, _crypto, _customWrapper$curren, _customWrapper$curren2;
+  var _ref, _crypto, _customWrapper$curren, _customWrapper$curren3, _customWrapper$curren4;
   const customWrapper = useRef(null);
   const idRef = useRef((_ref = chaynsApiId !== null && chaynsApiId !== void 0 ? chaynsApiId : (_crypto = crypto) === null || _crypto === void 0 ? void 0 : _crypto.randomUUID()) !== null && _ref !== void 0 ? _ref : Math.random().toString());
+  const contextLayer = useChaynsHistoryLayerContext();
+  const parentLayerRef = useRef(contextLayer);
+  const rootLayerRef = useRef(null);
   if (!customWrapper.current) {
     if (isModule) {
       if (data && functions) {
@@ -91,9 +100,10 @@ const ChaynsProvider = ({
       customWrapper.current.chaynsApiId = idRef.current;
     }
   }
+  const [effectiveLayer, setEffectiveLayer] = useState(historyLayer !== null && historyLayer !== void 0 ? historyLayer : null);
   const [isInitialized, setIsInitialized] = useState(!!((_customWrapper$curren = customWrapper.current) !== null && _customWrapper$curren !== void 0 && _customWrapper$curren.values));
   useEffect(() => {
-    void (async () => {
+    void (async (_customWrapper$curren2, _ref2) => {
       await customWrapper.current.init();
       customWrapper.current.addDataListener(({
         type,
@@ -101,6 +111,15 @@ const ChaynsProvider = ({
       }) => {
         customWrapper.current.emitChange();
       });
+      parentLayerRef.current = (_customWrapper$curren2 = customWrapper.current.functions.getHistoryLayer()) !== null && _customWrapper$curren2 !== void 0 ? _customWrapper$curren2 : contextLayer;
+      if (!rootLayerRef.current && !historyLayer && !parentLayerRef.current) {
+        rootLayerRef.current = getOrInitRootChaynsHistoryLayer(history === null || history === void 0 ? void 0 : history.url, history === null || history === void 0 ? void 0 : history.segmentCount).rootLayer;
+      }
+      const layer = (_ref2 = historyLayer !== null && historyLayer !== void 0 ? historyLayer : parentLayerRef.current) !== null && _ref2 !== void 0 ? _ref2 : rootLayerRef.current;
+      if (typeof segmentCount === 'number' && layer.getSegmentCount() !== segmentCount) {
+        layer.setSegmentCount(segmentCount);
+      }
+      setEffectiveLayer(layer);
       if (!isInitialized) {
         setIsInitialized(true);
       }
@@ -125,10 +144,19 @@ const ChaynsProvider = ({
       removeModuleWrapper(id, customWrapper.current);
     };
   }, []);
+  let isDisabled = Boolean((_customWrapper$curren3 = customWrapper.current.values) === null || _customWrapper$curren3 === void 0 ? void 0 : _customWrapper$curren3.isHistoryDisabled);
+  if (typeof isHistoryDisabled === 'boolean' && !isDisabled) {
+    isDisabled = isHistoryDisabled;
+  }
+  if ((historyLayer === null || historyLayer === void 0 ? void 0 : historyLayer.id) === 'root') {
+    isDisabled = false;
+  }
   return React.createElement(React.Fragment, null, isInitialized && React.createElement(ChaynsContext.Provider, {
     value: customWrapper.current
-  }, children), React.createElement(InitialDataProvider, {
-    data: (_customWrapper$curren2 = customWrapper.current) === null || _customWrapper$curren2 === void 0 ? void 0 : _customWrapper$curren2.values,
+  }, effectiveLayer && !isDisabled ? React.createElement(ChaynsHistoryLayerProvider, {
+    layer: effectiveLayer
+  }, children) : children), React.createElement(InitialDataProvider, {
+    data: (_customWrapper$curren4 = customWrapper.current) === null || _customWrapper$curren4 === void 0 ? void 0 : _customWrapper$curren4.values,
     renderedByServer: renderedByServer
   }));
 };

package/dist/esm/components/withHydrationBoundary.js

@@ -1,6 +1,6 @@
 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, { useContext, useEffect, useState } from 'react';
-import { HydrationContext } from '../constants';
+import { HydrationContext } from '../contexts';
 function withHydrationBoundary(Component, initializer, useHydrationId, useProps) {
   const stores = {};
   return ({

package/dist/esm/constants/index.js

@@ -1,3 +1 @@
-export * from './hydrationContext';
-export * from './DefaultLoginDialogOptions';
-export * from './moduleContext';
+export * from './DefaultLoginDialogOptions';

package/dist/esm/contexts/HistoryLayerContext.js

@@ -0,0 +1,76 @@
+import { c as _c } from "react-compiler-runtime";
+import React, { createContext, useContext } from 'react';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+const _layerStack = [];
+export function pushChaynsHistoryLayer(layer) {
+  _layerStack.push(layer);
+}
+export function popChaynsHistoryLayer(layer) {
+  const index = _layerStack.lastIndexOf(layer);
+  if (index > -1) {
+    _layerStack.splice(index, 1);
+  }
+}
+export function getCurrentChaynsHistoryLayer() {
+  return _layerStack.length > 0 ? _layerStack[_layerStack.length - 1] : null;
+}
+const ChaynsHistoryLayerContext = createContext(null);
+ChaynsHistoryLayerContext.displayName = 'ChaynsHistoryLayerContext';
+export const ChaynsHistoryLayerProvider = t0 => {
+  const $ = _c(6);
+  const {
+    layer,
+    children
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== layer) {
+    t1 = () => {
+      pushChaynsHistoryLayer(layer);
+      return () => popChaynsHistoryLayer(layer);
+    };
+    t2 = [layer];
+    $[0] = layer;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+  if ($[3] !== children || $[4] !== layer) {
+    t3 = React.createElement(ChaynsHistoryLayerContext.Provider, {
+      value: layer
+    }, children);
+    $[3] = children;
+    $[4] = layer;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+};
+export const ChaynsHistoryLayerOverrideProvider = t0 => {
+  const $ = _c(3);
+  const {
+    layer,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== layer) {
+    t1 = React.createElement(ChaynsHistoryLayerContext.Provider, {
+      value: layer
+    }, children);
+    $[0] = children;
+    $[1] = layer;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+export function useChaynsHistoryLayerContext() {
+  return useContext(ChaynsHistoryLayerContext);
+}
+export default ChaynsHistoryLayerContext;

package/dist/esm/contexts/index.js

@@ -0,0 +1,3 @@
+export * from './hydrationContext';
+export * from './moduleContext';
+export * from './HistoryLayerContext';