feat: notifications

biome.json

@@ -20,12 +20,12 @@
     ]
   },
   "organizeImports": {
-    "enabled": true
+    "enabled": false
   },
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true,
+      "recommended": false,
       "correctness": {
         "noUnusedFunctionParameters": {
           "level": "warn",

packages/scan/package.json

@@ -1,14 +1,8 @@
 {
   "name": "react-scan",
-  "version": "0.1.3",
+  "version": "0.2.8",
   "description": "Scan your React app for renders",
-  "keywords": [
-    "react",
-    "react-scan",
-    "react scan",
-    "render",
-    "performance"
-  ],
+  "keywords": ["react", "react-scan", "react scan", "render", "performance"],
   "homepage": "https://react-scan.million.dev",
   "bugs": {
     "url": "https://github.com/aidenybai/react-scan/issues"
@@ -172,27 +166,17 @@
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "monitoring": [
-        "./dist/core/monitor/index.d.ts"
-      ],
-      "monitoring/next": [
-        "./dist/core/monitor/params/next.d.ts"
-      ],
+      "monitoring": ["./dist/core/monitor/index.d.ts"],
+      "monitoring/next": ["./dist/core/monitor/params/next.d.ts"],
       "monitoring/react-router-legacy": [
         "./dist/core/monitor/params/react-router-v5.d.ts"
       ],
       "monitoring/react-router": [
         "./dist/core/monitor/params/react-router-v6.d.ts"
       ],
-      "monitoring/remix": [
-        "./dist/core/monitor/params/remix.d.ts"
-      ],
-      "monitoring/astro": [
-        "./dist/core/monitor/params/astro/index.ts"
-      ],
-      "react-component-name/vite": [
-        "./dist/react-component-name/vite.d.ts"
-      ],
+      "monitoring/remix": ["./dist/core/monitor/params/remix.d.ts"],
+      "monitoring/astro": ["./dist/core/monitor/params/astro/index.ts"],
+      "react-component-name/vite": ["./dist/react-component-name/vite.d.ts"],
       "react-component-name/webpack": [
         "./dist/react-component-name/webpack.d.ts"
       ],
@@ -208,23 +192,12 @@
       "react-component-name/rollup": [
         "./dist/react-component-name/rollup.d.ts"
       ],
-      "react-component-name/astro": [
-        "./dist/react-component-name/astro.d.ts"
-      ],
-      "react-component-name/loader": [
-        "./dist/react-component-name/loader.d.ts"
-      ]
+      "react-component-name/astro": ["./dist/react-component-name/astro.d.ts"],
+      "react-component-name/loader": ["./dist/react-component-name/loader.d.ts"]
     }
   },
   "bin": "bin/cli.js",
-  "files": [
-    "dist",
-    "bin",
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "auto.d.ts"
-  ],
+  "files": ["dist", "bin", "package.json", "README.md", "LICENSE", "auto.d.ts"],
   "scripts": {
     "dev:kitchen": "node dist/cli.js http://localhost:5173",
     "build": "npm run build:css && NODE_ENV=production tsup",

packages/scan/src/core/index.ts

@@ -24,6 +24,8 @@ import type {
 } from './instrumentation';
 import type { InternalInteraction } from './monitor/types';
 import type { getSession } from './monitor/utils';
+import { startTimingTracking } from './notifications/event-tracking';
+import { createHighlightCanvas } from './notifications/outline-overlay';
 
 let rootContainer: HTMLDivElement | null = null;
 let shadowRoot: ShadowRoot | null = null;
@@ -160,6 +162,22 @@ export interface Options {
    */
   trackUnnecessaryRenders?: boolean;
 
+  /**
+   * Should the FPS meter show in the toolbar
+   *
+   *  @default true
+   */
+  showFPS?: boolean;
+
+  /**
+   * Should react scan log internal errors to the console.
+   *
+   * Useful if react scan is not behaving expected and you want to provide information to maintainers when submitting an issue https://github.com/aidenybai/react-scan/issues
+   *
+   *  @default false
+   */
+  _debug?: 'verbose' | false;
+
   onCommitStart?: () => void;
   onRender?: (fiber: Fiber, renders: Array<Render>) => void;
   onCommitFinish?: () => void;
@@ -197,6 +215,9 @@ export interface StoreType {
   fiberRoots: WeakSet<Fiber>;
   reportData: Map<number, RenderData>;
   legacyReportData: Map<string, RenderData>;
+  interactionListeningForRenders:
+    | ((fiber: Fiber, renders: Array<Render>) => void)
+    | null;
 }
 
 export type OutlineKey = `${string}-${string}`;
@@ -270,6 +291,7 @@ export const Store: StoreType = {
   reportData: new Map<number, RenderData>(),
   legacyReportData: new Map<string, RenderData>(),
   lastReportTime: signal(0),
+  interactionListeningForRenders: null,
 };
 
 export const ReactScanInternals: Internals = {
@@ -286,6 +308,7 @@ export const ReactScanInternals: Internals = {
     // alwaysShowLabels: false,
     animationSpeed: 'fast',
     dangerouslyForceRunInProduction: false,
+    showFPS: true,
     // smoothlyAnimateOutlines: true,
     // trackUnnecessaryRenders: false,
   }),
@@ -465,50 +488,62 @@ export const getIsProduction = () => {
 };
 
 export const start = () => {
-  if (typeof window === 'undefined') {
-    return;
-  }
+  try {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-  if (
-    getIsProduction() &&
-    !ReactScanInternals.options.value.dangerouslyForceRunInProduction
-  ) {
-    return;
-  }
+    if (
+      getIsProduction() &&
+      !ReactScanInternals.options.value.dangerouslyForceRunInProduction
+    ) {
+      return;
+    }
 
-  const localStorageOptions =
-    readLocalStorage<LocalStorageOptions>('react-scan-options');
+    const localStorageOptions =
+      readLocalStorage<LocalStorageOptions>('react-scan-options');
 
-  if (localStorageOptions) {
-    const validLocalOptions = validateOptions(localStorageOptions);
+    if (localStorageOptions) {
+      const validLocalOptions = validateOptions(localStorageOptions);
 
-    if (Object.keys(validLocalOptions).length > 0) {
-      ReactScanInternals.options.value = {
-        ...ReactScanInternals.options.value,
-        ...validLocalOptions,
-      };
+      if (Object.keys(validLocalOptions).length > 0) {
+        ReactScanInternals.options.value = {
+          ...ReactScanInternals.options.value,
+          ...validLocalOptions,
+        };
+      }
     }
-  }
 
-  const options = getOptions();
-
-  initReactScanInstrumentation(() => {
-    initToolbar(!!options.value.showToolbar);
-  });
-
-  const isUsedInBrowserExtension = typeof window !== 'undefined';
-  if (!Store.monitor.value && !isUsedInBrowserExtension) {
-    setTimeout(() => {
-      if (isInstrumentationActive()) return;
-      // biome-ignore lint/suspicious/noConsole: Intended debug output
+    const options = getOptions();
+
+    initReactScanInstrumentation(() => {
+      initToolbar(!!options.value.showToolbar);
+    });
+
+    const isUsedInBrowserExtension = typeof window !== 'undefined';
+    if (!Store.monitor.value && !isUsedInBrowserExtension) {
+      setTimeout(() => {
+        if (isInstrumentationActive()) return;
+        // biome-ignore lint/suspicious/noConsole: Intended debug output
+        console.error(
+          '[React Scan] Failed to load. Must import React Scan before React runs.',
+        );
+      }, 5000);
+    }
+  } catch (e) {
+    if (ReactScanInternals.options.value._debug === 'verbose') {
       console.error(
-        '[React Scan] Failed to load. Must import React Scan before React runs.',
+        '[React Scan Internal Error]',
+        'Failed to create notifications outline canvas',
+        e,
       );
-    }, 5000);
+    }
   }
 };
 
 const initToolbar = (showToolbar: boolean) => {
+  startTimingTracking();
+  createNotificationsOutlineCanvas();
   const windowToolbarContainer = window.__REACT_SCAN_TOOLBAR_CONTAINER__;
 
   if (!showToolbar) {
@@ -521,6 +556,21 @@ const initToolbar = (showToolbar: boolean) => {
   createToolbar(shadowRoot);
 };
 
+const createNotificationsOutlineCanvas = () => {
+  try {
+    const highlightRoot = document.documentElement;
+    createHighlightCanvas(highlightRoot);
+  } catch (e) {
+    if (ReactScanInternals.options.value._debug === 'verbose') {
+      console.error(
+        '[React Scan Internal Error]',
+        'Failed to create notifications outline canvas',
+        e,
+      );
+    }
+  }
+};
+
 export const scan = (options: Options = {}) => {
   setOptions(options);
   const isInIframe = Store.isInIframe.value;

packages/scan/src/core/monitor/utils.ts

@@ -131,3 +131,19 @@ export const getSession = async ({
   cachedSession = session;
   return session;
 };
+
+
+
+export const not_globally_unique_generateId = () => {
+  if (typeof window === 'undefined') {
+    return '0';
+  }
+
+  // @ts-expect-error
+  if (window.reactScanIdCounter === undefined) {
+    // @ts-expect-error
+    window.reactScanIdCounter = 0;
+  }
+  // @ts-expect-error
+  return `${++window.reactScanIdCounter}`;
+};