dreaction-react-native 1.5.0 → 1.7.0

package/lib/dreaction.d.ts

@@ -32,4 +32,5 @@ export interface DReactionReactNative extends DReaction, ReactNativePluginFeatur
     };
 }
 export declare const dreaction: DReactionReactNative;
+export declare function watchFPS(): () => void;
 //# sourceMappingURL=dreaction.d.ts.map

package/lib/dreaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC"}
+{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC;AAyFtE,wBAAgB,QAAQ,eAMvB"}

package/lib/dreaction.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dreaction = exports.reactNativeCorePlugins = void 0;
+exports.watchFPS = watchFPS;
 const react_native_1 = require("react-native");
 const dreaction_client_core_1 = require("dreaction-client-core");
 const getReactNativeVersion_1 = __importDefault(require("./helpers/getReactNativeVersion"));
@@ -145,3 +146,10 @@ exports.dreaction.registerDataWatcher = (name, type, options) => {
         },
     };
 };
+function watchFPS() {
+    return (0, dreaction_client_core_1.runFPSMeter)((fps) => {
+        exports.dreaction.send('profiler.fps', {
+            fps,
+        });
+    });
+}

package/lib/plugins/networking.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-ignore
-const XHRInterceptor_1 = __importDefault(require("react-native/Libraries/Network/XHRInterceptor"));
+const xhrInterceptor_1 = require("./xhrInterceptor");
 /**
  * Don't include the response bodies for images by default.
  */
@@ -132,9 +129,9 @@ const networking = (pluginConfig = {}) => (dreaction) => {
     return {
         onConnect: () => {
             // register our monkey-patch
-            XHRInterceptor_1.default.setSendCallback(onSend);
-            XHRInterceptor_1.default.setResponseCallback(onResponse);
-            XHRInterceptor_1.default.enableInterception();
+            xhrInterceptor_1.XHRInterceptor.setSendCallback(onSend);
+            xhrInterceptor_1.XHRInterceptor.setResponseCallback(onResponse);
+            xhrInterceptor_1.XHRInterceptor.enableInterception();
         },
     };
 };

package/lib/plugins/xhrInterceptor.d.ts

@@ -0,0 +1,39 @@
+type XHRInterceptorOpenCallback = (method: string, url: string, request: XMLHttpRequest) => void;
+type XHRInterceptorSendCallback = (data: string, request: XMLHttpRequest) => void;
+type XHRInterceptorRequestHeaderCallback = (header: string, value: string, request: XMLHttpRequest) => void;
+type XHRInterceptorHeaderReceivedCallback = (responseContentType: string | undefined, responseSize: number | undefined, allHeaders: string, request: XMLHttpRequest) => void;
+type XHRInterceptorResponseCallback = (status: number, timeout: number, response: string, responseURL: string, responseType: string, request: XMLHttpRequest) => void;
+/**
+ * A network interceptor which monkey-patches XMLHttpRequest methods
+ * to gather all network requests/responses, in order to show their
+ * information in the React Native inspector development tool.
+ * This supports interception with XMLHttpRequest API, including Fetch API
+ * and any other third party libraries that depend on XMLHttpRequest.
+ */
+export declare const XHRInterceptor: {
+    /**
+     * Invoked before XMLHttpRequest.open(...) is called.
+     */
+    setOpenCallback(callback: XHRInterceptorOpenCallback): void;
+    /**
+     * Invoked before XMLHttpRequest.send(...) is called.
+     */
+    setSendCallback(callback: XHRInterceptorSendCallback): void;
+    /**
+     * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+     */
+    setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback): void;
+    /**
+     * Invoked after xhr's readyState becomes xhr.DONE.
+     */
+    setResponseCallback(callback: XHRInterceptorResponseCallback): void;
+    /**
+     * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+     */
+    setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback): void;
+    isInterceptorEnabled(): boolean;
+    enableInterception(): void;
+    disableInterception(): void;
+};
+export {};
+//# sourceMappingURL=xhrInterceptor.d.ts.map

package/lib/plugins/xhrInterceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xhrInterceptor.d.ts","sourceRoot":"","sources":["../../src/plugins/xhrInterceptor.ts"],"names":[],"mappings":"AAgBA,KAAK,0BAA0B,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;AAEhG,KAAK,0BAA0B,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;AAEjF,KAAK,mCAAmC,GAAG,CACzC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,cAAc,KACpB,IAAI,CAAA;AAET,KAAK,oCAAoC,GAAG,CAC1C,mBAAmB,EAAE,MAAM,GAAG,SAAS,EACvC,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,KACpB,IAAI,CAAA;AAET,KAAK,8BAA8B,GAAG,CACpC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,cAAc,KACpB,IAAI,CAAA;AAUT;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;8BACuB,0BAA0B;IAIpD;;OAEG;8BACuB,0BAA0B;IAIpD;;OAEG;wCACiC,oCAAoC;IAIxE;;OAEG;kCAC2B,8BAA8B;IAI5D;;OAEG;uCACgC,mCAAmC;4BAI9C,OAAO;;;CAwGhC,CAAA"}

package/lib/plugins/xhrInterceptor.js

@@ -0,0 +1,144 @@
+"use strict";
+/* eslint-disable prefer-rest-params */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XHRInterceptor = void 0;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Vendored from: https://github.com/callstackincubator/rozenite/blob/402e3579878f72cbae7f8123f9ca80459dc1fe7f/packages/network-activity-plugin/src/react-native/http/xhr-interceptor.ts
+ * Original source: https://github.com/facebook/react-native/blob/2c683c5787dd03ac15d2aad45dcc53650529ee7f/packages/react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js
+ */
+const originalXHROpen = XMLHttpRequest.prototype.open;
+const originalXHRSend = XMLHttpRequest.prototype.send;
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+let openCallback;
+let sendCallback;
+let requestHeaderCallback;
+let headerReceivedCallback;
+let responseCallback;
+let isInterceptorEnabled = false;
+/**
+ * A network interceptor which monkey-patches XMLHttpRequest methods
+ * to gather all network requests/responses, in order to show their
+ * information in the React Native inspector development tool.
+ * This supports interception with XMLHttpRequest API, including Fetch API
+ * and any other third party libraries that depend on XMLHttpRequest.
+ */
+exports.XHRInterceptor = {
+    /**
+     * Invoked before XMLHttpRequest.open(...) is called.
+     */
+    setOpenCallback(callback) {
+        openCallback = callback;
+    },
+    /**
+     * Invoked before XMLHttpRequest.send(...) is called.
+     */
+    setSendCallback(callback) {
+        sendCallback = callback;
+    },
+    /**
+     * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+     */
+    setHeaderReceivedCallback(callback) {
+        headerReceivedCallback = callback;
+    },
+    /**
+     * Invoked after xhr's readyState becomes xhr.DONE.
+     */
+    setResponseCallback(callback) {
+        responseCallback = callback;
+    },
+    /**
+     * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+     */
+    setRequestHeaderCallback(callback) {
+        requestHeaderCallback = callback;
+    },
+    isInterceptorEnabled() {
+        return isInterceptorEnabled;
+    },
+    enableInterception() {
+        if (isInterceptorEnabled) {
+            return;
+        }
+        // Override `open` method for all XHR requests to intercept the request
+        // method and url, then pass them through the `openCallback`.
+        // $FlowFixMe[cannot-write]
+        // $FlowFixMe[missing-this-annot]
+        XMLHttpRequest.prototype.open = function (method, url) {
+            if (openCallback) {
+                openCallback(method, url, this);
+            }
+            originalXHROpen.apply(this, arguments);
+        };
+        // Override `setRequestHeader` method for all XHR requests to intercept
+        // the request headers, then pass them through the `requestHeaderCallback`.
+        // $FlowFixMe[cannot-write]
+        // $FlowFixMe[missing-this-annot]
+        XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+            if (requestHeaderCallback) {
+                requestHeaderCallback(header, value, this);
+            }
+            originalXHRSetRequestHeader.apply(this, arguments);
+        };
+        // Override `send` method of all XHR requests to intercept the data sent,
+        // register listeners to intercept the response, and invoke the callbacks.
+        // $FlowFixMe[cannot-write]
+        // $FlowFixMe[missing-this-annot]
+        XMLHttpRequest.prototype.send = function (data) {
+            if (sendCallback) {
+                sendCallback(data, this);
+            }
+            if (this.addEventListener) {
+                this.addEventListener("readystatechange", () => {
+                    if (!isInterceptorEnabled) {
+                        return;
+                    }
+                    if (this.readyState === this.HEADERS_RECEIVED) {
+                        const contentTypeString = this.getResponseHeader("Content-Type");
+                        const contentLengthString = this.getResponseHeader("Content-Length");
+                        let responseContentType, responseSize;
+                        if (contentTypeString) {
+                            responseContentType = contentTypeString.split(";")[0];
+                        }
+                        if (contentLengthString) {
+                            responseSize = parseInt(contentLengthString, 10);
+                        }
+                        if (headerReceivedCallback) {
+                            headerReceivedCallback(responseContentType, responseSize, this.getAllResponseHeaders(), this);
+                        }
+                    }
+                    if (this.readyState === this.DONE) {
+                        if (responseCallback) {
+                            responseCallback(this.status, this.timeout, this.response, this.responseURL, this.responseType, this);
+                        }
+                    }
+                }, false);
+            }
+            originalXHRSend.apply(this, arguments);
+        };
+        isInterceptorEnabled = true;
+    },
+    // Unpatch XMLHttpRequest methods and remove the callbacks.
+    disableInterception() {
+        if (!isInterceptorEnabled) {
+            return;
+        }
+        isInterceptorEnabled = false;
+        // $FlowFixMe[cannot-write]
+        XMLHttpRequest.prototype.send = originalXHRSend;
+        // $FlowFixMe[cannot-write]
+        XMLHttpRequest.prototype.open = originalXHROpen;
+        // $FlowFixMe[cannot-write]
+        XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
+        responseCallback = null;
+        openCallback = null;
+        sendCallback = null;
+        headerReceivedCallback = null;
+        requestHeaderCallback = null;
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dreaction-react-native",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "private": false,
   "description": "",
   "main": "lib/index.js",
@@ -15,8 +15,8 @@
   "author": "moonrailgun <moonrailgun@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "dreaction-client-core": "1.1.11",
-    "dreaction-protocol": "1.0.7"
+    "dreaction-protocol": "1.0.8",
+    "dreaction-client-core": "1.2.0"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "^2.1.0",

package/src/dreaction.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { createClient } from 'dreaction-client-core';
+import { createClient, runFPSMeter } from 'dreaction-client-core';
 import type {
   ClientOptions,
   InferFeaturesFromPlugins,
@@ -244,3 +244,11 @@ dreaction.registerDataWatcher = <T = unknown>(
     },
   };
 };
+
+export function watchFPS() {
+  return runFPSMeter((fps) => {
+    dreaction.send('profiler.fps', {
+      fps,
+    });
+  });
+}

package/src/plugins/networking.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor';
+import { XHRInterceptor } from './xhrInterceptor';
 import type { DReactionCore, Plugin } from 'dreaction-client-core';
 
 /**

package/src/plugins/xhrInterceptor.ts

@@ -0,0 +1,198 @@
+/* eslint-disable prefer-rest-params */
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Vendored from: https://github.com/callstackincubator/rozenite/blob/402e3579878f72cbae7f8123f9ca80459dc1fe7f/packages/network-activity-plugin/src/react-native/http/xhr-interceptor.ts
+ * Original source: https://github.com/facebook/react-native/blob/2c683c5787dd03ac15d2aad45dcc53650529ee7f/packages/react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js
+ */
+
+const originalXHROpen = XMLHttpRequest.prototype.open
+const originalXHRSend = XMLHttpRequest.prototype.send
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader
+
+type XHRInterceptorOpenCallback = (method: string, url: string, request: XMLHttpRequest) => void
+
+type XHRInterceptorSendCallback = (data: string, request: XMLHttpRequest) => void
+
+type XHRInterceptorRequestHeaderCallback = (
+  header: string,
+  value: string,
+  request: XMLHttpRequest
+) => void
+
+type XHRInterceptorHeaderReceivedCallback = (
+  responseContentType: string | undefined,
+  responseSize: number | undefined,
+  allHeaders: string,
+  request: XMLHttpRequest
+) => void
+
+type XHRInterceptorResponseCallback = (
+  status: number,
+  timeout: number,
+  response: string,
+  responseURL: string,
+  responseType: string,
+  request: XMLHttpRequest
+) => void
+
+let openCallback: XHRInterceptorOpenCallback | null
+let sendCallback: XHRInterceptorSendCallback | null
+let requestHeaderCallback: XHRInterceptorRequestHeaderCallback | null
+let headerReceivedCallback: XHRInterceptorHeaderReceivedCallback | null
+let responseCallback: XHRInterceptorResponseCallback | null
+
+let isInterceptorEnabled = false
+
+/**
+ * A network interceptor which monkey-patches XMLHttpRequest methods
+ * to gather all network requests/responses, in order to show their
+ * information in the React Native inspector development tool.
+ * This supports interception with XMLHttpRequest API, including Fetch API
+ * and any other third party libraries that depend on XMLHttpRequest.
+ */
+export const XHRInterceptor = {
+  /**
+   * Invoked before XMLHttpRequest.open(...) is called.
+   */
+  setOpenCallback(callback: XHRInterceptorOpenCallback) {
+    openCallback = callback
+  },
+
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setSendCallback(callback: XHRInterceptorSendCallback) {
+    sendCallback = callback
+  },
+
+  /**
+   * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+   */
+  setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback) {
+    headerReceivedCallback = callback
+  },
+
+  /**
+   * Invoked after xhr's readyState becomes xhr.DONE.
+   */
+  setResponseCallback(callback: XHRInterceptorResponseCallback) {
+    responseCallback = callback
+  },
+
+  /**
+   * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+   */
+  setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback) {
+    requestHeaderCallback = callback
+  },
+
+  isInterceptorEnabled(): boolean {
+    return isInterceptorEnabled
+  },
+
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return
+    }
+    // Override `open` method for all XHR requests to intercept the request
+    // method and url, then pass them through the `openCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.open = function (method: string, url: string) {
+      if (openCallback) {
+        openCallback(method, url, this)
+      }
+      originalXHROpen.apply(this, arguments as any)
+    }
+
+    // Override `setRequestHeader` method for all XHR requests to intercept
+    // the request headers, then pass them through the `requestHeaderCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.setRequestHeader = function (header: string, value: string) {
+      if (requestHeaderCallback) {
+        requestHeaderCallback(header, value, this)
+      }
+      originalXHRSetRequestHeader.apply(this, arguments as any)
+    }
+
+    // Override `send` method of all XHR requests to intercept the data sent,
+    // register listeners to intercept the response, and invoke the callbacks.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.send = function (data: string) {
+      if (sendCallback) {
+        sendCallback(data, this)
+      }
+      if (this.addEventListener) {
+        this.addEventListener(
+          "readystatechange",
+          () => {
+            if (!isInterceptorEnabled) {
+              return
+            }
+            if (this.readyState === this.HEADERS_RECEIVED) {
+              const contentTypeString = this.getResponseHeader("Content-Type")
+              const contentLengthString = this.getResponseHeader("Content-Length")
+              let responseContentType, responseSize
+              if (contentTypeString) {
+                responseContentType = contentTypeString.split(";")[0]
+              }
+              if (contentLengthString) {
+                responseSize = parseInt(contentLengthString, 10)
+              }
+              if (headerReceivedCallback) {
+                headerReceivedCallback(
+                  responseContentType,
+                  responseSize,
+                  this.getAllResponseHeaders(),
+                  this
+                )
+              }
+            }
+            if (this.readyState === this.DONE) {
+              if (responseCallback) {
+                responseCallback(
+                  this.status,
+                  this.timeout,
+                  this.response,
+                  this.responseURL,
+                  this.responseType,
+                  this
+                )
+              }
+            }
+          },
+          false
+        )
+      }
+
+      originalXHRSend.apply(this, arguments as any)
+    }
+    isInterceptorEnabled = true
+  },
+
+  // Unpatch XMLHttpRequest methods and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return
+    }
+    isInterceptorEnabled = false
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.send = originalXHRSend
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.open = originalXHROpen
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader
+    responseCallback = null
+    openCallback = null
+    sendCallback = null
+    headerReceivedCallback = null
+    requestHeaderCallback = null
+  },
+}