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

package/dist/plugins/index.cjs

@@ -0,0 +1,162 @@
+/*! @fluixi/devtools v0.2.0-alpha.5 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+"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/plugins/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CONTEXT: () => NAME2,
+  DIRECTIVES: () => NAME,
+  contextPlugin: () => contextPlugin,
+  directivesPlugin: () => directivesPlugin
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/plugins/directives.ts
+var NAME = "directives";
+function directivesOn(extra) {
+  return extra?.[NAME] ?? [];
+}
+function directiveBadge(notes) {
+  if (!notes.length) return void 0;
+  const first = notes[0];
+  const short = first.kind === "ref" ? "ref" : label(first);
+  return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+}
+function directiveRows(notes) {
+  return notes.map((note) => ({
+    label: label(note),
+    value: note.element,
+    ...note.at ? { at: note.at } : {}
+  }));
+}
+var label = (note) => note.kind === "ref" ? `ref ${note.name}` : `${note.kind}:${note.name}`;
+var directivesPlugin = {
+  name: NAME,
+  collect(ctx) {
+    ctx.onDirective((report) => {
+      if (!report.target) return;
+      const held = ctx.elementAnnotation(report.target) ?? [];
+      const already = held.some((n) => n.kind === report.kind && n.name === report.name);
+      if (already) return;
+      held.push({
+        kind: report.kind,
+        name: report.name,
+        element: report.element,
+        ...report.at ? { at: report.at } : {}
+      });
+      ctx.annotateElement(report.target, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: label(note),
+      value: note.element,
+      ...note.at ? { at: note.at } : {}
+    }));
+  },
+  elementRows(extra) {
+    return directiveRows(directivesOn(extra));
+  },
+  elementBadge(extra) {
+    return directiveBadge(directivesOn(extra));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const first = notes[0];
+    const short = first.kind === "ref" ? "ref" : label(first);
+    return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+  }
+};
+registerDevtoolsPlugin(directivesPlugin);
+
+// src/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME2 = "context";
+var contextPlugin = {
+  name: NAME2,
+  collect(ctx) {
+    const nodes = /* @__PURE__ */ new Map();
+    ctx.onContext((report) => {
+      if (report.owner === void 0) return;
+      let node = nodes.get(report.id);
+      if (node === void 0) {
+        const label2 = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label: label2,
+          kind: "context",
+          // A context is created at module scope with nothing running, so the only line it
+          // can carry is the one that provided or read it.
+          ...report.at ? { source: report.at } : {},
+          // The router's own contexts are the framework's, and belong in its card rather
+          // than beside the ones the application wrote.
+          authored: report.at?.external !== true,
+          // Under whoever provided it. A context read with no provider above it belongs to
+          // the reader, which is the honest place for a default value.
+          createdIn: report.owner,
+          // Short on the card, whole in the inspector, the way every other node works.
+          ...report.value !== void 0 ? { value: shorten(report.value), detail: report.value } : {}
+        });
+        nodes.set(report.id, node);
+      }
+      if (report.kind === "provide") ctx.retype(report.owner, "provider");
+      const held = ctx.annotation(report.owner) ?? [];
+      const already = held.some((n) => n.name === report.name && n.kind === report.kind);
+      if (already) return;
+      held.push({
+        name: report.name,
+        kind: report.kind,
+        ...report.value !== void 0 ? { value: report.value } : {}
+      });
+      ctx.annotate(report.owner, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME2];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: note.kind === "provide" ? `provides ${note.name}` : `reads ${note.name}`,
+      ...note.value !== void 0 ? { value: note.value } : {}
+    }));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME2];
+    if (!notes?.length) return void 0;
+    const given = notes.filter((n) => n.kind === "provide");
+    if (given.length === 1) return `provides ${given[0].name}`;
+    if (given.length > 1) return `provides ${given.length}`;
+    return notes.length === 1 ? `reads ${notes[0].name}` : `reads ${notes.length}`;
+  }
+};
+registerDevtoolsPlugin(contextPlugin);

package/dist/plugins/index.mjs

@@ -0,0 +1,140 @@
+/*! @fluixi/devtools v0.2.0-alpha.5 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/plugins/directives.ts
+var NAME = "directives";
+function directivesOn(extra) {
+  return extra?.[NAME] ?? [];
+}
+function directiveBadge(notes) {
+  if (!notes.length) return void 0;
+  const first = notes[0];
+  const short = first.kind === "ref" ? "ref" : label(first);
+  return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+}
+function directiveRows(notes) {
+  return notes.map((note) => ({
+    label: label(note),
+    value: note.element,
+    ...note.at ? { at: note.at } : {}
+  }));
+}
+var label = (note) => note.kind === "ref" ? `ref ${note.name}` : `${note.kind}:${note.name}`;
+var directivesPlugin = {
+  name: NAME,
+  collect(ctx) {
+    ctx.onDirective((report) => {
+      if (!report.target) return;
+      const held = ctx.elementAnnotation(report.target) ?? [];
+      const already = held.some((n) => n.kind === report.kind && n.name === report.name);
+      if (already) return;
+      held.push({
+        kind: report.kind,
+        name: report.name,
+        element: report.element,
+        ...report.at ? { at: report.at } : {}
+      });
+      ctx.annotateElement(report.target, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: label(note),
+      value: note.element,
+      ...note.at ? { at: note.at } : {}
+    }));
+  },
+  elementRows(extra) {
+    return directiveRows(directivesOn(extra));
+  },
+  elementBadge(extra) {
+    return directiveBadge(directivesOn(extra));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const first = notes[0];
+    const short = first.kind === "ref" ? "ref" : label(first);
+    return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+  }
+};
+registerDevtoolsPlugin(directivesPlugin);
+
+// src/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME2 = "context";
+var contextPlugin = {
+  name: NAME2,
+  collect(ctx) {
+    const nodes = /* @__PURE__ */ new Map();
+    ctx.onContext((report) => {
+      if (report.owner === void 0) return;
+      let node = nodes.get(report.id);
+      if (node === void 0) {
+        const label2 = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label: label2,
+          kind: "context",
+          // A context is created at module scope with nothing running, so the only line it
+          // can carry is the one that provided or read it.
+          ...report.at ? { source: report.at } : {},
+          // The router's own contexts are the framework's, and belong in its card rather
+          // than beside the ones the application wrote.
+          authored: report.at?.external !== true,
+          // Under whoever provided it. A context read with no provider above it belongs to
+          // the reader, which is the honest place for a default value.
+          createdIn: report.owner,
+          // Short on the card, whole in the inspector, the way every other node works.
+          ...report.value !== void 0 ? { value: shorten(report.value), detail: report.value } : {}
+        });
+        nodes.set(report.id, node);
+      }
+      if (report.kind === "provide") ctx.retype(report.owner, "provider");
+      const held = ctx.annotation(report.owner) ?? [];
+      const already = held.some((n) => n.name === report.name && n.kind === report.kind);
+      if (already) return;
+      held.push({
+        name: report.name,
+        kind: report.kind,
+        ...report.value !== void 0 ? { value: report.value } : {}
+      });
+      ctx.annotate(report.owner, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME2];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: note.kind === "provide" ? `provides ${note.name}` : `reads ${note.name}`,
+      ...note.value !== void 0 ? { value: note.value } : {}
+    }));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME2];
+    if (!notes?.length) return void 0;
+    const given = notes.filter((n) => n.kind === "provide");
+    if (given.length === 1) return `provides ${given[0].name}`;
+    if (given.length > 1) return `provides ${given.length}`;
+    return notes.length === 1 ? `reads ${notes[0].name}` : `reads ${notes.length}`;
+  }
+};
+registerDevtoolsPlugin(contextPlugin);
+export {
+  NAME2 as CONTEXT,
+  NAME as DIRECTIVES,
+  contextPlugin,
+  directivesPlugin
+};

package/dist/source.cjs

@@ -0,0 +1,111 @@
+"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/source.ts
+var source_exports = {};
+__export(source_exports, {
+  componentSource: () => componentSource,
+  holeLocation: () => holeLocation,
+  installSourceMarker: () => installSourceMarker,
+  markComponentSource: () => markComponentSource,
+  markReactiveSource: () => markReactiveSource,
+  propsLocations: () => propsLocations,
+  takeReactiveSource: () => takeReactiveSource
+});
+module.exports = __toCommonJS(source_exports);
+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 propsLocations(props) {
+  return props && typeof props === "object" ? PROPS.get(props) : void 0;
+}
+function holeLocation(accessor) {
+  if (!accessor || typeof accessor !== "object" && typeof accessor !== "function") return void 0;
+  return HOLES.get(accessor) ?? accessor[HOLE_TAG];
+}
+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;
+}

package/dist/source.d.ts

@@ -25,7 +25,7 @@ export interface ReactiveSourceLocation {
      *
      * Both are worth having. The original says which component and which file; the compiled one
      * says which of that component's bindings, because a template's holes all map back to the
-     * position the template opens at — one entry per emitted root is all the map has. Until
+     * position the template opens at: one entry per emitted root is all the map has. Until
      * that changes, the compiled line is the only thing that tells two bindings apart.
      */
     compiled?: {
@@ -42,7 +42,7 @@ export interface ReactiveSourceMetadata {
  * Where each component was declared, by name.
  *
  * The graph sees the memo the compiler wraps a component in, and all that memo carries back
- * is the name stamped on what the component returned — so name is the only key available.
+ * is the name stamped on what the component returned, so name is the only key available.
  * Two components sharing a name are recorded as ambiguous and reported as unknown, since a
  * location pointing at the wrong file is worse than none.
  */

package/dist/source.js

@@ -25,7 +25,7 @@ host[MARKS] = shared;
  * Where each component was declared, by name.
  *
  * The graph sees the memo the compiler wraps a component in, and all that memo carries back
- * is the name stamped on what the component returned — so name is the only key available.
+ * is the name stamped on what the component returned, so name is the only key available.
  * Two components sharing a name are recorded as ambiguous and reported as unknown, since a
  * location pointing at the wrong file is worse than none.
  */
@@ -79,7 +79,7 @@ export function takeReactiveSource() {
     const mark = shared.pending;
     if (mark) {
         // The variable name belongs to the node the author was declaring, not to the ones the
-        // framework built underneath it — `cart`, then two unnamed signals at the same line.
+        // framework built underneath it: `cart`, then two unnamed signals at the same line.
         if (mark.name !== undefined)
             shared.pending = { location: mark.location };
         if (!shared.expiring) {
@@ -117,8 +117,8 @@ function markHole(accessor, line, column, name) {
         }
     }
     // The template is being built, so whatever declaration left a mark is finished with. A
-    // mark outlives the statement that set it on purpose — a store's key signals are made
-    // inside the call and belong to its line — but a component body is one long synchronous
+    // mark outlives the statement that set it on purpose, a store's key signals are made
+    // inside the call and belong to its line: but a component body is one long synchronous
     // run, and without this every node the template makes claimed the last signal's position.
     shared.pending = null;
     return accessor;

package/dist/source.mjs

@@ -0,0 +1,90 @@
+// 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 propsLocations(props) {
+  return props && typeof props === "object" ? PROPS.get(props) : void 0;
+}
+function holeLocation(accessor) {
+  if (!accessor || typeof accessor !== "object" && typeof accessor !== "function") return void 0;
+  return HOLES.get(accessor) ?? accessor[HOLE_TAG];
+}
+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;
+}
+export {
+  componentSource,
+  holeLocation,
+  installSourceMarker,
+  markComponentSource,
+  markReactiveSource,
+  propsLocations,
+  takeReactiveSource
+};