@crediball/react 0.3.6 → 0.3.7

package/dist/fetchWatcher.d.ts

@@ -1,18 +1,24 @@
 /**
- * Module-level singleton that patches window.fetch once and fans out to all
- * registered listeners (from CrediballProvider and/or usePaywall). Only one
- * fetch patch exists at a time regardless of how many components subscribe.
- * Reference-counted: the patch is removed when the last listener unsubscribes.
+ * Patches window.fetch at module-import time — before any React component
+ * mounts and before any AI SDK can capture the fetch reference. This is the
+ * key difference from installing the patch in a useEffect: by the time a
+ * useEffect runs, the Vercel AI SDK (and others) may have already resolved
+ * their fetch reference and bypass the patch entirely.
  *
- * Handles two credit-error surfaces:
- *   1. HTTP 402 — regular JSON responses (non-streaming routes).
- *   2. HTTP 200 text/event-stream or ndjson — streaming routes where the error
- *      arrives as a chunk in the stream body rather than an HTTP status code.
+ * Handles three credit-error surfaces:
+ *   1. HTTP 402 with { code: "insufficient_credits" } — regular JSON routes.
+ *   2. HTTP 200 streaming body containing "insufficient_credits" — SSE, ndjson,
+ *      or Vercel AI SDK data-stream (text/plain) routes.
+ *   3. Manual call to notifyInsufficientCredits() from any error handler.
  */
 type Listener = () => void;
 /**
  * Subscribe to insufficient-credits events detected in window.fetch.
- * Returns an unsubscribe function — call it in your useEffect cleanup.
+ * Returns an unsubscribe function for use in useEffect cleanup.
+ *
+ * The fetch patch is installed at module load time regardless of whether
+ * anyone calls this function. This exists for components that need a direct
+ * callback rather than the global DOM event.
  */
 export declare function subscribeFetchWatcher(listener: Listener): () => void;
 export {};

package/dist/fetchWatcher.js

@@ -1,25 +1,28 @@
 /**
- * Module-level singleton that patches window.fetch once and fans out to all
- * registered listeners (from CrediballProvider and/or usePaywall). Only one
- * fetch patch exists at a time regardless of how many components subscribe.
- * Reference-counted: the patch is removed when the last listener unsubscribes.
+ * Patches window.fetch at module-import time — before any React component
+ * mounts and before any AI SDK can capture the fetch reference. This is the
+ * key difference from installing the patch in a useEffect: by the time a
+ * useEffect runs, the Vercel AI SDK (and others) may have already resolved
+ * their fetch reference and bypass the patch entirely.
  *
- * Handles two credit-error surfaces:
- *   1. HTTP 402 — regular JSON responses (non-streaming routes).
- *   2. HTTP 200 text/event-stream or ndjson — streaming routes where the error
- *      arrives as a chunk in the stream body rather than an HTTP status code.
+ * Handles three credit-error surfaces:
+ *   1. HTTP 402 with { code: "insufficient_credits" } — regular JSON routes.
+ *   2. HTTP 200 streaming body containing "insufficient_credits" — SSE, ndjson,
+ *      or Vercel AI SDK data-stream (text/plain) routes.
+ *   3. Manual call to notifyInsufficientCredits() from any error handler.
  */
 import { notifyInsufficientCredits } from "./creditEvent";
-let _original = null;
 const _listeners = new Set();
 function fire() {
-    // Dispatch the global event so ALL mounted paywall instances react,
-    // plus any manual subscribeInsufficientCredits() listeners.
     notifyInsufficientCredits();
-    // Also call per-instance listeners registered via subscribeFetchWatcher
-    // (kept for backwards compatibility with direct watcher subscribers).
     _listeners.forEach((fn) => fn());
 }
+function isStreamingContentType(ct) {
+    return (ct.includes("text/event-stream") ||
+        ct.includes("ndjson") ||
+        // Vercel AI SDK uses text/plain for its data-stream protocol
+        ct.includes("text/plain"));
+}
 /**
  * Tee the streaming response body and scan each chunk for the
  * `insufficient_credits` signal. Returns a new Response whose body is the
@@ -54,10 +57,11 @@ function watchStream(res) {
         headers: res.headers,
     });
 }
-function install() {
-    if (typeof window === "undefined" || _original !== null)
-        return;
-    _original = window.fetch;
+// ── Install patch immediately at module load time ─────────────────────────
+// Running here (not in a useEffect) ensures the patch is in place before any
+// SDK or framework code captures the window.fetch reference.
+if (typeof window !== "undefined") {
+    const _original = window.fetch;
     window.fetch = async (...args) => {
         const res = await _original(...args);
         if (res.status === 402) {
@@ -72,43 +76,31 @@ function install() {
                 }
             })
                 .catch(() => {
-                // Non-JSON 402 — fire anyway; a 402 from the app's own API route is
-                // almost certainly a credit shortage. Set watchFetch=false and call
-                // trigger() manually if your app uses 402 for other purposes.
+                // Non-JSON 402 — fire anyway.
                 fire();
             });
             return res;
         }
-        // Watch streaming responses for embedded credit errors (HTTP 200 with
-        // text/event-stream or ndjson — the common AI streaming pattern).
         if (res.body) {
             const ct = res.headers.get("content-type") ?? "";
-            if (ct.includes("text/event-stream") || ct.includes("ndjson")) {
+            if (isStreamingContentType(ct)) {
                 return watchStream(res);
             }
         }
         return res;
     };
 }
-function uninstall() {
-    if (typeof window === "undefined" || _original === null)
-        return;
-    window.fetch = _original;
-    _original = null;
-}
 /**
  * Subscribe to insufficient-credits events detected in window.fetch.
- * Returns an unsubscribe function — call it in your useEffect cleanup.
+ * Returns an unsubscribe function for use in useEffect cleanup.
+ *
+ * The fetch patch is installed at module load time regardless of whether
+ * anyone calls this function. This exists for components that need a direct
+ * callback rather than the global DOM event.
  */
 export function subscribeFetchWatcher(listener) {
     if (typeof window === "undefined")
         return () => { };
-    if (_listeners.size === 0)
-        install();
     _listeners.add(listener);
-    return () => {
-        _listeners.delete(listener);
-        if (_listeners.size === 0)
-            uninstall();
-    };
+    return () => _listeners.delete(listener);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",