fix : Fix Issue with Document Error in Microfrontend (#147)

* fix : Fix Issue with Document Error in Microfrontend

* refactor(renderer): adapt micro-app env

* refactor(renderer): adapt micro-app env

* refactor: change console.log to error

* refactor: catch error of set svg padding

* fix: Cannot read properties of undefined (reading infographicFontLoaded)

---------

Co-authored-by: alleschen <alleschen@tencent.com>
Co-authored-by: Aaron <antvaaron@gmail.com>

Author: AllesOderNicht

src/renderer/fonts/loader.ts

@@ -69,7 +69,7 @@ function trackFontPromise(
 }
 
 function isLinkLoaded(link: HTMLLinkElement): boolean {
-  if (link.dataset.infographicFontLoaded === 'true') return true;
+  if (link.getAttribute('data-infographic-font-loaded') === 'true') return true;
   try {
     return !!link.sheet;
   } catch {
@@ -91,7 +91,7 @@ function getFontLoadPromise(
 
   const promise = new Promise<void>((resolve) => {
     const done = () => {
-      link.dataset.infographicFontLoaded = 'true';
+      link.setAttribute('data-infographic-font-loaded', 'true');
       resolve();
     };
     link.addEventListener('load', done, { once: true });

src/renderer/renderer.ts

@@ -64,26 +64,36 @@ export class Renderer implements IRenderer {
 
     renderTemplate(svg, this.options);
     svg.style.visibility = 'hidden';
+    const postRender = () => {
+      setView(this.template, this.options);
+      loadFonts(this.template);
+      svg.style.visibility = '';
+    };
+
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         mutation.addedNodes.forEach((node) => {
           if (node === svg || node.contains(svg)) {
             // post render
-            setView(this.template, this.options);
-            loadFonts(this.template);
+            postRender();
 
             // disconnect observer
             observer.disconnect();
-            svg.style.visibility = '';
           }
         });
       });
     });
 
-    observer.observe(document, {
-      childList: true,
-      subtree: true,
-    });
+    try {
+      observer.observe(document, {
+        childList: true,
+        subtree: true,
+      });
+    } catch (error) {
+      // Fallback for micro-app environments that proxy document.
+      postRender();
+      console.error(error);
+    }
 
     this.rendered = true;
     return svg;

src/utils/padding.ts

@@ -30,24 +30,28 @@ export function setSVGPadding(svg: SVGSVGElement, padding: ParsedPadding) {
     if (document.contains(svg)) {
       setSVGPaddingInBrowser(svg, padding);
     } else {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            if (node === svg || node.contains(svg)) {
-              waitForLayout(svg, () => {
-                setSVGPaddingInBrowser(svg, padding);
-              });
+      try {
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+              if (node === svg || node.contains(svg)) {
+                waitForLayout(svg, () => {
+                  setSVGPaddingInBrowser(svg, padding);
+                });
 
-              observer.disconnect();
-            }
+                observer.disconnect();
+              }
+            });
           });
         });
-      });
 
-      observer.observe(document, {
-        childList: true,
-        subtree: true,
-      });
+        observer.observe(document, {
+          childList: true,
+          subtree: true,
+        });
+      } catch {
+        setSVGPaddingInNode(svg, padding);
+      }
     }
   }
 }