Register WET Component

register-wet-component.ts

/**
 * Lets WET-BOEW know about a new component that was added to the page so that
 * WET-BOEW can apply the WET-BOEW JavaScript to it.
 *
 * @param {string} selector an HTML selector, usually the class
 * name prefixed with a period.
 */
async function registerWbComponent(selector: string): Promise<void> {
  if (typeof window !== "undefined") {
    const wet: WetBoew = (window as any).wb as WetBoew;
    const selectors = wet?.selectors ?? [];
    if (wet && !selectors.includes(selector)) {
      // tell WET there's a new element on the page.
      selectors.push(selector);
      // let WET do its magic.
      wet.start();
    }
  }
  // BUG: WET's imperative DOM manipulation interferes with
  // HMR (hot module replacement) during development. Sometimes we get
  // multiple component elements rendering. This is only affecting HMR so
  // it shouldn't be an issue when deployed.
}

interface WetBoew {
  selectors: string[];
  start: () => void;
}