Add opaqueOverride option to prop object handling

Krisztiaan · Krisztiaan · commit bcc1e1aea474 · 2025-08-10T14:55:26.000+02:00
diff --git a/src/calculateDeepEqualDiffs.js b/src/calculateDeepEqualDiffs.js
@@ -42,7 +42,19 @@ function isGetter(obj, prop) {
 
 export const dependenciesMap = new WeakMap();
 
-function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {detailed}) {
+function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {detailed, opaqueOverride}) {
+  // Check if either value should be treated as opaque
+  if (opaqueOverride) {
+    const aIsOpaque = opaqueOverride(a);
+    const bIsOpaque = opaqueOverride(b);
+    if (aIsOpaque || bIsOpaque) {
+      // If either is opaque, only compare by reference
+      return a === b ? 
+        trackDiff(a, b, diffsAccumulator, pathString, diffTypes.same) :
+        trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);
+    }
+  }
+
   if (a === b) {
     if (detailed) {
       trackDiff(a, b, diffsAccumulator, pathString, diffTypes.same);
@@ -63,7 +75,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
     const arrayItemDiffs = [];
     let numberOfDeepEqualsItems = 0;
     for (let i = arrayLength; i--; i > 0) {
-      const diffEquals = accumulateDeepEqualDiffs(a[i], b[i], arrayItemDiffs, `${pathString}[${i}]`, {detailed});
+      const diffEquals = accumulateDeepEqualDiffs(a[i], b[i], arrayItemDiffs, `${pathString}[${i}]`, {detailed, opaqueOverride});
       if (diffEquals) {
         numberOfDeepEqualsItems++;
       }
@@ -116,7 +128,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
     }
 
     const reactElementPropsAreDeepEqual =
-      accumulateDeepEqualDiffs(a.props, b.props, [], `${pathString}.props`, {detailed});
+      accumulateDeepEqualDiffs(a.props, b.props, [], `${pathString}.props`, {detailed, opaqueOverride});
 
     return reactElementPropsAreDeepEqual ?
       trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement) :
@@ -133,7 +145,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
 
     if (aDependenciesObj && bDependenciesObj) {
       const dependenciesAreDeepEqual =
-        accumulateDeepEqualDiffs(aDependenciesObj.deps, bDependenciesObj.deps, diffsAccumulator, `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`, {detailed});
+        accumulateDeepEqualDiffs(aDependenciesObj.deps, bDependenciesObj.deps, diffsAccumulator, `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`, {detailed, opaqueOverride});
 
       return dependenciesAreDeepEqual ?
         trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function) :
@@ -144,6 +156,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
   }
 
   if (typeof a === 'object' && typeof b === 'object' && Object.getPrototypeOf(a) === Object.getPrototypeOf(b)) {
+    
     const aKeys = Object.getOwnPropertyNames(a);
     const bKeys = Object.getOwnPropertyNames(b);
     
@@ -183,7 +196,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
     let numberOfDeepEqualsObjectValues = 0;
     for (let i = keysLength; i--; i > 0) {
       const key = relevantKeys[i];
-      const deepEquals = accumulateDeepEqualDiffs(a[key], b[key], objectValuesDiffs, `${pathString}.${key}`, {detailed});
+      const deepEquals = accumulateDeepEqualDiffs(a[key], b[key], objectValuesDiffs, `${pathString}.${key}`, {detailed, opaqueOverride});
       if (deepEquals) {
         numberOfDeepEqualsObjectValues++;
       }
@@ -203,10 +216,10 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {deta
   return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different);
 }
 
-export default function calculateDeepEqualDiffs(a, b, initialPathString, {detailed = false} = {}) {
+export default function calculateDeepEqualDiffs(a, b, initialPathString, {detailed = false, opaqueOverride} = {}) {
   try {
     const diffs = [];
-    accumulateDeepEqualDiffs(a, b, diffs, initialPathString, {detailed});
+    accumulateDeepEqualDiffs(a, b, diffs, initialPathString, {detailed, opaqueOverride});
     return diffs;
   } catch (error) {
     if ((error.message && error.message.match(/stack|recursion/i)) || (error.number === -2146828260)) {
diff --git a/src/defaultNotifier.js b/src/defaultNotifier.js
@@ -8,6 +8,44 @@ const moreInfoHooksUrl = 'http://bit.ly/wdyr3';
 
 let inHotReload = false;
 
+// Wrap opaque values to prevent console from accessing their properties
+function safeValue(value) {
+  if (!wdyrStore.options?.opaqueOverride) {
+    return value;
+  }
+  
+  const opaqueOverride = wdyrStore.options.opaqueOverride;
+  
+  // Check if the value itself is opaque
+  if (opaqueOverride(value)) {
+    // Return a safe representation that won't trigger property access
+    return `[Opaque Reference ${typeof value}]`;
+  }
+  
+  // For objects and arrays, recursively check for opaque values
+  if (value && typeof value === 'object') {
+    // Don't modify the original, and be careful with property access
+    try {
+      if (Array.isArray(value)) {
+        return value.map(item => safeValue(item));
+      }
+      
+      const safeObj = {};
+      for (const key in value) {
+        if (Object.prototype.hasOwnProperty.call(value, key)) {
+          safeObj[key] = safeValue(value[key]);
+        }
+      }
+      return safeObj;
+    } catch {
+      // If we can't safely traverse, return a placeholder
+      return '[Complex object with potential opaque values]';
+    }
+  }
+  
+  return value;
+}
+
 function shouldLog(reason, Component) {
   if (inHotReload) {
     return false;
@@ -51,7 +89,7 @@ function logDifference({Component, displayName, hookName, prefixMessage, diffObj
       wdyrStore.options.consoleLog(
         `${diffTypesDescriptions[diffType]}. (more info at ${hookName ? moreInfoHooksUrl : moreInfoUrl})`,
       );
-      wdyrStore.options.consoleLog({[`prev ${pathString}`]: prevValue}, '!==', {[`next ${pathString}`]: nextValue});
+      wdyrStore.options.consoleLog({[`prev ${pathString}`]: safeValue(prevValue)}, '!==', {[`next ${pathString}`]: safeValue(nextValue)});
       if (diffType === diffTypes.deepEquals) {
         wdyrStore.options.consoleLog({'For detailed diff, right click the following fn, save as global, and run: ': diffFn});
       }
@@ -67,7 +105,7 @@ function logDifference({Component, displayName, hookName, prefixMessage, diffObj
         'This usually means this component called setState when no changes in its state actually occurred.',
       `More info at ${moreInfoUrl}`
     );
-    wdyrStore.options.consoleLog(`prev ${diffObjType}:`, values.prev, ' !== ', values.next, `:next ${diffObjType}`);
+    wdyrStore.options.consoleLog(`prev ${diffObjType}:`, safeValue(values.prev), ' !== ', safeValue(values.next), `:next ${diffObjType}`);
   }
 }
 
diff --git a/src/findObjectsDifferences.js b/src/findObjectsDifferences.js
@@ -3,13 +3,28 @@ import calculateDeepEqualDiffs from './calculateDeepEqualDiffs';
 
 const emptyObject = {};
 
-export default function findObjectsDifferences(userPrevObj, userNextObj, {shallow = true} = {}) {
+export default function findObjectsDifferences(userPrevObj, userNextObj, {shallow = true, opaqueOverride} = {}) {
   if (userPrevObj === userNextObj) {
     return false;
   }
 
+  // Check if either object should be treated as opaque
+  if (opaqueOverride) {
+    const prevIsOpaque = opaqueOverride(userPrevObj);
+    const nextIsOpaque = opaqueOverride(userNextObj);
+    if (prevIsOpaque || nextIsOpaque) {
+      // If either is opaque, they're different unless they're the same reference (which we already checked)
+      return [{
+        pathString: '',
+        diffType: 'different',
+        prevValue: userPrevObj,
+        nextValue: userNextObj,
+      }];
+    }
+  }
+
   if (!shallow) {
-    return calculateDeepEqualDiffs(userPrevObj, userNextObj);
+    return calculateDeepEqualDiffs(userPrevObj, userNextObj, '', {opaqueOverride});
   }
 
   const prevObj = userPrevObj || emptyObject;
@@ -18,7 +33,7 @@ export default function findObjectsDifferences(userPrevObj, userNextObj, {shallo
   const keysOfBothObjects = Object.keys({...prevObj, ...nextObj});
 
   return reduce(keysOfBothObjects, (result, key) => {
-    const deepEqualDiffs = calculateDeepEqualDiffs(prevObj[key], nextObj[key], key);
+    const deepEqualDiffs = calculateDeepEqualDiffs(prevObj[key], nextObj[key], key, {opaqueOverride});
     if (deepEqualDiffs) {
       result = [
         ...result,
diff --git a/src/getUpdateInfo.js b/src/getUpdateInfo.js
@@ -46,7 +46,10 @@ function getOwnerDifferences(prevOwner, nextOwner) {
         // Both exist, compare them
         let differences;
         try {
-          differences = findObjectsDifferences(prev.result, next.result, {shallow: false});
+          differences = findObjectsDifferences(prev.result, next.result, {
+            shallow: false,
+            opaqueOverride: wdyrStore.options?.opaqueOverride
+          });
         } catch {
           differences = {error: 'diff_failed'};
         }
@@ -58,8 +61,12 @@ function getOwnerDifferences(prevOwner, nextOwner) {
     }
 
     return {
-      propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props),
-      stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state),
+      propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props, {
+        opaqueOverride: wdyrStore.options?.opaqueOverride
+      }),
+      stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state, {
+        opaqueOverride: wdyrStore.options?.opaqueOverride
+      }),
       hookDifferences: hookDifferences.length > 0 ? hookDifferences : false,
     };
   }
@@ -78,9 +85,16 @@ function getOwnerDifferences(prevOwner, nextOwner) {
 
 function getUpdateReason(prevOwner, prevProps, prevState, prevHookResult, nextOwner, nextProps, nextState, nextHookResult) {
   return {
-    propsDifferences: findObjectsDifferences(prevProps, nextProps),
-    stateDifferences: findObjectsDifferences(prevState, nextState),
-    hookDifferences: findObjectsDifferences(prevHookResult, nextHookResult, {shallow: false}),
+    propsDifferences: findObjectsDifferences(prevProps, nextProps, {
+      opaqueOverride: wdyrStore.options?.opaqueOverride
+    }),
+    stateDifferences: findObjectsDifferences(prevState, nextState, {
+      opaqueOverride: wdyrStore.options?.opaqueOverride
+    }),
+    hookDifferences: findObjectsDifferences(prevHookResult, nextHookResult, {
+      shallow: false,
+      opaqueOverride: wdyrStore.options?.opaqueOverride
+    }),
     ownerDifferences: getOwnerDifferences(prevOwner, nextOwner),
   };
 }
diff --git a/src/normalizeOptions.js b/src/normalizeOptions.js
@@ -38,6 +38,7 @@ export default function normalizeOptions(userOptions = {}) {
     textBackgroundColor: 'white',
     trackExtraHooks: [],
     trackAllPureComponents: false,
+    opaqueOverride: null,
     ...userOptions,
   };
 }
diff --git a/src/printDiff.js b/src/printDiff.js
@@ -1,10 +1,14 @@
 import {sortBy, groupBy} from 'lodash';
 
+import wdyrStore from './wdyrStore';
 import calculateDeepEqualDiffs from './calculateDeepEqualDiffs';
 import {diffTypesDescriptions} from './consts';
 
 export default function printDiff(value1, value2, {pathString, consoleLog}) {
-  const diffs = calculateDeepEqualDiffs(value1, value2, pathString, {detailed: true});
+  const diffs = calculateDeepEqualDiffs(value1, value2, pathString, {
+    detailed: true,
+    opaqueOverride: wdyrStore.options?.opaqueOverride
+  });
 
   const keysLength = Math.max(...diffs.map(diff => diff.pathString.length)) + 2;
 
diff --git a/tests/opaqueOverride.test.js b/tests/opaqueOverride.test.js
diff --git a/types.d.ts b/types.d.ts

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ export default function normalizeOptions(userOptions = {}) {`
`38`	`38`	`textBackgroundColor: 'white',`
`39`	`39`	`trackExtraHooks: [],`
`40`	`40`	`trackAllPureComponents: false,`
	`41`	`+ opaqueOverride: null,`
`41`	`42`	`...userOptions,`
`42`	`43`	`};`
`43`	`44`	`}`