➕ with-lifecycle: add onGetSnapshotBeforeUpdate and tweak onDidUpdate

Author: deepsweet

packages/with-lifecycle/readme.md

@@ -9,9 +9,9 @@ Inspired by [Reassemble](https://github.com/wikiwi/reassemble), in comparison wi
 * `onConstructor(props)`
 * `onWillMount(props)`
 * `onDidMount(props)`
-* `onReceiveProps(props, nextProps)`
-* `onWillUpdate(props, nextProps)`
-* `onDidUpdate(prevProps, props)`
+* `onReceiveProps(props, nextProps)` – `getDerivedStateFromProps` under the hood but without internal state
+* `onGetSnapshotBeforeUpdate(prevProps, props)` – any returned value will be passed as `snapshot` parameter to `onDidUpdate`
+* `onDidUpdate(prevProps, props, snapshot)`
 * `onWillUnmount(props)`
 * `onDidCatch(error, info)`
 

packages/with-lifecycle/src/index.js

@@ -35,9 +35,15 @@ export default (methodsArg) => (Target) => {
           }
         }
 
+        if (methods.onGetSnapshotBeforeUpdate) {
+          this.getSnapshotBeforeUpdate = (prevProps) => {
+            return methods.onGetSnapshotBeforeUpdate(prevProps, this.props)
+          }
+        }
+
         if (methods.onDidUpdate) {
-          this.componentDidUpdate = (prevProps) => {
-            methods.onDidUpdate(prevProps, this.props)
+          this.componentDidUpdate = (prevProps, _, snapshot) => {
+            methods.onDidUpdate(prevProps, this.props, snapshot)
           }
         }
 

packages/with-lifecycle/test/__snapshots__/index.js.snap

@@ -64,6 +64,40 @@ Array [
       "b": 2,
       "c": 3,
     },
+    undefined,
+  ],
+]
+`;
+
+exports[`withLifecycle as factory onGetSnapshotBeforeUpdate 1`] = `
+Array [
+  Array [
+    Object {
+      "a": 1,
+      "b": 2,
+    },
+    Object {
+      "a": 1,
+      "b": 2,
+      "c": 3,
+    },
+  ],
+]
+`;
+
+exports[`withLifecycle as factory onGetSnapshotBeforeUpdate 2`] = `
+Array [
+  Array [
+    Object {
+      "a": 1,
+      "b": 2,
+    },
+    Object {
+      "a": 1,
+      "b": 2,
+      "c": 3,
+    },
+    "snapshot",
   ],
 ]
 `;
@@ -191,6 +225,40 @@ Array [
       "b": 2,
       "c": 3,
     },
+    undefined,
+  ],
+]
+`;
+
+exports[`withLifecycle as object onGetSnapshotBeforeUpdate 1`] = `
+Array [
+  Array [
+    Object {
+      "a": 1,
+      "b": 2,
+    },
+    Object {
+      "a": 1,
+      "b": 2,
+      "c": 3,
+    },
+  ],
+]
+`;
+
+exports[`withLifecycle as object onGetSnapshotBeforeUpdate 2`] = `
+Array [
+  Array [
+    Object {
+      "a": 1,
+      "b": 2,
+    },
+    Object {
+      "a": 1,
+      "b": 2,
+      "c": 3,
+    },
+    "snapshot",
   ],
 ]
 `;

packages/with-lifecycle/test/index.js

@@ -61,6 +61,23 @@ describe('withLifecycle', () => {
       expect(mockOnReceiveProps.mock.calls).toMatchSnapshot()
     })
 
+    it('onGetSnapshotBeforeUpdate', () => {
+      const mockOnGetSnapshotBeforeUpdate = jest.fn(() => 'snapshot')
+      const mockOnDidUpdate = jest.fn()
+      const EnhancedTarget = withLifecycle({
+        onGetSnapshotBeforeUpdate: mockOnGetSnapshotBeforeUpdate,
+        onDidUpdate: mockOnDidUpdate
+      })(Target)
+      const wrapper = mount(
+        <EnhancedTarget a={1} b={2} />
+      )
+
+      wrapper.setProps({ c: 3 })
+
+      expect(mockOnGetSnapshotBeforeUpdate.mock.calls).toMatchSnapshot()
+      expect(mockOnDidUpdate.mock.calls).toMatchSnapshot()
+    })
+
     it('onDidUpdate', () => {
       const mockOnDidUpdate = jest.fn()
       const EnhancedTarget = withLifecycle({ onDidUpdate: mockOnDidUpdate })(Target)
@@ -186,6 +203,25 @@ describe('withLifecycle', () => {
       expect(mockOnReceiveProps.mock.calls).toMatchSnapshot()
     })
 
+    it('onGetSnapshotBeforeUpdate', () => {
+      const mockOnGetSnapshotBeforeUpdate = jest.fn(() => 'snapshot')
+      const mockOnDidUpdate = jest.fn()
+      const EnhancedTarget = withLifecycle(
+        () => ({
+          onGetSnapshotBeforeUpdate: mockOnGetSnapshotBeforeUpdate,
+          onDidUpdate: mockOnDidUpdate
+        })
+      )(Target)
+      const wrapper = mount(
+        <EnhancedTarget a={1} b={2} />
+      )
+
+      wrapper.setProps({ c: 3 })
+
+      expect(mockOnGetSnapshotBeforeUpdate.mock.calls).toMatchSnapshot()
+      expect(mockOnDidUpdate.mock.calls).toMatchSnapshot()
+    })
+
     it('onDidUpdate', () => {
       const mockOnDidUpdate = jest.fn()
       const EnhancedTarget = withLifecycle(