feat!: new bundle setup & fixed development bundles (#167)

* feat: added issue template

* fix: move dev bundles to a specific folder

* docs: some documentation changes

* docs: updated issue template

* chore!: updated build setup

* style: formatted code

* chore: allow importing any file

.eslintignore

@@ -2,11 +2,9 @@
 coverage
 node_modules
 
-/umd
+# Output
-/cjs
-/esm
 /dist
-/types
+/dev
 
 # Random
 /ignore

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,50 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'bug: something is wrong :('
+labels: bug
+assignees: arthurfiorette
+---
+
+<!--
+README
+
+Make sure to enable development mode before creating a issue,
+as it can print out the reason for a specific behavior.
+
+https://axios-cache-interceptor.js.org/#/pages/development-mode
+-->
+
+### Describe the bug
+
+<!--
+A clear and concise description of what the bug is.
+-->
+
+### To Reproduce
+
+<!--
+Provide a clear and concise description of how to reproduce the bug.
+It can be in form of a unit test, a snippet of code, a sequence of
+steps or a minimum reproduction repository.
+
+https://minimum-reproduction.wtf/
+-->
+
+## Expected behavior
+
+<!--
+A clear and concise description of what you expected to happen.
+-->
+
+### Additional context
+
+- Axios: `E.g: v0.26.1`
+- Axios Cache Interceptor: `E.g: v0.9.3`
+- What storage is being used: `E.g: Web Storage`
+- Node Version: `E.g: v16.9.1`
+- Browser (if applicable): `E.g: Chrome 98`
+
+<!--
+Add any other context about the problem here.
+-->

.gitignore

@@ -2,11 +2,9 @@
 coverage
 node_modules
 
-/umd
+# Output
-/cjs
-/esm
 /dist
-/types
+/dev
 
 # Random
 /ignore

.npmignore

@@ -7,10 +7,7 @@
 
 !src/**
 
-!umd/**
+!dist/**
-!cjs/**
+!dev/**
-!esm/**
-
-!types/**
 
 !examples/runkit.js

.prettierignore

@@ -3,10 +3,7 @@ node_modules
 /ignore
 /coverage
 /dist
-/umd
+/dev
-/cjs
-/esm
-/types
 /tsconfig.json
 
 .yarn

build/build.sh

@@ -5,18 +5,16 @@
 
 echo "\nStarting build...\n"
 
-rm -rf cjs/ esm/ umd/ types/
+rm -rf dev/ dist/
-mkdir  cjs/ esm/ umd/ types/
+mkdir dev/ dist/
 
 echo "Target cleared...\n"
 
 webpack --config build/webpack.config.js &
 tsc -p build/tsconfig.types.json &
-echo "export * from '../types';" | tee \
+
-  esm/index.d.ts esm/dev.d.ts \
+# Add a simple index.d.ts file to type all dev builds
-  cjs/index.d.ts cjs/dev.d.ts \
+echo "export * from '../dist/index.d.ts';" | tee dev/index.d.ts > /dev/null &
-  umd/index.d.ts umd/dev.d.ts umd/es5.d.ts \
-  > /dev/null &
 
 wait
 

build/check.sh

@@ -5,11 +5,13 @@
 
 echo "\nStarting checking...\n"
 
-es-check es5 umd/es5.js &
+es-check es2015 umd/es5.js &
-es-check es6 umd/index.js cjs/index.js &
+
-es-check es2017 umd/dev.js cjs/dev.js &
+es-check es2017 umd/index.js cjs/index.js &
-es-check es2017 esm/dev.js --module &
+es-check es2017 esm/index.js --module &
-es-check es6 esm/index.js --module &
+
+es-check es2020 dev/index.umd.js dev/index.cjs &
+es-check es2020 dev/index.mjs --module &
 
 wait
 

build/tsconfig.types.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "emitDeclarationOnly": true,
-    "outDir": "../types",
+    "outDir": "../dist",
     "declaration": true,
     "declarationMap": true
   },

build/webpack.config.js

@@ -10,7 +10,7 @@ const root = (...p) => path.resolve(__dirname, '..', ...p);
 /**
  * @param {{
  *   output: string;
- *   esTarget: string;
+ *   esTarget?: string;
  *   libraryType: import('webpack').LibraryOptions['type'];
  *   libraryName?: import('webpack').LibraryOptions['name'];
  *   inlineDeps?: boolean;
@@ -20,7 +20,7 @@ const root = (...p) => path.resolve(__dirname, '..', ...p);
  */
 const config = ({
   output,
-  esTarget,
+  esTarget = 'es2017',
   libraryType,
   libraryName,
   inlineDeps = false,
@@ -33,7 +33,7 @@ const config = ({
   output: {
     path: root(),
     globalObject: `typeof self !== 'undefined' ? self : this`,
-    filename: output + '.js',
+    filename: output,
     sourceMapFilename: output + '.map',
     chunkFormat: 'module',
     module: libraryType === 'module',
@@ -60,7 +60,7 @@ const config = ({
   module: {
     rules: [
       {
-        include: root('src'),
+        include: /src|node_modules/,
         test: /\.(ts|js)$/,
         loader: 'ts-loader',
         options: {
@@ -88,14 +88,12 @@ const config = ({
 module.exports = [
   // ESModule
   config({
-    esTarget: 'es2017',
+    output: 'dist/index.mjs',
-    output: 'esm/index',
     libraryType: 'module',
     inlineDeps: true
   }),
   config({
-    esTarget: 'es2020',
+    output: 'dev/index.mjs',
-    output: 'esm/dev',
     libraryType: 'module',
     inlineDeps: true,
     devBuild: true
@@ -103,14 +101,12 @@ module.exports = [
 
   // CommonJS
   config({
-    esTarget: 'es2017',
+    output: 'dist/index.cjs',
-    output: 'cjs/index',
     libraryType: 'commonjs2',
     inlineDeps: true
   }),
   config({
-    esTarget: 'es2020',
+    output: 'dev/index.cjs',
-    output: 'cjs/dev',
     libraryType: 'commonjs2',
     inlineDeps: true,
     devBuild: true
@@ -118,22 +114,15 @@ module.exports = [
 
   // UMD
   config({
-    esTarget: 'es2017',
+    esTarget: 'es5', // Use ES6 for UMD builds to support more browsers
-    output: 'umd/index',
+    output: 'dist/index.umd.js',
     libraryType: 'umd',
     libraryName: 'AxiosCacheInterceptor'
   }),
   config({
-    esTarget: 'es2020',
+    output: 'dev/index.umd.js',
-    output: 'umd/dev',
     libraryType: 'umd',
     libraryName: 'AxiosCacheInterceptor',
     devBuild: true
-  }),
-  config({
-    esTarget: 'es5',
-    output: 'umd/es5',
-    libraryType: 'umd',
-    libraryName: 'AxiosCacheInterceptor'
   })
 ];

docs/config/sidebar.md

@@ -1,7 +1,7 @@
 - Getting Started
 
   - [Homepage](/ 'Homepage')
-  - [Try it out!](pages/try-it-out.md 'Try axios-cache-interceptor in your browser!')
+  - [Getting started](pages/getting-started.md 'Getting Started')
   - [Installing](pages/installing.md 'Installing')
   - [Usage & examples](pages/usage-examples.md 'Usage and examples')
   - [Storages](pages/storages.md 'Custom storages')
@@ -17,7 +17,6 @@
 
   - [Development mode](pages/development-mode.md 'Development mode')
   - [Typescript users](pages/typescript-users.md 'Typescript users')
-  - [Compiled code](pages/compiled-code.md 'Compiled code')
   - [Comparison](pages/comparison.md 'Comparison')
 
 - Other

docs/pages/compiled-code.md

@@ -1,65 +0,0 @@
-# Compiled code
-
-## CommonJS
-
-The code compiled with `CommonJS` is for ES2017+.
-
-```js
-import { setupCache } from 'axios-cache-interceptor'; // (Defaults to cjs)
-import { setupCache } from 'axios-cache-interceptor/cjs';
-```
-
-## UMD
-
-> _NOTE_: Axios itself requires [ES6 Promises](https://axios-http.com/docs/notes#promises)
-
-The UMD code is compiled with `webpack` to support `>= ES5`. See the
-[build config](build/webpack.config.js). You can import these files anywhere (Browser,
-CommonsJS, ESM and more)
-
-- `axios-cache-interceptor/umd/index.js`: Production file for ES2017+
-- `axios-cache-interceptor/umd/dev.js`: Development file (ES2020+)
-- `axios-cache-interceptor/umd/es5.js`: Production file for ES5+
-
-```html
-<!-- You can also use the cdn of your choice -->
-
-<!-- UNPKG -->
-<script src="https://unpkg.com/axios-cache-interceptor"></script>
-
-<!-- JSDELIVR -->
-<script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor"></script>
-
-<!-- Etc... -->
-```
-
-```js
-import { setupCache } from 'axios-cache-interceptor/umd';
-```
-
-## ESModule
-
-The code compiled with `ESModule` is for ES2017+.
-
-This library exports its `ESM` code at `axios-cache-interceptor/esm`. It's useful to
-enable _tree-shaking_ and other optimizations. You probably won't have to directly import
-from this folder, instead, bundlers should do that for you.
-
-```js
-import { setupCache } from 'axios-cache-interceptor/esm';
-```
-
-## Development bundles
-
-All development bundles are compiled with support for ES2020+, and are available as UMD,
-CJS and ESM.
-
-```js
-import { setupCache } from 'axios-cache-interceptor/esm/dev';
-const { setupCache } = require('axios-cache-interceptor/umd/dev');
-
-// https://cdn.jsdelivr.net/npm/axios-cache-interceptor/umd/dev.js
-const { setupCache } = window.AxiosCacheInterceptor;
-```
-
-See more about them at [Development mode](pages/development-mode.md)

docs/pages/development-mode.md

@@ -1,48 +1,26 @@
 # Development
 
-For development, debug and testing purposes, you can opt to use the **Development mode**.
+#### TL;DR: `import { setupCache } from 'axios-cache-interceptor/dev';`
 
-It brings some extra features to our built code, like the `debug` option, source maps,
+All debugging information is emitted into a different bundle, this way it's possible to
-fewer code and etc.
+prevent unnecessary code from being bundled into the production build.
 
-You can enable it basically by using `/dev` at the end of the import path.
+Checkout how it helps debugging:
 
-```js
+```js #runkit
-import { setupCache } from 'axios-cache-interceptor/esm/dev';
+const Axios = require('axios');
-const { setupCache } = require('axios-cache-interceptor/umd/dev');
+const { setupCache } = require('axios-cache-interceptor/dev');
 
-// https://cdn.jsdelivr.net/npm/axios-cache-interceptor/umd/dev.js
+const axios = setupCache(Axios, {
-const { setupCache } = window.AxiosCacheInterceptor;
+  // Print all debug information to the console
-```
-
-## Debug option
-
-The debug option will print debug information in the console. It is good if you need to
-trace any undesired behavior or issue.
-
-You can enable it by setting `debug` to a function that receives an string.
-
-```js
-// Will print debug info in the console.
-setupCache(axios, {
   debug: console.log
 });
 
-// own logger or whatever.
+const req1 = axios.get('https://jsonplaceholder.typicode.com/posts/1');
-setupCache(axios, {
+const req2 = axios.get('https://jsonplaceholder.typicode.com/posts/1');
-  debug: (message) => {
-    // Etc
-    myCustomLogger.emit({
-      key: 'axios-cache-interceptor',
-      log: message
-    });
-  }
-});
 
-// Disables debug.
+const [res1, res2] = await Promise.all([req1, req2]);
-setupCache(axios, {
+
-  debug: undefined
+console.log('Request 1:', res1.cached);
-});
+console.log('Request 2:', res2.cached);
-// or
-axiosCacheInstance.debug = undefined;
 ```

docs/pages/getting-started.md

@@ -0,0 +1,92 @@
+# Getting Started
+
+This library prevents every request made from being sent over the network. This is done by
+intercepting all requests and analyzing each one to see if that request has been made
+before. If it has, it will check if its not expired and return the cached response. If it
+hasn't, it will send the request over the network, as axios would do normally, and cache
+the response received for future requests.
+
+This library preserves 100% of the axios api, so after applying it with
+[`setupCache()`](pages/usage-examples#applying), your code won't change or break.
+
+```js #runkit
+const Axios = require('axios');
+const {
+  setupCache,
+  buildMemoryStorage,
+  defaultKeyGenerator,
+  defaultHeaderInterpreter
+} = require('axios-cache-interceptor');
+
+const axios = setupCache(
+  // axios instance
+  Axios.create(),
+
+  // All options with their default values
+  {
+    // The storage to save the cache data. There are more available by default.
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/storages
+    storage: buildMemoryStorage(),
+
+    // The mechanism to generate a unique key for each request.
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/request-id
+    generateKey: defaultKeyGenerator,
+
+    // The mechanism to interpret headers (when cache.interpretHeader is true).
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=headerinterpreter
+    headerInterpreter: defaultHeaderInterpreter,
+
+    // The function that will receive debug information.
+    // NOTE: For this to work, you need to enable development mode.
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/development-mode
+    // https://axios-cache-interceptor.js.org/#/pages/global-configuration?id=debug
+    debug: undefined
+  }
+);
+
+const { data } = await axios.get('url', {
+  // All per-request options lives under the `cache` property.
+  cache: {
+    // The time until the cached value is expired in milliseconds.
+    ttl: 1000 * 60 * 5,
+
+    // If the request should configure the cache based on some standard cache headers, Like
+    // Cache-Control, Expires and so on...
+    interpretHeader: false,
+
+    // All methods that should activate cache behaviors. If the method is not in this list,
+    // it will be completely ignored.
+    methods: ['get'],
+
+    // A predicate object that will be used in each request to determine if the request can
+    // be cached or not.
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/per-request-configuration?id=cachecachepredicate
+    cachePredicate: {
+      statusCheck: (status) => status >= 200 && status < 400
+    },
+
+    // All requests that should have their cache updated once this request is resolved.
+    // Normally used to update similar requests or records with newer data.
+    //
+    // https://axios-cache-interceptor.js.org/#/pages/per-request-configuration?id=cacheupdate
+    update: {},
+
+    // If the support for ETag and If-None-Match headers is active. You can use a string to
+    // force a custom value for the ETag response.
+    //
+    etag: false,
+
+    // If we should interpret the If-Modified-Since header when generating a TTL value.
+    modifiedSince: false,
+
+    // If we should return a old (possibly expired) cache when the current request failed
+    // to get a valid response because of a network error, invalid status or etc.
+    staleIfError: false
+  }
+});
+```

docs/pages/global-configuration.md

@@ -70,3 +70,37 @@ sort of custom implementation, it is not guaranteed to any other documented thin
 
 At this moment, you can see their code for more information
 [here](https://github.com/arthurfiorette/axios-cache-interceptor/tree/main/src/interceptors).
+
+## `debug`
+
+> This option only works when targeting a [Development](pages/development-mode.md) build.
+
+The debug option will print debug information in the console. It is good if you need to
+trace any undesired behavior or issue.
+
+You can enable it by setting `debug` to a function that receives an string.
+
+```js
+// Will print debug info in the console.
+setupCache(axios, {
+  debug: console.log
+});
+
+// own logger or whatever.
+setupCache(axios, {
+  debug: (message) => {
+    // Etc
+    myCustomLogger.emit({
+      key: 'axios-cache-interceptor',
+      log: message
+    });
+  }
+});
+
+// Disables debug.
+setupCache(axios, {
+  debug: undefined
+});
+// or
+axiosCacheInstance.debug = undefined;
+```

docs/pages/installing.md

@@ -14,40 +14,29 @@ yarn add axios axios-cache-interceptor
 ```
 
 ```js
-// CommonJS
+// CommonJS (ES2017+)
 const { setupCache } = require('axios-cache-interceptor');
+
+// EcmaScript (ES2017+)
 import { setupCache } from 'axios-cache-interceptor';
-
-// ES Modules
-import { setupCache } from 'axios-cache-interceptor/esm';
-
-// Universal (UMD)
-const { setupCache } = require('axios-cache-interceptor/umd');
 ```
 
 ## With CDN
 
 ```html
-<!-- Development build for ES2020+ (~11.2 KiB) -->
+<!-- Development build for ES2017+ (~11.2 KiB) -->
 <script
-  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.3/umd/dev.js"
+  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.4/dev/index.umd.js"
   integrity="sha256-rA/FnVuUARurz1Bf4Z39FYKwRxwof9EyDXUvNXpme7Y="
   crossorigin="anonymous"
 ></script>
 
-<!-- Production for ES2017+ (~9.74 KiB) -->
+<!-- Production for ES5+ (~9.74 KiB) -->
 <script
-  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.3/umd/index.js"
+  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.4/dist/index.umd.js"
   integrity="sha256-j8ypa8+fqXmln3IeNAFQt5ptzfkOettceB7qQmIDIW4="
   crossorigin="anonymous"
 ></script>
-
-<!-- Production for ES5+ (~13.9 KiB) (Needs Promise polyfill) -->
-<script
-  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.3/umd/es5.js"
-  integrity="sha256-UCAsKcSsVNscI3Zydh5pmQt3QtRdLP4cF4rUwq0KLDY="
-  crossorigin="anonymous"
-></script>
 ```
 
 ```js
@@ -60,10 +49,10 @@ You can import any [CDN Url](#with-cdns) and use it in your code. **UMD Compatib
 
 ```js
 // ESM with Skypack CDN
-import { setupCache } from 'https://cdn.skypack.dev/axios-cache-interceptor@0.9.3';
+import { setupCache } from 'https://cdn.skypack.dev/axios-cache-interceptor@0.9.4';
 
 // UMD with JSDeliver CDN
-import { setupCache } from 'https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.3/umd/index.js';
+import { setupCache } from 'https://cdn.jsdelivr.net/npm/axios-cache-interceptor@0.9.4/dist/index.mjs';
 ```
 
 ## Official support table

docs/pages/license.md

@@ -1,7 +1,5 @@
 Licensed under the **MIT**.
 
-[LICENSE](_license.md ':include :type=code')
-
 <p align="center">
   <a
     href="https://app.fossa.com/projects/git%2Bgithub.com%2Farthurfiorette%2Faxios-cache-interceptor?ref=badge_large"
@@ -10,3 +8,5 @@ Licensed under the **MIT**.
       src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Farthurfiorette%2Faxios-cache-interceptor.svg?type=large"
   /></a>
 </p>
+
+[LICENSE](_license.md ':include :type=code')

docs/pages/try-it-out.md

@@ -1,11 +0,0 @@
-# Try it out!
-
-```js #runkit
-const Axios = require('axios');
-const { setupCache, buildWebStorage } = require('axios-cache-interceptor');
-
-const axios = Axios.create({});
-setupCache(axios, {});
-
-const result = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
-```

docs/pages/usage-examples.md

@@ -23,7 +23,7 @@ There are two types of axios instances, the `AxiosStatic` and the `AxiosInstance
 get when you call `axios.create()`.
 
 Both of them work seamlessly, but when messing with the axios static, your hole code,
-_including those libraries you don't know that their exists_, are also affected. **You
+_including those libraries you don't even know that they exists_, are also affected. **You
 should be careful when using it.**
 
 ```js

package.json

@@ -3,20 +3,24 @@
   "version": "0.9.3",
   "description": "Cache interceptor for axios",
   "license": "MIT",
-  "main": "./cjs/index.js",
+  "main": "./dist/index.cjs",
-  "types": "./cjs/index.d.ts",
+  "types": "./dist/index.d.ts",
-  "module": "./esm/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
+    "./*": "./*",
+    "./package.json": "./package.json",
     ".": {
-      "import": "./esm/index.js",
+      "import": "./dist/index.mjs",
-      "require": "./cjs/index.js",
+      "require": "./dist/index.cjs"
-      "default": "./umd/index.js"
     },
-    "./package.json": "./package.json"
+    "./dev": {
+      "import": "./dev/index.mjs",
+      "require": "./dev/index.cjs"
+    }
   },
-  "browser": "./umd/index.js",
+  "browser": "./dist/index.umd.js",
-  "jsdelivr": "./umd/index.js",
+  "jsdelivr": "./dist/index.umd.js",
-  "unpkg": "./umd/index.js",
+  "unpkg": "./dist/index.umd.js",
   "sideEffects": false,
   "runkitExampleFilename": "./examples/runkit.js",
   "scripts": {

src/index.ts

@@ -30,7 +30,6 @@ declare global {
 
 if (__ACI_DEV__) {
   console.error(
-    'You are using a development build. Make sure to use the correct build in production'
+    'You are using a development build. Make sure to use the correct build in production\nhttps://axios-cache-interceptor.js.org/#/pages/installing\n\n'
   );
-  console.error('https://axios-cache-interceptor.js.org/#/pages/installing');
 }

tsconfig.json

@@ -37,7 +37,7 @@
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    "allowJs": true,                                     /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */