Merge pull request #14 from freckle/aj/fix-types

Fix typescript types for useExtraDeps

Author: z0isch

dist/use-extra-deps/index.d.ts

@@ -1,16 +1,16 @@
 export declare type PrimitiveDep = boolean | string | number | null | void | symbol;
-export declare type CallbackFn<F> = F;
-export declare const unCallbackFn: <F>(fn: F) => F;
-export declare function unsafeMkCallbackFn<F extends (v: any) => any>(f: F): CallbackFn<F>;
+export declare type CallbackFn<F> = {
+    callback: F;
+};
+export declare const unCallbackFn: <F>({ callback }: CallbackFn<F>) => F;
+export declare function unsafeMkCallbackFn<F extends (v: any) => any>(callback: F): CallbackFn<F>;
 export declare type ExtraDeps<V> = {
     value: V;
     comparator: (a: V, b: V) => boolean;
 } | CallbackFn<V>;
-export declare function useExtraDeps<T extends {
-    [P in keyof S]: S[P] extends ExtraDeps<infer R> ? R : never;
-}, S extends {
-    [key: string]: ExtraDeps<unknown>;
-} = Record<string, unknown>>(deps: ReadonlyArray<PrimitiveDep>, extraDeps: S): {
+export declare function useExtraDeps<T extends Record<string, unknown>>(deps: ReadonlyArray<PrimitiveDep>, extraDeps: {
+    [P in keyof T]: T[P] extends infer R ? ExtraDeps<R> : never;
+}): {
     allDeps: ReadonlyArray<any>;
     extraDepValues: T;
 };

dist/use-extra-deps/index.js

@@ -28,17 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExtraDeps = exports.unsafeMkCallbackFn = exports.unCallbackFn = void 0;
 /* eslint @typescript-eslint/no-explicit-any: 0 */
-const isFunction_1 = __importDefault(require("lodash/isFunction"));
 const mapValues_1 = __importDefault(require("lodash/mapValues"));
 const omitBy_1 = __importDefault(require("lodash/omitBy"));
 const pickBy_1 = __importDefault(require("lodash/pickBy"));
 const values_1 = __importDefault(require("lodash/values"));
 const React = __importStar(require("react"));
-const unCallbackFn = (fn) => fn;
+const unCallbackFn = ({ callback }) => callback;
 exports.unCallbackFn = unCallbackFn;
 // Used only by `useSafeCallback`
-function unsafeMkCallbackFn(f) {
-    return f;
+function unsafeMkCallbackFn(callback) {
+    return { callback };
 }
 exports.unsafeMkCallbackFn = unsafeMkCallbackFn;
 // Hook used to help avoid pitfalls surrounding misuse of objects and arrays in
@@ -58,8 +57,8 @@ exports.unsafeMkCallbackFn = unsafeMkCallbackFn;
 function useExtraDeps(deps, extraDeps) {
     const [run, setRun] = React.useState(Symbol());
     const nonFnsRef = React.useRef(null);
-    const fns = (0, pickBy_1.default)(extraDeps, isFunction_1.default);
-    const nonFns = (0, omitBy_1.default)(extraDeps, isFunction_1.default);
+    const fns = (0, mapValues_1.default)((0, pickBy_1.default)(extraDeps, dep => 'callback' in dep), fn => fn.callback);
+    const nonFns = (0, omitBy_1.default)(extraDeps, dep => 'callback' in dep);
     const hasChange = () => {
         if (nonFnsRef.current === null || nonFnsRef.current === undefined) {
             return true;

dist/use-safe-callback/index.d.ts

@@ -1,7 +1,5 @@
 import { type CallbackFn, type ExtraDeps, type PrimitiveDep } from './../use-extra-deps';
 export declare function useSafeCallback<F extends (v: any) => any>(f: () => F, deps: ReadonlyArray<PrimitiveDep>): CallbackFn<F>;
-export declare function useSafeCallbackExtraDeps<F extends (v: any) => any, T extends {
-    [P in keyof S]: S[P] extends ExtraDeps<infer R> ? R : never;
-}, S extends {
-    [key: string]: ExtraDeps<unknown>;
-} = Record<string, unknown>>(f: (a: T) => F, deps: ReadonlyArray<PrimitiveDep>, extraDeps: S): CallbackFn<F>;
+export declare function useSafeCallbackExtraDeps<F extends (v: any) => any, T extends Record<string, unknown>>(f: (a: T) => F, deps: ReadonlyArray<PrimitiveDep>, extraDeps: {
+    [P in keyof T]: T[P] extends infer R ? ExtraDeps<R> : never;
+}): CallbackFn<F>;

dist/use-safe-effect/index.d.ts

@@ -1,6 +1,4 @@
 import type { MaybeCleanUpFn } from './../types';
 import { type ExtraDeps, type PrimitiveDep } from './../use-extra-deps';
 export declare const useSafeEffect: (effect: () => MaybeCleanUpFn, deps: ReadonlyArray<PrimitiveDep>) => void;
-export declare const useSafeEffectExtraDeps: <T extends { [P in keyof S]: S[P] extends ExtraDeps<infer R> ? R : never; }, S extends {
-    [key: string]: unknown;
-} = Record<string, unknown>>(effect: (a: T) => MaybeCleanUpFn, deps: ReadonlyArray<PrimitiveDep>, extraDeps: S) => void;
+export declare const useSafeEffectExtraDeps: <T extends Record<string, unknown>>(effect: (a: T) => MaybeCleanUpFn, deps: ReadonlyArray<PrimitiveDep>, extraDeps: { [P in keyof T]: T[P] extends infer R ? ExtraDeps<R> : never; }) => void;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freckle/react-hooks",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "React hooks used at Freckle",
   "main": "dist/index.js",
   "scripts": {

src/use-extra-deps/index.test.tsx

@@ -7,8 +7,8 @@ describe('useExtraDeps', () => {
   it('works with extra deps', async () => {
     let symbol
     const C = ({p1}: {p1: number}) => {
-      const {allDeps} = useExtraDeps([], {
-        p1: {value: p1, comparator: (a: number, b: number) => a === b}
+      const {allDeps} = useExtraDeps<{p1: number}>([], {
+        p1: {value: p1, comparator: (a, b) => a === b}
       })
       //The symbol is always the last thing in the allDeps array
       symbol = last(allDeps)
@@ -26,4 +26,15 @@ describe('useExtraDeps', () => {
     rerender(<C p1={1} />)
     expect(lastSymbol).not.toBe(symbol)
   })
+
+  // This test is only testing the types
+  // It is expected to throw at runtime due to calling hooks outside of a React component
+  it('rejects malformed deps at typelevel', () => {
+    expect(() => {
+      // @ts-expect-error can't pass object with wrong shape
+      useExtraDeps([], {a: 1})
+      // @ts-expect-error can't pass function
+      useExtraDeps([], {a: () => 'hi'})
+    }).toThrow()
+  })
 })

src/use-extra-deps/index.ts

@@ -1,5 +1,4 @@
 /* eslint @typescript-eslint/no-explicit-any: 0 */
-import isFunction from 'lodash/isFunction'
 import mapValues from 'lodash/mapValues'
 import omitBy from 'lodash/omitBy'
 import pickBy from 'lodash/pickBy'
@@ -11,13 +10,13 @@ export type PrimitiveDep = boolean | string | number | null | void | symbol
 
 // Wrapper around a function that has been wrapped in `useSafeCallback`. This
 // type is here to avoid cyclical dependencies.
-export type CallbackFn<F> = F
+export type CallbackFn<F> = {callback: F}
 
-export const unCallbackFn = <F>(fn: CallbackFn<F>): F => fn
+export const unCallbackFn = <F>({callback}: CallbackFn<F>): F => callback
 
 // Used only by `useSafeCallback`
-export function unsafeMkCallbackFn<F extends (v: any) => any>(f: F): CallbackFn<F> {
-  return f
+export function unsafeMkCallbackFn<F extends (v: any) => any>(callback: F): CallbackFn<F> {
+  return {callback}
 }
 
 export type ExtraDeps<V> =
@@ -41,24 +40,21 @@ export type ExtraDeps<V> =
 // An object that has the same keys as extraDeps but contains their plain values
 // }
 //
-export function useExtraDeps<
-  T extends {[P in keyof S]: S[P] extends ExtraDeps<infer R> ? R : never},
-  S extends {
-    [key: string]: ExtraDeps<unknown>
-  } = Record<string, unknown>
->(
+export function useExtraDeps<T extends Record<string, unknown>>(
   deps: ReadonlyArray<PrimitiveDep>,
-  extraDeps: S
+  extraDeps: {[P in keyof T]: T[P] extends infer R ? ExtraDeps<R> : never}
 ): {
   allDeps: ReadonlyArray<any>
   extraDepValues: T
 } {
   const [run, setRun] = React.useState<symbol>(Symbol())
   const nonFnsRef = React.useRef<null | any>(null)
 
-  const fns: any = pickBy(extraDeps, isFunction)
-  const nonFns: any = omitBy(extraDeps, isFunction)
-
+  const fns: any = mapValues(
+    pickBy(extraDeps, dep => 'callback' in dep),
+    fn => (fn as any).callback
+  )
+  const nonFns: any = omitBy(extraDeps, dep => 'callback' in dep)
   const hasChange = () => {
     if (nonFnsRef.current === null || nonFnsRef.current === undefined) {
       return true

src/use-safe-callback/index.test.tsx

@@ -4,22 +4,22 @@ import {useSafeCallback, useSafeCallbackExtraDeps} from '.'
 
 describe('useSafeCallback', () => {
   it('works with dep', async () => {
-    let f
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let f: any
     const A = ({p1}: {p1: number}) => {
       f = useSafeCallback(() => () => p1, [p1])
       return null
     }
     const {rerender} = render(<A p1={0} />)
     let cbF = f
-
     // f stays the same reference when prop stays the same
     rerender(<A p1={0} />)
-    expect(cbF).toBe(f)
+    expect(cbF.callback).toBe(f.callback)
     cbF = f
 
     // f changes reference when prop changes
     rerender(<A p1={1} />)
-    expect(cbF).not.toBe(f)
+    expect(cbF.callback).not.toBe(f.callback)
   })
 })
 
@@ -28,16 +28,17 @@ describe('useSafeCallbackExtraDeps', () => {
     const countTrue = jest.fn((arr: Array<boolean>): number => arr.filter(x => x === true).length)
     const arr1 = [true, false, true]
     const arr2 = [false, true]
-    let f
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let f: any
     const A = ({p1}: {p1: boolean[]}) => {
-      f = useSafeCallbackExtraDeps(
+      f = useSafeCallbackExtraDeps<() => void, {p1: boolean[]}>(
         ({p1}) =>
           () => {
             countTrue(p1)
           },
         [],
         {
-          p1: {value: p1, comparator: (a: boolean[], b: boolean[]) => a.length === b.length}
+          p1: {value: p1, comparator: (a, b) => a.length === b.length}
         }
       )
       return null
@@ -47,11 +48,11 @@ describe('useSafeCallbackExtraDeps', () => {
 
     // f stays the same reference when prop stays the same
     rerender(<A p1={arr1} />)
-    expect(cbF).toBe(f)
+    expect(cbF.callback).toBe(f.callback)
     cbF = f
 
     // f changes reference when prop changes
     rerender(<A p1={arr2} />)
-    expect(cbF).not.toBe(f)
+    expect(cbF.callback).not.toBe(f.callback)
   })
 })

src/use-safe-callback/index.ts

@@ -18,11 +18,12 @@ export function useSafeCallback<F extends (v: any) => any>(
 
 export function useSafeCallbackExtraDeps<
   F extends (v: any) => any,
-  T extends {[P in keyof S]: S[P] extends ExtraDeps<infer R> ? R : never},
-  S extends {
-    [key: string]: ExtraDeps<unknown>
-  } = Record<string, unknown>
->(f: (a: T) => F, deps: ReadonlyArray<PrimitiveDep>, extraDeps: S): CallbackFn<F> {
+  T extends Record<string, unknown>
+>(
+  f: (a: T) => F,
+  deps: ReadonlyArray<PrimitiveDep>,
+  extraDeps: {[P in keyof T]: T[P] extends infer R ? ExtraDeps<R> : never}
+): CallbackFn<F> {
   const {extraDepValues, allDeps} = useExtraDeps<T>(deps, extraDeps)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps

src/use-safe-effect/index.test.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import {render} from '@testing-library/react'
 import {useSafeEffect, useSafeEffectExtraDeps} from '.'
 import {useSafeCallback} from './../use-safe-callback'
+import {CallbackFn} from '../use-extra-deps'
 
 describe('useSafeEffect', () => {
   it('works with no deps', async () => {
@@ -71,8 +72,8 @@ describe('useSafeEffect', () => {
       }
       p2: number
     }) => {
-      useSafeEffectExtraDeps(({say}) => sideEffect(say), [], {
-        say: {value: p1, comparator: (a: {text: string}, b: {text: string}) => a.text === b.text}
+      useSafeEffectExtraDeps<{say: {text: string}}>(({say}) => sideEffect(say), [], {
+        say: {value: p1, comparator: (a, b) => a.text === b.text}
       })
       return <>{p2}</>
     }
@@ -105,15 +106,15 @@ describe('useSafeEffect', () => {
     const countTrue = jest.fn((arr: Array<boolean>): number => arr.filter(x => x === true).length)
 
     const C = ({p1, p2}: {p1: Array<boolean>; p2: number}) => {
-      useSafeEffectExtraDeps(
+      useSafeEffectExtraDeps<{p1: boolean[]}>(
         ({p1}) => {
           // Cannot return anything except a clean-up function
           countTrue(p1)
         },
         [],
         {
           // Only run effect when array length changes, regardless of contents
-          p1: {value: p1, comparator: (a: boolean[], b: boolean[]) => a.length === b.length}
+          p1: {value: p1, comparator: (a, b) => a.length === b.length}
         }
       )
       return <>{p2}</>
@@ -160,14 +161,13 @@ describe('useSafeEffect', () => {
 
       return <C p2={p2} p3={p3} f={cbF} />
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const C = ({f, p2, p3}: {f: (v: any) => any; p2: number; p3: number}) => {
-      useSafeEffectExtraDeps(
+    const C = ({f, p2, p3}: {f: CallbackFn<(b: number) => void>; p2: number; p3: number}) => {
+      useSafeEffectExtraDeps<{p3: number; f: (b: number) => void}>(
         ({p3, f}) => {
           return f(p3)
         },
         [],
-        {p3: {value: p3, comparator: (a: number, b: number) => a === b}, f}
+        {p3: {value: p3, comparator: (a, b) => a === b}, f}
       )
       return <>{p2}</>
     }
@@ -213,16 +213,16 @@ describe('useSafeEffect', () => {
       p3: number
       p4: boolean
     }) => {
-      useSafeEffectExtraDeps(
+      useSafeEffectExtraDeps<{p1: {text: string}; p2: string[]}>(
         ({p1, p2}) => {
           // Cannot return anything except a clean-up function
           computation(p1.text, p2, p3, p4)
         },
         [p3, p4],
         {
-          p1: {value: p1, comparator: (a: {text: string}, b: {text: string}) => a.text === b.text},
+          p1: {value: p1, comparator: (a, b) => a.text === b.text},
           // Deep comparison of arrays
-          p2: {value: p2, comparator: (a: string[], b: string[]) => isEqual(a, b)}
+          p2: {value: p2, comparator: (a, b) => isEqual(a, b)}
         }
       )
       return <>{p1.text}</>
@@ -266,8 +266,8 @@ describe('useSafeEffect', () => {
       }
       p2: number
     }) => {
-      useSafeEffectExtraDeps(({say}) => sideEffect(say), [], {
-        say: {value: p1, comparator: (a: {text: string}, b: {text: string}) => a.text === b.text}
+      useSafeEffectExtraDeps<{say: {text: string}}>(({say}) => sideEffect(say), [], {
+        say: {value: p1, comparator: (a, b) => a.text === b.text}
       })
       return <>{p2}</>
     }