react-debug-updates 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,93 @@
+export interface Fiber {
+    tag: number;
+    type: FiberType | null;
+    memoizedProps: Record<string, unknown> | null;
+    memoizedState: unknown;
+    actualDuration?: number;
+    _debugHookTypes?: string[] | null;
+    return: Fiber | null;
+    child: Fiber | null;
+    sibling: Fiber | null;
+    alternate: Fiber | null;
+    flags: number;
+    stateNode: unknown;
+}
+export type FiberType = string | {
+    displayName?: string;
+    name?: string;
+};
+export interface FiberRoot {
+    current: Fiber;
+}
+export interface DevToolsHook {
+    onCommitFiberRoot: (rendererID: number, root: FiberRoot, priorityLevel?: unknown) => void;
+    [key: string]: unknown;
+}
+/** A node in React's internal hook linked list. */
+export interface HookNode {
+    memoizedState: unknown;
+    next: HookNode | null;
+}
+export interface UpdateCause {
+    kind: "hook" | "props" | "class-state" | "unknown";
+    /** Source-order index of the hook (0-based). */
+    hookIndex?: number;
+    /** Hook type from _debugHookTypes, e.g. "useState", "useReducer". */
+    hookType?: string;
+    previousValue?: unknown;
+    nextValue?: unknown;
+}
+export interface PendingEntry {
+    component: string;
+    path: string;
+    duration: number;
+    domNode: HTMLElement | null;
+    causes: UpdateCause[];
+}
+export interface HighlightOptions {
+    /** Time between flushes (ms). Default: 250 */
+    flushInterval?: number;
+    /** Total animation duration (ms). Default: 1200 */
+    animationDuration?: number;
+    /** Show text labels (component name, count, duration, cause) above overlays. Default: true */
+    showLabels?: boolean;
+}
+export interface RenderEntry {
+    component: string;
+    path: string;
+    duration: number;
+    timestamp: number;
+    causes: UpdateCause[];
+}
+export interface LoggerOptions {
+    /** Suppress console output. Default: false */
+    silent?: boolean;
+    /**
+     * Which re-renders to track.
+     *  - `"self-triggered"` — only components whose own state/hooks changed
+     *  - `"all"` — every component that re-rendered, including children swept by a parent update
+     *
+     * Default: `"self-triggered"`
+     */
+    mode?: "self-triggered" | "all";
+    /** Ring buffer size for stored entries. Default: 500 */
+    bufferSize?: number;
+    /** Filter — return `false` to skip an entry. */
+    filter?: (entry: RenderEntry) => boolean;
+    /** Enable visual highlight overlays. `true` for defaults, or pass options. */
+    highlight?: boolean | HighlightOptions;
+    /**
+     * Detect and display *why* each component re-rendered.
+     *
+     * Shows which hook (useState[2], useContext, etc.) triggered the update,
+     * with previous→next values for state hooks.
+     * Requires a React dev build (`_debugHookTypes`). Default: `false`
+     */
+    showCauses?: boolean;
+}
+export interface RenderLogger {
+    /** Ring buffer of recorded re-render entries. */
+    entries: RenderEntry[];
+    /** Unhook from React and clean up overlays. */
+    disconnect: () => void;
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "react-debug-updates",
+  "version": "0.1.0",
+  "description": "See why React components re-render — visual overlays, console logging, and hook-level cause detection with zero code changes",
+  "type": "module",
+  "main": "./dist/react-debug-updates.cjs",
+  "module": "./dist/react-debug-updates.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/react-debug-updates.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/react-debug-updates.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "yarn build"
+  },
+  "keywords": [
+    "react",
+    "debug",
+    "render",
+    "rerender",
+    "re-render",
+    "why-did-you-render",
+    "highlight updates",
+    "performance",
+    "devtools",
+    "overlay",
+    "profiler",
+    "wasted renders",
+    "unnecessary renders",
+    "render tracker",
+    "render visualizer",
+    "react updates",
+    "useState",
+    "useContext"
+  ],
+  "license": "MIT",
+  "author": "pie6k",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie6k/react-debug-updates.git"
+  },
+  "homepage": "https://github.com/pie6k/react-debug-updates#readme",
+  "bugs": {
+    "url": "https://github.com/pie6k/react-debug-updates/issues"
+  },
+  "devDependencies": {
+    "typescript": "^5.8",
+    "vite": "^6.3"
+  },
+  "packageManager": "yarn@4.13.0+sha512.5c20ba010c99815433e5c8453112165e673f1c7948d8d2b267f4b5e52097538658388ebc9f9580656d9b75c5cc996f990f611f99304a2197d4c56d21eea370e7"
+}