@squadbase/vantage 0.2.1 → 0.2.2

package/dist/components/index.js

@@ -517,6 +517,45 @@ function sameChartTokens(a, b) {
   if (!a || !b) return false;
   return a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
 }
+function watchChartTokens(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  let frame = 0;
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      onChange();
+    });
+  };
+  const themeObserver = new MutationObserver(schedule);
+  const attributeFilter = ["class", "style", "data-theme"];
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter });
+  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter });
+  const styleObserver = new MutationObserver(schedule);
+  if (document.head) {
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["href", "media", "disabled"]
+    });
+  }
+  const onLoad = (event) => {
+    if (event.target instanceof HTMLLinkElement) schedule();
+  };
+  document.addEventListener("load", onLoad, true);
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", schedule);
+  return () => {
+    if (frame) cancelAnimationFrame(frame);
+    themeObserver.disconnect();
+    styleObserver.disconnect();
+    document.removeEventListener("load", onLoad, true);
+    media.removeEventListener("change", schedule);
+  };
+}
 function axisTheme(tokens, splitLine) {
   const line = tokens.border ?? void 0;
   return {
@@ -575,16 +614,7 @@ var EChart = forwardRef(function EChart2({
       });
     };
     sync();
-    const observer = new MutationObserver(sync);
-    const attributeFilter = ["class", "style", "data-theme"];
-    observer.observe(document.documentElement, { attributes: true, attributeFilter });
-    if (document.body) observer.observe(document.body, { attributes: true, attributeFilter });
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    media.addEventListener("change", sync);
-    return () => {
-      observer.disconnect();
-      media.removeEventListener("change", sync);
-    };
+    return watchChartTokens(sync);
   }, [theme]);
   const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
   const resolvedTheme = theme ?? autoTheme;