example fot issue

mui/material-ui#1908 (comment)

assets/adm/components/Root.jsx → assets/app.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Router, { RouteHandler } from 'react-router';
+import ReactDOM from 'react-dom';
 
 const {
   DropDownIcon,
@@ -11,7 +11,7 @@ const {
   ToolbarSeparator,
   ToolbarTitle,
   Styles
-} = require('material-ui');
+  } = require('material-ui');
 
 const { Colors, Spacing, Typography } = Styles;
 const ThemeManager = Styles.ThemeManager;
@@ -31,22 +31,20 @@ let iconMenuItems = [
   { payload: '2', text: 'More Info' }
 ];
 
-class Root extends React.Component {
+class App extends React.Component {
   constructor(){
     super();
   }
 
   componentWillMount(){
     this.setState({
-      static : "/public/",
       muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
     });
   }
 
   getChildContext() {
     return {
-      muiTheme: this.state.muiTheme,
-      static : this.state.static
+      muiTheme: this.state.muiTheme
     };
   }
 
@@ -65,20 +63,18 @@ class Root extends React.Component {
             <RaisedButton label="Create Broadcast" primary={true} />
           </ToolbarGroup>
         </Toolbar>
-        {this.props.children || "Welcome to your Inbox"}
       </div>
     );
   }
 }
 
-Root.contextTypes = {
+App.contextTypes = {
   router: React.PropTypes.func
 };
 
-Root.childContextTypes = {
+App.childContextTypes = {
   muiTheme: React.PropTypes.object,
-  router: React.PropTypes.func,
-  static: React.PropTypes.string.isRequired
+  router: React.PropTypes.func
 };
 
-module.exports = Root;
+ReactDOM.render(<App />, document.getElementById('app'));

assets/gulp/util/bundleLogger.coffee

@@ -2,12 +2,12 @@ gutil = require('gulp-util')
 prettyHrtime = require('pretty-hrtime')
 startTime = undefined
 module.exports =
-    start: (filepath) ->
-        startTime = process.hrtime()
-        gutil.log 'Bundling', gutil.colors.green(filepath) + '...'
-        return
-    end: (filepath) ->
-        taskTime = process.hrtime(startTime)
-        prettyTime = prettyHrtime(taskTime)
-        gutil.log 'Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime)
-        return
+  start: (filepath) ->
+    startTime = process.hrtime()
+    gutil.log 'Bundling', gutil.colors.green(filepath) + '...'
+    return
+  end: (filepath) ->
+    taskTime = process.hrtime(startTime)
+    prettyTime = prettyHrtime(taskTime)
+    gutil.log 'Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime)
+    return

assets/gulp/util/handleErrors.coffee

@@ -1,11 +1,11 @@
 notify = require('gulp-notify')
 
 module.exports = ->
-    args = Array::slice.call(arguments)
-    # Send error to notification center with gulp-notify
-    notify.onError(
-        title: 'Compile Error'
-        message: '<%= error.message %>').apply this, args
-    # Keep gulp from hanging on this task
-    @emit 'end'
-    return
+  args = Array::slice.call(arguments)
+  # Send error to notification center with gulp-notify
+  notify.onError(
+    title: 'Compile Error'
+    message: '<%= error.message %>').apply this, args
+  # Keep gulp from hanging on this task
+  @emit 'end'
+  return

assets/gulpfile.coffee

@@ -13,88 +13,39 @@ Path =
   static: './static/'
 
 vendors = [
-  'es6-promise'
-  'flux'
-  'immutable'
-  'lodash'
   'material-ui'
   'react'
   'react-dom'
-  'react-router'
-  'history'
+  'react-addons-create-fragment'
+  'react-addons-pure-render-mixin'
+  'react-addons-transition-group'
+  'react-addons-update'
+  'react-tap-event-plugin'
 ]
 
-Task =
-  Vendor: (args)->
-    ((o)->
-      stream = browserify(
-        debug: false
-        require: vendors
-      )
-      stream.bundle()
-      .pipe(source(o.fileName + '.js'))
-      .pipe(gulp.dest(Path.static + 'js/vendor'))
 
-      stream
-    ) args
-  Jsx : (args)->
-    ((o)->
-      o.vendors = false
+gulp.task 'default', ()->
+  stream = browserify
+    debug: false
+    cache: {}
+    packageCache: {}
+    basedir: __dirname
+    entries: [path.join(__dirname, '/app.jsx')]
+    fullPaths: false
+    extensions: ['.js', '.jsx']
+    transform : [babelify]
 
-      stream = browserify
-        debug: o.env isnt 'production'
-        cache: {}
-        packageCache: {}
-        basedir: __dirname
-        fullPaths: false
-        paths: [
-          path.join(__dirname, o.dirName)
-        ]
-        entries: [path.join(__dirname, '/' + o.fileName + '.jsx')]
-        extensions: ['.js', '.jsx']
-        transform : [babelify]
+  #stream.require vendors
 
-      if o.env isnt 'production'
+  bundle = ()->
+    bundleLogger.start(Path.assets + 'app.jsx')
+    stream.bundle().on('error', handleErrors)
+    .pipe(source('app.js'))
+    .pipe gulp.dest Path.static + 'js'
+    .on 'end', reportFinished
 
-        if o.vendors is false
-          o.vendors = true
-          Task.Vendor(fileName: o.fileName)
+  reportFinished = ->
+    # Log when bundling completes
+    bundleLogger.end('app.jsx')
 
-        vendors.forEach (vendor)->
-          stream.external vendor
-      else
-        stream.require vendors
-        o.fileName = o.fileName + '.min'
-
-      bundle = ()->
-        bundleLogger.start(o.fileName)
-        stream.bundle().on('error', handleErrors)
-        .pipe(source(o.fileName + '.js'))
-        .pipe(if o.env is 'production' then streamify(uglify(mangle: false)) else gutil.noop())
-        .pipe gulp.dest Path.static + 'js'
-        .on 'end', reportFinished
-
-      if global.isWatching
-        # Wrap with watchify and rebundle on changes
-        stream = watchify(stream)
-        # Rebundle on update
-        stream.on 'update', bundle
-
-      reportFinished = ->
-        # Log when bundling completes
-        bundleLogger.end(o.fileName)
-
-      bundle()
-
-    ) args
-
-gulp.task 'setWatch', ->
-  global.isWatching = true;
-
-gulp.task 'adm', ()->
-  Task.Jsx({dirName: '/adm/', fileName: 'adm', env : 'development'})
-
-gulp.task 'default', [
-  'setWatch'
-  'adm'
-]
+  bundle()

index.html

@@ -5,8 +5,7 @@
   <title></title>
 </head>
 <body>
-<div id="admin"></div>
-<script type="text/javascript" src="static/js/vendor/adm.js"></script>
-<script type="text/javascript" src="static/js/adm.js"></script>
+<div id="app"></div>
+<script type="text/javascript" src="static/js/app.js"></script>
 </body>
 </html>

package.json

@@ -2,39 +2,28 @@
   "version": "1.0.0",
   "private": true,
   "main": "index.js",
-  "scripts": {
-    "dev": "NODE_PATH=. NODE_ENV=development gulp dev",
-    "prod": "NODE_PATH=. NODE_ENV=production gulp prod"
-  },
+  "scripts": {},
   "dependencies": {
+    "material-ui": "^0.13.1",
+    "react": "^0.14.1",
+    "react-addons-create-fragment": "^0.14.1",
+    "react-addons-pure-render-mixin": "^0.14.1",
+    "react-addons-transition-group": "^0.14.1",
+    "react-addons-update": "^0.14.1",
+    "react-dom": "^0.14.1",
+    "react-tap-event-plugin": "^0.2.1"
+  },
+  "devDependencies": {
     "babelify": "^6.3.0",
     "browserify": "^11.2.0",
     "coffee-script": "^1.10.0",
     "gulp": "^3.9.0",
     "gulp-notify": "^2.2.0",
-    "gulp-sass": "^2.0.4",
-    "gulp-streamify": "^1.0.2",
-    "gulp-uglify": "^1.4.2",
     "gulp-util": "^3.0.6",
-    "gulp-watch": "^4.3.5",
-    "history": "^1.12.5",
     "path": "^0.12.7",
     "pretty-hrtime": "^1.0.1",
-    "react-dom": "^0.14.0",
-    "reactify": "^1.1.1",
-    "uglify-js": "^2.5.0",
-    "uglifyify": "^3.0.1",
+    "react-addons-update": "^0.14.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.4.0"
-  },
-  "devDependencies": {
-    "es6-promise": "^3.0.2",
-    "flux": "^2.1.1",
-    "immutable": "^3.7.5",
-    "lodash": "^3.10.1",
-    "material-ui": "~0.12.1",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-router": "^1.0.0-rc3"
   }
 }