use-callback-ref - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

dist/es2015/createRef.js

@@ -21,4 +21,4 @@ /**
             }
-        }
+        },
     };
 }

dist/es2015/mergeRef.js

@@ -0,3 +1,3 @@
+import { assignRef } from './assignRef';
 import { createCallbackRef } from './createRef';
-import { assignRef } from './assignRef';
 /**
@@ -17,5 +17,3 @@ * Merges two or more refs together providing a single interface to set their value
 export function mergeRefs(refs) {
-    return createCallbackRef(function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
-    });
+    return createCallbackRef(function (newValue) { return refs.forEach(function (ref) { return assignRef(ref, newValue); }); });
 }

dist/es2015/refToCallback.js

@@ -22,4 +22,5 @@ /**
     var usedRef = ref || nullCallback;
-    if (weakMem.has(usedRef)) {
-        return weakMem.get(usedRef);
+    var storedRef = weakMem.get(usedRef);
+    if (storedRef) {
+        return storedRef;
     }
@@ -26,0 +27,0 @@ var cb = refToCallback(usedRef);

dist/es2015/transformRef.d.ts

 import { ReactRef, RefObject } from './types';
-export declare 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 declare function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;

dist/es2015/transformRef.js

 import { assignRef } from './assignRef';
 import { createCallbackRef } from './createRef';
+/**
+ * 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(ref, transformer) {
     return createCallbackRef(function (value) { return assignRef(ref, transformer(value)); });
 }

dist/es2015/types.d.ts

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

dist/es2015/useMergeRef.js

@@ -0,3 +1,3 @@
+import { assignRef } from './assignRef';
 import { useCallbackRef } from './useRef';
-import { assignRef } from './assignRef';
 /**
@@ -18,5 +18,3 @@ * Merges two or more refs together providing a single interface to set their value
 export function useMergeRefs(refs, defaultValue) {
-    return useCallbackRef(defaultValue, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
-    });
+    return useCallbackRef(defaultValue || null, function (newValue) { return refs.forEach(function (ref) { return assignRef(ref, newValue); }); });
 }

dist/es2015/useRef.js

@@ -33,4 +33,4 @@ import { useState } from 'react';
                 }
-            }
-        }
+            },
+        },
     }); })[0];
@@ -37,0 +37,0 @@ // update callback

dist/es2015/useTransformRef.d.ts

@@ -15,2 +15,2 @@ import { ReactRef, RefObject } from './types';
  */
-export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T) => K): RefObject<T>;
+export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;

dist/es2015/useTransformRef.js

@@ -0,3 +1,3 @@
+import { assignRef } from './assignRef';
 import { useCallbackRef } from './useRef';
-import { assignRef } from './assignRef';
 /**
@@ -17,5 +17,3 @@ * Create a _lense_ on Ref, making it possible to transform ref value
 export function useTransformRef(ref, transformer) {
-    return useCallbackRef(undefined, function (value) {
-        return assignRef(ref, transformer(value));
-    });
+    return useCallbackRef(null, function (value) { return assignRef(ref, transformer(value)); });
 }

dist/es5/assignRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.assignRef = void 0;
 /**
@@ -4,0 +5,0 @@ * Assigns a value for a given ref, no matter of the ref format

dist/es5/createRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCallbackRef = void 0;
 /**
@@ -23,5 +24,5 @@ * creates a Ref object with on change callback
             }
-        }
+        },
     };
 }
 exports.createCallbackRef = createCallbackRef;

dist/es5/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefToCallback = exports.refToCallback = exports.transformRef = exports.useTransformRef = exports.useMergeRefs = exports.mergeRefs = exports.createCallbackRef = exports.useCallbackRef = exports.assignRef = void 0;
 var assignRef_1 = require("./assignRef");
-exports.assignRef = assignRef_1.assignRef;
+Object.defineProperty(exports, "assignRef", { enumerable: true, get: function () { return assignRef_1.assignRef; } });
 // callback ref
 var useRef_1 = require("./useRef");
-exports.useCallbackRef = useRef_1.useCallbackRef;
+Object.defineProperty(exports, "useCallbackRef", { enumerable: true, get: function () { return useRef_1.useCallbackRef; } });
 var createRef_1 = require("./createRef");
-exports.createCallbackRef = createRef_1.createCallbackRef;
+Object.defineProperty(exports, "createCallbackRef", { enumerable: true, get: function () { return createRef_1.createCallbackRef; } });
 // merge ref
 var mergeRef_1 = require("./mergeRef");
-exports.mergeRefs = mergeRef_1.mergeRefs;
+Object.defineProperty(exports, "mergeRefs", { enumerable: true, get: function () { return mergeRef_1.mergeRefs; } });
 var useMergeRef_1 = require("./useMergeRef");
-exports.useMergeRefs = useMergeRef_1.useMergeRefs;
+Object.defineProperty(exports, "useMergeRefs", { enumerable: true, get: function () { return useMergeRef_1.useMergeRefs; } });
 // transform ref
 var useTransformRef_1 = require("./useTransformRef");
-exports.useTransformRef = useTransformRef_1.useTransformRef;
+Object.defineProperty(exports, "useTransformRef", { enumerable: true, get: function () { return useTransformRef_1.useTransformRef; } });
 var transformRef_1 = require("./transformRef");
-exports.transformRef = transformRef_1.transformRef;
+Object.defineProperty(exports, "transformRef", { enumerable: true, get: function () { return transformRef_1.transformRef; } });
 // refToCallback
 var refToCallback_1 = require("./refToCallback");
-exports.refToCallback = refToCallback_1.refToCallback;
-exports.useRefToCallback = refToCallback_1.useRefToCallback;
+Object.defineProperty(exports, "refToCallback", { enumerable: true, get: function () { return refToCallback_1.refToCallback; } });
+Object.defineProperty(exports, "useRefToCallback", { enumerable: true, get: function () { return refToCallback_1.useRefToCallback; } });

dist/es5/mergeRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = void 0;
+var assignRef_1 = require("./assignRef");
 var createRef_1 = require("./createRef");
-var assignRef_1 = require("./assignRef");
 /**
@@ -19,6 +20,4 @@ * Merges two or more refs together providing a single interface to set their value
 function mergeRefs(refs) {
-    return createRef_1.createCallbackRef(function (newValue) {
-        return refs.forEach(function (ref) { return assignRef_1.assignRef(ref, newValue); });
-    });
+    return (0, createRef_1.createCallbackRef)(function (newValue) { return refs.forEach(function (ref) { return (0, assignRef_1.assignRef)(ref, newValue); }); });
 }
 exports.mergeRefs = mergeRefs;

dist/es5/refToCallback.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefToCallback = exports.refToCallback = void 0;
 /**
@@ -25,4 +26,5 @@ * Unmemoized version of {@link useRefToCallback}
     var usedRef = ref || nullCallback;
-    if (weakMem.has(usedRef)) {
-        return weakMem.get(usedRef);
+    var storedRef = weakMem.get(usedRef);
+    if (storedRef) {
+        return storedRef;
     }
@@ -29,0 +31,0 @@ var cb = refToCallback(usedRef);

dist/es5/transformRef.d.ts

 import { ReactRef, RefObject } from './types';
-export declare 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 declare function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;

dist/es5/transformRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformRef = void 0;
 var assignRef_1 = require("./assignRef");
 var createRef_1 = require("./createRef");
+/**
+ * Transforms one ref to another
+ * @example
+ * ```tsx
+ * const ResizableWithRef = forwardRef((props, ref) =>
+ *   <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
+ * );
+ * ```
+ */
 function transformRef(ref, transformer) {
-    return createRef_1.createCallbackRef(function (value) { return assignRef_1.assignRef(ref, transformer(value)); });
+    return (0, createRef_1.createCallbackRef)(function (value) { return (0, assignRef_1.assignRef)(ref, transformer(value)); });
 }
 exports.transformRef = transformRef;

dist/es5/types.d.ts

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

dist/es5/useMergeRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMergeRefs = void 0;
+var assignRef_1 = require("./assignRef");
 var useRef_1 = require("./useRef");
-var assignRef_1 = require("./assignRef");
 /**
@@ -20,6 +21,4 @@ * Merges two or more refs together providing a single interface to set their value
 function useMergeRefs(refs, defaultValue) {
-    return useRef_1.useCallbackRef(defaultValue, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef_1.assignRef(ref, newValue); });
-    });
+    return (0, useRef_1.useCallbackRef)(defaultValue || null, function (newValue) { return refs.forEach(function (ref) { return (0, assignRef_1.assignRef)(ref, newValue); }); });
 }
 exports.useMergeRefs = useMergeRefs;

dist/es5/useRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCallbackRef = void 0;
 var react_1 = require("react");
@@ -19,3 +20,3 @@ /**
 function useCallbackRef(initialValue, callback) {
-    var ref = react_1.useState(function () { return ({
+    var ref = (0, react_1.useState)(function () { return ({
         // value
@@ -36,4 +37,4 @@ value: initialValue,
                 }
-            }
-        }
+            },
+        },
     }); })[0];
@@ -40,0 +41,0 @@ // update callback

dist/es5/useTransformRef.d.ts

@@ -15,2 +15,2 @@ import { ReactRef, RefObject } from './types';
  */
-export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T) => K): RefObject<T>;
+export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;

dist/es5/useTransformRef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransformRef = void 0;
+var assignRef_1 = require("./assignRef");
 var useRef_1 = require("./useRef");
-var assignRef_1 = require("./assignRef");
 /**
@@ -19,6 +20,4 @@ * Create a _lense_ on Ref, making it possible to transform ref value
 function useTransformRef(ref, transformer) {
-    return useRef_1.useCallbackRef(undefined, function (value) {
-        return assignRef_1.assignRef(ref, transformer(value));
-    });
+    return (0, useRef_1.useCallbackRef)(null, function (value) { return (0, assignRef_1.assignRef)(ref, transformer(value)); });
 }
 exports.useTransformRef = useTransformRef;

package.json

 {
   "name": "use-callback-ref",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "The same useRef, but with callback",
   "main": "dist/es5/index.js",
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
+  "module:es2019": "dist/es2019/index.js",
   "sideEffects": false,
   "scripts": {
-    "test": "ts-react-toolbox test",
-    "bootstrap": "ts-react-toolbox init",
-    "dev": "ts-react-toolbox dev",
-    "test:ci": "ts-react-toolbox test --runInBand --coverage",
-    "build": "ts-react-toolbox build",
-    "prepublish": "yarn build",
-    "release": "ts-react-toolbox release",
-    "lint": "ts-react-toolbox lint",
-    "static": "ts-react-toolbox publish",
-    "format": "ts-react-toolbox format",
-    "analyze": "ts-react-toolbox analyze"
+    "dev": "lib-builder dev",
+    "test": "jest",
+    "test:ci": "jest --runInBand --coverage",
+    "build": "lib-builder build && yarn size:report",
+    "release": "yarn build && yarn test",
+    "size": "npx size-limit",
+    "size:report": "npx size-limit --json > .size.json",
+    "lint": "lib-builder lint",
+    "format": "lib-builder format",
+    "update": "lib-builder update",
+    "prepublish": "yarn build && yarn changelog",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
@@ -23,9 +29,14 @@ "repository": "https://github.com/theKashey/use-callback-ref/",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
   "devDependencies": {
-    "ts-react-toolbox": "^0.2.11"
+    "@theuiteam/lib-builder": "^0.1.4",
+    "@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",
-    "@types/react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -38,7 +49,4 @@ "peerDependenciesMeta": {
   "engines": {
-    "node": ">=8.5.0"
+    "node": ">=10"
   },
-  "jsnext:main": "dist/es2015/index.js",
-  "module": "dist/es2015/index.js",
-  "types": "dist/es5/index.d.ts",
   "files": [
@@ -53,16 +61,25 @@ "dist"
   ],
-  "size-limit": [
-    {
-      "path": "dist/es2015/index.js",
-      "limit": "0.4 KB"
-    },
-    {
-      "path": "dist/es2015/useRef.js",
-      "limit": "0.2 KB"
-    },
-    {
-      "path": "dist/es2015/useMergeRef.js",
-      "limit": "0.2 KB"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
     }
-  ]
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

48486

increased by48.32%

Number of package files

63

increased by50%

Lines of code

1099

increased by54.79%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

4

increased by300%

Dependency changes

• + Addedtslib@^2.0.0

• + Added@types/react@18.3.2(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@types/react@17.0.80(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)