Compile jsx before nom publish - Fixes mui#179, Fixes mui#215

.gitignore

@@ -1,3 +1,11 @@
 node_modules
 npm-debug.log
 build
+
+# jsx Transform Disk Cache
+.module-cache
+
+# Exclude compiled jsx files
+src/js/**/*.js
+!src/js/mixins/*.js
+!src/js/utils/*.js

.npmignore

@@ -0,0 +1,9 @@
+build
+docs
+example
+
+# jsx Transform Disk Cache
+.module-cache
+
+# Exclude jsx files
+src/js/**/*.jsx

docs/gulp/config.js

@@ -32,6 +32,7 @@ module.exports = {
   browserify: {
     // Enable source maps
     debug: true,
+    extensions: [ '.jsx' ],
     // A separate bundle will be generated for each
     // bundle config in the list below
     bundleConfigs: [{

docs/package.json

@@ -20,19 +20,22 @@
   },
   "devDependencies": {
     "browser-sync": "^1.8.1",
+    "browserify": "^7.0.3",
     "gulp": "^3.8.10",
     "gulp-autoprefixer": "^2.0.0",
     "gulp-less": "^2.0.1",
     "gulp-notify": "^2.1.0",
     "gulp-sourcemaps": "^1.2.8",
     "gulp-util": "^3.0.1",
     "pretty-hrtime": "^0.2.2",
+    "reactify": "^0.17.1",
     "require-dir": "^0.1.0",
     "underscore": "^1.7.0",
     "vinyl-source-stream": "^1.0.0",
     "watchify": "^2.2.1"
   },
   "dependencies": {
-    "highlight.js": "^8.4.0"
+    "highlight.js": "^8.4.0",
+    "react-router": "^0.11.6"
   }
 }

package.json

@@ -5,7 +5,10 @@
   "description": "Material Design UI components built with React",
   "main": "./src/index",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "jsx": "./node_modules/.bin/jsx --harmony -x jsx ./src/js ./src/js",
+    "prepublish": "npm run jsx",
+    "postpublish": "git clean -fX"
   },
   "keywords": [
     "react",
@@ -23,16 +26,6 @@
     "url": "https://github.com/callemall/material-ui/issues"
   },
   "homepage": "http://material-ui.com/",
-  "browserify": {
-    "transform": [
-      [
-        "reactify",
-        {
-          "es6": true
-        }
-      ]
-    ]
-  },
   "dependencies": {
     "react-classset": "0.0.2",
     "react-draggable2": "^0.4.2",
@@ -42,8 +35,6 @@
     "react": "0.12.x"
   },
   "devDependencies": {
-    "browserify": "^7.0.3",
-    "reactify": "^0.17.1",
-    "react-router": "^0.11.6"
+    "react-tools": "^0.12.2"
   }
 }

src/index.js

@@ -1,50 +1,50 @@
 module.exports = {
-  AppBar: require('./js/app-bar.jsx'),
-  AppCanvas: require('./js/app-canvas.jsx'),
-  Checkbox: require('./js/checkbox.jsx'),
-  DatePicker: require('./js/date-picker/date-picker.jsx'),
-  Dialog: require('./js/dialog.jsx'),
-  DialogWindow: require('./js/dialog-window.jsx'),
-  DropDownIcon: require('./js/drop-down-icon.jsx'),
-  DropDownMenu: require('./js/drop-down-menu.jsx'),
-  EnhancedButton: require('./js/enhanced-button.jsx'),
-  FlatButton: require('./js/flat-button.jsx'),
-  FloatingActionButton: require('./js/floating-action-button.jsx'),
-  FontIcon: require('./js/font-icon.jsx'),
-  IconButton: require('./js/icon-button.jsx'),
-  Input: require('./js/input.jsx'),
-  LeftNav: require('./js/left-nav.jsx'),
-  MenuItem: require('./js/menu-item.jsx'),
-  Menu: require('./js/menu.jsx'),
+  AppBar: require('./js/app-bar'),
+  AppCanvas: require('./js/app-canvas'),
+  Checkbox: require('./js/checkbox'),
+  DatePicker: require('./js/date-picker/date-picker'),
+  Dialog: require('./js/dialog'),
+  DialogWindow: require('./js/dialog-window'),
+  DropDownIcon: require('./js/drop-down-icon'),
+  DropDownMenu: require('./js/drop-down-menu'),
+  EnhancedButton: require('./js/enhanced-button'),
+  FlatButton: require('./js/flat-button'),
+  FloatingActionButton: require('./js/floating-action-button'),
+  FontIcon: require('./js/font-icon'),
+  IconButton: require('./js/icon-button'),
+  Input: require('./js/input'),
+  LeftNav: require('./js/left-nav'),
+  MenuItem: require('./js/menu-item'),
+  Menu: require('./js/menu'),
   Mixins: {
-    Classable: require('./js/mixins/classable.js'),
-    ClickAwayable: require('./js/mixins/click-awayable.js'),
-    WindowListenable: require('./js/mixins/window-listenable.js')
+    Classable: require('./js/mixins/classable'),
+    ClickAwayable: require('./js/mixins/click-awayable'),
+    WindowListenable: require('./js/mixins/window-listenable')
   },
-  Paper: require('./js/paper.jsx'),
-  RadioButton: require('./js/radio-button.jsx'),
-  RadioButtonGroup: require('./js/radio-button-group.jsx'),
-  RaisedButton: require('./js/raised-button.jsx'),
-  Slider: require('./js/slider.jsx'),
-  SvgIcon: require('./js/svg-icons/svg-icon.jsx'),
+  Paper: require('./js/paper'),
+  RadioButton: require('./js/radio-button'),
+  RadioButtonGroup: require('./js/radio-button-group'),
+  RaisedButton: require('./js/raised-button'),
+  Slider: require('./js/slider'),
+  SvgIcon: require('./js/svg-icons/svg-icon'),
   Icons: {
-    NavigationMenu: require('./js/svg-icons/navigation-menu.jsx'),
-    NavigationChevronLeft: require('./js/svg-icons/navigation-chevron-left.jsx'),
-    NavigationChevronRight: require('./js/svg-icons/navigation-chevron-right.jsx')
+    NavigationMenu: require('./js/svg-icons/navigation-menu'),
+    NavigationChevronLeft: require('./js/svg-icons/navigation-chevron-left'),
+    NavigationChevronRight: require('./js/svg-icons/navigation-chevron-right')
   },
-  Tab: require('./js/tabs/tab.jsx'),
-  Tabs: require('./js/tabs/tabs.jsx'),
-  Toggle: require('./js/toggle.jsx'),
-  Snackbar: require('./js/snackbar.jsx'),
-  TextField: require('./js/text-field.jsx'),
-  Toolbar: require('./js/toolbar.jsx'),
-  ToolbarGroup: require('./js/toolbar-group.jsx'),
-  Tooltip: require('./js/tooltip.jsx'),
+  Tab: require('./js/tabs/tab'),
+  Tabs: require('./js/tabs/tabs'),
+  Toggle: require('./js/toggle'),
+  Snackbar: require('./js/snackbar'),
+  TextField: require('./js/text-field'),
+  Toolbar: require('./js/toolbar'),
+  ToolbarGroup: require('./js/toolbar-group'),
+  Tooltip: require('./js/tooltip'),
   Utils: {
-    CssEvent: require('./js/utils/css-event.js'),
-    Dom: require('./js/utils/dom.js'),
-    Events: require('./js/utils/events.js'),
-    KeyCode: require('./js/utils/key-code.js'),
-    KeyLine: require('./js/utils/key-line.js')
+    CssEvent: require('./js/utils/css-event'),
+    Dom: require('./js/utils/dom'),
+    Events: require('./js/utils/events'),
+    KeyCode: require('./js/utils/key-code'),
+    KeyLine: require('./js/utils/key-line')
   }
 };

src/js/app-bar.jsx

@@ -1,8 +1,8 @@
 var React = require('react');
-var Classable = require('./mixins/classable.js');
-var IconButton = require('./icon-button.jsx');
-var NavigationMenu = require('./svg-icons/navigation-menu.jsx');
-var Paper = require('./paper.jsx');
+var Classable = require('./mixins/classable');
+var IconButton = require('./icon-button');
+var NavigationMenu = require('./svg-icons/navigation-menu');
+var Paper = require('./paper');
 
 var AppBar = React.createClass({
 

src/js/app-canvas.jsx

@@ -1,5 +1,5 @@
 var React = require('react'),
-  Classable = require('./mixins/classable.js');
+  Classable = require('./mixins/classable');
 
 var AppCanvas = React.createClass({
 

src/js/checkbox.jsx

@@ -1,8 +1,8 @@
 var React = require('react');
-var EnhancedSwitch = require('./enhanced-switch.jsx');
-var Classable = require('./mixins/classable.js');
-var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank.jsx');
-var CheckboxChecked = require('./svg-icons/toggle-check-box-checked.jsx');
+var EnhancedSwitch = require('./enhanced-switch');
+var Classable = require('./mixins/classable');
+var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank');
+var CheckboxChecked = require('./svg-icons/toggle-check-box-checked');
 
 var Checkbox = React.createClass({
 

src/js/date-picker/calendar-month.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
 var Classable = require('../mixins/classable');
-var DateTime = require('../utils/date-time.js');
-var DayButton = require('./day-button.jsx');
+var DateTime = require('../utils/date-time');
+var DayButton = require('./day-button');
 
 var CalendarMonth = React.createClass({
 

src/js/date-picker/calendar-toolbar.jsx

@@ -1,9 +1,9 @@
 var React = require('react');
-var DateTime = require('../utils/date-time.js');
-var IconButton = require('../icon-button.jsx');
-var NavigationChevronLeft = require('../svg-icons/navigation-chevron-left.jsx');
-var NavigationChevronRight = require('../svg-icons/navigation-chevron-right.jsx');
-var SlideInTransitionGroup = require('../transition-groups/slide-in.jsx');
+var DateTime = require('../utils/date-time');
+var IconButton = require('../icon-button');
+var NavigationChevronLeft = require('../svg-icons/navigation-chevron-left');
+var NavigationChevronRight = require('../svg-icons/navigation-chevron-right');
+var SlideInTransitionGroup = require('../transition-groups/slide-in');
 
 var CalendarToolbar = React.createClass({
 

src/js/date-picker/calendar.jsx

@@ -1,12 +1,12 @@
 var React = require('react');
-var Classable = require('../mixins/classable.js');
-var WindowListenable = require('../mixins/window-listenable.js');
-var DateTime = require('../utils/date-time.js');
-var KeyCode = require('../utils/key-code.js');
-var CalendarMonth = require('./calendar-month.jsx');
-var CalendarToolbar = require('./calendar-toolbar.jsx');
-var DateDisplay = require('./date-display.jsx');
-var SlideInTransitionGroup = require('../transition-groups/slide-in.jsx');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var DateTime = require('../utils/date-time');
+var KeyCode = require('../utils/key-code');
+var CalendarMonth = require('./calendar-month');
+var CalendarToolbar = require('./calendar-toolbar');
+var DateDisplay = require('./date-display');
+var SlideInTransitionGroup = require('../transition-groups/slide-in');
 
 var Calendar = React.createClass({
 

src/js/date-picker/date-display.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
-var Classable = require('../mixins/classable.js');
-var DateTime = require('../utils/date-time.js');
-var SlideInTransitionGroup = require('../transition-groups/slide-in.jsx');
+var Classable = require('../mixins/classable');
+var DateTime = require('../utils/date-time');
+var SlideInTransitionGroup = require('../transition-groups/slide-in');
 
 var DateDisplay = React.createClass({
 

src/js/date-picker/date-picker-dialog.jsx

@@ -1,10 +1,10 @@
 var React = require('react');
-var Classable = require('../mixins/classable.js');
-var WindowListenable = require('../mixins/window-listenable.js');
-var KeyCode = require('../utils/key-code.js');
-var Calendar = require('./calendar.jsx');
-var DialogWindow = require('../dialog-window.jsx');
-var FlatButton = require('../flat-button.jsx');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var KeyCode = require('../utils/key-code');
+var Calendar = require('./calendar');
+var DialogWindow = require('../dialog-window');
+var FlatButton = require('../flat-button');
 
 var DatePickerDialog = React.createClass({
 

src/js/date-picker/date-picker.jsx

@@ -1,10 +1,10 @@
 var React = require('react');
-var Classable = require('../mixins/classable.js');
-var WindowListenable = require('../mixins/window-listenable.js');
-var DateTime = require('../utils/date-time.js');
-var KeyCode = require('../utils/key-code.js');
-var DatePickerDialog = require('./date-picker-dialog.jsx');
-var TextField = require('../text-field.jsx');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var DateTime = require('../utils/date-time');
+var KeyCode = require('../utils/key-code');
+var DatePickerDialog = require('./date-picker-dialog');
+var TextField = require('../text-field');
 
 var DatePicker = React.createClass({
 

src/js/date-picker/day-button.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
-var Classable = require('../mixins/classable.js');
-var DateTime = require('../utils/date-time.js');
-var EnhancedButton = require('../enhanced-button.jsx');
+var Classable = require('../mixins/classable');
+var DateTime = require('../utils/date-time');
+var EnhancedButton = require('../enhanced-button');
 
 var DayButton = React.createClass({
 

src/js/dialog-window.jsx

@@ -1,11 +1,11 @@
 var React = require('react');
-var WindowListenable = require('./mixins/window-listenable.js');
-var CssEvent = require('./utils/css-event.js');
-var KeyCode = require('./utils/key-code.js');
+var WindowListenable = require('./mixins/window-listenable');
+var CssEvent = require('./utils/css-event');
+var KeyCode = require('./utils/key-code');
 var Classable = require('./mixins/classable');
-var FlatButton = require('./flat-button.jsx');
-var Overlay = require('./overlay.jsx');
-var Paper = require('./paper.jsx');
+var FlatButton = require('./flat-button');
+var Overlay = require('./overlay');
+var Paper = require('./paper');
 
 var DialogWindow = React.createClass({
 

src/js/dialog.jsx

@@ -1,6 +1,6 @@
 var React = require('react');
 var Classable = require('./mixins/classable');
-var DialogWindow = require('./dialog-window.jsx');
+var DialogWindow = require('./dialog-window');
 
 var Dialog = React.createClass({
 

src/js/drop-down-icon.jsx

@@ -1,11 +1,11 @@
 var React = require('react');
-var Classable = require('./mixins/classable.js');
+var Classable = require('./mixins/classable');
 var ClickAwayable = require('./mixins/click-awayable');
-var KeyLine = require('./utils/key-line.js');
-var Paper = require('./paper.jsx');
-var FontIcon = require('./font-icon.jsx');
-var Menu = require('./menu.jsx');
-var MenuItem = require('./menu-item.jsx');
+var KeyLine = require('./utils/key-line');
+var Paper = require('./paper');
+var FontIcon = require('./font-icon');
+var Menu = require('./menu');
+var MenuItem = require('./menu-item');
 
 var DropDownIcon = React.createClass({
 

src/js/drop-down-menu.jsx

@@ -1,10 +1,10 @@
 var React = require('react');
-var Classable = require('./mixins/classable.js');
+var Classable = require('./mixins/classable');
 var ClickAwayable = require('./mixins/click-awayable');
-var DropDownArrow = require('./svg-icons/drop-down-arrow.jsx');
-var KeyLine = require('./utils/key-line.js');
-var Paper = require('./paper.jsx');
-var Menu = require('./menu.jsx');
+var DropDownArrow = require('./svg-icons/drop-down-arrow');
+var KeyLine = require('./utils/key-line');
+var Paper = require('./paper');
+var Menu = require('./menu');
 
 var DropDownMenu = React.createClass({
 

src/js/enhanced-button.jsx

@@ -1,9 +1,9 @@
 var React = require('react');
-var KeyCode = require('./utils/key-code.js');
-var Classable = require('./mixins/classable.js');
+var KeyCode = require('./utils/key-code');
+var Classable = require('./mixins/classable');
 var WindowListenable = require('./mixins/window-listenable');
-var FocusRipple = require('./ripples/focus-ripple.jsx');
-var TouchRipple = require('./ripples/touch-ripple.jsx');
+var FocusRipple = require('./ripples/focus-ripple');
+var TouchRipple = require('./ripples/touch-ripple');
 
 var EnhancedButton = React.createClass({