@thepassle/app-tools 0.10.3 → 1.0.1

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,7 +24,7 @@ function handleStatus(response) {
 /** @typedef {import('./types.js').MetaParams} MetaParams */
 
 /**
- * @example 
+ * @example
  * const api = new Api({
  *  baseURL: 'https://api.foo.com/',
  *  responseType: 'text',
@@ -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 (res) => {
+          for (const plugin of plugins) {
+            try {
+              const afterFetchResult =
+                (await plugin?.afterFetch?.(res, {
+                  responseType,
+                  headers,
+                  fetchFn,
+                  baseURL,
+                  url,
+                  method,
+                  opts,
+                  data,
+                })) ?? 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;
+        })
+    );
   }
 
   /** @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/cache.js

@@ -1,39 +1,58 @@
 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',
+    name: "cache",
     beforeFetch: (meta) => {
       const { method, url } = meta;
-      requestId = `${method}:${url}`;
-
-      if(cache.has(requestId)) {
+      const requestId = `${method}:${url}`;
+      if (cache.has(requestId)) {
         const cached = cache.get(requestId);
-        if(cached.updatedAt > Date.now() - (maxAge)) {
-          meta.fetchFn = () => Promise.resolve(new Response(JSON.stringify(cached.data), {status: 200}));
+        if (cached.updatedAt > Date.now() - maxAge) {
+          meta.fetchFn = () =>
+            Promise.resolve(
+              new Response(JSON.stringify(cached.data), { status: 200 }),
+            );
           return meta;
         }
       }
     },
-    afterFetch: async (res) => {
-      const clone = await res.clone();
+    afterFetch: async (res, meta) => {
+      const requestId = `${meta.method}:${meta.url}`;
+      const clone = res.clone();
       const data = await clone.json();
-
-      cache.set(requestId, {
-        updatedAt: Date.now(),
-        data
-      });
-
+      cache.set(requestId, { updatedAt: Date.now(), data });
+      evict();
       return res;
-    }
-  }
+    },
+  };
 }
 
-export const cache = cachePlugin();
+export const cache = cachePlugin();

package/api/plugins/retry.js

@@ -0,0 +1,44 @@
+/**
+ * @param {object} options
+ * @param {number} [options.maxRetries=5] - Maximum number of retries
+ * @param {number[]} [options.delays=[1000, 2000, 4000, 8000, 16000]] - Delay in ms per retry attempt
+ * @param {(e: Error) => boolean} [options.shouldRetry] - Optional predicate to control which errors are retried
+ * @returns {import('../index.js').Plugin}
+ */
+export function retry({
+  maxRetries = 5,
+  delays = [1000, 2000, 4000, 8000, 16000],
+  shouldRetry = () => true,
+} = {}) {
+  return {
+    name: "retry",
+    handleError(e) {
+      // Returning false suppresses the throw — we handle retrying in beforeFetch
+      return true;
+    },
+    async beforeFetch(context) {
+      const { fetchFn } = context;
+      // Wrap fetchFn to add retry logic
+      context.fetchFn = async (url, opts) => {
+        let attempt = 0;
+        while (true) {
+          try {
+            return await fetchFn(url, opts);
+          } catch (e) {
+            const isRetryable = shouldRetry(/** @type {Error} */ (e));
+            const hasAttempts = attempt < maxRetries;
+            if (!isRetryable || !hasAttempts) throw e;
+            const delay = delays[attempt] ?? delays[delays.length - 1];
+            console.warn(
+              `[retry] Attempt ${attempt + 1} failed. Retrying in ${delay}ms...`,
+              /** @type {Error} */ (e).message,
+            );
+            await new Promise((res) => setTimeout(res, delay));
+            attempt++;
+          }
+        }
+      };
+      return context;
+    },
+  };
+}

package/dialog/dialog.test.js

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

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

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/plugins/retry.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @param {object} options
+ * @param {number} [options.maxRetries=5] - Maximum number of retries
+ * @param {number[]} [options.delays=[1000, 2000, 4000, 8000, 16000]] - Delay in ms per retry attempt
+ * @param {(e: Error) => boolean} [options.shouldRetry] - Optional predicate to control which errors are retried
+ * @returns {import('../index.js').Plugin}
+ */
+export function retry({ maxRetries, delays, shouldRetry, }?: {
+    maxRetries?: number;
+    delays?: number[];
+    shouldRetry?: (e: Error) => boolean;
+}): import('../index.js').Plugin;

package/types/api/types.d.ts

@@ -9,7 +9,7 @@ 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?: (res: Response, meta: MetaParams) => void | Promise<void> | Response | Promise<Response>;
     transform?: (data: any) => any;
     name: string;
     handleError?: (e: Error) => boolean;

package/types/state/index copy.d.ts

@@ -1,50 +0,0 @@
-/**
- * `'state-changed'` event
- * @template T
- * @example this.dispatchEvent(new StateEvent(data));
- */
-export class StateEvent<T> extends Event {
-    /**
-     * @param {T} state
-     */
-    constructor(state: T);
-    /** @type {T} */
-    state: T;
-}
-/**
- * @template T
- * @typedef {{
- *  name: string,
- *  update?: (prevState: T, newState: T) => T,
- *  effect?: (prevState: T, newState: T) => void | Promise<void>,
- * }} Plugin
- */
-/**
- * @template T
- * @extends EventTarget
- */
-export class State<T> extends EventTarget {
-    /**
-     * @param {T} initialState
-     * @param {Array<{ update: (prevState: T, newState: T) => T }>} [plugins=[]]
-     */
-    constructor(initialState: T, plugins?: {
-        update: (prevState: T, newState: T) => T;
-    }[]);
-    /**
-     * @param {T | ((prevState: T) => T)} state
-     * @param {boolean} [broadcast=true]
-     */
-    setState(state: T | ((prevState: T) => T), broadcast?: boolean): void;
-    /**
-     * @returns {T}
-     */
-    getState(): T;
-    #private;
-}
-export const state: State<{}>;
-export type Plugin<T> = {
-    name: string;
-    update?: (prevState: T, newState: T) => T;
-    effect?: (prevState: T, newState: T) => void | Promise<void>;
-};