initial mobx support

demo/src/App.js

@@ -26,6 +26,7 @@ import strict from './strict';
 import reactRedux from './reactRedux';
 import styledComponents from './styledComponents';
 import logOwnerReasons from './logOwnerReasons';
+import mobx from './mobx';
 
 const demosList = {
   bigList,
@@ -48,6 +49,7 @@ const demosList = {
   reactReduxHOC,
   styledComponents,
   logOwnerReasons,
+  mobx,
 };
 
 const defaultDemoName = 'bigList';

demo/src/mobx/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import _ from 'lodash';
+import { makeAutoObservable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+
+export default {
+  description: 'Mobx',
+  fn({ domElement, whyDidYouRender }) {
+    whyDidYouRender(React);
+
+    class TestStore {
+      state = { nested: { value: '0' } };
+
+      constructor() {
+        makeAutoObservable(this);
+      }
+
+      increaseCount() {
+        this.state.nested.value++;
+      }
+
+      deepEqualsCount() {
+        this.state = _.cloneDeep(this.state);
+      }
+    }
+
+    const SimpleComponent = ({ testStore }) => {
+      // eslint-disable-next-line no-console
+      console.log('re-render!');
+
+      return (
+        <div>
+          <span>count: {testStore.state.nested.value}</span>
+          <button onClick={() => testStore.increaseCount()}>
+            Increase
+          </button>
+          <button onClick={() => testStore.deepEqualsCount()}>
+            deep Equals
+          </button>
+        </div>
+      );
+    };
+
+    const ObservedSimpleComponent = observer(SimpleComponent);
+
+    SimpleComponent.whyDidYouRender = true;
+    ObservedSimpleComponent.whyDidYouRender = true;
+
+    const testStore = new TestStore();
+
+    const Main = () => (
+      <ObservedSimpleComponent testStore={testStore}/>
+    );
+
+    ReactDom.render(<Main/>, domElement);
+  },
+};

package.json

@@ -94,6 +94,8 @@
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "magic-string": "^0.25.7",
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
     "nollup": "^0.14.4",
     "react": "^17.0.1",
     "react-16": "npm:react@^16.14.0",
@@ -111,6 +113,7 @@
     "rollup-plugin-commonjs-alternate": "^0.7.2",
     "rollup-plugin-license": "^2.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "snapshot-diff": "^0.8.1",
     "start-server-and-test": "^1.11.6",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.3"

tests/getUpdateInfo.test.js

@@ -321,7 +321,7 @@ describe('getUpdateInfo', () => {
   });
 
   test('Props change by function', () => {
-  const input = {
+    const input = {
       Component: TestComponent,
       displayName: getDisplayName(TestComponent),
       prevProps: { a: () => {} },