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

package/dist/plugins/context.cjs

@@ -0,0 +1,98 @@
+"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/context.ts
+var context_exports = {};
+__export(context_exports, {
+  NAME: () => NAME,
+  contextPlugin: () => contextPlugin
+});
+module.exports = __toCommonJS(context_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/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME = "context";
+var contextPlugin = {
+  name: NAME,
+  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 label = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label,
+          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?.[NAME];
+    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?.[NAME];
+    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/context.d.ts

@@ -0,0 +1,10 @@
+import { type DevtoolsPlugin } from '../plugin.js';
+export declare const NAME = "context";
+/** What lands on a component under this plugin's name. */
+export interface ContextNote {
+    name: string;
+    kind: 'provide' | 'read';
+    value?: string;
+}
+export declare const contextPlugin: DevtoolsPlugin;
+//# sourceMappingURL=context.d.ts.map

package/dist/plugins/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/plugins/context.ts"],"names":[],"mappings":"AAKA,OAAO,EAA0B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAI3E,eAAO,MAAM,IAAI,YAAY,CAAC;AAE9B,0DAA0D;AAC1D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,cAuE3B,CAAC"}

package/dist/plugins/context.js

@@ -0,0 +1,80 @@
+// Which components provide a context, and which read it.
+//
+// The graph cannot show this on its own. A provider stamps a value on the owner chain and a
+// reader walks up looking for it, so neither is a dependency and no edge is ever made. The
+// two components end up as unrelated cards even though one feeds the other.
+import { registerDevtoolsPlugin } from '../plugin.js';
+import { shorten } from '../format.js';
+export const NAME = 'context';
+export const contextPlugin = {
+    name: NAME,
+    collect(ctx) {
+        /** One node per context, however many components touch it. */
+        const nodes = new Map();
+        ctx.onContext((report) => {
+            if (report.owner === undefined)
+                return;
+            let node = nodes.get(report.id);
+            if (node === undefined) {
+                // `createContext` names its symbol `context` unless told otherwise, so an unnamed
+                // one is said by where it came from rather than drawn seven times identically.
+                const label = report.name === 'context' && report.ownerLabel
+                    ? `${report.ownerLabel} context`
+                    : report.name;
+                node = ctx.add({
+                    label,
+                    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 !== undefined
+                        ? { value: shorten(report.value), detail: report.value }
+                        : {}),
+                });
+                nodes.set(report.id, node);
+            }
+            // A component that provides is a provider. Only this plugin can tell, and a card
+            // reading `component` says nothing about why it is there.
+            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 !== undefined ? { value: report.value } : {}),
+            });
+            ctx.annotate(report.owner, held);
+        });
+    },
+    rows(node) {
+        const notes = node.extra?.[NAME];
+        if (!notes?.length)
+            return [];
+        return notes.map((note) => ({
+            label: note.kind === 'provide' ? `provides ${note.name}` : `reads ${note.name}`,
+            ...(note.value !== undefined ? { value: note.value } : {}),
+        }));
+    },
+    badge(node) {
+        const notes = node.extra?.[NAME];
+        if (!notes?.length)
+            return undefined;
+        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/context.mjs

@@ -0,0 +1,75 @@
+// 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/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME = "context";
+var contextPlugin = {
+  name: NAME,
+  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 label = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label,
+          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?.[NAME];
+    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?.[NAME];
+    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 {
+  NAME,
+  contextPlugin
+};

package/dist/plugins/directives.cjs

@@ -0,0 +1,98 @@
+"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/directives.ts
+var directives_exports = {};
+__export(directives_exports, {
+  NAME: () => NAME,
+  directiveBadge: () => directiveBadge,
+  directiveRows: () => directiveRows,
+  directivesOn: () => directivesOn,
+  directivesPlugin: () => directivesPlugin
+});
+module.exports = __toCommonJS(directives_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);

package/dist/plugins/directives.d.ts

@@ -0,0 +1,25 @@
+import { type DevtoolsPlugin } from '../plugin.js';
+export declare const NAME = "directives";
+/** The notes on an element of a description, for a panel drawing element rows. */
+export declare function directivesOn(extra?: Record<string, unknown>): DirectiveNote[];
+/** A short word for a badge. The whole expression an inline ref was written as is not one. */
+export declare function directiveBadge(notes: DirectiveNote[]): string | undefined;
+/** A row per directive, for the inspector. */
+export declare function directiveRows(notes: DirectiveNote[]): {
+    label: string;
+    value?: string;
+    at?: DirectiveNote['at'];
+}[];
+/** What lands on a node under this plugin's name. */
+export interface DirectiveNote {
+    kind: string;
+    name: string;
+    element: string;
+    at?: {
+        file?: string;
+        line?: number;
+        column?: number;
+    };
+}
+export declare const directivesPlugin: DevtoolsPlugin;
+//# sourceMappingURL=directives.d.ts.map

package/dist/plugins/directives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directives.d.ts","sourceRoot":"","sources":["../../src/plugins/directives.ts"],"names":[],"mappings":"AAKA,OAAO,EAA0B,KAAK,cAAc,EAAwB,MAAM,cAAc,CAAC;AAGjG,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,aAAa,EAAE,CAE7E;AAED,8FAA8F;AAC9F,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,MAAM,GAAG,SAAS,CAKzE;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;CAAE,EAAE,CAMnH;AAED,qDAAqD;AACrD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACxD;AAKD,eAAO,MAAM,gBAAgB,EAAE,cAiD9B,CAAC"}

package/dist/plugins/directives.js

@@ -0,0 +1,78 @@
+// What directives an element was given.
+//
+// The graph already shows that something writes a class or a style, because the dom reports
+// the binding. It does not show which directive asked for it, and `use:` is invisible
+// entirely since a custom directive is a function call with no reactive node behind it.
+import { registerDevtoolsPlugin } from '../plugin.js';
+export const NAME = 'directives';
+/** The notes on an element of a description, for a panel drawing element rows. */
+export function directivesOn(extra) {
+    return extra?.[NAME] ?? [];
+}
+/** A short word for a badge. The whole expression an inline ref was written as is not one. */
+export function directiveBadge(notes) {
+    if (!notes.length)
+        return undefined;
+    const first = notes[0];
+    const short = first.kind === 'ref' ? 'ref' : label(first);
+    return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+}
+/** A row per directive, for the inspector. */
+export function directiveRows(notes) {
+    return notes.map((note) => ({
+        label: label(note),
+        value: note.element,
+        ...(note.at ? { at: note.at } : {}),
+    }));
+}
+const label = (note) => note.kind === 'ref' ? `ref ${note.name}` : `${note.kind}:${note.name}`;
+export const directivesPlugin = {
+    name: NAME,
+    collect(ctx) {
+        ctx.onDirective((report) => {
+            // On the element, which is what the directive was applied to. The component that ran
+            // is only where the call happened.
+            if (!report.target)
+                return;
+            const held = ctx.elementAnnotation(report.target) ?? [];
+            // A render effect re-runs, so the same directive arrives more than once.
+            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 undefined;
+        // A badge sits beside a label, so it says which directive and not the whole expression
+        // an inline ref was written as.
+        const first = notes[0];
+        const short = first.kind === 'ref' ? 'ref' : label(first);
+        return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+    },
+};
+registerDevtoolsPlugin(directivesPlugin);

package/dist/plugins/directives.mjs

@@ -0,0 +1,75 @@
+// 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);
+export {
+  NAME,
+  directiveBadge,
+  directiveRows,
+  directivesOn,
+  directivesPlugin
+};