Polling now working in the Angular wrapper instead of the design system

Ideally if we have to have an Angular wrapper, we could detect changes made by Angular and trigger a re-render, but nothing has seemed to work. This is the only thing so far that has worked.
CMSgov · Nov 5, 2024 · f415f9a · f415f9a
1 parent 0eb9e32
commit f415f9a
Showing 1 changed file with 36 additions and 38 deletions.
diff --git a/examples/angular/src/CePassthrough.ts b/examples/angular/src/CePassthrough.ts
@@ -58,46 +58,44 @@ export class CePassthrough<T extends HTMLElement> {
       }
     });
 
-    // this.zone.runOutsideAngular(() => {
+    this.initTemplatePolling();
+  }
 
-    // })
-    // this.initTemplatePolling();
+  getTemplateContent(): Node | null {
+    const template: HTMLTemplateElement | undefined = [...(this.el as any).childNodes].find(
+      isTemplate
+    );
+    if (!template) {
+      console.error('No web component template found');
+    }
+    return template?.content.firstChild ?? null;
   }
 
   // Doesn't seem to work like it does in the web component `define` module
-  // initTemplatePolling() {
-  //   let template: HTMLTemplateElement | undefined = [...(this.el as any).childNodes].find(
-  //     isTemplate
-  //   );
-  //   if (!template) {
-  //     console.log('no template found');
-  //     return;
-  //   }
-  //   console.log('template found!', template)
-  //   let previousContentSnapshot = template.content.cloneNode(true);
-
-  //   // Function to compare snapshots
-  //   const hasContentChanged = () => {
-  //     // Create a new snapshot to compare
-  //     const currentSnapshot = template.content.cloneNode(true);
-
-  //     // Compare the new snapshot to the previous one
-  //     const isDifferent = !currentSnapshot.isEqualNode(previousContentSnapshot);
-
-  //     if (isDifferent) {
-  //       console.log('Template content modified!', currentSnapshot);
-  //       previousContentSnapshot = currentSnapshot; // Update the snapshot
-  //       (this.el as any).renderPreactComponent([
-  //         ...(template.content.firstChild as any).childNodes,
-  //       ]);
-  //     }
-  //   };
-
-  //   if (this.pollInterval) {
-  //     clearInterval(this.pollInterval);
-  //   }
-
-  //   // Set up polling interval (adjust as needed)
-  //   this.pollInterval = setInterval(hasContentChanged, 500); // Check every 500ms
-  // }
+  initTemplatePolling() {
+    let previousContentSnapshot = this.getTemplateContent()?.cloneNode(true);
+
+    // Function to compare snapshots
+    const hasContentChanged = () => {
+      const currentContent = this.getTemplateContent();
+
+      // Compare the new content to the previous snapshot
+      const isDifferent =
+        !previousContentSnapshot || !previousContentSnapshot.isEqualNode(currentContent);
+
+      if (isDifferent) {
+        previousContentSnapshot = currentContent?.cloneNode(true); // Update the snapshot
+        (this.el as any).renderPreactComponent(
+          currentContent ? [...(currentContent.childNodes as any)] : []
+        );
+      }
+    };
+
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+    }
+
+    // Set up polling interval (adjust as needed)
+    this.pollInterval = setInterval(hasContentChanged, 500); // Check every 500ms
+  }
 }