@lensmcp/react-instrumentation 1.21.2 → 1.21.4

package/index.d.ts

@@ -4,6 +4,8 @@ export { tracedUseEffect, tracedUseMemo, tracedUseCallback, } from './lib/traced
 export { TraceSlot, type TraceSlotProps } from './lib/trace-slot.js';
 export { withTraceComponent, type WithTraceOptions } from './lib/hoc.js';
 export { installFlowFetch, type FlowFetchOptions } from './lib/flow-fetch.js';
+export { useComponentIdentity } from './lib/component-identity.js';
+export type { ComponentIdentity } from './lib/component-identity.js';
 export { installFiberRenderPublisher, resetFiberRenderPublisherForTests } from './lib/fiber-renders.js';
 export { publish, setPublisher, drainQueue, runInFlow, currentFlow, activeFlow, extendFlowWindow, beginBackgroundFlow, withFlow, type PublishEnvelope, type PublishCategory, type FlowSpec, } from './lib/publish.js';
 export { componentLogicalId, hookLogicalId, slotLogicalId, makeInstanceId, depsHash, resetIdentityState, } from './lib/identity.js';

package/index.js

@@ -1 +1 @@
-"use strict";export{LensmcpRoot}from"./lib/lensmcp-root.js";export{LensmcpContext,useLensmcpContext}from"./lib/context.js";export{tracedUseEffect,tracedUseMemo,tracedUseCallback}from"./lib/traced-hooks.js";export{TraceSlot}from"./lib/trace-slot.js";export{withTraceComponent}from"./lib/hoc.js";export{installFlowFetch}from"./lib/flow-fetch.js";export{installFiberRenderPublisher,resetFiberRenderPublisherForTests}from"./lib/fiber-renders.js";export{publish,setPublisher,drainQueue,runInFlow,currentFlow,activeFlow,extendFlowWindow,beginBackgroundFlow,withFlow}from"./lib/publish.js";export{componentLogicalId,hookLogicalId,slotLogicalId,makeInstanceId,depsHash,resetIdentityState}from"./lib/identity.js";export{default as lensmcpBabelPlugin}from"./lib/babel-plugin.js";
+"use strict";export{LensmcpRoot}from"./lib/lensmcp-root.js";export{LensmcpContext,useLensmcpContext}from"./lib/context.js";export{tracedUseEffect,tracedUseMemo,tracedUseCallback}from"./lib/traced-hooks.js";export{TraceSlot}from"./lib/trace-slot.js";export{withTraceComponent}from"./lib/hoc.js";export{installFlowFetch}from"./lib/flow-fetch.js";export{useComponentIdentity}from"./lib/component-identity.js";export{installFiberRenderPublisher,resetFiberRenderPublisherForTests}from"./lib/fiber-renders.js";export{publish,setPublisher,drainQueue,runInFlow,currentFlow,activeFlow,extendFlowWindow,beginBackgroundFlow,withFlow}from"./lib/publish.js";export{componentLogicalId,hookLogicalId,slotLogicalId,makeInstanceId,depsHash,resetIdentityState}from"./lib/identity.js";export{default as lensmcpBabelPlugin}from"./lib/babel-plugin.js";

package/lib/component-identity.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Who is this hook running inside?
+ *
+ * Every valtio subscription the lens recorded was attributed to
+ * `react:component:anonymous` — 364 of 364 in a live foodguard window — because
+ * `useSnapshot` read `ctx.componentInstanceId` from `LensmcpContext` and nothing ever
+ * set it: `LensmcpRoot` builds its context value from `{ rendererId, page, route }` and
+ * the babel transform stamps JSX attributes rather than wrapping components in a
+ * provider. So `valtio://subscribers` collapsed every subscriber in the app onto one
+ * key, and the question it exists to answer — WHO re-renders when this path changes —
+ * had no answer. The same blank rode along on every `effect-run` / `hook-run` record.
+ *
+ * `useId` is React's own per-instance identity: stable across that component instance's
+ * renders, distinct between instances, and part of the public API — no internals, no
+ * version coupling. That alone makes subscribers countable and distinguishable, which is
+ * most of the value.
+ *
+ * The NAME is best-effort on top. React exposes the currently-rendering component's
+ * owner only through internals whose shape has changed across majors, so a failed lookup
+ * yields no name rather than a wrong one or a throw — the identity stands on `useId`.
+ */
+export interface ComponentIdentity {
+    /** Stable for the life of this component instance. */
+    componentInstanceId: string;
+    /** `react:component:<Name>` when the name could be resolved. */
+    componentLogicalId?: string;
+    componentName?: string;
+}
+/**
+ * Read the currently-rendering component's name out of a React module object.
+ *
+ * Exported (and taking the module rather than requiring it) purely so the internals
+ * shapes below are testable without a renderer — they are the one part of this file that
+ * can silently stop working on a React major.
+ */
+export declare function readOwnerName(React: Record<string, unknown> | undefined): string | undefined;
+/** Build the identity from React's per-instance id plus an optional resolved name. */
+export declare function composeComponentIdentity(id: string, name: string | undefined): ComponentIdentity;
+/**
+ * Identify the component instance this hook is running in.
+ *
+ * MUST be called unconditionally from a hook (it calls `useId`/`useRef`), like any other
+ * hook. The name is resolved once, on first render, and reused — an owner lookup is
+ * cheap but not free, and a component's identity does not change between renders.
+ */
+export declare function useComponentIdentity(): ComponentIdentity;

package/lib/component-identity.js

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var t=(n,e)=>a(n,"name",{value:e,configurable:!0});var _=Object.defineProperty,o=t((n,e)=>_(n,"name",{value:e,configurable:!0}),"r");import{useId as p,useRef as m}from"react";export function readOwnerName(n){try{if(!n)return;const e=n.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE??n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;if(!e)return;const u=e.A,r=((typeof u?.getOwner=="function"?u.getOwner():null)??e.owner??e.ReactCurrentOwner?.current)?.type;if(!r)return;if(typeof r=="string")return r;const c=r.displayName??r.name;return typeof c=="string"&&c.length>0?c:void 0}catch{return}}t(readOwnerName,"readOwnerName"),o(readOwnerName,"readOwnerName");export function composeComponentIdentity(n,e){return{componentInstanceId:`react:component:${e??"fn"}${n}`,...e?{componentLogicalId:`react:component:${e}`,componentName:e}:{}}}t(composeComponentIdentity,"composeComponentIdentity"),o(composeComponentIdentity,"composeComponentIdentity");function i(){try{return readOwnerName(require("react"))}catch{return}}t(i,"f"),o(i,"currentOwnerName");export function useComponentIdentity(){const n=p(),e=m(void 0);return e.current||(e.current=composeComponentIdentity(n,i())),e.current}t(useComponentIdentity,"useComponentIdentity"),o(useComponentIdentity,"useComponentIdentity");

package/lib/traced-hooks.js

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var u=(e,n)=>y(e,"name",{value:n,configurable:!0});var g=Object.defineProperty,f=u((e,n)=>g(e,"name",{value:n,configurable:!0}),"f");import{useCallback as v,useEffect as b,useMemo as w,useRef as d}from"react";import{useLensmcpContext as l}from"./context.js";import{depsHash as h}from"./identity.js";import{publish as i}from"./publish.js";export function tracedUseEffect(e,n,t){const a=l(),s=m(e),r=d(void 0);b(()=>{const o=typeof performance<"u"&&performance.now?performance.now():Date.now(),c=h(t),p=r.current;r.current=c;let I;try{I=n()}finally{const k=typeof performance<"u"&&performance.now?performance.now():Date.now();i({source:"react",category:"render",severity:"info",title:`effect-run ${e}`,fingerprint:`effect-run:${e}`,raw:{kind:"effect-run",effect:{hookInstanceId:s,hookLogicalId:e,componentInstanceId:a.componentInstanceId,depsHash:c,prevDepsHash:p,durationMs:Math.max(0,k-o)}}})}return()=>{typeof I=="function"&&I(),i({source:"react",category:"render",severity:"info",title:`effect-cleanup ${e}`,fingerprint:`effect-cleanup:${e}`,raw:{kind:"effect-run",effect:{hookInstanceId:s,hookLogicalId:e,componentInstanceId:a.componentInstanceId,depsHash:r.current??c,durationMs:0,cleanupRan:!0}}})}},t)}u(tracedUseEffect,"tracedUseEffect"),f(tracedUseEffect,"tracedUseEffect");export function tracedUseMemo(e,n,t){const a=l(),s=m(e),r=d(void 0),o=h(t),c=o!==r.current,p=w(n,t??[]);return c&&i({source:"react",category:"render",severity:"debug",title:`useMemo recomputed ${e}`,fingerprint:`hook-run:${e}`,raw:{kind:"hook-run",hook:{hookInstanceId:s,hookLogicalId:e,componentInstanceId:a.componentInstanceId,hookType:"useMemo",depsHash:o,prevDepsHash:r.current,recomputed:!0}}}),r.current=o,p}u(tracedUseMemo,"tracedUseMemo"),f(tracedUseMemo,"tracedUseMemo");export function tracedUseCallback(e,n,t){const a=l(),s=m(e),r=d(void 0),o=h(t),c=o!==r.current,p=v(n,t??[]);return c&&i({source:"react",category:"render",severity:"debug",title:`useCallback recomputed ${e}`,fingerprint:`hook-run:${e}`,raw:{kind:"hook-run",hook:{hookInstanceId:s,hookLogicalId:e,componentInstanceId:a.componentInstanceId,hookType:"useCallback",depsHash:o,prevDepsHash:r.current,recomputed:!0}}}),r.current=o,p}u(tracedUseCallback,"tracedUseCallback"),f(tracedUseCallback,"tracedUseCallback");function m(e){const n=d(void 0);return n.current||(n.current=`${e}#${Math.random()*1e9|0}`),n.current}u(m,"y"),f(m,"useStableHookInstance");
+"use strict";var v=Object.defineProperty;var p=(e,n)=>v(e,"name",{value:n,configurable:!0});var b=Object.defineProperty,f=p((e,n)=>b(e,"name",{value:n,configurable:!0}),"p");import{useCallback as w,useEffect as $,useMemo as H,useRef as i}from"react";import{useComponentIdentity as h}from"./component-identity.js";import{useLensmcpContext as k}from"./context.js";import{depsHash as y}from"./identity.js";import{publish as m}from"./publish.js";export function tracedUseEffect(e,n,r){const a=k(),s=h(),u=I(e),o=i(void 0);$(()=>{const t=typeof performance<"u"&&performance.now?performance.now():Date.now(),c=y(r),d=o.current;o.current=c;let l;try{l=n()}finally{const g=typeof performance<"u"&&performance.now?performance.now():Date.now();m({source:"react",category:"render",severity:"info",title:`effect-run ${e}`,fingerprint:`effect-run:${e}`,raw:{kind:"effect-run",effect:{hookInstanceId:u,hookLogicalId:e,componentInstanceId:a.componentInstanceId??s.componentInstanceId,depsHash:c,prevDepsHash:d,durationMs:Math.max(0,g-t)}}})}return()=>{typeof l=="function"&&l(),m({source:"react",category:"render",severity:"info",title:`effect-cleanup ${e}`,fingerprint:`effect-cleanup:${e}`,raw:{kind:"effect-run",effect:{hookInstanceId:u,hookLogicalId:e,componentInstanceId:a.componentInstanceId??s.componentInstanceId,depsHash:o.current??c,durationMs:0,cleanupRan:!0}}})}},r)}p(tracedUseEffect,"tracedUseEffect"),f(tracedUseEffect,"tracedUseEffect");export function tracedUseMemo(e,n,r){const a=k(),s=h(),u=I(e),o=i(void 0),t=y(r),c=t!==o.current,d=H(n,r??[]);return c&&m({source:"react",category:"render",severity:"debug",title:`useMemo recomputed ${e}`,fingerprint:`hook-run:${e}`,raw:{kind:"hook-run",hook:{hookInstanceId:u,hookLogicalId:e,componentInstanceId:a.componentInstanceId??s.componentInstanceId,hookType:"useMemo",depsHash:t,prevDepsHash:o.current,recomputed:!0}}}),o.current=t,d}p(tracedUseMemo,"tracedUseMemo"),f(tracedUseMemo,"tracedUseMemo");export function tracedUseCallback(e,n,r){const a=k(),s=h(),u=I(e),o=i(void 0),t=y(r),c=t!==o.current,d=w(n,r??[]);return c&&m({source:"react",category:"render",severity:"debug",title:`useCallback recomputed ${e}`,fingerprint:`hook-run:${e}`,raw:{kind:"hook-run",hook:{hookInstanceId:u,hookLogicalId:e,componentInstanceId:a.componentInstanceId??s.componentInstanceId,hookType:"useCallback",depsHash:t,prevDepsHash:o.current,recomputed:!0}}}),o.current=t,d}p(tracedUseCallback,"tracedUseCallback"),f(tracedUseCallback,"tracedUseCallback");function I(e){const n=i(void 0);return n.current||(n.current=`${e}#${Math.random()*1e9|0}`),n.current}p(I,"H"),f(I,"useStableHookInstance");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensmcp/react-instrumentation",
-  "version": "1.21.2",
+  "version": "1.21.4",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -19,7 +19,7 @@
     }
   },
   "dependencies": {
-    "@lensmcp/protocol-types": "1.21.2",
+    "@lensmcp/protocol-types": "1.21.4",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {