custom-element-utils.ts

import {
  ReadonlySignal,
  Signal,
  computed,
  effect,
  signal,
} from "@preact/signals-core";
import { CSSResult, render, TemplateResult, unsafeCSS, html } from "lit";

export type Style = string | CSSResult | CSSStyleSheet;

type Constructor<T extends HTMLElement = HTMLElement> = new (
  ...args: any[]
) => T;

export function WithCleanup<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    cleanup: (() => void)[] = [];

    disconnectedCallback() {
      this.cleanup.forEach((cleanup) => cleanup());
    }
  };
}

export function WithReactiveAttributes<TBase extends Constructor>(Base: TBase) {
  return class extends WithCleanup(Base) {
    attrs = new Map<string, Signal>();

    constructor(...args: any[]) {
      super(...args);
    }

    attr(key: string, fallback?: string, reflect?: boolean): Signal<string> {
      const val = this.getAttribute(key);
      const s = signal(val ?? fallback ?? "");
      this.attrs.set(key, s);
      if (reflect === true) {
        this.cleanup.push(
          effect(() => {
            this.setAttribute(key, s.value);
          })
        );
      }
      return s;
    }

    attributeChangedCallback(
      _name: string,
      _olvValue: string,
      _newValue: string
    ) {
      if (this.attrs.has(_name)) {
        const s = this.attrs.get(_name)!;
        if (s.value !== _newValue) s.value = _newValue;
      }
    }
  };
}

export function WithFormInternals<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    static formAssociated = true;

    constructor(...args: any[]) {
      super(...args);
      // @ts-ignore
      this.internals_ = this.attachInternals();
    }
  };
}

export function WithLitTemplate<TBase extends Constructor>(Base: TBase) {
  return class extends WithReactiveAttributes(WithCleanup(Base)) {
    builder: ReadonlySignal<TemplateResult> = signal(html``);

    getRoot(): HTMLElement | ShadowRoot {
      return this;
    }

    connectedCallback() {
      this.cleanup.push(
        effect(() => {
          render(this.builder.value, this.getRoot());
        })
      );
    }
  };
}

export function WithShadowRoot<TBase extends Constructor>(Base: TBase) {
  return class extends WithLitTemplate(Base) {
    styles: ReadonlySignal<Style | Array<Style>> = computed(() => []);

    sheets = computed(() => {
      const value = this.styles.value;
      const styles: CSSStyleSheet[] = [];
      const array = Array.isArray(value) ? value : [value];
      for (const style of array) {
        if (style instanceof CSSStyleSheet) {
          styles.push(style);
        } else {
          const result =
            typeof style == "string" //
              ? unsafeCSS(style)
              : (style as CSSResult);
          const sheet = result.styleSheet;
          if (sheet) {
            styles.push(sheet);
          } else {
            const sheet = new CSSStyleSheet();
            sheet.replaceSync(result.cssText);
            styles.push(sheet);
          }
        }
      }
      return styles;
    });

    getRoot(): ShadowRoot {
      let root = this.shadowRoot;
      if (!root) {
        root = this.attachShadow({ mode: "open" });
      }
      return root;
    }

    connectedCallback() {
      this.cleanup.push(
        effect(() => {
          const root = this.getRoot();
          root.adoptedStyleSheets = this.sheets.value;
        })
      );
    }
  };
}