@thepassle/app-tools 0.0.1 → 0.0.4

package/README.md

@@ -6,4 +6,5 @@ Collection of tools I regularly use to build apps. Maybe they're useful to someb
 
 - [`state`](/state/README.md)
 - [`api`](/api/README.md)
+- [`pwa`](/pwa/README.md)
 - [`utils`](/utils/README.md)

package/api/index.js

@@ -1,16 +1,3 @@
-const TEN_MINUTES = 1000 * 60 * 10;
-
-function getCookie(name, _document = document) {
-  const match = _document.cookie.match(new RegExp(`(^|;\\s*)(${name})=([^;]*)`));
-  return match ? decodeURIComponent(match[3]) : null;
-}
-
-function handleAbort(e) {
-  if (e.name !== 'AbortError') {
-    throw e;
-  }
-}
-
 function handleStatus(response) {
   if (!response.ok) {
     throw new Error(response.statusText);
@@ -18,64 +5,48 @@ function handleStatus(response) {
   return response;
 }
 
-/**
- * 
- * @param {() => void} fn 
- * @param {number} ms 
- * @param {{
- *  signal?: AbortSignal
- * }} options
- */
-function setAbortableTimeout(fn, ms, {signal}) {
-  const timeout = setTimeout(fn, ms);
-  !signal?.aborted && signal?.addEventListener('abort', () => clearTimeout(timeout), {});
-};
-
 /**
  * @typedef {object} Config
- * @property {string} [xsrfCookieName=XSRF-TOKEN]
- * @property {Plugin[]} [plugins]
- * @property {'text'|'json'|'stream'|'blob'|'arrayBuffer'|'formData'|'stream'} [responseType]
+ * @property {Plugin[]} [plugins=[]]
+ * @property {'text'|'json'|'stream'|'blob'|'arrayBuffer'|'formData'|'stream'} [responseType=json]
  * @property {string} [baseURL]
  * 
  * @typedef {(url: string, data?: object, opts?: RequestOptions) => Promise<FetchResponse>} BodyMethod
  * @typedef {(url: string, opts?: RequestOptions) => Promise<FetchResponse>} BodylessMethod
- * @typedef {(url: string) => any} MockFn
  * @typedef {Response & { [key: string]: any }} FetchResponse
  * @typedef {'GET'|'DELETE'|'HEAD'|'OPTIONS'|'POST'|'PUT'|'PATCH'} Method
  *
  * @typedef {{
- *  beforeFetch?: (meta: MetaParams) => void,
+ *  beforeFetch?: (meta: MetaParams) => MetaParams | Promise<MetaParams> | void,
  *  afterFetch?: (res: Response) => Response | Promise<Response>,
+ *  transform?: (data: any) => any,
+ *  handleError?: (e: Error) => boolean
  * }} Plugin
  * 
  * @typedef {Object} CustomRequestOptions
  * @property {(data: FetchResponse) => FetchResponse} [transform] - callback to transform the received data
  * @property {'text'|'json'|'stream'|'blob'|'arrayBuffer'|'formData'|'stream'} [responseType] - responseType of the request, will call res[responseType](). Defaults to 'json'
- * @property {boolean} [useAbort] - Whether or not to use an abortSignal to cancel subsequent requests that may get fired in quick succession. Defaults to false
- * @property {boolean} [useCache] - Whether or not to cache responses. Defaults to false. When set to true, it will by default cache a request for 10 minutes. This can be customized via `cacheOptions`
- * @property {(mockParams: MetaParams) => Response} [mock] - Return a custom `new Response` with mock data instead of firing the request. Can be used in combination with `delay` as well. E.g.: (meta) => new Response(JSON.stringify({foo:'bar'}, {status: 200}));
- * @property {{maxAge?: number}} [cacheOptions] - Configure caching options
  * @property {Record<string, string>} [params] - An object to be queryParam-ified and added to the request url
- * @property {number} [delay] - Adds an artifical delay to resolving of the request, useful for testing
  * @property {Plugin[]} [plugins] - Array of plugins. Plugins can be added on global level, or on a per request basis
  * @property {string} [baseURL] - BaseURL to resolve all requests from. Can be set globally, or on a per request basis. When set on a per request basis, will override the globally set baseURL (if set)
  * 
  * @typedef {RequestInit & CustomRequestOptions} RequestOptions
  * 
  * @typedef {{
+ *  responseType: string,
+ *  baseURL: string,
  *  url: string,
- *  method: string,
+ *  method: Method,
+ *  headers: Headers,
  *  opts?: RequestOptions,
  *  data?: any,
+ *  fetchFn: typeof globalThis.fetch
  * }} MetaParams
  */
 
-
 /**
  * @example 
  * const api = new Api({
- *  xsrfCookieName: 'XSRF-COOKIE',
  *  baseURL: 'https://api.foo.com/',
  *  responseType: 'text',
  *  plugins: [
@@ -87,15 +58,9 @@ function setAbortableTimeout(fn, ms, {signal}) {
  *});
  */
 export class Api {
-  #cache = new Map();
-  #requests = new Map();
-
-  /**
-   * @param {Config} config
-   */
+  /** @param {Config} config */
   constructor(config = {}) {
     this.config = { 
-      xsrfCookieName: 'XSRF-TOKEN',
       plugins: [],
       responseType: 'json',
       ...config 
@@ -116,16 +81,12 @@ export class Api {
    */
   async fetch(url, method, opts, data) {
     const plugins = [...this.config.plugins, ...(opts?.plugins || [])];
-    const csrfToken = getCookie(this.config.xsrfCookieName);
-
-    const baseURL = opts?.baseURL ?? this.config?.baseURL ?? '';
-    const responseType = opts?.responseType ?? this.config.responseType;
-    
-    const requestKey = `${method}:${url}`;
 
-    const headers = new Headers({
+    let fetchFn = globalThis.fetch;
+    let baseURL = opts?.baseURL ?? this.config?.baseURL ?? '';
+    let responseType = opts?.responseType ?? this.config.responseType;
+    let headers = new Headers({
       'Content-Type': 'application/json',
-      ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
       ...opts?.headers
     });
 
@@ -133,93 +94,55 @@ export class Api {
       url = url.replace(/^(?!.*\/\/)\/?/, baseURL + '/');
     }
 
-    if(opts?.useCache) {
-      if(this.#cache.has(requestKey)) {
-        const cached = this.#cache.get(requestKey);
-        if(cached.updatedAt > Date.now() - (opts.cacheOptions?.maxAge || TEN_MINUTES)) {
-          return Promise.resolve(cached.data);
-        }
-      }
-    }
-
-    if(opts?.useAbort) {
-      if(this.#requests.has(requestKey)) {
-        const request = this.#requests.get(requestKey);
-        request.abort();
-      }
-      this.#requests.set(requestKey, new AbortController());
-    }
-
     if(opts?.params) {
       url += `${(~url.indexOf('?') ? '&' : '?')}${new URLSearchParams(opts.params)}`;
     }
 
     for(const { beforeFetch } of plugins) {
-      await beforeFetch?.({ url, method, opts, data });
+      const overrides = await beforeFetch?.({ responseType, headers, fetchFn, baseURL, url, method, opts, data });
+      if(overrides) {
+        ({ responseType, headers, fetchFn, baseURL, url, method, opts, data } = {...overrides});
+      }
     }
 
-    const signal = {...(opts?.useAbort
-      ? { signal: this.#requests.get(requestKey).signal }
-      : opts?.signal
-        ? { signal: opts.signal }
-        : {}
-    )}
-
-    return (opts?.mock 
-      ? new Promise(res => setAbortableTimeout(
-          () => res(opts.mock?.({url, method, opts, data})), 
-          opts?.delay ?? Math.random() * 1000, 
-          signal)
-        )
-      : fetch(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 } : {}),
-          ...signal
-        }))
-        /** [ABORT] */
-        .then(res => {
-          if(opts?.useAbort) {
-            this.#requests.delete(requestKey);
-          }
-          return res;
-        })
-        /** [PLUGINS] */
-        .then(async res => {
-          for(const { afterFetch } of plugins) {
-            res = await afterFetch?.(res) ?? res;
-          }
-          
-          return res;
-        })
-        /** [STATUS] */
-        .then(handleStatus)
-        /** [RESPONSETYPE] */
-        .then(res => res[opts?.responseType || responseType]())
-        /** [TRANSFORM] */
-        .then(data => opts?.transform?.(data) ?? data)
-        /** [CACHE] */
-        .then(data => {
-          if(opts?.useCache) {
-            this.#cache.set(requestKey, {
-              updatedAt: Date.now(),
-              data
-            });
-          }
-          return data;
-        })
-        /** [DELAY] */
-        .then(data => opts?.delay ? new Promise(resolve => setTimeout(() => resolve(data), opts.delay)) : data)
-        /** [ABORT] */
-        .catch(handleAbort);
+    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 res => {
+      for(const { afterFetch } of plugins) {
+        res = await afterFetch?.(res) ?? res;
+      }
+      
+      return res;
+    })
+    /** [STATUS] */
+    .then(handleStatus)
+    /** [RESPONSETYPE] */
+    .then(res => res[responseType]())
+    .then(async data => {
+      for(const { transform } of plugins) {
+        data = await transform?.(data) ?? data;
+      }
+      
+      return data;
+    })
+    /** [PLUGINS - HANDLEERROR] */
+    .catch(async e => {
+      const shouldThrow = (await Promise.all(plugins.map(({handleError}) => handleError?.(e) ?? false))).some(_ => !!_);
+      if(shouldThrow) throw e;
+    });
   }
 
   /** @type {BodylessMethod} */
@@ -238,4 +161,4 @@ export class Api {
   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

@@ -0,0 +1,36 @@
+/**
+ * @returns {import('../index').Plugin}
+ */
+export function abortPlugin() {
+  let requestId;
+  const requests = new Map();
+
+  return {
+    beforeFetch: (meta) => {
+      const { method, url } = meta;
+      requestId = `${method}:${url}`;
+
+      if(requests.has(requestId)) {
+        const request = requests.get(requestId);
+        request.abort();
+      }
+      requests.set(requestId, new AbortController());
+
+      return {
+        ...meta,
+        opts: {
+          ...meta.opts,
+          signal: requests.get(requestId).signal
+        }
+      };
+    },
+    afterFetch: (res) => {
+      requests.delete(requestId);
+      return res;
+    },
+    // return true if an error should throw, return false if an error should be ignored
+    handleError: ({name}) => name !== 'AbortError'
+  }
+}
+
+export const abort = abortPlugin();

package/api/plugins/cache.js

@@ -0,0 +1,38 @@
+const TEN_MINUTES = 1000 * 60 * 10;
+
+/**
+ * @param {{maxAge?: number}} [options]
+ * @returns {import('../index').Plugin}
+ */
+export function cachePlugin({maxAge} = {}) {
+  let requestId;
+  const cache = new Map();
+
+  return {
+    beforeFetch: (meta) => {
+      const { method, url } = meta;
+      requestId = `${method}:${url}`;
+
+      if(cache.has(requestId)) {
+        const cached = cache.get(requestId);
+        if(cached.updatedAt > Date.now() - (maxAge || TEN_MINUTES)) {
+          meta.fetchFn = () => Promise.resolve(new Response(JSON.stringify(cached.data), {status: 200}));
+          return meta;
+        }
+      }
+    },
+    afterFetch: async (res) => {
+      const clone = await res.clone();
+      const data = await clone.json();
+
+      cache.set(requestId, {
+        updatedAt: Date.now(),
+        data
+      });
+
+      return res;
+    }
+  }
+}
+
+export const cache = cachePlugin();

package/api/plugins/delay.js

@@ -0,0 +1,7 @@
+/** 
+ * @param {number} ms 
+ * @returns {import('../index').Plugin}
+ */
+export const delayPlugin = (ms) => ({ afterFetch: () => new Promise(r => setTimeout(r,ms))});
+
+export const delay = delayPlugin(1000);

package/api/plugins/jsonPrefix.js

@@ -0,0 +1,26 @@
+/**
+ * @param {string} jsonPrefix
+ * @returns {import('../index').Plugin}
+ */
+export function jsonPrefixPlugin(jsonPrefix) {
+  let responseType;
+  return {
+    beforeFetch: ({responseType: type}) => {
+      responseType = type;
+    },
+    afterFetch: async (res) => {
+      if(jsonPrefix && responseType === 'json') {
+        let responseAsText = await res.text();
+        
+        if(responseAsText.startsWith(jsonPrefix)) {
+          responseAsText = responseAsText.substring(jsonPrefix.length);
+        }
+
+        return new Response(responseAsText, res);
+      }
+      return res;
+    }
+  }
+}
+
+export const jsonPrefix = jsonPrefixPlugin(`)]}',\n`);

package/api/plugins/logger.js

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

package/api/plugins/mock.js

@@ -0,0 +1,33 @@
+/**
+ * @param {() => void} f 
+ * @param {number} ms 
+ * @param {{
+ *  signal?: AbortSignal
+ * }} [options]
+ */
+function setAbortableTimeout(f, ms, {signal}) {
+  let t;
+  if(!signal?.aborted) {
+    t = setTimeout(f, ms);
+  }
+  signal?.addEventListener('abort', () => clearTimeout(t), {once: true});
+};
+
+/**
+ * @param {Response | (() => Response) | (() => Promise<Response>)} response
+ * @returns {import('../index').Plugin}
+ */
+export function mock(response) {
+  return {
+    beforeFetch: (meta) => {
+      meta.fetchFn = function mock(_, opts) {
+        return new Promise(r => setAbortableTimeout(
+          () => r(typeof response === 'function' ? response() : response), 
+          Math.random() * 1000, 
+          opts?.signal ? { signal: opts.signal } : {}
+        ))
+      }
+      return meta;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -10,13 +10,27 @@
   },
   "exports": {
     "./state.js": "./state.js",
+    "./pwa.js": "./pwa.js",
     "./api.js": "./api.js",
+    "./api/plugins/abort.js": "./api/plugins/abort.js",
+    "./api/plugins/cache.js": "./api/plugins/cache.js",
+    "./api/plugins/delay.js": "./api/plugins/delay.js",
+    "./api/plugins/jsonPrefix.js": "./api/plugins/jsonPrefix.js",
+    "./api/plugins/mock.js": "./api/plugins/mock.js",
+    "./api/plugins/logger.js": "./api/plugins/logger.js",
+    "./api/plugins/xsrf.js": "./api/plugins/xsrf.js",
     "./utils.js": "./utils.js",
     "./package.json": "./package.json"
   },
   "files": [
     "./api.js",
     "./api/index.js",
+    "./api/plugins/abort.js",
+    "./api/plugins/cache.js",
+    "./api/plugins/delay.js",
+    "./api/plugins/jsonPrefix.js",
+    "./api/plugins/mock.js",
+    "./api/plugins/logger.js",
     "./state.js",
     "./state/index.js",
     "./utils.js",