crx-rpc 2.1.1 → 2.2.0

package/README.md

@@ -116,7 +116,7 @@ import { RuntimeRPCClient } from 'crx-rpc'
 import { IMathService } from './api'
 
 const client = new RuntimeRPCClient()
-const mathService = client.createRPCService(IMathService)
+const mathService = await client.createRPCService(IMathService)
 
 await mathService.add(1, 2)
 ```
@@ -128,7 +128,7 @@ import { WebRPCClient } from 'crx-rpc'
 import { IMathService } from './api'
 
 const client = new WebRPCClient()
-const mathService = client.createRPCService(IMathService)
+const mathService = await client.createRPCService(IMathService)
 
 await mathService.add(1, 2)
 ```
@@ -149,7 +149,7 @@ import { IPageService } from './api'
 
 const tabId = 123 // Target Tab ID
 const client = new TabRPCClient(tabId)
-const pageService = client.createRPCService(IPageService)
+const pageService = await client.createRPCService(IPageService)
 
 await pageService.doSomething()
 ```

package/README.zh-CN.md

@@ -116,7 +116,7 @@ import { RuntimeRPCClient } from 'crx-rpc'
 import { IMathService } from './api'
 
 const client = new RuntimeRPCClient()
-const mathService = client.createRPCService(IMathService)
+const mathService = await client.createRPCService(IMathService)
 
 await mathService.add(1, 2)
 ```
@@ -128,7 +128,7 @@ import { WebRPCClient } from 'crx-rpc'
 import { IMathService } from './api'
 
 const client = new WebRPCClient()
-const mathService = client.createRPCService(IMathService)
+const mathService = await client.createRPCService(IMathService)
 
 await mathService.add(1, 2)
 ```
@@ -149,7 +149,7 @@ import { IPageService } from './api'
 
 const tabId = 123 // 目标 Tab ID
 const client = new TabRPCClient(tabId)
-const pageService = client.createRPCService(IPageService)
+const pageService = await client.createRPCService(IPageService)
 
 await pageService.doSomething()
 ```

package/dist/background.d.ts

@@ -13,8 +13,10 @@ export declare class RemoteSubject<T> extends Disposable implements SubjectLike<
     private initialValue;
     private manager;
     private completed;
+    private _value;
     get finalKey(): string;
     constructor(identifier: Identifier<T>, _key: string, initialValue: T, manager: RemoteSubjectManager);
+    get value(): T;
     next(value: T): void;
     complete(): void;
     subscribe(): () => void;
@@ -22,11 +24,8 @@ export declare class RemoteSubject<T> extends Disposable implements SubjectLike<
 }
 export declare class RemoteSubjectManager extends Disposable {
     private subjects;
-    private pendingSubscriptions;
-    private activeSenders;
     constructor();
     private handleSubscription;
-    private handleUnsubscription;
     sendMessage(message: RpcObservableUpdateMessage<any>): void;
     createSubject<T>(id: Identifier<T>, key: string, initialValue: T): RemoteSubject<T>;
     getSubject<T>(key: string): RemoteSubject<T> | undefined;

package/dist/background.js

@@ -1,4 +1,4 @@
-import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_RESPONSE_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, UNSUBSCRIBE_OBSERVABLE, } from './const';
+import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_PING, RPC_PONG, RPC_RESPONSE_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, } from './const';
 import { Disposable } from './disposable';
 export class BackgroundRPCHost extends Disposable {
     log;
@@ -7,10 +7,23 @@ export class BackgroundRPCHost extends Disposable {
         super();
         this.log = log;
         const handler = (msg, sender, sendResponseCallback) => {
-            if (msg.type !== RPC_EVENT_NAME)
+            if (msg.type !== RPC_EVENT_NAME && msg.type !== RPC_PING)
                 return false;
             const tabId = sender.tab?.id;
             const isFromRuntime = !tabId; // sidepanel/popup 没有 tab id
+            if (msg.type === RPC_PING) {
+                const pong = {
+                    type: RPC_PONG,
+                    from: 'background',
+                };
+                if (isFromRuntime) {
+                    chrome.runtime.sendMessage(pong).catch(() => { });
+                }
+                else {
+                    chrome.tabs.sendMessage(tabId, pong);
+                }
+                return true;
+            }
             // 根据来源选择不同的响应方式
             const sendResponse = (response) => {
                 const fullResponse = {
@@ -93,8 +106,14 @@ export class BackgroundRPCHost extends Disposable {
                 sendResponse(resp);
                 return true;
             }
+            // 构建 RPC 上下文，自动注入到 service 方法的最后一个参数
+            const rpcContext = {
+                tabId,
+                sender,
+                isFromRuntime,
+            };
             Promise.resolve()
-                .then(() => serviceInstance[method](...args))
+                .then(() => serviceInstance[method](...args, rpcContext))
                 .then(result => {
                 if (this.log) {
                     console.log(`%c RPC %c Success: %c ${service} %c.%c ${method} %c [%c ${id} %c]`, 'background: #6b46c1; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', // [RPC] 紫色背景
@@ -163,6 +182,7 @@ export class RemoteSubject extends Disposable {
     initialValue;
     manager;
     completed = false;
+    _value;
     get finalKey() {
         return `${this.identifier.key}-${this._key}`;
     }
@@ -172,10 +192,15 @@ export class RemoteSubject extends Disposable {
         this._key = _key;
         this.initialValue = initialValue;
         this.manager = manager;
+        this._value = initialValue;
+    }
+    get value() {
+        return this._value;
     }
     next(value) {
         if (this.completed)
             return;
+        this._value = value;
         this.manager.sendMessage({
             operation: 'next',
             key: this.finalKey,
@@ -202,122 +227,48 @@ export class RemoteSubject extends Disposable {
 }
 export class RemoteSubjectManager extends Disposable {
     subjects = new Map();
-    pendingSubscriptions = new Map(); // key -> senderIds
-    activeSenders = new Map(); // key -> senderIds
     constructor() {
         super();
         const handleMessage = (msg, sender) => {
             if (msg.type === SUBSCRIBABLE_OBSERVABLE) {
-                const senderId = sender.tab?.id;
-                if (!senderId) {
-                    console.warn('Received RPC request from unknown sender, ignoring.', msg);
-                    return;
-                }
                 const { key } = msg;
-                this.handleSubscription(key, senderId);
-            }
-            if (msg.type === UNSUBSCRIBE_OBSERVABLE) {
-                const senderId = sender.tab?.id;
-                if (!senderId) {
-                    console.warn('Received RPC request from unknown sender, ignoring.', msg);
-                    return;
-                }
-                const { key } = msg;
-                this.handleUnsubscription(key, senderId);
+                this.handleSubscription(key);
             }
         };
         chrome.runtime.onMessage.addListener(handleMessage);
         this.disposeWithMe(() => {
             chrome.runtime.onMessage.removeListener(handleMessage);
         });
-        const handleTabRemove = (tabId) => {
-            // 清理该 tab 的所有订阅
-            this.activeSenders.forEach(senders => {
-                senders.delete(tabId);
-            });
-            this.pendingSubscriptions.forEach(senders => {
-                senders.delete(tabId);
-            });
-        };
-        chrome.tabs.onRemoved.addListener(handleTabRemove);
-        this.disposeWithMe(() => {
-            chrome.tabs.onRemoved.removeListener(handleTabRemove);
-        });
     }
-    handleSubscription(key, senderId) {
+    handleSubscription(key) {
         const subject = this.subjects.get(key);
         if (subject) {
-            // Subject 已存在，直接处理订阅
-            if (!this.activeSenders.has(key)) {
-                this.activeSenders.set(key, new Set());
-            }
-            this.activeSenders.get(key).add(senderId);
-            // 发送初始值
-            chrome.tabs.sendMessage(senderId, {
+            // 发送初始值 - 使用广播方式，这样订阅者的 onMessage 才能收到
+            chrome.runtime
+                .sendMessage({
                 operation: 'next',
                 key,
                 value: subject.getInitialValue(),
+                type: OBSERVABLE_EVENT,
+            })
+                .catch(() => {
+                // 忽略错误，可能没有监听者
             });
         }
-        else {
-            // Subject 尚未创建，缓存到待处理队列
-            if (!this.pendingSubscriptions.has(key)) {
-                this.pendingSubscriptions.set(key, new Set());
-            }
-            this.pendingSubscriptions.get(key).add(senderId);
-        }
-    }
-    handleUnsubscription(key, senderId) {
-        // 从活跃订阅中移除
-        const activeSenders = this.activeSenders.get(key);
-        if (activeSenders) {
-            activeSenders.delete(senderId);
-            if (activeSenders.size === 0) {
-                this.activeSenders.delete(key);
-            }
-        }
-        // 从待处理队列中移除
-        const pendingSenders = this.pendingSubscriptions.get(key);
-        if (pendingSenders) {
-            pendingSenders.delete(senderId);
-            if (pendingSenders.size === 0) {
-                this.pendingSubscriptions.delete(key);
-            }
-        }
     }
     sendMessage(message) {
-        const { key } = message;
-        // 发送到所有订阅的 tabs
-        const senders = this.activeSenders.get(key);
-        if (senders) {
-            senders.forEach(senderId => {
-                chrome.tabs.sendMessage(senderId, message);
-            });
-        }
+        chrome.runtime.sendMessage(message);
     }
     createSubject(id, key, initialValue) {
         const subject = new RemoteSubject(id, key, initialValue, this);
-        this.subjects.set(key, subject);
-        // 处理待处理的订阅
-        const pendingSenders = this.pendingSubscriptions.get(key);
-        if (pendingSenders && pendingSenders.size > 0) {
-            if (!this.activeSenders.has(key)) {
-                this.activeSenders.set(key, new Set());
-            }
-            const activeSenders = this.activeSenders.get(key);
-            // 将待处理的订阅转移到活跃订阅
-            pendingSenders.forEach(senderId => {
-                activeSenders.add(senderId);
-                // 发送初始值
-                chrome.tabs.sendMessage(senderId, {
-                    operation: 'next',
-                    key,
-                    value: initialValue,
-                });
-            });
-            // 清空待处理队列
-            this.pendingSubscriptions.delete(key);
-        }
+        // 使用 finalKey 作为存储 key，与客户端订阅时发送的 key 保持一致
+        this.subjects.set(subject.finalKey, subject);
+        chrome.runtime.sendMessage({
+            operation: 'next',
+            key: subject.finalKey,
+            value: initialValue,
+            type: OBSERVABLE_EVENT,
+        });
         return subject;
     }
     getSubject(key) {
@@ -328,9 +279,6 @@ export class RemoteSubjectManager extends Disposable {
         if (subject) {
             subject.dispose();
             this.subjects.delete(key);
-            // 清理相关的订阅信息
-            this.activeSenders.delete(key);
-            this.pendingSubscriptions.delete(key);
         }
     }
 }

package/dist/client.d.ts

@@ -12,7 +12,8 @@ export declare class RPCClient extends Disposable {
     private pending;
     constructor(messageAdapter: IMessageAdapter, from: RpcFrom);
     call<T = any>(service: string, method: string, to: RpcTo, args: any[]): Promise<T>;
-    createRPCService<T>(serviceIdentifier: Identifier<T>): ServiceProxy<T>;
+    private waitReady;
+    createRPCService<T>(serviceIdentifier: Identifier<T>): Promise<ServiceProxy<T>>;
 }
 export declare class BaseObservable<T> extends Disposable {
     private identifier;

package/dist/client.js

@@ -1,4 +1,4 @@
-import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_RESPONSE_EVENT_NAME, UNSUBSCRIBE_OBSERVABLE, } from './const';
+import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_PING, RPC_PONG, RPC_RESPONSE_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, UNSUBSCRIBE_OBSERVABLE, } from './const';
 import { Disposable } from './disposable';
 import { randomId } from './tool';
 export class RPCClient extends Disposable {
@@ -41,11 +41,47 @@ export class RPCClient extends Disposable {
             this.messageAdapter.sendMessage(RPC_EVENT_NAME, requestParam);
         });
     }
-    createRPCService(serviceIdentifier) {
+    async waitReady(timeout = 10000) {
+        const startTime = Date.now();
+        const check = async () => {
+            return new Promise(resolve => {
+                let resolved = false;
+                const timer = setTimeout(() => {
+                    if (!resolved) {
+                        resolved = true;
+                        resolve(false);
+                    }
+                }, 1000);
+                const handler = (msg) => {
+                    if (msg.type === RPC_PONG) {
+                        if (!resolved) {
+                            resolved = true;
+                            resolve(true);
+                        }
+                        dispose();
+                    }
+                };
+                const dispose = this.messageAdapter.onMessage(RPC_PONG, handler);
+                this.messageAdapter.sendMessage(RPC_PING, { type: RPC_PING });
+            });
+        };
+        while (Date.now() - startTime < timeout) {
+            const ready = await check();
+            if (ready)
+                return;
+            await new Promise(r => setTimeout(r, 500));
+        }
+        throw new Error('RPC service not ready (timeout)');
+    }
+    async createRPCService(serviceIdentifier) {
         const serviceKey = serviceIdentifier.key;
+        await this.waitReady();
         // 创建代理对象，拦截方法调用
         return new Proxy({}, {
             get: (target, prop) => {
+                if (prop === 'then') {
+                    return undefined;
+                }
                 if (typeof prop === 'string') {
                     // 返回一个代理函数
                     return (...args) => {
@@ -74,7 +110,8 @@ export class BaseObservable extends Disposable {
         this._callback = _callback;
         this._adapter = _adapter;
         this.disposeWithMe(this._adapter.onMessage(OBSERVABLE_EVENT, (event) => {
-            const msg = event.detail;
+            // 支持两种格式：直接消息对象（runtime adapter）或 CustomEvent detail（web adapter）
+            const msg = (event.detail ?? event);
             if (msg.key !== this._finalKey)
                 return;
             if (msg.operation === 'next' && !this.completed && msg.value) {
@@ -85,7 +122,7 @@ export class BaseObservable extends Disposable {
                 this.listeners.clear();
             }
         }));
-        this._adapter.sendMessage(OBSERVABLE_EVENT, { key: this._finalKey });
+        this._adapter.sendMessage(SUBSCRIBABLE_OBSERVABLE, { key: this._finalKey });
     }
     unsubscribe() {
         this._adapter.sendMessage(UNSUBSCRIBE_OBSERVABLE, { key: this._finalKey });

package/dist/const.d.ts

@@ -1,4 +1,6 @@
 export declare const RPC_EVENT_NAME = "__RPC_CALL_CLIPSHEET_AWESOME__";
+export declare const RPC_PING = "__RPC_PING__";
+export declare const RPC_PONG = "__RPC_PONG__";
 export declare const RPC_RESPONSE_EVENT_NAME = "__RPC_RESPONSE_CLIPSHEET_AWESOME__";
 export declare const SUBSCRIBABLE_OBSERVABLE = "__SUBSCRIBABLE_OBSERVABLE__";
 export declare const UNSUBSCRIBE_OBSERVABLE = "__UNSUBSCRIBE_OBSERVABLE__";

package/dist/const.js

@@ -1,4 +1,6 @@
 export const RPC_EVENT_NAME = '__RPC_CALL_CLIPSHEET_AWESOME__';
+export const RPC_PING = '__RPC_PING__';
+export const RPC_PONG = '__RPC_PONG__';
 export const RPC_RESPONSE_EVENT_NAME = '__RPC_RESPONSE_CLIPSHEET_AWESOME__';
 export const SUBSCRIBABLE_OBSERVABLE = '__SUBSCRIBABLE_OBSERVABLE__';
 export const UNSUBSCRIBE_OBSERVABLE = '__UNSUBSCRIBE_OBSERVABLE__';

package/dist/content.js

@@ -1,8 +1,8 @@
-import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_RESPONSE_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, UNSUBSCRIBE_OBSERVABLE, } from './const';
+import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_PING, RPC_PONG, RPC_RESPONSE_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, UNSUBSCRIBE_OBSERVABLE, } from './const';
 import { Disposable } from './disposable';
 import { runtimeChannel } from './adapter';
 const WEB_TO_BACKGROUND = [RPC_EVENT_NAME, SUBSCRIBABLE_OBSERVABLE, UNSUBSCRIBE_OBSERVABLE];
-const BACKGROUND_TO_WEB = [RPC_RESPONSE_EVENT_NAME, OBSERVABLE_EVENT];
+const BACKGROUND_TO_WEB = [RPC_RESPONSE_EVENT_NAME, OBSERVABLE_EVENT, RPC_PONG];
 function getRuntimeId() {
     const browserNs = globalThis?.browser;
     if (browserNs?.runtime?.id) {
@@ -50,6 +50,15 @@ export class ContentRPCHost extends Disposable {
         super();
         this.log = log;
         const handler = (msg, sender) => {
+            if (msg.type === RPC_PING) {
+                runtimeChannel
+                    .sendMessage({
+                    type: RPC_PONG,
+                    from: 'content',
+                })
+                    .catch(() => { });
+                return;
+            }
             if (msg.type !== RPC_EVENT_NAME)
                 return;
             if (this.runtimeId && sender.id && sender.id !== this.runtimeId)

package/dist/hooks/useRPCService.d.ts

@@ -0,0 +1,47 @@
+import { type Identifier } from '../id';
+type FunctionArgs<T> = T extends (...args: infer A) => any ? A : never;
+type FunctionReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
+type ServiceProxy<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? (...args: FunctionArgs<T[K]>) => Promise<Awaited<FunctionReturnType<T[K]>>> : never;
+};
+interface UseRPCServiceOptions {
+    /** 是否在 tabId 变化时自动创建新的服务实例 */
+    autoRecreate?: boolean;
+    tabId?: number;
+}
+interface UseRPCServiceResult<T> {
+    /** RPC 服务代理实例，可以直接调用服务方法 */
+    service: ServiceProxy<T> | null;
+    /** 当前活动 tab 的 ID */
+    tabId: number | null;
+    /** 是否正在加载/初始化 */
+    isLoading: boolean;
+    /** 错误信息 */
+    error: Error | null;
+    /** 手动刷新服务实例 */
+    refresh: () => Promise<void>;
+    /** 销毁服务实例 */
+    dispose: () => void;
+}
+/**
+ * 用于创建和管理 RPC 服务实例的 React Hook
+ *
+ * @example
+ * ```tsx
+ * // 基础用法 - 使用统一的 TableService
+ * const { service, isLoading, error } = useRPCService(ITableService)
+ *
+ * const handleDetect = async () => {
+ *   if (!service) return
+ *   const result = await service.detectTableLikeElements()
+ *   console.log(result)
+ * }
+ *
+ * // TableService 包含所有表格相关功能
+ * const handleHighlight = useCallback(async (selector: string, itemSelector: string) => {
+ *   await service?.highlightTable(selector, itemSelector)
+ * }, [service])
+ * ```
+ */
+export declare function useRPCService<T>(serviceIdentifier: Identifier<T>, options?: UseRPCServiceOptions): UseRPCServiceResult<T>;
+export default useRPCService;

package/dist/hooks/useRPCService.js

@@ -0,0 +1,97 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { TabRPCClient } from '../adapter/tab';
+/**
+ * 用于创建和管理 RPC 服务实例的 React Hook
+ *
+ * @example
+ * ```tsx
+ * // 基础用法 - 使用统一的 TableService
+ * const { service, isLoading, error } = useRPCService(ITableService)
+ *
+ * const handleDetect = async () => {
+ *   if (!service) return
+ *   const result = await service.detectTableLikeElements()
+ *   console.log(result)
+ * }
+ *
+ * // TableService 包含所有表格相关功能
+ * const handleHighlight = useCallback(async (selector: string, itemSelector: string) => {
+ *   await service?.highlightTable(selector, itemSelector)
+ * }, [service])
+ * ```
+ */
+export function useRPCService(serviceIdentifier, options = {}) {
+    const { autoRecreate = true, tabId: providedTabId } = options;
+    const [service, setService] = useState(null);
+    const [tabId, setTabId] = useState(providedTabId ?? null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const clientRef = useRef(null);
+    const currentTabIdRef = useRef(null);
+    const createService = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            // 清理旧的 client
+            if (clientRef.current) {
+                clientRef.current.dispose();
+                clientRef.current = null;
+            }
+            // 获取当前活动 tab
+            const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+            if (!tab.id) {
+                throw new Error('No active tab found');
+            }
+            setTabId(tab.id);
+            currentTabIdRef.current = tab.id;
+            // 创建 RPC client 和服务
+            const tabClient = new TabRPCClient(tab.id);
+            clientRef.current = tabClient;
+            const rpcService = await tabClient.createRPCService(serviceIdentifier);
+            setService(rpcService);
+        }
+        catch (err) {
+            console.error('[useRPCService] Failed to create service:', err);
+            setError(err instanceof Error ? err : new Error(String(err)));
+            setService(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [serviceIdentifier]);
+    const dispose = useCallback(() => {
+        if (clientRef.current) {
+            clientRef.current.dispose();
+            clientRef.current = null;
+        }
+        setService(null);
+        setTabId(null);
+    }, []);
+    // 初始化创建服务
+    useEffect(() => {
+        createService();
+        if (providedTabId) {
+            return;
+        }
+        // 监听 tab 变化
+        const handleTabActivated = (activeInfo) => {
+            if (autoRecreate && activeInfo.tabId !== currentTabIdRef.current) {
+                createService();
+            }
+        };
+        chrome.tabs.onActivated.addListener(handleTabActivated);
+        return () => {
+            chrome.tabs.onActivated.removeListener(handleTabActivated);
+            dispose();
+        };
+    }, [createService, autoRecreate, dispose, providedTabId]);
+    return {
+        service,
+        tabId,
+        isLoading,
+        error,
+        refresh: createService,
+        dispose,
+    };
+}
+export default useRPCService;

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './id';
 export * from './adapter';
 export * from './content';
 export * from './background';
+export * from './hooks/useRPCService';

package/dist/index.js

@@ -3,3 +3,4 @@ export * from './id';
 export * from './adapter';
 export * from './content';
 export * from './background';
+export * from './hooks/useRPCService';

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="chrome" />
 export type RpcTo = 'content' | 'background';
 export type RpcFrom = 'runtime' | 'web' | 'wxt-page';
 export interface RpcRequest {
@@ -46,3 +47,15 @@ export interface IMessageAdapter {
 export interface IDisposable {
     dispose(): void;
 }
+/**
+ * RPC 调用上下文，包含调用者信息
+ * Service 方法可以通过最后一个参数获取此上下文
+ */
+export interface RpcContext {
+    /** 调用来源的 tab ID，如果来自 sidepanel/popup 则为 undefined */
+    tabId?: number;
+    /** 完整的 sender 信息 */
+    sender: chrome.runtime.MessageSender;
+    /** 是否来自 runtime（sidepanel/popup），而非 content script */
+    isFromRuntime: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crx-rpc",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A lightweight RPC framework for Chrome Extension (background <-> content <-> web)",
   "repository": {
     "type": "git",
@@ -21,11 +21,17 @@
     "build": "tsc",
     "watch": "tsc -w",
     "clean": "rm -rf dist",
-    "postinstall": "tsc"
+    "postinstall": "tsc",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.270",
     "@types/node": "^24.3.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
     "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
   }
 }