From a223bb033e8c02f16778b104a58a82021d2b4927 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 22 Mar 2024 18:56:39 -0300 Subject: [PATCH] fix(react): typescript and react version compatibility --- packages/react-lenis/package.json | 6 ++-- packages/react-lenis/src/index.tsx | 47 +++++++++++++++++++----------- packages/react-lenis/tsconfig.json | 1 + yarn.lock | 35 ++++++++++++++++++++-- 4 files changed, 68 insertions(+), 21 deletions(-) diff --git a/packages/react-lenis/package.json b/packages/react-lenis/package.json index f4c1441f..609f85bf 100644 --- a/packages/react-lenis/package.json +++ b/packages/react-lenis/package.json @@ -50,11 +50,13 @@ "dependencies": { "@studio-freight/hamo": "^0.6.28", "@studio-freight/lenis": "^1.0.40", + "@types/react": "^18.0.0", "clsx": "^2.0.0", + "react": "^18.0.0", "zustand": "^4.4.7" }, "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" } } diff --git a/packages/react-lenis/src/index.tsx b/packages/react-lenis/src/index.tsx index 66651466..d9dd4462 100644 --- a/packages/react-lenis/src/index.tsx +++ b/packages/react-lenis/src/index.tsx @@ -20,11 +20,21 @@ import React, { import { create } from 'zustand' import { version } from '../package.json' +type LenisEventHandler = (lenis: Lenis) => void; +interface LenisContextValue { + lenis: Lenis; + addCallback: (handler: LenisEventHandler, priority: number) => void; + removeCallback: (handler: LenisEventHandler) => void; +} + +declare global { + interface Window { reactLenisVersion: string; } +} if (typeof window !== 'undefined') window.reactLenisVersion = version -export const LenisContext = createContext() as Lenis | null +export const LenisContext = createContext(null); -const useRoot = create(() => ({})) +const useRoot = create>(() => ({})) function useCurrentLenis() { const local = useContext(LenisContext) @@ -35,7 +45,7 @@ function useCurrentLenis() { export function useLenis( callback?: (lenis: Lenis) => void, - deps?: Array = [], + deps: Array = [], priority = 0 ): Lenis | undefined { const { lenis, addCallback, removeCallback } = useCurrentLenis() @@ -90,19 +100,22 @@ const ReactLenis: ForwardRefComponent = forwardRef< }: Props, ref ) => { - const wrapperRef = useRef() - const contentRef = useRef() + const wrapperRef = useRef(null) + const contentRef = useRef(null) - const [lenis, setLenis] = useState() + const [lenis, setLenis] = useState(undefined); - const callbacksRefs = useRef([]) + const callbacksRefs = useRef<{ + callback: LenisEventHandler, + priority: number, + }[]>([]) - const addCallback = useCallback((callback, priority) => { + const addCallback: LenisContextValue["addCallback"] = useCallback((callback, priority) => { callbacksRefs.current.push({ callback, priority }) callbacksRefs.current.sort((a, b) => a.priority - b.priority) }, []) - const removeCallback = useCallback((callback) => { + const removeCallback: LenisContextValue["removeCallback"] = useCallback((callback) => { callbacksRefs.current = callbacksRefs.current.filter( (cb) => cb.callback !== callback ) @@ -111,8 +124,8 @@ const ReactLenis: ForwardRefComponent = forwardRef< useImperativeHandle( ref, () => ({ - wrapper: wrapperRef.current, - content: contentRef.current, + wrapper: wrapperRef.current!, + content: contentRef.current!, lenis, }), [lenis] @@ -122,8 +135,8 @@ const ReactLenis: ForwardRefComponent = forwardRef< const lenis = new Lenis({ ...options, ...(!root && { - wrapper: wrapperRef.current, - content: contentRef.current, + wrapper: wrapperRef.current!, + content: contentRef.current!, }), }) @@ -135,7 +148,7 @@ const ReactLenis: ForwardRefComponent = forwardRef< } }, [root, JSON.stringify(options)]) - useFrame((time) => { + useFrame((time: number) => { if (autoRaf) { lenis?.raf(time) } @@ -147,9 +160,9 @@ const ReactLenis: ForwardRefComponent = forwardRef< } }, [root, lenis, addCallback, removeCallback]) - const onScroll = useCallback((e) => { + const onScroll = useCallback((lenisInstance: Lenis) => { for (let i = 0; i < callbacksRefs.current.length; i++) { - callbacksRefs.current[i].callback(e) + callbacksRefs.current[i].callback(lenisInstance) } }, []) @@ -178,7 +191,7 @@ const ReactLenis: ForwardRefComponent = forwardRef< }, [lenis, onClassNameChange]) return ( - + {root ? ( children ) : ( diff --git a/packages/react-lenis/tsconfig.json b/packages/react-lenis/tsconfig.json index e5614010..b95f8dcb 100644 --- a/packages/react-lenis/tsconfig.json +++ b/packages/react-lenis/tsconfig.json @@ -11,6 +11,7 @@ "noEmit": true, "allowJs": true, "removeComments": true, + "resolveJsonModule": true, "outDir": "./dist/types", "jsx": "react" }, diff --git a/yarn.lock b/yarn.lock index 6931f9f6..c8c93faf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -451,11 +451,30 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== +"@types/prop-types@*": + version "15.7.12" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6" + integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q== + +"@types/react@^18.0.0": + version "18.2.69" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.69.tgz#313ec21891b22bb7646a54cb4bdb8cddb0880271" + integrity sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/resolve@1.20.2": version "1.20.2" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975" integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q== +"@types/scheduler@*": + version "0.16.8" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff" + integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A== + acorn@^8.8.2: version "8.11.3" resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a" @@ -1340,6 +1359,11 @@ cross-var@^1.1.0: cross-spawn "^5.0.1" exit "^0.1.2" +csstype@^3.0.2: + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== + debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -1886,7 +1910,7 @@ lodash@^4.17.4: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.0.0: +loose-envify@^1.0.0, loose-envify@^1.1.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -2105,6 +2129,13 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" +react@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== + dependencies: + loose-envify "^1.1.0" + read-pkg@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" @@ -2579,7 +2610,7 @@ yallist@^3.0.2: resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== -zustand@^4.4.7, zustand@^4.5.1: +zustand@^4.4.7: version "4.5.1" resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.1.tgz#2088956ee454759fb8b866ca335a2373e76736c5" integrity sha512-XlauQmH64xXSC1qGYNv00ODaQ3B+tNPoy22jv2diYiP4eoDKr9LA+Bh5Bc3gplTrFdb6JVI+N4kc1DZ/tbtfPg==