svelte-common/src/util.mjs

common components and utils used in svelte apps

import { writable } from "svelte/store";

export const dateFormatter = new Intl.DateTimeFormat("default", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour12: false,
  hour: "numeric",
  minute: "2-digit",
  second: "2-digit"
});

export function formatSecondsSinceEpoch(sse) {
  if (sse === undefined) {
    return "-";
  }
  return dateFormatter.format(new Date(sse));
}

/*
import { readable } from 'svelte/store';

function liveDuration(seconds) {
  const time = readable(new Date(), set => {
    const interval = setInterval(() => {
      set(seconds);
    }, 1000);
  
    return () => clearInterval(interval);
  });

  return time;
}

*/

/**
 * Create a derived store where all the object keys are prefixed.
 * ```
 * { a: 1, b: 2 } -> { foo_a: 1 foo_b: 2 } // prefix: foo_
 * ```
 * @param {writable} store we derive from
 * @param {string} prefix for each key
 * @returns {writable}
 */
export function keyPrefixStore(store, prefix) {
  const subscriptions = new Set();

  let forwardSubscription;
  let forwardObject;

  function subscribeMyself() {
    if (!forwardSubscription) {
      forwardSubscription = store.subscribe(o => {
        forwardObject = o;
        const object =
          forwardObject === undefined
            ? {}
            : Object.fromEntries(
                Object.entries(forwardObject)
                  .filter(([k, v]) => k.startsWith(prefix))
                  .map(([k, v]) => [k.substring(prefix.length), v])
              );

        subscriptions.forEach(subscription => subscription(object));
      });
    }
  }

  return {
    set: object => {
      subscribeMyself();

      for(const [k,v] of Object.entries(forwardObject)) {
        if(k.startsWith(prefix)) {
          delete forwardObject[k];
        }
      }

      store.set(
        Object.assign(
          forwardObject,
          Object.fromEntries(
            Object.entries(object)
              .map(([k, v]) => [prefix + k, v])
          )
        )
      );
    },

    subscribe: s => {
      subscriptions.add(s);

      subscribeMyself();

      return () => {
        subscriptions.delete(s);
        if (subscriptions.size === 0) {
          forwardSubscription();
          forwardSubscription = undefined;
        }
      };
    }
  };
}