@studiometa/playground-preview 0.3.5 → 0.3.7

package/dist/element.js

@@ -862,6 +862,7 @@ var PlaygroundPreview = class extends HTMLElement {
   #scale = DEFAULT_ZOOM;
   #iframe = null;
   #observer = null;
+  #childObserver = null;
   #mediaQuery = null;
   #mediaQueryHandler = null;
   #isVisible = false;
@@ -885,12 +886,15 @@ var PlaygroundPreview = class extends HTMLElement {
     this.#readChildContent();
     this.#render();
     this.#setupIntersectionObserver();
+    this.#setupChildObserver();
     this.#setupMediaQuery();
   }
   disconnectedCallback() {
     this.#isConnected = false;
     this.#observer?.disconnect();
     this.#observer = null;
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
     if (this.#mediaQuery && this.#mediaQueryHandler) {
       this.#mediaQuery.removeEventListener("change", this.#mediaQueryHandler);
       this.#mediaQuery = null;
@@ -1097,11 +1101,7 @@ var PlaygroundPreview = class extends HTMLElement {
   }
   #updateIframeSrc() {
     if (!this.#iframe) return;
-    const src = this.#buildSrc();
-    this.#iframe.classList.add("loading");
-    this.#loader?.classList.remove("hidden");
-    this.#iframe.src = src;
-    this.#updateOpenLink();
+    this.#reloadIframe();
   }
   #updateIframeScale() {
     if (!this.#iframe) return;
@@ -1157,6 +1157,23 @@ var PlaygroundPreview = class extends HTMLElement {
     this.#observer.observe(this);
   }
   // -------------------------------------------------------
+  // Child mutation observer
+  // -------------------------------------------------------
+  #setupChildObserver() {
+    this.#childObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          this.#readChildContent();
+          if (this.#isVisible) {
+            this.#updateIframeSrc();
+          }
+          break;
+        }
+      }
+    });
+    this.#childObserver.observe(this, { childList: true });
+  }
+  // -------------------------------------------------------
   // Media query (auto theme)
   // -------------------------------------------------------
   #setupMediaQuery() {