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

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.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Putting text on the clipboard from wherever a panel happens to be running.
+ *
+ * `navigator.clipboard` is not there in a vscode webview without permission, nor on an
+ * insecure origin. The hidden textarea is the old way and still the one that works in both.
+ */
+/** True when the text reached the clipboard. */
+export declare function copyText(text: string, button?: HTMLElement): Promise<boolean>;
+//# sourceMappingURL=copy.d.ts.map

package/dist/copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../src/copy.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAgCH,gDAAgD;AAChD,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CAanF"}

package/dist/copy.js

@@ -0,0 +1,52 @@
+/**
+ * Putting text on the clipboard from wherever a panel happens to be running.
+ *
+ * `navigator.clipboard` is not there in a vscode webview without permission, nor on an
+ * insecure origin. The hidden textarea is the old way and still the one that works in both.
+ */
+/** Says so on the control that was pressed: a toast needs somewhere to live. */
+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 {
+        // Nothing left to try; whatever is on screen can still be selected by hand.
+        return false;
+    }
+}
+/** True when the text reached the clipboard. */
+export async function copyText(text, button) {
+    const clipboard = globalThis
+        .navigator?.clipboard;
+    if (clipboard?.writeText) {
+        try {
+            await clipboard.writeText(text);
+            confirmOn(button);
+            return true;
+        }
+        catch {
+            // Denied, or a context the api refuses to work in.
+        }
+    }
+    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.d.ts

@@ -0,0 +1,3 @@
+/** An element, the text node it writes, or the marker for a hole with nothing in it yet. */
+export declare function describeNode(target: unknown): string;
+//# sourceMappingURL=describe.d.ts.map

package/dist/describe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"describe.d.ts","sourceRoot":"","sources":["../src/describe.ts"],"names":[],"mappings":"AA8BA,4FAA4F;AAC5F,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAkBpD"}

package/dist/describe.js

@@ -0,0 +1,47 @@
+// A dom node, in words.
+//
+// The element is described at the moment it is reported and the reference dropped: holding
+// one would keep a removed subtree alive for as long as the panel is open.
+//
+// Enough to find it on the page — tag, id, a class or two — without being a selector.
+/** More than this is a selector, not a label. */
+const MAX_CLASSES = 2;
+/** `text in li` — the element it sits in is what locates it. */
+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}` : '';
+    // Not a string on an SVG element.
+    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}`;
+}
+/** An element, the text node it writes, or the marker for a hole with nothing in it yet. */
+export 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: {
+            // The hole is empty; where it will go is what matters.
+            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
+};