fix(build): pin react-bootstrap; upgrade to react v15

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets" : ["react"]
+  "presets": ["react"],
+  "plugins": ["babel-plugin-transform-class-properties"]
 }

.eslintrc

@@ -1,44 +1,41 @@
 {
-  parserOptions: {
-    ecmaVersion: 5
+  "parserOptions": {
+    "ecmaVersion": 5
   },
 
-  extends: [
-    'eslint:recommended',
-    'airbnb-base/legacy'
-  ],
+  "extends": ["eslint:recommended", "airbnb-base/legacy"],
 
-  rules: {
+  "rules": {
     // airbnb style overrides
-    eqeqeq: ['error', 'allow-null'],
-    strict: [2, 'global'],
-    'no-trailing-spaces': 2,
-    'space-before-function-paren': [2, 'never'],
+    "eqeqeq": ["error", "allow-null"],
+    "strict": [2, "global"],
+    "no-trailing-spaces": 2,
+    "space-before-function-paren": [2, "never"],
 
     // We're significantly more permissive
-    'func-names': 0,
-    'max-len': 0,
-    'no-nested-ternary': 0,
-    'comma-dangle': 0,
-    'no-underscore-dangle': 0,
-    'no-param-reassign': 0,
-    'vars-on-top': 0,
-    'default-case': 0,
-    'no-else-return': 0,
-    'no-cond-assign': [2, 'except-parens'],
-    'no-use-before-define': [2, { functions: false, classes: true }],
-    'no-shadow': 0,
-    'newline-per-chained-call': 0,
-    'new-cap': 0,
-    'one-var': 0,
-    'one-var-declaration-per-line': 0,
-    'radix': 0,
-    'block-scoped-var': 0,  // Because we don't have let, sometimes
-                            // we use var as let
-    'quote-props': 0,  // We sometimes quotes props when the
-                       // props are important as string values (e.g.,
-                       // for use in a <select>)
-    'no-console': 0,
-    'no-extend-native': 0,  // Used for .bindMemoize
+    "func-names": 0,
+    "max-len": 0,
+    "no-nested-ternary": 0,
+    "comma-dangle": 0,
+    "no-underscore-dangle": 0,
+    "no-param-reassign": 0,
+    "vars-on-top": 0,
+    "default-case": 0,
+    "no-else-return": 0,
+    "no-cond-assign": [2, "except-parens"],
+    "no-use-before-define": [2, { "functions": false, "classes": true }],
+    "no-shadow": 0,
+    "newline-per-chained-call": 0,
+    "new-cap": 0,
+    "one-var": 0,
+    "one-var-declaration-per-line": 0,
+    "radix": 0,
+    "block-scoped-var": 0, // Because we don't have let, sometimes
+    // we use var as let
+    "quote-props": 0, // We sometimes quotes props when the
+    // props are important as string values (e.g.,
+    // for use in a <select>)
+    "no-console": 0,
+    "no-extend-native": 0 // Used for .bindMemoize
   }
 }

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  arrowParens: 'avoid',
+};

dev/MainPage.js

@@ -1,92 +1,103 @@
-'use strict';
-
-var React = require('react');
-var PureRenderMixin = require('react-addons-pure-render-mixin');
-
-var ExpressionEditor = require('../src/ExpressionEditor');
-var SourceEditor = require('../src/SourceEditor');
-
-var MainPage = React.createClass({
-  mixins: [PureRenderMixin],
-
-  getInitialState: function() {
-    return {
-      pattern: '([A-Z])\\w+',
-      flags: 'g',
-
-      prevMatch: null,
-      nextMatch: null,
-
-      text: [
-        'Welcome to RegExr v2.1 by gskinner.com, proudly hosted by Media Temple!',
-        '',
-        'Edit the Expression & Text to see matches. Roll over matches or the expression for details. Undo mistakes with ctrl-z. Save Favorites & Share expressions with friends or the Community. Explore your results with Tools. A full Reference & Help is available in the Library, or watch the video Tutorial.',
-        '',
-        'Sample text for testing:',
-        'abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-        '0123456789 _+-.,!@#$%^&*();\\/|<>"\'',
-        '12345 -98.7 3.141 .6180 9,000 +42',
-        '555.123.4567	+1-(800)-555-2468',
-        'foo@demo.net	[email protected]',
-        'www.demo.com	http://foo.co.uk/',
-        'http://regexr.com/foo.html?q=bar',
-        'https://mediatemple.net'
-      ].join('\n')
-    };
-  },
-
-  handlePatternChange: function(value) {
+"use strict";
+
+var React = require("react");
+var shallowCompare = require("react-addons-shallow-compare");
+
+var ExpressionEditor = require("../src/ExpressionEditor");
+var SourceEditor = require("../src/SourceEditor");
+
+class MainPage extends React.Component {
+  state = {
+    pattern: "([A-Z])\\w+",
+    flags: "g",
+
+    prevMatch: null,
+    nextMatch: null,
+
+    text: [
+      "Welcome to RegExr v2.1 by gskinner.com, proudly hosted by Media Temple!",
+      "",
+      "Edit the Expression & Text to see matches. Roll over matches or the expression for details. Undo mistakes with ctrl-z. Save Favorites & Share expressions with friends or the Community. Explore your results with Tools. A full Reference & Help is available in the Library, or watch the video Tutorial.",
+      "",
+      "Sample text for testing:",
+      "abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+      "0123456789 _+-.,!@#$%^&*();\\/|<>\"'",
+      "12345 -98.7 3.141 .6180 9,000 +42",
+      "555.123.4567	+1-(800)-555-2468",
+      "[email protected]	[email protected]",
+      "www.demo.com	http://foo.co.uk/",
+      "http://regexr.com/foo.html?q=bar",
+      "https://mediatemple.net",
+    ].join("\n"),
+  };
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
+  handlePatternChange = (value) => {
     this.setState({ pattern: value });
-  },
+  };
 
-  handleFlagsChange: function(value) {
+  handleFlagsChange = (value) => {
     this.setState({ flags: value });
-  },
+  };
 
-  handleTextChange: function(value) {
+  handleTextChange = (value) => {
     this.setState({ text: value });
-  },
+  };
 
-  handleViewportChange: function(viewport) {
+  handleViewportChange = (viewport) => {
     this.setState({
       nextMatch: viewport.nextMatch,
-      prevMatch: viewport.prevMatch
+      prevMatch: viewport.prevMatch,
     });
-  },
+  };
 
-  scrollToPrev: function() {
+  scrollToPrev = () => {
     this._sourceEditor.scrollToMatch(this.state.prevMatch);
-  },
+  };
 
-  scrollToNext: function() {
+  scrollToNext = () => {
     this._sourceEditor.scrollToMatch(this.state.nextMatch);
-  },
+  };
 
-  render: function() {
+  render() {
     var pattern = this.state.pattern;
     var text = this.state.text;
     var flags = this.state.flags;
 
-    return (<div>
-      <ExpressionEditor
+    return (
+      <div>
+        <ExpressionEditor
           pattern={pattern}
           flags={flags}
           onPatternChange={this.handlePatternChange}
-          onFlagsChange={this.handleFlagsChange} />
-      <SourceEditor pattern={pattern}
+          onFlagsChange={this.handleFlagsChange}
+        />
+        <SourceEditor
+          pattern={pattern}
           flags="g"
           onTextChange={this.handleTextChange}
           text={text}
           options={{
-            lineWrapping: true
+            lineWrapping: true,
           }}
           onViewportChange={this.handleViewportChange}
-          ref={function(elem) { this._sourceEditor = elem; }.bind(this)} />
-
-      <button onClick={this.scrollToPrev} type="button">Previous match</button>
-      <button onClick={this.scrollToNext} type="button">Next match</button>
-    </div>);
+          ref={function (elem) {
+            this._sourceEditor = elem;
+          }.bind(this)}
+        />
+
+        <button onClick={this.scrollToPrev} type="button">
+          Previous match
+        </button>
+        <button onClick={this.scrollToNext} type="button">
+          Next match
+        </button>
+      </div>
+    );
   }
-});
+}
 
 module.exports = MainPage;

lib/ExpressionEditor.js

@@ -1,28 +1,21 @@
+/** @format */
+
 'use strict';
 
+var PropTypes = require('prop-types');
+
 var React = require('react');
-var PureRenderMixin = require('react-addons-pure-render-mixin');
+var shallowCompare = require('react-addons-shallow-compare');
 
 var PatternEditor = require('./PatternEditor');
 var FlagsEditor = require('./FlagsEditor');
 
-var ExpressionEditor = React.createClass({
-  displayName: 'ExpressionEditor',
-
-  mixins: [PureRenderMixin],
-
-  propTypes: {
-    pattern: React.PropTypes.string.isRequired,
-    flags: React.PropTypes.string.isRequired,
-
-    onPatternChange: React.PropTypes.func.isRequired,
-    onFlagsChange: React.PropTypes.func.isRequired,
-
-    width: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]), // Defaults to 100%
-    height: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) // Defaults to auto
-  },
+class ExpressionEditor extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
 
-  render: function () {
+  render() {
     return React.createElement(
       'div',
       { className: 'regexr regexr-expression' },
@@ -38,17 +31,27 @@ var ExpressionEditor = React.createClass({
           value: this.props.pattern,
           onChange: this.props.onPatternChange,
           width: this.props.width,
-          height: this.props.height })
+          height: this.props.height
+        })
       ),
       React.createElement(
         'div',
         { className: 'regexr-right' },
-        React.createElement(FlagsEditor, {
-          value: this.props.flags,
-          onChange: this.props.onFlagsChange })
+        React.createElement(FlagsEditor, { value: this.props.flags, onChange: this.props.onFlagsChange })
       )
     );
   }
-});
+}
+
+ExpressionEditor.propTypes = {
+  pattern: PropTypes.string.isRequired,
+  flags: PropTypes.string.isRequired,
+
+  onPatternChange: PropTypes.func.isRequired,
+  onFlagsChange: PropTypes.func.isRequired,
+
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Defaults to 100%
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) // Defaults to auto
+};
 
 module.exports = ExpressionEditor;