export function useAddonElementWatcher()

in frontend/src/hooks/addon.ts [127:168]


export function useAddonElementWatcher(
  addonElementRef: RefObject<HTMLElement | null>,
): AddonData {
  const [addonData, setAddonData] = useState<AddonData>(
    addonElementRef.current !== null
      ? parseAddonData(addonElementRef.current)
      : defaultAddonData,
  );
  useEffect(() => {
    if (addonElementRef.current === null) {
      return;
    }
    setAddonData(parseAddonData(addonElementRef.current));
  }, [addonElementRef]);

  const mutationListener = useCallback(
    (mutationRecords: MutationRecord[]) => {
      setAddonData((prevAddonData) => {
        let newAddonData = { ...prevAddonData };
        mutationRecords.forEach((mutationRecord) => {
          Object.entries(attributeParsers).forEach(([attribute, parser]) => {
            if (
              mutationRecord.attributeName === attribute &&
              mutationRecord.target instanceof Element
            ) {
              newAddonData = {
                ...newAddonData,
                ...parser(mutationRecord.target),
              };
            }
          });
        });
        return newAddonData;
      });
    },
    [setAddonData],
  );

  useMutationObserver(addonElementRef, { attributes: true }, mutationListener);

  return addonData;
}