@fluixi/devtools 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/callsite.cjs

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/callsite.ts
+var callsite_exports = {};
+__export(callsite_exports, {
+  callSite: () => callSite,
+  currentCallSite: () => currentCallSite
+});
+module.exports = __toCommonJS(callsite_exports);
+var EXTENSION = ["chrome-extension://", "moz-extension://", "safari-web-extension://", "extension://"];
+var INTERNAL = [
+  "/packages/reactive/",
+  "/packages/dom/",
+  "/packages/core/",
+  "/packages/devtools/",
+  "/@fluixi/",
+  "node_modules",
+  "fluixi-devtools",
+  ...EXTENSION
+];
+var REPORTING = [
+  "/packages/reactive/src/lib/signal/graph/",
+  "/packages/devtools/",
+  "fluixi-devtools",
+  // Not a fallback either: naming the agent as where a node came from is worse than nothing.
+  ...EXTENSION
+];
+var FRAME = /(?:at\s+(?:[^(]*\()?)([^()\s]+):(\d+):(\d+)\)?$/;
+var isInternal = (frame) => INTERNAL.some((part) => frame.includes(part));
+function locate(frame, origin) {
+  const match = FRAME.exec(frame);
+  if (!match) return void 0;
+  let file = match[1];
+  if (origin && file.startsWith(origin)) file = file.slice(origin.length);
+  file = file.replace(/^\/@fs\//, "/").replace(/\?.*$/, "").replace(/^\//, "");
+  return file ? { file, line: Number(match[2]), column: Number(match[3]) } : void 0;
+}
+function callSite(stack, origin) {
+  if (!stack) return void 0;
+  let fallback;
+  for (const line of stack.split("\n")) {
+    const frame = line.trim();
+    if (!frame.startsWith("at ")) continue;
+    if (!isInternal(frame)) {
+      const location = locate(frame, origin);
+      if (location) return { location, external: false };
+      continue;
+    }
+    if (!fallback && !REPORTING.some((part) => frame.includes(part))) fallback = locate(frame, origin);
+  }
+  return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
+}
+function currentCallSite(origin) {
+  return callSite(new Error().stack, origin);
+}

package/dist/callsite.mjs

@@ -0,0 +1,51 @@
+// src/callsite.ts
+var EXTENSION = ["chrome-extension://", "moz-extension://", "safari-web-extension://", "extension://"];
+var INTERNAL = [
+  "/packages/reactive/",
+  "/packages/dom/",
+  "/packages/core/",
+  "/packages/devtools/",
+  "/@fluixi/",
+  "node_modules",
+  "fluixi-devtools",
+  ...EXTENSION
+];
+var REPORTING = [
+  "/packages/reactive/src/lib/signal/graph/",
+  "/packages/devtools/",
+  "fluixi-devtools",
+  // Not a fallback either: naming the agent as where a node came from is worse than nothing.
+  ...EXTENSION
+];
+var FRAME = /(?:at\s+(?:[^(]*\()?)([^()\s]+):(\d+):(\d+)\)?$/;
+var isInternal = (frame) => INTERNAL.some((part) => frame.includes(part));
+function locate(frame, origin) {
+  const match = FRAME.exec(frame);
+  if (!match) return void 0;
+  let file = match[1];
+  if (origin && file.startsWith(origin)) file = file.slice(origin.length);
+  file = file.replace(/^\/@fs\//, "/").replace(/\?.*$/, "").replace(/^\//, "");
+  return file ? { file, line: Number(match[2]), column: Number(match[3]) } : void 0;
+}
+function callSite(stack, origin) {
+  if (!stack) return void 0;
+  let fallback;
+  for (const line of stack.split("\n")) {
+    const frame = line.trim();
+    if (!frame.startsWith("at ")) continue;
+    if (!isInternal(frame)) {
+      const location = locate(frame, origin);
+      if (location) return { location, external: false };
+      continue;
+    }
+    if (!fallback && !REPORTING.some((part) => frame.includes(part))) fallback = locate(frame, origin);
+  }
+  return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
+}
+function currentCallSite(origin) {
+  return callSite(new Error().stack, origin);
+}
+export {
+  callSite,
+  currentCallSite
+};

package/dist/change-view.cjs

@@ -0,0 +1,134 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/change-view.ts
+var change_view_exports = {};
+__export(change_view_exports, {
+  CHANGE_CSS: () => CHANGE_CSS,
+  changeRows: () => changeRows,
+  handleCopyClick: () => handleCopyClick
+});
+module.exports = __toCommonJS(change_view_exports);
+
+// src/copy.ts
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}
+
+// src/change-view.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var SIGN = { added: "+", removed: "−", changed: "~" };
+function pretty(json) {
+  if (!json) return void 0;
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return void 0;
+  }
+}
+function sideOf(text, json, cls) {
+  const block = pretty(json);
+  if (!block) return `<span class="ch-${cls}">${escape(text ?? "")}</span>`;
+  return `<div class="ch-block ch-${cls}"><button type="button" class="ch-copy" title="Copy" data-copy="${escape(block)}">copy</button><pre class="ch-json">${escape(block)}</pre></div>`;
+}
+function changeRows(change, limit = Infinity) {
+  if (!change?.entries?.length) return "";
+  const shown = change.entries.slice(0, limit);
+  const hidden = change.entries.length - shown.length + (change.more ?? 0);
+  const rows = shown.map((entry) => {
+    const from = sideOf(entry.from, entry.fromJson, "from");
+    const to = sideOf(entry.to, entry.toJson, "to");
+    const sides = entry.op === "changed" ? `${from}<span class="ch-arrow">→</span>${to}` : entry.op === "added" ? to : from;
+    const stacked = entry.fromJson || entry.toJson ? " ch-stacked" : "";
+    return `<div class="ch-row ch-${entry.op}${stacked}"><span class="ch-sign">${SIGN[entry.op] ?? "·"}</span><span class="ch-key">${escape(entry.key)}</span><span class="ch-sides">${sides}</span></div>`;
+  }).join("");
+  const size = change.length ? `<div class="ch-size">${change.length.from} → ${change.length.to} items</div>` : "";
+  return `<div class="ch-list">${size}${rows}${hidden > 0 ? `<div class="ch-more">and ${hidden} more</div>` : ""}</div>`;
+}
+function handleCopyClick(event) {
+  const button = event.target?.closest?.(".ch-copy");
+  if (!button) return false;
+  void copyText(button.dataset.copy ?? "", button);
+  return true;
+}
+var CHANGE_CSS = `
+.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
+.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }
+.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
+.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }
+.ch-sign { flex: none; width: 9px; text-align: center; }
+.ch-added .ch-sign { color: var(--state, #34d399); }
+.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }
+.ch-changed .ch-sign { color: var(--effect, #fbbf24); }
+.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }
+.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }
+.ch-from { color: var(--fx-muted, #8a90a2); }
+.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }
+.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }
+.ch-to { color: var(--fx-label, #e7e9ee); }
+.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }
+/* In the corner: an object can be tall, and a button under it is a scroll away. */
+.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }
+.ch-block.ch-from { opacity: .72; }
+.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }
+.ch-copy {
+  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;
+  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;
+  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);
+}
+.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }
+.ch-copy:hover { color: var(--fx-label, #e7e9ee); }
+`;

package/dist/change-view.mjs

@@ -0,0 +1,111 @@
+// src/copy.ts
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}
+
+// src/change-view.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var SIGN = { added: "+", removed: "−", changed: "~" };
+function pretty(json) {
+  if (!json) return void 0;
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return void 0;
+  }
+}
+function sideOf(text, json, cls) {
+  const block = pretty(json);
+  if (!block) return `<span class="ch-${cls}">${escape(text ?? "")}</span>`;
+  return `<div class="ch-block ch-${cls}"><button type="button" class="ch-copy" title="Copy" data-copy="${escape(block)}">copy</button><pre class="ch-json">${escape(block)}</pre></div>`;
+}
+function changeRows(change, limit = Infinity) {
+  if (!change?.entries?.length) return "";
+  const shown = change.entries.slice(0, limit);
+  const hidden = change.entries.length - shown.length + (change.more ?? 0);
+  const rows = shown.map((entry) => {
+    const from = sideOf(entry.from, entry.fromJson, "from");
+    const to = sideOf(entry.to, entry.toJson, "to");
+    const sides = entry.op === "changed" ? `${from}<span class="ch-arrow">→</span>${to}` : entry.op === "added" ? to : from;
+    const stacked = entry.fromJson || entry.toJson ? " ch-stacked" : "";
+    return `<div class="ch-row ch-${entry.op}${stacked}"><span class="ch-sign">${SIGN[entry.op] ?? "·"}</span><span class="ch-key">${escape(entry.key)}</span><span class="ch-sides">${sides}</span></div>`;
+  }).join("");
+  const size = change.length ? `<div class="ch-size">${change.length.from} → ${change.length.to} items</div>` : "";
+  return `<div class="ch-list">${size}${rows}${hidden > 0 ? `<div class="ch-more">and ${hidden} more</div>` : ""}</div>`;
+}
+function handleCopyClick(event) {
+  const button = event.target?.closest?.(".ch-copy");
+  if (!button) return false;
+  void copyText(button.dataset.copy ?? "", button);
+  return true;
+}
+var CHANGE_CSS = `
+.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
+.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }
+.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
+.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }
+.ch-sign { flex: none; width: 9px; text-align: center; }
+.ch-added .ch-sign { color: var(--state, #34d399); }
+.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }
+.ch-changed .ch-sign { color: var(--effect, #fbbf24); }
+.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }
+.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }
+.ch-from { color: var(--fx-muted, #8a90a2); }
+.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }
+.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }
+.ch-to { color: var(--fx-label, #e7e9ee); }
+.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }
+/* In the corner: an object can be tall, and a button under it is a scroll away. */
+.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }
+.ch-block.ch-from { opacity: .72; }
+.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }
+.ch-copy {
+  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;
+  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;
+  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);
+}
+.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }
+.ch-copy:hover { color: var(--fx-label, #e7e9ee); }
+`;
+export {
+  CHANGE_CSS,
+  changeRows,
+  handleCopyClick
+};

package/dist/copy.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/copy.ts
+var copy_exports = {};
+__export(copy_exports, {
+  copyText: () => copyText
+});
+module.exports = __toCommonJS(copy_exports);
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}

package/dist/copy.mjs

@@ -0,0 +1,42 @@
+// src/copy.ts
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}
+export {
+  copyText
+};

package/dist/describe.cjs

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/describe.ts
+var describe_exports = {};
+__export(describe_exports, {
+  describeNode: () => describeNode
+});
+module.exports = __toCommonJS(describe_exports);
+var MAX_CLASSES = 2;
+function textOwner(node) {
+  const parent = node.parentElement;
+  return parent ? `text in ${describeElement(parent)}` : "text";
+}
+function describeElement(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const raw = typeof el.className === "string" ? el.className : el.getAttribute("class") ?? "";
+  const classes = raw.split(/\s+/).filter(Boolean).slice(0, MAX_CLASSES).map((c) => `.${c}`).join("");
+  return `${tag}${id}${classes}`;
+}
+function describeNode(target) {
+  const node = target;
+  if (!node || typeof node.nodeType !== "number") return "detached";
+  switch (node.nodeType) {
+    case 1:
+      return describeElement(node);
+    case 3:
+      return textOwner(node);
+    case 8: {
+      const parent = node.parentElement;
+      return parent ? `slot in ${describeElement(parent)}` : "slot";
+    }
+    case 11:
+      return "fragment";
+    default:
+      return node.nodeName?.toLowerCase() ?? "node";
+  }
+}

package/dist/describe.mjs

@@ -0,0 +1,34 @@
+// src/describe.ts
+var MAX_CLASSES = 2;
+function textOwner(node) {
+  const parent = node.parentElement;
+  return parent ? `text in ${describeElement(parent)}` : "text";
+}
+function describeElement(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const raw = typeof el.className === "string" ? el.className : el.getAttribute("class") ?? "";
+  const classes = raw.split(/\s+/).filter(Boolean).slice(0, MAX_CLASSES).map((c) => `.${c}`).join("");
+  return `${tag}${id}${classes}`;
+}
+function describeNode(target) {
+  const node = target;
+  if (!node || typeof node.nodeType !== "number") return "detached";
+  switch (node.nodeType) {
+    case 1:
+      return describeElement(node);
+    case 3:
+      return textOwner(node);
+    case 8: {
+      const parent = node.parentElement;
+      return parent ? `slot in ${describeElement(parent)}` : "slot";
+    }
+    case 11:
+      return "fragment";
+    default:
+      return node.nodeName?.toLowerCase() ?? "node";
+  }
+}
+export {
+  describeNode
+};