fch 1.0.0 → 3.0.0

package/fetch.js

@@ -1,34 +1,31 @@
-import swear from './node_modules/swear/swear.js';
-
-if (typeof require !== 'undefined') {
-  require('isomorphic-fetch');
-}
-
-// To avoid making parallel requests to the same url if one is ongoing
-const ongoing = new Map();
-
 // Plain-ish object
-const hasPlainBody = options => {
-  if (options.headers['content-type']) return;
-  if (typeof options.body !== 'object') return;
+const hasPlainBody = (options) => {
+  if (options.headers["content-type"]) return;
+  if (!["object", "array"].includes(typeof options.body)) return;
   if (options.body instanceof FormData) return;
   return true;
 };
 
-const fch = (url, options = {}) => {
+const createUrl = (url, query, base) => {
+  let [path, urlQuery = {}] = url.split("?");
 
-  options = {
-    method: 'get',
-    headers: {},
-    ...(typeof options === 'object' ? options : {})
-  };
-
-  // GET requests should not have race conditions
-  if (options.method.toLowerCase() === 'get') {
-    if (ongoing.get(url)) return ongoing.get(url);
+  // Merge global params with passed params with url params
+  const entries = new URLSearchParams({
+    ...Object.fromEntries(new URLSearchParams(query)),
+    ...Object.fromEntries(new URLSearchParams(urlQuery)),
+  }).toString();
+  if (entries) {
+    path = path + "?" + entries;
   }
 
-  const headers = options.headers;
+  if (!base) return path;
+  const fullUrl = new URL(path, base);
+  return fullUrl.href;
+};
+
+const createHeaders = (user, base) => {
+  // User-set headers overwrite the base headers
+  const headers = { ...base, ...user };
 
   // Make the headers lowercase
   for (let key in headers) {
@@ -37,44 +34,173 @@ const fch = (url, options = {}) => {
     headers[key.toLowerCase()] = value;
   }
 
-  // JSON-encode plain objects
-  if (hasPlainBody(options)) {
-    options.body = JSON.stringify(options.body);
-    headers['content-type'] = 'application/json; charset=utf-8';
-  }
+  return headers;
+};
 
-  ongoing.set(url, swear(fetch(url, { ...options, headers }).then(res => {
+const createDedupe = (ongoing, url) => ({
+  save: (prom) => {
+    ongoing.set(url, prom);
+    return prom;
+  },
+  get: () => ongoing.get(url),
+  clear: () => ongoing.delete(url),
+});
+
+const createFetch = (request, { after, dedupe, error, output }) => {
+  return fetch(request.url, request).then(async (res) => {
     // No longer ongoing at this point
-    ongoing.delete(url);
+    if (dedupe) dedupe.clear();
+
+    // Need to manually create it to set some things like the proper response
+    let response = {
+      status: res.status,
+      statusText: res.statusText,
+      headers: {},
+    };
+    for (let key of res.headers.keys()) {
+      response.headers[key.toLowerCase()] = res.headers.get(key);
+    }
 
-    // Everything is good, just keep going
+    // Oops, throw it
     if (!res.ok) {
-      // Oops, throw it
-      const error = new Error(res.statusText);
-      error.response = res;
-      return Promise.reject(error);
+      const err = new Error(res.statusText);
+      err.response = response;
+      return error(err);
+    }
+
+    // Automatically parse the response
+    const isJson = res.headers.get("content-type").includes("application/json");
+    response.body = await (isJson ? res.json() : res.text());
+
+    // Hijack the response and modify it
+    if (after) {
+      response = after(response);
     }
 
-    const mem = new Map();
-    return new Proxy(res, { get: (target, key) => {
-      if (['then', 'catch', 'finally'].includes(key)) return res[key];
-      return () => {
-        if (!mem.get(key)) {
-          mem.set(key, target[key]());
-        }
-        return mem.get(key);
-      };
-    }});
-  })));
-
-  return ongoing.get(url);
+    if (output === "body") {
+      return response.body;
+    } else {
+      return response;
+    }
+  });
 };
 
-fch.head = (url, options = {}) => fch(url, { ...options, method: 'head' });
-fch.get = (url, options = {}) => fch(url, { ...options, method: 'get' });
-fch.post = (url, options = {}) => fch(url, { ...options, method: 'post' });
-fch.patch = (url, options = {}) => fch(url, { ...options, method: 'patch' });
-fch.put = (url, options = {}) => fch(url, { ...options, method: 'put' });
-fch.del = (url, options = {}) => fch(url, { ...options, method: 'delete' });
+const create = (defaults = {}) => {
+  // DEDUPLICATION is created on a per-instance basis
+  // To avoid making parallel requests to the same url if one is ongoing
+  const ongoing = new Map();
+
+  const fch = async (url, options = {}) => {
+    // Second parameter always has to be an object, even when it defaults
+    if (typeof options !== "object") options = {};
+
+    // Accept either fch(options) or fch(url, options)
+    options = typeof url === "string" ? { url, ...options } : url || {};
+
+    // Exctract the options
+    let {
+      dedupe = fch.dedupe,
+      output = fch.output,
+      baseURL = fch.baseURL, // DO NOT USE; it's here only for user friendliness
+      baseUrl = baseURL || fch.baseUrl,
+
+      // Extract it since it should not be part of fetch()
+      query = {},
+
+      // Interceptors can also be passed as parameters
+      before = fch.before,
+      after = fch.after,
+      error = fch.error,
+
+      ...request
+    } = options; // Local option OR global value (including defaults)
+
+    // Merge it, first the global and then the local
+    query = { ...fch.query, ...query };
+    // Absolute URL if possible; Default method; merge the default headers
+    request.url = createUrl(request.url || "/", query, baseUrl);
+    request.method = (request.method ?? fch.method).toLowerCase();
+    request.headers = createHeaders(request.headers, fch.headers);
+
+    if (request.method !== "get") {
+      dedupe = false;
+    }
+    if (dedupe) {
+      dedupe = createDedupe(ongoing, request.url);
+    }
+
+    if (!["body", "response"].includes(output)) {
+      const msg = `options.output needs to be either "body" (default) or "response", not "${output}"`;
+      throw new Error(msg);
+    }
+
+    // JSON-encode plain objects
+    if (hasPlainBody(request)) {
+      request.body = JSON.stringify(request.body);
+      request.headers["content-type"] = "application/json; charset=utf-8";
+    }
+
+    // Hijack the requeset and modify it
+    if (before) {
+      request = before(request);
+    }
+
+    // It should be cached
+    if (dedupe) {
+      // It's already cached! Just return it
+      if (dedupe.get()) return dedupe.get();
+
+      // Otherwise, save it in the cache and return the promise
+      return dedupe.save(
+        createFetch(request, { dedupe, output, error, after })
+      );
+    } else {
+      // PUT, POST, etc should never dedupe and just return the plain request
+      return createFetch(request, { output, error, after });
+    }
+  };
+
+  // Default values
+  fch.method = defaults.method ?? "get";
+  fch.query = defaults.query ?? {};
+  fch.headers = defaults.headers ?? {};
+
+  // Default options
+  fch.dedupe = defaults.dedupe ?? true;
+  fch.output = defaults.output ?? "body";
+  fch.credentials = defaults.credentials ?? "include";
+
+  // Interceptors
+  fch.before = defaults.before ?? ((request) => request);
+  fch.after = defaults.after ?? ((response) => response);
+  fch.error = defaults.error ?? ((error) => Promise.reject(error));
+
+  const get = (url, opts = {}) => fch(url, { ...opts });
+  const head = (url, opts = {}) => fch(url, { ...opts, method: "head" });
+  const post = (url, opts = {}) => fch(url, { ...opts, method: "post" });
+  const patch = (url, opts = {}) => fch(url, { ...opts, method: "patch" });
+  const put = (url, opts = {}) => fch(url, { ...opts, method: "put" });
+  const del = (url, opts = {}) => fch(url, { ...opts, method: "delete" });
+
+  fch.get = get;
+  fch.head = head;
+  fch.post = post;
+  fch.patch = patch;
+  fch.put = put;
+  fch.del = del;
+
+  return fch;
+};
 
-export default fch;
+// Need to export it globally with `global`, since if we use export default then
+// we cannot load it in the browser as a normal <script>, and if we load it in
+// the browser as a <script module> then we cannot run a normal script after it
+// since the modules are deferred by default. Basically this is a big mess and
+// I wish I could just do if `(typeof window !== 'undefined') window.fch = fch`,
+// but unfortunately that's not possible now and I need this as a traditionally
+// global definition, and then another file to import it as ESM. UGHHH
+let glob = {};
+if (typeof global !== "undefined") glob = global;
+if (typeof window !== "undefined") glob = window;
+glob.fch = create();
+glob.fch.create = create;

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "fch",
-  "version": "1.0.0",
-  "description": "Fetch interface with get queue, credentials, reject on http error and better promises",
-  "main": "fetch.min.js",
-  "scripts": {
-    "start": "npm run watch # Start ~= Start dev",
-    "build": "rollup fetch.js --name fch --output.format umd | uglifyjs -o fetch.min.js",
-    "test": "npm run build && jest --coverage --detectOpenHandles",
-    "watch": "nodemon --exec \"npm run build && npm test && npm run gzip\" --watch src --watch test --watch webpack.config.js --watch package.json",
-    "gzip": "gzip -c fetch.min.js | wc -c && echo 'bytes' # Only for Unix"
-  },
-  "keywords": [],
+  "version": "3.0.0",
+  "description": "Fetch interface with better promises, deduplication, defaults, etc.",
+  "homepage": "https://github.com/franciscop/fetch",
+  "repository": "https://github.com/franciscop/fetch.git",
+  "bugs": "https://github.com/franciscop/fetch/issues",
+  "funding": "https://www.paypal.me/franciscopresencia/19",
   "author": "Francisco Presencia <public@francisco.io> (https://francisco.io/)",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/franciscop/fetch.git"
-  },
-  "bugs": {
-    "url": "https://github.com/franciscop/fetch/issues"
+  "scripts": {
+    "start": "npm run watch # Start ~= Start dev",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage --detectOpenHandles",
+    "watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch --coverage --detectOpenHandles"
   },
-  "dependencies": {
-    "isomorphic-fetch": "^2.2.1",
-    "swear": "^1.0.0"
+  "keywords": [
+    "fetch",
+    "axios",
+    "http",
+    "https",
+    "async",
+    "ajax"
+  ],
+  "main": "./index.js",
+  "browser": "./fetch.js",
+  "files": [
+    "fetch.js"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
   },
+  "dependencies": {},
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-jest": "^21.2.0",
-    "babel-preset-env": "^1.7.0",
-    "jest": "^23.5.0",
-    "jest-fetch-mock": "^1.6.6",
-    "rollup": "^1.1.2",
-    "uglify-es": "^3.3.9"
+    "jest": "^28.0.1",
+    "jest-fetch-mock": "^3.0.3"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-node",
+    "transform": {}
   }
 }

package/readme.md

@@ -1,81 +1,420 @@
-# Fetch [![npm install fch](https://img.shields.io/badge/npm%20install-fch-blue.svg)](https://www.npmjs.com/package/fch) [![gzip size](https://img.badgesize.io/franciscop/fetch/master/fetch.min.js.svg?compression=gzip)](https://github.com/franciscop/fetch/blob/master/fetch.min.js)
+# Fch [![npm install fch](https://img.shields.io/badge/npm%20install-fch-blue.svg)](https://www.npmjs.com/package/fch) [![gzip size](https://img.badgesize.io/franciscop/fetch/master/fetch.js.svg?compression=gzip)](https://github.com/franciscop/fetch/blob/master/fetch.js)
 
-`fetch()` greatly improved:
+A tiny library to make API calls easier. Similar to Axios, but tiny size and simpler API:
 
 ```js
-import fch from 'fch';
-
-// Example data: { "name": "Francisco" }
-const url = 'https://api.jsonbin.io/b/5bc69ae7716f9364f8c58651';
-
-(async () => {
-  // Using the Swear interface
-  const name = await fch(url).json().name;
-  console.log(name);  // "Francisco"
-
-  // Using plain-old promises
-  const data = await fch(url).then(res => res.json());
-  console.log(data.name);  // "Francisco"
-})();
+import api from "fch";
+const mew = await api("https://pokeapi.co/pokemon/150");
+console.log(mew);
 ```
 
+- Automatically `JSON.stringify()` and `Content-Type: 'application/json'` for objects.
+- Automatically parse server response taking into account the headers.
+- Works the same way in Node.js and the browser.
+- Await/Async Promises. `>= 400 and <= 100` will _reject_ the promise and throw an error.
+- No dependencies; include it with a simple `<script>`
+- Easily define shared options straight on the root `fch.baseUrl = "https://...";`.
+- Interceptors: `before` (the request), `after` (the response) and `error` (it fails).
+- Deduplicates parallel GET requests.
+- Configurable to return either just the body, or the full response.
 
+```js
+// Calls and methods available:
+api(url, { method, body, headers, ...options })
+api.get(url, { headers, ...options })
+api.head(url, { headers, ...options })
+api.post(url, { body, headers, ...options })
+api.patch(url, { body, headers, ...options })
+api.put(url, { body, headers, ...options })
+api.del(url, { body, headers, ...options })
+fch.create({ url, body, headers, ...options})
+```
 
-## Better `fetch()`
-
-- Isomorphic fetch() so it works the same in the server as the browser.
-- Automatic `JSON.stringify()` and `Content-Type: 'application/json'` for plain objects.
-- Await/Async Promise interface works as you know and love.
-- Better error handling. `>= 400 and <= 100` will _reject_ the promise with an error instance. Can be caught as normal with `.catch()` or `try {} catch (error) {}`.
-- Advanced [promises interface](https://github.com/franciscop/swear) so you can chain operations easily.
-- Import with the shorthand for tighter syntax. `import { get, post } from 'fch';`.
-
+|Options/variables |Default        |Description                                |
+|------------------|---------------|-------------------------------------------|
+|`url`             |`null`         |The path or full url for the request       |
+|`api.baseUrl`     |`null`         |The shared base of the API                 |
+|`api.method`      |`"get"`        |Default method to use for the call         |
+|`api.query`       |`{}`           |Add query parameters to the URL            |
+|`api.headers`     |`{}`           |Shared headers across all requests         |
+|`api.dedupe`      |`true`         |Reuse GET requests made concurrently       |
+|`api.output`      |`"body"`       |The return value of the API call           |
+|`api.before`      |`req => req`   |Process the request before sending it      |
+|`api.after`       |`res => res`   |Process the response before receiving it   |
+|`api.error`       |`err => reject(err)` |Process errors before returning them |
 
-## Getting started
+## Getting Started
 
 Install it in your project:
 
-```
+```bash
 npm install fch
 ```
 
 Then import it to be able to use it in your code:
 
 ```js
-const { get, post, ... } = require('fch');  // Old school
-import fch, { get, post, ... } from 'fch';       // New wave
+import fch from 'fch';
+const body = await fch.get('/');
 ```
 
-Alternatively, include it straight from the CDN for front-end:
+On the browser you can add it with a script and it will be available as `fch`:
 
 ```html
+<!-- Import it as usual -->
 <script src="https://cdn.jsdelivr.net/npm/fch"></script>
 <script>
-  const { get, post, ... } = fch;
+  fch('/hello');
 </script>
 ```
 
+## Options
+
+```js
+import api from 'fch';
+
+// General options with their defaults; most of these are also parameters:
+api.baseUrl = null;  // Set an API endpoint
+api.method = 'get';  // Default method to use for api()
+api.headers = {};    // Is merged with the headers on a per-request basis
+
+// Control simple variables
+api.dedupe = true;   // Avoid parallel GET requests to the same path
+api.output = 'body'; // Return the body; use 'response' for the full response
+
+// Interceptors
+api.before = req => req;
+api.after = res => res;
+api.error = err => Promise.reject(err);
+
+// Similar API to fetch()
+api(url, { method, body, headers, ... });
+
+// Our highly recommended style:
+api.get(url, { headers, ... });
+api.post(url, { body, headers, ... });
+api.put(url, { body, headers, ... });
+// ...
+```
+
+### URL
+
+This is normally the first argument, though technically you can use both styles:
+
+```js
+// All of these methods are valid
+import api from 'fch';
+
+// We strongly recommend using this style for your normal code:
+await api.post('/hello', { body: '...', headers: {} })
+
+// Try to avoid these, but they are also valid:
+await api('/hello', { method: 'post', body: '...', headers: {} });
+await api({ url: '/hello', method: 'post', headers: {}, body: '...' });
+await api.post({ url: '/hello', headers: {}, body: '...' });
+```
+
+It can be either absolute or relative, in which case it'll use the local one in the page. It's recommending to set `baseUrl`:
+
+```js
+import api from 'fch';
+api.baseUrl = 'https//api.filemon.io/';
+api.get('/hello');
+// Called https//api.filemon.io/hello
+```
+
+### Body
+
+The `body` can be a string, a plain object|array or a FormData instance. If it's an object, it'll be stringified and the header `application/json` will be added. Otherwise it'll be sent as plain text:
+
+```js
+import api from 'api';
+
+// Sending plain text
+await api.post('/houses', { body: 'plain text' });
+
+// Will JSON.stringify it internally, and add the JSON headers
+await api.post('/houses', { body: { id: 1, name: 'Cute Cottage' } });
+
+// Send it as FormData
+form.onsubmit = e => {
+  await api.post('/houses', { body: new FormData(e.target) });
+};
+```
+
+
+### Headers
+
+You can define headers globally, in which case they'll be added to every request, or locally, so that they are only added to the current request. You can also add them in the `before` callback:
+
+
+```js
+import api from 'fch';
+api.headers.abc = 'def';
+
+api.get('/helle', { headers: { ghi: 'jkl' } });
+// Total headers on the request:
+// { abc: 'def', ghi: 'jkl' }
+```
+
 
+### Output
 
-## Examples
+This controls whether the call returns just the body (default), or the whole response. It can be controlled globally or on a per-request basis:
 
-Posting some data as JSON and reading the JSON response:
+```js
+import api from 'fch';
+
+// "body" (default) or "response"
+api.output = 'body';
+
+// Return only the body, this is the default
+const body = await api.get('/data');
+
+// Return the whole response (with .body):
+const response = await api.get('/data', { output: 'response' });
+
+// Throws error
+const invalid = await api.get('/data', { output: 'invalid' });
+```
+
+
+### Dedupe
+
+When you perform a GET request to a given URL, but another GET request *to the same* URL is ongoing, it'll **not** create a new request and instead reuse the response when the first one is finished:
 
 ```js
-// With this library fetch
-import { post } from 'fch';
-const data = await post('/url', { body: { a: 'b' } }).json();
-console.log(data);
+fetch.mockOnce("a").mockOnce("b");
+const res = await Promise.all([fch("/a"), fch("/a")]);
+
+// Reuses the first response if two are launched in parallel
+expect(res).toEqual(["a", "a"]);
 ```
 
+You can disable this by setting either the global `fch.dedupe` option to `false` or by passing an option per request:
+
 ```js
-// Native example, much longer and cumbersome:
-const res = await fetch('/url', {
-  method: 'POST',
-  body: JSON.stringify({ a: 'b' }),
-  headers: { 'content-type': 'application/json; charset=utf-8' }
+// Globally set it for all calls
+fch.dedupe = true;  // [DEFAULT] Dedupes GET requests
+fch.dedupe = false; // All fetch() calls trigger a network call
+
+// Set it on a per-call basis
+fch('/a', { dedupe: true });  // [DEFAULT] Dedupes GET requests
+fch('/a', { dedupe: false })  // All fetch() calls trigger a network call
+```
+
+> We do not support deduping other methods right now besides `GET` right now
+
+Note that opting out of deduping a request will _also_ make that request not be reusable, see this test for details:
+
+```js
+it("can opt out locally", async () => {
+  fetch.once("a").once("b").once("c");
+  const res = await Promise.all([
+    fch("/a"),
+    fch("/a", { dedupe: false }),
+    fch("/a"),  // Reuses the 1st response, not the 2nd one
+  ]);
+
+  expect(res).toEqual(["a", "b", "a"]);
+  expect(fetch.mock.calls.length).toEqual(2);
 });
-if (!res.ok) throw new Error(res.statusText);
-const data = await res.json();
-console.log(data);
 ```
+
+### Interceptors
+
+You can also easily add the interceptors `before`, `after` and `error`:
+
+```js
+// Perform an action or request transformation before the request is sent
+fch.before = async req => {
+  // Normalized request ready to be sent
+  ...
+  return req;
+};
+
+// Perform an action or data transformation after the request is finished
+fch.after = async res => {
+  // Full response as just after the request is made
+  ...
+  return res;
+};
+
+// Perform an action or data transformation when an error is thrown
+fch.error = async err => {
+  // Need to re-throw if we want to throw on error
+  ...
+  throw err;
+
+  // OR, resolve it as if it didn't fail
+  return err.response;
+
+  // OR, resolve it with a custom value
+  return { message: 'Request failed with a code ' + err.response.status };
+};
+```
+
+
+### Define shared options
+
+You can also define values straight away:
+
+```js
+import api from "fch";
+
+api.baseUrl = "https://pokeapi.co/";
+
+const mew = await api.get("/pokemon/150");
+console.log(mew);
+```
+
+If you prefer Axios' style of outputting the whole response, you can do:
+
+```js
+// Default, already only returns the data on a successful call
+api.output = "data";
+const name = await api.get("/users/1").name;
+
+// Axios-like
+api.output = "response";
+const name = await api.get("/users/1").data.name;
+```
+
+
+## How to
+
+### Stop errors from throwing
+
+While you can handle this on a per-request basis, if you want to overwrite the global behavior you can write a interceptor:
+
+```js
+import fch from 'fch';
+fch.error = error => error.response;
+
+const res = await fch('/notfound');
+expect(res.status).toBe(404);
+```
+
+### Return the full response
+
+By default a successful request will just return the data. However this one is configurable on a global level:
+
+```js
+import fch from 'fch';
+fch.output = 'response';  // Valid values are 'body' (default) or 'response'
+
+const res = await fch('/hello');
+```
+
+Or on a per-request level:
+
+```js
+import fch from 'fch';
+
+// Valid values are 'body' (default) or 'response'
+const res = await fch('/hello', { output: 'response' });
+
+// Does not affect others
+const body = await fch('/hello');
+```
+
+
+### Set a base URL
+
+There's a configuration parameter for that:
+
+```js
+import fch from 'fch';
+fch.baseUrl = 'https://api.filemon.io/';
+
+// Calls "https://api.filemon.io/blabla"
+const body = await fch.get('/blabla');
+```
+
+
+### Set the authorization headers
+
+You can set that globally as a header:
+
+```js
+import fch from 'fch';
+fch.headers.Authorization = 'bearer abc';
+
+const me = await fch('/users/me');
+```
+
+Or globally on a per-request basis, for example if you take the value from localStorage:
+
+```js
+import fch from 'fch';
+
+// All the requests will add the Authorization header when the token is
+// in localStorage
+fch.before = req => {
+  if (localStorage.get('token')) {
+    req.headers.Authorization = 'bearer ' + localStorage.get('token');
+  }
+  return req;
+};
+
+const me = await fch('/users/me');
+```
+
+Or on a per-request basis, though we wouldn't recommend this:
+
+```js
+import fch from 'fch';
+
+const me = await fch('/users/me', { headers: { Authorization: 'bearer abc' } });
+```
+
+
+### Create an instance
+
+You can create an instance with its own defaults and global options easily. It's common when writing an API that you want to encapsulate away:
+
+```js
+import fch from 'fch';
+
+const api = fch.create({
+  baseUrl: 'https://api.filemon.io/',
+  ...
+});
+
+api.get('/hello');   // Gets https://api.filemon.io/hello
+fch.get('/hello');   // Gets http://localhost:3000/hello (or wherever you are)
+```
+
+Note: for server-side (Node.js) usage, you always want to set `baseUrl`.
+
+### What are the differences in Node.js vs Browser?
+
+First, we use the native Node.js' fetch() and the browser's native fetch(), so any difference between those also applies to this library. For example, if you were to call `"/"` in the browser it'd refer to the current URL, while in Node.js it'd fail since you need to specify the full URL. Some other places where you might find differences: CORS, cache, etc.
+
+In the library itself there's nothing different between the browser and Node.js, but it might be interesting to note that (if/when implemented) things like cache, etc. in Node.js are normally long-lived and shared, while in a browser request it'd bound to the request itself.
+
+
+### What are the differences with Axios?
+
+The main difference is that things are simplified with fch:
+
+```js
+// Modify headers
+axios.defaults.headers.Authorization = '...';
+fch.headers.Authorization = '...';
+
+// Set a base URL
+axios.defaults.baseURL = '...';
+fch.baseUrl = '...';
+
+// Add an interceptor
+axios.interceptors.request.use(fn);
+fch.before = fn;
+```
+
+API size is also strikingly different, with **7.8kb** for Axios and **1.9kb** for fch.
+
+As disadvantages, I can think of two major ones for `fch`:
+
+- Requires Node.js 18+, which is the version that includes `fetch()` by default.
+- Does not support some more advanced options,

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["env"]
-}

package/fetch.min.js

@@ -1 +0,0 @@
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.fch=factory())})(this,function(){"use strict";const resolve=async value=>{value=await value;if(Array.isArray(value)){return await Promise.all(value.map(resolve))}return value};const reject=message=>Promise.reject(new Error(message));const regexpCallback=cb=>cb instanceof RegExp?cb.test.bind(cb):cb;const callback=(cb,self)=>(...args)=>regexpCallback(cb).call(self,...args);const extend=(cb,self)=>async(value,i,all)=>({value:value,extra:await callback(cb,self)(value,i,all)});const extraUp=({extra:extra})=>extra;const valueUp=({value:value})=>value;const extendArray={every:async(obj,cb,self)=>{for(let i=0;i<obj.length;i++){const found=await callback(cb,self)(obj[i],i,obj);if(!found)return false}return true},filter:async(obj,cb,self)=>{const data=await resolve(obj.map(extend(cb,self)));return data.filter(extraUp).map(valueUp)},find:async(obj,cb,self)=>{for(let i=0;i<obj.length;i++){const found=await callback(cb,self)(obj[i],i,obj);if(found)return obj[i]}},findIndex:async(obj,cb,self)=>{for(let i=0;i<obj.length;i++){const found=await callback(cb,self)(obj[i],i,obj);if(found)return i}return-1},forEach:async(obj,cb,self)=>{await resolve(obj.map(extend(cb,self)));return obj},reduce:async(obj,cb,init)=>{const hasInit=typeof init!=="undefined";if(!hasInit)init=obj[0];for(let i=hasInit?0:1;i<obj.length;i++){init=await callback(cb)(init,obj[i],i,obj)}return init},reduceRight:async(obj,cb,init)=>{const hasInit=typeof init!=="undefined";if(!hasInit)init=obj[obj.length-1];for(let i=obj.length-(hasInit?1:2);i>=0;i--){init=await callback(cb)(init,obj[i],i,obj)}return init},some:async(obj,cb,self)=>{for(let i=0;i<obj.length;i++){const found=await callback(cb,self)(obj[i],i,obj);if(found)return true}return false}};const getter=(obj,extend)=>(target,key)=>{if(key==="then")return(...args)=>{return resolve(obj).then(...args)};if(key==="catch")return(...args)=>{return root(resolve(obj).catch(...args))};return func(resolve(obj).then(obj=>{if(typeof key==="symbol")return obj[key];if(key in extend){return func((...args)=>extend[key](obj,...args),extend)}if(typeof obj==="number"&&key in extend.number){return func((...args)=>extend.number[key](obj,...args),extend)}if(typeof obj==="string"&&key in extend.string){return func((...args)=>extend.string[key](obj,...args),extend)}if(Array.isArray(obj)&&key in extend.array){return func((...args)=>extend.array[key](obj,...args),extend)}if(obj[key]&&obj[key].bind){return func(obj[key].bind(obj),extend)}return func(obj[key],extend)}),extend)};const applier=(obj,extend)=>(target,self,args)=>{return func(resolve(obj).then(obj=>{if(typeof obj!=="function"){return reject(`You tried to call "${JSON.stringify(obj)}" (${typeof obj}) as a function, but it is not.`)}return obj(...args)}),extend)};const func=(obj,extend)=>new Proxy(()=>{},{get:getter(obj,extend),apply:applier(obj,extend)});const root=(obj,{number:number,string:string,array:array,...others}={})=>new Proxy({},{get:getter(obj,{number:{...number},string:{...string},array:{...extendArray,...array},...others})});if(typeof require!=="undefined"){require("isomorphic-fetch")}const ongoing=new Map;const hasPlainBody=options=>{if(options.headers["content-type"])return;if(typeof options.body!=="object")return;if(options.body instanceof FormData)return;return true};const fch=(url,options={})=>{options={method:"get",headers:{},...typeof options==="object"?options:{}};if(options.method.toLowerCase()==="get"){if(ongoing.get(url))return ongoing.get(url)}const headers=options.headers;for(let key in headers){const value=headers[key];delete headers[key];headers[key.toLowerCase()]=value}if(hasPlainBody(options)){options.body=JSON.stringify(options.body);headers["content-type"]="application/json; charset=utf-8"}ongoing.set(url,root(fetch(url,{...options,headers:headers}).then(res=>{ongoing.delete(url);if(!res.ok){const error=new Error(res.statusText);error.response=res;return Promise.reject(error)}const mem=new Map;return new Proxy(res,{get:(target,key)=>{if(["then","catch","finally"].includes(key))return res[key];return()=>{if(!mem.get(key)){mem.set(key,target[key]())}return mem.get(key)}}})})));return ongoing.get(url)};fch.head=((url,options={})=>fch(url,{...options,method:"head"}));fch.get=((url,options={})=>fch(url,{...options,method:"get"}));fch.post=((url,options={})=>fch(url,{...options,method:"post"}));fch.patch=((url,options={})=>fch(url,{...options,method:"patch"}));fch.put=((url,options={})=>fch(url,{...options,method:"put"}));fch.del=((url,options={})=>fch(url,{...options,method:"delete"}));return fch});

package/fetch.test.js

@@ -1,146 +0,0 @@
-import fch, { get } from './fetch.min';
-global.fetch = require('jest-fetch-mock');
-
-describe('fetch()', () => {
-  beforeEach(() => {
-    fetch.resetMocks();
-  });
-
-  it('works', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('https://google.com/').json();
-
-    expect(res).toEqual({ secret: '12345' });
-    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0]).toEqual('https://google.com/');
-  });
-
-  it('can use the `fetch.get()` shorthand', async () => {
-    fetch.once('get');
-    expect(await fch.get('/').text()).toBe('get');
-    expect(fetch.mock.calls[0][1].method).toEqual('get');
-  });
-
-  it('can use the `fetch.patch()` shorthand', async () => {
-    fetch.once('patch');
-    expect(await fch.patch('/').text()).toBe('patch');
-    expect(fetch.mock.calls[0][1].method).toEqual('patch');
-  });
-
-  it('can use the `fetch.put()` shorthand', async () => {
-    fetch.once('put');
-    expect(await fch.put('/').text()).toBe('put');
-    expect(fetch.mock.calls[0][1].method).toEqual('put');
-  });
-
-  it('can use the `fetch.head()` shorthand', async () => {
-    fetch.once('head');
-    expect(await fch.head('/').text()).toBe('head');
-    expect(fetch.mock.calls[0][1].method).toEqual('head');
-  });
-
-  it('can use the `fetch.post()` shorthand', async () => {
-    fetch.once('post');
-    expect(await fch.post('/').text()).toBe('post');
-    expect(fetch.mock.calls[0][1].method).toEqual('post');
-  });
-
-  it('can use the `fetch.del()` shorthand', async () => {
-    fetch.once('del');
-    expect(await fch.del('/').text()).toBe('del');
-    expect(fetch.mock.calls[0][1].method).toEqual('delete');
-  });
-
-  it('ignores invalid options', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('https://google.com/', 10).json();
-
-    expect(res).toEqual({ secret: '12345' });
-    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0]).toEqual('https://google.com/');
-  });
-
-  it('will not overwrite if it is FormData', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('/', { method: 'POST', body: new FormData() }).json();
-
-    expect(res).toEqual({ secret: '12345' });
-    expect(fetch.mock.calls.length).toEqual(1);
-    const [url, opts] = fetch.mock.calls[0];
-    expect(opts).toMatchObject({ body: expect.any(FormData) });
-  });
-
-  it('will not overwrite if content-type is set', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('/', {
-      method: 'POST',
-      body: { a: 'b'},
-      headers: { 'Content-Type': 'xxx' }
-    }).json();
-
-    expect(res).toEqual({ secret: '12345' });
-    expect(fetch.mock.calls.length).toEqual(1);
-    const [url, opts] = fetch.mock.calls[0];
-    expect(url).toEqual('/');
-    expect(opts).toMatchObject({
-      method: 'POST',
-      body: { a: 'b' },
-      headers: { 'content-type': 'xxx' }
-    });
-  });
-
-  it('will send JSON', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('/', { method: 'POST', body: { a: 'b'} }).json();
-
-    expect(res).toEqual({ secret: '12345' });
-    expect(fetch.mock.calls.length).toEqual(1);
-    const [url, opts] = fetch.mock.calls[0];
-    expect(url).toEqual('/');
-    expect(opts).toMatchObject({
-      method: 'POST',
-      body: '{"a":"b"}',
-      headers: { 'content-type': 'application/json; charset=utf-8' }
-    });
-  });
-
-  it('can run in parallel', async () => {
-    fetch.once(JSON.stringify('a')).once(JSON.stringify('b'));
-    const res = await Promise.all(['/a', '/b'].map(url => fch(url).json()));
-
-    expect(res).toEqual(['a', 'b']);
-    expect(fetch.mock.calls.length).toEqual(2);
-  });
-
-  // There is a bug with node-fetch so this is difficult to test right now
-  //   https://github.com/bitinn/node-fetch/issues/386
-  it.skip('will not trigger race conditions on get for the same url', async () => {
-    fetch.once(JSON.stringify('a')).once(JSON.stringify('b'));
-    const res = await Promise.all(['/', '/'].map(url => fch(url).json()));
-
-    expect(res).toEqual(['a', 'a']);
-    expect(fetch.mock.calls.length).toEqual(1);
-  });
-
-  it('can set `accepts` insensitively', async () => {
-    fetch.once(JSON.stringify({ secret: '12345' }));
-    const res = await fch('/', { headers: { 'Accepts': 'text/xml' } }).json();
-
-    const [url, opts] = fetch.mock.calls[0];
-    expect(opts.headers).toEqual({ 'accepts': 'text/xml' });
-  });
-
-  it('can accept network rejections', async () => {
-    fetch.mockResponseOnce(JSON.stringify("unauthorized"), { status: 401, ok: false });
-    await expect(fch('/')).rejects.toMatchObject({
-      message: 'Unauthorized'
-    });
-  });
-
-  it('can accept rejections', async () => {
-    fetch.mockRejectOnce(new Error('fake error message'));
-    await expect(fch('/')).rejects.toMatchObject({
-      message: 'fake error message'
-    });
-  });
-});