Avoid strict mode deprecation errors (#25)

* Switch to new Context API

* Avoiding use of deprecated lifecycle methods

* Remove old getChildContext from provider

* Convert BackboneProvider to function component

* Dereference off of require call directly

* Fix silly mistake with class -> function refactor

* Avoid warnings around forceUpdate before mounting

Author: jetpacmonkey

lib/backbone-provider.js

@@ -1,25 +1,15 @@
-const { Component, Children } = require('react');
+const { Children, createElement } = require('react');
 const PropTypes = require('prop-types');
+const { Provider } = require('./context');
 
-class BackboneProvider extends Component {
-  getChildContext() {
-    return {
-      models: this.props.models,
-    };
-  }
-
-  render() {
-    return Children.only(this.props.children);
-  }
+function BackboneProvider(props) {
+  return createElement(Provider, { value: props.models }, Children.only(props.children));
 }
 
 BackboneProvider.propTypes = {
   models: PropTypes.object,
   children: PropTypes.element.isRequired,
 };
-BackboneProvider.childContextTypes = {
-  models: PropTypes.object,
-};
 BackboneProvider.displayName = 'BackboneProvider';
 
 module.exports = BackboneProvider;

lib/connect-backbone-to-react.js

@@ -2,6 +2,7 @@ const hoistStatics = require('hoist-non-react-statics');
 const { Component, createElement } = require('react');
 const PropTypes = require('prop-types');
 const debounceFn = require('lodash.debounce');
+const BackboneToReactContext = require('./context');
 
 function getDisplayName(name) {
   return `connectBackboneToReact(${name})`;
@@ -70,9 +71,7 @@ module.exports = function connectBackboneToReact(
       constructor(props, context) {
         super(props, context);
 
-        this.setModels(props, context);
-
-        this.state = mapModelsToProps(this.models, this.props);
+        this.componentIsMounted = false;
 
         this.createNewProps = this.createNewProps.bind(this);
         this.setWrappedInstance = this.setWrappedInstance.bind(this);
@@ -85,20 +84,24 @@ module.exports = function connectBackboneToReact(
         this.createEventListeners();
       }
 
-      setModels(props, context) {
-        const models = Object.assign({}, context.models, props.models);
+      getModels() {
+        const models = Object.assign({}, this.context, this.props.models);
         validateModelTypes(models);
-        this.models = models;
+        return models;
       }
 
       createEventListeners() {
-        Object.keys(this.models).forEach(mapKey => {
-          const model = this.models[mapKey];
+        const models = this.getModels();
+        Object.keys(models).forEach(mapKey => {
+          const model = models[mapKey];
           // Do not attempt to create event listeners on an undefined model.
           if (!model) return;
 
           this.createEventListener(mapKey, model);
         });
+
+        // Store a reference to the models with event listeners for the next update.
+        this.prevModels = models;
       }
 
       createEventListener(modelName, model) {
@@ -118,11 +121,11 @@ module.exports = function connectBackboneToReact(
         // The only case where this flag is encountered is when this component
         // is unmounted within an event handler but the 'all' event is still triggered.
         // It is covered in a test case.
-        if (this.hasBeenUnmounted) {
+        // Also bails if we haven't yet mounted, to avoid warnings in strict mode.
+        if (!this.componentIsMounted) {
           return;
         }
-
-        this.setState(mapModelsToProps(this.models, this.props));
+        this.forceUpdate();
       }
 
       setWrappedInstance(ref) {
@@ -137,58 +140,57 @@ module.exports = function connectBackboneToReact(
         return this.wrappedInstance;
       }
 
-      UNSAFE_componentWillReceiveProps(nextProps, nextContext) { // eslint-disable-line camelcase
-        this.setModels(nextProps, nextContext);
-        this.createNewProps();
+      componentDidMount() {
+        this.componentIsMounted = true;
+      }
 
-        // Bind event listeners for each model that changed.
-        Object.keys(this.models).forEach(mapKey => {
-          const model = this.models[mapKey];
+      componentDidUpdate() {
+        // add and remove listeners
+        const models = this.getModels();
+        const prevModels = this.prevModels;
 
-          // Retrieve old versions of the model from props and context for comparison.
-          const propsModel = this.props.models ? this.props.models[mapKey] : undefined;
-          const contextModel = this.context.models ? this.context.models[mapKey] : undefined;
+        // Bind event listeners for each model that changed.
+        Object.keys(Object.assign({}, models, prevModels)).forEach(mapKey => {
+          const model = models[mapKey];
+          const prevModel = prevModels[mapKey];
 
           // Do not attempt to create event listeners on an undefined model.
           if (!model) {
             // Instead, if it was previously defined, remove the old listeners.
-            if (propsModel) {
-              this.removeEventListener(mapKey, propsModel);
-              // If a model with the matching mapKey exists in both props and context,
-              // we only remove listeners from the one in props. We do this because
-              // only the one in props is actually used in this.models, per the
-              // Object.assign in setModel.
-            } else if (contextModel) {
-              this.removeEventListener(mapKey, contextModel);
+            if (prevModel) {
+              this.removeEventListener(mapKey, prevModel);
             }
             return;
           }
 
-          if ((propsModel === model) || (contextModel === model)) return; // Did not change.
+          if (prevModel === model) return; // Did not change.
 
           this.createEventListener(mapKey, model);
         });
+
+        // Store a reference to the models with event listeners for the next update.
+        this.prevModels = models;
       }
 
       componentWillUnmount() {
         if (debounce) {
           this.createNewProps.cancel();
         }
 
-        Object.keys(this.models).forEach(mapKey => {
-          const model = this.models[mapKey];
+        Object.keys(this.prevModels).forEach(mapKey => {
+          const model = this.prevModels[mapKey];
           // Do not attempt to remove event listeners on an undefined model.
           if (!model) return;
           this.removeEventListener(mapKey, model);
         });
 
-        this.hasBeenUnmounted = true;
+        this.componentIsMounted = false;
       }
 
       render() {
         const wrappedProps = Object.assign(
           {},
-          this.state,
+          mapModelsToProps(this.getModels(), this.props),
           this.props
         );
 
@@ -210,7 +212,7 @@ module.exports = function connectBackboneToReact(
     ConnectBackboneToReact.WrappedComponent = WrappedComponent;
     ConnectBackboneToReact.displayName = displayName;
     ConnectBackboneToReact.propTypes = propTypes;
-    ConnectBackboneToReact.contextTypes = propTypes;
+    ConnectBackboneToReact.contextType = BackboneToReactContext;
 
     return hoistStatics(ConnectBackboneToReact, WrappedComponent);
   };

lib/context.js

@@ -0,0 +1,3 @@
+const { createContext } = require('react');
+
+module.exports = createContext();

package.json

@@ -30,7 +30,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0-0"
+    "react": "^16.6.0-0"
   },
   "devDependencies": {
     "babel-cli": "^6.22.2",