@chromahq/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+interface Bridge {
+    send: <Req = unknown, Res = unknown>(key: string, payload?: Req) => Promise<Res>;
+    isConnected: boolean;
+}
+interface BridgeContextValue {
+    bridge: Bridge | null;
+    status: ConnectionStatus;
+    error: Error | null;
+    reconnect: () => void;
+}
+interface Props {
+    children: React.ReactNode;
+    retryAfter?: number;
+    maxRetries?: number;
+    onConnectionChange?: (status: ConnectionStatus) => void;
+    onError?: (error: Error) => void;
+}
+declare const BridgeProvider: React.FC<Props>;
+
+/**
+ * Custom hook to access the bridge context.
+ * @returns The bridge context value.
+ */
+declare const useBridge: () => BridgeContextValue;
+
+/**
+ * Custom hook to send a query to the bridge and return the response.
+ * @param key
+ * @param payload
+ * @returns { data: Res | undefined, loading: boolean, error: unknown }
+ */
+declare function useBridgeQuery<Res = unknown>(key: string, payload?: any): {
+    data: Res | undefined;
+    loading: boolean;
+    error: unknown;
+};
+
+export { BridgeProvider, useBridge, useBridgeQuery };

package/dist/index.js

@@ -0,0 +1,247 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+
+const BridgeContext = createContext(null);
+const BridgeProvider = ({
+  children,
+  retryAfter = 1500,
+  maxRetries = 5,
+  onConnectionChange,
+  onError
+}) => {
+  const [bridge, setBridge] = useState(null);
+  const [status, setStatus] = useState("connecting");
+  const [error, setError] = useState(null);
+  const portRef = useRef(null);
+  const pendingRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const uidRef = useRef(0);
+  const reconnectTimeoutRef = useRef(null);
+  const retryCountRef = useRef(0);
+  const isConnectingRef = useRef(false);
+  const errorCheckIntervalRef = useRef(null);
+  const updateStatus = useCallback(
+    (newStatus) => {
+      setStatus(newStatus);
+      onConnectionChange?.(newStatus);
+    },
+    [onConnectionChange]
+  );
+  const handleError = useCallback(
+    (err) => {
+      setError(err);
+      onError?.(err);
+      updateStatus("error");
+    },
+    [onError, updateStatus]
+  );
+  const cleanup = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (errorCheckIntervalRef.current) {
+      clearInterval(errorCheckIntervalRef.current);
+      errorCheckIntervalRef.current = null;
+    }
+    if (portRef.current) {
+      try {
+        portRef.current.disconnect();
+      } catch (e) {
+      }
+      portRef.current = null;
+    }
+    pendingRef.current.forEach(({ reject }) => {
+      reject(new Error("Bridge disconnected"));
+    });
+    pendingRef.current.clear();
+    setBridge(null);
+    isConnectingRef.current = false;
+  }, []);
+  const connect = useCallback(() => {
+    if (isConnectingRef.current || retryCountRef.current >= maxRetries) {
+      console.warn("[Bridge] Already connecting or max retries reached");
+      return;
+    }
+    isConnectingRef.current = true;
+    cleanup();
+    if (!chrome?.runtime?.connect) {
+      handleError(new Error("Chrome runtime not available"));
+      return;
+    }
+    try {
+      const port = chrome.runtime.connect({ name: "chroma-bridge" });
+      if (chrome.runtime.lastError) {
+        throw new Error(chrome.runtime.lastError.message || "Failed to connect to extension");
+      }
+      portRef.current = port;
+      let errorCheckCount = 0;
+      const maxErrorChecks = 10;
+      errorCheckIntervalRef.current = setInterval(() => {
+        errorCheckCount++;
+        if (chrome.runtime.lastError) {
+          const errorMessage = chrome.runtime.lastError.message;
+          console.warn("[Bridge] Runtime error detected:", errorMessage);
+          chrome.runtime.lastError;
+          if (errorCheckIntervalRef.current) {
+            clearInterval(errorCheckIntervalRef.current);
+            errorCheckIntervalRef.current = null;
+          }
+          if (errorMessage?.includes("Receiving end does not exist")) {
+            console.warn("[Bridge] Background script not ready, will retry connection");
+            cleanup();
+            isConnectingRef.current = false;
+            if (retryCountRef.current < maxRetries) {
+              retryCountRef.current++;
+              const delay = retryAfter * Math.pow(2, retryCountRef.current - 1);
+              reconnectTimeoutRef.current = setTimeout(connect, delay);
+            }
+          }
+        }
+        if (errorCheckCount >= maxErrorChecks) {
+          if (errorCheckIntervalRef.current) {
+            clearInterval(errorCheckIntervalRef.current);
+            errorCheckIntervalRef.current = null;
+          }
+        }
+      }, 100);
+      port.onMessage.addListener((msg) => {
+        if (msg.id && pendingRef.current.has(msg.id)) {
+          const { resolve } = pendingRef.current.get(msg.id);
+          resolve(msg.data);
+          pendingRef.current.delete(msg.id);
+        }
+      });
+      port.onDisconnect.addListener(() => {
+        console.warn("[Bridge] disconnected");
+        isConnectingRef.current = false;
+        if (chrome.runtime.lastError) {
+          handleError(
+            new Error(chrome.runtime.lastError.message || "Port disconnected with error")
+          );
+          chrome.runtime.lastError;
+        } else {
+          updateStatus("disconnected");
+        }
+        cleanup();
+        if (retryCountRef.current < maxRetries) {
+          retryCountRef.current++;
+          const delay = retryAfter * Math.pow(2, retryCountRef.current - 1);
+          reconnectTimeoutRef.current = setTimeout(connect, delay);
+        }
+      });
+      const bridgeInstance = {
+        send: (key, payload) => {
+          return new Promise((resolve, reject) => {
+            if (!portRef.current) {
+              reject(new Error("Bridge disconnected"));
+              return;
+            }
+            const id = `msg${uidRef.current++}`;
+            pendingRef.current.set(id, { resolve, reject });
+            const timeout = setTimeout(() => {
+              if (pendingRef.current.has(id)) {
+                pendingRef.current.delete(id);
+                reject(new Error("Request timeout"));
+              }
+            }, 1e4);
+            try {
+              portRef.current.postMessage({ id, key, payload });
+              setTimeout(() => {
+                if (chrome.runtime.lastError) {
+                  const errorMessage = chrome.runtime.lastError.message;
+                  console.warn("[Bridge] Async runtime error after postMessage:", errorMessage);
+                  chrome.runtime.lastError;
+                  if (pendingRef.current.has(id)) {
+                    clearTimeout(timeout);
+                    pendingRef.current.delete(id);
+                    reject(new Error(errorMessage || "Async send failed"));
+                  }
+                }
+              }, 0);
+              if (chrome.runtime.lastError) {
+                throw new Error(chrome.runtime.lastError.message || "Failed to send message");
+              }
+            } catch (e) {
+              clearTimeout(timeout);
+              pendingRef.current.delete(id);
+              if (chrome.runtime.lastError) {
+                console.warn(
+                  "[Bridge] Runtime error during postMessage:",
+                  chrome.runtime.lastError.message
+                );
+                chrome.runtime.lastError;
+              }
+              reject(e instanceof Error ? e : new Error("Send failed"));
+            }
+          });
+        },
+        isConnected: true
+      };
+      setBridge(bridgeInstance);
+      updateStatus("connected");
+      setError(null);
+      retryCountRef.current = 0;
+      isConnectingRef.current = false;
+    } catch (e) {
+      isConnectingRef.current = false;
+      const error2 = e instanceof Error ? e : new Error("Connection failed");
+      handleError(error2);
+      if (retryCountRef.current < maxRetries) {
+        retryCountRef.current++;
+        reconnectTimeoutRef.current = setTimeout(connect, retryAfter);
+      }
+    }
+  }, [retryAfter, maxRetries, handleError, updateStatus, cleanup]);
+  const reconnect = useCallback(() => {
+    retryCountRef.current = 0;
+    updateStatus("connecting");
+    connect();
+  }, [connect, updateStatus]);
+  useEffect(() => {
+    connect();
+    return cleanup;
+  }, [connect, cleanup]);
+  const contextValue = useMemo(
+    () => ({
+      bridge,
+      status,
+      error,
+      reconnect
+    }),
+    [bridge, status, error, reconnect]
+  );
+  return /* @__PURE__ */ jsx(BridgeContext.Provider, { value: contextValue, children });
+};
+
+const useBridge = () => {
+  const context = useContext(BridgeContext);
+  if (!context) {
+    throw new Error("useBridge must be used inside <BridgeProvider>");
+  }
+  return context;
+};
+
+function useBridgeQuery(key, payload) {
+  const { bridge } = useBridge();
+  const [data, setData] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    if (!bridge) {
+      setError(new Error("Bridge is not initialized"));
+      setLoading(false);
+      return;
+    }
+    bridge.send(key, payload).then((res) => mounted && setData(res)).catch((e) => mounted && setError(e)).finally(() => mounted && setLoading(false));
+    return () => {
+      mounted = false;
+    };
+  }, [key, JSON.stringify(payload)]);
+  return { data, loading, error };
+}
+
+export { BridgeProvider, useBridge, useBridgeQuery };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@chromahq/react",
+  "version": "0.0.1",
+  "description": "React bindings for the Chroma Chrome extension framework",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chromaHQ/chroma.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "chrome-extension",
+    "browser-extension",
+    "react",
+    "hooks",
+    "typescript"
+  ],
+  "author": "Chroma Team",
+  "license": "MIT",
+  "homepage": "https://github.com/chromaHQ/chroma#readme",
+  "bugs": {
+    "url": "https://github.com/chromaHQ/chroma/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.1.3",
+    "@types/react": "^18.2.7",
+    "rollup": "^4.8.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.0",
+    "typescript": "^5.6.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c --watch"
+  }
+}