1.2.0

README.md

@@ -14,7 +14,7 @@ Fetch, supercharged.
 
 The [Fetch Web API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) is great, but it could be better.
 
-AxleJS supercharges fetch, with better error handling, easier to use options, can automatically follow redirects, an easier way to manage and view headers and search queries, custom response and request classes and methods, and a lot more.
+AxleJS supercharges fetch, with better error handling, using custom and built-in middleware and options, an easier way to manage and view headers and search queries, custom response and request classes and methods, and a lot more.
 
 ## [Documentation](https://github.com/ksplatdev/AxleJS/wiki/Documenation)
 
@@ -49,7 +49,7 @@ AxleJS supercharges fetch, with better error handling, easier to use options, ca
 
 ### CDN
 
-1. Import from <https://cdn.jsdelivr.net/npm/axlejs@1.1.1/dist/index.js> or for minified version <https://cdn.jsdelivr.net/npm/axlejs@1.1.1/dist/index.min.js>.
+1. Import from <https://cdn.jsdelivr.net/npm/axlejs@1.2.0/dist/index.js> or for minified version <https://cdn.jsdelivr.net/npm/axlejs@1.2.0/dist/index.min.js>.
 2. Read the [documentation](https://github.com/ksplatdev/AxleJS/wiki/Documenation).
 
 ## Quick Start

examples/README.md

@@ -0,0 +1,5 @@
+# AxleJS Examples
+
+Examples of the AxleJS API.
+
+This is **NOT** documentation. For documentation go to <https://github.com/ksplatdev/AxleJS/wiki/Documenation>

examples/injectData.ts

@@ -0,0 +1,18 @@
+import Axle from '../dist/index';
+
+// inject into json results
+Axle.inject({
+	someInjectedData: 'injected',
+});
+
+// inject with middleware, check examples/useMiddleware.ts for more info
+Axle.use((req, res) => {
+	Axle.inject({ timeTook: res.timeTook });
+});
+
+(async () => {
+	const res = await Axle.get('https://someApi.com/documentation');
+	const json = await res.json();
+
+	console.log(json.someInjectedData); // 'injected'
+})();

examples/productionEx.ts

@@ -0,0 +1,79 @@
+// production example
+
+// types
+interface Result {
+	status: number;
+	statusMessage: string;
+	message: string;
+	sessionToken: string;
+	regenerated: boolean;
+}
+
+// dependencies
+import Axle from '../dist';
+
+// constants
+const form: HTMLFormElement = document.querySelector('#loginForm');
+const formData = new FormData(form);
+
+// setup
+form.onsubmit = (e) => {
+	e.preventDefault();
+
+	loginUser();
+};
+
+Axle.use(Axle.middleware.timeTook());
+Axle.useOptions(Axle.middlewareOptions.kneepads());
+Axle.useOptions(Axle.middlewareOptions.cors());
+
+// custom middleware to inject regenerated property into json
+Axle.use((req, res) => {
+	if (req.method === 'POST') {
+		if (Boolean(res.queryParam('regenerateToken')) === true) {
+			Axle.inject({
+				regenerated: true,
+			});
+		} else {
+			Axle.inject({
+				regenerated: false,
+			});
+		}
+	}
+});
+
+// Main
+
+// loginUser function, makes post request to /api/login, sets sessionToken, and follows redirect
+async function loginUser(regenerateToken = false) {
+	const url = `https://example.com/api/login?regenerateToken=${regenerateToken}`;
+
+	const res = await Axle.post(url, formData, {
+		handleStatus: handleStatus,
+	});
+	const json = await res.json<Result>();
+
+	console.log(json.message);
+
+	// login session token
+	localStorage.setItem('test-session-token', json.sessionToken);
+
+	// if new token was generated
+	if (json.regenerated) {
+		console.log('New token.');
+	}
+
+	// follow redirect by Location header
+	res.finishRedirect();
+}
+
+// custom handle status
+// return true to throw error and reject or false to resolve and continue
+function handleStatus(status: number, statusMessage: string) {
+	if (status >= 500) {
+		console.log(status, statusMessage);
+		return true;
+	} else {
+		return false;
+	}
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "axlejs",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "Fetch, supercharged.",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
 		"prettier": "^2.3.2",
 		"typescript": "^4.4.2",
 		"uglify-js": "^3.14.1",
-		"webpack": "^5.51.1",
+		"webpack": "^5.51.2",
 		"webpack-cli": "^4.8.0"
 	}
 }

src/core/delete.ts

@@ -5,7 +5,7 @@ import AxleResponse from '../models/response';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default async function deleteReq<t = Record<string, any> | FormData>(
 	url: string,
-	data?: t | undefined | null,
+	data?: t | FormData | undefined | null,
 	options: AxleTypes.AxleOptions = {
 		mode: 'cors',
 		cache: 'default',

src/core/inject.ts

@@ -0,0 +1,9 @@
+const __axle_js__inject_arr: Record<string, unknown>[] = [];
+
+export default function inject(data: Record<string, unknown>) {
+	return __axle_js__inject_arr.push(data);
+}
+
+export function __getInjectedData() {
+	return __axle_js__inject_arr;
+}

src/core/patch.ts

@@ -5,7 +5,7 @@ import AxleResponse from '../models/response';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default async function patch<t = Record<string, any>>(
 	url: string,
-	data?: t | undefined | null,
+	data?: t | FormData | undefined | null,
 	options: AxleTypes.AxleOptions = {
 		mode: 'cors',
 		cache: 'default',

src/core/post.ts

@@ -5,7 +5,7 @@ import AxleResponse from '../models/response';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default async function post<t = Record<string, any>>(
 	url: string,
-	data?: t | undefined | null,
+	data?: t | FormData | undefined | null,
 	options: AxleTypes.AxleOptions = {
 		mode: 'cors',
 		cache: 'default',

src/core/put.ts

@@ -5,7 +5,7 @@ import AxleResponse from '../models/response';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default async function put<t = Record<string, any>>(
 	url: string,
-	data?: t | undefined | null,
+	data?: t | FormData | undefined | null,
 	options: AxleTypes.AxleOptions = {
 		mode: 'cors',
 		cache: 'default',

src/index.ts

@@ -1,6 +1,7 @@
 import deleteReq from './core/delete';
 import get from './core/get';
 import head from './core/head';
+import inject from './core/inject';
 import patch from './core/patch';
 import post from './core/post';
 import put from './core/put';
@@ -76,6 +77,7 @@ const Axle = {
 	cancelMark: AxleCancelMark,
 	use: use,
 	useOptions: useOptions,
+	inject: inject,
 	middleware: {
 		timeTook: timeTook,
 	},

src/models/request.ts

@@ -19,7 +19,7 @@ export default class AxleRequest<t = Record<string, any>> {
 	constructor(
 		method: string,
 		url: string,
-		body: t | undefined | null,
+		body: t | FormData | undefined | null,
 		options: AxleTypes.AxleOptions
 	) {
 		this.method = method.toUpperCase();

src/models/response.ts

@@ -1,5 +1,6 @@
 // Class for converting Response to AxleResponse to supercharge fetch!
 
+import { __getInjectedData } from '../core/inject';
 import getQuery from '../utils/getQuery';
 import queryParam from '../utils/queryParam';
 import AxleHeaders from './headers';
@@ -16,8 +17,20 @@ export default class AxleResponse {
 		this.timeEnd = timeEnd;
 	}
 
-	public async json<t = Record<string, unknown>>(): Promise<t> {
-		const json = await this.res.json();
+	public async json<t = Record<string, unknown>>() {
+		let json: t = await this.res.json();
+
+		// get injected data
+
+		const injectedData = __getInjectedData();
+
+		// add injected data
+		injectedData.forEach((data) => {
+			json = {
+				...json,
+				...data,
+			};
+		});
 
 		return json;
 	}