chayns-api 3.0.0-beta.4 → 3.1.0-beta.0

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

@@ -0,0 +1,385 @@
+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:
+        {
+          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 || !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) {
+      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 (!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);
+    }
+  }
+}

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/navigationIndex.js

@@ -0,0 +1,33 @@
+import { hasWindowHistory } from './window';
+let currentIdx = 0;
+let pendingSilentCount = 0;
+let silentResolve = null;
+export function incrementIdx() {
+  return ++currentIdx;
+}
+export function getCurrentIdx() {
+  return currentIdx;
+}
+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;
+}

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

@@ -0,0 +1,167 @@
+import { ChaynsHistoryLayer } from '../../handler/history/HistoryLayer';
+import { NavigationQueue } from './NavigationQueue';
+import { BlockRegistry } from './BlockRegistry';
+import { findChaynsHistoryLayerById } from './layerTree';
+import { projectToUrl, parseFromUrl } from './url';
+import { projectToState, applyStateToTree, diffIncomingState, hasChaynsHistoryState } from './stateProjector';
+import { silentGo, consumeSilent, incrementIdx, getCurrentIdx } from './navigationIndex';
+import { hasWindowHistory } from './window';
+import { shallowEqualArr } from '../equality';
+import { getSite } from "../../calls";
+import { normalizeHistorySegments } from './segments';
+function getInitialPathname(overrideUrl) {
+  if (overrideUrl) {
+    try {
+      return new URL(overrideUrl).pathname;
+    } catch {}
+    return overrideUrl.startsWith('/') ? overrideUrl : `/${overrideUrl}`;
+  }
+  if (hasWindowHistory()) {
+    return window.location.pathname;
+  }
+  try {
+    const siteUrl = 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;
+}
+export function resolveSegmentsFrom(overrideUrl, startIndex) {
+  const pathname = getInitialPathname(overrideUrl);
+  const all = pathname.replace(/^\//, '').split('/').filter(Boolean);
+  return all.slice(startIndex);
+}
+export function initRootChaynsHistoryLayer(opts = {}) {
+  var _opts$segmentCount;
+  const blockRegistry = new BlockRegistry();
+  let rootLayer;
+  let queue;
+  const deps = {
+    getRoot: () => rootLayer,
+    getQueue: () => queue,
+    getBlockRegistry: () => blockRegistry
+  };
+  rootLayer = new 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({
+    getRoot: () => rootLayer,
+    findLayer: id => findChaynsHistoryLayerById(rootLayer, id),
+    checkBlocks: target => blockRegistry.checkBlocks(target),
+    projectUrl: () => projectToUrl(rootLayer),
+    projectState: () => {
+      var _ref;
+      const existing = hasWindowHistory() ? {
+        ...((_ref = window.history.state) !== null && _ref !== void 0 ? _ref : {})
+      } : {};
+      delete existing.__chaynsHistory;
+      return projectToState(rootLayer, existing);
+    },
+    diffIncomingState: raw => diffIncomingState(rootLayer, raw),
+    applyIncomingState: raw => applyStateToTree(rootLayer, raw),
+    silentGo: delta => silentGo(delta),
+    getCurrentIdx: () => getCurrentIdx(),
+    incrementIdx: () => incrementIdx(),
+    applyUrlSegments: () => {
+      if (!hasWindowHistory()) return {
+        changedLayerIds: new Set()
+      };
+      const {
+        perLayerSegments
+      } = parseFromUrl(window.location.pathname, rootLayer);
+      const changed = new Set();
+      for (const [id, segs] of perLayerSegments) {
+        const layer = findChaynsHistoryLayerById(rootLayer, id);
+        if (!layer) continue;
+        const normalizedSegs = normalizeHistorySegments(segs);
+        const prev = layer._getOwnSegments();
+        if (!shallowEqualArr(prev, normalizedSegs)) {
+          layer._setOwnSegmentsSilent(normalizedSegs);
+          changed.add(id);
+        }
+      }
+      return {
+        changedLayerIds: changed
+      };
+    }
+  });
+  const existingState = hasWindowHistory() ? window.history.state : null;
+  if (!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 : 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 (hasWindowHistory()) {
+    const existing = existingState;
+    if (!hasChaynsHistoryState(existing)) {
+      const foreign = {
+        ...(existing !== null && existing !== void 0 ? existing : {})
+      };
+      delete foreign.__chaynsHistory;
+      const initialState = projectToState(rootLayer, foreign);
+      const idx = incrementIdx();
+      window.history.replaceState({
+        ...initialState,
+        __chaynsHistory: {
+          ...initialState.__chaynsHistory,
+          __idx: idx
+        }
+      }, '', window.location.href);
+    } else {
+      applyStateToTree(rootLayer, existing);
+    }
+    window.addEventListener('popstate', event => {
+      if (consumeSilent()) return;
+      const raw = event.state;
+      if (!hasChaynsHistoryState(raw)) {} else {
+        void queue.enqueue({
+          kind: 'popstate',
+          rawState: raw
+        });
+      }
+    });
+  }
+  return {
+    rootLayer
+  };
+}
+let _rootLayerResult = null;
+export function getOrInitRootChaynsHistoryLayer(url, segmentCount) {
+  if (!_rootLayerResult) {
+    _rootLayerResult = initRootChaynsHistoryLayer({
+      url,
+      segmentCount
+    });
+  }
+  return _rootLayerResult;
+}

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

@@ -0,0 +1,7 @@
+export const normalizeHistorySegments = segments => segments.filter(segment => segment.length > 0);
+export const normalizeHistoryRouteInput = route => {
+  if (Array.isArray(route)) {
+    return normalizeHistorySegments([...route]);
+  }
+  return route.split('/').filter(Boolean);
+};