diff --git a/README.md b/README.md index da5d18e..0a3e989 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ # Features +#### `wretch` is a small wrapper around [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) designed to simplify the way to perform and handle network requests and responses. + - 🪶 Small size (less than 2KB g-zipped) - 💡 Intuitive - lean API, handles errors, headers and serialization - 🧊 Immutable - every call creates a cloned instance @@ -42,45 +44,45 @@ And some additional reasons to use `wretch`: # Table of Contents -- [Motivation](#motivation) -- [Installation](#installation) -- [Compatibility](#compatibility) -- [Usage](#usage) -- [Api](#api) -- [Addons](#addons) -- [Middlewares](#middlewares) -- [License](#license) +- [**Motivation**](#motivation) +- [**Installation**](#installation) +- [**Compatibility**](#compatibility) +- [**Usage**](#usage) +- [**Api**](#api) +- [**Addons**](#addons) +- [**Middlewares**](#middlewares) +- [**License**](#license) # Motivation #### Because having to write a second callback to process a response body feels awkward. -```javascript -// Fetch needs a second callback to process the response body +_Fetch needs a second callback to process the response body._ +```javascript fetch("examples/example.json") - .then((response) => response.json()) - .then((json) => { + .then(response => response.json()) + .then(json => { //Do stuff with the parsed json }); ``` -```javascript -// Wretch does it for you +_Wretch does it for you._ +```javascript // Use .res for the raw response, .text for raw text, .json for json, .blob for a blob ... wretch("examples/example.json") .get() - .json((json) => { + .json(json => { // Do stuff with the parsed json }); ``` #### Because manually checking and throwing every request error code is tedious. -```javascript -// Fetch won’t reject on HTTP error status +_Fetch won’t reject on HTTP error status._ +```javascript fetch("anything") .then(response => { if(!response.ok) { @@ -95,9 +97,9 @@ fetch("anything") .catch(error => { /* ... */ }) ``` -```javascript -// Wretch throws when the response is not successful and contains helper methods to handle common codes +_Wretch throws when the response is not successful and contains helper methods to handle common codes._ +```javascript wretch("anything") .get() .notFound(error => { /* ... */ }) @@ -109,20 +111,20 @@ wretch("anything") #### Because sending a json object should be easy. -```javascript -// With fetch you have to set the header, the method and the body manually +_With fetch you have to set the header, the method and the body manually._ +```javascript fetch("endpoint", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ "hello": "world" }) }).then(response => /* ... */) -// Omitting the data retrieval and error management parts +// Omitting the data retrieval and error management parts… ``` -```javascript -// With wretch, you have shorthands at your disposal +_With wretch, you have shorthands at your disposal._ +```javascript wretch("endpoint") .post({ "hello": "world" }) .res(response => /* ... */) @@ -130,9 +132,9 @@ wretch("endpoint") #### Because configuration should not rhyme with repetition. -```javascript -// A Wretch object is immutable which means that you can reuse configured instances +_A Wretch object is immutable which means that you can reuse configured instances._ +```javascript // Cross origin authenticated requests on an external API const externalApi = wretch("http://external.api") // Base url // Authorization header @@ -166,19 +168,20 @@ npm i wretch # or yarn/pnpm add wretch ## <script> tag -The package contains multiple bundles for each entry point and addon having their own extension: -- ESM -> `.min.js` -- CommonJS -> `.min.cjs` -- URM -> `.min.js` - -The bundles are located under the `dist/bundle` folder. +The package contains multiple bundles depending on the format and feature set located under the `/dist/bundle` folder. -**Flavours:** - - `wretch.min.js`: only the wretch core features - - `wretch.all.min.js`: wretch and all addons +> If you pick the core bundle, then to plug addons you must import them separately from `/dist/bundle/addons/[addonName].min.js` -If you picked the core bundle, addons can be added separately under `dist/bundle/addons/[addonName].min.js`. +| Feature set | Name | +| ------------------ | ------------------- | +| Core features only | `wretch.min.js` | +| Core + all addons | `wretch.all.min.js` | +| Format | Extension | +| -------- | ---------- | +| ESM | `.min.mjs` | +| CommonJS | `.min.cjs` | +| UMD | `.min.js` | ```html