fix(wc): 🐛 recreate DotLottie instance on reconnect (#315)

* fix(wc): 🐛 recreate DotLottie instance on reconnect Ensure that the DotLottie instance is properly recreated when a dotlottie-wc component is moved within the DOM. ✅ Closes: #308
LottieFiles · Aug 7, 2024 · ceae57f · ceae57f
1 parent 18f8015
commit ceae57f
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 27 deletions.
diff --git a/.changeset/eight-chicken-perform.md b/.changeset/eight-chicken-perform.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-wc': patch
+---
+
+fix(wc): 🐛 recreate DotLottie instance on reconnect
diff --git a/apps/dotlottie-wc-example/index.html b/apps/dotlottie-wc-example/index.html
@@ -8,11 +8,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <dotlottie-wc
-            src="https://lottie.host/0e2d86ab-604d-4fc4-8512-d44a30eb81a8/YFj05ZHqHA.json"
-            autoplay
-            loop
-        ></dotlottie-wc>
         <script type="module" src="/src/main.ts"></script>
     </body>
 </html>
diff --git a/apps/dotlottie-wc-example/src/main.ts b/apps/dotlottie-wc-example/src/main.ts
@@ -9,32 +9,83 @@ const app = document.querySelector<HTMLDivElement>('#app');
 
 if (app) {
   app.innerHTML = `
-    <button id="play">play</button>
-    <button id="pause">pause</button>
-    <button id="stop">stop</button>
+    <button id="play">Play</button>
+    <button id="pause">Pause</button>
+    <button id="stop">Stop</button>
+    <button id="create">Create</button>
+    <button id="destroy">Destroy</button>
+    <button id="move">Move</button>
+    <div id="container"></div>
   `;
 }
 
-const dotlottieComponent = document.querySelector('dotlottie-wc') as DotLottieWC;
-
 const playButton = document.querySelector('#play');
 const pauseButton = document.querySelector('#pause');
 const stopButton = document.querySelector('#stop');
+const createButton = document.querySelector('#create');
+const destroyButton = document.querySelector('#destroy');
+const moveButton = document.querySelector('#move');
+const container = document.querySelector('#container');
 
 if (playButton) {
   playButton.addEventListener('click', () => {
-    dotlottieComponent.dotLottie?.play();
+    (document.querySelector('dotlottie-wc') as DotLottieWC).dotLottie?.play();
   });
 }
 
 if (pauseButton) {
   pauseButton.addEventListener('click', () => {
-    dotlottieComponent.dotLottie?.pause();
+    (document.querySelector('dotlottie-wc') as DotLottieWC).dotLottie?.pause();
   });
 }
 
 if (stopButton) {
   stopButton.addEventListener('click', () => {
-    dotlottieComponent.dotLottie?.stop();
+    (document.querySelector('dotlottie-wc') as DotLottieWC).dotLottie?.stop();
+  });
+}
+
+function create(): void {
+  const dotlottieComponent = document.createElement('dotlottie-wc') as DotLottieWC;
+
+  // eslint-disable-next-line no-secrets/no-secrets
+  dotlottieComponent.src = 'https://lottie.host/0e2d86ab-604d-4fc4-8512-d44a30eb81a8/YFj05ZHqHA.json';
+  dotlottieComponent.autoplay = true;
+  dotlottieComponent.loop = true;
+  container?.appendChild(dotlottieComponent);
+}
+
+function destroy(): void {
+  const dotlottieComponent = document.querySelector('dotlottie-wc') as DotLottieWC;
+
+  dotlottieComponent.remove();
+}
+
+function move(): void {
+  const dotlottieComponent = document.querySelector('dotlottie-wc') as DotLottieWC;
+
+  dotlottieComponent.remove();
+  setTimeout(() => {
+    container?.appendChild(dotlottieComponent);
+
+    // delay to simulate moving the component
+  }, 1000);
+}
+
+if (createButton) {
+  createButton.addEventListener('click', () => {
+    create();
+  });
+}
+
+if (destroyButton) {
+  destroyButton.addEventListener('click', () => {
+    destroy();
+  });
+}
+
+if (moveButton) {
+  moveButton.addEventListener('click', () => {
+    move();
   });
 }
diff --git a/packages/wc/src/dotlottie-wc.ts b/packages/wc/src/dotlottie-wc.ts
@@ -78,12 +78,37 @@ export class DotLottieWC extends LitElement {
     });
   }
 
-  public override firstUpdated(): void {
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this._initializeCanvas();
+    this._createDotLottieInstance();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
     if (this.dotLottie) {
       this.dotLottie.destroy();
       this.dotLottie = null;
     }
 
+    this._intersectionObserver.disconnect();
+    this._resizeObserver.disconnect();
+  }
+
+  private _initializeCanvas(): void {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+
+    if (!this.shadowRoot?.querySelector('canvas')) {
+      const canvas = document.createElement('canvas');
+
+      this.shadowRoot?.appendChild(canvas);
+    }
+  }
+
+  private _createDotLottieInstance(): void {
     const canvas = this.shadowRoot?.querySelector('canvas');
 
     if (canvas) {
@@ -104,20 +129,8 @@ export class DotLottieWC extends LitElement {
     }
   }
 
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    if (this.dotLottie) {
-      this.dotLottie.destroy();
-      this.dotLottie = null;
-    }
-
-    this._intersectionObserver.disconnect();
-    this._resizeObserver.disconnect();
-  }
-
   public override render(): TemplateResult {
-    return html`<canvas part="canvas"></canvas>`;
+    return html`<slot></slot>`;
   }
 }