Clean up code, make rebuilding docs site easier, and make it possible…

… to use all ES6 features

Fixes mui#655, mui#606, mui#440, mui#392.

Goals of this PR:
- being able to use all ES6 features (with babel)
- adding JSHint and cleaning up most obvious mistakes in code
- making it so that browserify doesn't throw an error when components'
  code changes while watching files
- minor cleanup of the dependencies in package.json files

.jshintrc

@@ -0,0 +1,11 @@
+{
+  "asi": true,
+  "browser": true,
+  "eqnull": true,
+  "esnext": true,
+  "expr": true,
+  "loopfunc": true,
+  "node": true,
+  "sub": true,
+  "undef": true
+}

docs/gulp/tasks/browserify.js

@@ -14,7 +14,7 @@ var handleErrors = require('../util/handleErrors');
 var source       = require('vinyl-source-stream');
 var config       = require('../config').browserify;
 
-gulp.task('browserify', function(callback) {
+gulp.task('browserify', ['jshint'], function(callback) {
 
   var bundleQueue = config.bundleConfigs.length;
 
@@ -29,7 +29,7 @@ gulp.task('browserify', function(callback) {
       extensions: config.extensions,
       // Enable source maps!
       debug: config.debug
-    });
+    }).transform('babelify', {stage: 1});
 
     var bundle = function() {
       // Log when bundling starts

docs/gulp/tasks/jshint.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var shell = require('gulp-shell');
+var handleErrors = require('../util/handleErrors');
+
+gulp.task('jshint', shell.task([
+  '../node_modules/.bin/jsxhint --harmony ../src/* ../src/**/* ../src/**/**/* ./src/app/* ./src/app/**/* ./src/app/**/**/* ./src/app/**/**/**/* --exclude ../src/utils/modernizr.custom.js'
+])).on('error', handleErrors);

docs/package.json

@@ -12,22 +12,15 @@
   "browser": {
     "mui": "../src/index.js"
   },
-  "browserify": {
-    "transform": [
-      [
-        "reactify",
-        {
-          "es6": true
-        }
-      ]
-    ]
-  },
   "devDependencies": {
+    "babelify": "^6.1.1",
     "browser-sync": "^1.8.1",
+    "browserify": "^10.2.0",
     "gulp": "^3.8.10",
     "gulp-autoprefixer": "^2.0.0",
     "gulp-less": "^3.0.0",
     "gulp-notify": "^2.1.0",
+    "gulp-shell": "^0.4.1",
     "gulp-sourcemaps": "^1.2.8",
     "gulp-util": "^3.0.1",
     "pretty-hrtime": "^0.2.2",
@@ -37,6 +30,7 @@
     "watchify": "^2.2.1"
   },
   "dependencies": {
-    "highlight.js": "^8.4.0"
+    "highlight.js": "^8.4.0",
+    "react-router": "^0.13.3"
   }
 }

docs/src/app/app.jsx

@@ -30,4 +30,4 @@
       React.render(<Handler/>, document.body);
     });
 
-})();
+})();

docs/src/app/components/app-left-nav.jsx

@@ -4,7 +4,7 @@ var mui = require('mui');
 var {MenuItem, LeftNav} = mui;
 var {Colors, Spacing, Typography} = mui.Styles;
 
-  menuItems = [
+var menuItems = [
     { route: 'get-started', text: 'Get Started' },
     { route: 'customization', text: 'Customization' },
     { route: 'components', text: 'Components' },

docs/src/app/components/component-doc.jsx

@@ -71,7 +71,7 @@ var ComponentDoc = React.createClass({
 
     var componentInfo = this.props.componentInfo.map(function(info, i) {
       var infoStyle = styles.componentInfo;
-      if (i == 0) infoStyle = this.mergeStyles(infoStyle, styles.componentInfoWhenFirstChild);
+      if (i === 0) infoStyle = this.mergeStyles(infoStyle, styles.componentInfoWhenFirstChild);
       return (
         <ComponentInfo
           key={i}

docs/src/app/components/pages/components/buttons.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
 var mui = require('mui');
 var ComponentDoc = require('../../component-doc.jsx');
-var Extend = mui.Utils.Extend;
+var extend = mui.Utils.Extend;
 var Typography = mui.Styles.Typography;
 var {ClearFix, FlatButton, FloatingActionButton, FontIcon, RaisedButton, Tab, Tabs} = mui;
 
@@ -273,7 +273,7 @@ class ButtonPage extends React.Component {
         color: Typography.textDarkBlack
       }
     };
-    styles.exampleButtonIcon = Extend(styles.exampleFlatButtonIcon, styles.exampleButtonIcon);
+    styles.exampleButtonIcon = extend(styles.exampleFlatButtonIcon, styles.exampleButtonIcon);
     return styles;
   }
 

docs/src/app/components/pages/components/progress.jsx

@@ -29,7 +29,7 @@ var SlidersPage = React.createClass({
 
         if (self.state.completed > 100) {
           window.clearInterval(id);
-        };
+        }
       }, 1000);
   },
 

docs/src/app/components/pages/components/snackbar.jsx

@@ -106,7 +106,7 @@ class SnackbarPage extends React.Component {
 
   _handleAction() {
     //We can add more code here! In this example, we'll just include an alert.
-    alert("We removed the event from your calendar.");
+    window.alert("We removed the event from your calendar.");
   }
 
 }

docs/src/app/components/pages/customization/inline-styles.jsx

@@ -125,6 +125,6 @@ class InlineStyles extends React.Component {
 		);
 	}
 
-};
+}
 
-module.exports = InlineStyles;
+module.exports = InlineStyles;

docs/src/app/components/pages/get-started.jsx

@@ -2,7 +2,7 @@ var React = require('react');
 var mui = require('mui');
 var CodeBlock = require('../code-example/code-block.jsx');
 var FullWidthSection = require('../full-width-section.jsx');
-var Spacing = mui.Styles.Spacing;
+var {Spacing, Typography} = mui.Styles;
 
 class GetStarted extends React.Component {
 
@@ -34,7 +34,7 @@ class GetStarted extends React.Component {
         color: '#f00'//Typography.textDarkBlack
       },
       codeExample: {
-        backgroundColor: canvasColor,
+        backgroundColor: this.context.muiTheme.palette.canvasColor,
         marginBottom: '32px'
       }
     };
@@ -141,4 +141,8 @@ class GetStarted extends React.Component {
 
 }
 
+GetStarted.contextTypes = {
+  muiTheme: React.PropTypes.object
+};
+
 module.exports = GetStarted;

docs/src/app/components/svg-icons/action-grade.jsx

@@ -14,4 +14,4 @@ var ActionGrade = React.createClass({
 
 });
 
-module.exports = ActionGrade;
+module.exports = ActionGrade;

package.json

@@ -7,9 +7,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prebuild": "rm -rf lib",
-    "build:js": "./node_modules/.bin/jsx --harmony ./src ./lib",
-    "build:jsx": "./node_modules/.bin/jsx --harmony -x jsx ./src ./lib",
-    "build": "npm run build:js && npm run build:jsx",
+    "jshint": "./node_modules/.bin/jsxhint --harmony src/* src/**/* src/**/**/* --exclude src/utils/modernizr.custom.js",
+    "build": "npm run jshint && ./node_modules/.bin/babel --stage 1 ./src --out-dir ./lib",
     "prepublish": "npm run build"
   },
   "keywords": [
@@ -37,9 +36,9 @@
     "react-tap-event-plugin": ">=0.1.3"
   },
   "devDependencies": {
-    "react-tools": "^0.13",
-    "browserify": "^7.0.3",
-    "reactify": "^1.1.0",
-    "react-router": "^0.13"
+    "babel": "^5.4.3",
+    "jsxhint": "^0.15.0",
+    "react": "^0.13.3",
+    "react-tap-event-plugin": "^0.1.6"
   }
 }

src/circular-progress.jsx

@@ -51,7 +51,7 @@ var CircularProgress = React.createClass({
     if (this.props.mode != "indeterminate") return;
 
 
-    if (step == 0) {
+    if (step === 0) {
 
       path.style.strokeDasharray = "1, 200";
       path.style.strokeDashoffset = 0;

src/dialog-window.jsx

@@ -190,7 +190,7 @@ var DialogWindow = React.createClass({
           currentAction = this._getAction(currentAction, i);
         }
         actionObjects.push(currentAction);
-      };
+      }
 
       actionContainer = (
         <div style={actionStyle}>

src/enhanced-switch.jsx

@@ -63,7 +63,6 @@ var EnhancedSwitch = React.createClass({
   componentDidMount: function() {
     var inputNode = React.findDOMNode(this.refs.checkbox);
     if (!this.props.switched || 
-        this.props.switched == undefined ||
         inputNode.checked != this.props.switched) this.props.onParentShouldUpdate(inputNode.checked);
 
     window.addEventListener("resize", this._handleResize);
@@ -94,7 +93,7 @@ var EnhancedSwitch = React.createClass({
       newState.switched = nextProps.defaultSwitched;
     }
 
-    if (newState.switched != undefined && (newState.switched != this.props.switched)) this.props.onParentShouldUpdate(newState.switched);
+    if (newState.switched !== undefined && (newState.switched != this.props.switched)) this.props.onParentShouldUpdate(newState.switched);
   },
 
   getTheme: function() {
@@ -297,7 +296,7 @@ var EnhancedSwitch = React.createClass({
 
   // no callback here because there is no event
   setSwitched: function(newSwitchedValue) {
-    if (!this.props.hasOwnProperty('checked') || this.props.checked == false) {
+    if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
       this.props.onParentShouldUpdate(newSwitchedValue);  
       React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
     } else if (process.env.NODE_ENV !== 'production') {

src/enhanced-textarea.jsx

@@ -95,7 +95,6 @@ var EnhancedTextarea = React.createClass({
         <textarea
           {...other}
           ref="input"
-          style={inputStyles}
           rows={this.props.rows}
           style={AutoPrefix.all(inputStyles)}
           onChange={this._handleChange} />

src/flat-button.jsx

@@ -124,7 +124,7 @@ var FlatButton = React.createClass({
           {label}
         </span>
       );
-    };
+    }
 
     return (
       <EnhancedButton

src/floating-action-button.jsx

@@ -135,9 +135,9 @@ var RaisedButton = React.createClass({
 
     var styles = this.getStyles();
 
-    var icon;
+    var iconElement;
     if (this.props.iconClassName) {
-      icon = 
+      iconElement =
         <FontIcon 
           className={this.props.iconClassName} 
           style={this.mergeAndPrefix(
@@ -175,7 +175,7 @@ var RaisedButton = React.createClass({
                 styles.overlay,
                 (this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
               )}>
-                {icon}
+                {iconElement}
                 {this.props.children}
             </div>
         </EnhancedButton>

src/icon-button.jsx

@@ -59,8 +59,6 @@ var IconButton = React.createClass({
   getStyles: function() {
     var styles = {
       root: {
-        height: 48,
-        width: 48,
         position: 'relative',
         boxSizing: 'border-box',
         transition: Transitions.easeOut(),
@@ -100,13 +98,13 @@ var IconButton = React.createClass({
       tooltip,
       touch,
       ...other } = this.props;
-    var tooltip;
+    var tooltipElement;
     var fonticon;
 
     var styles = this.getStyles();
 
     if (this.props.tooltip) {
-      tooltip = (
+      tooltipElement = (
         <Tooltip
           ref="tooltip"
           label={tooltip}
@@ -151,7 +149,7 @@ var IconButton = React.createClass({
         onMouseOver={this._handleMouseOver}
         onKeyboardFocus={this._handleKeyboardFocus}>
 
-        {tooltip}
+        {tooltipElement}
         {fonticon}
         {this.props.children}
 

src/linear-progress.jsx

@@ -59,7 +59,7 @@ var LinearProgress = React.createClass({
     if (!this.isMounted()) return;
     if (this.props.mode != "indeterminate") return;
 
-    if (step == 0) {
+    if (step === 0) {
       barElement.style.left = stepValues[0][0] + "%";
       barElement.style.right = stepValues[0][1] + "%";
     } else if (step == 1) {

src/menu/menu-item.jsx

@@ -123,7 +123,7 @@ var MenuItem = React.createClass({
     var iconRight;
     var attribute;
     var number;
-    var toggle;
+    var toggleElement;
 
     var styles = this.getStyles();
 
@@ -145,7 +145,7 @@ var MenuItem = React.createClass({
         style,
         ...other
       } = this.props;
-      toggle = <Toggle {...other} onToggle={this._handleToggle} style={styles.toggle}/>;
+      toggleElement = <Toggle {...other} onToggle={this._handleToggle} style={styles.toggle}/>;
     }
 
     return (
@@ -168,7 +168,7 @@ var MenuItem = React.createClass({
         {data}
         {attribute}
         {number}
-        {toggle}
+        {toggleElement}
         {iconRight}
 
       </div>

src/menu/menu.jsx

@@ -255,7 +255,7 @@ var Menu = React.createClass({
       isSelected = i === this.props.selectedIndex;
       isDisabled = (menuItem.disabled === undefined) ? false : menuItem.disabled;
 
-      var {
+      let {
         icon,
         data,
         attribute,
@@ -288,13 +288,13 @@ var Menu = React.createClass({
               index={i}
               className={this.props.menuItemClassNameSubheader}
               style={this.mergeAndPrefix(styles.subheader)}
-              firstChild={i == 0}
+              firstChild={i === 0}
               text={menuItem.text} />
           );
           break;
 
         case MenuItem.Types.NESTED:
-          var {
+          let {
             ref,
             key,
             index,

src/menu/subheader-menu-item.jsx

@@ -34,7 +34,6 @@ var SubheaderMenuItem = React.createClass({
         fontSize: '13px',
         letterSpacing: 0,
         fontWeight: Typography.fontWeightMedium,
-        color: Typography.textDarkBlack,
         margin: 0,
         height: subheaderHeight + gutterMini,
         lineHeight: subheaderHeight + 'px',
@@ -70,4 +69,4 @@ var SubheaderMenuItem = React.createClass({
 
 });
 
-module.exports = SubheaderMenuItem;
+module.exports = SubheaderMenuItem;