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

package/dist/tree.mjs

@@ -0,0 +1,551 @@
+// src/plugin.ts
+var plugins = [];
+function pluginElementBadge(extra) {
+  if (!extra) return void 0;
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.elementBadge?.(extra);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+function pluginBadge(node) {
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.badge?.(node);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+
+// src/palette.ts
+var KIND_COLOR = {
+  state: "#34d399",
+  memo: "#a78bfa",
+  effect: "#fbbf24",
+  store: "#38bdf8",
+  resource: "#fb7185",
+  component: "#f0abfc",
+  provider: "#fb923c",
+  control: "#22d3ee",
+  router: "#818cf8",
+  handler: "#f472b6",
+  context: "#a3e635",
+  directive: "#5eead4",
+  binding: "#5eead4",
+  setter: "#fb7185",
+  group: "#8a90a2",
+  element: "#8a90a2"
+};
+var kindVar = (kind) => `--fx-kind-${kind}`;
+var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
+var KINDS = Object.keys(KIND_COLOR);
+function kindRules(selector, property) {
+  return KINDS.map((kind) => `${selector(kind)} { ${property}: ${kindColor(kind)}; }`).join("\n");
+}
+
+// src/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/tree.ts
+var TREE_KINDS = /* @__PURE__ */ new Set([
+  "component",
+  "control",
+  "router",
+  "handler",
+  // A component a plugin recognised as providing a context. Still a tag the author wrote,
+  // so leaving it out took it and everything it rendered out of the tree.
+  "provider"
+]);
+function inPageOrder(nodes) {
+  const slots = [];
+  const placed = [];
+  nodes.forEach((node, at) => {
+    if (node.order !== void 0) {
+      slots.push(at);
+      placed.push(node);
+    }
+  });
+  if (placed.length < 2) return nodes;
+  placed.sort((a, b) => a.order - b.order);
+  const out = nodes.slice();
+  slots.forEach((slot, i) => out[slot] = placed[i]);
+  return out;
+}
+var badges = /* @__PURE__ */ new WeakMap();
+function badgeOf(node) {
+  if (!badges.has(node)) badges.set(node, pluginBadge(node));
+  return badges.get(node);
+}
+function componentTree(graph, options = {}) {
+  const wanted = (node) => TREE_KINDS.has(node.kind) || options.values === true && node.authored !== false;
+  const tagged = inPageOrder([...graph.values()].filter(wanted).sort((a, b) => a.id - b.id));
+  const made = /* @__PURE__ */ new Map();
+  for (const node of tagged) {
+    made.set(node.id, {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      children: [],
+      ...TREE_KINDS.has(node.kind) ? {} : { value: true },
+      ...node.lazy ? { lazy: true } : {},
+      ...badgeOf(node) ? { badge: badgeOf(node) } : {}
+    });
+  }
+  const owner = (node) => {
+    const seen = /* @__PURE__ */ new Set([node.id]);
+    let at = node.createdIn;
+    while (at !== void 0 && !seen.has(at)) {
+      seen.add(at);
+      const found = made.get(at);
+      if (found) return found;
+      at = graph.get(at)?.createdIn;
+    }
+    return void 0;
+  };
+  const roots = [];
+  for (const node of tagged) {
+    const parent = owner(node);
+    if (parent) parent.children.push(made.get(node.id));
+    else roots.push(made.get(node.id));
+  }
+  const term = options.filter?.trim().toLowerCase();
+  return term ? keep(roots, term) : roots;
+}
+function keep(nodes, term) {
+  const out = [];
+  for (const node of nodes) {
+    const children = keep(node.children, term);
+    const hit = node.label.toLowerCase().includes(term);
+    if (hit || children.length) out.push({ ...node, children: hit ? node.children : children });
+  }
+  return out;
+}
+function idsIn(nodes) {
+  const out = [];
+  const walk = (list) => {
+    for (const node of list) {
+      out.push(node.id);
+      walk(node.children);
+    }
+  };
+  walk(nodes);
+  return out;
+}
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function createComponentTree(host, options = {}) {
+  const empty = options.empty ?? "nothing rendered yet";
+  const shut = /* @__PURE__ */ new Set();
+  let signature = "";
+  const defaulted = /* @__PURE__ */ new Set();
+  let marked = null;
+  let markedKey = null;
+  let values = options.values === true;
+  let filter = "";
+  const doc = host.ownerDocument;
+  const bar = doc.createElement("label");
+  bar.className = "fx-tree-bar";
+  const box = doc.createElement("input");
+  box.type = "checkbox";
+  box.checked = values;
+  bar.append(box, doc.createTextNode("values"));
+  bar.title = "List the signals and memos each tag declares";
+  const search = doc.createElement("input");
+  search.type = "search";
+  search.className = "fx-tree-search";
+  search.placeholder = "filter by name";
+  search.addEventListener("input", () => {
+    filter = search.value;
+    signature = "";
+  });
+  const list = doc.createElement("div");
+  list.className = "fx-tree-list";
+  host.replaceChildren(bar, search, list);
+  let last = null;
+  box.addEventListener("change", () => {
+    values = box.checked;
+    signature = "";
+    if (last) api.render(last.graph, last.selected);
+  });
+  const row = (node, depth) => {
+    const has = node.children.length > 0;
+    const open = has && !shut.has(node.key);
+    const twist = has ? open ? "▾" : "▸" : node.prop ? "" : "·";
+    const tag = node.props ? `<span class="fx-tree-props-label">props</span><span class="fx-tree-props-count">${node.children.length}</span>` : node.prop ? `<span class="fx-tree-prop-name">${escape(node.prop.name)}</span>${node.prop.value === void 0 ? "" : `<span class="fx-tree-prop-value">${escape(shorten(node.prop.value, 44))}</span>`}` : node.value ? escape(node.label) : has ? `&lt;${escape(node.label)}&gt;` : `&lt;${escape(node.label)} /&gt;`;
+    const count = has && !open && !node.props ? `<span class="fx-tree-count">${node.children.length}</span>` : "";
+    const chunk = node.lazy ? '<span class="fx-tree-lazy" title="loaded as its own chunk">lazy</span>' : "";
+    const mark = node.badge ? `<span class="fx-tree-plugin" title="${escape(node.badge)}">${escape(node.badge)}</span>` : "";
+    return `<div class="fx-tree-row n-${node.kind}${node.value ? " is-value" : ""}${node.prop ? " is-prop" : ""}${node.props ? " is-props" : ""}" data-key="${escape(node.key)}"${node.id !== void 0 ? ` data-id="${node.id}"` : ""} style="--depth:${depth}"><button type="button" class="fx-tree-twist" data-twist="${escape(node.key)}"${has ? "" : ' tabindex="-1"'}>${twist}</button><span class="fx-tree-tag"${node.prop?.value ? ` title="${escape(node.prop.name)}=${escape(node.prop.value)}"` : ""}>${tag}</span>${mark}${chunk}${count}</div>` + (open ? node.children.map((child) => row(child, depth + 1)).join("") : "");
+  };
+  const pickOf = (rowEl) => {
+    const found = shown.get(rowEl.dataset.key ?? "");
+    if (!found || found.kind !== "element") return void 0;
+    return {
+      key: found.key,
+      label: found.label,
+      ...found.owner !== void 0 ? { owner: found.owner } : {},
+      ...found.writes?.length ? { writes: found.writes } : {},
+      ...found.at ? { at: found.at } : {},
+      ...found.extra ? { extra: found.extra } : {},
+      ...found.element ? { element: found.element } : {}
+    };
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    const twist = target?.closest?.("[data-twist]");
+    if (twist) {
+      const key = twist.dataset.twist ?? "";
+      if (shut.has(key)) shut.delete(key);
+      else shut.add(key);
+      signature = "";
+      event.stopPropagation();
+      return;
+    }
+    const rowEl = target?.closest?.(".fx-tree-row");
+    if (!rowEl) return;
+    if (rowEl.dataset.id) {
+      markedKey = null;
+      options.onSelect?.(Number(rowEl.dataset.id));
+      return;
+    }
+    const held = shown.get(rowEl.dataset.key ?? "");
+    if (held?.props) {
+      if (shut.has(held.key)) shut.delete(held.key);
+      else shut.add(held.key);
+      signature = "";
+      if (last) api.render(last.graph, last.selected);
+      return;
+    }
+    if (held?.prop) {
+      if (held.owner === void 0) return;
+      markedKey = held.key;
+      paint();
+      options.onSelect?.(held.owner);
+      return;
+    }
+    const pick = pickOf(rowEl);
+    if (!pick) return;
+    markedKey = pick.key;
+    paint();
+    options.onPick?.(pick);
+  };
+  const onDouble = (event) => {
+    const rowEl = event.target?.closest?.(".fx-tree-row");
+    if (!rowEl) return;
+    if (rowEl.dataset.id) {
+      options.onReveal?.(Number(rowEl.dataset.id));
+      return;
+    }
+    const pick = pickOf(rowEl);
+    if (pick) options.onRevealPick?.(pick);
+  };
+  let shown = /* @__PURE__ */ new Map();
+  const onOver = (event) => {
+    const rowEl = event.target?.closest?.(".fx-tree-row");
+    const found = rowEl ? shown.get(rowEl.dataset.key ?? "") : void 0;
+    if (!found) {
+      options.onHover?.(null);
+      return;
+    }
+    options.onHover?.(found.id ?? null, found.element, found.id === void 0 ? found.key : void 0);
+  };
+  const onOut = () => options.onHover?.(null);
+  host.addEventListener("click", onClick);
+  host.addEventListener("dblclick", onDouble);
+  if (options.onHover) {
+    host.addEventListener("pointermove", onOver);
+    host.addEventListener("pointerleave", onOut);
+  }
+  const paint = () => {
+    for (const el of list.querySelectorAll(".fx-tree-row")) {
+      const row2 = el;
+      const id = row2.dataset.id;
+      const on = id !== void 0 ? Number(id) === marked : row2.dataset.key === markedKey;
+      el.classList.toggle("on", on);
+    }
+  };
+  function rowsFor(nodes, graph) {
+    const byId = /* @__PURE__ */ new Map();
+    const build = (node) => {
+      const written = values ? graph.get(node.id)?.props ?? [] : [];
+      const listed = written.map((p, i) => ({
+        key: `${node.id}=${i}`,
+        label: p.name,
+        kind: node.kind,
+        children: [],
+        prop: { name: p.name, ...p.value === void 0 ? {} : { value: p.value } },
+        owner: node.id,
+        ...p.at?.line === void 0 ? {} : { at: { file: p.at.file ?? "", line: p.at.line, column: p.at.column ?? 0 } }
+      }));
+      const group = `${node.id}=props`;
+      if (listed.length && !defaulted.has(group)) {
+        defaulted.add(group);
+        shut.add(group);
+      }
+      const props = listed.length ? [{ key: group, label: "props", kind: node.kind, children: listed, props: true, owner: node.id }] : [];
+      const row2 = {
+        key: String(node.id),
+        label: node.label,
+        kind: node.kind,
+        id: node.id,
+        children: [...props, ...node.children.map(build)],
+        ...node.value ? { value: true } : {},
+        ...node.lazy ? { lazy: true } : {},
+        ...node.badge ? { badge: node.badge } : {}
+      };
+      byId.set(node.id, row2);
+      return row2;
+    };
+    const roots = nodes.map(build);
+    const domFor = options.domFor;
+    if (!domFor) return roots;
+    const placed = /* @__PURE__ */ new Set();
+    const done = /* @__PURE__ */ new Set();
+    const uses = /* @__PURE__ */ new Map();
+    const tally = (nodes2) => {
+      for (const node of nodes2) {
+        if (node.owner !== void 0) uses.set(node.owner, (uses.get(node.owner) ?? 0) + 1);
+        tally(node.children);
+      }
+    };
+    for (const row2 of byId.values()) if (row2.id !== void 0) tally(domFor(row2.id));
+    const readerOf = (id, skip) => {
+      const drawn = (from) => {
+        const seen = /* @__PURE__ */ new Set();
+        let at = from;
+        while (at !== void 0 && !seen.has(at)) {
+          seen.add(at);
+          const row2 = byId.get(at);
+          if (row2 && !row2.value && row2 !== skip) return row2;
+          at = graph.get(at)?.createdIn;
+        }
+        return void 0;
+      };
+      let best;
+      let deepest = -1;
+      for (const [nodeId, node] of graph) {
+        if (nodeId === id || !node.deps.has(id)) continue;
+        const row2 = drawn(nodeId);
+        if (!row2 || row2.id === void 0) continue;
+        const depth = graph.get(row2.id)?.depth ?? 0;
+        if (depth >= deepest) {
+          deepest = depth;
+          best = row2;
+        }
+      }
+      return best;
+    };
+    const again = (row2, key) => ({
+      ...row2,
+      key,
+      children: row2.children.map((child, i) => again(child, `${key}/${i}`))
+    });
+    const expand = (row2) => {
+      if (row2.value || row2.id === void 0) return row2;
+      if (done.has(row2)) return row2;
+      done.add(row2);
+      const dom = domFor(row2.id);
+      if (!dom.length) {
+        row2.children = row2.children.map(expand);
+        return row2;
+      }
+      const walk = (node, key) => {
+        const owner = node.owner === void 0 ? void 0 : byId.get(node.owner);
+        if (owner && owner !== row2) {
+          if (done.has(owner)) {
+            const count = uses.get(node.owner) ?? 0;
+            return count > 1 ? again(owner, key) : void 0;
+          }
+          placed.add(owner);
+          return expand(owner);
+        }
+        const kids = [];
+        for (const id of node.writes ?? []) {
+          const value = byId.get(id);
+          if (!value?.value || placed.has(value)) continue;
+          placed.add(value);
+          kids.push(value);
+        }
+        for (const id of node.inside ?? []) {
+          const tag = byId.get(id);
+          if (!tag || tag === row2 || placed.has(tag) || done.has(tag)) continue;
+          placed.add(tag);
+          kids.push(expand(tag));
+        }
+        node.children.forEach((child, i) => {
+          const kid = walk(child, `${key}/${i}`);
+          if (kid) kids.push(kid);
+        });
+        return {
+          key,
+          label: node.label,
+          kind: "element",
+          children: kids,
+          owner: row2.id,
+          ...node.writes?.length ? { writes: node.writes } : {},
+          ...node.at ? { at: node.at } : {},
+          ...node.extra ? { extra: node.extra } : {},
+          ...pluginElementBadge(node.extra) ? { badge: pluginElementBadge(node.extra) } : {},
+          ...node.element ? { element: node.element } : {}
+        };
+      };
+      const mount = dom.findIndex((node) => node.container);
+      if (mount !== -1) {
+        const node = dom[mount];
+        row2.children = row2.children.map(expand);
+        return {
+          key: `${row2.id}:${mount}`,
+          label: node.label,
+          kind: "element",
+          children: [row2],
+          owner: row2.id,
+          ...node.at ? { at: node.at } : {},
+          ...node.element ? { element: node.element } : {}
+        };
+      }
+      const rendered = dom.map((node, i) => walk(node, `${row2.id}:${i}`)).filter((node) => node !== void 0);
+      const rest = row2.children.filter((child) => !placed.has(child)).map(expand);
+      const lifted = [];
+      const spare = [];
+      const adopt = /* @__PURE__ */ new Map();
+      for (const child of rest) {
+        const reader = child.value && child.id !== void 0 ? readerOf(child.id, row2) : void 0;
+        if (reader) {
+          const held = adopt.get(reader);
+          if (held) held.push(child);
+          else adopt.set(reader, [child]);
+          placed.add(child);
+          continue;
+        }
+        (child.value || child.prop || child.props ? lifted : spare).push(child);
+      }
+      for (const [reader, values2] of adopt) reader.children.unshift(...values2);
+      row2.children = [...lifted, ...rendered, ...spare];
+      return row2;
+    };
+    const top = roots.map((root) => placed.has(root) ? root : expand(root));
+    return top.filter((_, i) => !placed.has(roots[i]));
+  }
+  const api = {
+    render(graph, selected = null) {
+      last = { graph, selected };
+      const roots = rowsFor(componentTree(graph, { values, filter }), graph);
+      const next = `${values}|${filter}|${[...shut].sort().join(",")}|${roots.map(function label(n) {
+        return `${n.key}:${n.label}:${n.children.map(label).join("+")}`;
+      }).join(",")}`;
+      if (next !== signature) {
+        signature = next;
+        shown = /* @__PURE__ */ new Map();
+        const index = (list2) => {
+          for (const node of list2) {
+            shown.set(node.key, node);
+            index(node.children);
+          }
+        };
+        index(roots);
+        list.innerHTML = roots.length ? roots.map((node) => row(node, 0)).join("") : `<span class="fx-tree-empty">${escape(filter ? `nothing named ${filter}` : empty)}</span>`;
+      }
+      if (selected !== marked) {
+        marked = selected;
+        paint();
+      }
+    },
+    clear() {
+      signature = "";
+      marked = null;
+      shut.clear();
+      list.innerHTML = `<span class="fx-tree-empty">${escape(empty)}</span>`;
+    },
+    destroy() {
+      host.removeEventListener("click", onClick);
+      host.removeEventListener("dblclick", onDouble);
+      host.removeEventListener("pointermove", onOver);
+      host.removeEventListener("pointerleave", onOut);
+      host.innerHTML = "";
+    }
+  };
+  return api;
+}
+var TREE_CSS = `
+.fx-tree-row {
+  display: flex; align-items: center; gap: 4px;
+  padding: 1px 6px 1px calc(6px + var(--depth, 0) * 12px);
+  font-family: ui-monospace, monospace; font-size: 11.5px;
+  color: var(--fx-label, #e7e9ee); cursor: pointer; white-space: nowrap;
+}
+.fx-tree-row:hover { background: var(--fx-hover, #1b1e26); }
+.fx-tree-row.on { background: var(--fx-sel, #232838); }
+.fx-tree-twist {
+  width: 12px; padding: 0; border: 0; background: none; cursor: pointer;
+  color: var(--fx-muted, #8a90a2); font-size: 9px; line-height: 1;
+}
+.fx-tree-plugin {
+  font-size: 9px; color: var(--fx-accent, #5eead4);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fx-tree-lazy {
+  font-size: 9px; letter-spacing: .04em; color: var(--fx-router, #7dd3fc);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+.fx-tree-count {
+  font-size: 9.5px; color: var(--fx-muted, #8a90a2);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+${kindRules((k) => `.fx-tree-row.n-${k} .fx-tree-tag`, "color")}
+.fx-tree-bar {
+  display: flex; align-items: center; gap: 5px; padding: 2px 8px 5px;
+  font-size: 10.5px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-tree-bar:hover { color: var(--fx-label, #e7e9ee); }
+.fx-tree-bar input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-tree-row.n-element:hover .fx-tree-tag { color: var(--fx-label, #e7e9ee); }
+/* A declared value is listed inside the tag that made it, so it reads quieter than a tag. */
+.fx-tree-row.is-value .fx-tree-tag { font-style: italic; opacity: .85; }
+.fx-tree-search {
+  width: calc(100% - 16px); margin: 0 8px 4px; padding: 2px 6px;
+  font: inherit; font-size: 10.5px;
+  color: var(--fx-label, #e7e9ee); background: var(--fx-bg, #0f1115);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+}
+.fx-tree-search:focus { outline: none; border-color: var(--fx-accent, #5eead4); }
+.fx-tree-empty { display: block; padding: 8px; font-size: 11px; color: var(--fx-muted, #8a90a2); }
+/* A prop reads as what was written on the tag, so it is quieter than the tag itself. */
+/* The row that folds a tag's props away. Dashed, because it stands for something written
+   rather than something rendered. */
+.fx-tree-row.is-props .fx-tree-tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 0 5px; border: 1px dashed var(--fx-line, #262a35); border-radius: 3px;
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
+}
+.fx-tree-row.is-props:hover .fx-tree-tag { border-color: var(--fx-accent, #5eead4); color: var(--fx-label, #e7e9ee); }
+.fx-tree-props-count { opacity: .7; }
+
+/* A prop is what was written on the tag above it, so it reads as an aside: the name in a
+   quiet chip, the value beside it, and no marker pretending it opens. */
+.fx-tree-row.is-prop .fx-tree-tag { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
+.fx-tree-prop-name {
+  flex: none; padding: 0 4px; border-radius: 3px;
+  background: var(--fx-chip, rgba(138, 144, 162, .14));
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .02em;
+}
+.fx-tree-row.is-prop:hover .fx-tree-prop-name { color: var(--fx-label, #e7e9ee); }
+.fx-tree-prop-value {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fx-label, #e7e9ee); opacity: .75;
+}
+`;
+export {
+  TREE_CSS,
+  TREE_KINDS,
+  componentTree,
+  createComponentTree,
+  idsIn,
+  inPageOrder
+};