chayns-api 3.0.0 → 3.1.0-beta.0

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

@@ -0,0 +1,388 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationQueue = void 0;
+var _window = require("./window");
+var _equality = require("../equality");
+class NavigationQueue {
+  queue = [];
+  isRunning = false;
+  constructor(deps) {
+    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:
+        {
+          const _exhaustive = op;
+          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 || !(0, _equality.shallowEqualArr)(prevSegments, op.segments) || op.opts.params !== undefined && !(0, _equality.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 (!(0, _equality.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 = !(0, _equality.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 ? !(0, _equality.shallowEqualArr)(prevSeg, op.route) : false;
+    const stateChanged = op.state ? !(0, _equality.shallowEqualObj)(prevState, op.state) : false;
+    const paramsChanged = op.params !== undefined ? !(0, _equality.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 = (0, _window.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) {
+      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) {
+    if (!(0, _window.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);
+    }
+  }
+}
+exports.NavigationQueue = NavigationQueue;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findChaynsHistoryLayerById = findChaynsHistoryLayerById;
+exports.getChaynsHistoryActiveChain = getChaynsHistoryActiveChain;
+exports.isInChaynsHistoryActiveChain = isInChaynsHistoryActiveChain;
+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;
+}
+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;
+}
+function isInChaynsHistoryActiveChain(layer) {
+  return layer._isInActiveChain();
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeSilent = consumeSilent;
+exports.getCurrentIdx = getCurrentIdx;
+exports.incrementIdx = incrementIdx;
+exports.silentGo = silentGo;
+var _window = require("./window");
+let currentIdx = 0;
+let pendingSilentCount = 0;
+let silentResolve = null;
+function incrementIdx() {
+  return ++currentIdx;
+}
+function getCurrentIdx() {
+  return currentIdx;
+}
+function silentGo(delta) {
+  if (!(0, _window.hasWindowHistory)()) return Promise.resolve();
+  return new Promise(resolve => {
+    pendingSilentCount++;
+    window.history.go(delta);
+    const timeout = setTimeout(() => {
+      silentResolve = null;
+      resolve();
+    }, 2000);
+    silentResolve = () => {
+      clearTimeout(timeout);
+      resolve();
+    };
+  });
+}
+function consumeSilent() {
+  if (pendingSilentCount <= 0) return false;
+  pendingSilentCount--;
+  const res = silentResolve;
+  silentResolve = null;
+  res === null || res === void 0 || res();
+  return true;
+}

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

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOrInitRootChaynsHistoryLayer = getOrInitRootChaynsHistoryLayer;
+exports.initRootChaynsHistoryLayer = initRootChaynsHistoryLayer;
+exports.resolveSegmentsFrom = resolveSegmentsFrom;
+var _HistoryLayer = require("../../handler/history/HistoryLayer");
+var _NavigationQueue = require("./NavigationQueue");
+var _BlockRegistry = require("./BlockRegistry");
+var _layerTree = require("./layerTree");
+var _url = require("./url");
+var _stateProjector = require("./stateProjector");
+var _navigationIndex = require("./navigationIndex");
+var _window = require("./window");
+var _equality = require("../equality");
+var _calls = require("../../calls");
+var _segments = require("./segments");
+function getInitialPathname(overrideUrl) {
+  if (overrideUrl) {
+    try {
+      return new URL(overrideUrl).pathname;
+    } catch {}
+    return overrideUrl.startsWith('/') ? overrideUrl : `/${overrideUrl}`;
+  }
+  if ((0, _window.hasWindowHistory)()) {
+    return window.location.pathname;
+  }
+  try {
+    const siteUrl = (0, _calls.getSite)().url;
+    if (siteUrl) return new URL(siteUrl).pathname;
+  } catch {}
+  return '/';
+}
+function resolveInitialSegments(overrideUrl, n) {
+  const pathname = getInitialPathname(overrideUrl);
+  const all = pathname.replace(/^\//, '').split('/').filter(Boolean);
+  const taken = all.slice(0, n);
+  while (taken.length < n) taken.push('');
+  return taken;
+}
+function resolveSegmentsFrom(overrideUrl, startIndex) {
+  const pathname = getInitialPathname(overrideUrl);
+  const all = pathname.replace(/^\//, '').split('/').filter(Boolean);
+  return all.slice(startIndex);
+}
+function initRootChaynsHistoryLayer(opts = {}) {
+  var _opts$segmentCount;
+  const blockRegistry = new _BlockRegistry.BlockRegistry();
+  let rootLayer;
+  let queue;
+  const deps = {
+    getRoot: () => rootLayer,
+    getQueue: () => queue,
+    getBlockRegistry: () => blockRegistry
+  };
+  rootLayer = new _HistoryLayer.ChaynsHistoryLayer({
+    id: 'root',
+    parent: null,
+    deps,
+    segmentCount: (_opts$segmentCount = opts.segmentCount) !== null && _opts$segmentCount !== void 0 ? _opts$segmentCount : 0,
+    segments: opts.segmentCount ? resolveInitialSegments(opts.url, opts.segmentCount) : []
+  });
+  queue = new _NavigationQueue.NavigationQueue({
+    getRoot: () => rootLayer,
+    findLayer: id => (0, _layerTree.findChaynsHistoryLayerById)(rootLayer, id),
+    checkBlocks: target => blockRegistry.checkBlocks(target),
+    projectUrl: () => (0, _url.projectToUrl)(rootLayer),
+    projectState: () => {
+      var _ref;
+      const existing = (0, _window.hasWindowHistory)() ? {
+        ...((_ref = window.history.state) !== null && _ref !== void 0 ? _ref : {})
+      } : {};
+      delete existing.__chaynsHistory;
+      return (0, _stateProjector.projectToState)(rootLayer, existing);
+    },
+    diffIncomingState: raw => (0, _stateProjector.diffIncomingState)(rootLayer, raw),
+    applyIncomingState: raw => (0, _stateProjector.applyStateToTree)(rootLayer, raw),
+    silentGo: delta => (0, _navigationIndex.silentGo)(delta),
+    getCurrentIdx: () => (0, _navigationIndex.getCurrentIdx)(),
+    incrementIdx: () => (0, _navigationIndex.incrementIdx)(),
+    applyUrlSegments: () => {
+      if (!(0, _window.hasWindowHistory)()) return {
+        changedLayerIds: new Set()
+      };
+      const {
+        perLayerSegments
+      } = (0, _url.parseFromUrl)(window.location.pathname, rootLayer);
+      const changed = new Set();
+      for (const [id, segs] of perLayerSegments) {
+        const layer = (0, _layerTree.findChaynsHistoryLayerById)(rootLayer, id);
+        if (!layer) continue;
+        const normalizedSegs = (0, _segments.normalizeHistorySegments)(segs);
+        const prev = layer._getOwnSegments();
+        if (!(0, _equality.shallowEqualArr)(prev, normalizedSegs)) {
+          layer._setOwnSegmentsSilent(normalizedSegs);
+          changed.add(id);
+        }
+      }
+      return {
+        changedLayerIds: changed
+      };
+    }
+  });
+  const existingState = (0, _window.hasWindowHistory)() ? window.history.state : null;
+  if (!(0, _stateProjector.hasChaynsHistoryState)(existingState)) {
+    var _opts$segmentCount2, _opts$url;
+    const segmentCount = (_opts$segmentCount2 = opts.segmentCount) !== null && _opts$segmentCount2 !== void 0 ? _opts$segmentCount2 : 0;
+    if (segmentCount > 0) {
+      const pathname = getInitialPathname(opts.url);
+      const all = pathname.replace(/^\//, '').split('/').filter(Boolean);
+      rootLayer._setBootstrapPool(all.slice(segmentCount));
+    } else {
+      rootLayer._setBootstrapUrlResolver(() => getInitialPathname(opts.url));
+    }
+    const rawUrl = (_opts$url = opts.url) !== null && _opts$url !== void 0 ? _opts$url : (0, _window.hasWindowHistory)() ? window.location.href : null;
+    if (rawUrl) {
+      try {
+        const base = rawUrl.startsWith('http') ? rawUrl : `http://x${rawUrl.startsWith('/') ? rawUrl : '/' + rawUrl}`;
+        const parsed = new URL(base);
+        const params = {};
+        parsed.searchParams.forEach((v, k) => {
+          params[k] = v;
+        });
+        if (Object.keys(params).length > 0) rootLayer._setOwnParamsSilent(params);
+        const hash = parsed.hash.replace(/^#/, '');
+        if (hash) rootLayer._setOwnHashSilent(hash);
+      } catch {}
+    }
+  }
+  if ((0, _window.hasWindowHistory)()) {
+    const existing = existingState;
+    if (!(0, _stateProjector.hasChaynsHistoryState)(existing)) {
+      const foreign = {
+        ...(existing !== null && existing !== void 0 ? existing : {})
+      };
+      delete foreign.__chaynsHistory;
+      const initialState = (0, _stateProjector.projectToState)(rootLayer, foreign);
+      const idx = (0, _navigationIndex.incrementIdx)();
+      window.history.replaceState({
+        ...initialState,
+        __chaynsHistory: {
+          ...initialState.__chaynsHistory,
+          __idx: idx
+        }
+      }, '', window.location.href);
+    } else {
+      (0, _stateProjector.applyStateToTree)(rootLayer, existing);
+    }
+    window.addEventListener('popstate', event => {
+      if ((0, _navigationIndex.consumeSilent)()) return;
+      const raw = event.state;
+      if (!(0, _stateProjector.hasChaynsHistoryState)(raw)) {} else {
+        void queue.enqueue({
+          kind: 'popstate',
+          rawState: raw
+        });
+      }
+    });
+  }
+  return {
+    rootLayer
+  };
+}
+let _rootLayerResult = null;
+function getOrInitRootChaynsHistoryLayer(url, segmentCount) {
+  if (!_rootLayerResult) {
+    _rootLayerResult = initRootChaynsHistoryLayer({
+      url,
+      segmentCount
+    });
+  }
+  return _rootLayerResult;
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeHistorySegments = exports.normalizeHistoryRouteInput = void 0;
+const normalizeHistorySegments = segments => segments.filter(segment => segment.length > 0);
+exports.normalizeHistorySegments = normalizeHistorySegments;
+const normalizeHistoryRouteInput = route => {
+  if (Array.isArray(route)) {
+    return normalizeHistorySegments([...route]);
+  }
+  return route.split('/').filter(Boolean);
+};
+exports.normalizeHistoryRouteInput = normalizeHistoryRouteInput;