dreaction-react 1.2.0 → 1.3.0

package/lib/plugins/networking.d.ts

@@ -1,4 +1,4 @@
-import type { DReactionCore } from 'dreaction-client-core';
+import { type DReactionCore } from 'dreaction-client-core';
 export interface NetworkingOptions {
     ignoreContentTypes?: RegExp;
     ignoreUrls?: RegExp;

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

@@ -1 +1 @@
-{"version":3,"file":"networking.d.ts","sourceRoot":"","sources":["../../src/plugins/networking.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,uBAAuB,CAAC;AAOnE,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,QAAA,MAAM,UAAU,kBACC,iBAAiB,iBACpB,aAAa;;;CAwTxB,CAAC;AAEJ,eAAe,UAAU,CAAC"}
+{"version":3,"file":"networking.d.ts","sourceRoot":"","sources":["../../src/plugins/networking.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,QAAA,MAAM,UAAU,kBACC,iBAAiB,iBACpB,aAAa;;;CA+UxB,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/lib/plugins/networking.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const dreaction_client_core_1 = require("dreaction-client-core");
 /**
  * Don't include the response bodies for images by default.
  */
@@ -11,8 +12,6 @@ const networking = (pluginConfig = {}) => (dreaction) => {
     const options = Object.assign({}, DEFAULTS, pluginConfig);
     // a RegExp to suppress adding the body cuz it costs a lot to serialize
     const ignoreContentTypes = options.ignoreContentTypes || DEFAULT_CONTENT_TYPES_RX;
-    // a XHR call tracker
-    let dreactionCounter = 1000;
     // a temporary cache to hold requests so we can match up the data
     const requestCache = {};
     // Store original functions
@@ -36,16 +35,52 @@ const networking = (pluginConfig = {}) => (dreaction) => {
                 xhr._skipDReaction = true;
                 return originalXHRSend.apply(this, [data]);
             }
-            // bump the counter
-            dreactionCounter++;
+            // Generate unique request ID
+            const requestId = (0, dreaction_client_core_1.generateRequestId)();
             // tag
-            xhr._trackingName = dreactionCounter;
+            xhr._trackingName = requestId;
+            // Parse request headers
+            let requestHeaders = {};
+            try {
+                if (xhr._requestHeaders) {
+                    requestHeaders = xhr._requestHeaders;
+                }
+            }
+            catch (e) {
+                // ignore
+            }
+            // Parse URL and params
+            const url = xhr._url;
+            let params = null;
+            const queryParamIdx = url ? url.indexOf('?') : -1;
+            if (queryParamIdx > -1) {
+                params = {};
+                url
+                    .substr(queryParamIdx + 1)
+                    .split('&')
+                    .forEach((pair) => {
+                    const [key, value] = pair.split('=');
+                    if (key && value !== undefined) {
+                        params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
+                    }
+                });
+            }
+            const tronRequest = {
+                url: url || '',
+                method: xhr._method || 'GET',
+                data,
+                headers: requestHeaders,
+                params,
+            };
             // cache
-            requestCache[dreactionCounter] = {
+            requestCache[requestId] = {
                 data,
                 xhr,
+                request: tronRequest,
                 stopTimer: dreaction.startTimer(),
             };
+            // Send api.request event
+            dreaction.apiRequest(requestId, tronRequest);
             // Setup listener for response
             const originalOnReadyStateChange = xhr.onreadystatechange;
             xhr.onreadystatechange = function () {
@@ -66,45 +101,14 @@ const networking = (pluginConfig = {}) => (dreaction) => {
         if (xhr._skipDReaction) {
             return;
         }
-        const url = xhr._url;
-        let params = null;
-        const queryParamIdx = url ? url.indexOf('?') : -1;
-        if (queryParamIdx > -1) {
-            params = {};
-            url
-                .substr(queryParamIdx + 1)
-                .split('&')
-                .forEach((pair) => {
-                const [key, value] = pair.split('=');
-                if (key && value !== undefined) {
-                    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
-                }
-            });
-        }
         // fetch and clear the request data from the cache
-        const rid = xhr._trackingName;
-        const cachedRequest = requestCache[rid] || { xhr };
-        requestCache[rid] = null;
-        // assemble the request object
-        const { data, stopTimer } = cachedRequest;
-        // Parse request headers
-        let requestHeaders = {};
-        try {
-            const requestHeaderString = xhr._requestHeaders;
-            if (requestHeaderString) {
-                requestHeaders = requestHeaderString;
-            }
-        }
-        catch (e) {
-            // ignore
+        const requestId = xhr._trackingName;
+        const cachedRequest = requestCache[requestId];
+        if (!cachedRequest) {
+            return;
         }
-        const tronRequest = {
-            url: url || cachedRequest.xhr._url,
-            method: xhr._method || null,
-            data,
-            headers: requestHeaders || null,
-            params,
-        };
+        delete requestCache[requestId];
+        const { request: tronRequest, stopTimer } = cachedRequest;
         // Parse response headers
         let responseHeaders = {};
         try {
@@ -147,9 +151,9 @@ const networking = (pluginConfig = {}) => (dreaction) => {
         const tronResponse = {
             body,
             status: xhr.status,
-            headers: responseHeaders || null,
+            headers: responseHeaders || {},
         };
-        dreaction.apiResponse(tronRequest, tronResponse, stopTimer ? stopTimer() : null);
+        dreaction.apiResponse(requestId, tronRequest, tronResponse, stopTimer ? stopTimer() : 0);
     };
     /**
      * Intercept fetch API
@@ -165,9 +169,8 @@ const networking = (pluginConfig = {}) => (dreaction) => {
             if (options.ignoreUrls && options.ignoreUrls.test(url)) {
                 return originalFetch.call(this, input, init);
             }
-            // bump the counter
-            dreactionCounter++;
-            const requestId = dreactionCounter;
+            // Generate unique request ID
+            const requestId = (0, dreaction_client_core_1.generateRequestId)();
             const stopTimer = dreaction.startTimer();
             // Parse URL and params
             let params = null;
@@ -184,13 +187,32 @@ const networking = (pluginConfig = {}) => (dreaction) => {
                     }
                 });
             }
+            // Parse request headers
+            let requestHeaders = {};
+            if (init?.headers) {
+                if (init.headers instanceof Headers) {
+                    init.headers.forEach((value, key) => {
+                        requestHeaders[key] = value;
+                    });
+                }
+                else if (Array.isArray(init.headers)) {
+                    init.headers.forEach(([key, value]) => {
+                        requestHeaders[key] = value;
+                    });
+                }
+                else {
+                    requestHeaders = init.headers;
+                }
+            }
             const tronRequest = {
                 url,
-                method: init?.method || 'GET',
+                method: (init?.method || 'GET'),
                 data: init?.body || null,
-                headers: init?.headers || {},
+                headers: requestHeaders,
                 params,
             };
+            // Send api.request event
+            dreaction.apiRequest(requestId, tronRequest);
             return originalFetch
                 .call(this, input, init)
                 .then(async (response) => {
@@ -222,7 +244,7 @@ const networking = (pluginConfig = {}) => (dreaction) => {
                     status: response.status,
                     headers: responseHeaders,
                 };
-                dreaction.apiResponse(tronRequest, tronResponse, stopTimer());
+                dreaction.apiResponse(requestId, tronRequest, tronResponse, stopTimer());
                 return response;
             });
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dreaction-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "description": "DReaction client for React web applications",
   "main": "lib/index.js",
@@ -25,8 +25,8 @@
   },
   "homepage": "https://github.com/moonrailgun/dreaction#readme",
   "dependencies": {
-    "dreaction-client-core": "1.3.0",
-    "dreaction-protocol": "1.0.10"
+    "dreaction-client-core": "1.4.0",
+    "dreaction-protocol": "1.0.11"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/plugins/networking.ts

@@ -1,4 +1,8 @@
-import type { DReactionCore, Plugin } from 'dreaction-client-core';
+import {
+  type DReactionCore,
+  type Plugin,
+  generateRequestId,
+} from 'dreaction-client-core';
 
 /**
  * Don't include the response bodies for images by default.
@@ -23,11 +27,8 @@ const networking =
     const ignoreContentTypes =
       options.ignoreContentTypes || DEFAULT_CONTENT_TYPES_RX;
 
-    // a XHR call tracker
-    let dreactionCounter = 1000;
-
     // a temporary cache to hold requests so we can match up the data
-    const requestCache: Record<number, any> = {};
+    const requestCache: Record<string, any> = {};
 
     // Store original functions
     let originalXHROpen: typeof XMLHttpRequest.prototype.open;
@@ -59,19 +60,58 @@ const networking =
           return originalXHRSend.apply(this, [data]);
         }
 
-        // bump the counter
-        dreactionCounter++;
+        // Generate unique request ID
+        const requestId = generateRequestId();
 
         // tag
-        xhr._trackingName = dreactionCounter;
+        xhr._trackingName = requestId;
+
+        // Parse request headers
+        let requestHeaders: Record<string, string> = {};
+        try {
+          if (xhr._requestHeaders) {
+            requestHeaders = xhr._requestHeaders;
+          }
+        } catch (e) {
+          // ignore
+        }
+
+        // Parse URL and params
+        const url = xhr._url;
+        let params = null;
+        const queryParamIdx = url ? url.indexOf('?') : -1;
+        if (queryParamIdx > -1) {
+          params = {} as Record<string, string>;
+          url
+            .substr(queryParamIdx + 1)
+            .split('&')
+            .forEach((pair: string) => {
+              const [key, value] = pair.split('=');
+              if (key && value !== undefined) {
+                params![key] = decodeURIComponent(value.replace(/\+/g, ' '));
+              }
+            });
+        }
+
+        const tronRequest = {
+          url: url || '',
+          method: xhr._method || 'GET',
+          data,
+          headers: requestHeaders,
+          params,
+        };
 
         // cache
-        requestCache[dreactionCounter] = {
+        requestCache[requestId] = {
           data,
           xhr,
+          request: tronRequest,
           stopTimer: dreaction.startTimer(),
         };
 
+        // Send api.request event
+        (dreaction as any).apiRequest(requestId, tronRequest);
+
         // Setup listener for response
         const originalOnReadyStateChange = xhr.onreadystatechange;
         xhr.onreadystatechange = function () {
@@ -96,48 +136,15 @@ const networking =
         return;
       }
 
-      const url = xhr._url;
-      let params = null;
-      const queryParamIdx = url ? url.indexOf('?') : -1;
-      if (queryParamIdx > -1) {
-        params = {} as Record<string, string>;
-        url
-          .substr(queryParamIdx + 1)
-          .split('&')
-          .forEach((pair: string) => {
-            const [key, value] = pair.split('=');
-            if (key && value !== undefined) {
-              params![key] = decodeURIComponent(value.replace(/\+/g, ' '));
-            }
-          });
-      }
-
       // fetch and clear the request data from the cache
-      const rid = xhr._trackingName;
-      const cachedRequest = requestCache[rid] || { xhr };
-      requestCache[rid] = null;
-
-      // assemble the request object
-      const { data, stopTimer } = cachedRequest;
-
-      // Parse request headers
-      let requestHeaders: Record<string, string> = {};
-      try {
-        const requestHeaderString = xhr._requestHeaders;
-        if (requestHeaderString) {
-          requestHeaders = requestHeaderString;
-        }
-      } catch (e) {
-        // ignore
+      const requestId = xhr._trackingName;
+      const cachedRequest = requestCache[requestId];
+      if (!cachedRequest) {
+        return;
       }
+      delete requestCache[requestId];
 
-      const tronRequest = {
-        url: url || cachedRequest.xhr._url,
-        method: xhr._method || null,
-        data,
-        headers: requestHeaders || null,
-        params,
-      };
+      const { request: tronRequest, stopTimer } = cachedRequest;
 
       // Parse response headers
       let responseHeaders: Record<string, string> = {};
@@ -185,13 +192,14 @@ const networking =
       const tronResponse = {
         body,
         status: xhr.status,
-        headers: responseHeaders || null,
+        headers: responseHeaders || {},
       };
 
       (dreaction as any).apiResponse(
+        requestId,
         tronRequest,
         tronResponse,
-        stopTimer ? stopTimer() : null
+        stopTimer ? stopTimer() : 0
       );
     };
 
@@ -216,9 +224,8 @@ const networking =
           return originalFetch.call(this, input as RequestInfo, init);
         }
 
-        // bump the counter
-        dreactionCounter++;
-        const requestId = dreactionCounter;
+        // Generate unique request ID
+        const requestId = generateRequestId();
 
         const stopTimer = dreaction.startTimer();
 
@@ -238,14 +245,33 @@ const networking =
             });
         }
 
+        // Parse request headers
+        let requestHeaders: Record<string, string> = {};
+        if (init?.headers) {
+          if (init.headers instanceof Headers) {
+            init.headers.forEach((value: string, key: string) => {
+              requestHeaders[key] = value;
+            });
+          } else if (Array.isArray(init.headers)) {
+            init.headers.forEach(([key, value]: [string, string]) => {
+              requestHeaders[key] = value;
+            });
+          } else {
+            requestHeaders = init.headers as Record<string, string>;
+          }
+        }
+
         const tronRequest = {
           url,
-          method: init?.method || 'GET',
+          method: (init?.method || 'GET') as any,
           data: init?.body || null,
-          headers: init?.headers || {},
+          headers: requestHeaders,
           params,
         };
 
+        // Send api.request event
+        (dreaction as any).apiRequest(requestId, tronRequest);
+
         return originalFetch
           .call(this, input as RequestInfo, init)
           .then(async (response) => {
@@ -282,6 +308,7 @@ const networking =
             };
 
             (dreaction as any).apiResponse(
+              requestId,
               tronRequest,
               tronResponse,
               stopTimer()