pinkhominid

customElements.define('my-component', class extends HTMLElement {
    static get observedAttributes() {
        return [
            // attrs
        ];
    }
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.render();

pinkhominid

// Derived from https://stackoverflow.com/a/52551910

export function camelize(str) {
  return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}

export function pascalize(str) {
  return (' ' + str).toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}

pinkhominid

export function urlToRelative(abs) {
  const url = new URL(abs);
  const rel = url.toString().substring(url.origin.length);
  return rel;
};

pinkhominid

// https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
export function closestElementComposed(selector, base = this) {
  function __closestFrom(el) {
    if (!el || el === document || el === window) return null;
    let found = el.closest(selector);
    return found ? found : __closestFrom(el.getRootNode().host);
  }
  return __closestFrom(base);
}

pinkhominid

export function isElemOverflown({ clientWidth, scrollWidth }) { return scrollWidth > clientWidth; }

pinkhominid

// derived from https://www.30secondsofcode.org/blog/s/javascript-memoization
export function memoize(fn) {
  new Proxy(fn, {
    cache: new Map(),
    apply(target, thisArg, argsList) {
      let cacheKey = JSON.stringify(argsList);
      if (!this.cache.has(cacheKey)) this.cache.set(cacheKey, target.apply(thisArg, argsList));
      return this.cache.get(cacheKey);
    },
  });

pinkhominid

// Hack for immer esm (see https://github.com/immerjs/immer/issues/557)
// and others that suffer the same
window.process = { ...window.process, env: { ...window?.process?.env, NODE_ENV: 'production' } };

pinkhominid

import { eventPathTargetMatch } from 'https://gist.githubusercontent.com/pinkhominid/8bd98fa6741fb7327ef91724dc9e5590/raw/8c09c01ea7836f9dcdc0867e5a51851430b703b4/eventPathTargetMatch.js';

document.addEventListener('click', e => {
  const target = eventPathTargetMatch(e, 'button[aria-controls]');
  if (!target) return;
  document
    .querySelector(`#${target.getAttribute('aria-controls')}`)
    .toggleAttribute(target.value);
});

pinkhominid

export function dedent(code) {
  let spacesToTrim;
  return code.split('\n').reduce((acc, line) => {
    if (line.trim().length) {
      if (spacesToTrim === undefined) {
        spacesToTrim = /^\s*/.exec(line)[0].length;
      }
      acc += line.substring(spacesToTrim) + '\n';
    } else acc += '\n';
    return acc;

pinkhominid

<!--
  mkdir hello-world
  cd hello-world
  npm init -y
  npm i es-module-shims lit-element
  curl -O https://gist.githubusercontent.com/pinkhominid/301007797a306c949770f24f2a74c9a8/raw/b963f6205c2436f994b7e32182247d9a1cf1aba5/index.html
  npm i -D http-server
  npx http-server -o
-->
<script defer src="./node_modules/es-module-shims/dist/es-module-shims.js"></script>