diff --git a/.eslintignore b/.eslintignore index 4c7578bd..6cf0862a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,11 +2,9 @@ coverage node_modules -/umd -/cjs -/esm +# Output /dist -/types +/dev # Random /ignore diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..40ffaa71 --- /dev/null +++ b/.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 +--- + + + +### Describe the bug + + + +### To Reproduce + + + +## Expected behavior + + + +### 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` + + diff --git a/.gitignore b/.gitignore index beb7b035..5f747297 100644 --- a/.gitignore +++ b/.gitignore @@ -2,11 +2,9 @@ coverage node_modules -/umd -/cjs -/esm +# Output /dist -/types +/dev # Random /ignore diff --git a/.npmignore b/.npmignore index 00189100..41cd8c9b 100644 --- a/.npmignore +++ b/.npmignore @@ -7,10 +7,7 @@ !src/** -!umd/** -!cjs/** -!esm/** +!dist/** +!dev/** -!types/** - -!examples/runkit.js \ No newline at end of file +!examples/runkit.js diff --git a/.prettierignore b/.prettierignore index c6b98ea3..b38f7d95 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,10 +3,7 @@ node_modules /ignore /coverage /dist -/umd -/cjs -/esm -/types +/dev /tsconfig.json .yarn diff --git a/build/build.sh b/build/build.sh index 6cb56476..7ab7bf17 100644 --- a/build/build.sh +++ b/build/build.sh @@ -5,18 +5,16 @@ echo "\nStarting build...\n" -rm -rf cjs/ esm/ umd/ types/ -mkdir cjs/ esm/ umd/ types/ +rm -rf dev/ dist/ +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 \ - cjs/index.d.ts cjs/dev.d.ts \ - umd/index.d.ts umd/dev.d.ts umd/es5.d.ts \ - > /dev/null & + +# Add a simple index.d.ts file to type all dev builds +echo "export * from '../dist/index.d.ts';" | tee dev/index.d.ts > /dev/null & wait diff --git a/build/check.sh b/build/check.sh index 70a0227b..e8c600db 100644 --- a/build/check.sh +++ b/build/check.sh @@ -5,11 +5,13 @@ echo "\nStarting checking...\n" -es-check es5 umd/es5.js & -es-check es6 umd/index.js cjs/index.js & -es-check es2017 umd/dev.js cjs/dev.js & -es-check es2017 esm/dev.js --module & -es-check es6 esm/index.js --module & +es-check es2015 umd/es5.js & + +es-check es2017 umd/index.js cjs/index.js & +es-check es2017 esm/index.js --module & + +es-check es2020 dev/index.umd.js dev/index.cjs & +es-check es2020 dev/index.mjs --module & wait diff --git a/build/tsconfig.types.json b/build/tsconfig.types.json index 324211c9..576960df 100644 --- a/build/tsconfig.types.json +++ b/build/tsconfig.types.json @@ -2,7 +2,7 @@ "extends": "../tsconfig.json", "compilerOptions": { "emitDeclarationOnly": true, - "outDir": "../types", + "outDir": "../dist", "declaration": true, "declarationMap": true }, diff --git a/build/webpack.config.js b/build/webpack.config.js index 919c9c69..40e44eb7 100644 --- a/build/webpack.config.js +++ b/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: 'esm/index', + output: 'dist/index.mjs', libraryType: 'module', inlineDeps: true }), config({ - esTarget: 'es2020', - output: 'esm/dev', + output: 'dev/index.mjs', libraryType: 'module', inlineDeps: true, devBuild: true @@ -103,14 +101,12 @@ module.exports = [ // CommonJS config({ - esTarget: 'es2017', - output: 'cjs/index', + output: 'dist/index.cjs', libraryType: 'commonjs2', inlineDeps: true }), config({ - esTarget: 'es2020', - output: 'cjs/dev', + output: 'dev/index.cjs', libraryType: 'commonjs2', inlineDeps: true, devBuild: true @@ -118,22 +114,15 @@ module.exports = [ // UMD config({ - esTarget: 'es2017', - output: 'umd/index', + esTarget: 'es5', // Use ES6 for UMD builds to support more browsers + output: 'dist/index.umd.js', libraryType: 'umd', libraryName: 'AxiosCacheInterceptor' }), config({ - esTarget: 'es2020', - output: 'umd/dev', + output: 'dev/index.umd.js', libraryType: 'umd', libraryName: 'AxiosCacheInterceptor', devBuild: true - }), - config({ - esTarget: 'es5', - output: 'umd/es5', - libraryType: 'umd', - libraryName: 'AxiosCacheInterceptor' }) ]; diff --git a/docs/config/sidebar.md b/docs/config/sidebar.md index c662d6e2..d83542fc 100644 --- a/docs/config/sidebar.md +++ b/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 diff --git a/docs/pages/compiled-code.md b/docs/pages/compiled-code.md deleted file mode 100644 index 699e9f3d..00000000 --- a/docs/pages/compiled-code.md +++ /dev/null @@ -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 - - - - - - - - - -``` - -```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) diff --git a/docs/pages/development-mode.md b/docs/pages/development-mode.md index ac54ebd8..efd8d651 100644 --- a/docs/pages/development-mode.md +++ b/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, -fewer code and etc. +All debugging information is emitted into a different bundle, this way it's possible to +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 -import { setupCache } from 'axios-cache-interceptor/esm/dev'; -const { setupCache } = require('axios-cache-interceptor/umd/dev'); +```js #runkit +const Axios = require('axios'); +const { setupCache } = require('axios-cache-interceptor/dev'); -// https://cdn.jsdelivr.net/npm/axios-cache-interceptor/umd/dev.js -const { setupCache } = window.AxiosCacheInterceptor; -``` - -## 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, { +const axios = setupCache(Axios, { + // Print all debug information to the console debug: console.log }); -// own logger or whatever. -setupCache(axios, { - debug: (message) => { - // Etc - myCustomLogger.emit({ - key: 'axios-cache-interceptor', - log: message - }); - } -}); +const req1 = axios.get('https://jsonplaceholder.typicode.com/posts/1'); +const req2 = axios.get('https://jsonplaceholder.typicode.com/posts/1'); -// Disables debug. -setupCache(axios, { - debug: undefined -}); -// or -axiosCacheInstance.debug = undefined; +const [res1, res2] = await Promise.all([req1, req2]); + +console.log('Request 1:', res1.cached); +console.log('Request 2:', res2.cached); ``` diff --git a/docs/pages/getting-started.md b/docs/pages/getting-started.md new file mode 100644 index 00000000..1ac4c9ab --- /dev/null +++ b/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 + } +}); +``` diff --git a/docs/pages/global-configuration.md b/docs/pages/global-configuration.md index 8b78991a..9cedb37a 100644 --- a/docs/pages/global-configuration.md +++ b/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; +``` diff --git a/docs/pages/installing.md b/docs/pages/installing.md index 536cb879..f568e960 100644 --- a/docs/pages/installing.md +++ b/docs/pages/installing.md @@ -14,40 +14,29 @@ yarn add axios axios-cache-interceptor ``` ```js -// CommonJS +// CommonJS (ES2017+) const { setupCache } = require('axios-cache-interceptor'); -import { setupCache } from 'axios-cache-interceptor'; - -// ES Modules -import { setupCache } from 'axios-cache-interceptor/esm'; -// Universal (UMD) -const { setupCache } = require('axios-cache-interceptor/umd'); +// EcmaScript (ES2017+) +import { setupCache } from 'axios-cache-interceptor'; ``` ## With CDN ```html - + - + - - - ``` ```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 diff --git a/docs/pages/license.md b/docs/pages/license.md index 8ac10905..d7bc2687 100644 --- a/docs/pages/license.md +++ b/docs/pages/license.md @@ -1,7 +1,5 @@ Licensed under the **MIT**. -[LICENSE](_license.md ':include :type=code') -

+ +[LICENSE](_license.md ':include :type=code') diff --git a/docs/pages/try-it-out.md b/docs/pages/try-it-out.md deleted file mode 100644 index 0840ed04..00000000 --- a/docs/pages/try-it-out.md +++ /dev/null @@ -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'); -``` diff --git a/docs/pages/usage-examples.md b/docs/pages/usage-examples.md index 7de63e30..387ba398 100644 --- a/docs/pages/usage-examples.md +++ b/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 diff --git a/package.json b/package.json index ecb63528..84a5bfdb 100644 --- a/package.json +++ b/package.json @@ -3,20 +3,24 @@ "version": "0.9.3", "description": "Cache interceptor for axios", "license": "MIT", - "main": "./cjs/index.js", - "types": "./cjs/index.d.ts", - "module": "./esm/index.js", + "main": "./dist/index.cjs", + "types": "./dist/index.d.ts", + "module": "./dist/index.mjs", "exports": { + "./*": "./*", + "./package.json": "./package.json", ".": { - "import": "./esm/index.js", - "require": "./cjs/index.js", - "default": "./umd/index.js" + "import": "./dist/index.mjs", + "require": "./dist/index.cjs" }, - "./package.json": "./package.json" + "./dev": { + "import": "./dev/index.mjs", + "require": "./dev/index.cjs" + } }, - "browser": "./umd/index.js", - "jsdelivr": "./umd/index.js", - "unpkg": "./umd/index.js", + "browser": "./dist/index.umd.js", + "jsdelivr": "./dist/index.umd.js", + "unpkg": "./dist/index.umd.js", "sideEffects": false, "runkitExampleFilename": "./examples/runkit.js", "scripts": { diff --git a/src/index.ts b/src/index.ts index 3509f0da..fb443697 100644 --- a/src/index.ts +++ b/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'); } diff --git a/tsconfig.json b/tsconfig.json index ffc5f170..fc56ac8f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -37,7 +37,7 @@ // "noResolve": true, /* Disallow `import`s, `require`s or ``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`. */ @@ -97,5 +97,5 @@ "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "include": ["src", "test", "examples","docs"] + "include": ["src", "test", "examples", "docs"] }