@thepassle/app-tools 0.0.10 → 0.7.0

package/README.md

@@ -1,11 +1,13 @@
 # `@thepassle/app-tools`
 
-Collection of tools I regularly use to build apps. Maybe they're useful to somebody else. Maybe not.
+Collection of tools I regularly use to build apps. Maybe they're useful to somebody else. Maybe not. Most of these are thin wrappers around native API's, like the native `<dialog>` element, `fetch` API, and `URLPattern`.
 
 ## Packages
 
 - [`state`](/state/README.md)
+- [`router`](/router/README.md)
 - [`api`](/api/README.md)
 - [`pwa`](/pwa/README.md)
+- [`dialog`](/dialog/README.md)
 - [`env`](/env/README.md)
 - [`utils`](/utils/README.md)

package/api/index.js

@@ -1,5 +1,9 @@
+import { createLogger } from '../utils/log.js';
+const log = createLogger('api');
+
 function handleStatus(response) {
   if (!response.ok) {
+    log('Response not ok', response.statusText);
     throw new Error(response.statusText);
   }
   return response;
@@ -20,6 +24,7 @@ function handleStatus(response) {
  *  beforeFetch?: (meta: MetaParams) => MetaParams | Promise<MetaParams> | void,
  *  afterFetch?: (res: Response) => Response | Promise<Response>,
  *  transform?: (data: any) => any,
+ *  name: string,
  *  handleError?: (e: Error) => boolean
  * }} Plugin
  * 
@@ -98,13 +103,19 @@ export class Api {
       url += `${(~url.indexOf('?') ? '&' : '?')}${new URLSearchParams(opts.params)}`;
     }
 
-    for(const { beforeFetch } of plugins) {
-      const overrides = await beforeFetch?.({ responseType, headers, fetchFn, baseURL, url, method, opts, data });
-      if(overrides) {
-        ({ responseType, headers, fetchFn, baseURL, url, method, opts, data } = {...overrides});
+    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});
+        }
+      } catch(e) {
+        log(`Plugin "${plugin.name}" error on afterFetch hook`);
+        throw e;
       }
     }
 
+    log(`Fetching ${method} ${url}`, { responseType, headers: Object.fromEntries(headers), fetchFn, baseURL, url, method, opts, data });
     return fetchFn(url, {
       method,
       headers,
@@ -121,8 +132,13 @@ export class Api {
     })
     /** [PLUGINS - AFTERFETCH] */
     .then(async res => {
-      for(const { afterFetch } of plugins) {
-        res = await afterFetch?.(res) ?? res;
+      for(const plugin of plugins) {
+        try {
+          res = await plugin?.afterFetch?.(res) ?? res;
+        } catch(e) {
+          log(`Plugin "${plugin.name}" error on afterFetch hook`)
+          throw e;
+        }
       }
       
       return res;
@@ -132,14 +148,20 @@ export class Api {
     /** [RESPONSETYPE] */
     .then(res => res[responseType]())
     .then(async data => {
-      for(const { transform } of plugins) {
-        data = await transform?.(data) ?? 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 = (await Promise.all(plugins.map(({handleError}) => handleError?.(e) ?? false))).some(_ => !!_);
       if(shouldThrow) throw e;
     });

package/api/plugins/abort.js

@@ -6,6 +6,7 @@ export function abortPlugin() {
   const requests = new Map();
 
   return {
+    name: 'abort',
     beforeFetch: (meta) => {
       const { method, url } = meta;
       requestId = `${method}:${url}`;

package/api/plugins/cache.js

@@ -1,21 +1,22 @@
 const TEN_MINUTES = 1000 * 60 * 10;
 
 /**
- * @param {{maxAge?: number}} [options]
+ * @param {{maxAge?: number}} options
  * @returns {import('../index').Plugin}
  */
-export function cachePlugin({maxAge} = {}) {
+export function cachePlugin({maxAge = TEN_MINUTES} = {}) {
   let requestId;
   const cache = new Map();
 
   return {
+    name: 'cache',
     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)) {
+        if(cached.updatedAt > Date.now() - (maxAge)) {
           meta.fetchFn = () => Promise.resolve(new Response(JSON.stringify(cached.data), {status: 200}));
           return meta;
         }

package/api/plugins/debounce.js

@@ -0,0 +1,37 @@
+function _debounce(promise, opts = { timeout: 1000 }) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    return new Promise((resolve) => {
+      timeoutId = setTimeout(() => {
+        resolve(promise(...args))
+      }, opts.timeout);
+    });
+  };
+}
+
+/**
+ * @param {{
+ *  timeout: number
+ * }} opts 
+ * @returns {import('../index.js').Plugin}
+ */
+export function debouncePlugin(opts = {
+  timeout: 1000
+}) {
+  let debounced;
+
+  return {
+    name: 'debounce',
+    beforeFetch: (meta) => {
+      if(!debounced) {
+        const originalFetch = meta.fetchFn;
+        debounced = _debounce(originalFetch, opts);
+      }
+      meta.fetchFn = debounced;
+      return meta;
+    },
+  }
+}
+
+export const debounce = debouncePlugin();

package/api/plugins/delay.js

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

package/api/plugins/jsonPrefix.js

@@ -5,6 +5,7 @@
 export function jsonPrefixPlugin(jsonPrefix) {
   let responseType;
   return {
+    name: 'jsonPrefix',
     beforeFetch: ({responseType: type}) => {
       responseType = type;
     },

package/api/plugins/logger.js

@@ -9,6 +9,7 @@ export function loggerPlugin({collapsed = true} = {}) {
   let start;
   const group = collapsed ? 'groupCollapsed' : 'group';
   return {
+    name: 'logger',
     beforeFetch: (meta) => {
       console[group](`[START] [${new Date().toLocaleTimeString()}] [${meta.method}] "${meta.url}"`);
       console.table([meta]);

package/api/plugins/mock.js

@@ -1,17 +1,4 @@
-/**
- * @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});
-};
+import { setAbortableTimeout } from '../../utils/async.js';
 
 /**
  * @param {Response | (() => Response) | (() => Promise<Response>)} response
@@ -19,6 +6,7 @@ function setAbortableTimeout(f, ms, {signal}) {
  */
 export function mock(response) {
   return {
+    name: 'mock',
     beforeFetch: (meta) => {
       meta.fetchFn = function mock(_, opts) {
         return new Promise(r => setAbortableTimeout(

package/api/plugins/xsrf.js

@@ -0,0 +1,29 @@
+function getCookie(name, _document = document) {
+  const match = _document.cookie.match(new RegExp(`(^|;\\s*)(${name})=([^;]*)`));
+  return match ? decodeURIComponent(match[3]) : null;
+}
+
+/**
+ * @param {{
+ *  xsrfCookieName?: string,
+ *  xsrfHeaderName?: string,
+ * }} options 
+ * @returns {import('../index').Plugin}
+ */
+export function xsrfPlugin({
+  xsrfCookieName = 'XSRF-TOKEN',
+  xsrfHeaderName = 'X-CSRF-TOKEN'
+} = {}) {
+  const csrfToken = getCookie(xsrfCookieName);
+  return {
+    name: 'xsrf',
+    beforeFetch: (meta) => {
+      if(csrfToken) {
+        meta.headers.set(xsrfHeaderName, csrfToken);
+      }
+      return meta;
+    }
+  }
+}
+
+export const xsrf = xsrfPlugin();

package/dialog/dialog.test.js

@@ -0,0 +1,66 @@
+import { expect, oneEvent } from '@open-wc/testing';
+import { stub } from 'sinon';
+import { Dialog } from './index.js';
+
+describe('Dialog', () => {
+  let dialog;
+
+  beforeEach(() => {
+    dialog = new Dialog({
+      foo: { opening: ({dialog}) => dialog.form.innerHTML = 'hello world' }
+    });
+  });
+
+  afterEach(async () => {
+    if(dialog.open) await dialog.close();
+  });
+
+  it('opens', async () => {
+    await dialog.open({id: 'foo'});
+    await dialog.opened;
+    expect(dialog.isOpen).to.be.true;
+  });
+
+  it('closes', async () => {
+    await dialog.open({id: 'foo'});
+    await dialog.opened;
+    await dialog.close();
+    await dialog.closed;
+    expect(dialog.isOpen).to.be.false;
+  });
+
+  it('modify', async () => {
+    await dialog.open({id: 'foo'});
+
+    const d = await dialog.opened;
+    dialog.modify(node => {node.classList.add('foo')});
+
+    expect(d.classList.contains('foo')).to.be.true;
+  });
+
+  it('runs callbacks', async () => {
+    const cbs = {
+      opening: stub(),
+      opened: stub(),
+      closing: stub(),
+      closed: stub(),
+    };
+    const dialog = new Dialog({foo: cbs});
+
+    await dialog.open({id: 'foo'});
+    await dialog.opened;
+    
+    expect(cbs.opening.called).to.be.true;
+    expect(cbs.opened.called).to.be.true;
+    expect(cbs.closing.called).to.be.false;
+    expect(cbs.closed.called).to.be.false;
+
+    dialog.close()
+    await dialog.closed;
+
+    expect(cbs.opening.called).to.be.true;
+    expect(cbs.opened.called).to.be.true;
+    expect(cbs.closing.called).to.be.true;
+    expect(cbs.closed.called).to.be.true;
+  });
+});

package/dialog/events.js

@@ -0,0 +1,14 @@
+export class DialogStateEvent extends Event {
+  /** 
+   * @param {'opening' | 'opened' | 'closing' | 'closed'} kind
+   * @param {{
+   *  id: string,
+   *  dialog: import('./index.js').DialogNode,
+   * }} opts 
+   */
+  constructor(kind, {id, dialog}) {
+    super(kind);
+    this.dialog = dialog;
+    this.id = id;
+  }
+}

package/dialog/index.js

@@ -0,0 +1,184 @@
+import { APP_TOOLS } from '../utils/CONSTANTS.js';
+import { setupGlobalDialogStyles } from './utils.js';
+import { DialogStateEvent } from './events.js';
+import { onePaint, animationsComplete } from '../utils/async.js';
+import { createLogger } from '../utils/log.js';
+const log = createLogger('dialog');
+
+/**
+ * @typedef {HTMLDialogElement & { form: HTMLFormElement }} DialogNode
+ * @typedef {Record<string, {
+ *  opening?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void,
+ *  opened?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void,
+ *  closing?: (opts: {dialog: DialogNode}) => void,
+ *  closed?: (opts: {dialog: DialogNode}) => void,
+ * }>} Config 
+ */
+
+setupGlobalDialogStyles();
+
+export class Dialog extends EventTarget {
+  #id = '';
+  /** @type {Config} */
+  #config = {};
+  isOpen = false;
+  opened = new Promise((resolve) => {this.__resolveOpened = resolve;});
+  closed = new Promise((resolve) => {this.__resolveClosed = resolve;});
+
+  /**
+   * 
+   * @param {Config} config 
+   */
+  constructor(config) {
+    super();
+    this.#config = config;
+  }
+
+  /**
+   * @returns {DialogNode}
+   */
+  __initDialogNode() {
+    const dialogNode = /** @type {DialogNode} */ (document.createElement('dialog'));
+    dialogNode.setAttribute(APP_TOOLS, '');
+    dialogNode.addEventListener('close', this.__onDialogClose);
+    dialogNode.addEventListener('mousedown', this.__onLightDismiss);
+
+    const form = document.createElement('form');
+    form.setAttribute(APP_TOOLS, '');
+    form.setAttribute('method', 'dialog');
+    dialogNode.form = form;
+
+    dialogNode.appendChild(form);
+
+    return dialogNode;
+  }
+
+  __onLightDismiss = ({target}) => {
+    if(target.nodeName === 'DIALOG') {
+      this.close('dismiss');
+    }
+  }
+
+  close = (kind = 'programmatic') => {
+    this.__dialog?.close(kind);
+  }
+
+  __onDialogClose = async () => {
+    const id = this.#id;
+    const d = /** @type {DialogNode} */ (this.__dialog);
+
+    log(`Closing dialog "${id}"`, { 
+      id, 
+      dialog: d,
+      returnValue: d?.returnValue
+    });
+
+    d.removeAttribute('opened');
+    d.setAttribute('closing', '');
+    this.dispatchEvent(new DialogStateEvent('closing', { 
+      id, 
+      dialog: d, 
+    }));
+    try {
+      await this.#config[id]?.closing?.({dialog: d});
+    } catch(e) {
+      log(`Dialog "${id}" error on closing hook`);
+      throw e;
+    }
+    await animationsComplete(d);
+
+    this.isOpen = false;
+    d.removeAttribute('closing');
+    d.setAttribute('closed', '');
+    
+    // @ts-ignore
+    this.__resolveClosed(d);
+    
+    this.dispatchEvent(new DialogStateEvent('closed', { 
+      id, 
+      dialog: d 
+    }));
+    try {
+      await this.#config[id]?.closed?.({dialog: d});
+    } catch(e) {
+      log(`Dialog "${id}" error on closed hook`);
+      throw e;
+    }
+    log(`Closed dialog "${id}"`, { 
+      id, 
+      dialog: d, 
+      returnValue: d?.returnValue 
+    });
+
+    d?.remove();
+    this.__dialog = undefined;
+
+    this.opened = new Promise((resolve) => {this.__resolveOpened = resolve;});
+    this.#id = '';
+  }
+
+  /**
+   * 
+   * @param {{
+   *   id: string,
+   *   parameters?: object
+   * }} options 
+   * @returns 
+   */
+  async open({id, parameters}) {
+    if(!(id in this.#config)) {
+      throw new Error(`No dialog configured for id: ${id}`);
+    }
+    this.#id = id;
+
+    if(this.isOpen) {
+      log(`Tried to open dialog "${id}" while it was already open.`, { id, parameters, dialog: this.__dialog });
+      return;
+    }
+
+    this.__dialog = this.__initDialogNode();
+    document.body.appendChild(this.__dialog);
+
+    log(`Openening dialog "${id}"`, { id, parameters, dialog: this.__dialog });
+    this.__dialog.setAttribute('opening', '');
+    this.dispatchEvent(new DialogStateEvent('opening', { id, dialog: this.__dialog }));
+
+    try {
+      await this.#config?.[id]?.opening?.({dialog: this.__dialog, parameters});
+    } catch(e) {
+      log(`Dialog "${this.#id}" error on opening hook`);
+      throw e;
+    }
+    await onePaint();
+
+    this.__dialog.showModal();
+    
+    await animationsComplete(this.__dialog);
+
+    this.isOpen = true;
+    this.__dialog.removeAttribute('opening');
+    this.__dialog.setAttribute('opened', '');
+    // @ts-ignore
+    this.__resolveOpened(this.__dialog);
+    this.dispatchEvent(new DialogStateEvent('opened', { id, dialog: this.__dialog }));
+    try {
+      await this.#config?.[id]?.opened?.({dialog: this.__dialog, parameters});
+    } catch(e) {
+      log(`Dialog "${this.#id}" error on opened hook`);
+      throw e;
+    }
+    log(`Opened dialog "${id}"`, { id, parameters, dialog: this.__dialog });
+    this.closed = new Promise((resolve) => {this.__resolveClosed = resolve;});
+  }
+
+  /**
+   * Can be used to modify the dialog
+   * 
+   * @example
+   * dialog.modify(node => {node.classList.add('foo')});
+   * @param {(dialog: DialogNode | undefined) => void} cb
+   */
+  modify(cb) {
+    cb(this.__dialog);
+  }
+}

package/dialog/utils.js

@@ -0,0 +1,40 @@
+import { APP_TOOLS } from '../utils/CONSTANTS.js';
+
+const DIALOG_STYLES_ID = 'dialog-styles';
+
+export function setupGlobalDialogStyles() {
+  let el = document.head.querySelector(`style[${APP_TOOLS}]#${DIALOG_STYLES_ID}`);
+  if (!el) {
+    el = document.createElement('style');
+    el.setAttribute(APP_TOOLS, '');
+    el.id = DIALOG_STYLES_ID;
+    el.innerHTML = `
+      html:has(dialog[${APP_TOOLS}][open]) {
+        overflow: hidden;
+      }
+
+      dialog[${APP_TOOLS}] {
+        pointer-events: none;
+        inset: 0;
+        position: fixed;
+        display: block;
+
+        padding: 0;
+        width: 200px;
+        height: 200px;
+      }
+
+      dialog[${APP_TOOLS}] > form[${APP_TOOLS}] {
+        width: calc(100% - 10px);
+        height: calc(100% - 10px);
+        margin: 0;
+        padding: 5px;
+      }
+
+      dialog[${APP_TOOLS}][open] {
+        pointer-events: auto;
+      }
+    `;
+    document.head.prepend(el);
+  }
+}

package/dialog.js

@@ -0,0 +1 @@
+export { Dialog } from './dialog/index.js';

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.0.10",
+  "version": "0.7.0",
   "description": "",
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "wtr api/api.test.js --node-resolve",
+    "test": "wtr **/*.test.js --node-resolve",
     "test:watch": "npm run test -- --watch"
   },
   "exports": {
     "./state.js": "./state.js",
     "./pwa.js": "./pwa.js",
+    "./dialog.js": "./dialog.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",
+    "./router.js": "./router.js",
+    "./router/plugins/*.js": "./router/plugins/*.js",
+    "./api/plugins/*.js": "./api/plugins/*.js",
     "./utils.js": "./utils.js",
+    "./utils/*.js": "./utils/*.js",
     "./env.js": {
       "development": "./env/env-dev.js",
       "default": "./env/env-prod.js"
@@ -27,23 +26,27 @@
     "./package.json": "./package.json"
   },
   "files": [
+    "./pwa.js",
+    "./dialog.js",
+    "./dialog/*.js",
+    "./pwa/*.js",
+    "./router.js",
+    "./router/index.js",
+    "./router/plugins/*.js",
     "./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",
+    "./api/plugins/*.js",
     "./state.js",
     "./state/index.js",
     "./utils.js",
-    "./utils/index.js",
+    "./utils/*.js",
     "./env/env-dev.js",
     "./env/env-prod.js"
   ],
   "keywords": [
+    "router",
     "state",
+    "pwa",
     "api",
     "fetch",
     "client",

package/pwa/capabilities.js

@@ -0,0 +1,7 @@
+export const capabilities = {
+  WAKELOCK: 'wakeLock' in navigator,
+  BADGING: 'setAppBadge' in navigator,
+  SHARE: 'share' in navigator,
+  SERVICEWORKER: 'serviceWorker' in navigator,
+  NOTIFICATION: 'Notification' in window
+};

package/pwa/events.js

@@ -0,0 +1,33 @@
+/**
+ * `'installable'` event
+ * @example pwa.dispatchEvent(new InstallableEvent());
+ */
+export class InstallableEvent extends Event {
+  constructor() {
+    super('installable');
+  }
+}
+
+/**
+ * `'installed'` event
+ * @example pwa.dispatchEvent(new InstalledEvent(installed));
+ */
+export class InstalledEvent extends Event {
+  /**
+   * @param {boolean} installed
+   */
+  constructor(installed) {
+    super('installed');
+    this.installed = installed;
+  }
+}
+
+/**
+ * `'update-available'` event
+ * @example pwa.dispatchEvent(new UpdateAvailableEvent());
+ */
+export class UpdateAvailableEvent extends Event {
+  constructor() {
+    super('update-available');
+  }
+}