main 🧊 add use performance observer

Author: debabin

package.json

@@ -35,11 +35,11 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@siberiacancode/eslint": "2.16.5",
+    "@siberiacancode/eslint": "2.16.11",
     "@siberiacancode/prettier": "^1.6.1",
-    "@types/node": "^25.3.5",
+    "@types/node": "^25.5.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.3.2",
+    "lint-staged": "^16.4.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "typescript": "^5.9.3"
   }

packages/core/package.json

@@ -71,15 +71,15 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/web-bluetooth": "^0.0.21",
-    "@vitejs/plugin-react": "^5.1.4",
-    "core-js": "^3.48.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "core-js": "^3.49.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "shx": "^0.4.0",
     "tailwindcss": "4.2.1",
-    "vite": "^7.3.1",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

packages/core/src/bundle/hooks/usePerformanceObserver/usePerformanceObserver.js

@@ -17,7 +17,7 @@ import { useEffect, useRef, useState } from 'react';
 export const usePerformanceObserver = (options, callback) => {
   const supported = typeof window !== 'undefined' && !!window.PerformanceObserver;
   const [entries, setEntries] = useState([]);
-  const observerRef = useRef(null);
+  const observerRef = useRef(undefined);
   const internalCallback = useRef(callback);
   internalCallback.current = callback;
   const start = () => {
@@ -32,7 +32,7 @@ export const usePerformanceObserver = (options, callback) => {
   const stop = () => {
     if (!supported) return;
     observerRef.current?.disconnect();
-    observerRef.current = null;
+    observerRef.current = undefined;
   };
   useEffect(() => {
     if (!supported) return;
@@ -41,5 +41,5 @@ export const usePerformanceObserver = (options, callback) => {
       stop();
     };
   }, []);
-  return { supported, entries, start, stop };
+  return { supported, entries, start, stop, observer: observerRef.current };
 };

packages/core/src/hooks/useBluetooth/useBluetooth.test.ts

@@ -35,7 +35,6 @@ beforeEach(() => {
     configurable: true
   });
 
-  vi.clearAllMocks();
   trigger.clear();
 });
 

packages/core/src/hooks/useCssVar/useCssVar.test.tsx

@@ -25,7 +25,6 @@ const element = document.getElementById('target') as HTMLDivElement;
 beforeEach(() => {
   element.style.removeProperty('--test-color');
   element.className = '';
-  vi.clearAllMocks();
 });
 
 const trigger = createTrigger<Node, MutationCallback>();

packages/core/src/hooks/useDevicePixelRatio/useDevicePixelRatio.test.ts

@@ -42,11 +42,6 @@ beforeEach(() => {
   trigger.clear();
 });
 
-afterEach(() => {
-  mockMediaQueryListAddEventListener.mockClear();
-  mockMediaQueryListRemoveEventListener.mockClear();
-});
-
 it('Should use device pixel ratio', () => {
   const { result } = renderHook(useDevicePixelRatio);
 

packages/core/src/hooks/useDoubleClick/useDoubleClick.test.ts

@@ -29,7 +29,6 @@ targets.forEach((target) => {
 
     afterEach(() => {
       vi.useRealTimers();
-      vi.clearAllMocks();
     });
 
     it('Should use double click', () => {

packages/core/src/hooks/useLongPress/useLongPress.test.ts

@@ -27,7 +27,6 @@ beforeEach(vi.useFakeTimers);
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.clearAllMocks();
 });
 
 targets.forEach((target) => {

packages/core/src/hooks/usePerformanceObserver/usePerformanceObserver.test.ts

@@ -1,14 +1,15 @@
 import { act, renderHook } from '@testing-library/react';
 import { vi } from 'vitest';
 
-import { renderHookServer } from '@/tests';
+import { createTrigger, renderHookServer } from '@/tests';
 
 import { usePerformanceObserver } from './usePerformanceObserver';
 
-const mockObserve = vi.fn();
-const mockDisconnect = vi.fn();
+const PERFORMANCE_OBSERVER_KEY = 'performance-observer';
+const trigger = createTrigger<string, PerformanceObserverCallback>();
 
-let observerCallback: PerformanceObserverCallback;
+const mockPerformanceObserverObserve = vi.fn();
+const mockPerformanceObserverDisconnect = vi.fn();
 
 const createMockPerformanceEntry = (
   name = 'test-entry',
@@ -25,17 +26,26 @@ const createMockPerformanceEntry = (
 
 class MockPerformanceObserver {
   constructor(callback: PerformanceObserverCallback) {
-    observerCallback = callback;
+    this.callback = callback;
   }
 
-  observe = (options?: PerformanceObserverInit) => mockObserve(options);
-  disconnect = () => mockDisconnect();
+  callback: PerformanceObserverCallback;
+
+  observe = (options?: PerformanceObserverInit) => {
+    trigger.add(PERFORMANCE_OBSERVER_KEY, this.callback);
+    mockPerformanceObserverObserve(options);
+  };
+
+  disconnect = () => {
+    trigger.delete(PERFORMANCE_OBSERVER_KEY);
+    mockPerformanceObserverDisconnect();
+  };
 }
 
 globalThis.PerformanceObserver = MockPerformanceObserver as any;
 
-afterEach(() => {
-  vi.clearAllMocks();
+beforeEach(() => {
+  trigger.clear();
 });
 
 it('Should use performance observer', () => {
@@ -45,6 +55,7 @@ it('Should use performance observer', () => {
   expect(result.current.entries).toEqual([]);
   expect(result.current.start).toBeTypeOf('function');
   expect(result.current.stop).toBeTypeOf('function');
+  expect(result.current.observer).toBeUndefined();
 });
 
 it('Should use performance observer on server side', () => {
@@ -54,113 +65,77 @@ it('Should use performance observer on server side', () => {
   expect(result.current.entries).toEqual([]);
   expect(result.current.start).toBeTypeOf('function');
   expect(result.current.stop).toBeTypeOf('function');
+  expect(result.current.observer).toBeUndefined();
 });
 
-it('Should start observing when immediate is true', () => {
+it('Should start observing when immediate', () => {
   renderHook(() => usePerformanceObserver({ entryTypes: ['measure'], immediate: true }));
 
-  expect(mockObserve).toHaveBeenCalledOnce();
-  expect(mockObserve).toHaveBeenCalledWith(expect.objectContaining({ entryTypes: ['measure'] }));
-});
-
-it('Should not start observing when immediate is not set', () => {
-  renderHook(() => usePerformanceObserver({ entryTypes: ['measure'] }));
-
-  expect(mockObserve).not.toHaveBeenCalled();
+  expect(mockPerformanceObserverObserve).toHaveBeenCalledOnce();
+  expect(mockPerformanceObserverObserve).toHaveBeenCalledWith(
+    expect.objectContaining({ entryTypes: ['measure'] })
+  );
 });
 
-it('Should start, stop and restart observer manually', () => {
+it('Should restart observer manually', () => {
   const { result } = renderHook(() => usePerformanceObserver({ entryTypes: ['measure'] }));
 
-  expect(mockObserve).not.toHaveBeenCalled();
-
-  act(() => result.current.start());
+  const entry = createMockPerformanceEntry();
+  const entryList = {
+    getEntries: () => [entry]
+  } as PerformanceObserverEntryList;
 
-  expect(mockObserve).toHaveBeenCalledOnce();
+  act(() => {
+    result.current.start();
+    trigger.callback(PERFORMANCE_OBSERVER_KEY, entryList, result.current.observer!);
+  });
 
-  act(() => result.current.stop());
+  expect(result.current.entries).toEqual([entry]);
 
-  expect(mockDisconnect).toHaveBeenCalledOnce();
+  expect(mockPerformanceObserverObserve).toHaveBeenCalledOnce();
 
-  act(() => result.current.start());
+  act(result.current.stop);
 
-  expect(mockObserve).toHaveBeenCalledTimes(2);
+  expect(mockPerformanceObserverDisconnect).toHaveBeenCalledOnce();
 });
 
 it('Should call callback when performance entries are observed', () => {
   const callback = vi.fn();
 
-  renderHook(() => usePerformanceObserver({ entryTypes: ['measure'], immediate: true }, callback));
-
-  const entry = createMockPerformanceEntry();
-  const entryList = { getEntries: () => [entry] } as PerformanceObserverEntryList;
-
-  act(() => observerCallback(entryList, {} as PerformanceObserver));
-
-  expect(callback).toHaveBeenCalledOnce();
-  expect(callback).toHaveBeenCalledWith(entryList, expect.any(Object));
-});
-
-it('Should update entries state when performance entries are observed', () => {
   const { result } = renderHook(() =>
-    usePerformanceObserver({ entryTypes: ['measure'], immediate: true })
+    usePerformanceObserver({ entryTypes: ['measure'] }, callback)
   );
 
-  expect(result.current.entries).toEqual([]);
+  const entry = createMockPerformanceEntry();
+  const entryList = {
+    getEntries: () => [entry]
+  } as PerformanceObserverEntryList;
 
-  const entry = createMockPerformanceEntry('paint', 'measure', 0, 50);
-  const entryList = { getEntries: () => [entry] } as PerformanceObserverEntryList;
+  act(() => {
+    result.current.start();
+    trigger.callback(PERFORMANCE_OBSERVER_KEY, entryList, result.current.observer);
+  });
 
-  act(() => observerCallback(entryList, {} as PerformanceObserver));
+  expect(result.current.observer).toBeTruthy();
 
   expect(result.current.entries).toEqual([entry]);
-});
-
-it('Should disconnect observer on unmount', () => {
-  const { unmount } = renderHook(() =>
-    usePerformanceObserver({ entryTypes: ['measure'], immediate: true })
-  );
-
-  unmount();
-
-  expect(mockDisconnect).toHaveBeenCalledOnce();
+  expect(callback).toHaveBeenCalledOnce();
 });
 
 it('Should not disconnect observer on unmount when not started', () => {
   const { unmount } = renderHook(() => usePerformanceObserver({ entryTypes: ['measure'] }));
 
   unmount();
 
-  expect(mockDisconnect).not.toHaveBeenCalled();
-});
-
-it('Should work without callback', () => {
-  const { result } = renderHook(() =>
-    usePerformanceObserver({ entryTypes: ['measure'], immediate: true })
-  );
-
-  const entry = createMockPerformanceEntry();
-  const entryList = { getEntries: () => [entry] } as PerformanceObserverEntryList;
-
-  act(() => observerCallback(entryList, {} as PerformanceObserver));
-
-  expect(result.current.entries).toEqual([entry]);
+  expect(mockPerformanceObserverDisconnect).not.toHaveBeenCalled();
 });
 
-it('Should update entries state with multiple entries', () => {
-  const { result } = renderHook(() =>
+it('Should disconnect observer on unmount', () => {
+  const { unmount } = renderHook(() =>
     usePerformanceObserver({ entryTypes: ['measure'], immediate: true })
   );
 
-  const entries = [
-    createMockPerformanceEntry('first-paint', 'paint', 0, 10),
-    createMockPerformanceEntry('api-call', 'measure', 100, 200),
-    createMockPerformanceEntry('lcp', 'largest-contentful-paint', 50, 150)
-  ];
-  const entryList = { getEntries: () => entries } as PerformanceObserverEntryList;
-
-  act(() => observerCallback(entryList, {} as PerformanceObserver));
+  unmount();
 
-  expect(result.current.entries).toEqual(entries);
-  expect(result.current.entries).toHaveLength(3);
+  expect(mockPerformanceObserverDisconnect).toHaveBeenCalledOnce();
 });

packages/core/src/hooks/usePerformanceObserver/usePerformanceObserver.ts

@@ -28,7 +28,7 @@ export const usePerformanceObserver = (
   const supported = typeof window !== 'undefined' && !!window.PerformanceObserver;
   const [entries, setEntries] = useState<PerformanceEntry[]>([]);
 
-  const observerRef = useRef<PerformanceObserver | null>(null);
+  const observerRef = useRef<PerformanceObserver>(undefined);
   const internalCallback = useRef<PerformanceObserverCallback | null>(callback);
   internalCallback.current = callback;
 
@@ -45,7 +45,7 @@ export const usePerformanceObserver = (
   const stop = () => {
     if (!supported) return;
     observerRef.current?.disconnect();
-    observerRef.current = null;
+    observerRef.current = undefined;
   };
 
   useEffect(() => {
@@ -57,5 +57,5 @@ export const usePerformanceObserver = (
     };
   }, []);
 
-  return { supported, entries, start, stop };
+  return { supported, entries, start, stop, observer: observerRef.current };
 };