Collect all btld code

Author: fru

btld-template/btld/attributes.ts

@@ -0,0 +1,96 @@
+interface ObservedBase {
+  attr: string;
+  prop?: string;
+  toAttr?: (value: unknown) => string | null;
+  attrSync?: true;
+}
+
+interface Observed<T> extends ObservedBase {
+  toProp: (value: string | null) => T;
+}
+
+interface ObservedInstance extends Observed<unknown> {
+  // mark as required:
+  prop: string;
+
+  // component specific:
+  state: unknown;
+  setter?: (value: any) => void;
+}
+
+const camelCase = (a: string) => a.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+// Helper Functions
+
+function toAttrDefaut(value: unknown) {
+  if (value === null || value === undefined || value === false) return null;
+  if (value === true) return '';
+  return String(value);
+}
+
+export function setAttrSafe(el: HTMLElement | undefined, base: ObservedBase | string, value: unknown) {
+  if (typeof base === 'string') base = { attr: base };
+  if (!el) return;
+  const oldValue = el.getAttribute(base.attr);
+  const newValue = (base.toAttr ?? toAttrDefaut)(value);
+
+  if (newValue === oldValue) return;
+  if (newValue === null) {
+    el.removeAttribute(base.attr);
+  } else {
+    el.setAttribute(base.attr, newValue);
+  }
+}
+
+// Store
+
+export function createAttributeObserverStore(el: HTMLElement) {
+  const store: { [attr: string]: ObservedInstance } = {};
+
+  const api = {
+    set(o: ObservedInstance | string, value: unknown, opt?: { noSetter?: true; noAttrSync?: true }) {
+      if (typeof o === 'string') o = store[o];
+      if (value === o.state) return;
+      o.state = value;
+      if (!opt?.noSetter && o.setter) o.setter(value);
+      if (!opt?.noAttrSync && o.attrSync) setAttrSafe(el, o, value);
+    },
+
+    redefine() {
+      for (const o of Object.values(store)) {
+        Object.defineProperty(el, o.prop, {
+          enumerable: true,
+          configurable: true,
+          get: () => o.state,
+          set: (value: unknown) => api.set(o, value),
+        });
+        store[o.attr].state = o.toProp(el.getAttribute(o.attr));
+      }
+    },
+
+    observe<T>(observed: Observed<T>, setter?: (value: T) => void): T {
+      const state = observed.toProp(null);
+      store[observed.attr] = {
+        ...observed,
+        prop: observed.prop ?? camelCase(observed.attr),
+        state,
+        setter,
+      };
+      return state;
+    },
+
+    observeBool(o: ObservedBase, setter?: (value: boolean) => void): boolean {
+      return this.observe({ ...o, toProp: (v) => v !== null }, setter);
+    },
+
+    observeString(o: ObservedBase, setter?: (value: string | null) => void): string | null {
+      return this.observe({ ...o, toProp: (v) => v }, setter);
+    },
+
+    attributeChange(name: string, attrValue: string | null) {
+      let o = store[name];
+      if (o) api.set(o, o.toProp(attrValue), { noAttrSync: true });
+    },
+  };
+  return api;
+}

btld-template/btld/base.ts

@@ -0,0 +1,66 @@
+import { createAttributeObserverStore, setAttrSafe } from './attributes';
+import { createEventStore } from './events';
+import { css, type Literal } from './literals';
+
+const baseStyleShadow = css`
+  :host([no-animation]),
+  :host([no-animation]) * {
+    transition-duration: 0ms !important;
+  }
+`;
+
+export abstract class BtldElementBase extends HTMLElement {
+  // Stores
+
+  readonly events = createEventStore();
+  readonly props = createAttributeObserverStore(this);
+
+  // Literals
+
+  applyScoped(scope: string, ...literals: Literal[]) {
+    for (const l of literals) l.apply(this, scope);
+  }
+
+  applyShadow(...literals: Literal[]) {
+    const shadow = this.attachShadow({ mode: 'open' });
+    baseStyleShadow.apply(shadow, '');
+    for (const l of literals) l.apply(shadow, '');
+  }
+
+  apply(...literals: Literal[]) {
+    this.applyScoped('', ...literals);
+  }
+
+  // Lifecycle
+
+  connectedCallback() {
+    setAttrSafe(this, 'no-animation', true);
+    this.connect();
+
+    setTimeout(() => {
+      setAttrSafe(this, 'no-animation', false);
+    });
+  }
+
+  disconnectedCallback() {
+    this.events.removeAll();
+    this.disconnect();
+    setAttrSafe(this, 'no-animation', true);
+  }
+
+  attributeChangedCallback(name: string, old: string | null, value: string | null) {
+    this.props.attributeChange(name, value);
+    this.attributeChanged(name, old, value);
+  }
+
+  connectedMoveCallback() {
+    this.disconnectedCallback();
+    this.connectedCallback();
+  }
+
+  // Abstract
+
+  connect() {}
+  disconnect() {}
+  attributeChanged(name: string, old: string | null, value: string | null) {}
+}

btld-template/btld/elements/details-panel.ts

@@ -0,0 +1,144 @@
+import { setAttrSafe } from '../attributes';
+import { BtldElementBase } from '../base';
+import { css, html } from '../literals';
+
+const detailsCss = css`
+  details:has(> details-panel[layout='grid-columns'])::details-content,
+  details:has(> details-panel:not([layout]))::details-content {
+    content-visibility: visible !important;
+    overflow: hidden;
+  }
+
+  details:has(> details-panel[layout='flex']) {
+    display: contents;
+  }
+
+  details:has(> details-panel[layout='flex'])::details-content {
+    content-visibility: visible !important;
+    display: contents !important;
+  }
+`;
+
+const layoutCss = css`
+  :where(details-panel[open]) {
+    --details-delay: var(--details-delay-opening);
+  }
+
+  :where(details-panel:not([open])) {
+    --details-delay: var(--details-delay-closing);
+  }
+
+  :where(details-panel) {
+    --details-ease: ease-in-out;
+    --details-duration: 0.15s;
+
+    --details-transition: var(--details-duration) var(--details-ease) var(--details-delay, 0s);
+
+    transition:
+      flex-grow var(--details-transition),
+      grid-template-rows var(--details-transition),
+      grid-template-columns var(--details-transition);
+  }
+
+  :where(details-panel:not([layout]), details-panel[layout='grid-columns']) {
+    display: grid;
+  }
+
+  :where(details-panel:not([layout]):not([open])) {
+    grid-template-rows: 0fr;
+    --details-transform: var(--details-transform-closed, traslateY(-100%));
+  }
+
+  :where(details-panel:not([layout])[open]) {
+    grid-template-rows: 1fr;
+    transform: translateY(0);
+  }
+
+  :where(details-panel[layout='grid-columns']:not([open])) {
+    grid-template-columns: 0fr;
+    --details-transform: var(--details-transform-closed, traslateX(-100%));
+  }
+
+  :where(details-panel[layout='grid-columns'][open]) {
+    grid-template-columns: 1fr;
+  }
+
+  :where(details-panel[layout='flex']:not([open])) {
+    flex-grow: 0.00001;
+    --details-transform: var(--details-transform-closed);
+  }
+
+  :where(details-panel[layout='flex'][open]) {
+    flex-grow: 1;
+  }
+`;
+
+const easeCss = css`
+  details-panel {
+    --ease-step-at-start: cubic-bezier(0, 1, 0, 1);
+    --ease-step-at-end: cubic-bezier(1, 0, 1, 0);
+    --ease-around-closed: var(--ease-step-at-end);
+    --ease-around-opened: var(--ease-step-at-start);
+  }
+
+  details-panel[open] {
+    --ease-around-closed: var(--ease-step-at-start);
+    --ease-around-opened: var(--ease-step-at-end);
+  }
+`;
+
+const shadowHtml = html`
+  <div part="item">
+    <div part="transform">
+      <slot />
+    </div>
+  </div>
+`;
+
+const shadowCss = css`
+  [part='item'] {
+    min-height: 0;
+  }
+  [part='transform'] {
+    transform: var(--details-transform);
+    transition: transform var(--details-transition);
+  }
+`;
+
+class BtldDetailsPanel extends BtldElementBase {
+  static observedAttributes = ['open', 'layout'];
+
+  open = this.props.observeBool({ attr: 'open', attrSync: true }, (value) => {
+    setAttrSafe(this.details, 'open', value);
+  });
+
+  layout = this.props.observeString({ attr: 'layout', attrSync: true });
+
+  details: HTMLDetailsElement | undefined;
+
+  constructor() {
+    super();
+    this.props.redefine();
+    this.applyShadow(shadowHtml, shadowCss);
+    this.apply(detailsCss, layoutCss, easeCss);
+  }
+
+  override connect() {
+    if (this.parentElement instanceof HTMLDetailsElement) {
+      this.details = this.parentElement;
+      this.props.set('open', this.details.open, { noSetter: true });
+      this.events.add(this.details, 'toggle', ({ newState }) => {
+        this.props.set('open', newState === 'open', { noSetter: true });
+      });
+    }
+
+    // TODO make this changeable after connect
+    if (this.hasAttribute('toggle-on-click')) {
+      this.events.add(this, 'click', () => {
+        this.open = !this.open;
+      });
+    }
+  }
+}
+
+customElements.define('details-panel', BtldDetailsPanel);

btld-template/btld/elements/index.ts

@@ -0,0 +1 @@
+import './details-panel';

btld-template/btld/events.ts

@@ -0,0 +1,17 @@
+export function createEventStore() {
+  const cleanup: (() => void)[] = [];
+
+  type Evt = HTMLElementEventMap;
+
+  return {
+    add<T extends keyof Evt>(el: EventTarget, type: T, listener: (ev: Evt[T]) => void) {
+      el.addEventListener(type, listener as EventListener);
+      cleanup.push(() => el.removeEventListener(type, listener as EventListener));
+    },
+
+    removeAll() {
+      cleanup.forEach((callback) => callback());
+      cleanup.length = 0;
+    },
+  };
+}

btld-template/btld/index.ts

@@ -0,0 +1,4 @@
+export * from './attributes';
+export * from './base';
+export * from './events';
+export * from './literals';

btld-template/btld/literals.ts

@@ -0,0 +1,42 @@
+export interface Literal {
+  apply: (el: ShadowRoot | Element, scope: string) => void;
+}
+
+export function css(strings: TemplateStringsArray, ...values: any[]): Literal {
+  const content = String.raw(strings, ...values);
+  const cache: { [key: string]: CSSStyleSheet } = {};
+
+  return {
+    apply(el: ShadowRoot | Element, scope: string) {
+      const root = el instanceof ShadowRoot ? el : document;
+      if (cache[scope] && !(el instanceof ShadowRoot)) return;
+
+      if (!cache[scope]) {
+        // Replace [_] with [_scope] and [_="value"] with [_scope="value"]
+        // (?=...): positive lookahead, doesn't include character set in the match
+        let scoped = scope ? content.replace(/\[_(?=[\]=])/g, `[_${scope}`) : content;
+
+        cache[scope] = new CSSStyleSheet();
+        cache[scope].replaceSync(scoped);
+      }
+
+      root.adoptedStyleSheets.push(cache[scope]);
+    },
+  };
+}
+
+export function html(strings: TemplateStringsArray, ...values: any[]): Literal {
+  const content = String.raw(strings, ...values);
+
+  return {
+    apply(el: ShadowRoot | Element, scope: string) {
+      // Replace _="value" with _scope="value" if preceded by whitespace
+      // () creates a capturing group, stored as $1
+      let scoped = scope ? content.replace(/(\s)_(?=\=")/g, `$1_${scope}`) : content;
+
+      const fragment = document.createElement('template');
+      fragment.innerHTML = scoped;
+      el.prepend(fragment.content);
+    },
+  };
+}