clever-frontend-utils - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/requestUtils/Fetch.d.ts

 import "isomorphic-fetch";
+export interface FetchRequest {
+    url: string;
+    method: string;
+    headers: Headers;
+    body: string;
+}
+export declare type FetchEventHandler = (request: FetchRequest, response: Response) => void;
 export declare class Fetch {
+    static Method: {
+        GET: string;
+        POST: string;
+        PUT: string;
+        PATCH: string;
+        DELETE: string;
+    };
+    static Event: {
+        SUCCESS: string;
+        ERROR: string;
+    };
+    static _eventHandlers: {
+        [event: string]: FetchEventHandler[];
+    };
+    static _fireEvent(event: string, request: FetchRequest, response: Response): void;
+    static on(event: string, handler: FetchEventHandler): void;
     static get(url: any, queryParams?: {}): Promise<any>;
@@ -4,0 +27,0 @@ static post(url: any, body?: {}, headers?: {}): Promise<any>;

dist/requestUtils/Fetch.js

@@ -51,2 +51,17 @@ "use strict";
     }
+    Fetch._fireEvent = function (event, request, response) {
+        if (!this._eventHandlers[event]) {
+            return;
+        }
+        // We use setTimeout to push each operation into the background.
+        this._eventHandlers[event].forEach(function (handler) { return setTimeout(function () { return handler(request, response.clone()); }, 1); });
+    };
+    /* Registers an event handler for the specified event. Multiple event handlers can be
+       added to the same event and they all will trigger. */
+    Fetch.on = function (event, handler) {
+        if (!this._eventHandlers[event]) {
+            this._eventHandlers[event] = [];
+        }
+        this._eventHandlers[event].push(handler);
+    };
     Fetch.get = function (url, queryParams) {
@@ -79,3 +94,3 @@ if (queryParams === void 0) { queryParams = {}; }
                     case 0: return [4 /*yield*/, Fetch.makeRequest(url, {
-                            method: "POST",
+                            method: Fetch.Method.POST,
                             headers: __assign({}, headers, { "Content-Type": "application/json" }),
@@ -96,3 +111,3 @@ body: JSON.stringify(body),
                     case 0: return [4 /*yield*/, Fetch.makeRequest(url, {
-                            method: "PUT",
+                            method: Fetch.Method.PUT,
                             headers: __assign({}, headers, { "Content-Type": "application/json" }),
@@ -113,3 +128,3 @@ body: JSON.stringify(body),
                     case 0: return [4 /*yield*/, Fetch.makeRequest(url, {
-                            method: "PATCH",
+                            method: Fetch.Method.PATCH,
                             headers: __assign({}, headers, { "Content-Type": "application/json" }),
@@ -128,3 +143,3 @@ body: JSON.stringify(body),
                     case 0: return [4 /*yield*/, Fetch.makeRequest(url, {
-                            method: "DELETE",
+                            method: Fetch.Method.DELETE,
                             headers: {},
@@ -140,5 +155,5 @@ body: undefined,
     Fetch.makeRequest = function (url, options) {
-        if (options === void 0) { options = { method: "GET", headers: {}, body: "" }; }
+        if (options === void 0) { options = { method: Fetch.Method.GET, headers: {}, body: "" }; }
         return __awaiter(this, void 0, void 0, function () {
-            var method, headers, body, response, err_1, responseBody, error, extendedError;
+            var method, headers, body, eventRequest, response, err_1, responseBody, error, extendedError;
             return __generator(this, function (_a) {
@@ -148,2 +163,3 @@ switch (_a.label) {
                         method = options.method, headers = options.headers, body = options.body;
+                        eventRequest = { url: url, headers: new Headers(headers), method: method, body: body };
                         _a.label = 1;
@@ -157,3 +173,3 @@ case 1:
                                 // Firefox and Safari throw an error if a body is provided for a GET request
-                                body: (method === "GET") ? undefined : body,
+                                body: (method === Fetch.Method.GET) ? undefined : body,
                             })];
@@ -166,3 +182,3 @@ case 2:
                         throw new Error("Fetch internal error: " + err_1.message);
-                    case 4: return [4 /*yield*/, response.clone().json().catch(function () { return response.text(); })];
+                    case 4: return [4 /*yield*/, response.clone().json().catch(function () { return response.clone().text(); })];
                     case 5:
@@ -173,4 +189,6 @@ responseBody = _a.sent();
                             extendedError = __assign({}, error, { status: response.status, body: responseBody });
+                            this._fireEvent(Fetch.Event.ERROR, eventRequest, response);
                             throw extendedError;
                         }
+                        this._fireEvent(Fetch.Event.SUCCESS, eventRequest, response);
                         return [2 /*return*/, responseBody];
@@ -181,4 +199,17 @@ }
     };
+    // Method and Event should really be enums, but eslint doesn't recognize enums unfortunately.
+    Fetch.Method = {
+        GET: "GET",
+        POST: "POST",
+        PUT: "PUT",
+        PATCH: "PATCH",
+        DELETE: "DELETE",
+    };
+    Fetch.Event = {
+        SUCCESS: "SUCCESS",
+        ERROR: "ERROR",
+    };
+    Fetch._eventHandlers = {};
     return Fetch;
 }());
 exports.Fetch = Fetch;

lib/requestUtils/Fetch.ts

 import "isomorphic-fetch";
 import * as _ from "lodash";
 
+export interface FetchRequest {
+  url: string;
+  method: string;
+  headers: Headers;
+  body: string;
+}
+
+export type FetchEventHandler = (request: FetchRequest, response: Response) => void;
+
 export class Fetch {
+  // Method and Event should really be enums, but eslint doesn't recognize enums unfortunately.
+  static Method = {
+    GET: "GET",
+    POST: "POST",
+    PUT: "PUT",
+    PATCH: "PATCH",
+    DELETE: "DELETE",
+  };
+
+  static Event = {
+    SUCCESS: "SUCCESS",
+    ERROR: "ERROR",
+  };
+
+  static _eventHandlers: { [event: string]: FetchEventHandler[] } = {};
+
+  static _fireEvent(event: string, request: FetchRequest, response: Response) {
+    if (!this._eventHandlers[event]) {
+      return;
+    }
+    // We use setTimeout to push each operation into the background.
+    this._eventHandlers[event].forEach(
+      handler => setTimeout(() => handler(request, response.clone()), 1)
+    );
+  }
+
+  /* Registers an event handler for the specified event. Multiple event handlers can be
+     added to the same event and they all will trigger. */
+  static on(event: string, handler: FetchEventHandler) {
+    if (!this._eventHandlers[event]) {
+      this._eventHandlers[event] = [];
+    }
+    this._eventHandlers[event].push(handler);
+  }
+
   static async get(url, queryParams = {}) {
@@ -18,3 +62,3 @@ let queryString = "";
     return await Fetch.makeRequest(url, {
-      method: "POST",
+      method: Fetch.Method.POST,
       headers: {
@@ -30,3 +74,3 @@ ...headers,
     return await Fetch.makeRequest(url, {
-      method: "PUT",
+      method: Fetch.Method.PUT,
       headers: {
@@ -42,3 +86,3 @@ ...headers,
     return await Fetch.makeRequest(url, {
-      method: "PATCH",
+      method: Fetch.Method.PATCH,
       headers: {
@@ -54,3 +98,3 @@ ...headers,
     return await Fetch.makeRequest(url, {
-      method: "DELETE",
+      method: Fetch.Method.DELETE,
       headers: {},
@@ -62,5 +106,7 @@ body: undefined,
   // Fetch's underlying method
-  static async makeRequest(url, options = { method: "GET", headers: {}, body: "" }) {
+  static async makeRequest(url, options = { method: Fetch.Method.GET, headers: {}, body: "" }) {
     const { method, headers, body } = options;
 
+    const eventRequest = { url, headers: new Headers(headers), method, body };
+
     let response;
@@ -73,3 +119,3 @@ try {
         // Firefox and Safari throw an error if a body is provided for a GET request
-        body: (method === "GET") ? undefined : body,
+        body: (method === Fetch.Method.GET) ? undefined : body,
       });
@@ -82,3 +128,3 @@ } catch (err) {
     // because responses can only be read once
-    const responseBody = await response.clone().json().catch(() => response.text());
+    const responseBody = await response.clone().json().catch(() => response.clone().text());
 
@@ -92,6 +138,8 @@ if (!response.ok) {
       };
+      this._fireEvent(Fetch.Event.ERROR, eventRequest, response);
       throw extendedError;
     }
+    this._fireEvent(Fetch.Event.SUCCESS, eventRequest, response);
     return responseBody;
   }
 }

package.json

 {
   "name": "clever-frontend-utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A set of utils for frontend projects at Clever (and potentially elsewhere!)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

56588

increased by6.77%

Lines of code

1301

increased by7.79%

No dependency changes