Move to devdeps

.babelrc

@@ -1,6 +1,5 @@
 {
   "presets": [
-    "es2015",
-    "react"
+    "babel-preset-react-app"
   ]
 }

package.json

@@ -5,9 +5,9 @@
   "main": "./lib/index.js",
   "scripts": {
     "lint": "eslint .",
-    "prepublish": "babel --out-dir ./lib ./src",
+    "prepublish": "NODE_ENV=development babel --out-dir ./lib ./src",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-example": "browserify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ es2015 react ] ]",
+    "build-example": "browserify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ babel-preset-react-app ] ]",
     "serve-example": "http-server ./example/ -p 8080",
     "start": "npm run build-example; npm run serve-example",
     "deploy-example": "npm run build-example; gh-pages -d ./example"
@@ -31,20 +31,20 @@
     "react": "*"
   },
   "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.20.0",
+    "babel-preset-react-app": "^2.2.0",
     "babelify": "^7.3.0",
     "browserify": "^13.1.1",
-    "eslint": "^3.12.0",
     "eslint-config-gitbook": "^1.4.0",
+    "eslint": "^3.12.0",
     "gh-pages": "^0.12.0",
     "http-server": "^0.9.0",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1"
+    "react-dom": "^15.4.1",
+    "react": "^15.4.1"
   },
   "dependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.20.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "load-script": "^1.0.0"
+    "load-script": "^1.0.0",
+    "prop-types": "^15.5.10"
   }
 }

src/context.js

@@ -1,8 +1,10 @@
 /* global MathJax */
-const React = require('react');
-const loadScript = require('load-script');
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import loadScript from 'load-script';
 
-const DEFAULT_SCRIPT = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML';
+const DEFAULT_SCRIPT =
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML';
 
 const DEFAULT_OPTIONS = {
     tex2jax: {
@@ -16,48 +18,48 @@ const DEFAULT_OPTIONS = {
  * Context for loading mathjax
  * @type {[type]}
  */
-const MathJaxContext = React.createClass({
-    propTypes: {
-        children: React.PropTypes.node.isRequired,
-        script:   React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.oneOf([false])
+
+class MathJaxContext extends Component {
+    constructor(props) {
+        super(props);
+        this.onLoad = this.onLoad.bind(this);
+    }
+
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+        script: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.oneOf([false])
         ]),
-        options:  React.PropTypes.object
-    },
+        options: PropTypes.object
+    };
 
-    childContextTypes: {
-        MathJax: React.PropTypes.object
-    },
+    static childContextTypes = {
+        MathJax: PropTypes.object
+    };
 
-    getDefaultProps() {
-        return {
-            script: DEFAULT_SCRIPT,
-            options: DEFAULT_OPTIONS
-        };
-    },
+    static defaultProps = {
+        script: DEFAULT_SCRIPT,
+        options: DEFAULT_OPTIONS
+    };
 
-    getInitialState() {
-        return {
-            loaded: false
-        };
-    },
+    state = {
+        loaded: false
+    };
 
     getChildContext() {
         return {
-            MathJax: typeof MathJax == 'undefined' ? undefined : MathJax
+            MathJax: typeof MathJax === 'undefined' ? undefined : MathJax
         };
-    },
+    }
 
     componentDidMount() {
         const { script } = this.props;
-
         if (!script) {
             return this.onLoad();
         }
-
         loadScript(script, this.onLoad);
-    },
+    }
 
     onLoad(err) {
         const { options } = this.props;
@@ -66,12 +68,12 @@ const MathJaxContext = React.createClass({
         this.setState({
             loaded: true
         });
-    },
+    }
 
     render() {
         const { children } = this.props;
         return React.Children.only(children);
     }
-});
+}
 
-module.exports = MathJaxContext;
+export default MathJaxContext;

src/index.js

@@ -1,7 +1,8 @@
-const MathJaxNode = require('./node');
-const MathJaxContext = require('./context');
+import MathJaxNode from './node';
+import MathJaxContext from './context';
 
-module.exports = {
-    Node:    MathJaxNode,
+export { MathJaxNode as Node, MathJaxContext as Context };
+export default {
+    Node: MathJaxNode,
     Context: MathJaxContext
 };

src/node.js

@@ -1,60 +1,66 @@
-const React = require('react');
-const process = require('./process');
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import process from './process';
 
 /**
  * React component to render maths using mathjax
  * @type {ReactClass}
  */
-const MathJaxNode = React.createClass({
-    propTypes: {
-        inline:   React.PropTypes.bool,
-        children: React.PropTypes.node.isRequired,
-        onRender: React.PropTypes.func
-    },
-
-    contextTypes: {
-        MathJax: React.PropTypes.object
-    },
-
-    getDefaultProps() {
-        return {
-            inline:   false,
-            onRender: () => {}
-        };
-    },
+
+class MathJaxNode extends Component {
+    constructor(props) {
+        super(props);
+        this.typeset = this.typeset.bind(this);
+        this.clear = this.clear.bind(this);
+    }
+
+    static propTypes = {
+        inline: PropTypes.bool,
+        children: PropTypes.node.isRequired,
+        onRender: PropTypes.func
+    };
+
+    static defaultProps = {
+        inline: false,
+        onRender: () => {}
+    };
+
+    static contextTypes = {
+        MathJax: PropTypes.object
+    };
 
     /**
      * Render the math once the node is mounted
      */
     componentDidMount() {
         this.typeset();
-    },
+    }
 
     /**
      * Update the jax, force update if the display mode changed
      */
     componentDidUpdate(prevProps) {
-        const forceUpdate = prevProps.inline != this.props.inline;
+        const forceUpdate = prevProps.inline !== this.props.inline;
         this.typeset(forceUpdate);
-    },
+    }
 
     /**
      * Prevent update when the tex has not changed
      */
     shouldComponentUpdate(nextProps, nextState, nextContext) {
         return (
-            nextProps.children != this.props.children
-            || nextProps.inline != this.props.inline
-            || nextContext.MathJax != this.context.MathJax
+            nextProps.children !== this.props.children ||
+            nextProps.inline !== this.props.inline ||
+            nextContext.MathJax !== this.context.MathJax
         );
-    },
+    }
 
     /**
      * Clear the math when unmounting the node
      */
     componentWillUnmount() {
         this.clear();
-    },
+    }
 
     /**
      * Clear the jax
@@ -70,7 +76,7 @@ const MathJaxNode = React.createClass({
         if (jax) {
             jax.Remove();
         }
-    },
+    }
 
     /**
      * Update math in the node.
@@ -100,13 +106,11 @@ const MathJaxNode = React.createClass({
                     process(MathJax, script, onRender);
                 }
             });
-
-
         } else {
             const script = this.setScriptText(text);
             process(MathJax, script, onRender);
         }
-    },
+    }
 
     /**
      * Create a script
@@ -119,7 +123,7 @@ const MathJaxNode = React.createClass({
         if (!this.script) {
             this.script = document.createElement('script');
             this.script.type = 'math/tex; ' + (inline ? '' : 'mode=display');
-            this.refs.node.appendChild(this.script);
+            this.node.appendChild(this.script);
         }
 
         if ('text' in this.script) {
@@ -130,11 +134,17 @@ const MathJaxNode = React.createClass({
         }
 
         return this.script;
-    },
+    }
 
     render() {
-        return <span ref="node" />;
+        return (
+            <span
+                ref={node => {
+                    this.node = node;
+                }}
+            />
+        );
     }
-});
+}
 
-module.exports = MathJaxNode;
+export default MathJaxNode;

src/process.js

@@ -20,7 +20,7 @@ function process(MathJax, script, callback) {
 function doProcess(MathJax) {
     MathJax.Hub.Queue(function() {
         const oldElementScripts = MathJax.Hub.elementScripts;
-        MathJax.Hub.elementScripts = (element) => pendingScripts;
+        MathJax.Hub.elementScripts = element => pendingScripts;
 
         try {
             return MathJax.Hub.Process(null, () => {
@@ -43,4 +43,4 @@ function doProcess(MathJax) {
     });
 }
 
-module.exports = process;
+export default process;