@thepassle/app-tools 0.0.10 → 0.7.0

package/utils/async.js

@@ -0,0 +1,81 @@
+/**
+ * @param {Function} f 
+ * @returns {<Args>(...args: Args[]) => void}
+ */
+export function debounce(f) {
+  let timeoutId;
+
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      f(...args);
+    });
+  };
+}
+
+/**
+ * @returns {Promise<number>}
+ */
+export const onePaint = () => new Promise(r => requestAnimationFrame(r));
+/**
+ * @param {HTMLElement} element 
+ * @returns {Promise<PromiseSettledResult<Animation>[]>}
+ */
+export const animationsComplete = element => Promise.allSettled(element.getAnimations().map(animation => animation.finished));
+
+/**
+ * @param {() => void} f 
+ * @param {number} ms 
+ * @param {{
+ *  signal?: AbortSignal
+ * }} options
+ */
+export function setAbortableTimeout(f, ms, {signal}) {
+  let t;
+  if(!signal?.aborted) {
+    t = setTimeout(f, ms);
+  }
+  signal?.addEventListener('abort', () => clearTimeout(t), {once: true});
+};
+
+/**
+ * @param {() => boolean} predicate 
+ * @param {{
+ *  timeout?: number,
+ *  message?: string,
+ *  interval?: number
+ * }} options 
+ * @returns {Promise<void>}
+ */
+export function waitUntil(predicate, options = {}) {
+  const { 
+    timeout = 1000,
+    message = `waitUntil timed out after ${timeout}ms`, 
+    interval = 50, 
+  } = options;
+
+  return new Promise((resolve, reject) => {
+    let timeoutId;
+
+    setTimeout(() => {
+      clearTimeout(timeoutId);
+      reject(new Error(message));
+    }, timeout);
+
+    async function nextInterval() {
+      try {
+        if (await predicate()) {
+          resolve();
+        } else {
+          timeoutId = setTimeout(() => {
+            nextInterval();
+          }, interval);
+        }
+      } catch (error) {
+        reject(error);
+      }
+    }
+    nextInterval();
+  });
+}

package/utils/log.js

@@ -0,0 +1,44 @@
+const KEY = Symbol.for('app-tools::log::1.x');
+
+globalThis[KEY] = { 
+  setDebug, 
+  debug: new URL(window.location.href).searchParams.has('app-tools-debug')
+};
+
+/**
+ * @param {boolean} value 
+ */
+export function setDebug(value) {
+  globalThis[KEY].debug = !!value;
+}
+
+/**
+ * @returns {boolean}
+ */
+export function getDebug() {
+  return globalThis[KEY].debug;
+}
+
+/**
+ * @param {string} action - describing the action
+ * @param {*} [data] - any js value
+ */
+export function log(action, data) {
+  if(globalThis[KEY].debug) {
+    console.groupCollapsed(`[app-tools] ${action}`);
+    if(data) {
+      console.log(data);
+    }
+    console.groupEnd();
+  }
+}
+
+/**
+ * @param {string} title 
+ * @returns {(action: string, data?: any) => void}
+ */
+export function createLogger(title) {
+  return (action, data) => {
+    log(`${title}: ${action}`, data);
+  }
+}

package/utils/media.js

@@ -0,0 +1,47 @@
+export const media = {
+  MIN: {
+    XXXL: createMatch('(min-width: 1440px)'),
+    XXL: createMatch('(min-width: 1280px)'),
+    XL: createMatch('(min-width: 960px)'),
+    LG: createMatch('(min-width: 840px)'),
+    MD: createMatch('(min-width: 600px)'),
+    SM: createMatch('(min-width: 480px)'),
+    XS: createMatch('(min-width: 320px)'),
+    XXS: createMatch('(min-width: 0px)'),
+    XXXS: createMatch('(min-width: 0px)'),
+  },
+  MAX: {
+    XXXL: createMatch('(max-width: 1600px)'),
+    XXL: createMatch('(max-width: 1440px)'),
+    XL: createMatch('(max-width: 1280px)'),
+    LG: createMatch('(max-width: 960px)'),
+    MD: createMatch('(max-width: 840px)'),
+    SM: createMatch('(max-width: 600px)'),
+    XS: createMatch('(max-width: 480px)'),
+    XXS: createMatch('(max-width: 320px)'),
+    XXXS: createMatch('(max-width: 0px)'),
+  },
+  STANDALONE: createMatch('(display-mode: standalone)'),
+  REDUCED_MOTION: createMatch('(prefers-reduced-motion: reduce)'),
+  DARK_MODE: createMatch('(prefers-color-scheme: dark)'),
+  LIGHT_MODE: createMatch('(prefers-color-scheme: light)'),
+};
+
+function createMatch(query) {
+  return function match(callback) {
+    const mediaQuery = window.matchMedia(query);
+
+    if(callback) {
+      function executeCb({matches}) {
+        callback?.(matches);
+      }
+
+      mediaQuery.addListener(executeCb);
+      callback(mediaQuery.matches);
+      return () => {
+        mediaQuery.removeListener(executeCb);
+      }
+    }
+    return mediaQuery.matches;
+  }
+}

package/utils.js

@@ -1,2 +1,5 @@
+export { waitUntil, debounce, setAbortableTimeout } from './utils/async.js';
+export { media } from './utils/media.js';
 export { when } from './utils/index.js';
+export { log, setDebug, getDebug } from './utils/log.js';
 export { createService } from './utils/Service.js';