@thepassle/app-tools 0.0.10 → 0.7.0

package/pwa/index.js

@@ -0,0 +1,174 @@
+import { 
+  InstallableEvent, 
+  InstalledEvent, 
+  UpdateAvailableEvent 
+} from './events.js';
+import { capabilities } from './capabilities.js';
+import { createLogger } from '../utils/log.js';
+import { media } from '../utils/media.js';
+const log = createLogger('pwa');
+
+let installable, installPrompt;
+
+/** 
+ * @typedef {Event & {
+ *  prompt(): Promise<void>,
+ *  userChoice: Promise<{
+ *   outcome: 'accepted' | 'dismissed',
+ *   platform: string
+ *  }>
+ * }} BeforeInstallPromptEvent 
+ */
+
+class Pwa extends EventTarget {
+  /** @type {boolean} */
+  updateAvailable = false;
+  /** @type {boolean} */
+  installable = false;
+  /** @type {BeforeInstallPromptEvent  | undefined} */
+  installPrompt;
+  /** @type {ServiceWorker | undefined} */
+  __waitingServiceWorker;
+  /** @type {boolean} */
+  isInstalled = media.STANDALONE();
+
+  /** Triggers the install prompt, when it's available. You can call this method when the `'installable'` event has fired. */
+  triggerPrompt = async () => {
+    log('Triggering prompt')
+    if(this.installPrompt) {
+      this.installPrompt.prompt();
+      const { outcome } = await this.installPrompt?.userChoice;
+
+      if (outcome === 'accepted') {
+        log('Prompt accepted')
+        this.dispatchEvent(new InstalledEvent(true));
+        this.installPrompt = undefined;
+      } else {
+        log('Prompt denied')
+        this.dispatchEvent(new InstalledEvent(false));
+      }
+    }
+  }
+
+  /** Update */
+  update = () => {
+    log('Skip waiting')
+    this.__waitingServiceWorker?.postMessage({ type: 'SKIP_WAITING' });
+  }
+
+  /**
+   * @param {string} swPath 
+   * @param {RegistrationOptions} opts 
+   * @returns {Promise<ServiceWorkerRegistration> | Promise<void>}
+   */
+  register(swPath, opts) {
+    if(capabilities.SERVICEWORKER) {
+      if(opts) {
+        return navigator.serviceWorker.register(swPath, opts);
+      } else {
+        return navigator.serviceWorker.register(swPath);
+      }
+    }
+    return Promise.resolve();
+  }
+
+  async kill() {
+    if (capabilities.SERVICEWORKER) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+      log('Killed service worker');
+    }
+
+    const cachesList = await caches.keys();
+    await Promise.all(cachesList.map(key => caches.delete(key)));
+    log('Cleared cache');
+
+    setTimeout(() => {
+      window.location.reload();
+    });
+  }
+}
+
+const pwa = new Pwa();
+
+window.addEventListener('beforeinstallprompt', e => {
+  log('Before install prompt fired')
+  installable = true;
+  installPrompt = /** @type {BeforeInstallPromptEvent} */ (e);
+  pwa.installable = installable;
+  pwa.installPrompt = installPrompt;
+  pwa.dispatchEvent(new InstallableEvent());
+});
+
+if(capabilities.SERVICEWORKER) {
+  /** @type {ServiceWorker | null} */
+  let newWorker;
+
+  navigator.serviceWorker.getRegistration().then(reg => {
+    if (reg) {
+      /** 
+       * If there is already a waiting service worker in line, AND an active, controlling
+       * service worker, it means there is an update ready
+       */
+      if (reg.waiting && navigator.serviceWorker.controller) {
+        log('New service worker available')
+        pwa.updateAvailable = true;
+        pwa.__waitingServiceWorker = reg.waiting;
+        pwa.dispatchEvent(new UpdateAvailableEvent());
+      }
+         
+      /**
+       * If there is no waiting service worker yet, it might still be parsing or installing
+       */
+      reg.addEventListener('updatefound', () => {
+        newWorker = reg.installing;
+        if(newWorker) {
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker?.state === 'installed' && navigator.serviceWorker.controller) {
+              log('New service worker available')
+              pwa.updateAvailable = true;
+              pwa.__waitingServiceWorker = newWorker;
+              pwa.dispatchEvent(new UpdateAvailableEvent());
+            }
+          });
+        }
+      });
+    }
+  });
+
+  /** 
+   * Handle the reload whenever the service worker has updated. This can happen either via:
+   * - The service worker calling skipWaiting itself (skipWaiting pattern)
+   * - Or calling `pwa.update()` after the `'update-available'` event has fired, to let the user choose when they would like to activate the update
+   * 
+   * This logic prevents an unnecessary page reload the first time the service worker has installed and activated
+   */
+  let refreshing;
+  async function handleUpdate() {
+    // check to see if there is a current active service worker
+    const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state;
+
+    navigator.serviceWorker.addEventListener('controllerchange', async () => {
+      log('Controller change');
+      if (refreshing) return;
+
+      // when the controllerchange event has fired, we get the new service worker
+      const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state;
+
+      // if there was already an old activated service worker, and a new activating service worker, do the reload
+      if(oldSw === 'activated' && newSw === 'activating') {
+        log('Reloading');
+        refreshing = true;
+        window.location.reload();
+      }
+    });
+  }
+
+  if(capabilities.SERVICEWORKER) {
+    handleUpdate();
+  }
+}
+
+export { pwa };

package/pwa.js

@@ -0,0 +1,2 @@
+export { pwa } from './pwa/index.js';
+export { capabilities } from './pwa/capabilities.js';

package/router/index.js

@@ -0,0 +1,221 @@
+import { createLogger } from '../utils/log.js';
+const log = createLogger('router');
+
+class RouteEvent extends Event {
+  /**
+   * @param {Context} context 
+   */
+  constructor(context) {
+    super('route-changed');
+    this.context = context;
+  }
+}
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  shouldNavigate?: (context: Context) => {
+ *   condition: () => boolean | (() => Promise<boolean>),
+ *   redirect: string
+ *  },
+ *  beforeNavigation?: (context: Context) => void,
+ *  afterNavigation?: (context: Context) => void,
+ * }} Plugin
+ * @typedef {{
+ *  title?: string,
+ *  query: Object,
+ *  params: Object,
+ *  url: URL,
+ *  [key: string]: any
+ * }} Context
+ * @typedef {{
+ *  path: string,
+ *  title: string | ((context: Context) => string),
+ *  render?: <RenderResult>(context: Context) => RenderResult
+ *  plugins?: Plugin[]
+ * }} RouteDefinition
+ * @typedef {RouteDefinition & {
+ *  urlPattern?: any,
+ * }} Route
+ */
+
+export class Router extends EventTarget {
+  context = {
+    params: {},
+    query: {},
+    title: '',
+    url: new URL(window.location.href)
+  }
+
+  /**
+   * @param {{
+   *   fallback?: string,
+   *   plugins?: Plugin[],
+   *   routes: RouteDefinition[]
+   * }} config 
+   */
+  constructor(config) {
+    super();
+    this.config = config;
+
+    /** @type {Route[]} */
+    this.routes = config.routes.map((route) => {
+      const r = /** @type {unknown} */ ({
+        ...route,
+        urlPattern: new URLPattern({
+          pathname: route.path,
+          baseURL: window.location.href,
+          search: '*',
+          hash: '*',
+        }),
+      });
+      return /** @type {Route} */ (r);
+    });
+    log('Initialized routes', this.routes);
+
+    queueMicrotask(() => {
+      this.navigate(new URL(window.location.href));
+    });
+    window.addEventListener('popstate', this._onPopState);
+    window.addEventListener('click', this._onAnchorClick);
+  }
+
+  get url() {
+    return new URL(window.location.href);
+  }
+
+  get fallback() {
+    return new URL(
+      this.config?.fallback || this.baseUrl.href.substring(window.location.origin.length), 
+      this.baseUrl
+    )
+  }
+
+  get baseUrl() {
+    return new URL('./', document.baseURI);
+  }
+
+  render() {
+    log(`Rendering route ${this.context.url.pathname}${this.context.url.search}`, { context: this.context, route: this.route });
+    return this.route?.render?.(this.context);
+  }
+
+  /**
+   * @param {URL} url 
+   * @returns {Route | null}
+   */
+  _matchRoute(url) {
+    for (const route of this.routes) {
+      const match = route.urlPattern.exec(url);
+      if (match) {
+        const { title } = route;
+        const query = Object.fromEntries(new URLSearchParams(url.search)); 
+        const params = match?.pathname?.groups ?? {};
+        this.context = {
+          url,
+          title: typeof title === 'function' ? title({params, query, url}) : title,
+          params,
+          query,
+        }
+        return route;
+      }
+    }
+    log(`No route matched for ${url.pathname}${url.search}`, url);
+    return null;
+  }
+  
+  _notifyUrlChanged() {
+    this.dispatchEvent(new RouteEvent(this.context));
+  }
+
+  _onPopState = () => {
+    this.route = this._matchRoute(new URL(window.location.href));
+    this._notifyUrlChanged();
+  }
+
+  _onAnchorClick = (e) => {
+    if (
+      e.defaultPrevented ||
+      e.button !== 0 ||
+      e.metaKey ||
+      e.ctrlKey ||
+      e.shiftKey
+    ) {
+      return;
+    }
+
+    const a = e.composedPath().find((el) => el.tagName === 'A');
+    if (!a || !a.href) return;
+
+    const url = new URL(a.href);
+
+    if (this.url.href === url.href) return;
+    if (a.hasAttribute('download') || a.href.includes('mailto:')) return;
+
+    const target = a.getAttribute('target');
+    if (target && target !== '' && target !== '_self') return;
+    
+    e.preventDefault();
+    this.navigate(url);
+  }
+
+  /**
+   * @param {string | URL} url 
+   */
+  async navigate(url) {
+    if (typeof url === 'string') {
+      url = new URL(url, this.baseUrl);
+    }    
+    this.route = this._matchRoute(url) || this._matchRoute(this.fallback);
+    log(`Navigating to ${url.pathname}${url.search}`, { context: this.context, route: this.route });
+
+    /** @type {Plugin[]} */
+    const plugins = [
+      ...(this.config?.plugins ?? []), 
+      ...(this.route?.plugins ?? []), 
+    ];
+
+    for (const plugin of plugins) {
+      try {
+        const result = await plugin?.shouldNavigate?.(this.context);
+        if (result) {
+          const condition = await result.condition();
+          if (!condition) {
+            url = new URL(result.redirect, this.baseUrl);
+            this.route = this._matchRoute(url) || this._matchRoute(this.fallback);
+            log('Redirecting', { context: this.context, route: this.route });
+          }
+        }
+      } catch(e) {
+        log(`Plugin "${plugin.name}" error on shouldNavigate hook`, e);
+        throw e;
+      }
+    }
+
+    if (!this.route) {
+      throw new Error(`[ROUTER] No route or fallback matched for url ${url}`);
+    }
+
+    for (const plugin of plugins) {
+      try {
+        await plugin?.beforeNavigation?.(this.context);
+      } catch(e) {
+        log(`Plugin "${plugin.name}" error on beforeNavigation hook`, e);
+        throw e;
+      }
+    }
+
+    window.history.pushState(null, '', `${url.pathname}${url.search}`);
+    document.title = this.context.title;
+    this._notifyUrlChanged();
+
+    for (const plugin of plugins) {
+      try {
+        await plugin?.afterNavigation?.(this.context);
+      } catch(e) {
+        log(`Plugin "${plugin.name}" error on afterNavigation hook`, e);
+        throw e;
+      }
+    }
+  }
+}

package/router/plugins/appName.js

@@ -0,0 +1,12 @@
+/**
+ * @param {string} name 
+ * @returns {import('../index.js').Plugin}
+ */
+export function appName(name){
+  return {
+    name: 'appName',
+    beforeNavigation: (context) => {
+      context.title = `${name} ${context.title}`
+    }
+  }
+}

package/router/plugins/checkServiceWorkerUpdate.js

@@ -0,0 +1,15 @@
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const checkServiceWorkerUpdate = {
+  name: 'checkServiceWorkerUpdate',
+  beforeNavigation: () => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistration().then(registration => {
+        if (registration) {
+          registration.update();
+        }
+      });
+    }
+  }
+}

package/router/plugins/data.js

@@ -0,0 +1,13 @@
+/**
+ * @param {<Data>(context: import('../index.js').Context) => Promise<Data>} promise 
+ * @returns {import('../index.js').Plugin}
+ */
+export function data(promise){
+  return {
+    name: 'data',
+    beforeNavigation: async (context) => {
+      const data = await promise(context);
+      context.data = data;
+    }
+  }
+}

package/router/plugins/lazy.js

@@ -0,0 +1,13 @@
+/**
+ * @example lazy(() => import('foo'))
+ * @param {any} fn
+ * @returns {import('../index.js').Plugin}
+ */
+export function lazy(fn) {
+  return {
+    name: 'lazy',
+    beforeNavigation: () => {
+      fn();
+    }
+  }
+}

package/router/plugins/offline.js

@@ -0,0 +1,16 @@
+/**
+ * @example offlinePlugin('/my-offline-page')
+ * @param {string} offlineRoute
+ * @returns {import('../index.js').Plugin}
+ */
+export function offlinePlugin(offlineRoute = '/offline') {
+  return {
+    name: 'offline',
+    shouldNavigate: () => ({
+      condition: () => !navigator.onLine,
+      redirect: offlineRoute,
+    })
+  }
+}
+
+export const offline = offlinePlugin();

package/router/plugins/redirect.js

@@ -0,0 +1,13 @@
+/**
+ * @param {string} path 
+ * @returns {import('../index.js').Plugin}
+ */
+export function redirect(path) {
+  return {
+    name: 'redirect',
+    shouldNavigate: () => ({
+      condition: () => false,
+      redirect: path
+    })
+  }
+}

package/router/plugins/resetFocus.js

@@ -0,0 +1,31 @@
+import { APP_TOOLS } from '../../utils/CONSTANTS.js';
+
+const FOCUS_ELEMENT_ID = 'router-focus';
+const SR_ONLY_STYLE = `position:absolute;top:0;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);margin:-1px;`;
+
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const resetFocus = {
+  name: 'resetFocus',
+  afterNavigation: ({title}) => {
+    let el = /** @type {HTMLElement} */ (document.querySelector(`div[${APP_TOOLS}]#${FOCUS_ELEMENT_ID}`));
+    if (!el) {
+      el = document.createElement('div');
+      el.setAttribute(APP_TOOLS, '');
+      el.id = FOCUS_ELEMENT_ID;
+      el.setAttribute('tabindex', '-1');
+      el.setAttribute('aria-live', 'polite');
+      el.setAttribute('style', SR_ONLY_STYLE);
+      el.addEventListener('blur', () => {
+        el?.style.setProperty('display', 'none');
+      });
+  
+      document.body.insertBefore(el, document.body.firstChild);
+    }
+  
+    el.textContent = /** @type {string} */ (title);
+    el.style.removeProperty('display');
+    el.focus();  
+  }
+}

package/router/plugins/scrollToTop.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const scrollToTop = {
+  name: 'scrollToTop',
+  beforeNavigation: () => {
+    window.scrollTo(0, 0);
+  }
+}

package/router.js

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

package/state/index.js

@@ -1,8 +1,11 @@
+import { createLogger } from '../utils/log.js';
+const log = createLogger('state');
+
 /**
  * `'state-changed'` event
  * @example this.dispatchEvent(new StateEvent(data));
  */
- export class StateEvent extends Event {
+export class StateEvent extends Event {
   constructor(state = {}) {
     super('state-changed');
     this.state = state;
@@ -18,7 +21,9 @@ export class State extends EventTarget {
   }
 
   setState(state) {
+    log('Before: ', this.#state);
     this.#state = typeof state === 'function' ? state(this.#state) : state;
+    log('After: ', this.#state);
     this.dispatchEvent(new StateEvent(this.#state));
   }
 

package/utils/CONSTANTS.js

@@ -0,0 +1 @@
+export const APP_TOOLS = 'app-tools';

package/utils/Service.js

@@ -0,0 +1,83 @@
+import { when } from './index.js';
+
+export function createService(defaults) {
+  return class Service {
+    constructor(host, promise) {
+      (this.host = host).addController(this);
+      
+      this.promise = promise;
+      this.state = 'initialized';
+    }
+  
+    setPromise(promise) {
+      this.promise = promise;
+    }
+  
+    setError(msg) {
+      this.errorMessage = msg;
+      this.state = 'error';
+      this.host.requestUpdate();
+    }
+  
+    request(params) {
+      this.state = 'pending';
+      this.host.requestUpdate();
+  
+      return this.promise(params)
+        .then(data => {
+          this.state = 'success';
+          this.data = data;
+          this.host.requestUpdate();
+          return data;
+        })
+        .catch(e => {
+          this.errorMessage = e?.message;
+          this.state = 'error';
+          this.host.requestUpdate();
+          throw e;
+        });
+    }
+    
+    /**
+     * Use states individually, useful if you may need to render stuff in different locations
+     */
+    initialized(templateFn) {
+      return when(this.state === 'initialized', templateFn || defaults.initialized);
+    }
+  
+    pending(templateFn) {
+      return when(this.state === 'pending', templateFn || defaults.pending);
+    }
+  
+    success(templateFn) {
+      const template = templateFn || defaults.success;
+      return when(this.state === 'success', () => template(this.data));
+    }
+    
+    error(templateFn) {
+      const template = templateFn || defaults.error;
+      return when(this.state === 'error', () => template(this.errorMessage));
+    }
+  
+    /**
+     * Combined render method, if you want to just render everything in place
+     */
+    render(templates) {
+      const states = {
+        ...defaults,
+        ...templates,
+      }
+  
+      switch(this.state) {
+        case 'initialized':
+          return states.initialized();
+        case 'pending':
+          return states.pending();
+        case 'success':
+          return states.success(this.data);
+        case 'error':
+          return states.error(this.errorMessage);
+      }
+    }
+  }  
+}