🎨 Improved packaging and bundling

package.json

@@ -16,10 +16,59 @@
   "bugs": {
     "url": "https://github.com/elbywan/wretch/issues"
   },
-  "main": "./dist/bundle/wretch.js",
+  "type": "module",
+  "main": "./dist/bundle/wretch.min.cjs",
   "module": "./dist/index.js",
-  "jsnext:main": "./dist/index.js",
+  "browser": "./dist/bundle/wretch.min.js",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/*",
+        "dist/*/index.d.ts",
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": {
+        "require": "./dist/bundle/wretch.min.cjs",
+        "import": "./dist/bundle/wretch.min.mjs"
+      },
+      "browser": "./dist/bundle/wretch.min.js",
+      "import": "./dist/index.js"
+    },
+    "./all": {
+      "types": "./dist/index.all.d.ts",
+      "node": {
+        "require": "./dist/bundle/wretch.all.min.cjs",
+        "import": "./dist/bundle/wretch.all.min.mjs"
+      },
+      "browser": "./dist/bundle/wretch.all.min.js",
+      "import": "./dist/index.all.js"
+    },
+    "./addons/*": {
+      "types": "./dist/addons/*.d.ts",
+      "node": {
+        "require": "./dist/bundle/addons/*.min.cjs",
+        "import": "./dist/bundle/addons/*.min.mjs"
+      },
+      "browser": "./dist/bundle/addons/*.min.js",
+      "import": "./dist/addons/*.js"
+    },
+    "./package.json": "./package.json",
+    "./*.mjs": {
+      "default": "./dist/*.mjs"
+    },
+    "./*.cjs": {
+      "default": "./dist/*.cjs"
+    },
+    "./*": {
+      "default": "./dist/*.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -28,10 +77,10 @@
     "lint": "tslint -p tsconfig.json -t codeFrame",
     "fix": "tslint --fix -p tsconfig.json -t codeFrame",
     "prebuild": "rimraf dist && rimraf coverage && npm run lint",
-    "build": "tsc -p . && rollup -c && rollup -c --format esm -o dist/bundle/wretch.esm.js",
-    "mock": "node scripts/mockServer.js",
+    "build": "tsc -p . && rollup -c",
+    "mock": "node scripts/mockServer.cjs",
     "test": "concurrently --success first -k jest \"npm run mock\"",
-    "test-browsers": "rollup -c -o test/browser/src/wretch.min.js && concurrently -s first -k browserstack-runner \"npm run mock\"",
+    "test-browsers": "concurrently -s first -k browserstack-runner \"npm run mock\"",
     "changelog": "conventional-changelog -p wretch -i CHANGELOG.md -s -r 0"
   },
   "author": "Julien Elbaz",
@@ -83,7 +132,7 @@
       "src/*.{js,ts}"
     ],
     "coveragePathIgnorePatterns": [
-      "src/index.umd.ts"
+      "src/index.all.ts"
     ]
   }
 }

rollup.config.js

@@ -2,17 +2,9 @@ import typescript from "rollup-plugin-typescript"
 import { terser } from "rollup-plugin-terser"
 import nodeResolve from "rollup-plugin-node-resolve"
 
-export default {
-  input: "./src/index.umd.ts",
-  output: [
-    {
-      file: "dist/bundle/wretch.js",
-      format: "umd",
-      name: "wretch",
-      exports: "default",
-      sourcemap: true
-    }
-  ],
+const addons = ["abort", "formData", "formUrl", "perfs", "queryString"]
+
+const common = {
   plugins: [
     typescript({
       typescript: require("typescript"),
@@ -26,4 +18,60 @@ export default {
     })
   ],
   external: ["url"]
-}
+}
+
+const formats = ["umd", "cjs", "esm"]
+const outputs = output => formats.map(format => ({
+  ...output,
+  format,
+  file:
+    format === "cjs" ? output.file.replace(".js", ".cjs") :
+      format === "esm" ? output.file.replace(".js", ".mjs") :
+        output.file
+}))
+
+export default [
+  {
+    input: "./src/index.ts",
+    output: outputs({
+      file: "dist/bundle/wretch.min.js",
+      format: "umd",
+      name: "wretch",
+      exports: "default",
+      sourcemap: true
+    }),
+    ...common
+  },
+  {
+    input: "./src/index.all.ts",
+    output: [
+      ...outputs({
+        file: "dist/bundle/wretch.all.min.js",
+        format: "umd",
+        name: "wretch",
+        exports: "default",
+        sourcemap: true
+      }),
+      // For tests
+      {
+        file: "test/browser/src/wretch.all.min.js",
+        format: "umd",
+        name: "wretch",
+        exports: "default",
+        sourcemap: true
+      }
+    ],
+    ...common
+  },
+  ...addons.map(addon => ({
+    input: `./src/addons/${addon}.ts`,
+    output: outputs({
+      file: `dist/bundle/addons/${addon}.min.js`,
+      format: "umd",
+      name: `wretchAddon${addon.charAt(0).toLocaleUpperCase() + addon.slice(1)}`,
+      exports: "default",
+      sourcemap: true
+    }),
+    ...common
+  }))
+]

scripts/mockServer.cjs

@@ -0,0 +1,2 @@
+const server = require("../test/mock.cjs")
+server.launch(9876)

src/addons/abort.ts

@@ -1,15 +1,15 @@
-import type { WretchResponseChain } from "../resolver"
-import type { Wretch, WretchAddon, WretchErrorCallback } from "../types"
+import type { WretchResponseChain } from "../resolver.js"
+import type { Wretch, WretchAddon, WretchErrorCallback } from "../types.js"
 
-interface AbortWretch {
+export interface AbortWretch {
   /**
    * Associates a custom signal with the request.
    * @param controller - An AbortController
    */
   signal: <T extends AbortWretch, C>(this: T & Wretch<T, C>, controller: AbortController) => this
 }
 
-interface AbortResolver {
+export interface AbortResolver {
   /**
    * Aborts the request after a fixed time.
    *

src/addons/formData.ts

@@ -1,6 +1,6 @@
-import type { Wretch } from "../core"
-import type { Config } from "../config"
-import type { WretchAddon } from "../types"
+import type { Wretch } from "../core.js"
+import type { Config } from "../config.js"
+import type { WretchAddon } from "../types.js"
 
 function convertFormData(
   formObject: object,
@@ -36,15 +36,15 @@ function convertFormData(
   return formData
 }
 
-interface FormData {
+export interface FormDataAddon {
   /**
    * Converts the javascript object to a FormData and sets the request body.
    * @param formObject - An object which will be converted to a FormData
    * @param recursive - If `true`, will recurse through all nested objects
    * Can be set as an array of string to exclude specific keys.
    * @see https://github.com/elbywan/wretch/issues/68 for more details.
    */
-  formData<T extends FormData, C>(this: T & Wretch<T, C>, formObject: object, recursive?: string[] | boolean): this
+  formData<T extends FormDataAddon, C>(this: T & Wretch<T, C>, formObject: object, recursive?: string[] | boolean): this
 }
 
 /**
@@ -56,7 +56,7 @@ interface FormData {
  * wretch().addon(FormDataAddon)
  * ```
  */
-const formData: WretchAddon<FormData> = {
+const formData: WretchAddon<FormDataAddon> = {
   wretch: {
     formData(formObject, recursive = false) {
       return this.body(convertFormData(formObject, recursive, this._config))

src/addons/formUrl.ts

@@ -1,5 +1,5 @@
-import type { Wretch } from "../core"
-import type { WretchAddon } from "../types"
+import type { Wretch } from "../core.js"
+import type { WretchAddon } from "../types.js"
 
 function encodeQueryValue(key: string, value: unknown) {
   return encodeURIComponent(key) +
@@ -22,14 +22,14 @@ function convertFormUrl(formObject: object) {
     .join("&")
 }
 
-interface FormUrl {
+export interface FormUrlAddon {
   /**
    * Converts the input to an url encoded string and sets the content-type header and body.
    * If the input argument is already a string, skips the conversion part.
    *
    * @param input - An object to convert into an url encoded string or an already encoded string
    */
-  formUrl<T extends FormUrl, C>(this: T & Wretch<T, C>, input: (object | string)): this
+  formUrl<T extends FormUrlAddon, C>(this: T & Wretch<T, C>, input: (object | string)): this
 }
 
 /**
@@ -41,7 +41,7 @@ interface FormUrl {
  * wretch().addon(FormUrlAddon)
  * ```
  */
-const formUrl: WretchAddon<FormUrl> = {
+const formUrl: WretchAddon<FormUrlAddon> = {
   wretch: {
     formUrl(input) {
       return this

src/addons/index.ts

@@ -0,0 +1,10 @@
+export { default as abortAddon } from "./abort.js"
+export type { AbortWretch, AbortResolver } from "./abort.js"
+export { default as formDataAddon } from "./formData.js"
+export type { FormDataAddon } from "./formData.js"
+export { default as formUrlAddon } from "./formUrl.js"
+export type { FormUrlAddon } from "./formUrl.js"
+export { default as perfsAddon } from "./perfs.js"
+export type { PerfsAddon } from "./perfs.js"
+export { default as queryStringAddon } from "./queryString.js"
+export type { QueryStringAddon } from "./queryString.js"

src/addons/perfs.ts

@@ -1,5 +1,5 @@
-import type { WretchResponseChain } from "../resolver"
-import type { WretchAddon } from "../types"
+import type { WretchResponseChain } from "../resolver.js"
+import type { WretchAddon } from "../types.js"
 
 const onMatch = (entries, name, callback, _performance) => {
   if (!entries.getEntriesByName)
@@ -57,13 +57,13 @@ const utils = {
   }
 }
 
-interface Perfs {
+export interface PerfsAddon {
   /**
    * Performs a callback on the API performance timings of the request.
    *
    * Warning: Still experimental on browsers and node.js
    */
-  perfs: <T, C extends Perfs>(this: C & WretchResponseChain<T, C>, cb?: (timing: any) => void) => this,
+  perfs: <T, C extends PerfsAddon>(this: C & WretchResponseChain<T, C>, cb?: (timing: any) => void) => this,
 }
 
 /**
@@ -75,7 +75,7 @@ interface Perfs {
  * wretch().addon(PerfsAddon())
  * ```
  */
-const perfs: () => WretchAddon<unknown, Perfs> = () => ({
+const perfs: () => WretchAddon<unknown, PerfsAddon> = () => ({
   resolver: {
     perfs(cb) {
       this.fetchRequest.then(res => utils.observe(res.url, cb, this.wretchRequest._config)).catch(() => {/* swallow */ })

src/addons/queryString.ts

@@ -1,4 +1,4 @@
-import type { Wretch, Config, WretchAddon } from "../types"
+import type { Wretch, Config, WretchAddon } from "../types.js"
 
 const appendQueryParams = (url: string, qp: object | string, replace: boolean, config: Config) => {
   let queryString: string
@@ -29,7 +29,7 @@ const appendQueryParams = (url: string, qp: object | string, replace: boolean, c
   return url + "&" + queryString
 }
 
-interface QueryString {
+export interface QueryStringAddon {
   /**
    * Converts a javascript object to query parameters,
    * then appends this query string to the current url.
@@ -51,7 +51,7 @@ interface QueryString {
    *
    * @param qp - An object which will be converted, or a string which will be used verbatim.
    */
-  query<T extends QueryString, C>(this: T & Wretch<T, C>, qp: object | string, replace?: boolean): this
+  query<T extends QueryStringAddon, C>(this: T & Wretch<T, C>, qp: object | string, replace?: boolean): this
 }
 
 /**
@@ -63,7 +63,7 @@ interface QueryString {
  * wretch().addon(QueryAddon)
  * ```
  */
-const queryString: WretchAddon<QueryString> = {
+const queryString: WretchAddon<QueryStringAddon> = {
   wretch: {
     query(qp, replace = false) {
       return this.clone({ url: appendQueryParams(this._url, qp, replace, this._config) })

src/config.ts

@@ -1,4 +1,4 @@
-import { mix } from "./utils"
+import { mix } from "./utils.js"
 
 declare const global
 

src/core.ts

@@ -1,11 +1,11 @@
-import { mix, extractContentType, isLikelyJsonMime } from "./utils"
-import * as Constants from "./constants"
-import { resolver } from "./resolver"
-import config from "./config"
-import type { Config } from "./config"
-import type { WretchError, WretchOptions, WretchDeferredCallback, WretchAddon } from "./types"
-import type { WretchResponseChain } from "./resolver"
-import type { ConfiguredMiddleware } from "./middleware"
+import { mix, extractContentType, isLikelyJsonMime } from "./utils.js"
+import * as Constants from "./constants.js"
+import { resolver } from "./resolver.js"
+import config from "./config.js"
+import type { Config } from "./config.js"
+import type { WretchError, WretchOptions, WretchDeferredCallback, WretchAddon } from "./types.js"
+import type { WretchResponseChain } from "./resolver.js"
+import type { ConfiguredMiddleware } from "./middleware.js"
 
 /**
  * The Wretch object used to perform easy fetch requests.

src/index.all.ts

@@ -0,0 +1,19 @@
+import { setDefaults, setErrorType, setPolyfills } from "./config.js"
+import { core } from "./core.js"
+import * as Addons from "./addons/index.js"
+
+function factory(url = "", options = {}) {
+  return core
+    .clone({ url, options })
+    .addon(Addons.abortAddon())
+    .addon(Addons.formDataAddon)
+    .addon(Addons.formUrlAddon)
+    .addon(Addons.perfsAddon())
+    .addon(Addons.queryStringAddon)
+}
+
+factory["default"] = factory
+factory.defaults = setDefaults
+factory.errorType = setErrorType
+factory.polyfills = setPolyfills
+export default factory