@sigil-dev/grimoire 0.7.5 → 0.7.6

package/public/__grimoire__/hydrate.js

@@ -0,0 +1,585 @@
+// .grimoire/_routes.hydrate.js
+var routes = {};
+var layouts = [];
+// ../runtime/reactivity/map.ts
+class ReactiveMap extends Map {
+  #keyVersions = new Map;
+  #structVersion;
+  #structVal = 0;
+  #getKeyVersion(key) {
+    let sig = this.#keyVersions.get(key);
+    if (!sig) {
+      const inner = createSignal(0);
+      this.#keyVersions.set(key, inner);
+      sig = inner;
+    }
+    return sig;
+  }
+  #bumpKey(key) {
+    const sig = this.#keyVersions.get(key);
+    if (sig) {
+      const v = sig.peek() + 1;
+      sig.set(v);
+    }
+  }
+  #bumpStruct() {
+    this.#structVal++;
+    this.#structVersion.set(this.#structVal);
+  }
+  constructor(entries) {
+    super(entries);
+    this.#structVersion = createSignal(0);
+    if (entries) {
+      for (const [k] of entries)
+        this.#getKeyVersion(k);
+    }
+  }
+  get(key) {
+    this.#getKeyVersion(key)();
+    return super.get(key);
+  }
+  set(key, value) {
+    const existed = super.has(key);
+    super.set(key, value);
+    this.#bumpKey(key);
+    if (!existed)
+      this.#bumpStruct();
+    return this;
+  }
+  delete(key) {
+    const result = super.delete(key);
+    if (result) {
+      this.#bumpKey(key);
+      this.#bumpStruct();
+    }
+    return result;
+  }
+  clear() {
+    if (this.size > 0) {
+      for (const key of this.keys())
+        this.#bumpKey(key);
+      super.clear();
+      this.#bumpStruct();
+    }
+  }
+  forEach(callbackfn, thisArg) {
+    this.#structVersion();
+    super.forEach(callbackfn, thisArg);
+  }
+  get size() {
+    this.#structVersion();
+    return super.size;
+  }
+  entries() {
+    this.#structVersion();
+    return super.entries();
+  }
+  keys() {
+    this.#structVersion();
+    return super.keys();
+  }
+  values() {
+    this.#structVersion();
+    return super.values();
+  }
+  [Symbol.iterator]() {
+    this.#structVersion();
+    return super[Symbol.iterator]();
+  }
+}
+// ../runtime/reactivity/set.ts
+class ReactiveSet extends Set {
+  #version;
+  #versionVal = 0;
+  constructor(values) {
+    super(values);
+    this.#version = createSignal(0);
+  }
+  #bump() {
+    this.#versionVal++;
+    this.#version.set(this.#versionVal);
+  }
+  has(value) {
+    this.#version();
+    return super.has(value);
+  }
+  add(value) {
+    const sizeBefore = super.size;
+    super.add(value);
+    if (super.size !== sizeBefore)
+      this.#bump();
+    return this;
+  }
+  delete(value) {
+    const result = super.delete(value);
+    if (result)
+      this.#bump();
+    return result;
+  }
+  clear() {
+    if (this.size > 0) {
+      super.clear();
+      this.#bump();
+    }
+  }
+  forEach(callbackfn, thisArg) {
+    this.#version();
+    super.forEach(callbackfn, thisArg);
+  }
+  get size() {
+    this.#version();
+    return super.size;
+  }
+  entries() {
+    this.#version();
+    return super.entries();
+  }
+  keys() {
+    this.#version();
+    return super.keys();
+  }
+  values() {
+    this.#version();
+    return super.values();
+  }
+  [Symbol.iterator]() {
+    this.#version();
+    return super[Symbol.iterator]();
+  }
+}
+
+// ../runtime/index.ts
+var SIGIL_SAFE = Symbol.for("sigil.safe");
+var currentEffect = null;
+var currentDeps = null;
+var batchDepth = 0;
+var scheduledFlush = false;
+var pendingEffects = new Set;
+var pendingPreEffects = new Set;
+function flush() {
+  scheduledFlush = false;
+  pendingPreEffects.forEach((e) => e());
+  pendingPreEffects.clear();
+  pendingEffects.forEach((e) => e());
+  pendingEffects.clear();
+}
+function scheduleEffect(fn) {
+  const target = fn.__sigil_pre ? pendingPreEffects : pendingEffects;
+  target.add(fn);
+  if (batchDepth === 0 && !scheduledFlush) {
+    scheduledFlush = true;
+    queueMicrotask(flush);
+  }
+}
+var targetDepsMap = new WeakMap;
+function getDeps(target, key) {
+  let deps = targetDepsMap.get(target);
+  if (!deps) {
+    deps = new Map;
+    targetDepsMap.set(target, deps);
+  }
+  let set = deps.get(key);
+  if (!set) {
+    set = new Set;
+    deps.set(key, set);
+  }
+  return set;
+}
+function track(target, key) {
+  if (currentEffect && currentDeps) {
+    const deps = getDeps(target, key);
+    deps.add(currentEffect);
+    currentDeps.add(deps);
+  }
+}
+function trigger(target, key) {
+  const deps = targetDepsMap.get(target);
+  if (!deps)
+    return;
+  const set = deps.get(key);
+  if (!set)
+    return;
+  for (const fn of [...set]) {
+    scheduleEffect(fn);
+  }
+}
+var proxyCache = new WeakMap;
+var proxyToTarget = new WeakMap;
+var reactiveTargets = new WeakSet;
+function createReactiveProxy(target) {
+  const existing = proxyCache.get(target);
+  if (existing)
+    return existing;
+  const proxy = new Proxy(target, {
+    get(target2, key, receiver) {
+      if (key === "set") {
+        return (newValue) => {
+          const oldKeys = new Set(Object.keys(target2));
+          const newKeys = new Set(Object.keys(newValue));
+          for (const k of oldKeys) {
+            if (!newKeys.has(k)) {
+              delete target2[k];
+              trigger(target2, k);
+            }
+          }
+          for (const k of newKeys) {
+            target2[k] = newValue[k];
+            trigger(target2, k);
+          }
+          if (Array.isArray(target2)) {
+            trigger(target2, "length");
+          }
+        };
+      }
+      if (key === "peek") {
+        return () => target2;
+      }
+      if (typeof key === "symbol") {
+        return Reflect.get(target2, key, receiver);
+      }
+      track(target2, key);
+      const value = target2[key];
+      if (typeof value === "object" && value !== null) {
+        return createReactiveProxy(value);
+      }
+      return value;
+    },
+    set(target2, key, newValue, receiver) {
+      const oldValue = target2[key];
+      const result = Reflect.set(target2, key, newValue, receiver);
+      if (oldValue !== newValue) {
+        trigger(target2, key);
+        if (Array.isArray(target2) && typeof key === "string" && !Number.isNaN(Number(key))) {
+          trigger(target2, "length");
+        }
+      }
+      return result;
+    },
+    deleteProperty(target2, key) {
+      const result = Reflect.deleteProperty(target2, key);
+      trigger(target2, key);
+      return result;
+    }
+  });
+  proxyCache.set(target, proxy);
+  proxyToTarget.set(proxy, target);
+  reactiveTargets.add(target);
+  return proxy;
+}
+function createPrimitiveSignal(initial) {
+  const subs = new Set;
+  let value = initial;
+  const getter = () => {
+    if (currentEffect && currentDeps) {
+      subs.add(currentEffect);
+      currentDeps.add(subs);
+    }
+    return value;
+  };
+  getter.set = (next) => {
+    value = next;
+    for (const fn of [...subs]) {
+      scheduleEffect(fn);
+    }
+  };
+  getter.peek = () => value;
+  return getter;
+}
+function createSignal(initial) {
+  if (typeof initial === "object" && initial !== null) {
+    const proxy = createReactiveProxy(initial);
+    const getter = () => proxy;
+    getter.set = (next) => proxy.set(next);
+    getter.peek = () => initial;
+    return getter;
+  }
+  return createPrimitiveSignal(initial);
+}
+function claim(nodes, tag, parent) {
+  for (let i = 0;i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node instanceof Element && node.tagName.toLowerCase() === tag.toLowerCase()) {
+      nodes.splice(i, 1);
+      return node;
+    }
+  }
+  const el = document.createElement(tag);
+  if (parent)
+    parent.appendChild(el);
+  return el;
+}
+function insert(parent, value) {
+  if (value === false || value === null || value === undefined)
+    return;
+  if (typeof value === "function") {
+    insert(parent, value());
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value)
+      insert(parent, item);
+    return;
+  }
+  if (value instanceof Node) {
+    parent.appendChild(value);
+    return;
+  }
+  parent.append(String(value));
+}
+var clientContextStore = new Map;
+var _hydrationStack = [];
+function pushHydrationNodes(nodes) {
+  _hydrationStack.push(nodes);
+}
+function popHydrationNodes() {
+  _hydrationStack.pop();
+}
+function getHydrationNodes() {
+  return _hydrationStack[_hydrationStack.length - 1] ?? [];
+}
+
+// src/client/scope.ts
+function withEffectScope(fn) {
+  const prev = globalThis.__sigilEffectScope;
+  const disposers = [];
+  globalThis.__sigilEffectScope = disposers;
+  try {
+    fn();
+  } finally {
+    globalThis.__sigilEffectScope = prev;
+  }
+  return () => {
+    for (const d of disposers)
+      d();
+    disposers.length = 0;
+  };
+}
+
+// src/client/router.ts
+var routeMap = {};
+var layoutList = [];
+var disposeCurrentPage = null;
+var currentPath = location.pathname;
+var beforeNavigateCb = null;
+var onNavigateCb = null;
+var afterNavigateCb = null;
+var scrollPositions = new Map;
+function saveScrollPosition() {
+  scrollPositions.set(currentPath, window.scrollY);
+}
+function restoreScrollPosition(path) {
+  const saved = scrollPositions.get(path);
+  if (saved !== undefined) {
+    requestAnimationFrame(() => window.scrollTo(0, saved));
+  } else {
+    requestAnimationFrame(() => window.scrollTo(0, 0));
+  }
+}
+var preloadTimer = null;
+function setupPreload() {
+  document.addEventListener("mouseover", (e) => {
+    const a = e.target.closest("a");
+    if (!a)
+      return;
+    const href = a.getAttribute("href");
+    if (!href)
+      return;
+    if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href))
+      return;
+    const preloadData = a.hasAttribute("data-sigil-preload-data");
+    const preloadCode = a.hasAttribute("data-sigil-preload-code");
+    if (!preloadData && !preloadCode)
+      return;
+    if (preloadTimer)
+      clearTimeout(preloadTimer);
+    preloadTimer = setTimeout(() => {
+      if (preloadCode) {
+        const link = document.createElement("link");
+        link.rel = "prefetch";
+        link.href = href;
+        document.head.appendChild(link);
+      }
+      if (preloadData) {
+        fetch(href, {
+          headers: { "x-grimoire-navigate": "1" },
+          priority: "low"
+        }).catch(() => {});
+      }
+    }, 80);
+  });
+  document.addEventListener("mouseout", (e) => {
+    const a = e.target.closest("a");
+    if (!a)
+      return;
+    if (preloadTimer)
+      clearTimeout(preloadTimer);
+  });
+}
+async function navigate(path) {
+  const url = new URL(path, location.origin);
+  if (beforeNavigateCb) {
+    const shouldProceed = beforeNavigateCb(url);
+    if (shouldProceed === false)
+      return;
+  }
+  onNavigateCb?.(url);
+  saveScrollPosition();
+  const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
+  const contentType = res.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) {
+    window.location.href = path;
+    return;
+  }
+  const json = await res.json();
+  const { data, layoutData, params, pattern, head } = json;
+  const Page = routeMap[pattern];
+  if (!Page) {
+    window.location.href = path;
+    return;
+  }
+  disposeCurrentPage?.();
+  disposeCurrentPage = null;
+  pushHydrationNodes([]);
+  let rootNode;
+  disposeCurrentPage = withEffectScope(() => {
+    try {
+      const matchedLayouts = layoutList.filter((l) => l.path === "/" || pattern === l.path || pattern.startsWith(l.path + "/")).sort((a, b) => a.path.length - b.path.length);
+      let renderFn = () => {
+        const pageNode = Page({ data, params });
+        const pageDiv = document.createElement("div");
+        pageDiv.id = "grimoire-page";
+        pageDiv.appendChild(pageNode);
+        return pageDiv;
+      };
+      for (let i = matchedLayouts.length - 1;i >= 0; i--) {
+        const LayoutComponent = matchedLayouts[i].component;
+        const innerRender = renderFn;
+        const currentLayoutData = layoutData?.[i];
+        renderFn = () => {
+          const childNode = innerRender();
+          return LayoutComponent({
+            data: currentLayoutData,
+            params,
+            children: childNode
+          });
+        };
+      }
+      rootNode = renderFn();
+    } catch (e) {
+      console.error(e);
+    }
+  });
+  popHydrationNodes();
+  updateHead(head);
+  document.title = head?.title ?? document.title;
+  document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+  currentPath = path;
+  restoreScrollPosition(path);
+  afterNavigateCb?.(url);
+}
+function initRouter(routes2, layouts2, initialDispose) {
+  routeMap = routes2;
+  layoutList = layouts2;
+  disposeCurrentPage = initialDispose ?? null;
+  currentPath = location.pathname;
+  saveScrollPosition();
+  document.addEventListener("click", handleClick);
+  window.addEventListener("popstate", () => {
+    if (location.pathname !== currentPath) {
+      saveScrollPosition();
+      currentPath = location.pathname;
+      navigate(location.pathname);
+    }
+  });
+  setupPreload();
+}
+function updateHead(headHtml) {
+  document.querySelectorAll("[data-grimoire-head]").forEach((el) => el.remove());
+  const parsed = headHtml ? new DOMParser().parseFromString(`<head>${headHtml}</head>`, "text/html") : null;
+  const incomingTitle = parsed?.querySelector("title");
+  document.querySelectorAll("title").forEach((el) => el.remove());
+  document.title = incomingTitle?.textContent ?? document.title;
+  if (parsed) {
+    for (const el of Array.from(parsed.head.children)) {
+      if (el.tagName === "TITLE")
+        continue;
+      el.dataset.grimoireHead = "1";
+      document.head.appendChild(el);
+    }
+  }
+}
+function handleClick(e) {
+  const a = e.target.closest("a");
+  if (!a)
+    return;
+  const href = a.getAttribute("href");
+  if (!href)
+    return;
+  if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href))
+    return;
+  e.preventDefault();
+  navigate(href);
+}
+
+// src/rendering/hydrate.ts
+var stateEl = document.getElementById("__grimoire_state__");
+var initialDispose;
+if (stateEl) {
+  const state = JSON.parse(stateEl.textContent);
+  const Page = routes[state.pattern];
+  if (Page) {
+    const slot = document.getElementById("grimoire-root");
+    if (slot) {
+      const matchedLayouts = layouts.filter((l) => l.path === "/" || state.pattern === l.path || state.pattern.startsWith(l.path + "/")).sort((a, b) => a.path.length - b.path.length);
+      const hasLayouts = matchedLayouts.length > 0;
+      if (hasLayouts) {
+        slot.replaceChildren();
+      }
+      const ssrClones = hasLayouts ? [] : Array.from(slot.childNodes).map((n) => n.cloneNode(true));
+      pushHydrationNodes(hasLayouts ? [] : Array.from(slot.childNodes));
+      try {
+        initialDispose = withEffectScope(() => {
+          try {
+            let renderFn = () => {
+              const pageDiv = claim(getHydrationNodes(), "div");
+              pageDiv.id = "grimoire-page";
+              if (pageDiv.childNodes.length > 0) {
+                pushHydrationNodes(Array.from(pageDiv.childNodes));
+                const pageNode = Page({ data: state.data, params: state.params });
+                popHydrationNodes();
+                insert(pageDiv, pageNode);
+              } else {
+                const pageNode = Page({ data: state.data, params: state.params });
+                insert(pageDiv, pageNode);
+              }
+              return pageDiv;
+            };
+            for (let i = matchedLayouts.length - 1;i >= 0; i--) {
+              const LayoutComponent = matchedLayouts[i].component;
+              const innerRender = renderFn;
+              const layoutData = state.layoutData?.[i];
+              renderFn = () => {
+                const childNode = innerRender();
+                return LayoutComponent({
+                  data: layoutData,
+                  params: state.params,
+                  children: childNode
+                });
+              };
+            }
+            const rootNode = renderFn();
+            insert(slot, rootNode);
+          } finally {
+            popHydrationNodes();
+          }
+        });
+      } catch (e) {
+        console.warn("[grimoire] hydration error:", e);
+      }
+      if (!slot.hasChildNodes() && ssrClones.length > 0) {
+        slot.replaceChildren(...ssrClones);
+      }
+    }
+  }
+}
+initRouter(routes, layouts, initialDispose);