@mokly/mokly 0.8.0

package/dist/browser/browse_state.js

@@ -0,0 +1,165 @@
+// src/client/browse_state.ts
+import {
+  isNavDisclosureClosed,
+  isNavDisclosureKey
+} from "./browse_navigation.js";
+import {
+  applyNavVisibility,
+  selectAndRevealRoute
+} from "./browse_navigation_state.js";
+import { syncTagChips } from "./tag_filter.js";
+function captureRegionScrolls(doc) {
+  const scrolls = {};
+  for (const region of doc.querySelectorAll(
+    "[data-mokly-scroll]"
+  )) {
+    const key = region.getAttribute("data-mokly-scroll");
+    if (key) scrolls[key] = region.scrollTop;
+  }
+  return scrolls;
+}
+function restoreRegionScrolls(doc, scrolls) {
+  for (const region of doc.querySelectorAll(
+    "[data-mokly-scroll]"
+  )) {
+    const key = region.getAttribute("data-mokly-scroll");
+    if (key && typeof scrolls[key] === "number")
+      region.scrollTop = scrolls[key];
+  }
+}
+function captureBrowseState(doc, _win) {
+  const shell = doc.querySelector("[data-mokly-shell]");
+  if (!shell) return void 0;
+  const disclosures = [
+    ...doc.querySelectorAll("[data-nav-disclosure]")
+  ];
+  const closedCollectionIds = disclosures.flatMap((disclosure) => {
+    const id = disclosure.getAttribute("data-nav-disclosure");
+    return !disclosure.open && id ? [id] : [];
+  });
+  const filterBaselineClosedCollectionIds = disclosures.some(
+    (disclosure) => disclosure.dataset["filterOpen"] !== void 0
+  ) ? disclosures.flatMap((disclosure) => {
+    const id = disclosure.getAttribute("data-nav-disclosure");
+    return disclosure.dataset["filterOpen"] === "0" && id ? [id] : [];
+  }) : null;
+  const changesStatus = doc.querySelector("[data-changes-status]")?.dataset["changesStatus"];
+  return {
+    ...changesStatus ? { changesStatus } : {},
+    changedOnly: doc.querySelector('[data-filter="changed"]')?.getAttribute("aria-pressed") === "true",
+    closedCollectionIds,
+    colorScheme: currentColorScheme(doc),
+    detailsOpen: (doc.querySelector("[data-workspace-inspector]") ? doc.querySelector("[data-workspace-inspector]")?.dataset["open"] === "true" : void 0) ?? doc.querySelector("[data-mokly-details]")?.open ?? false,
+    drawerOpen: shell.dataset["drawer"] === "open",
+    filterBaselineClosedCollectionIds,
+    navScroll: doc.querySelector("[data-mokly-nav-scroll]")?.scrollTop ?? 0,
+    query: doc.querySelector("[data-mokly-search]")?.value ?? "",
+    regionScrolls: captureRegionScrolls(doc),
+    viewport: currentViewport(doc)
+  };
+}
+function restoreBrowseState(doc, win, state) {
+  const shell = doc.querySelector("[data-mokly-shell]");
+  if (!shell) return;
+  const search = doc.querySelector("[data-mokly-search]");
+  if (search) search.value = state.query;
+  for (const option of doc.querySelectorAll("[data-filter]")) {
+    const changed = option.getAttribute("data-filter") === "changed";
+    option.setAttribute(
+      "aria-pressed",
+      changed === state.changedOnly ? "true" : "false"
+    );
+  }
+  const closed = new Set(state.closedCollectionIds.filter(isNavDisclosureKey));
+  const filterBaselineClosed = state.filterBaselineClosedCollectionIds === null ? void 0 : new Set(
+    state.filterBaselineClosedCollectionIds.filter(isNavDisclosureKey)
+  );
+  for (const disclosure of doc.querySelectorAll(
+    "[data-nav-disclosure]"
+  )) {
+    const id = disclosure.getAttribute("data-nav-disclosure");
+    disclosure.open = !id || !isNavDisclosureClosed(closed, id);
+    if (filterBaselineClosed) {
+      disclosure.dataset["filterOpen"] = id && isNavDisclosureClosed(filterBaselineClosed, id) ? "0" : "1";
+    } else {
+      delete disclosure.dataset["filterOpen"];
+    }
+  }
+  const details = doc.querySelector("[data-mokly-details]");
+  if (details) details.open = state.detailsOpen;
+  const inspector = doc.querySelector(
+    "[data-workspace-inspector]"
+  );
+  if (inspector) {
+    inspector.dataset["open"] = String(state.detailsOpen);
+    doc.dispatchEvent(new win.Event("mokly:inspector-restore"));
+  }
+  setDrawer(shell, state.drawerOpen);
+  setViewport(doc, state.viewport);
+  setColorScheme(doc, state.colorScheme);
+  applyNavVisibility(doc, "preserve");
+  const currentStatus = doc.querySelector("[data-changes-status]")?.dataset["changesStatus"];
+  const deferredChanges = state.changedOnly && (state.changesStatus !== void 0 && state.changesStatus !== "ready" || currentStatus !== void 0 && currentStatus !== "ready");
+  if (!deferredChanges)
+    selectAndRevealRoute(
+      doc,
+      win.location.pathname,
+      win.location.href,
+      "recovery"
+    );
+  syncTagChips(doc);
+  const nav = doc.querySelector("[data-mokly-nav-scroll]");
+  if (nav) nav.scrollTop = state.navScroll;
+  restoreRegionScrolls(doc, state.regionScrolls);
+}
+function setDrawer(shell, open) {
+  shell.dataset["drawer"] = open ? "open" : "closed";
+  const button = shell.querySelector("[data-mokly-menu]");
+  button?.setAttribute("aria-expanded", open ? "true" : "false");
+}
+function setViewport(doc, value) {
+  for (const stage of doc.querySelectorAll("[data-mokly-stage]"))
+    stage.setAttribute("data-viewport", value);
+  for (const option of doc.querySelectorAll("[data-viewport-option]"))
+    option.setAttribute(
+      "aria-pressed",
+      option.getAttribute("data-viewport-option") === value ? "true" : "false"
+    );
+}
+function currentViewport(doc) {
+  const value = doc.querySelector("[data-mokly-stage]")?.getAttribute("data-viewport");
+  return value === "desktop" || value === "mobile" ? value : "both";
+}
+function setColorScheme(doc, value) {
+  const scheme = doc.querySelector("[data-color-scheme-option]") ? value : "light";
+  doc.body.setAttribute("data-mokly-color-scheme", scheme);
+  for (const option of doc.querySelectorAll("[data-color-scheme-option]"))
+    option.setAttribute(
+      "aria-pressed",
+      option.getAttribute("data-color-scheme-option") === scheme ? "true" : "false"
+    );
+  for (const frame of doc.querySelectorAll("iframe[data-fragment-light]")) {
+    const dark = frame.getAttribute("data-fragment-dark");
+    const light = frame.getAttribute("data-fragment-light");
+    const next = scheme === "dark" && dark ? dark : light;
+    if (next && (frame.getAttribute("data-fragment-current") ?? frame.getAttribute("src")) !== next) {
+      const target = frame;
+      target.contentWindow?.location.replace(new URL(next, doc.URL).href);
+      frame.setAttribute("data-fragment-current", next);
+    }
+  }
+}
+function currentColorScheme(doc) {
+  return doc.body.getAttribute("data-mokly-color-scheme") === "dark" ? "dark" : "light";
+}
+export {
+  captureBrowseState,
+  captureRegionScrolls,
+  currentColorScheme,
+  currentViewport,
+  restoreBrowseState,
+  restoreRegionScrolls,
+  setColorScheme,
+  setDrawer,
+  setViewport
+};

package/dist/browser/browse_update_state.js

@@ -0,0 +1,47 @@
+// src/client/browse_update_state.ts
+function readPageStamp(doc) {
+  const content = pageVersion(doc, "content");
+  const version = pageVersion(doc, "update");
+  return content !== void 0 && version !== void 0 && content <= version ? { content, version } : void 0;
+}
+function pageVersion(doc, kind) {
+  const raw = doc.documentElement.getAttribute(`data-mokly-${kind}-version`);
+  if (!raw || !/^[1-9]\d*$/.test(raw)) return;
+  const value = Number(raw);
+  return Number.isSafeInteger(value) ? value : void 0;
+}
+function navigationPending(doc) {
+  return doc.documentElement.hasAttribute("data-mokly-navigating");
+}
+function beginNavigation(doc) {
+  doc.documentElement.setAttribute("data-mokly-navigating", "");
+}
+function finishNavigation(doc) {
+  doc.documentElement.removeAttribute("data-mokly-navigating");
+  const Event = doc.defaultView?.Event;
+  if (Event) doc.dispatchEvent(new Event("mokly:navigation-settled"));
+}
+async function waitForNavigation(doc, signal) {
+  while (navigationPending(doc) && !signal.aborted) {
+    await new Promise((resolve) => {
+      const settled = () => {
+        doc.removeEventListener("mokly:navigation-settled", settled);
+        signal.removeEventListener("abort", settled);
+        resolve();
+      };
+      doc.addEventListener("mokly:navigation-settled", settled, {
+        once: true
+      });
+      signal.addEventListener("abort", settled, { once: true });
+    });
+  }
+  signal.throwIfAborted();
+}
+export {
+  beginNavigation,
+  finishNavigation,
+  navigationPending,
+  pageVersion,
+  readPageStamp,
+  waitForNavigation
+};

package/dist/browser/browser.js

@@ -0,0 +1,71 @@
+// src/client/browser.ts
+import {
+  captureBrowseState,
+  restoreBrowseState
+} from "./browse_state.js";
+import {
+  LiveUpdateController
+} from "./live_updates.js";
+import { refreshBrowseEvidence } from "./browse_refresh.js";
+function startBrowserLiveUpdates(environment) {
+  const controller = new LiveUpdateController(
+    new EventSourceStream(environment.createEventSource("/__mokly/events")),
+    environment.storage,
+    environment.location,
+    environment.captureBrowseState,
+    environment.pageVersion,
+    environment.refresh
+  );
+  const recovery = controller.consumeRecovery();
+  if (recovery?.browse && recovery.url === environment.location.href)
+    environment.restoreBrowseState(recovery.browse);
+  controller.start();
+  environment.onPageHide(() => controller.close());
+  return controller;
+}
+function pageUpdateVersion(document2) {
+  const encoded = document2.documentElement.getAttribute(
+    "data-mokly-update-version"
+  );
+  if (!encoded || !/^[1-9]\d*$/.test(encoded)) return void 0;
+  const version = Number(encoded);
+  return Number.isSafeInteger(version) ? version : void 0;
+}
+var EventSourceStream = class {
+  constructor(source) {
+    this.source = source;
+  }
+  source;
+  close() {
+    this.source.close();
+  }
+  onReady(callback) {
+    this.source.addEventListener(
+      "ready",
+      (event) => callback(Number(event.data))
+    );
+  }
+  onUpdate(callback) {
+    this.source.addEventListener(
+      "update",
+      (event) => callback(Number(event.data))
+    );
+  }
+};
+if (typeof window !== "undefined" && typeof EventSource !== "undefined") {
+  const updateVersion = pageUpdateVersion(document);
+  startBrowserLiveUpdates({
+    captureBrowseState: () => captureBrowseState(document, window),
+    createEventSource: (url) => new EventSource(url),
+    location: window.location,
+    onPageHide: (callback) => window.addEventListener("pagehide", callback, { once: true }),
+    ...updateVersion ? { pageVersion: updateVersion } : {},
+    refresh: (version, signal) => refreshBrowseEvidence(document, window, version, signal),
+    restoreBrowseState: (state) => restoreBrowseState(document, window, state),
+    storage: window.sessionStorage
+  });
+}
+export {
+  pageUpdateVersion,
+  startBrowserLiveUpdates
+};

package/dist/browser/clipboard.js

@@ -0,0 +1,19 @@
+// src/client/clipboard.ts
+function copyText(doc, text) {
+  const clipboard = doc.defaultView?.navigator.clipboard;
+  if (clipboard) {
+    void clipboard.writeText(text).catch(() => void 0);
+    return;
+  }
+  const area = doc.createElement("textarea");
+  area.value = text;
+  area.style.position = "fixed";
+  area.style.opacity = "0";
+  doc.body.appendChild(area);
+  area.select();
+  doc.execCommand("copy");
+  area.remove();
+}
+export {
+  copyText
+};