chayns-api 3.0.1 → 3.1.0-beta.1

package/dist/esm/utils/history/NavigationQueue.js

@@ -0,0 +1,386 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { hasWindowHistory } from './window';
+import { shallowEqualArr, shallowEqualObj } from '../equality';
+export class NavigationQueue {
+  constructor(deps) {
+    _defineProperty(this, "queue", []);
+    _defineProperty(this, "isRunning", false);
+    _defineProperty(this, "deps", void 0);
+    this.deps = deps;
+  }
+  enqueue(op) {
+    return new Promise(resolve => {
+      this.queue.push({
+        op,
+        resolve
+      });
+      void this.tick();
+    });
+  }
+  async tick() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    try {
+      while (this.queue.length > 0) {
+        const entry = this.queue.shift();
+        try {
+          const result = await this.process(entry.op);
+          entry.resolve(result);
+        } catch (error) {
+          entry.resolve({
+            isOk: false,
+            reason: 'error',
+            error
+          });
+        }
+      }
+    } finally {
+      this.isRunning = false;
+    }
+  }
+  async process(op) {
+    switch (op.kind) {
+      case 'setRoute':
+        return this.processSetRoute(op);
+      case 'setState':
+        return this.processSetState(op);
+      case 'setParams':
+        return this.processSetParams(op);
+      case 'setHash':
+        return this.processSetHash(op);
+      case 'setActiveChild':
+        return this.processSetActiveChild(op);
+      case 'navigate':
+        return this.processNavigate(op);
+      case 'popstate':
+        return this.processPopstate(op);
+      default:
+        {
+          return {
+            isOk: false,
+            reason: 'error',
+            error: new Error('Unknown op')
+          };
+        }
+    }
+  }
+  async processSetRoute(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const prevSegments = layer._getOwnSegments();
+    const prevParams = layer._getOwnParams();
+    const prevHash = layer._getOwnHash();
+    layer._setOwnSegmentsSilent(op.segments);
+    if (op.opts.params !== undefined) layer._setOwnParamsSilent(op.opts.params);
+    if (op.opts.hash !== undefined) layer._setOwnHashSilent(op.opts.hash);
+    const changed = op._notifyEvenIfUnchanged === true || !shallowEqualArr(prevSegments, op.segments) || op.opts.params !== undefined && !shallowEqualObj(prevParams, op.opts.params) || op.opts.hash !== undefined && prevHash !== op.opts.hash;
+    if (changed) {
+      if (op._skipCommit !== true) {
+        this.commit(op.opts.isReplace === true);
+      }
+      layer._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processSetParams(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const prev = layer._getOwnParams();
+    layer._setOwnParamsSilent(op.params);
+    if (!shallowEqualObj(prev, op.params)) {
+      this.commit(op.opts.isReplace === true);
+      layer._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processSetHash(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const prev = layer._getOwnHash();
+    layer._setOwnHashSilent(op.hash);
+    if (prev !== op.hash) {
+      this.commit(op.opts.isReplace === true);
+      layer._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processSetState(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const previous = layer._getOwnState();
+    layer._setOwnStateSilent(op.state);
+    const changed = !shallowEqualObj(previous, op.state);
+    if (changed) {
+      this.commit(op.opts.isReplace === true);
+      layer._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processSetActiveChild(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const previousUrl = this.deps.projectUrl();
+    const previousId = layer.getActiveChildId();
+    if (op.childId !== null && !layer.getChildLayer(op.childId)) {
+      layer.createChildLayer(op.childId);
+    }
+    layer._setActiveChildSilent(op.childId);
+    let childDataChanged = false;
+    if (op.childId && op.init) {
+      const child = layer.getChildLayer(op.childId);
+      if (child) {
+        if (op.init.route) {
+          child._setOwnSegmentsSilent(op.init.route);
+          childDataChanged = true;
+        }
+        if (op.init.state) {
+          child._setOwnStateSilent(op.init.state);
+          childDataChanged = true;
+        }
+      }
+    }
+    if (op.childId) {
+      const child = layer.getChildLayer(op.childId);
+      if (child && child._getOwnSegments().length === 0 && child.getSegmentCount() > 0) {
+        const root = this.deps.getRoot();
+        const bootstrapSegs = root._consumeBootstrapSegments(child.getSegmentCount());
+        if (bootstrapSegs) {
+          child._setOwnSegmentsSilent(bootstrapSegs);
+          childDataChanged = true;
+        }
+      }
+    }
+    if (previousId !== op.childId) {
+      const nextUrl = this.deps.projectUrl();
+      const shouldReplace = previousUrl === nextUrl;
+      this.commit(shouldReplace);
+      layer._emit('change');
+    }
+    if (childDataChanged && op.childId) {
+      const child = layer.getChildLayer(op.childId);
+      if (child) child._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processNavigate(op) {
+    const layer = this.resolveActiveLayer(op.layerId);
+    if (!layer) return {
+      isOk: false,
+      reason: 'stale'
+    };
+    const allowed = await this.deps.checkBlocks(layer);
+    if (!allowed) return {
+      isOk: false,
+      reason: 'blocked'
+    };
+    const prevSeg = layer._getOwnSegments();
+    const prevState = layer._getOwnState();
+    const prevParams = layer._getOwnParams();
+    const prevHash = layer._getOwnHash();
+    const prevActiveChild = layer.getActiveChildId();
+    if (op.route) layer._setOwnSegmentsSilent(op.route);
+    if (op.state) layer._setOwnStateSilent(op.state);
+    if (op.params !== undefined) layer._setOwnParamsSilent(op.params);
+    if (op.hash !== undefined) layer._setOwnHashSilent(op.hash);
+    const segChanged = op.route ? !shallowEqualArr(prevSeg, op.route) : false;
+    const stateChanged = op.state ? !shallowEqualObj(prevState, op.state) : false;
+    const paramsChanged = op.params !== undefined ? !shallowEqualObj(prevParams, op.params) : false;
+    const hashChanged = op.hash !== undefined ? prevHash !== op.hash : false;
+    let activeChildChanged = false;
+    let childDataChanged = false;
+    if (op.activeChild !== undefined) {
+      if (op.activeChild !== null && !layer.getChildLayer(op.activeChild)) {
+        layer.createChildLayer(op.activeChild);
+      }
+      layer._setActiveChildSilent(op.activeChild);
+      activeChildChanged = prevActiveChild !== op.activeChild;
+      if (op.activeChild && op.activeChildInit) {
+        const child = layer.getChildLayer(op.activeChild);
+        if (child) {
+          if (op.activeChildInit.route) {
+            child._setOwnSegmentsSilent(op.activeChildInit.route);
+            childDataChanged = true;
+          }
+          if (op.activeChildInit.state) {
+            child._setOwnStateSilent(op.activeChildInit.state);
+            childDataChanged = true;
+          }
+        }
+      }
+      if (op.activeChild) {
+        const child = layer.getChildLayer(op.activeChild);
+        if (child && child._getOwnSegments().length === 0 && child.getSegmentCount() > 0) {
+          const root = this.deps.getRoot();
+          const bootstrapSegs = root._consumeBootstrapSegments(child.getSegmentCount());
+          if (bootstrapSegs) {
+            child._setOwnSegmentsSilent(bootstrapSegs);
+            childDataChanged = true;
+          }
+        }
+      }
+    }
+    if (segChanged || stateChanged || paramsChanged || hashChanged || activeChildChanged) {
+      this.commit(op.opts.isReplace === true);
+      layer._emit('change');
+    }
+    if (childDataChanged && op.activeChild) {
+      const child = layer.getChildLayer(op.activeChild);
+      if (child) child._emit('change');
+    }
+    return {
+      isOk: true
+    };
+  }
+  async processPopstate(op) {
+    const {
+      changedLayerIds
+    } = this.deps.diffIncomingState(op.rawState);
+    const currentProjectedUrl = this.deps.projectUrl();
+    const browserPathname = hasWindowHistory() ? window.location.pathname : '';
+    if (browserPathname && browserPathname !== new URL(currentProjectedUrl, 'http://x').pathname) {
+      changedLayerIds.add(this.deps.getRoot().id);
+    }
+    const target = this.resolveLowestCommonLayer(changedLayerIds);
+    if (target && op.skipBlockCheck !== true) {
+      const allowed = await this.deps.checkBlocks(target);
+      if (!allowed) {
+        await this.deps.silentGo(+1);
+        return {
+          isOk: false,
+          reason: 'blocked'
+        };
+      }
+    }
+    const {
+      changedLayerIds: applied
+    } = this.deps.applyIncomingState(op.rawState);
+    const {
+      changedLayerIds: urlChanged
+    } = this.deps.applyUrlSegments();
+    const allChanged = new Set([...applied, ...urlChanged]);
+    for (const id of allChanged) {
+      const layer = this.deps.findLayer(id);
+      if (layer) layer._emit('popstate');
+    }
+    return {
+      isOk: true
+    };
+  }
+  resolveActiveLayer(id) {
+    const layer = this.deps.findLayer(id);
+    if (!layer) {
+      return undefined;
+    }
+    if (layer._isDestroyed()) {
+      return undefined;
+    }
+    if (!layer._isInActiveChain()) {
+      return undefined;
+    }
+    return layer;
+  }
+  resolveLowestCommonLayer(ids) {
+    if (ids.size === 0) return undefined;
+    const ancestorLists = [];
+    for (const id of ids) {
+      const layer = this.deps.findLayer(id);
+      if (!layer) continue;
+      const ancestors = [];
+      let node = layer;
+      while (node) {
+        var _node$parent;
+        ancestors.unshift(node);
+        node = (_node$parent = node.parent) !== null && _node$parent !== void 0 ? _node$parent : null;
+      }
+      ancestorLists.push(ancestors);
+    }
+    if (ancestorLists.length === 0) return undefined;
+    if (ancestorLists.length === 1) return ancestorLists[0][ancestorLists[0].length - 1];
+    let lca;
+    const minLen = Math.min(...ancestorLists.map(a => a.length));
+    for (let d = 0; d < minLen; d++) {
+      const candidate = ancestorLists[0][d];
+      if (ancestorLists.every(a => {
+        var _a$d;
+        return ((_a$d = a[d]) === null || _a$d === void 0 ? void 0 : _a$d.id) === candidate.id;
+      })) {
+        lca = candidate;
+      } else {
+        break;
+      }
+    }
+    return lca;
+  }
+  commit(isReplace) {
+    var _this$deps$onCommit, _this$deps;
+    if (!hasWindowHistory()) return;
+    const url = this.deps.projectUrl();
+    const state = this.deps.projectState();
+    const idx = isReplace ? this.deps.getCurrentIdx() : this.deps.incrementIdx();
+    const stateWithMeta = {
+      ...state,
+      __chaynsHistory: {
+        ...state.__chaynsHistory,
+        __idx: idx
+      }
+    };
+    if (isReplace) {
+      window.history.replaceState(stateWithMeta, '', url);
+    } else {
+      window.history.pushState(stateWithMeta, '', url);
+    }
+    (_this$deps$onCommit = (_this$deps = this.deps).onCommit) === null || _this$deps$onCommit === void 0 || _this$deps$onCommit.call(_this$deps);
+  }
+}

package/dist/esm/utils/history/layerTree.js

@@ -0,0 +1,24 @@
+export function getChaynsHistoryActiveChain(root) {
+  const chain = [root];
+  let current = root;
+  for (;;) {
+    const childId = current.getActiveChildId();
+    if (!childId) break;
+    const child = current.getChildLayer(childId);
+    if (!child) break;
+    chain.push(child);
+    current = child;
+  }
+  return chain;
+}
+export function findChaynsHistoryLayerById(root, id) {
+  if (root.id === id) return root;
+  for (const child of root._getChildren().values()) {
+    const found = findChaynsHistoryLayerById(child, id);
+    if (found) return found;
+  }
+  return undefined;
+}
+export function isInChaynsHistoryActiveChain(layer) {
+  return layer._isInActiveChain();
+}

package/dist/esm/utils/history/nativeBackHandling.js

@@ -0,0 +1,59 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { getDevice, invokeCall } from '../../calls';
+import { AppFlavor } from '../../types/IChaynsReact';
+import { getCurrentIdx } from './navigationIndex';
+import { hasWindowHistory } from './window';
+const DISABLE_SWIPE_BACK_GESTURE_ACTION = 249;
+export class NativeBackHandler {
+  constructor(opts) {
+    _defineProperty(this, "opts", void 0);
+    _defineProperty(this, "isInterceptionEnabled", void 0);
+    _defineProperty(this, "bypassNextPopstateBlockCheck", false);
+    _defineProperty(this, "sync", () => {
+      if (!hasWindowHistory() || !NativeBackHandler.isSupported()) {
+        return;
+      }
+      const next = this.shouldEnableInterception();
+      if (this.isInterceptionEnabled === next) {
+        return;
+      }
+      void invokeCall({
+        action: DISABLE_SWIPE_BACK_GESTURE_ACTION,
+        value: {
+          enabled: next
+        }
+      }, next ? this.handleNativeBack : undefined);
+      this.isInterceptionEnabled = next;
+    });
+    _defineProperty(this, "handleNativeBack", () => {
+      void this.runNativeBack();
+    });
+    this.opts = opts;
+  }
+  consumeBypassFlag() {
+    if (!this.bypassNextPopstateBlockCheck) return false;
+    this.bypassNextPopstateBlockCheck = false;
+    return true;
+  }
+  static isSupported() {
+    try {
+      var _getDevice$app;
+      return ((_getDevice$app = getDevice().app) === null || _getDevice$app === void 0 ? void 0 : _getDevice$app.flavor) === AppFlavor.Chayns;
+    } catch {
+      return false;
+    }
+  }
+  shouldEnableInterception() {
+    return this.opts.blockRegistry.hasActiveBlocks(this.opts.rootLayer) || getCurrentIdx() > 0;
+  }
+  async runNativeBack() {
+    const isAllowed = await this.opts.blockRegistry.checkActiveBlocks(this.opts.rootLayer);
+    if (!isAllowed || !hasWindowHistory()) {
+      return;
+    }
+    this.bypassNextPopstateBlockCheck = true;
+    window.history.back();
+  }
+}

package/dist/esm/utils/history/navigationIndex.js

@@ -0,0 +1,62 @@
+import { hasWindowHistory } from './window';
+const CHAYNS_HISTORY_STATE_KEY = '__chaynsHistory';
+let currentIdx = 0;
+let pendingSilentCount = 0;
+let silentResolve = null;
+export function incrementIdx() {
+  return ++currentIdx;
+}
+export function getCurrentIdx() {
+  return currentIdx;
+}
+export function setCurrentIdx(idx) {
+  if (!Number.isInteger(idx) || idx < 0) {
+    return;
+  }
+  currentIdx = idx;
+}
+export function extractHistoryIndex(raw) {
+  if (!raw || typeof raw !== 'object') {
+    return null;
+  }
+  const chaynsHistory = raw[CHAYNS_HISTORY_STATE_KEY];
+  if (!chaynsHistory || typeof chaynsHistory !== 'object') {
+    return null;
+  }
+  const idx = chaynsHistory.__idx;
+  if (typeof idx !== 'number' || !Number.isInteger(idx) || idx < 0) {
+    return null;
+  }
+  return idx;
+}
+export function syncCurrentIdxFromState(raw) {
+  const idx = extractHistoryIndex(raw);
+  if (idx === null) {
+    return null;
+  }
+  currentIdx = idx;
+  return idx;
+}
+export function silentGo(delta) {
+  if (!hasWindowHistory()) return Promise.resolve();
+  return new Promise(resolve => {
+    pendingSilentCount++;
+    window.history.go(delta);
+    const timeout = setTimeout(() => {
+      silentResolve = null;
+      resolve();
+    }, 2000);
+    silentResolve = () => {
+      clearTimeout(timeout);
+      resolve();
+    };
+  });
+}
+export function consumeSilent() {
+  if (pendingSilentCount <= 0) return false;
+  pendingSilentCount--;
+  const res = silentResolve;
+  silentResolve = null;
+  res === null || res === void 0 || res();
+  return true;
+}