fix(react): 🐛 cannot transfer control from a canvas more than once (#429

)
LottieFiles · Dec 16, 2024 · 2c48dbf · 2c48dbf
1 parent 003e7b1
commit 2c48dbf
Show file tree

Hide file tree

Showing 21 changed files with 4,694 additions and 1,152 deletions.
diff --git a/.changeset/early-donuts-wonder.md b/.changeset/early-donuts-wonder.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': minor
+---
+
+refactor: abstract common functionality between `DotLottieReact` and `DotLottieReactWorker` to reduce bundle size
diff --git a/.changeset/fresh-years-judge.md b/.changeset/fresh-years-judge.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': patch
+---
+
+fix: dotLottie instance instantiation and cleanup in React `StrictMode` for both `DotLottieReact` and `DotLottieReactWorker` components
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -53,6 +53,14 @@ jobs:
           working-directory: packages/web
           name: '@lottiefiles/dotlottie-web'
 
+      - name: 📏 Report coverage (react)
+        if: always() && github.event_name == 'pull_request'
+        uses: davelosert/vitest-coverage-report-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          working-directory: packages/react
+          name: '@lottiefiles/dotlottie-react'
+
       - name: 📏 Report coverage (wc)
         if: always() && github.event_name == 'pull_request'
         uses: davelosert/vitest-coverage-report-action@v2

diff --git a/apps/dotlottie-next-example/src/pages/index.tsx b/apps/dotlottie-next-example/src/pages/index.tsx
@@ -1,6 +1,8 @@
+import type { DotLottie, DotLottieWorker } from '@lottiefiles/dotlottie-react';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { Inter } from 'next/font/google';
 import Head from 'next/head';
+import { useState } from 'react';
 
 import styles from '@/styles/Home.module.css';
 
@@ -9,6 +11,9 @@ const inter = Inter({ subsets: ['latin'] });
 const src = 'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie';
 
 export default function Home(): JSX.Element {
+  const [dotLottie, setDotLottie] = useState<DotLottie | DotLottieWorker | null>(null);
+  const [showDotLottie, setShowDotLottie] = useState(false);
+
   return (
     <>
       <Head>
@@ -18,17 +23,56 @@ export default function Home(): JSX.Element {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
-        <DotLottieReact
-          style={{
-            minWidth: '100px',
-          }}
-          src={src}
-          loop
-          autoplay
-          renderConfig={{
-            autoResize: true,
-          }}
-        />
+        {showDotLottie && (
+          <DotLottieReact
+            dotLottieRefCallback={setDotLottie}
+            style={{
+              minWidth: '100px',
+            }}
+            src={src}
+            loop
+            autoplay
+            renderConfig={{
+              autoResize: true,
+            }}
+          />
+        )}
+        <div>
+          <button
+            onClick={(): void => {
+              setShowDotLottie(!showDotLottie);
+            }}
+          >
+            {showDotLottie ? 'Hide' : 'Show'}
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.play();
+              }
+            }}
+          >
+            Play
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.pause();
+              }
+            }}
+          >
+            Pause
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.stop();
+              }
+            }}
+          >
+            Stop
+          </button>
+        </div>
       </main>
     </>
   );

diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@lottiefiles/prettier-config": "3.0.0",
     "@lottiefiles/remark-preset": "1.0.0",
     "@lottiefiles/tsconfig": "2.0.0",
-    "@size-limit/preset-big-lib": "^11.1.4",
+    "@size-limit/preset-big-lib": "^11.1.6",
     "cross-env": "7.0.3",
     "eslint": "7.32.0",
     "husky": "8.0.3",
@@ -46,7 +46,7 @@
     "playwright": "^1.45.2",
     "prettier": "2.8.8",
     "remark-cli": "11.0.0",
-    "size-limit": "^11.1.4",
+    "size-limit": "^11.1.6",
     "svelte-loader": "^3.2.3",
     "syncpack": "9.8.6",
     "turbo": "2.0.4",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -38,6 +38,9 @@
     "lint": "eslint --fix .",
     "stats:eslint": "cross-env TIMING=1 eslint .",
     "stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
+    "test": "vitest run --browser.headless",
+    "test:coverage": "vitest run --browser.headless --coverage",
+    "test:watch": "vitest",
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -47,11 +50,18 @@
     "@lottiefiles/dotlottie-web": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^19.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/browser": "2.1.0-beta.5",
+    "@vitest/coverage-istanbul": "2.1.0-beta.5",
     "cross-env": "7.0.3",
-    "react": "^19.0.0",
+    "playwright": "1.45.2",
+    "react": "^18",
     "tsup": "8.3.5",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "vitest": "2.1.0-beta.5",
+    "vitest-browser-react": "^0.0.4"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/react/setup-file.ts b/packages/react/setup-file.ts
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-unassigned-import
+import 'vitest-browser-react';
+import { setWasmUrl } from './src';
+
+// eslint-disable-next-line node/no-unsupported-features/node-builtins
+const wasmUrl = new URL('../web/src/core/dotlottie-player.wasm?url', import.meta.url).href;
+
+setWasmUrl(wasmUrl);