Skip to content

Commit

Permalink
feat!: new bundle setup & fixed development bundles (#167)
Browse files Browse the repository at this point in the history
* 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
arthurfiorette authored Mar 11, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f699e19 commit 7293cf0
Showing 21 changed files with 253 additions and 205 deletions.
6 changes: 2 additions & 4 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -2,11 +2,9 @@
coverage
node_modules

/umd
/cjs
/esm
# Output
/dist
/types
/dev

# Random
/ignore
50 changes: 50 additions & 0 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -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.
-->
6 changes: 2 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -2,11 +2,9 @@
coverage
node_modules

/umd
/cjs
/esm
# Output
/dist
/types
/dev

# Random
/ignore
9 changes: 3 additions & 6 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -7,10 +7,7 @@

!src/**

!umd/**
!cjs/**
!esm/**
!dist/**
!dev/**

!types/**

!examples/runkit.js
!examples/runkit.js
5 changes: 1 addition & 4 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -3,10 +3,7 @@ node_modules
/ignore
/coverage
/dist
/umd
/cjs
/esm
/types
/dev
/tsconfig.json

.yarn
12 changes: 5 additions & 7 deletions build/build.sh
Original file line number Diff line number Diff line change
@@ -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

12 changes: 7 additions & 5 deletions build/check.sh
Original file line number Diff line number Diff line change
@@ -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

2 changes: 1 addition & 1 deletion build/tsconfig.types.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"emitDeclarationOnly": true,
"outDir": "../types",
"outDir": "../dist",
"declaration": true,
"declarationMap": true
},
33 changes: 11 additions & 22 deletions build/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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,52 +88,41 @@ 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
}),

// 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
}),

// 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'
})
];
3 changes: 1 addition & 2 deletions docs/config/sidebar.md
Original file line number Diff line number Diff line change
@@ -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
65 changes: 0 additions & 65 deletions docs/pages/compiled-code.md

This file was deleted.

52 changes: 15 additions & 37 deletions docs/pages/development-mode.md
Original file line number Diff line number Diff line change
@@ -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);
```
92 changes: 92 additions & 0 deletions docs/pages/getting-started.md
Original file line number Diff line number Diff line change
@@ -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
}
});
```
34 changes: 34 additions & 0 deletions docs/pages/global-configuration.md
Original file line number Diff line number Diff line change
@@ -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;
```
29 changes: 9 additions & 20 deletions docs/pages/installing.md
Original file line number Diff line number Diff line change
@@ -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
<!-- 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
4 changes: 2 additions & 2 deletions docs/pages/license.md
Original file line number Diff line number Diff line change
@@ -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')
11 changes: 0 additions & 11 deletions docs/pages/try-it-out.md

This file was deleted.

2 changes: 1 addition & 1 deletion docs/pages/usage-examples.md
Original file line number Diff line number Diff line change
@@ -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
24 changes: 14 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -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": {
3 changes: 1 addition & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -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');
}
4 changes: 2 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -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`. */

@@ -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"]
}

0 comments on commit 7293cf0

Please sign in to comment.