@thepassle/app-tools 1.0.0 → 1.1.0

package/api/index.js

@@ -1,5 +1,5 @@
-import { createLogger } from '../utils/log.js';
-const log = createLogger('api');
+import { createLogger } from "../utils/log.js";
+const log = createLogger("api");
 
 class StatusError extends Error {
   constructor(response) {
@@ -10,7 +10,7 @@ class StatusError extends Error {
 
 function handleStatus(response) {
   if (!response.ok) {
-    log('Response not ok', response);
+    log("Response not ok", response);
     throw new StatusError(response);
   }
   return response;
@@ -24,14 +24,14 @@ function handleStatus(response) {
 /** @typedef {import('./types.js').MetaParams} MetaParams */
 
 /**
- * @example 
+ * @example
  * const api = new Api({
  *  baseURL: 'https://api.foo.com/',
  *  responseType: 'text',
  *  plugins: [
  *    {
  *      beforeFetch: ({url, method, opts, data}) => {},
- *      afterFetch: (res) => res,
+ *      afterFetch: ({response}) => response,
  *    }
  *  ]
  *});
@@ -39,130 +39,168 @@ function handleStatus(response) {
 export class Api {
   /** @param {Config} config */
   constructor(config = {}) {
-    this.config = { 
+    this.config = {
       plugins: [],
-      responseType: 'json',
-      ...config 
+      responseType: "json",
+      ...config,
     };
   }
 
   /**
-   * @param {string} url 
-   * @param {Method} method 
-   * @param {RequestOptions} [opts] 
+   * @param {string} url
+   * @param {Method} method
+   * @param {RequestOptions} [opts]
    * @param {object} [data]
-   * @returns 
+   * @returns
    */
   async fetch(url, method, opts, data) {
     const plugins = [...this.config.plugins, ...(opts?.plugins || [])];
 
     let fetchFn = globalThis.fetch;
-    let baseURL = opts?.baseURL ?? this.config?.baseURL ?? '';
+    let baseURL = opts?.baseURL ?? this.config?.baseURL ?? "";
     let responseType = opts?.responseType ?? this.config.responseType;
     let headers = new Headers({
-      'Content-Type': 'application/json',
-      ...opts?.headers
+      "Content-Type": "application/json",
+      ...opts?.headers,
     });
 
-    if(baseURL) {
-      url = url.replace(/^(?!.*\/\/)\/?/, baseURL + '/');
+    if (baseURL) {
+      url = url.replace(/^(?!.*\/\/)\/?/, baseURL + "/");
     }
 
-    if(opts?.params) {
-      url += `${(~url.indexOf('?') ? '&' : '?')}${new URLSearchParams(opts.params)}`;
+    if (opts?.params) {
+      url += `${~url.indexOf("?") ? "&" : "?"}${new URLSearchParams(opts.params)}`;
     }
 
-    for(const plugin of plugins) {
+    for (const plugin of plugins) {
       try {
-        const overrides = await plugin?.beforeFetch?.({ responseType, headers, fetchFn, baseURL, url, method, opts, data });
-        if(overrides) {
-          ({ responseType, headers, fetchFn, baseURL, url, method, opts, data } = {...overrides});
+        const overrides = await plugin?.beforeFetch?.({
+          responseType,
+          headers,
+          fetchFn,
+          baseURL,
+          url,
+          method,
+          opts,
+          data,
+        });
+        if (overrides) {
+          ({
+            responseType,
+            headers,
+            fetchFn,
+            baseURL,
+            url,
+            method,
+            opts,
+            data,
+          } = { ...overrides });
         }
-      } catch(e) {
+      } catch (e) {
         log(`Plugin "${plugin.name}" error on afterFetch hook`);
         throw e;
       }
     }
 
-    log(`Fetching ${method} ${url}`, { 
-      responseType, 
+    log(`Fetching ${method} ${url}`, {
+      responseType,
       // @ts-ignore
-      headers: Object.fromEntries(headers), 
-      fetchFn, 
-      baseURL, 
-      url, 
-      method, 
-      opts, 
-      data 
-    });
-    return fetchFn(url, {
+      headers: Object.fromEntries(headers),
+      fetchFn,
+      baseURL,
+      url,
       method,
-      headers,
-      ...(data ? { body: JSON.stringify(data) } : {}),
-      ...(opts?.mode ? { mode: opts.mode } : {}),
-      ...(opts?.credentials ? { credentials: opts.credentials } : {}),
-      ...(opts?.cache ? { cache: opts.cache } : {}),
-      ...(opts?.redirect ? { redirect: opts.redirect } : {}),
-      ...(opts?.referrer ? { referrer: opts.referrer } : {}),
-      ...(opts?.referrerPolicy ? { referrerPolicy: opts.referrerPolicy } : {}),
-      ...(opts?.integrity ? { integrity: opts.integrity } : {}),
-      ...(opts?.keepalive ? { keepalive: opts.keepalive } : {}),
-      ...(opts?.signal ? { signal: opts.signal } : {}),
-    })
-    /** [PLUGINS - AFTERFETCH] */
-    .then(async res => {
-      for(const plugin of plugins) {
-        try {
-          const afterFetchResult = await plugin?.afterFetch?.(res) ?? res;
-          if(afterFetchResult) {
-            res = afterFetchResult;
-          }
-        } catch(e) {
-          log(`Plugin "${plugin.name}" error on afterFetch hook`)
-          throw e;
-        }
-      }
-      
-      return res;
-    })
-    /** [STATUS] */
-    .then(handleStatus)
-    /** [RESPONSETYPE] */
-    .then(res => res[responseType]())
-    .then(async data => {
-      for(const plugin of plugins) {
-        try {
-          data = await plugin?.transform?.(data) ?? data;
-        } catch(e) {
-          log(`Plugin "${plugin.name}" error on transform hook`)
-          throw e;
-        }
-      }
-      log(`Fetch successful ${method} ${url}`, data);
-      return data;
-    })
-    /** [PLUGINS - HANDLEERROR] */
-    .catch(async e => {
-      log(`Fetch failed ${method} ${url}`, e);
-      const shouldThrow = plugins.length === 0 || (await Promise.all(plugins.map(({ handleError }) => handleError?.(e) ?? true))).every(_ => !!_);
-      if(shouldThrow) throw e;
+      opts,
+      data,
     });
+    return (
+      fetchFn(url, {
+        method,
+        headers,
+        ...(data ? { body: JSON.stringify(data) } : {}),
+        ...(opts?.mode ? { mode: opts.mode } : {}),
+        ...(opts?.credentials ? { credentials: opts.credentials } : {}),
+        ...(opts?.cache ? { cache: opts.cache } : {}),
+        ...(opts?.redirect ? { redirect: opts.redirect } : {}),
+        ...(opts?.referrer ? { referrer: opts.referrer } : {}),
+        ...(opts?.referrerPolicy
+          ? { referrerPolicy: opts.referrerPolicy }
+          : {}),
+        ...(opts?.integrity ? { integrity: opts.integrity } : {}),
+        ...(opts?.keepalive ? { keepalive: opts.keepalive } : {}),
+        ...(opts?.signal ? { signal: opts.signal } : {}),
+      })
+        /** [PLUGINS - AFTERFETCH] */
+        .then(async (response) => {
+          for (const plugin of plugins) {
+            try {
+              const afterFetchResult = await plugin?.afterFetch?.({
+                responseType,
+                headers,
+                fetchFn,
+                baseURL,
+                url,
+                method,
+                opts,
+                data,
+                response,
+              });
+              if (afterFetchResult) {
+                response = afterFetchResult;
+              }
+            } catch (e) {
+              log(`Plugin "${plugin.name}" error on afterFetch hook`);
+              throw e;
+            }
+          }
+
+          return response;
+        })
+        /** [STATUS] */
+        .then(handleStatus)
+        /** [RESPONSETYPE] */
+        .then((response) => response[responseType]())
+        .then(async (data) => {
+          for (const plugin of plugins) {
+            try {
+              data = (await plugin?.transform?.(data)) ?? data;
+            } catch (e) {
+              log(`Plugin "${plugin.name}" error on transform hook`);
+              throw e;
+            }
+          }
+          log(`Fetch successful ${method} ${url}`, data);
+          return data;
+        })
+        /** [PLUGINS - HANDLEERROR] */
+        .catch(async (e) => {
+          log(`Fetch failed ${method} ${url}`, e);
+          const shouldThrow =
+            plugins.length === 0 ||
+            (
+              await Promise.all(
+                plugins.map(({ handleError }) => handleError?.(e) ?? true),
+              )
+            ).every((_) => !!_);
+          if (shouldThrow) throw e;
+        })
+    );
   }
 
   /** @type {import('./types.js').BodylessMethod} */
-  get = (url, opts) => this.fetch(url, 'GET', opts);
+  get = (url, opts) => this.fetch(url, "GET", opts);
   /** @type {import('./types.js').BodylessMethod} */
-  options = (url, opts) => this.fetch(url, 'OPTIONS', opts);
+  options = (url, opts) => this.fetch(url, "OPTIONS", opts);
   /** @type {import('./types.js').BodylessMethod} */
-  delete = (url, opts) => this.fetch(url, 'DELETE', opts);
+  delete = (url, opts) => this.fetch(url, "DELETE", opts);
   /** @type {import('./types.js').BodylessMethod} */
-  head = (url, opts) => this.fetch(url, 'HEAD', opts);
+  head = (url, opts) => this.fetch(url, "HEAD", opts);
   /** @type {import('./types.js').BodyMethod} */
-  post = (url, data, opts) => this.fetch(url, 'POST', opts, data);
+  post = (url, data, opts) => this.fetch(url, "POST", opts, data);
   /** @type {import('./types.js').BodyMethod} */
-  put = (url, data, opts) => this.fetch(url, 'PUT', opts, data);
+  put = (url, data, opts) => this.fetch(url, "PUT", opts, data);
   /** @type {import('./types.js').BodyMethod} */
-  patch = (url, data, opts) => this.fetch(url, 'PATCH', opts, data);
+  patch = (url, data, opts) => this.fetch(url, "PATCH", opts, data);
 }
 
-export const api = new Api();
+export const api = new Api();

package/api/plugins/abort.js

@@ -6,12 +6,12 @@ export function abortPlugin() {
   const requests = new Map();
 
   return {
-    name: 'abort',
+    name: "abort",
     beforeFetch: (meta) => {
       const { method, url } = meta;
       requestId = `${method}:${url}`;
 
-      if(requests.has(requestId)) {
+      if (requests.has(requestId)) {
         const request = requests.get(requestId);
         request.abort();
       }
@@ -21,17 +21,17 @@ export function abortPlugin() {
         ...meta,
         opts: {
           ...meta.opts,
-          signal: requests.get(requestId).signal
-        }
+          signal: requests.get(requestId).signal,
+        },
       };
     },
-    afterFetch: (res) => {
+    afterFetch: ({ response }) => {
       requests.delete(requestId);
-      return res;
+      return response;
     },
     // return true if an error should throw, return false if an error should be ignored
-    handleError: ({name}) => name !== 'AbortError'
-  }
+    handleError: ({ name }) => name !== "AbortError",
+  };
 }
 
-export const abort = abortPlugin();
+export const abort = abortPlugin();

package/api/plugins/cache.js

@@ -1,19 +1,38 @@
 const TEN_MINUTES = 1000 * 60 * 10;
+const DEFAULT_MAX_SIZE = 100;
 
 /**
- * @param {{maxAge?: number}} options
+ * @param {{maxAge?: number, maxSize?: number}} options
  * @returns {import('../index.js').Plugin}
  */
-export function cachePlugin({ maxAge = TEN_MINUTES } = {}) {
-  let requestId;
+export function cachePlugin({
+  maxAge = TEN_MINUTES,
+  maxSize = DEFAULT_MAX_SIZE,
+} = {}) {
   const cache = new Map();
 
+  function evict() {
+    const now = Date.now();
+    for (const [key, value] of cache) {
+      if (value.updatedAt <= now - maxAge) {
+        cache.delete(key);
+      }
+    }
+    // if still over maxSize, evict oldest entries
+    if (cache.size > maxSize) {
+      const overflow = cache.size - maxSize;
+      const keys = cache.keys();
+      for (let i = 0; i < overflow; i++) {
+        cache.delete(keys.next().value);
+      }
+    }
+  }
+
   return {
     name: "cache",
     beforeFetch: (meta) => {
       const { method, url } = meta;
-      requestId = `${method}:${url}`;
-
+      const requestId = `${method}:${url}`;
       if (cache.has(requestId)) {
         const cached = cache.get(requestId);
         if (cached.updatedAt > Date.now() - maxAge) {
@@ -25,16 +44,13 @@ export function cachePlugin({ maxAge = TEN_MINUTES } = {}) {
         }
       }
     },
-    afterFetch: async (res) => {
-      const clone = await res.clone();
+    afterFetch: async ({ response, method, url }) => {
+      const requestId = `${method}:${url}`;
+      const clone = response.clone();
       const data = await clone.json();
-
-      cache.set(requestId, {
-        updatedAt: Date.now(),
-        data,
-      });
-
-      return res;
+      cache.set(requestId, { updatedAt: Date.now(), data });
+      evict();
+      return response;
     },
   };
 }

package/api/plugins/jsonPrefix.js

@@ -5,23 +5,23 @@
 export function jsonPrefixPlugin(jsonPrefix) {
   let responseType;
   return {
-    name: 'jsonPrefix',
-    beforeFetch: ({responseType: type}) => {
+    name: "jsonPrefix",
+    beforeFetch: ({ responseType: type }) => {
       responseType = type;
     },
-    afterFetch: async (res) => {
-      if(jsonPrefix && responseType === 'json') {
-        let responseAsText = await res.text();
-        
-        if(responseAsText.startsWith(jsonPrefix)) {
+    afterFetch: async ({ response }) => {
+      if (jsonPrefix && responseType === "json") {
+        let responseAsText = await response.text();
+
+        if (responseAsText.startsWith(jsonPrefix)) {
           responseAsText = responseAsText.substring(jsonPrefix.length);
         }
 
-        return new Response(responseAsText, res);
+        return new Response(responseAsText, response);
       }
-      return res;
-    }
-  }
+      return response;
+    },
+  };
 }
 
-export const jsonPrefix = jsonPrefixPlugin(`)]}',\n`);
+export const jsonPrefix = jsonPrefixPlugin(`)]}',\n`);

package/api/plugins/logger.js

@@ -1,27 +1,31 @@
-/** 
+/**
  * @param {{
  *  collapsed?: boolean
  * }} options
- * @returns {import('../index.js').Plugin} 
+ * @returns {import('../index.js').Plugin}
  */
-export function loggerPlugin({collapsed = true} = {}) {
+export function loggerPlugin({ collapsed = true } = {}) {
   let m;
   let start;
-  const group = collapsed ? 'groupCollapsed' : 'group';
+  const group = collapsed ? "groupCollapsed" : "group";
   return {
-    name: 'logger',
+    name: "logger",
     beforeFetch: (meta) => {
-      console[group](`[START] [${new Date().toLocaleTimeString()}] [${meta.method}] "${meta.url}"`);
+      console[group](
+        `[START] [${new Date().toLocaleTimeString()}] [${meta.method}] "${meta.url}"`,
+      );
       console.table([meta]);
-      console.groupEnd()
+      console.groupEnd();
       start = Date.now();
       m = meta;
     },
-    afterFetch: (r) => {
-      console.log(`[END] [${m.method}] "${m.url}" Request took ${Date.now() - start}ms`);
-      return r;
-    }
-  }
+    afterFetch: ({ response }) => {
+      console.log(
+        `[END] [${m.method}] "${m.url}" Request took ${Date.now() - start}ms`,
+      );
+      return response;
+    },
+  };
 }
 
-export const logger = loggerPlugin();
+export const logger = loggerPlugin();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "type": "module",
   "scripts": {

package/types/api/index.d.ts

@@ -12,7 +12,7 @@
  *  plugins: [
  *    {
  *      beforeFetch: ({url, method, opts, data}) => {},
- *      afterFetch: (res) => res,
+ *      afterFetch: ({response}) => response,
  *    }
  *  ]
  *});

package/types/api/plugins/cache.d.ts

@@ -1,8 +1,9 @@
 /**
- * @param {{maxAge?: number}} options
+ * @param {{maxAge?: number, maxSize?: number}} options
  * @returns {import('../index.js').Plugin}
  */
-export function cachePlugin({ maxAge }?: {
+export function cachePlugin({ maxAge, maxSize, }?: {
     maxAge?: number;
+    maxSize?: number;
 }): import('../index.js').Plugin;
 export const cache: import("../types.js").Plugin;

package/types/api/types.d.ts

@@ -9,11 +9,14 @@ export type BodylessMethod = <R>(url: string, opts?: RequestOptions) => Promise<
 export type Method = 'GET' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'POST' | 'PUT' | 'PATCH';
 export interface Plugin {
     beforeFetch?: (meta: MetaParams) => MetaParams | Promise<MetaParams> | void;
-    afterFetch?: (res: Response) => void | Promise<void> | Response | Promise<Response>;
+    afterFetch?: (meta: AfterFetchParams) => void | Promise<void> | Response | Promise<Response>;
     transform?: (data: any) => any;
     name: string;
     handleError?: (e: Error) => boolean;
 }
+export interface AfterFetchParams extends MetaParams {
+    response: Response;
+}
 export interface CustomRequestOptions {
     transform?: (data: object) => object;
     responseType?: ResponseType;