upgrade stuff and fix tests

jquense · jquense · commit 046cdfedd8bf · 2025-01-02T16:12:21.000-05:00
diff --git a/package.json b/package.json
@@ -1,9 +1,6 @@
 {
   "name": "@restart/hooks",
   "version": "0.5.1",
-  "main": "lib/cjs/index.js",
-  "types": "lib/cjs/index.d.ts",
-  "module": "lib/esm/index.js",
   "exports": {
     ".": {
       "types": "./esm/index.d.ts",
@@ -18,7 +15,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jquense/react-common-hooks.git"
+    "url": "git+https://github.com/react-restart/hooks.git"
   },
   "author": {
     "name": "Jason Quense",
@@ -40,6 +37,7 @@
     "build:cjs:types": "tsc -p . --emitDeclarationOnly --declaration --outDir cjs --module commonjs --moduleResolution node",
     "deploy-docs": "yarn --cwd www build --prefix-paths && gh-pages -d www/public",
     "prepublishOnly": "yarn build",
+    "typecheck": "tsc -p . --noEmit",
     "release": "rollout"
   },
   "jest": {
@@ -70,14 +68,14 @@
     "@4c/jest-preset": "^1.8.1",
     "@4c/rollout": "^4.0.2",
     "@4c/tsconfig": "^0.4.1",
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/preset-typescript": "^7.22.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.3",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^18.2.15",
+    "@types/react": "^19.0.2",
     "babel-jest": "^29.6.1",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "cherry-pick": "^0.5.0",
@@ -91,8 +89,8 @@
     "lint-staged": "^13.2.3",
     "mq-polyfill": "^1.1.8",
     "prettier": "^3.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.1",
     "typescript": "^5.1.6"
   },
diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts
@@ -124,19 +124,18 @@ export function createBreakpointHook<TKey extends string>(
 
     let query = useMemo(
       () =>
-        Object.entries(breakpointMap).reduce(
-          (query, [key, direction]: [TKey, BreakpointDirection]) => {
-            if (direction === 'up' || direction === true) {
-              query = and(query, getMinQuery(key))
-            }
-            if (direction === 'down' || direction === true) {
-              query = and(query, getMaxQuery(key))
-            }
-
-            return query
-          },
-          '',
-        ),
+        Object.entries(breakpointMap).reduce((query, entry) => {
+          const [key, direction] = entry as [TKey, BreakpointDirection]
+
+          if (direction === 'up' || direction === true) {
+            query = and(query, getMinQuery(key))
+          }
+          if (direction === 'down' || direction === true) {
+            query = and(query, getMaxQuery(key))
+          }
+
+          return query
+        }, ''),
       [JSON.stringify(breakpointMap)],
     )
 
diff --git a/src/useCustomEffect.ts b/src/useCustomEffect.ts
@@ -61,7 +61,7 @@ function useCustomEffect<TDeps extends DependencyList = DependencyList>(
       ? { isEqual: isEqualOrOptions }
       : isEqualOrOptions
 
-  const dependenciesRef = useRef<TDeps>()
+  const dependenciesRef = useRef<TDeps | null>(null)
   dependenciesRef.current = dependencies
 
   const cleanupRef = useRef<CleanUp | null>(null)
diff --git a/src/useDebouncedCallback.ts b/src/useDebouncedCallback.ts
@@ -14,6 +14,8 @@ export interface UseDebouncedCallbackOptionsLeading
   leading: true
 }
 
+const EMPTY: unique symbol = Symbol('EMPTY')
+
 /**
  * Creates a debounced function that will invoke the input function after the
  * specified wait.
@@ -50,7 +52,7 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
 ): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined {
   const lastCallTimeRef = useRef<number | null>(null)
   const lastInvokeTimeRef = useRef(0)
-  const returnValueRef = useRef<ReturnType<TCallback>>()
+  const returnValueRef = useRef<ReturnType<TCallback> | typeof EMPTY>(EMPTY)
 
   const isTimerSetRef = useRef(false)
   const lastArgsRef = useRef<unknown[] | null>(null)
@@ -80,7 +82,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       timeout.set(timerExpired, wait)
 
       if (!leading) {
-        return returnValueRef.current
+        return returnValueRef.current === EMPTY
+          ? undefined
+          : returnValueRef.current
       }
 
       return invokeFunc(time)
@@ -96,7 +100,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       }
 
       lastArgsRef.current = null
-      return returnValueRef.current
+      return returnValueRef.current === EMPTY
+        ? undefined
+        : returnValueRef.current
     }
 
     function timerExpired() {
@@ -110,6 +116,8 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       const timeSinceLastInvoke = time - lastInvokeTimeRef.current
       const timeWaiting = wait - timeSinceLastCall
 
+      // console.log('g', Math.min(timeWaiting, maxWait - timeSinceLastInvoke))
+
       // Restart the timer.
       timeout.set(
         timerExpired,
@@ -170,7 +178,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
         timeout.set(timerExpired, wait)
       }
 
-      return returnValueRef.current
+      return returnValueRef.current === EMPTY
+        ? undefined
+        : returnValueRef.current
     }
   }, [handleCallback, wait, maxWait, leading, trailing])
 }
diff --git a/src/useEventListener.ts b/src/useEventListener.ts
@@ -18,14 +18,14 @@ type EventHandler<T, K extends keyof DocumentEventMap> = (
  */
 export default function useEventListener<
   T extends Element | Document | Window,
-  K extends keyof DocumentEventMap
+  K extends keyof DocumentEventMap,
 >(
   eventTarget: T | (() => T),
   event: K,
   listener: EventHandler<T, K>,
   capture: boolean | AddEventListenerOptions = false,
 ) {
-  const handler = useEventCallback(listener)
+  const handler = useEventCallback(listener) as EventListener
 
   useEffect(() => {
     const target =
diff --git a/src/useMergedRefs.ts b/src/useMergedRefs.ts
@@ -6,8 +6,8 @@ type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>
 const toFnRef = <T>(ref?: Ref<T> | null) =>
   !ref || typeof ref === 'function'
     ? ref
-    : (value: T) => {
-        ref.current = value
+    : (value: T | null) => {
+        ref.current = value as T
       }
 
 export function mergeRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
diff --git a/test/helpers.tsx b/test/helpers.tsx
@@ -1,4 +1,4 @@
-import { renderHook as baseRenderHook } from '@testing-library/react-hooks'
+import { renderHook as baseRenderHook } from '@testing-library/react'
 
 type ReactWrapper<P> = {
   setProps(props: Partial<P>): void
diff --git a/test/useAnimationFrame.test.tsx b/test/useAnimationFrame.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import useAnimationFrame from '../src/useAnimationFrame'
 
 describe('useAnimationFrame', () => {
diff --git a/test/useBreakpoint.test.tsx b/test/useBreakpoint.test.tsx
@@ -3,7 +3,7 @@ import useBreakpoint, {
   createBreakpointHook,
 } from '../src/useBreakpoint'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 interface Props {
   breakpoint: DefaultBreakpointMap
diff --git a/test/useCommittedRef.test.tsx b/test/useCommittedRef.test.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import useCommittedRef from '../src/useCommittedRef'
 
 describe('useCommittedRef', () => {
diff --git a/test/useDebouncedCallback.test.tsx b/test/useDebouncedCallback.test.tsx
@@ -1,7 +1,7 @@
 /*! tests an impl adapted from https://github.com/xnimorz/use-debounce/blob/master/test/useDebouncedCallback.test.tsx itself adapted from lodash*/
 
 import useDebouncedCallback from '../src/useDebouncedCallback'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act, waitFor } from '@testing-library/react'
 
 describe('useDebouncedCallback', () => {
   beforeEach(() => {
@@ -228,7 +228,7 @@ describe('useDebouncedCallback', () => {
     expect(callback).toHaveBeenCalledTimes(2)
   })
 
-  it('will call callback if maxWait time exceed', () => {
+  it('will call callback if maxWait time exceed', async () => {
     const callback = jest.fn()
 
     const { result } = renderHook(() =>
@@ -249,10 +249,9 @@ describe('useDebouncedCallback', () => {
 
     act(() => {
       result.current()
-
       jest.advanceTimersByTime(400)
     })
 
-    expect(callback).toHaveBeenCalledTimes(1)
+    await waitFor(() => expect(callback).toHaveBeenCalledTimes(1))
   })
 })
diff --git a/test/useDebouncedValue.test.tsx b/test/useDebouncedValue.test.tsx
@@ -1,43 +1,46 @@
 import React, { useEffect, useState } from 'react'
 
 import useDebouncedValue from '../src/useDebouncedValue'
-import { act, render } from '@testing-library/react'
+import { act, render, renderHook, waitFor } from '@testing-library/react'
 
 describe('useDebouncedValue', () => {
   beforeEach(() => {
     jest.useFakeTimers()
   })
 
-  it('should return a function that debounces input callback', () => {
+  it('should return a function that debounces input callback', async () => {
     let count = 0
-    function Wrapper({ value }) {
-      const debouncedValue = useDebouncedValue(value, 500)
 
-      useEffect(() => {
-        count++
-      }, [debouncedValue])
+    const { rerender, result } = renderHook(
+      ({ value }) => {
+        const debouncedValue = useDebouncedValue(value, 500)
 
-      return <span>{debouncedValue}</span>
-    }
+        useEffect(() => {
+          count++
+        }, [debouncedValue])
 
-    const { rerender, getByText } = render(<Wrapper value={0} />)
+        return debouncedValue
+      },
+      { initialProps: { value: 0 } },
+    )
 
     act(() => {
-      expect(getByText('0')).toBeTruthy()
+      expect(result.current).toBe(0)
 
-      rerender(<Wrapper value={1} />)
-      rerender(<Wrapper value={2} />)
-      rerender(<Wrapper value={3} />)
-      rerender(<Wrapper value={4} />)
-      rerender(<Wrapper value={5} />)
+      rerender({ value: 1 })
+      rerender({ value: 2 })
+      rerender({ value: 3 })
+      rerender({ value: 4 })
+      rerender({ value: 5 })
 
-      expect(getByText('0')).toBeTruthy()
+      expect(result.current).toBe(0)
 
       jest.runAllTimers()
-
-      expect(getByText('5')).toBeTruthy()
-      expect(count).toBe(2)
     })
+
+    await waitFor(() => expect(result.current).toBe(5))
+
+    expect(count).toBe(2)
   })
 
   it('will update value immediately if leading is set to true', () => {
diff --git a/test/useForceUpdate.test.tsx b/test/useForceUpdate.test.tsx
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 import useForceUpdate from '../src/useForceUpdate'
 
 describe('useForceUpdate', () => {
diff --git a/test/useIntersectionObserver.test.tsx b/test/useIntersectionObserver.test.tsx
@@ -1,5 +1,5 @@
 import useIntersectionObserver from '../src/useIntersectionObserver'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 describe('useIntersectionObserver', () => {
   let observers: any[] = []
diff --git a/test/useInterval.test.tsx b/test/useInterval.test.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import useInterval from '../src/useInterval'
 
 describe('useTimeout', () => {
diff --git a/test/useIsInitialRenderRef.test.tsx b/test/useIsInitialRenderRef.test.tsx
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 import useIsInitialRenderRef from '../src/useIsInitialRenderRef'
 import { useLayoutEffect } from 'react'
 
diff --git a/test/useIsomorphicEffect.test.tsx b/test/useIsomorphicEffect.test.tsx
@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import useIsomorphicEffect from '../src/useIsomorphicEffect'
 
 describe('useIsomorphicEffect', () => {
diff --git a/test/useMediaQuery.test.tsx b/test/useMediaQuery.test.tsx
@@ -1,5 +1,5 @@
 import useMediaQuery from '../src/useMediaQuery'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 describe('useMediaQuery', () => {
   it('should match immediately if possible', () => {
diff --git a/test/useMergedRefs.test.tsx b/test/useMergedRefs.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useCallbackRef } from '../src'
+import useCallbackRef from '../src/useCallbackRef'
 import useMergedRefs from '../src/useMergedRefs'
 import { render } from '@testing-library/react'
 
diff --git a/test/useMounted.test.tsx b/test/useMounted.test.tsx
@@ -1,5 +1,5 @@
 import useMounted from '../src/useMounted'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 describe('useMounted', () => {
   it('should return a function that returns mount state', () => {
diff --git a/test/usePrevious.test.tsx b/test/usePrevious.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import usePrevious from '../src/usePrevious'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 describe('usePrevious', () => {
   it('should return a function that returns mount state', () => {
diff --git a/test/useSafeState.test.tsx b/test/useSafeState.test.tsx
diff --git a/test/useSet.test.tsx b/test/useSet.test.tsx
diff --git a/test/useStateAsync.test.tsx b/test/useStateAsync.test.tsx
diff --git a/test/useTimeout.test.tsx b/test/useTimeout.test.tsx
diff --git a/test/useToggleState.test.tsx b/test/useToggleState.test.tsx
diff --git a/test/useWillUnmount.test.tsx b/test/useWillUnmount.test.tsx
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { renderHook as baseRenderHook } from '@testing-library/react-hooks'`
	`1`	`+import { renderHook as baseRenderHook } from '@testing-library/react'`
`2`	`2`
`3`	`3`	`type ReactWrapper<P> = {`
`4`	`4`	`setProps(props: Partial<P>): void`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { renderHook, act } from '@testing-library/react-hooks'`
	`1`	`+import { renderHook, act } from '@testing-library/react'`
`2`	`2`	`import useAnimationFrame from '../src/useAnimationFrame'`
`3`	`3`
`4`	`4`	`describe('useAnimationFrame', () => {`