chore: react v19

LottieFiles · Dec 10, 2024 · 803f76b · 803f76b
1 parent 0a985a0
commit 803f76b
Show file tree

Hide file tree

Showing 14 changed files with 1,426 additions and 597 deletions.
diff --git a/apps/dotlottie-next-example/package.json b/apps/dotlottie-next-example/package.json
@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "workspace:*",
-    "next": "14.2.5",
-    "react": "^18",
-    "react-dom": "^18"
+    "next": "15.0.4",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "typescript": "^5"
   }
 }
diff --git a/apps/dotlottie-next-example/tsconfig.json b/apps/dotlottie-next-example/tsconfig.json
@@ -14,7 +14,8 @@
     "incremental": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

diff --git a/apps/dotlottie-viewer/package.json b/apps/dotlottie-viewer/package.json
@@ -19,9 +19,9 @@
     "canvaskit-wasm": "^0.39.1",
     "lottie-web": "^5.12.2",
     "postcss": "8.4.32",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.0.1",
     "react-range": "^1.8.14",
@@ -32,8 +32,8 @@
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

diff --git a/apps/dotlottie-viewer/src/components/form/base-select.tsx b/apps/dotlottie-viewer/src/components/form/base-select.tsx
@@ -31,6 +31,7 @@ const BaseSelect: React.FC<BaseSelectProps> = ({ className = '', items, placehol
   if (items.length === 0) {
     return (
       <span className={`min-h-9 text-gray-500 text-xs flex items-center gap-2 h-10`}>
+        {/* @ts-ignore */}
         <FaInfoCircle />
         {emptyMessage}
       </span>

diff --git a/apps/dotlottie-viewer/src/components/players.tsx b/apps/dotlottie-viewer/src/components/players.tsx
@@ -178,6 +178,7 @@ export default function Players() {
                 }
               }}
             >
+              {/* @ts-ignore */}
               <GiPreviousButton />
             </button>
           ) : null}
@@ -188,6 +189,7 @@ export default function Players() {
                 lottieWebRef.current?.play();
               }}
             >
+              {/* @ts-ignore */}
               <FaPlay />
             </button>
           ) : (
@@ -197,6 +199,7 @@ export default function Players() {
                 lottieWebRef.current?.pause();
               }}
             >
+              {/* @ts-ignore */}
               <FaPause />
             </button>
           )}
@@ -209,6 +212,7 @@ export default function Players() {
                 }
               }}
             >
+              {/* @ts-ignore */}
               <GiNextButton />
             </button>
           ) : null}
@@ -278,6 +282,7 @@ export default function Players() {
             <span className="w-max pl-1 bg-transparent">{totalFrames}</span>
           </span>
           <button className="cursor-pointer" onClick={() => dispatch(setLoop(!loop))}>
+            {/* @ts-ignore */}
             <ImLoop className={`${!loop ? 'text-gray-500' : ''}`} />
           </button>
         </div>

diff --git a/apps/dotlottie-viewer/src/components/top-bar.tsx b/apps/dotlottie-viewer/src/components/top-bar.tsx
@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { useRef } from 'react';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
 import { resetUserConfig, setSrc, setUserSrc } from '../store/viewer-slice';
@@ -49,6 +50,7 @@ const TopBar: React.FC<TopBarProps> = ({ className = '', ...props }) => {
         <>
           <span className="font-bold">Try it yourself!</span>
 
+          {/* @ts-ignore */}
           <Dropzone onDrop={onDrop} onDropRejected={onDropRejected}>
             {(state): JSX.Element => {
               return (

diff --git a/apps/dotlottie-viewer/src/pages/home.tsx b/apps/dotlottie-viewer/src/pages/home.tsx
@@ -1,4 +1,5 @@
 import { DotLottie } from '@lottiefiles/dotlottie-react';
+import type { JSX } from 'react';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
 import { setSrc, setUserSrc } from '../store/viewer-slice';
 import { useEffect, useRef } from 'react';
@@ -53,6 +54,7 @@ export const Home = (): JSX.Element => {
 
   return (
     <>
+      {/* @ts-ignore */}
       <Dropzone noClick onDrop={onDrop} onDropRejected={onDropRejected}>
         {(state): JSX.Element => {
           return (

diff --git a/apps/dotlottie-viewer/src/pages/perf.tsx b/apps/dotlottie-viewer/src/pages/perf.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import type { JSX } from 'react';
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { DotLottieWorkerReact, DotLottieReact, setWasmUrl as setDotLottieWasmUrl } from '@lottiefiles/dotlottie-react';
 import { Player as LottieWeb } from '@lottiefiles/react-lottie-player';
@@ -289,6 +290,7 @@ export const Perf = (): JSX.Element => {
             <li key={`${anim.name}-${anim.lottieURL}-${index}`} className={`${anim.name}-${index}`}>
               {player.id === 0 && <DotLottieReact src={anim.lottieURL} style={size} loop autoplay />}
               {player.id === 1 && <DotLottieWorkerReact src={anim.lottieURL} style={size} loop autoplay />}
+              {/* @ts-ignore */}
               {player.id === 2 && <LottieWeb src={anim.lottieURL} style={size} loop autoplay />}
               {player.id === 3 && <SkottiePlayer lottieURL={anim.lottieURL} width={size.width} height={size.height} />}
               <h3 className="mt-6 text-lg font-semibold text-white">{anim.name}</h3>

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -41,16 +41,16 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^17 || ^18"
+    "react": "^17 || ^18 || ^19"
   },
   "dependencies": {
     "@lottiefiles/dotlottie-web": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.37",
+    "@types/react": "^19.0.1",
     "cross-env": "7.0.3",
-    "react": "^18.2.0",
-    "tsup": "8.0.1",
+    "react": "^19.0.0",
+    "tsup": "8.3.5",
     "typescript": "5.0.4"
   },
   "publishConfig": {

diff --git a/packages/react/src/dotlottie-worker.tsx b/packages/react/src/dotlottie-worker.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { DotLottieWorker, Config } from '@lottiefiles/dotlottie-web';
-import { useEffect, type ComponentProps, type RefCallback } from 'react';
+import { useEffect, type ComponentProps, type RefCallback, type JSX } from 'react';
 
 import { useDotLottieWorker } from './use-dotlottie-worker';
 import useStableCallback from './use-stable-callback';

diff --git a/packages/react/src/dotlottie.tsx b/packages/react/src/dotlottie.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { DotLottie, Config } from '@lottiefiles/dotlottie-web';
-import { useEffect, type ComponentProps, type RefCallback } from 'react';
+import { useEffect, type ComponentProps, type RefCallback, type JSX } from 'react';
 
 import { useDotLottie } from './use-dotlottie';
 import useStableCallback from './use-stable-callback';

diff --git a/packages/react/src/use-dotlottie-worker.tsx b/packages/react/src/use-dotlottie-worker.tsx
@@ -1,6 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottieWorker } from '@lottiefiles/dotlottie-web';
-import { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useState, useEffect, useRef, type JSX } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieWorkerComponentProps {

diff --git a/packages/react/src/use-dotlottie.tsx b/packages/react/src/use-dotlottie.tsx
@@ -1,6 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottie } from '@lottiefiles/dotlottie-web';
-import { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useState, useEffect, useRef, type JSX } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieComponentProps {