From 3040849ad65b84808e36405553920008209092fc Mon Sep 17 00:00:00 2001 From: Andrew Haines Date: Fri, 22 Mar 2024 07:12:12 +0000 Subject: [PATCH] Just add the dependency... Signed-off-by: Andrew Haines --- packages/react/package.json | 5 ++- packages/react/src/cerbos-provider.tsx | 7 ++- packages/react/src/deep-equal.ts | 55 ----------------------- packages/react/src/use-cerbos-request.ts | 4 +- packages/react/src/use-deep-equal-memo.ts | 40 ----------------- pnpm-lock.yaml | 21 ++++++++- 6 files changed, 27 insertions(+), 105 deletions(-) delete mode 100644 packages/react/src/deep-equal.ts delete mode 100644 packages/react/src/use-deep-equal-memo.ts diff --git a/packages/react/package.json b/packages/react/package.json index 11413871..29bd0af4 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -46,10 +46,11 @@ "React" ], "peerDependencies": { - "react": ">=16.8.0" + "react": ">=16.13.0" }, "dependencies": { - "@cerbos/core": "^0.16.0" + "@cerbos/core": "^0.16.0", + "use-deep-compare-effect": "^1.8.1" }, "devDependencies": { "@types/react": "18.2.67", diff --git a/packages/react/src/cerbos-provider.tsx b/packages/react/src/cerbos-provider.tsx index 6deaef20..0e2cc4e6 100644 --- a/packages/react/src/cerbos-provider.tsx +++ b/packages/react/src/cerbos-provider.tsx @@ -6,8 +6,7 @@ import type { } from "@cerbos/core"; import type { ReactElement, ReactNode } from "react"; import { createContext, useMemo } from "react"; - -import { useDeepEqualMemo } from "./use-deep-equal-memo"; +import { useDeepCompareMemoize } from "use-deep-compare-effect"; export const CerbosContext = createContext( undefined, @@ -65,8 +64,8 @@ export function CerbosProvider({ principal, auxData, }: CerbosProviderProps): ReactElement { - const principalMemo = useDeepEqualMemo(principal); - const auxDataMemo = useDeepEqualMemo(auxData); + const principalMemo = useDeepCompareMemoize(principal); + const auxDataMemo = useDeepCompareMemoize(auxData); const value = useMemo( () => client.withPrincipal(principalMemo, auxDataMemo), diff --git a/packages/react/src/deep-equal.ts b/packages/react/src/deep-equal.ts deleted file mode 100644 index 4fd426e5..00000000 --- a/packages/react/src/deep-equal.ts +++ /dev/null @@ -1,55 +0,0 @@ -export function deepEqual(a: unknown, b: unknown): boolean { - if (a === b) { - return true; - } - - if ( - typeof a !== "object" || - a === null || - typeof b !== "object" || - b === null - ) { - // one of them is a primitive or null, so if they weren't strictly equal above, then they aren't equal - return false; - } - - // they are both non-null objects (arrays are objects too) - - if (Array.isArray(a)) { - if (!Array.isArray(b)) { - return false; - } - - // they are both arrays - - if (a.length !== b.length) { - return false; - } - - for (let i = 0; i < a.length; i++) { - if (!deepEqual(a[i], b[i])) { - return false; - } - } - - return true; - } - - // they are both objects - ignore more complex types like Map, Symbol, Date etc... - - const keys = Object.keys(a); - if (keys.length !== Object.keys(b).length) { - return false; - } - - for (const key of keys) { - const valueA = (a as Record)[key]; - const valueB = (b as Record)[key]; - - if (!deepEqual(valueA, valueB)) { - return false; - } - } - - return true; -} diff --git a/packages/react/src/use-cerbos-request.ts b/packages/react/src/use-cerbos-request.ts index 3820e5a5..bb259441 100644 --- a/packages/react/src/use-cerbos-request.ts +++ b/packages/react/src/use-cerbos-request.ts @@ -8,9 +8,9 @@ import type { RequestOptions, } from "@cerbos/core"; import { useCallback, useEffect, useState } from "react"; +import { useDeepCompareMemoize } from "use-deep-compare-effect"; import { useCerbos } from "./use-cerbos"; -import { useDeepEqualMemo } from "./use-deep-equal-memo"; /** * @public @@ -35,7 +35,7 @@ function useCerbosRequest( const [error, setError] = useState(); const client = useCerbos(); - const paramsMemo = useDeepEqualMemo(params); + const paramsMemo = useDeepCompareMemoize(params); const load = useCallback<() => Promise>>( // @ts-expect-error -- https://github.com/microsoft/TypeScript/issues/30581 diff --git a/packages/react/src/use-deep-equal-memo.ts b/packages/react/src/use-deep-equal-memo.ts deleted file mode 100644 index e0cd4299..00000000 --- a/packages/react/src/use-deep-equal-memo.ts +++ /dev/null @@ -1,40 +0,0 @@ -// Based on https://github.com/kentcdodds/use-deep-compare-effect/blob/ec3c204ae3a29be7db8e30fc7ca29dd38d1c9441/src/index.ts#L28-L43 - -/* -The MIT License (MIT) -Copyright (c) 2020 Kent C. Dodds - -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. -*/ - -import { useMemo, useRef } from "react"; - -import { deepEqual } from "./deep-equal"; - -export function useDeepEqualMemo(value: T): T { - const ref = useRef(value); - const signalRef = useRef(0); - - if (!deepEqual(value, ref.current)) { - ref.current = value; - signalRef.current++; - } - - return useMemo(() => ref.current, [signalRef.current]); // eslint-disable-line react-hooks/exhaustive-deps -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a98237a..d1b24a01 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -136,6 +136,9 @@ importers: react: specifier: '>=16.8.0' version: 18.2.0 + use-deep-compare-effect: + specifier: ^1.8.1 + version: 1.8.1(react@18.2.0) devDependencies: '@types/react': specifier: 18.2.67 @@ -285,7 +288,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 - dev: true /@babel/template@7.23.9: resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} @@ -1750,6 +1752,11 @@ packages: resolution: {integrity: sha512-PwuBojGMQAYbWkMXOY9Pd/NWCDNHVH12pnS7WHqZkTSeMESe4hwnKKRp0yR87g37113x4JPbo/oIvXY+s/f56Q==} dev: true + /dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + dev: false + /detect-file@1.0.0: resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==} engines: {node: '>=0.10.0'} @@ -3183,7 +3190,6 @@ packages: /regenerator-runtime@0.14.1: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} - dev: true /regexp.prototype.flags@1.5.1: resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==} @@ -3689,6 +3695,17 @@ packages: punycode: 2.3.1 dev: true + /use-deep-compare-effect@1.8.1(react@18.2.0): + resolution: {integrity: sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==} + engines: {node: '>=10', npm: '>=6'} + peerDependencies: + react: '>=16.13' + dependencies: + '@babel/runtime': 7.23.8 + dequal: 2.0.3 + react: 18.2.0 + dev: false + /uuid@9.0.1: resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} hasBin: true