(feat): use mutation observer for widget

hypercerts-org · Jun 26, 2024 · e205526 · e205526
1 parent 7b9f203
commit e205526
Showing 1 changed file with 39 additions and 23 deletions.
diff --git a/widget/hyperboard-widget.tsx b/widget/hyperboard-widget.tsx
@@ -4,30 +4,46 @@ import { createRoot } from "react-dom/client";
 import { HyperboardRenderer } from "@/components/hyperboard-renderer";
 import { Providers } from "@/components/providers";
 
-const widgetDivs = document.querySelectorAll(".hyperboard-widget");
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver((mutationList, observer) => {
+  // Callback function to execute when mutations are observed
+  const widgetDivs = document.querySelectorAll(".hyperboard-widget");
 
-// Inject our React App into each class
-widgetDivs.forEach((container) => {
-  const hyperboardId = container.getAttribute("data-hyperboard-id");
-  const showTable =
-    container.getAttribute("data-hyperboard-show-table") === "true";
+  // Inject our React App into each class
+  widgetDivs.forEach((container) => {
+    const hyperboardId = container.getAttribute("data-hyperboard-id");
+    if (container.hasChildNodes()) {
+      console.log("Hyperboard already rendered. Skipping.", hyperboardId);
+      return;
+    }
 
-  if (!hyperboardId) {
-    console.error("No hyperboard id found");
-    return;
-  }
+    const showTable =
+      container.getAttribute("data-hyperboard-show-table") === "true";
 
-  console.log("rendering hyperboard", hyperboardId, "showTable", showTable);
-  const root = createRoot(container); // createRoot(container!) if you use TypeScript
-  root.render(
-    // TODO: Fix this typing error
-    //@ts-ignore
-    <Providers showReactQueryDevtools={false} resetCSS={false}>
-      <HyperboardRenderer
-        hyperboardId={hyperboardId}
-        showTable={showTable}
-        disableToast
-      />
-    </Providers>,
-  );
+    if (!hyperboardId) {
+      console.error("No hyperboard id found");
+      return;
+    }
+
+    console.log("rendering hyperboard", hyperboardId, "showTable", showTable);
+    const root = createRoot(container); // createRoot(container!) if you use TypeScript
+    root.render(
+      // TODO: Fix this typing error
+      //@ts-ignore
+      <Providers showReactQueryDevtools={false} resetCSS={false}>
+        <HyperboardRenderer
+          hyperboardId={hyperboardId}
+          showTable={showTable}
+          disableToast
+        />
+      </Providers>,
+    );
+  });
+});
+
+// Start observing the target node for configured mutations
+observer.observe(document.documentElement || document.body, {
+  attributes: true,
+  childList: true,
+  subtree: true,
 });