v4.1.0-alpha.0

dist/no-classes-transpile/umd/whyDidYouRender.js

@@ -1,8 +1,8 @@
 /**
- * @welldone-software/why-did-you-render 4.0.8
+ * @welldone-software/why-did-you-render 4.1.0-alpha.0
  * MIT Licensed
  * Generated by Vitali Zaidman <vzaidman@gmail.com> (https://github.com/vzaidman)
- * Generated at 2020-04-15
+ * Generated at 2020-04-18
  */
 
 (function (global, factory) {
@@ -1406,7 +1406,8 @@
         nextState = updateInfo.nextState,
         nextHook = updateInfo.nextHook,
         reason = updateInfo.reason,
-        options = updateInfo.options;
+        options = updateInfo.options,
+        ownerDataMap = updateInfo.ownerDataMap;
 
     if (!shouldLog(reason, Component, options)) {
       return;
@@ -1462,6 +1463,66 @@
       });
     }
 
+    if (reason.propsDifferences && reason.ownerDifferences) {
+      var prevOwnerData = ownerDataMap.get(prevProps);
+      var nextOwnerData = ownerDataMap.get(nextProps);
+      options.consoleGroup("Rendered by ".concat(nextOwnerData.displayName));
+      var _prefixMessage = 'Re-rendered because';
+
+      if (reason.ownerDifferences.propsDifferences) {
+        logDifference({
+          Component: nextOwnerData.Component,
+          displayName: nextOwnerData.displayName,
+          prefixMessage: _prefixMessage,
+          diffObjType: 'props',
+          differences: reason.ownerDifferences.propsDifferences,
+          values: {
+            prev: prevOwnerData.props,
+            next: nextOwnerData.props
+          },
+          options: options
+        });
+        _prefixMessage = 'And because';
+      }
+
+      if (reason.ownerDifferences.stateDifferences) {
+        logDifference({
+          Component: nextOwnerData.Component,
+          displayName: nextOwnerData.displayName,
+          prefixMessage: _prefixMessage,
+          diffObjType: 'state',
+          differences: reason.ownerDifferences.stateDifferences,
+          values: {
+            prev: prevOwnerData.state,
+            next: nextOwnerData.state
+          },
+          options: options
+        });
+      }
+
+      if (reason.ownerDifferences.hookDifferences) {
+        reason.ownerDifferences.hookDifferences.forEach(function (_ref3, i) {
+          var hookName = _ref3.hookName,
+              differences = _ref3.differences;
+          return logDifference({
+            Component: nextOwnerData.Component,
+            displayName: nextOwnerData.displayName,
+            prefixMessage: _prefixMessage,
+            diffObjType: 'hook',
+            differences: differences,
+            values: {
+              prev: prevOwnerData.hooks[i].result,
+              next: nextOwnerData.hooks[i].result
+            },
+            hookName: hookName,
+            options: options
+          });
+        });
+      }
+
+      options.consoleGroupEnd();
+    }
+
     if (!reason.propsDifferences && !reason.stateDifferences && !reason.hookDifferences) {
       options.consoleLog(_defineProperty({}, displayName, Component), 'Re-rendered although props and state objects are the same.', 'This usually means there was a call to this.forceUpdate() inside the component.', "more info at ".concat(moreInfoUrl));
     }
@@ -1509,6 +1570,7 @@
       consoleGroup: consoleGroup,
       consoleGroupEnd: consoleGroupEnd,
       logOnDifferentValues: false,
+      logOwnerReasons: false,
       trackHooks: true,
       titleColor: '#058',
       diffNameColor: 'blue',
@@ -3766,27 +3828,44 @@
     }, []);
   }
 
-  function getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook) {
+  function getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook, ownerDataMap) {
+    var prevOwnerData = ownerDataMap.get(prevProps);
+    var nextOwnerData = ownerDataMap.get(nextProps);
     return {
       propsDifferences: findObjectsDifferences(prevProps, nextProps),
       stateDifferences: findObjectsDifferences(prevState, nextState),
       hookDifferences: findObjectsDifferences(prevHook, nextHook, {
         shallow: false
-      })
+      }),
+      ownerDifferences: prevOwnerData != null && nextOwnerData != null ? {
+        propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props),
+        stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state),
+        hookDifferences: prevOwnerData.hooks.map(function (_ref, i) {
+          var hookName = _ref.hookName,
+              result = _ref.result;
+          return {
+            hookName: hookName,
+            differences: findObjectsDifferences(result, nextOwnerData.hooks[i].result, {
+              shallow: false
+            })
+          };
+        })
+      } : false
     };
   }
 
-  function getUpdateInfo(_ref) {
-    var Component = _ref.Component,
-        displayName = _ref.displayName,
-        hookName = _ref.hookName,
-        prevProps = _ref.prevProps,
-        prevState = _ref.prevState,
-        prevHook = _ref.prevHook,
-        nextProps = _ref.nextProps,
-        nextState = _ref.nextState,
-        nextHook = _ref.nextHook,
-        options = _ref.options;
+  function getUpdateInfo(_ref2) {
+    var Component = _ref2.Component,
+        displayName = _ref2.displayName,
+        hookName = _ref2.hookName,
+        prevProps = _ref2.prevProps,
+        prevState = _ref2.prevState,
+        prevHook = _ref2.prevHook,
+        nextProps = _ref2.nextProps,
+        nextState = _ref2.nextState,
+        nextHook = _ref2.nextHook,
+        options = _ref2.options,
+        ownerDataMap = _ref2.ownerDataMap;
     return {
       Component: Component,
       displayName: displayName,
@@ -3798,7 +3877,8 @@
       nextState: nextState,
       nextHook: nextHook,
       options: options,
-      reason: getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook)
+      ownerDataMap: ownerDataMap,
+      reason: getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook, ownerDataMap)
     };
   }
 
@@ -4206,7 +4286,7 @@
 
   var defaults_1 = defaults;
 
-  function patchClassComponent(ClassComponent, displayName, React, options) {
+  function patchClassComponent(ClassComponent, displayName, React, options, ownerDataMap) {
     class WDYRPatchedClassComponent extends ClassComponent {
       constructor(props, context) {
         var _this;
@@ -4245,7 +4325,8 @@
               prevState: this._WDYR.prevState,
               nextProps: this.props,
               nextState: this.state,
-              options: options
+              options: options,
+              ownerDataMap: ownerDataMap
             }));
           }
 
@@ -4274,7 +4355,7 @@
     };
   };
 
-  function patchFunctionalOrStrComponent(FunctionalOrStringComponent, isPure, displayName, React, options) {
+  function patchFunctionalOrStrComponent(FunctionalOrStringComponent, isPure, displayName, React, options, ownerDataMap) {
     var FunctionalComponent = typeof FunctionalOrStringComponent === 'string' ? getFunctionalComponentFromStringComponent(FunctionalOrStringComponent, React) : FunctionalOrStringComponent;
 
     function WDYRFunctionalComponent() {
@@ -4289,7 +4370,8 @@
           displayName: displayName,
           prevProps: prevProps,
           nextProps: nextProps,
-          options: options
+          options: options,
+          ownerDataMap: ownerDataMap
         });
         var shouldNotify = updateInfo.reason.propsDifferences && !(isPure && updateInfo.reason.propsDifferences.length === 0);
 
@@ -4313,13 +4395,13 @@
     return WDYRFunctionalComponent;
   }
 
-  function patchMemoComponent(MemoComponent, displayName, React, options) {
+  function patchMemoComponent(MemoComponent, displayName, React, options, ownerDataMap) {
     var InnerMemoComponent = MemoComponent.type;
     var isInnerMemoComponentAClassComponent = isReactClassComponent(InnerMemoComponent);
     var isInnerMemoComponentForwardRefs = isForwardRefComponent(InnerMemoComponent);
     var isInnerMemoComponentAnotherMemoComponent = isMemoComponent(InnerMemoComponent);
     var WrappedFunctionalComponent = isInnerMemoComponentForwardRefs ? InnerMemoComponent.render : InnerMemoComponent;
-    var PatchedInnerComponent = isInnerMemoComponentAClassComponent ? patchClassComponent(WrappedFunctionalComponent, displayName, React, options) : isInnerMemoComponentAnotherMemoComponent ? patchMemoComponent(WrappedFunctionalComponent, displayName, React, options) : patchFunctionalOrStrComponent(WrappedFunctionalComponent, true, displayName, React, options);
+    var PatchedInnerComponent = isInnerMemoComponentAClassComponent ? patchClassComponent(WrappedFunctionalComponent, displayName, React, options, ownerDataMap) : isInnerMemoComponentAnotherMemoComponent ? patchMemoComponent(WrappedFunctionalComponent, displayName, React, options, ownerDataMap) : patchFunctionalOrStrComponent(WrappedFunctionalComponent, true, displayName, React, options, ownerDataMap);
 
     try {
       PatchedInnerComponent.displayName = getDisplayName(WrappedFunctionalComponent);
@@ -4342,11 +4424,11 @@
     return WDYRMemoizedFunctionalComponent;
   }
 
-  function patchForwardRefComponent(ForwardRefComponent, displayName, React, options) {
+  function patchForwardRefComponent(ForwardRefComponent, displayName, React, options, ownerDataMap) {
     var InnerForwardRefComponent = ForwardRefComponent.render;
     var isInnerComponentMemoized = isMemoComponent(InnerForwardRefComponent);
     var WrappedFunctionalComponent = isInnerComponentMemoized ? InnerForwardRefComponent.type : InnerForwardRefComponent;
-    var WDYRWrappedByReactForwardRefFunctionalComponent = patchFunctionalOrStrComponent(WrappedFunctionalComponent, isInnerComponentMemoized, displayName, React, options);
+    var WDYRWrappedByReactForwardRefFunctionalComponent = patchFunctionalOrStrComponent(WrappedFunctionalComponent, isInnerComponentMemoized, displayName, React, options, ownerDataMap);
     WDYRWrappedByReactForwardRefFunctionalComponent.displayName = getDisplayName(WrappedFunctionalComponent);
     WDYRWrappedByReactForwardRefFunctionalComponent.ComponentForHooksTracking = WrappedFunctionalComponent;
 
@@ -4366,8 +4448,13 @@
 
   var initialHookValue = Symbol('initial-hook-value');
 
-  function trackHookChanges(hookName, _ref, hookResult, React, options) {
+  function trackHookChanges(hookName, _ref, hookResult, React, options, ownerDataMap, hooksRef) {
     var hookPath = _ref.path;
+    var nextHook = hookPath ? get_1(hookResult, hookPath) : hookResult;
+    hooksRef.current.push({
+      hookName: hookName,
+      result: nextHook
+    });
     var ComponentHookDispatchedFromInstance = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
     var prevHookResultRef = React.useRef(initialHookValue);
 
@@ -4398,8 +4485,9 @@
         displayName: displayName,
         hookName: hookName,
         prevHook: hookPath ? get_1(prevHookResult, hookPath) : prevHookResult,
-        nextHook: hookPath ? get_1(hookResult, hookPath) : hookResult,
-        options: options
+        nextHook: nextHook,
+        options: options,
+        ownerDataMap: ownerDataMap
       });
 
       if (notification.reason.hookDifferences) {
@@ -4410,28 +4498,28 @@
     return hookResult;
   }
 
-  function createPatchedComponent(componentsMap, Component, displayName, React, options) {
+  function createPatchedComponent(componentsMap, Component, displayName, React, options, ownerDataMap) {
     if (isMemoComponent(Component)) {
-      return patchMemoComponent(Component, displayName, React, options);
+      return patchMemoComponent(Component, displayName, React, options, ownerDataMap);
     }
 
     if (isForwardRefComponent(Component)) {
-      return patchForwardRefComponent(Component, displayName, React, options);
+      return patchForwardRefComponent(Component, displayName, React, options, ownerDataMap);
     }
 
     if (isReactClassComponent(Component)) {
-      return patchClassComponent(Component, displayName, React, options);
+      return patchClassComponent(Component, displayName, React, options, ownerDataMap);
     }
 
-    return patchFunctionalOrStrComponent(Component, false, displayName, React, options);
+    return patchFunctionalOrStrComponent(Component, false, displayName, React, options, ownerDataMap);
   }
 
-  function getPatchedComponent(componentsMap, Component, displayName, React, options) {
+  function getPatchedComponent(componentsMap, Component, displayName, React, options, ownerDataMap) {
     if (componentsMap.has(Component)) {
       return componentsMap.get(Component);
     }
 
-    var WDYRPatchedComponent = createPatchedComponent(componentsMap, Component, displayName, React, options);
+    var WDYRPatchedComponent = createPatchedComponent(componentsMap, Component, displayName, React, options, ownerDataMap);
     componentsMap.set(Component, WDYRPatchedComponent);
     return WDYRPatchedComponent;
   }
@@ -4451,6 +4539,21 @@
     var origCreateElement = React.createElement;
     var origCreateFactory = React.createFactory;
     var componentsMap = new WeakMap();
+    var ownerDataMap = new WeakMap();
+    var hooksRef = {
+      current: []
+    }; // Intercept assignments to ReactCurrentOwner.current and reset hooksRef
+
+    var currentOwner = null;
+    Object.defineProperty(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, 'current', {
+      get: function get() {
+        return currentOwner;
+      },
+      set: function set(value) {
+        currentOwner = value;
+        hooksRef.current = [];
+      }
+    });
 
     React.createElement = function (componentNameOrComponent) {
       var isShouldTrack = null;
@@ -4471,8 +4574,28 @@
 
         if (isShouldTrack) {
           displayName = componentNameOrComponent && componentNameOrComponent.whyDidYouRender && componentNameOrComponent.whyDidYouRender.customName || getDisplayName(componentNameOrComponent);
-          WDYRPatchedComponent = getPatchedComponent(componentsMap, componentNameOrComponent, displayName, React, options);
-          return origCreateElement.apply(React, [WDYRPatchedComponent].concat(rest));
+          WDYRPatchedComponent = getPatchedComponent(componentsMap, componentNameOrComponent, displayName, React, options, ownerDataMap);
+          var element = origCreateElement.apply(React, [WDYRPatchedComponent].concat(rest));
+
+          if (options.logOwnerReasons) {
+            var OwnerInstance = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
+
+            if (OwnerInstance != null) {
+              var Component = OwnerInstance.type.ComponentForHooksTracking || OwnerInstance.type;
+
+              var _displayName = getDisplayName(Component);
+
+              ownerDataMap.set(element.props, {
+                Component: Component,
+                displayName: _displayName,
+                props: OwnerInstance.pendingProps,
+                state: OwnerInstance.stateNode != null ? OwnerInstance.stateNode.state : null,
+                hooks: hooksRef.current
+              });
+            }
+          }
+
+          return element;
         }
       } catch (e) {
         options.consoleLog('whyDidYouRender error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
@@ -4526,7 +4649,7 @@
           }
 
           var hookResult = originalHook.call.apply(originalHook, [this].concat(args));
-          trackHookChanges(hookName, hookTrackingConfig, hookResult, React, options);
+          trackHookChanges(hookName, hookTrackingConfig, hookResult, React, options, ownerDataMap, hooksRef);
           return hookResult;
         };