@codeleap/utils 4.3.9 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/utils",
-  "version": "4.3.9",
+  "version": "5.0.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,18 +9,18 @@
     "directory": "packages/utils"
   },
   "devDependencies": {
-    "@codeleap/config": "4.3.9",
-    "@codeleap/types": "4.3.9",
+    "@codeleap/config": "5.0.0",
+    "@codeleap/types": "5.0.0",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {
     "build": "echo 'No build needed'"
   },
   "peerDependencies": {
-    "@codeleap/types": "4.3.9",
+    "@codeleap/types": "5.0.0",
     "axios": "^1.7.9",
-    "typescript": "5.0.4",
-    "react": "18.1.0",
+    "typescript": "5.5.2",
+    "react": "18.2.0",
     "@tanstack/react-query": "5.60.6"
   },
   "dependencies": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/utils",
-  "version": "4.3.9",
+  "version": "5.0.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -19,8 +19,8 @@
   "peerDependencies": {
     "@codeleap/types": "workspace:*",
     "axios": "^1.7.9",
-    "typescript": "5.0.4",
-    "react": "18.1.0",
+    "typescript": "5.5.2",
+    "react": "18.2.0",
     "@tanstack/react-query": "5.60.6"
   },
   "dependencies": {

package/src/react.tsx

@@ -85,10 +85,35 @@ export function getRenderedComponent<P = any>(
   return <DefaultComponent {...props} {..._props} />
 }
 
+/**
+ * Memoizes a React functional component to prevent unnecessary re-renders.
+ *
+ * This function wraps a React functional component using `React.memo`, which provides 
+ * a mechanism for memoizing the result of rendering the component. By default, it 
+ * uses a comparison function that always returns `true`, indicating that the component
+ * should not re-render, regardless of prop changes. This behavior essentially freezes 
+ * the component's rendering until explicitly updated.
+ *
+ * @template P - The type of the component's props.
+ * @param ComponentToMemoize - The React functional component to memoize.
+ * @returns A memoized version of the input component (`React.NamedExoticComponent`).
+ */
 export function memoize<P extends object>(ComponentToMemoize: React.FunctionComponent<P>): React.NamedExoticComponent<P> {
   return React.memo(ComponentToMemoize, () => true)
 }
 
+/**
+ * Checks whether a specific property in two sets of props is equal.
+ *
+ * This function compares the value of a given property (`prop`) between two objects 
+ * (`prevProps` and `nextProps`) using a deep equality check (`equals`).
+ *
+ * @template P - The type of the props object.
+ * @param prop - The key of the property to compare.
+ * @param prevProps - The previous props object.
+ * @param nextProps - The next props object.
+ * @returns `true` if the values of the specified property are deeply equal; otherwise, `false`.
+ */
 export function memoChecker<P>(prop: keyof P, prevProps: P, nextProps: P): boolean {
   const nextItem = nextProps[prop]
   const prevItem = prevProps[prop]
@@ -96,6 +121,43 @@ export function memoChecker<P>(prop: keyof P, prevProps: P, nextProps: P): boole
   return equals(nextItem, prevItem)
 }
 
+/**
+ * Memoizes a React functional component based on specific props.
+ *
+ * This function wraps a React functional component using `React.memo` with a custom comparison
+ * function. The comparison function checks if the specified properties (passed as `check`) 
+ * remain equal between renders. If all specified properties are equal, the component will not re-render.
+ *
+ * @template P - The type of the component's props.
+ * @param ComponentToMemoize - The React functional component to memoize.
+ * @param check - A single property key or an array of property keys to compare for memoization.
+ * @returns A memoized version of the input component (`React.NamedExoticComponent`).
+ *
+ * @example
+ * import React from 'react';
+ * import { memoBy } from './utils';
+ *
+ * const MyComponent: React.FC<{ name: string; age: number }> = ({ name, age }) => {
+ *   console.log('Rendering MyComponent...');
+ *   return (
+ *     <div>
+ *       {name}, {age}
+ *     </div>
+ *   );
+ * };
+ *
+ * // Memoize the component based on the `name` prop.
+ * const MemoizedByName = memoBy(MyComponent, 'name');
+ *
+ * // Memoize the component based on both `name` and `age` props.
+ * const MemoizedByNameAndAge = memoBy(MyComponent, ['name', 'age']);
+ *
+ * export { MemoizedByName, MemoizedByNameAndAge };
+ *
+ * // Usage in a parent component
+ * <MemoizedByName name="Alice" age={25} />;
+ * <MemoizedByNameAndAge name="Alice" age={25} />;
+ */
 export function memoBy<P extends object>(
   ComponentToMemoize: React.FunctionComponent<P>,
   check: keyof P | Array<keyof P>