merge form input events

merge.ts

interface Callback<T> {
  (value: T): void;
}

function merge<T>(form: HTMLFormElement) {
  const watchers = new Set<Callback<T>>();
  const fields = Array.from(form.elements) as HTMLInputElement[];

  const value = <T>(form: HTMLFormElement) => {
    const data = new FormData(form);
    return Object.fromEntries(data.entries()) as T;
  };

  for (const element of fields) {
    element.addEventListener("input", () => {
      for (const watcher of watchers) {
        watcher(value<T>(form));
      }
    });
  }

  return {
    subscribe(callback: Callback<T>) {
      watchers.add(callback);

      return {
        unsubscribe() {
          watchers.delete(callback);
        },
      };
    },
  };
}