diff --git a/.changeset/eight-chicken-perform.md b/.changeset/eight-chicken-perform.md new file mode 100644 index 00000000..ddf9564a --- /dev/null +++ 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 index b1de8bf4..1ac75927 100644 --- a/apps/dotlottie-wc-example/index.html +++ b/apps/dotlottie-wc-example/index.html @@ -8,11 +8,6 @@
- diff --git a/apps/dotlottie-wc-example/src/main.ts b/apps/dotlottie-wc-example/src/main.ts index 6fe790c2..cf9ec446 100644 --- a/apps/dotlottie-wc-example/src/main.ts +++ b/apps/dotlottie-wc-example/src/main.ts @@ -9,32 +9,83 @@ const app = document.querySelector('#app'); if (app) { app.innerHTML = ` - - - + + + + + + +
`; } -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 index 36d4f790..3eb25629 100644 --- 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``; + return html``; } }