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

package/dist/instrument.cjs

@@ -0,0 +1,497 @@
+"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/instrument.ts
+var instrument_exports = {};
+__export(instrument_exports, {
+  KIND_OF_BUILTIN: () => KIND_OF_BUILTIN,
+  createReactor: () => createReactor,
+  fmt: () => fmt,
+  nodeState: () => nodeState,
+  nodeVersion: () => nodeVersion,
+  short: () => short
+});
+module.exports = __toCommonJS(instrument_exports);
+var import_signal = require("@fluixi/reactive/signal");
+var import_store = require("@fluixi/reactive/store");
+
+// src/source.ts
+var MARKER = "__fx_source";
+var COMPONENT_MARKER = "__fx_component";
+var HOLE_MARKER = "__fx_hole";
+var PROPS_MARKER = "__fx_props";
+var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
+var host = globalThis;
+var shared = host[MARKS] ?? {
+  pending: null,
+  expiring: false,
+  components: /* @__PURE__ */ new Map()
+};
+host[MARKS] = shared;
+function markReactiveSource(file, line, column, name) {
+  const location = locate(file, line, column);
+  if (shared.pending && location.external && !shared.pending.location?.external) return;
+  shared.pending = { name, location };
+  shared.expiring = false;
+}
+function locate(file, line, column) {
+  const external = !!file && (/^([a-zA-Z]:)?[\\/]/.test(file) || file.includes("node_modules/"));
+  return external ? { file, line, column, external } : { file, line, column };
+}
+function markComponentSource(name, file, line, column) {
+  const seen = shared.components.get(name);
+  const next = locate(file, line, column);
+  if (seen === void 0) {
+    shared.components.set(name, next);
+    return;
+  }
+  if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
+}
+function componentSource(name) {
+  return shared.components.get(name) ?? void 0;
+}
+function takeReactiveSource() {
+  const mark = shared.pending;
+  if (mark) {
+    if (mark.name !== void 0) shared.pending = { location: mark.location };
+    if (!shared.expiring) {
+      shared.expiring = true;
+      queueMicrotask(() => {
+        shared.expiring = false;
+        shared.pending = null;
+      });
+    }
+  }
+  return mark;
+}
+var HOLES = /* @__PURE__ */ new WeakMap();
+var HOLE_TAG = "__fx_at";
+function markHole(accessor, line, column, name) {
+  if (accessor && (typeof accessor === "object" || typeof accessor === "function")) {
+    const at = name === void 0 ? { line, column } : { line, column, name };
+    HOLES.set(accessor, at);
+    try {
+      Object.defineProperty(accessor, HOLE_TAG, { value: at, configurable: true });
+    } catch {
+    }
+  }
+  shared.pending = null;
+  return accessor;
+}
+var PROPS = /* @__PURE__ */ new WeakMap();
+function markProps(props, at) {
+  if (props && typeof props === "object") PROPS.set(props, at);
+  return props;
+}
+function installSourceMarker() {
+  if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
+  if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
+  if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
+}
+
+// src/format.ts
+var MAX_DEPTH = 3;
+var MAX_ENTRIES = 8;
+function domName(v) {
+  if (typeof v?.nodeType !== "number" || typeof v.nodeName !== "string") return null;
+  return v.tagName ? `<${v.tagName.toLowerCase()}>` : `#${v.nodeName.toLowerCase()}`;
+}
+function fnName(v) {
+  return v.name ? `ƒ ${v.name}()` : "ƒ";
+}
+function className(v) {
+  const name = v.constructor?.name;
+  return name && name !== "Object" ? `${name} ` : "";
+}
+function primitive(v) {
+  if (v === null) return "null";
+  switch (typeof v) {
+    case "undefined":
+      return "undefined";
+    case "string":
+      return JSON.stringify(v);
+    case "number":
+    case "boolean":
+      return String(v);
+    case "bigint":
+      return `${v}n`;
+    case "symbol":
+      return v.toString();
+    case "function":
+      return fnName(v);
+    default:
+      return null;
+  }
+}
+function walk(value, depth, seen) {
+  const simple = primitive(value);
+  if (simple !== null) return simple;
+  const object = value;
+  if (seen.has(object)) return "[circular]";
+  const dom = domName(object);
+  if (dom) return dom;
+  if (object instanceof Date) return Number.isNaN(object.getTime()) ? "Invalid Date" : object.toISOString();
+  if (object instanceof RegExp) return String(object);
+  if (object instanceof Error) return `${object.name}: ${object.message}`;
+  if (object instanceof Promise) return "Promise";
+  if (ArrayBuffer.isView(object)) {
+    return `${className(object).trim()}(${object.length ?? ""})`;
+  }
+  if (depth >= MAX_DEPTH) return Array.isArray(object) ? "[…]" : "{…}";
+  seen.add(object);
+  try {
+    if (Array.isArray(object)) {
+      const shown2 = object.slice(0, MAX_ENTRIES).map((item) => walk(item, depth + 1, seen));
+      if (object.length > MAX_ENTRIES) shown2.push("…");
+      return `[${shown2.join(", ")}]`;
+    }
+    if (object instanceof Map) {
+      const shown2 = [];
+      for (const [k, v] of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(`${walk(k, depth + 1, seen)} => ${walk(v, depth + 1, seen)}`);
+      }
+      return `Map(${object.size}) {${shown2.join(", ")}}`;
+    }
+    if (object instanceof Set) {
+      const shown2 = [];
+      for (const item of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(walk(item, depth + 1, seen));
+      }
+      return `Set(${object.size}) {${shown2.join(", ")}}`;
+    }
+    const keys = Object.keys(object);
+    const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
+      let read;
+      try {
+        read = walk(object[key], depth + 1, seen);
+      } catch {
+        read = "[unreadable]";
+      }
+      return `${key}: ${read}`;
+    });
+    if (keys.length > MAX_ENTRIES) shown.push("…");
+    return `${className(object)}{${shown.join(", ")}}`;
+  } finally {
+    seen.delete(object);
+  }
+}
+function formatValue(value, limit = 240) {
+  let text;
+  try {
+    text = walk(value, 0, /* @__PURE__ */ new Set());
+  } catch {
+    text = "[unreadable]";
+  }
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/instrument.ts
+var $NODE = /* @__PURE__ */ Symbol.for("signal-node");
+var KIND_OF_BUILTIN = {
+  Show: "control",
+  For: "control",
+  Index: "control",
+  Switch: "control",
+  Match: "control",
+  Portal: "control",
+  Dynamic: "control",
+  ErrorBoundary: "control",
+  Suspense: "control",
+  SuspenseList: "control",
+  Await: "control",
+  Router: "router",
+  Outlet: "router",
+  Redirect: "router",
+  Link: "router"
+};
+var CORE_STATE = { 0: "clean", 1: "check", 2: "dirty" };
+function nodeVersion(n) {
+  return n.core && typeof n.core.version === "number" ? n.core.version : n.runs;
+}
+function nodeState(n) {
+  return n.core && typeof n.core.state === "number" ? CORE_STATE[n.core.state] : void 0;
+}
+var fmt = (v) => formatValue(v);
+var short = (s, n = 18) => shorten(s, n);
+function createReactor() {
+  installSourceMarker();
+  const graph = /* @__PURE__ */ new Map();
+  const runsAtLastSample = /* @__PURE__ */ new Map();
+  const unnamed = /* @__PURE__ */ new Set();
+  const consumerStack = [];
+  let seq = 0;
+  let dispose = () => {
+  };
+  let rootOwner = null;
+  const claims = (node, value) => {
+    for (const dep of node.deps) {
+      const other = graph.get(dep);
+      if (other?.read && other.read() === value) return false;
+    }
+    return true;
+  };
+  const forget = (id) => {
+    const owner = (0, import_signal.getOwner)() ?? rootOwner;
+    if (owner) {
+      (0, import_signal.runWithOwner)(
+        owner,
+        () => (0, import_signal.onCleanup)(() => {
+          graph.delete(id);
+          runsAtLastSample.delete(id);
+          unnamed.delete(id);
+        })
+      );
+    }
+  };
+  const recordRead = (sourceId) => {
+    const c = consumerStack[consumerStack.length - 1];
+    if (c != null) graph.get(c)?.deps.add(sourceId);
+  };
+  const recordWrite = (targetId) => {
+    const c = consumerStack[consumerStack.length - 1];
+    if (c != null && c !== targetId) graph.get(c)?.writes.add(targetId);
+  };
+  const base = (id, named, kind, fallback) => {
+    const mark = takeReactiveSource();
+    if (!named && !mark?.name) unnamed.add(id);
+    return {
+      id,
+      label: named ?? mark?.name ?? fallback,
+      kind,
+      deps: /* @__PURE__ */ new Set(),
+      writes: /* @__PURE__ */ new Set(),
+      runs: 0,
+      lastPulse: 0,
+      ...mark?.location ? { source: mark.location } : {}
+    };
+  };
+  const trackedCreateSignal = (value, options) => {
+    const id = seq++;
+    const [get, set] = (0, import_signal.createSignal)(value, options);
+    const node = base(id, options?.name, "state", `s${id}`);
+    node.read = () => (0, import_signal.untrack)(get);
+    node.detail = formatValue(value);
+    node.value = shorten(node.detail);
+    node.core = get[$NODE] ?? null;
+    graph.set(id, node);
+    forget(id);
+    const read = () => {
+      recordRead(id);
+      return get();
+    };
+    const write = (v) => {
+      recordWrite(id);
+      return set(typeof v === "function" ? v((0, import_signal.untrack)(get)) : v);
+    };
+    return [read, write];
+  };
+  const trackedCreateMemo = (fn, value, options) => {
+    const id = seq++;
+    const node = base(id, options?.name, "memo", `m${id}`);
+    graph.set(id, node);
+    forget(id);
+    const m = (0, import_signal.createMemo)(() => {
+      node.core ??= import_signal.Signal.subtle.currentComputed();
+      node.deps.clear();
+      node.writes.clear();
+      node.runs++;
+      consumerStack.push(id);
+      try {
+        return fn();
+      } finally {
+        consumerStack.pop();
+      }
+    }, value, options);
+    node.read = () => (0, import_signal.untrack)(m);
+    return () => {
+      recordRead(id);
+      return m();
+    };
+  };
+  const trackedCreateEffect = (fn, options) => {
+    const id = seq++;
+    const node = base(id, options?.name, "effect", `e${id}`);
+    graph.set(id, node);
+    forget(id);
+    (0, import_signal.createEffect)(() => {
+      node.core ??= import_signal.Signal.subtle.currentComputed();
+      node.deps.clear();
+      node.writes.clear();
+      node.runs++;
+      node.lastPulse = performance.now();
+      consumerStack.push(id);
+      try {
+        fn();
+      } finally {
+        consumerStack.pop();
+      }
+    });
+  };
+  const trackedCreateStore = (initial, options) => {
+    const id = seq++;
+    const [proxy, setter] = (0, import_store.createStore)(initial, { immutable: true, ...options });
+    const node = base(id, options?.name, "store", `store${id}`);
+    node.read = () => {
+      try {
+        return (0, import_signal.untrack)(() => JSON.stringify(proxy));
+      } catch {
+        return "{…}";
+      }
+    };
+    node.value = "{…}";
+    graph.set(id, node);
+    forget(id);
+    const recording = new Proxy(proxy, {
+      get(t, p, r) {
+        recordRead(id);
+        return Reflect.get(t, p, r);
+      }
+    });
+    const write = (...args) => {
+      recordWrite(id);
+      return setter(...args);
+    };
+    return [recording, write];
+  };
+  const trackedCreateResource = (...args) => {
+    const id = seq++;
+    const last = args[args.length - 1];
+    const name = last && typeof last === "object" && !Array.isArray(last) && typeof last !== "function" ? last.name : void 0;
+    const node = base(id, name, "resource", `res${id}`);
+    const [data, actions] = (0, import_signal.createResource)(...args);
+    node.read = () => {
+      try {
+        return (0, import_signal.untrack)(() => data.loading ? "⏳ loading" : JSON.stringify(data.latest));
+      } catch {
+        return "?";
+      }
+    };
+    node.value = "⏳ loading";
+    graph.set(id, node);
+    forget(id);
+    const accessor = (() => {
+      recordRead(id);
+      return data();
+    });
+    for (const k of ["loading", "error", "latest", "state"]) {
+      Object.defineProperty(accessor, k, { get: () => data[k] });
+    }
+    return [accessor, actions];
+  };
+  const trackedSignal = (value, options) => {
+    const [read, write] = trackedCreateSignal(value, options);
+    Object.defineProperty(read, "set", { value: write });
+    return read;
+  };
+  const trackedMemo = trackedCreateMemo;
+  const trackedEffect = trackedCreateEffect;
+  const trackedStore = (initial, options) => {
+    const [state, set] = trackedCreateStore(initial, options);
+    return new Proxy(state, {
+      get: (target, key) => key === "set" ? set : target[key],
+      has: (target, key) => key === "set" || Reflect.has(target, key)
+    });
+  };
+  const trackedResource = (...args) => {
+    const [accessor, controls] = trackedCreateResource(...args);
+    return Object.assign(accessor, controls);
+  };
+  const api = {
+    createSignal: trackedCreateSignal,
+    createMemo: trackedCreateMemo,
+    createEffect: trackedCreateEffect,
+    createStore: trackedCreateStore,
+    createResource: trackedCreateResource,
+    signal: trackedSignal,
+    memo: trackedMemo,
+    store: trackedStore,
+    effect: trackedEffect,
+    resource: trackedResource
+  };
+  return {
+    graph,
+    run(setup) {
+      dispose();
+      graph.clear();
+      runsAtLastSample.clear();
+      unnamed.clear();
+      seq = 0;
+      consumerStack.length = 0;
+      (0, import_signal.createRoot)((d) => {
+        dispose = d;
+        rootOwner = (0, import_signal.getOwner)();
+        setup(api);
+      });
+    },
+    sample() {
+      const changed = [];
+      const now = Date.now();
+      for (const node of graph.values()) {
+        if (!node.read) {
+          const seen = runsAtLastSample.get(node.id);
+          if (seen !== void 0 && node.runs > seen) {
+            node.lastPulse = now;
+            changed.push(node.id);
+          }
+          runsAtLastSample.set(node.id, node.runs);
+          continue;
+        }
+        const raw = node.read();
+        const stamped = raw?.$name;
+        if (node.kind === "memo" && typeof stamped === "string" && stamped && claims(node, raw)) {
+          node.kind = KIND_OF_BUILTIN[stamped] ?? "component";
+          node.declaredAt = componentSource(stamped);
+          node.source ??= node.declaredAt;
+          if (unnamed.has(node.id)) {
+            node.label = stamped;
+            unnamed.delete(node.id);
+          }
+        }
+        const detail = formatValue(raw);
+        const next = shorten(detail);
+        if (next !== node.value || detail !== node.detail) {
+          node.detail = detail;
+          node.value = next;
+          node.runs++;
+          node.lastPulse = now;
+          changed.push(node.id);
+        }
+        runsAtLastSample.set(node.id, node.runs);
+      }
+      return changed;
+    },
+    dispose() {
+      dispose();
+      dispose = () => {
+      };
+    }
+  };
+}