Merge pull request #1 from reactjs/polyfill-get-snapshot

Polyfill for getSnapshotBeforeUpdate

Author: bvaughn

README.md

@@ -2,9 +2,9 @@
 
 ## What is this project?
 
-React version 17 will deprecate several of the class component API lifecycles: `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (See [React RFC 6](https://github.com/reactjs/rfcs/pull/6) for more information about this decision.)
+React version 17 will deprecate several of the class component API lifecycles: `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Read the [Update on Async rendering blog post](https://deploy-preview-596--reactjs.netlify.com/blog/2018/03/15/update-on-async-rendering.html) to learn more about why.) A couple of new lifecycles are also being added to better support [async rendering mode](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html).
 
-This would typically require any third party libraries dependent on those lifecycles to release a new major version in order to adhere to semver. However, the `react-lifecycles-compat` polyfill offers a way to remain compatible with older versions of React (0.14.9+). 🎉😎
+Typically, this type of change would require third party libraries to release a new major version in order to adhere to semver. However, the `react-lifecycles-compat` polyfill offers a way to use the new lifecycles with older versions of React as well (0.14.9+) so no breaking release is required. This enables shared libraries to support both older and newer versions of React simultaneously.
 
 ## How can I use the polyfill
 
@@ -17,58 +17,31 @@ yarn add react-lifecycles-compat
 npm install react-lifecycles-compat --save
 ```
 
-Next, update your component to use the new static lifecycle, `getDerivedStateFromProps`. For example:
-```js
-// Before
-class ExampleComponent extends React.Component {
-  state = {
-    derivedData: computeDerivedState(this.props)
-  };
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.someValue !== nextProps.someValue) {
-      this.setState({
-        derivedData: computeDerivedState(nextProps)
-      });
-    }
-  }
-}
-
-// After
-class ExampleComponent extends React.Component {
-  // Initialize state in constructor,
-  // Or with a property initializer.
-  state = {};
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.someMirroredValue !== nextProps.someValue) {
-      return {
-        derivedData: computeDerivedState(nextProps),
-        someMirroredValue: nextProps.someValue
-      };
-    }
-
-    // Return null to indicate no change to state.
-    return null;
-  }
-}
-```
+Next, update your component and replace any of the deprecated lifecycles with new ones introduced with React 16.3. (Refer to the React docs for [examples of how to use the new lifecycles](https://deploy-preview-596--reactjs.netlify.com/blog/2018/03/15/update-on-async-rendering.html).)
 
-Lastly, use the polyfill to make your component backwards compatible with older versions of React:
+Lastly, use the polyfill to make the new lifecycles work with older versions of React:
 ```js
 import React from 'react';
 import polyfill from 'react-lifecycles-compat';
 
 class ExampleComponent extends React.Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    // ...
-  }
-
   // ...
 }
 
-// Polyfill your component to work with older versions of React:
+// Polyfill your component so the new lifecycles will work with older versions of React:
 polyfill(ExampleComponent);
 
 export default ExampleComponent;
-```
+```
+
+## Which lifecycles are supported?
+
+Currently, this polyfill supports [static `getDerivedStateFromProps`](https://deploy-preview-587--reactjs.netlify.com/docs/react-component.html#static-getderivedstatefromprops) and [`getSnapshotBeforeUpdate`](https://deploy-preview-587--reactjs.netlify.com/docs/react-component.html#getsnapshotbeforeupdate)- both introduced in version 16.3.
+
+## Validation
+
+Note that in order for the polyfill to work, none of the following lifecycles can be defined by your component: `componentWillMount`, `componentWillReceiveProps`, or `componentWillUpdate`.
+
+Note also that if your component contains `getSnapshotBeforeUpdate`, `componentDidUpdate` must be defined as well.
+
+An error will be thrown if any of the above conditions are not met.

index.js

@@ -26,10 +26,27 @@ function componentWillReceiveProps(nextProps) {
   }
 }
 
+function componentWillUpdate(nextProps, nextState) {
+  try {
+    var prevProps = this.props;
+    var prevState = this.state;
+    this.props = nextProps;
+    this.state = nextState;
+    this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
+      prevProps,
+      prevState
+    );
+  } finally {
+    this.props = prevProps;
+    this.state = prevState;
+  }
+}
+
 // React may warn about cWM/cWRP/cWU methods being deprecated.
 // Add a flag to suppress these warnings for this special case.
 componentWillMount.__suppressDeprecationWarning = true;
 componentWillReceiveProps.__suppressDeprecationWarning = true;
+componentWillUpdate.__suppressDeprecationWarning = true;
 
 module.exports = function polyfill(Component) {
   if (!Component.prototype || !Component.prototype.isReactComponent) {
@@ -38,18 +55,49 @@ module.exports = function polyfill(Component) {
 
   if (typeof Component.getDerivedStateFromProps === 'function') {
     if (typeof Component.prototype.componentWillMount === 'function') {
-      throw new Error('Cannot polyfill if componentWillMount already exists');
+      throw new Error(
+        'Cannot polyfill getDerivedStateFromProps() for components that define componentWillMount()'
+      );
     } else if (
       typeof Component.prototype.componentWillReceiveProps === 'function'
     ) {
       throw new Error(
-        'Cannot polyfill if componentWillReceiveProps already exists'
+        'Cannot polyfill getDerivedStateFromProps() for components that define componentWillReceiveProps()'
       );
     }
 
     Component.prototype.componentWillMount = componentWillMount;
     Component.prototype.componentWillReceiveProps = componentWillReceiveProps;
   }
 
+  if (typeof Component.prototype.getSnapshotBeforeUpdate === 'function') {
+    if (typeof Component.prototype.componentWillUpdate === 'function') {
+      throw new Error(
+        'Cannot polyfill getSnapshotBeforeUpdate() for components that define componentWillUpdate()'
+      );
+    }
+    if (typeof Component.prototype.componentDidUpdate !== 'function') {
+      throw new Error(
+        'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
+      );
+    }
+
+    Component.prototype.componentWillUpdate = componentWillUpdate;
+
+    var componentDidUpdate = Component.prototype.componentDidUpdate;
+
+    Component.prototype.componentDidUpdate = function componentDidUpdatePolyfill(
+      prevProps,
+      prevState
+    ) {
+      componentDidUpdate.call(
+        this,
+        prevProps,
+        prevState,
+        this.__reactInternalSnapshot
+      );
+    };
+  }
+
   return Component;
 };