Fix: react strict mode compatibility

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "react"]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.browserslistrc

@@ -0,0 +1 @@
+defaults

.gitignore

@@ -35,3 +35,4 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+.DS_Store

README.md

@@ -6,12 +6,14 @@ This package provides an ActionCable context provider and consumer to allow you
 
 As this package uses React's new Context API, **React 16.3+ is required**.
 
+Run `npx browserslist` to see default option in `.browserslistrc` [compatibility](https://browserl.ist/?q=defaults). This is so you don't have to transpile this package for IE 11. 
+
 ## Install
 
 ```shell
-npm install --save react-actioncable-provider
+npm install --save @thrash-industries/react-actioncable-provider
 # OR
-yarn add react-actioncable-provider
+yarn add @thrash-industries/react-actioncable-provider
 ```
 
 ## Usage
@@ -31,9 +33,9 @@ The provider is used in an outer container and wraps all of the components that
 #### With `cable`
 
 ```jsx
-import ActionCable from 'actioncable';
+import ActionCable from "actioncable";
 
-const cable = ActionCable.createConsumer('ws://test.example.com/cable');
+const cable = ActionCable.createConsumer("ws://test.example.com/cable");
 
 <ActionCableProvider cable={cable}>...</ActionCableProvider>;
 ```
@@ -51,9 +53,9 @@ The consumer will wrap an individual component. It accepts several props:
 - `onReceived` [Function] A handler function that is called when the channel transmits a message to the client.
 
 ```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ActionCableConsumer } from 'react-actioncable-provider';
+import React from "react";
+import PropTypes from "prop-types";
+import { ActionCableConsumer } from "@thrash-industries/react-actioncable-provider";
 
 export default class Widget extends React.Component {
   static propTypes = {
@@ -66,7 +68,7 @@ export default class Widget extends React.Component {
     this.handleReceived = this.handleReceived.bind(this);
 
     this.state = {
-      message: ''
+      message: ""
     };
   }
 
@@ -91,6 +93,13 @@ export default class Widget extends React.Component {
 }
 ```
 
+## Publishing 
+
+- `yarn` Install dependencies
+- `yarn test` Run tests
+- `yarn build` Build for production
+- `npm version [patch|minor|major]` Increment version
+- `npm publish` Publish to npm
 ## Other Uses
 
 ### React Native

dist/index.js

@@ -0,0 +1,190 @@
+"use strict";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = require("react");
+
+var PropTypes = require("prop-types");
+
+var actioncable = require("actioncable");
+
+var createReactClass = require("create-react-class");
+
+var _React$createContext = React.createContext(),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var ActionCableProvider = createReactClass({
+  displayName: "ActionCableProvider",
+  UNSAFE_componentWillMount: function UNSAFE_componentWillMount() {
+    if (this.props.cable) {
+      this.cable = this.props.cable;
+    } else {
+      this.cable = actioncable.createConsumer(this.props.url);
+    }
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    if (!this.props.cable && this.cable) {
+      this.cable.disconnect();
+    }
+  },
+  UNSAFE_componentWillReceiveProps: function UNSAFE_componentWillReceiveProps(nextProps) {
+    // Props not changed
+    if (this.props.cable === nextProps.cable && this.props.url === nextProps.url) {
+      return;
+    } // cable is created by self, disconnect it
+
+
+    this.componentWillUnmount(); // create or assign cable
+
+    this.UNSAFE_componentWillMount();
+  },
+  render: function render() {
+    return React.createElement(Provider, {
+      value: {
+        cable: this.cable
+      }
+    }, this.props.children || null);
+  }
+});
+ActionCableProvider.displayName = "ActionCableProvider";
+ActionCableProvider.propTypes = {
+  cable: PropTypes.object,
+  url: PropTypes.string,
+  children: PropTypes.any
+};
+var ActionCableController = createReactClass({
+  displayName: "ActionCableController",
+  componentDidMount: function componentDidMount() {
+    this.connectToChannel();
+  },
+  connectToChannel: function connectToChannel() {
+    var self = this;
+    var _props = this.props;
+    var onReceived = _props.onReceived;
+    var onInitialized = _props.onInitialized;
+    var onConnected = _props.onConnected;
+    var onDisconnected = _props.onDisconnected;
+    var onRejected = _props.onRejected;
+    this.cable = this.props.cable.subscriptions.create(this.props.channel, {
+      received: function received(data) {
+        onReceived && onReceived(data);
+      },
+      initialized: function initialized() {
+        onInitialized && onInitialized();
+      },
+      connected: function connected() {
+        onConnected && onConnected();
+      },
+      disconnected: function disconnected() {
+        onDisconnected && onDisconnected();
+      },
+      rejected: function rejected() {
+        onRejected && onRejected();
+      }
+    });
+  },
+  disconnectFromChannel: function disconnectFromChannel() {
+    if (this.cable) {
+      this.props.cable.subscriptions.remove(this.cable);
+      this.cable = null;
+    }
+  },
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (JSON.stringify(prevProps.channel) !== JSON.stringify(this.props.channel)) {
+      this.disconnectFromChannel();
+      this.connectToChannel();
+    }
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    this.disconnectFromChannel();
+  },
+  send: function send(data) {
+    if (!this.cable) {
+      throw new Error("ActionCable component unloaded");
+    }
+
+    this.cable.send(data);
+  },
+  perform: function perform(action, data) {
+    if (!this.cable) {
+      throw new Error("ActionCable component unloaded");
+    }
+
+    this.cable.perform(action, data);
+  },
+  render: function render() {
+    return this.props.children || null;
+  }
+});
+ActionCableController.displayName = "ActionCableController";
+ActionCableController.propTypes = {
+  cable: PropTypes.object,
+  onReceived: PropTypes.func,
+  onInitialized: PropTypes.func,
+  onConnected: PropTypes.func,
+  onDisconnected: PropTypes.func,
+  onRejected: PropTypes.func,
+  children: PropTypes.any
+};
+var Component = createReactClass({
+  displayName: "Component",
+  render: function render() {
+    var _this = this;
+
+    return React.createElement(Consumer, null, function (_ref) {
+      var cable = _ref.cable;
+      return React.createElement(ActionCableController, _objectSpread(_objectSpread({
+        cable: cable
+      }, _this.props), {}, {
+        ref: _this.props.forwardedRef
+      }), _this.props.children || null);
+    });
+  }
+});
+Component.displayName = "ActionCableConsumer";
+Component.propTypes = {
+  onReceived: PropTypes.func,
+  onInitialized: PropTypes.func,
+  onConnected: PropTypes.func,
+  onDisconnected: PropTypes.func,
+  onRejected: PropTypes.func,
+  children: PropTypes.any
+};
+var ActionCableConsumer = React.forwardRef(function (props, ref) {
+  return React.createElement(Component, _objectSpread(_objectSpread({}, props), {}, {
+    forwardedRef: ref
+  }), props.children || null);
+});
+var ActionCable = createReactClass({
+  displayName: "ActionCable",
+  componentDidMount: function componentDidMount() {
+    console.warn("DEPRECATION WARNING: The <ActionCable /> component has been deprecated and will be removed in a future release. Use <ActionCableConsumer /> instead.");
+  },
+  render: function render() {
+    return React.createElement(ActionCableConsumer, _objectSpread({}, this.props), this.props.children || null);
+  }
+});
+ActionCable.displayName = "ActionCable";
+ActionCable.propTypes = {
+  onReceived: PropTypes.func,
+  onInitialized: PropTypes.func,
+  onConnected: PropTypes.func,
+  onDisconnected: PropTypes.func,
+  onRejected: PropTypes.func,
+  children: PropTypes.any
+};
+exports.ActionCable = ActionCable;
+exports.ActionCableConsumer = ActionCableConsumer;
+exports.ActionCableController = ActionCableController;
+exports.ActionCableProvider = ActionCableProvider; // Compatible old usage
+
+exports["default"] = ActionCableProvider;

lib/index.js

@@ -11,7 +11,7 @@ var createReactClass = require("create-react-class")
 var { Provider, Consumer } = React.createContext()
 
 var ActionCableProvider = createReactClass({
-  componentWillMount: function () {
+  UNSAFE_componentWillMount: function () {
     if (this.props.cable) {
       this.cable = this.props.cable
     } else {
@@ -25,7 +25,7 @@ var ActionCableProvider = createReactClass({
     }
   },
 
-  componentWillReceiveProps: function (nextProps) {
+  UNSAFE_componentWillReceiveProps: function (nextProps) {
     // Props not changed
     if (
       this.props.cable === nextProps.cable &&
@@ -38,7 +38,7 @@ var ActionCableProvider = createReactClass({
     this.componentWillUnmount()
 
     // create or assign cable
-    this.componentWillMount()
+    this.UNSAFE_componentWillMount()
   },
 
   render: function () {
@@ -64,6 +64,9 @@ ActionCableProvider.propTypes = {
 
 var ActionCableController = createReactClass({
   componentDidMount: function () {
+    this.connectToChannel()
+  },
+  connectToChannel: function() {
     var self = this
     var _props = this.props
 
@@ -95,13 +98,23 @@ var ActionCableController = createReactClass({
       }
     })
   },
-
-  componentWillUnmount: function () {
+  disconnectFromChannel: function() {
     if (this.cable) {
       this.props.cable.subscriptions.remove(this.cable)
       this.cable = null
     }
   },
+  componentDidUpdate: function(prevProps) {
+    if (
+      JSON.stringify(prevProps.channel) !== JSON.stringify(this.props.channel)
+    ) {
+      this.disconnectFromChannel()
+      this.connectToChannel()
+    }
+  },
+  componentWillUnmount: function () {
+    this.disconnectFromChannel()
+  },
 
   send: function (data) {
     if (!this.cable) {
@@ -136,34 +149,34 @@ ActionCableController.propTypes = {
   children: PropTypes.any
 }
 
-var ActionCableConsumer = React.forwardRef(function (props, ref) {
-  var Component = createReactClass({
-    render: function () {
-      return React.createElement(Consumer, null, ({ cable }) => {
-        return React.createElement(
-          ActionCableController,
-          {
-            cable,
-            ...this.props,
-            ref: this.props.forwardedRef
-          },
-          this.props.children || null
-        )
-      })
-    }
-  })
+var Component = createReactClass({
+  render: function () {
+    return React.createElement(Consumer, null, ({ cable }) => {
+      return React.createElement(
+        ActionCableController,
+        {
+          cable,
+          ...this.props,
+          ref: this.props.forwardedRef
+        },
+        this.props.children || null
+      )
+    })
+  }
+})
 
-  Component.displayName = "ActionCableConsumer"
+Component.displayName = "ActionCableConsumer"
 
-  Component.propTypes = {
-    onReceived: PropTypes.func,
-    onInitialized: PropTypes.func,
-    onConnected: PropTypes.func,
-    onDisconnected: PropTypes.func,
-    onRejected: PropTypes.func,
-    children: PropTypes.any
-  }
+Component.propTypes = {
+  onReceived: PropTypes.func,
+  onInitialized: PropTypes.func,
+  onConnected: PropTypes.func,
+  onDisconnected: PropTypes.func,
+  onRejected: PropTypes.func,
+  children: PropTypes.any
+}
 
+var ActionCableConsumer = React.forwardRef(function (props, ref) {
   return React.createElement(
     Component,
     {