HTMX Extension class boilerplate

extension.js

import htmx from "htmx.org";

class ExtensionName {
  /** @private @type {WeakMap<HTMLElement, ExtensionName>} */
  static _elementInstances = new WeakMap();

  /** @private @type {HTMLElement} */ _rootElement;

  /**
   * @param {HTMLElement} element
   */
  constructor(element) {
    this._rootElement = element;
  }

  /**
   * @param {string} name
   * @param {CustomEvent} evt
   */
  static onEvent(name, evt) {
    if (!(evt.detail.elt instanceof HTMLElement)) return;

    let instance = ExtensionName._elementInstances.get(evt.detail.elt);

    if (!instance) {
      instance = new ExtensionName(evt.detail.elt);
      ExtensionName._elementInstances.set(evt.detail.elt, instance);
    }

    switch (name) {
      case "htmx:afterProcessNode":
        instance._afterProcessNode(evt);
        break;
    }
  }

  /**
   * @private
   * @param {CustomEvent} evt
   */
  _afterProcessNode(evt) {}
}

htmx.defineExtension("extension-name", {
  onEvent: ExtensionName.onEvent,
});