rerender-lens 0.5.0 → 0.7.0

package/dist/setup.js

@@ -381,16 +381,27 @@ function printReport(report, options) {
 }
 
 // src/state.ts
+var MAX_SEEN_COMPONENTS = 500;
 var KEY = /* @__PURE__ */ Symbol.for("rerender-lens.state");
 function getState() {
   const g = globalThis;
   let s = g[KEY];
   if (!s) {
-    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0, overheadMs: 0, maxCommitMs: 0, truncated: 0 };
+    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0, overheadMs: 0, maxCommitMs: 0, truncated: 0, seen: /* @__PURE__ */ new Set(), seenTracked: /* @__PURE__ */ new Set(), seenOverflow: false };
     g[KEY] = s;
   }
   return s;
 }
+function noteRendered(s, name, tracked) {
+  if (!s.seen.has(name)) {
+    if (s.seen.size >= MAX_SEEN_COMPONENTS) {
+      s.seenOverflow = true;
+      return;
+    }
+    s.seen.add(name);
+  }
+  if (tracked) s.seenTracked.add(name);
+}
 function warnOnce(key, message) {
   const s = getState();
   if (s.warnedOnce.has(key)) return;
@@ -1117,8 +1128,11 @@ function onCommit(root, commitPriority) {
     const alt = fiber.alternate;
     if (alt && isComponentTag(fiber.tag) && didRender(fiber)) {
       if (isHotSwapped(fiber, alt)) hot = true;
-      renderedNames.add(fiberName(fiber));
-      if (shouldTrack(fiberType(fiber), o)) rendered.push(fiber);
+      const name = fiberName(fiber);
+      renderedNames.add(name);
+      const tracked = shouldTrack(fiberType(fiber), o);
+      noteRendered(s, name, tracked);
+      if (tracked) rendered.push(fiber);
     }
     if (fiber.tag === SuspenseComponent && alt && alt.memoizedState !== null && fiber.memoizedState === null) (resolvedBoundaries ?? (resolvedBoundaries = [])).push(fiber);
     if (!alt || fiber.child !== alt.child) {
@@ -1243,10 +1257,53 @@ function shouldTrack(type, o) {
   if (o.trackAllMemoized) return isMemo(type) || isPureClass(type);
   return false;
 }
+var ANONYMOUS = "Anonymous";
+function explainTracking(type, o) {
+  if (typeof type === "string")
+    return { tracked: false, name: type, memoized: false, reason: `<${type}> is a DOM element, not a React component; only components are tracked.` };
+  if (!isComponentLike(type))
+    return { tracked: false, name: ANONYMOUS, memoized: false, reason: "This is not a React component type, so it is never tracked." };
+  const name = getDisplayName(type);
+  const memo = isMemo(type);
+  const memoized = memo || isPureClass(type);
+  if (o.exclude?.some((m) => matches(m, name)))
+    return { tracked: false, name, memoized, reason: `<${name}> matches "exclude", which wins over every other rule.`, fix: `Remove "${name}" from the exclude list.` };
+  if (hasMarker(type)) return { tracked: true, name, memoized, reason: `<${name}> is marked with track() (the ${MARKER} static).` };
+  if (o.include?.some((m) => matches(m, name))) return { tracked: true, name, memoized, reason: `<${name}> matches "include".` };
+  if (o.trackAllComponents) return { tracked: true, name, memoized, reason: '"Track every component" is on, so every component is tracked.' };
+  if (o.trackAllMemoized && memoized)
+    return { tracked: true, name, memoized, reason: `<${name}> is ${memo ? "a React.memo component" : "a PureComponent"}, and "Track every React.memo and PureComponent" is on.` };
+  if (name === ANONYMOUS)
+    return {
+      tracked: false,
+      name,
+      memoized,
+      reason: 'This component has no display name, so "include" and "exclude" cannot address it.',
+      fix: "Give the function a name, set displayName, or mark it with track(fn, 'Name')."
+    };
+  if (o.trackAllMemoized)
+    return {
+      tracked: false,
+      name,
+      memoized,
+      reason: `"Track every React.memo and PureComponent" only covers React.memo components and PureComponent classes, and <${name}> is neither.`,
+      fix: `Add "${name}" to include, wrap it in React.memo, or turn on "Track every component".`
+    };
+  return {
+    tracked: false,
+    name,
+    memoized,
+    reason: `Nothing selects <${name}>: it is not marked with track(), no "include" pattern matches it, and neither "track every" option is on.`,
+    fix: `Add "${name}" to include, or turn on "Track every React.memo and PureComponent" / "Track every component".`
+  };
+}
 function init(options = {}) {
   const s = getState();
   s.options = { ...options };
   s.printed.clear();
+  s.seen.clear();
+  s.seenTracked.clear();
+  s.seenOverflow = false;
   if (!s.enabled) {
     s.detach = attach();
     s.enabled = true;
@@ -1372,7 +1429,7 @@ function flash(target, duration = 500) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0" ;
+var VERSION = "0.7.0" ;
 
 // src/devtools.ts
 var DEVTOOLS_MARKER = "__rerenderLens";
@@ -1498,6 +1555,18 @@ function createDevtoolsNotifier(options = {}) {
     target.postMessage(msg, "*");
   };
   const source = options.source ?? "page";
+  const trackingSummary = () => {
+    const s = getState();
+    const o = s.options;
+    return {
+      mode: o.trackAllComponents ? "all" : o.trackAllMemoized ? "memoized" : "marked",
+      include: (o.include ?? []).map(matcherToString).filter((x) => x !== null),
+      exclude: (o.exclude ?? []).map(matcherToString).filter((x) => x !== null),
+      renderedCount: s.seen.size,
+      trackedCount: s.seenTracked.size,
+      overflow: s.seenOverflow
+    };
+  };
   const info = () => ({
     count: buffer.length,
     library: VERSION,
@@ -1511,7 +1580,8 @@ function createDevtoolsNotifier(options = {}) {
     scheduled: getState().scheduled,
     commits: getState().commits,
     overhead: { totalMs: getState().overheadMs, maxCommitMs: getState().maxCommitMs },
-    truncated: getState().truncated
+    truncated: getState().truncated,
+    tracking: trackingSummary()
   });
   const bridge = {
     replay: () => {
@@ -1557,6 +1627,10 @@ function createDevtoolsNotifier(options = {}) {
     flashAvoidable: (on) => {
       flashOn = !!on;
     },
+    explain: (target2) => {
+      const comp = typeof target2 === "number" ? fiberById(target2) : nearestComponent(fiberForNode(target2));
+      return comp ? explainTracking(fiberType(comp), getState().options) : null;
+    },
     inspect: (node) => {
       const comp = nearestComponent(fiberForNode(node));
       if (!comp) return null;
@@ -1571,6 +1645,7 @@ function createDevtoolsNotifier(options = {}) {
         component: fiberName(comp),
         instanceId: id,
         tracked: shouldTrack(fiberType(comp), getState().options),
+        tracking: explainTracking(fiberType(comp), getState().options),
         path,
         reports: id === null ? [] : buffer.filter((e) => e.instanceId === id).slice(-20).map((e) => e.payload)
       };
@@ -1605,6 +1680,9 @@ function createDevtoolsNotifier(options = {}) {
           bridge.flashAvoidable(!!data.arg);
           reply.result = true;
           break;
+        case "explain":
+          reply.result = bridge.explain(data.arg);
+          break;
         default:
           reply.error = `unknown command ${String(data.cmd)}`;
       }
@@ -1613,6 +1691,7 @@ function createDevtoolsNotifier(options = {}) {
     }
     return reply;
   };
+  const isRelayGreeting = (data) => !!data && typeof data === "object" && data.__rerenderLensRelay === true && typeof data.app === "string";
   const isCommand = (data) => !!data && typeof data === "object" && data.__rerenderLensCmd === true && typeof data.id === "string";
   const envelope = (type, payload) => ({ [DEVTOOLS_MARKER]: true, version: PROTOCOL_VERSION, type, payload });
   const sinks = [];
@@ -1635,14 +1714,20 @@ function createDevtoolsNotifier(options = {}) {
   const relayUrl = options.relay ?? (typeof window !== "undefined" ? window.__RERENDER_LENS_RELAY__ : void 0);
   const ES = options.eventSource ?? (typeof EventSource === "function" ? EventSource : null);
   if (relayUrl && ES && typeof fetch === "function") {
-    const base = relayUrl.replace(/\/$/, "");
+    const [rawBase, relayQuery = ""] = relayUrl.split("?");
+    const base = (rawBase ?? "").replace(/\/$/, "");
+    const relayToken = new URLSearchParams(relayQuery).get("token");
+    const auth = relayToken ? `token=${encodeURIComponent(relayToken)}` : "";
     let queue = [];
     let scheduled = false;
+    let appId = null;
     const flush = () => {
       scheduled = false;
       const batch = queue;
       queue = [];
-      fetch(`${base}/message`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(batch), keepalive: true }).catch(() => {
+      const params = [appId ? `app=${encodeURIComponent(appId)}` : "", auth].filter(Boolean).join("&");
+      const to = `${base}/message${params ? `?${params}` : ""}`;
+      fetch(to, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(batch), keepalive: true }).catch(() => {
       });
     };
     const relaySend = (message) => {
@@ -1653,7 +1738,8 @@ function createDevtoolsNotifier(options = {}) {
       }
     };
     try {
-      const stream = new ES(`${base}/events?role=app`);
+      const label = typeof location !== "undefined" ? `${location.host}${location.pathname}`.slice(0, 120) : "";
+      const stream = new ES(`${base}/events?role=app${label ? `&label=${encodeURIComponent(label)}` : ""}${auth ? `&${auth}` : ""}`);
       stream.onmessage = (event) => {
         let parsed;
         try {
@@ -1661,7 +1747,10 @@ function createDevtoolsNotifier(options = {}) {
         } catch {
           return;
         }
-        for (const m of Array.isArray(parsed) ? parsed : [parsed]) if (isCommand(m)) relaySend(runCommand(m));
+        for (const m of Array.isArray(parsed) ? parsed : [parsed]) {
+          if (isRelayGreeting(m)) appId = m.app;
+          else if (isCommand(m)) relaySend(runCommand(m));
+        }
       };
       stream.onerror = () => {
       };