@atolljs/devtools 0.1.7 → 0.1.9

package/dist/chunk-6E54FXKS.js

@@ -0,0 +1,495 @@
+import {
+  installFetchProbe,
+  installJankProbe,
+  installMemoryProbe,
+  runDevtoolsCommand,
+  setDevtoolsSink
+} from "./chunk-57NGHQUL.js";
+
+// src/control.ts
+var jsonSafe = (v) => {
+  if (v === void 0) return void 0;
+  try {
+    return JSON.parse(JSON.stringify(v));
+  } catch {
+    return String(v);
+  }
+};
+var answerControl = async (req, reply) => {
+  try {
+    const result = await runDevtoolsCommand(req.cmd, req.args ?? {});
+    reply({ type: "control-result", sessionId: req.sessionId, id: req.id, ok: true, result: jsonSafe(result) });
+  } catch (err) {
+    reply({
+      type: "control-result",
+      sessionId: req.sessionId,
+      id: req.id,
+      ok: false,
+      error: err instanceof Error ? err.message : String(err)
+    });
+  }
+};
+var captureEnv = () => {
+  const g = globalThis;
+  return {
+    crossOriginIsolated: g.crossOriginIsolated,
+    sharedArrayBuffer: typeof SharedArrayBuffer !== "undefined",
+    hardwareConcurrency: g.navigator?.hardwareConcurrency,
+    userAgent: g.navigator?.userAgent,
+    node: g.navigator ? void 0 : g.process?.version
+  };
+};
+
+// src/protocol.ts
+var DEVTOOLS_CHANNEL = "atoll-devtools";
+
+// src/broadcast.ts
+function connectBroadcast(opts, session) {
+  const bc = new BroadcastChannel(DEVTOOLS_CHANNEL);
+  const cap = opts.bufferCap ?? 5e4;
+  const tailCap = opts.replayBatches ?? 500;
+  const pending = [];
+  const tail = [];
+  let closed = false;
+  const post = (msg) => {
+    try {
+      bc.postMessage(msg);
+    } catch {
+    }
+  };
+  const hello = () => post({ type: "hello", session });
+  const flush = () => {
+    if (closed || pending.length === 0) return;
+    const events = pending.splice(0, pending.length);
+    tail.push(events);
+    if (tail.length > tailCap) tail.shift();
+    post({ type: "batch", session, events });
+  };
+  bc.onmessage = (m) => {
+    if (m.data?.type === "view") {
+      hello();
+      for (const events of tail) post({ type: "batch", session, events });
+    } else if (m.data?.type === "control" && m.data.sessionId === session.id) {
+      void answerControl(m.data, (res) => post(res));
+    }
+  };
+  const timer = setInterval(flush, opts.flushMs ?? 100);
+  timer.unref?.();
+  const bye = () => {
+    flush();
+    post({ type: "bye", sessionId: session.id });
+  };
+  const onHide = () => bye();
+  if (typeof addEventListener === "function") addEventListener("pagehide", onHide);
+  if (opts.network !== false) installFetchProbe(globalThis);
+  if (opts.memory !== false) installMemoryProbe(globalThis);
+  const releaseJank = opts.jank !== false ? installJankProbe() : () => {
+  };
+  setDevtoolsSink((event) => {
+    if (closed) return;
+    pending.push(event);
+    if (pending.length > cap) pending.shift();
+    if (pending.length >= 1e3) flush();
+  });
+  hello();
+  return {
+    session,
+    get open() {
+      return !closed;
+    },
+    close() {
+      if (closed) return;
+      closed = true;
+      bye();
+      setDevtoolsSink(null);
+      clearInterval(timer);
+      releaseJank();
+      if (typeof removeEventListener === "function") removeEventListener("pagehide", onHide);
+      bc.close();
+    }
+  };
+}
+
+// src/client.ts
+var sessionSeq = 0;
+var makeSession = (opts) => {
+  const runtime = typeof window !== "undefined" && typeof window.document !== "undefined" ? "browser" : "node";
+  const hint = opts.session?.hint ?? (runtime === "browser" ? globalThis.location?.href : globalThis.process?.title);
+  return {
+    id: `s-${Date.now().toString(36)}-${++sessionSeq}`,
+    name: opts.session?.name,
+    framework: opts.session?.framework,
+    runtime,
+    hint,
+    env: captureEnv()
+  };
+};
+var autoBroadcast = () => typeof BroadcastChannel !== "undefined" && typeof window !== "undefined" && typeof window.document !== "undefined";
+function connectDevtools(opts = {}) {
+  const session = makeSession(opts);
+  const t = opts.url !== void 0 ? "websocket" : opts.transport ?? "auto";
+  const useBc = t === "broadcast" ? typeof BroadcastChannel !== "undefined" : t === "auto" && autoBroadcast();
+  return useBc ? connectBroadcast(opts, session) : connectWebSocket(opts, session);
+}
+function connectWebSocket(opts, session) {
+  const url = opts.url ?? "ws://127.0.0.1:4780/events";
+  const cap = opts.bufferCap ?? 5e4;
+  const pending = [];
+  let closed = false;
+  let sock = null;
+  const send = (msg) => {
+    if (sock?.open) sock.send(JSON.stringify(msg));
+  };
+  const flush = () => {
+    if (!sock?.open || pending.length === 0) return;
+    const events = pending.splice(0, pending.length);
+    send({ type: "batch", events });
+  };
+  const onOpen = () => {
+    send({ type: "hello", session });
+    flush();
+  };
+  const onMessage = (text) => {
+    let msg;
+    try {
+      msg = JSON.parse(text);
+    } catch {
+      return;
+    }
+    if (msg.type === "control") void answerControl(msg, (res) => send(res));
+  };
+  const isNode = typeof window === "undefined" || typeof window.document === "undefined";
+  if (typeof WebSocket !== "undefined") {
+    const ws = new WebSocket(url);
+    sock = {
+      get open() {
+        return ws.readyState === ws.OPEN;
+      },
+      send: (t) => ws.send(t),
+      close: () => ws.close()
+    };
+    ws.onopen = onOpen;
+    ws.onmessage = (m) => onMessage(String(m.data));
+    ws.onclose = () => clearInterval(timer);
+    ws.onerror = () => ws.close();
+  } else if (isNode) {
+    const mod = "./nodeWs.ts";
+    void import(
+      /* @vite-ignore */
+      mod
+    ).then((m) => {
+      if (closed) return;
+      const ws = m.connectNodeWebSocket(url);
+      sock = ws;
+      ws.onOpen = onOpen;
+      ws.onMessage = onMessage;
+      ws.onClose = () => clearInterval(timer);
+    }).catch(() => {
+    });
+  }
+  const timer = setInterval(flush, opts.flushMs ?? 100);
+  timer.unref?.();
+  if (opts.network !== false) installFetchProbe(globalThis);
+  if (opts.memory !== false) installMemoryProbe(globalThis);
+  const releaseJank = opts.jank !== false ? installJankProbe() : () => {
+  };
+  setDevtoolsSink((event) => {
+    if (closed) return;
+    pending.push(event);
+    if (pending.length > cap) pending.shift();
+    if (pending.length >= 1e3) flush();
+  });
+  return {
+    session,
+    get open() {
+      return sock?.open ?? false;
+    },
+    close() {
+      closed = true;
+      setDevtoolsSink(null);
+      flush();
+      sock?.close();
+      clearInterval(timer);
+      releaseJank();
+    }
+  };
+}
+
+// src/overlay.ts
+var BTN_STYLE = "position:fixed;z-index:2147483646;font:11px ui-monospace,monospace;color:#c9d1d9;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:5px 9px;cursor:pointer";
+var PANEL_STYLE = "position:fixed;z-index:2147483646;display:flex;flex-direction:column;background:#0d1117;border:1px solid #30363d;border-radius:8px;box-shadow:0 12px 40px #000c;overflow:hidden;min-width:340px;min-height:220px;max-width:100vw;max-height:100vh;box-sizing:border-box";
+var EDGE_CSS = {
+  n: "top:0;left:10px;right:10px;height:4px;cursor:ns-resize",
+  s: "bottom:0;left:10px;right:16px;height:5px;cursor:ns-resize",
+  e: "right:0;top:10px;bottom:16px;width:5px;cursor:ew-resize",
+  w: "left:0;top:10px;bottom:10px;width:5px;cursor:ew-resize",
+  ne: "right:0;top:0;width:10px;height:10px;cursor:nesw-resize",
+  nw: "left:0;top:0;width:10px;height:10px;cursor:nwse-resize",
+  sw: "left:0;bottom:0;width:10px;height:10px;cursor:nesw-resize",
+  se: "right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#30363d 50%);border-radius:0 0 7px"
+};
+var ANCHOR = {
+  topleft: (m) => `left:${m}px;top:${m}px`,
+  topcenter: (m) => `left:50%;top:${m}px;transform:translateX(-50%)`,
+  topright: (m) => `right:${m}px;top:${m}px`,
+  bottomleft: (m) => `left:${m}px;bottom:${m}px`,
+  bottomcenter: (m) => `left:50%;bottom:${m}px;transform:translateX(-50%)`,
+  bottomright: (m) => `right:${m}px;bottom:${m}px`
+};
+var MIN_W = 340;
+var MIN_H = 220;
+var seq = 0;
+function parseHotkey(spec) {
+  const parts = spec.split("+").map((p) => p.trim().toLowerCase()).filter(Boolean);
+  const key = parts.pop() ?? "";
+  const mods = new Set(parts.map((m) => m === "option" ? "alt" : m === "cmd" || m === "meta" ? "meta" : m === "control" ? "ctrl" : m));
+  const code = /^[a-z]$/.test(key) ? `Key${key.toUpperCase()}` : /^[0-9]$/.test(key) ? `Digit${key}` : null;
+  return (e) => e.altKey === mods.has("alt") && e.shiftKey === mods.has("shift") && e.ctrlKey === mods.has("ctrl") && e.metaKey === mods.has("meta") && (code ? e.code === code : e.key.toLowerCase() === key);
+}
+function mountDevtoolsOverlay(opts = {}) {
+  const src = opts.src ?? "/__atoll/?mini=1";
+  const storeKey = opts.persist === false ? null : typeof opts.persist === "string" ? opts.persist : "atoll-devtools:overlay";
+  const load = () => {
+    if (!storeKey) return {};
+    try {
+      return JSON.parse(localStorage.getItem(storeKey) ?? "{}");
+    } catch {
+      return {};
+    }
+  };
+  const saved = load();
+  const W = Math.max(MIN_W, saved.width ?? opts.width ?? 760);
+  const H = Math.max(MIN_H, saved.height ?? opts.height ?? 580);
+  const anchor = ANCHOR[opts.position ?? "bottomright"];
+  const hotkey = opts.hotkey === false ? null : opts.hotkey ?? "Alt+Shift+D";
+  const isHotkey = hotkey ? parseHotkey(hotkey) : null;
+  const hint = hotkey ? ` (${hotkey})` : "";
+  const id = `atoll-devtools-overlay-${++seq}`;
+  let open = false;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = "atoll devtools";
+  btn.title = `Open atoll devtools${hint}`;
+  btn.setAttribute("aria-controls", id);
+  btn.setAttribute("aria-expanded", "false");
+  btn.style.cssText = `${BTN_STYLE};${anchor(12)}`;
+  const panel = document.createElement("div");
+  panel.id = id;
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "atoll devtools");
+  panel.style.cssText = `${PANEL_STYLE};width:${W}px;height:${H}px;display:none;${anchor(16)}`;
+  const head = document.createElement("div");
+  head.style.cssText = "display:flex;align-items:center;gap:8px;padding:5px 10px;flex:none;border-bottom:1px solid #21262d;font:11px ui-monospace,monospace;color:#8b949e;background:#161b22;cursor:move;user-select:none";
+  const title = document.createElement("span");
+  title.textContent = "atoll devtools";
+  const base = src.split(/[?#]/)[0];
+  const frame = document.createElement("iframe");
+  let route = "";
+  const currentRoute = () => {
+    try {
+      const h = frame.contentWindow?.location.hash;
+      if (typeof h === "string" && h.startsWith("#/")) return h;
+    } catch {
+    }
+    return route;
+  };
+  const pop = document.createElement("a");
+  pop.href = base;
+  pop.target = "_blank";
+  pop.rel = "noopener";
+  pop.textContent = "full page \u2197";
+  pop.title = "Open this view in the full-page dashboard";
+  pop.style.cssText = "color:#58a6ff;text-decoration:none;margin-left:auto";
+  const syncPop = () => {
+    pop.href = base + currentRoute();
+  };
+  pop.addEventListener("pointerenter", syncPop);
+  pop.addEventListener("focus", syncPop);
+  pop.addEventListener("click", syncPop);
+  const x = document.createElement("button");
+  x.type = "button";
+  x.textContent = "\xD7";
+  x.title = `Close${hint}`;
+  x.setAttribute("aria-label", "Close atoll devtools");
+  x.style.cssText = "color:#8b949e;background:none;border:none;cursor:pointer;font:14px/1 ui-monospace,monospace;padding:0 2px";
+  head.append(title, pop, x);
+  frame.src = src;
+  frame.title = "atoll devtools dashboard";
+  frame.style.cssText = "flex:1;border:0;background:#0d1117;min-height:0";
+  const handles = ["n", "s", "e", "w", "ne", "nw", "sw", "se"].map((edge) => {
+    const h = document.createElement("div");
+    h.setAttribute("aria-hidden", "true");
+    h.dataset.edge = edge;
+    h.style.cssText = `position:absolute;z-index:1;${EDGE_CSS[edge]}`;
+    return h;
+  });
+  panel.append(head, frame, ...handles);
+  document.body.append(panel, btn);
+  const px = (v) => parseFloat(v) || 0;
+  const vw = () => document.documentElement.clientWidth || innerWidth;
+  const vh = () => document.documentElement.clientHeight || innerHeight;
+  const fitW = (w) => Math.max(MIN_W, Math.min(w, vw()));
+  const fitH = (h) => Math.max(MIN_H, Math.min(h, vh()));
+  const placeAt = (left, top) => {
+    const w = px(panel.style.width), h = px(panel.style.height);
+    panel.style.left = `${Math.min(Math.max(0, left), Math.max(0, vw() - w))}px`;
+    panel.style.top = `${Math.min(Math.max(0, top), Math.max(0, vh() - h))}px`;
+    panel.style.right = "auto";
+    panel.style.bottom = "auto";
+    panel.style.transform = "none";
+  };
+  const pinned = () => panel.style.right === "auto";
+  const pin = () => {
+    if (pinned()) return;
+    const r = panel.getBoundingClientRect();
+    placeAt(r.left, r.top);
+  };
+  const refit = () => {
+    panel.style.width = `${fitW(px(panel.style.width))}px`;
+    panel.style.height = `${fitH(px(panel.style.height))}px`;
+    if (pinned()) placeAt(px(panel.style.left), px(panel.style.top));
+  };
+  if (typeof saved.left === "number" && typeof saved.top === "number") {
+    panel.style.width = `${fitW(W)}px`;
+    panel.style.height = `${fitH(H)}px`;
+    placeAt(saved.left, saved.top);
+  }
+  const mem = { ...saved };
+  const save = (what) => {
+    if (!storeKey) return;
+    if (what === "open") mem.open = open;
+    if (what === "size") {
+      mem.width = parseFloat(panel.style.width);
+      mem.height = parseFloat(panel.style.height);
+    }
+    if (what === "move" || what === "size") {
+      mem.left = parseFloat(panel.style.left);
+      mem.top = parseFloat(panel.style.top);
+    }
+    try {
+      localStorage.setItem(storeKey, JSON.stringify(mem));
+    } catch {
+    }
+  };
+  const drag = (e, what, move) => {
+    e.preventDefault();
+    const sx = e.clientX, sy = e.clientY;
+    frame.style.pointerEvents = "none";
+    const mm = (ev) => move(ev.clientX - sx, ev.clientY - sy);
+    const up = () => {
+      removeEventListener("pointermove", mm);
+      removeEventListener("pointerup", up);
+      frame.style.pointerEvents = "";
+      save(what);
+    };
+    addEventListener("pointermove", mm);
+    addEventListener("pointerup", up);
+  };
+  head.onpointerdown = (e) => {
+    if (e.target.closest("a,button")) return;
+    pin();
+    refit();
+    const l0 = px(panel.style.left), t0 = px(panel.style.top);
+    drag(e, "move", (dx, dy) => placeAt(l0 + dx, t0 + dy));
+  };
+  for (const h of handles) {
+    const edge = h.dataset.edge;
+    h.onpointerdown = (e) => {
+      e.stopPropagation();
+      pin();
+      refit();
+      const l0 = px(panel.style.left), t0 = px(panel.style.top);
+      const w0 = px(panel.style.width), h0 = px(panel.style.height);
+      drag(e, "size", (dx, dy) => {
+        let left = l0, top = t0, w = w0, hh = h0;
+        if (edge.includes("e")) w = Math.max(MIN_W, Math.min(w0 + dx, vw() - l0));
+        if (edge.includes("s")) hh = Math.max(MIN_H, Math.min(h0 + dy, vh() - t0));
+        if (edge.includes("w")) {
+          left = Math.max(0, Math.min(l0 + dx, l0 + w0 - MIN_W));
+          w = l0 + w0 - left;
+        }
+        if (edge.includes("n")) {
+          top = Math.max(0, Math.min(t0 + dy, t0 + h0 - MIN_H));
+          hh = t0 + h0 - top;
+        }
+        panel.style.width = `${w}px`;
+        panel.style.height = `${hh}px`;
+        panel.style.left = `${left}px`;
+        panel.style.top = `${top}px`;
+      });
+    };
+  }
+  const set = (v, focus = false, persist = true) => {
+    const hadFocus = panel.contains(document.activeElement);
+    open = v;
+    panel.style.display = v ? "flex" : "none";
+    if (v) refit();
+    btn.style.display = v ? "none" : "block";
+    btn.setAttribute("aria-expanded", String(v));
+    if (v && focus) frame.focus();
+    if (!v && hadFocus) btn.focus();
+    if (persist) save("open");
+  };
+  btn.onclick = () => set(true, true);
+  x.onclick = () => set(false);
+  const onKey = (e) => {
+    if (!isHotkey?.(e)) return;
+    e.preventDefault();
+    set(!open, true);
+  };
+  const onMessage = (e) => {
+    if (e.source !== frame.contentWindow || !e.data || typeof e.data !== "object") return;
+    const d = e.data;
+    if (d.type === "atoll-devtools:toggle") set(!open);
+    else if (d.type === "atoll-devtools:route" && typeof d.hash === "string" && d.hash.startsWith("#/")) {
+      route = d.hash;
+    }
+  };
+  const onResize = () => {
+    if (open) refit();
+  };
+  if (isHotkey) addEventListener("keydown", onKey);
+  addEventListener("message", onMessage);
+  addEventListener("resize", onResize);
+  const ro = typeof ResizeObserver === "function" ? new ResizeObserver(onResize) : void 0;
+  ro?.observe(document.documentElement);
+  set(opts.startOpen ?? saved.open === true, false, false);
+  return {
+    open: () => set(true),
+    close: () => set(false),
+    toggle: () => set(!open),
+    unmount: () => {
+      removeEventListener("keydown", onKey);
+      removeEventListener("message", onMessage);
+      removeEventListener("resize", onResize);
+      ro?.disconnect();
+      panel.remove();
+      btn.remove();
+    }
+  };
+}
+
+// src/init.ts
+var DEVTOOLS_PARAM = "__atoll_devtools";
+var devtoolsEnabled = (enabled) => {
+  if (enabled !== void 0) return enabled;
+  if (typeof location !== "undefined" && typeof location.search === "string") {
+    return new URLSearchParams(location.search).has(DEVTOOLS_PARAM);
+  }
+  return !!globalThis.process?.env?.ATOLL_DEVTOOLS;
+};
+function initDevtools(opts = {}) {
+  if (!devtoolsEnabled(opts.enabled)) return null;
+  const conn = connectDevtools(opts);
+  const inWindow = typeof window !== "undefined" && typeof window.document !== "undefined";
+  const overlay = inWindow && opts.overlay !== false ? mountDevtoolsOverlay(typeof opts.overlay === "object" ? opts.overlay : {}) : null;
+  return { conn, overlay };
+}
+
+export {
+  connectDevtools,
+  mountDevtoolsOverlay,
+  DEVTOOLS_PARAM,
+  devtoolsEnabled,
+  initDevtools
+};