migrate to TypeScript 4

Author: theKashey

.DS_Store

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "dist/es2015/index.js",
+    "passed": true,
+    "size": 380
+  },
+  {
+    "name": "dist/es2015/useRef.js",
+    "passed": true,
+    "size": 125
+  },
+  {
+    "name": "dist/es2015/useMergeRef.js",
+    "passed": true,
+    "size": 174
+  }
+]

.size.json

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

CHANGELOG.md

@@ -1,9 +1,19 @@
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import * as React from 'react';
-import {createRef} from "react";
-import {mount} from 'enzyme';
-import {createCallbackRef, mergeRefs, useTransformRef, useCallbackRef, useMergeRefs} from "../src";
-import {refToCallback, useRefToCallback} from "../src/refToCallback";
+import { createRef } from 'react';
 
+import {
+  refToCallback,
+  useRefToCallback,
+  createCallbackRef,
+  mergeRefs,
+  useTransformRef,
+  useCallbackRef,
+  useMergeRefs,
+} from '../src';
+
+configure({ adapter: new Adapter() });
 
 describe('Specs', () => {
   describe('useCallbackRef', () => {
@@ -16,7 +26,11 @@ describe('Specs', () => {
     it('shall work as createRef', () => {
       const spy = jest.fn();
       const ref = createCallbackRef<HTMLDivElement>(spy);
-      mount(<div ref={ref}>test</div>).setProps({}).update();
+
+      mount(<div ref={ref}>test</div>)
+        .setProps({})
+        .update();
+
       expect(spy).toBeCalledWith(ref.current, null);
       expect(spy).toHaveBeenCalledTimes(1);
       expect(ref.current).not.toBe(null);
@@ -26,51 +40,49 @@ describe('Specs', () => {
       const spy1 = jest.fn();
       const spy2 = jest.fn();
       let counter = 0;
+
       const Test = () => {
         const x = counter++;
         const ref = useCallbackRef<HTMLDivElement>(null, () => spy1(x));
         const mref = useMergeRefs([ref, spy2]);
-        return <div key={x < 2 ? '1' : '2'} ref={mref}>test</div>;
+
+        return (
+          <div key={x < 2 ? '1' : '2'} ref={mref}>
+            test
+          </div>
+        );
       };
-      const wrapper = mount(<Test/>);
+
+      const wrapper = mount(<Test />);
       expect(spy1).toBeCalledWith(0);
       expect(spy1).toHaveBeenCalledTimes(1);
       expect(spy2).not.toBeCalledWith(null);
       expect(spy2).toHaveBeenCalledTimes(1);
 
-      wrapper.setProps({x: 42});
+      wrapper.setProps({ x: 42 });
       expect(spy1).toBeCalledWith(0);
       expect(spy1).toHaveBeenCalledTimes(1);
       expect(spy2).not.toBeCalledWith(null);
 
-      wrapper.setProps({x: 24});
+      wrapper.setProps({ x: 24 });
       expect(spy1).toBeCalledWith(2);
       expect(spy1).toHaveBeenCalledTimes(3);
       expect(spy2).toBeCalledWith(null);
     });
   });
 
   describe('mergeRef', () => {
-    it("merges two refs", () => {
+    it('merges two refs', () => {
       const spy1 = jest.fn();
       const ref1 = createCallbackRef<HTMLDivElement>(spy1);
       const spy2 = jest.fn();
       const ref2 = createCallbackRef<HTMLDivElement>(spy2);
       const ref3 = createRef() as React.MutableRefObject<any>;
       const ref4 = jest.fn();
 
-      const TestComponent = () => (
-        <div
-          ref={mergeRefs([
-            ref1,
-            ref2,
-            ref3,
-            ref4,
-          ])}
-        >test</div>
-      );
+      const TestComponent = () => <div ref={mergeRefs([ref1, ref2, ref3, ref4])}>test</div>;
 
-      mount(<TestComponent/>);
+      mount(<TestComponent />);
 
       const ref = ref1.current;
       expect(ref).not.toBe(null);
@@ -85,21 +97,28 @@ describe('Specs', () => {
       const spy = jest.fn();
       const ref = createRef<HTMLDivElement>();
       let counter = 0;
+
       const Test = () => {
         const x = counter++;
         const mref = mergeRefs<HTMLDivElement>([spy, ref]);
-        return <div key={x < 1 ? '1' : '2'} ref={mref}>test</div>;
+
+        return (
+          <div key={x < 1 ? '1' : '2'} ref={mref}>
+            test
+          </div>
+        );
       };
-      const wrapper = mount(<Test/>);
+
+      const wrapper = mount(<Test />);
       expect(spy).not.toBeCalledWith(null);
       expect(spy).toBeCalledWith(ref.current);
       expect(spy).toHaveBeenCalledTimes(1);
 
-      wrapper.setProps({x: 42});
+      wrapper.setProps({ x: 42 });
       expect(spy).toBeCalledWith(null);
       expect(spy).toBeCalledWith(ref.current);
       expect(spy).toHaveBeenCalledTimes(3);
-    })
+    });
   });
 
   describe('transformRef', () => {
@@ -117,28 +136,21 @@ describe('Specs', () => {
         const ref4 = refToCallback<HTMLDivElement>(spy4);
         const ref4s = useRefToCallback<HTMLDivElement>(ref4t);
 
-        return (
-          <div
-            ref={useMergeRefs([
-              ref1,
-              ref3,
-              ref4,
-              ref4s
-            ])}
-          >test</div>
-        );
+        return <div ref={useMergeRefs([ref1, ref3, ref4, ref4s])}>test</div>;
       };
 
-      mount(<TestComponent/>).setProps({x: 1}).update();
+      mount(<TestComponent />)
+        .setProps({ x: 1 })
+        .update();
 
       const ref = ref1.current;
       expect(ref).not.toBe(null);
 
       expect(spy1).toBeCalledWith(ref, null);
-      expect(spy2).toBeCalledWith("test", null);
+      expect(spy2).toBeCalledWith('test', null);
       expect(ref4t.current).toBe(ref);
       expect(spy4).toBeCalledWith(ref);
-    })
+    });
   });
 
   describe('edge cases', () => {
@@ -150,13 +162,16 @@ describe('Specs', () => {
 
     it('merging null refs', () => {
       const ref1 = createRef();
+
       const TestComponent = () => {
         const ref = useMergeRefs([null, ref1]);
         ref.current = 'xx';
+
         return null;
       };
-      mount(<TestComponent/>);
-      expect(ref1.current).toBe('xx')
+
+      mount(<TestComponent />);
+      expect(ref1.current).toBe('xx');
     });
-  })
+  });
 });

LICENSE

@@ -31,7 +31,9 @@
   },
   "devDependencies": {
     "@theuiteam/lib-builder": "^0.1.4",
-    "@size-limit/preset-small-lib": "^2.1.6"
+    "@size-limit/preset-small-lib": "^2.1.6",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "enzyme-adapter-react-16": "^1.15.6"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

__tests__/index.tsx

@@ -15,7 +15,7 @@ export function createCallbackRef<T>(callback: (newValue: T | null, lastValue: T
     get current() {
       return current;
     },
-    set current(value: T) {
+    set current(value: T | null) {
       const last = current;
 
       if (last !== value) {

package.json

@@ -1,4 +1,4 @@
-import { ReactRef, RefCallback } from './types';
+import { DefinedReactRef, ReactRef, RefCallback } from './types';
 
 /**
  * Unmemoized version of {@link useRefToCallback}
@@ -18,13 +18,15 @@ export function refToCallback<T>(ref: ReactRef<T>): RefCallback<T> {
 const nullCallback = (): any => null;
 // lets maintain a weak ref to, well, ref :)
 // not using `kashe` to keep this package small
-const weakMem = new WeakMap<ReactRef<any>, RefCallback<any>>();
+const weakMem = new WeakMap<DefinedReactRef<any>, RefCallback<any>>();
 
-const weakMemoize = (ref: ReactRef<any>) => {
+const weakMemoize = (ref: ReactRef<any>): RefCallback<any> => {
   const usedRef = ref || nullCallback;
 
-  if (weakMem.has(usedRef)) {
-    return weakMem.get(usedRef);
+  const storedRef = weakMem.get(usedRef);
+
+  if (storedRef) {
+    return storedRef;
   }
 
   const cb = refToCallback(usedRef);

src/createRef.ts

@@ -2,6 +2,15 @@ import { assignRef } from './assignRef';
 import { createCallbackRef } from './createRef';
 import { ReactRef, RefObject } from './types';
 
-export function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T) => K): RefObject<T> {
+/**
+ * Transforms one ref to another
+ * @example
+ * ```tsx
+ * const ResizableWithRef = forwardRef((props, ref) =>
+ *   <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
+ * );
+ * ```
+ */
+export function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T> {
   return createCallbackRef<T>((value) => assignRef(ref, transformer(value)));
 }

src/refToCallback.ts

@@ -3,4 +3,5 @@ import * as React from 'react';
 export type RefCallback<T> = (newValue: T | null) => void;
 export type RefObject<T> = React.MutableRefObject<T | null>;
 
-export type ReactRef<T> = RefCallback<T> | RefObject<T> | null;
+export type DefinedReactRef<T> = RefCallback<T> | RefObject<T>;
+export type ReactRef<T> = DefinedReactRef<T> | null;