feat: added web bundle and babel

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread"
+  ],
+  "comments": false,
+  "compact": true,
+  "sourceMaps": true
+}

README.md

@@ -46,9 +46,16 @@ Axios Cache Interceptor</h1>
   <code
     ><a href="https://www.npmjs.com/package/axios-cache-interceptor"
       ><img
-        src="https://img.shields.io/npm/v/axios-cache-interceptor?color=CB3837&logo=npm&label=Npm"
+        src="https://img.shields.io/npm/dw/axios-cache-interceptor?style=flat"
         target="_blank"
-        alt="Npm" /></a
+        alt="Downloads" /></a
+  ></code>
+  <code
+    ><a href="https://bundlephobia.com/package/axios-cache-interceptor"
+      ><img
+        src="https://img.shields.io/bundlephobia/min/axios-cache-interceptor?style=flat"
+        target="_blank"
+        alt="Size" /></a
   ></code>
 </div>
 
@@ -86,6 +93,8 @@ const resp2 = await api.get('https://api.example.com/');
 - [Table of contents](#table-of-contents)
 - [Features](#features)
 - [Installing](#installing)
+  - [Via NPM](#via-npm)
+  - [Via CDN](#via-cdn)
 - [Support list](#support-list)
 - [Getting Started](#getting-started)
 - [Compiled code](#compiled-code)
@@ -129,16 +138,38 @@ const resp2 = await api.get('https://api.example.com/');
 
 ## Installing
 
-> Axios is a peer dependency and must be installed separately.
+> Axios must be installed separately.
+
+### Via NPM
 
 ```sh
-# Npm
 npm install --save axios axios-cache-interceptor
-
-# Yarn
+# or
 yarn add axios axios-cache-interceptor
 ```
 
+```js
+const { useCache } = require('axios-cache-interceptor');
+// or
+import { useCache } from 'axios-cache-interceptor';
+```
+
+### Via CDN
+
+![Version](https://img.shields.io/npm/v/axios-cache-interceptor?style=flat)
+
+```html
+<!-- Replace VERSION with the desired version -->
+
+<script crossorigin src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@VERSION"></script>
+<!-- or -->
+<script crossorigin src="https://unpkg.com/axios-cache-interceptor@VERSION"></script>
+```
+
+```js
+const { useCache } = window.AxiosCacheInterceptor;
+```
+
 <br />
 
 ## Support list
@@ -181,14 +212,13 @@ After that, you can made your own requests normally.
 
 ## Compiled code
 
-Currently, the typescript compiler is only used to remove types from code, emitting almost
-the same output code as if this library were written in javascript. Nowadays, it is
-practically mandatory to use some pre-processor, like Babel. So for the support of
-multiple users in the browser, we recommend you to use it as well.
+The compiled code is built with Babel for npm and Webpack & Babel for the web bundle.
 
-Current target: **ES2020**
+You can see more here about compiling options:
 
-Build options: **[`tsconfig.json`](/tsconfig.json)**
+- [Webpack config](/webpack.config.js)
+- [Babel Config](/babel.config.js)
+- [Types Config](/tsconfig.types.json)
 
 <br />
 
@@ -263,14 +293,16 @@ You can create your own implementation by implementing
 
 There are few built in storage implementations, you can use them by importing:
 
+> With the cdn served bundle, the **MemoryStorage** and **BrowserAxiosStorage** comes by default. Just get them by `window.AxiosCacheInterceptor.BrowserAxiosStorage` or `window.AxiosCacheInterceptor.MemoryAxiosStorage`.
+
 ```js
-import /* ... */ 'axios-cache-interceptor/dist/storage/{name}';
+import {} from 'axios-cache-interceptor/dist/storage/{name}';
 ```
 
-- [MemoryStorage](src/storage/memory.ts)
+- [MemoryAxiosStorage](src/storage/memory.ts)
   `import 'axios-cache-interceptor/dist/storage/memory';`
-- [Session and Local Storage](src/storage/web.ts)
-  `import 'axios-cache-interceptor/dist/storage/web';`
+- [BrowserAxiosStorage](src/storage/browser.ts)
+  `import 'axios-cache-interceptor/dist/storage/browser';`
 - _Maybe your own?_ (PR's are welcome)
 
 ### config.generateKey

package.json

@@ -3,12 +3,16 @@
   "version": "0.6.3",
   "description": "Cache interceptor for axios",
   "main": "./dist/index.js",
+  "browser": "./dist/index.min.js",
   "scripts": {
-    "build": "tsc --p tsconfig.build.json",
+    "build": "concurrently 'npm:build:*'",
+    "build:node": "babel src --out-dir dist --extensions '.ts'",
+    "build:browser": "webpack",
+    "build:types": "tsc -p tsconfig.types.json",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "prettify": "prettier --write .",
+    "format": "prettier --write .",
     "lint": "tsc --noEmit && eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "version": "auto-changelog -p && git add CHANGELOG.md"
@@ -28,8 +32,8 @@
   ],
   "author": {
     "name": "Arthur Fiorette",
-    "email": "arthur.fiorette@gmail.com",
-    "url": "https://arthurfiorette.com.br"
+    "email": "npm@arthur.place",
+    "url": "https://arthur.place"
   },
   "license": "MIT",
   "bugs": {
@@ -38,16 +42,25 @@
   "homepage": "https://github.com/ArthurFiorette/axios-cache-interceptor#readme",
   "dependencies": {
     "@tusbar/cache-control": "^0.6.0",
-    "fast-defer": "^1.1.1"
+    "concurrently": "^6.4.0",
+    "fast-defer": "^1.1.2"
   },
   "devDependencies": {
     "@arthurfiorette/prettier-config": "*",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-typescript": "^7.16.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.7.10",
+    "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "auto-changelog": "^2.3.0",
-    "axios": "^0.24.0",
+    "babel-loader": "^8.2.3",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -55,8 +68,11 @@
     "prettier": "^2.3.2",
     "prettier-plugin-jsdoc": "^0.3.23",
     "prettier-plugin-organize-imports": "^2.3.3",
+    "terser-webpack-plugin": "^5.2.5",
     "ts-jest": "^27.1.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1"
   },
   "peerDependencies": {
     "axios": "~0.24.0"

src/index.bundle.ts

@@ -0,0 +1,5 @@
+/** Index file for webpack and cdn usage */
+
+export * from './index';
+export * from './storage/browser';
+export * from './storage/memory';

tsconfig.build.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}

tsconfig.types.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true
+  },
+  "include": ["src"],
+  "exclude": ["src/index.bundle.ts"]
+}

webpack.config.js

@@ -0,0 +1,43 @@
+//@ts-check
+/* eslint-disable */
+
+const path = require('path');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+
+/**
+ * @type {import('webpack').Configuration}
+ */
+const config = {
+  mode: 'production',
+
+  entry: path.resolve(__dirname, 'src', 'index.bundle.ts'),
+
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.bundle.js',
+    libraryTarget: 'umd',
+    library: 'AxiosCacheInterceptor'
+  },
+
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+
+  devtool: 'source-map',
+
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)$/,
+        use: { loader: 'babel-loader' }
+      }
+    ]
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserWebpackPlugin()]
+  }
+};
+
+module.exports = config;