use-http - npm Package Compare versions

Comparing version 0.3.9 to 0.4.0

dist/doFetchArgs.js

@@ -126,3 +126,3 @@ "use strict";
                         // TODO: if the body is a file, and this is a large file, it might exceed the size
-                        // limit of the key size in the Map
+                        // limit of the key size. Potential solution: base64 the body
                         // used to tell if a request has already been made
@@ -129,0 +129,0 @@ ];

dist/storage/localStorage.js

@@ -51,33 +51,36 @@ "use strict";
 var getLocalStorage = function (_a) {
-    // there isn't state here now, but will be eventually
     var cacheLife = _a.cacheLife;
-    var remove = function (name) { return __awaiter(void 0, void 0, void 0, function () {
-        var cache;
-        return __generator(this, function (_a) {
-            cache = getCache();
-            delete cache[name];
-            localStorage.setItem(cacheName, JSON.stringify(cache));
-            return [2 /*return*/];
+    var isExpired = function (responseID) {
+        var cache = getCache();
+        var _a = (cache[responseID] || {}), expiration = _a.expiration, response = _a.response;
+        var expired = expiration > 0 && expiration < Date.now();
+        if (expired)
+            remove(responseID);
+        return expired || !response;
+    };
+    var remove = function () {
+        var responseIDs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            responseIDs[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var cache;
+            return __generator(this, function (_a) {
+                cache = getCache();
+                responseIDs.forEach(function (id) { return delete cache[id]; });
+                localStorage.setItem(cacheName, JSON.stringify(cache));
+                return [2 /*return*/];
+            });
         });
-    }); };
-    var has = function (responseID) { return __awaiter(void 0, void 0, void 0, function () {
-        var cache;
-        return __generator(this, function (_a) {
-            cache = getCache();
-            return [2 /*return*/, !!(cache[responseID] && cache[responseID].response)];
-        });
-    }); };
+    };
+    var has = function (responseID) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, !isExpired(responseID)];
+    }); }); };
     var get = function (responseID) { return __awaiter(void 0, void 0, void 0, function () {
-        var cache, _a, expiration, _b, body, headers, status, statusText;
-        return __generator(this, function (_c) {
+        var cache, _a, body, headers, status, statusText;
+        return __generator(this, function (_b) {
+            if (isExpired(responseID))
+                return [2 /*return*/];
             cache = getCache();
-            if (!cache[responseID]) {
-                return [2 /*return*/];
-            }
-            _a = cache[responseID], expiration = _a.expiration, _b = _a.response, body = _b.body, headers = _b.headers, status = _b.status, statusText = _b.statusText;
-            if (expiration < Date.now()) {
-                delete cache[responseID];
-                localStorage.setItem(cacheName, JSON.stringify(cache));
-                return [2 /*return*/];
-            }
+            _a = cache[responseID].response, body = _a.body, headers = _a.headers, status = _a.status, statusText = _a.statusText;
             return [2 /*return*/, new Response(body, {
@@ -91,14 +94,15 @@ status: status,
     var set = function (responseID, response) { return __awaiter(void 0, void 0, void 0, function () {
-        var cache, responseObject;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var cache, _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     cache = getCache();
+                    _a = cache;
+                    _b = responseID;
+                    _c = {};
                     return [4 /*yield*/, utils_1.serializeResponse(response)];
                 case 1:
-                    responseObject = _a.sent();
-                    cache[responseID] = {
-                        response: responseObject,
-                        expiration: Date.now() + cacheLife
-                    };
+                    _a[_b] = (_c.response = _d.sent(),
+                        _c.expiration = Date.now() + cacheLife,
+                        _c);
                     localStorage.setItem(cacheName, JSON.stringify(cache));
@@ -115,5 +119,11 @@ return [2 /*return*/];
     }); };
-    return { get: get, set: set, has: has, delete: remove, clear: clear };
+    return Object.defineProperties(getCache(), {
+        get: { value: get, writable: false },
+        set: { value: set, writable: false },
+        has: { value: has, writable: false },
+        delete: { value: remove, writable: false },
+        clear: { value: clear, writable: false }
+    });
 };
 exports.default = getLocalStorage;
 //# sourceMappingURL=localStorage.js.map

dist/storage/memoryStorage.d.ts

 import { Cache } from '../types';
-declare const getMemoryStorage: ({ cacheLife }: {
+declare var getMemoryStorage: ({ cacheLife }: {
     cacheLife: number;
 }) => Cache;
 export default getMemoryStorage;

dist/storage/memoryStorage.js

@@ -39,55 +39,58 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var inMemoryStorage = new Map();
+var inMemoryStorage = {};
 var getMemoryStorage = function (_a) {
     var cacheLife = _a.cacheLife;
-    return ({
-        get: function (name) {
-            return __awaiter(this, void 0, void 0, function () {
-                var item, expiration;
-                return __generator(this, function (_a) {
-                    item = inMemoryStorage.get(name);
-                    if (!item)
-                        return [2 /*return*/];
-                    expiration = inMemoryStorage.get(name + ":ts");
-                    if (expiration && expiration > 0 && expiration < Date.now()) {
-                        inMemoryStorage.delete(name);
-                        inMemoryStorage.delete(name + ":ts");
-                        return [2 /*return*/];
-                    }
-                    return [2 /*return*/, item];
-                });
+    var isExpired = function (responseID) {
+        var expiration = inMemoryStorage[responseID + ":ts"];
+        var expired = expiration > 0 && expiration < Date.now();
+        if (expired)
+            remove(responseID);
+        return expired;
+    };
+    var get = function (responseID) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (isExpired(responseID))
+                return [2 /*return*/];
+            return [2 /*return*/, inMemoryStorage[responseID]];
+        });
+    }); };
+    var set = function (responseID, res) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            inMemoryStorage[responseID] = res;
+            inMemoryStorage[responseID + ":ts"] = cacheLife > 0 ? Date.now() + cacheLife : 0;
+            return [2 /*return*/];
+        });
+    }); };
+    var has = function (responseID) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, !isExpired(responseID)];
+    }); }); };
+    var remove = function () {
+        var responseIDs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            responseIDs[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var _a, responseIDs_1, responseID;
+            return __generator(this, function (_b) {
+                for (_a = 0, responseIDs_1 = responseIDs; _a < responseIDs_1.length; _a++) {
+                    responseID = responseIDs_1[_a];
+                    delete inMemoryStorage[responseID];
+                    delete inMemoryStorage[responseID + ":ts"];
+                }
+                return [2 /*return*/];
             });
-        },
-        set: function (name, data) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    inMemoryStorage.set(name, data);
-                    inMemoryStorage.set(name + ":ts", cacheLife > 0 ? Date.now() + cacheLife : 0);
-                    return [2 /*return*/];
-                });
-            });
-        },
-        has: function (name) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, inMemoryStorage.has(name)];
-                });
-            });
-        },
-        delete: function (name) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    inMemoryStorage.delete(name);
-                    inMemoryStorage.delete(name + ":ts");
-                    return [2 /*return*/];
-                });
-            });
-        },
-        clear: function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, inMemoryStorage.clear()];
-                });
-            });
-        }
+        });
+    };
+    var clear = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            inMemoryStorage = {};
+            return [2 /*return*/];
+        });
+    }); };
+    return Object.defineProperties(inMemoryStorage, {
+        get: { value: get, writable: false, configurable: true },
+        set: { value: set, writable: false, configurable: true },
+        has: { value: has, writable: false, configurable: true },
+        delete: { value: remove, writable: false, configurable: true },
+        clear: { value: clear, writable: false, configurable: true }
     });
@@ -94,0 +97,0 @@ };

dist/useFetch.js

@@ -81,2 +81,3 @@ "use strict";
     var suspender = react_1.useRef();
+    var mounted = react_1.useRef(false);
     var _b = react_1.useState(defaults.loading), loading = _b[0], setLoading = _b[1];
@@ -98,3 +99,3 @@ var forceUpdate = react_1.useReducer(function () { return ({}); }, [])[1];
                         _a = _c.sent(), url = _a.url, options = _a.options, response = _a.response;
-                        if (!suspense)
+                        if (!suspense && mounted.current)
                             setLoading(true);
@@ -112,3 +113,3 @@ error.current = undefined;
                         data.current = res.current.data;
-                        if (!suspense)
+                        if (!suspense && mounted.current)
                             setLoading(false);
@@ -119,3 +120,4 @@ return [2 /*return*/, data.current];
                         error.current = err_1;
-                        setLoading(false);
+                        if (mounted.current)
+                            setLoading(false);
                         return [3 /*break*/, 5];
@@ -174,3 +176,3 @@ case 5:
                     case 13:
-                        if (!suspense)
+                        if (!suspense && mounted.current)
                             setLoading(false);
@@ -230,2 +232,3 @@ return [2 /*return*/, data.current];
     react_1.useEffect(function () {
+        mounted.current = true;
         if (Array.isArray(dependencies)) {
@@ -237,2 +240,3 @@ var methodName = requestInit.method || types_1.HTTPMethod.GET;
         }
+        return function () { return mounted.current = false; };
         // TODO: need [request] in dependency array. Causing infinite loop though.
@@ -239,0 +243,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

package.json

 {
   "name": "use-http",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "homepage": "http://use-http.com",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,4 +0,2 @@
-<a href="http://use-http.com">
-    <img src="https://github.com/alex-cory/use-http/raw/master/public/dog.png" />
-</a>
+[![use-http logo][3]][5]
 
@@ -364,2 +362,3 @@ <br/>
   data,
+  cache,    // methods: get, set, has, delete, clear (like `new Map()`)
   get,
@@ -402,3 +401,3 @@ post,
   data,
-  cache, // methods: get, set, has, delete, clear (like `new Map()`)
+  cache,  // methods: get, set, has, delete, clear (like `new Map()`)
   get,
@@ -783,3 +782,3 @@ post,
 | --------------------- | --------------------------------------------------------------------------|------------- |
-| `suspense` | Enables React Suspense mode. [example](https://codesandbox.io/s/usefetch-suspense-i22wv) | false |
+| `suspense` | Enables Experimental React Suspense mode. [example](https://codesandbox.io/s/usefetch-suspense-i22wv) | false |
 | `cachePolicy` | These will be the same ones as Apollo's [fetch policies](https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy). Possible values are `cache-and-network`, `network-only`, `cache-only`, `no-cache`, `cache-first`. Currently only supports **`cache-first`**  or **`no-cache`**      | `cache-first` |
@@ -804,3 +803,3 @@ | `cacheLife` | After a successful cache update, that cache data will become stale after this duration       | `0` |
 
-  // enables React Suspense mode
+  // enables experimental React Suspense mode
   suspense: true, // defaults to `false`
@@ -881,6 +880,15 @@
 
+Browser Support
+---------------
+
+If you need support for IE, you will need to add additional polyfills.  The React docs suggest [these polyfills][4], but from [this issue][2] we have found it to work fine with the [`react-app-polyfill`]. If you have any updates to this browser list, please submit a PR!
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />]()<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />]()<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />]()<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />]()<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />]()<br/>Opera |
+| --------- | --------- | --------- | --------- | --------- |
+| 12+ | last 2 versions| last 2 versions| last 2 versions| last 2 versions |
+
 Feature Requests/Ideas
 ----------------------
 
-If you have feature requests, let's talk about them in [this issue](https://github.com/alex-cory/use-http/issues/13)!
+If you have feature requests, [submit an issue][1] to let us know what you would like to see!
 
@@ -900,3 +908,2 @@ Todos
 - [ ] maybe add translations [like this one](https://github.com/jamiebuilds/unstated-next)
-- [ ] add browser support to docs [1](https://github.com/godban/browsers-support-badges) [2](https://gist.github.com/danbovey/b468c2f810ae8efe09cb5a6fac3eaee5) (currently does not support ie 11)
 - [ ] maybe add contributors [all-contributors](https://github.com/all-contributors/all-contributors)
@@ -916,2 +923,3 @@ - [ ] add sponsors [similar to this](https://github.com/carbon-app/carbon)
 - [ ] make this a github package
+  - [see ava packages](https://github.com/orgs/ava/packages)
 - [ ] get it all working on a SSR codesandbox, this way we can have api to call locally
@@ -939,12 +947,2 @@ - [ ] make GraphQL examples in codesandbox
 
-- [ ] maybe add snake_case -> camelCase option to `<Provider />`. This would
-      convert all the keys in the response to camelCase.
-      Not exactly sure how this syntax should look because what
-      if you want to have this only go 1 layer deep into the response
-      object. Or if this is just out of scope for this library.
-
-  ```jsx
-  <Provider responseKeys={{ case: 'camel' }}><App /></Provider>
-  ```
-
 - [ ] potential option ideas
@@ -1052,1 +1050,9 @@
 </details>
+
+
+[1]: https://github.com/alex-cory/use-http/issues/new?title=[Feature%20Request]%20YOUR_FEATURE_NAME
+[2]: https://github.com/alex-cory/use-http/issues/93#issuecomment-600896722
+[3]: https://github.com/alex-cory/use-http/raw/master/public/dog.png
+[4]: https://reactjs.org/docs/javascript-environment-requirements.html
+[5]: http://use-http.com
+[`react-app-polyfill`]: https://www.npmjs.com/package/react-app-polyfill

No alert changes

Improved metrics

Total package byte prevSize

152668

increased by2.14%

Lines of code

1670

increased by1.03%

Number of lines in readme file

1049

increased by0.48%

No dependency changes