Update libraries and JSX for current versions 1/23/2015

* Required a few JSX changes.
* Don't use import for commonjs modules
* key changed to eventKey for NavItem
* Use different names for the the native input HTML elements compared to
  the react-bootstrap ones
* Could not update the sass-loader without errors
* Moved all Sass related parts of webpack to the webpack.hot.config.js
  as Rails version does not use the Webpack sass handlers.
* Changed webpack.rails.config.js so that the loader for JSX does not
  use react-hot
* Added the woff2 pattern for the file loader.
* Changed from React.renderComponent to React.render in example.jsx.

Author: justin808

README.md

@@ -175,7 +175,7 @@ buildpack:
 heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
 ```
 
-This runs the two buildpacks in the `.buildpacks` file.
+This runs the two buildpacks in the `.buildpacks` directory.
 
 Also make sure you are running the latest heroku stack, cedar-14, to avoid running
 into the [following issue](https://github.com/sass/node-sass/issues/467#issuecomment-61729195).
@@ -188,3 +188,14 @@ To deploy the app on Heroku:
 ```
 git push heroku master
 ```
+
+# Update Node Modules
+```
+npm-check-updates -u
+npm-install
+```
+Then confirm that the hot reload server and the rails server both work fine. You
+may have to delete `node_modules` and `npm-shrinkwrap.json` and then run `npm
+shrinkwrap`.
+
+

npm-shrinkwrap.json

@@ -7,32 +7,31 @@
     "node": "0.10.32"
   },
   "dependencies": {
-    "body-parser": "^1.9.0",
-    "bootstrap-sass": "^3.3.1",
-    "bootstrap-sass-loader": "0.0.5",
-    "bootstrap-webpack": "*",
     "es6-loader": "^0.2.0",
-    "express": "^4.9.8",
+    "body-parser": "^1.10.2",
     "imports-loader": "^0.6.3",
-    "jquery": "^2.1.1",
-    "jsx-loader": "^0.11.2",
-    "loader-utils": "^0.2.2",
-    "marked": "^0.3.2",
-    "react": "^0.11.2",
-    "react-bootstrap": "^0.12.0",
-    "sleep": "1.1.8",
-    "webpack": "^1.4.8"
+    "jquery": "^2.1.3",
+    "jsx-loader": "^0.12.2",
+    "loader-utils": "^0.2.6",
+    "marked": "^0.3.3",
+    "react": "^0.12.2",
+    "react-bootstrap": "^0.13.3",
+    "sleep": "^1.2.0",
+    "webpack": "^1.5.3"
   },
   "devDependencies": {
-    "css-loader": "^0.9.0",
-    "expose-loader": "^0.5.3",
-    "extract-text-webpack-plugin": "^0.3.3",
+    "express": "^4.11.1",
+    "bootstrap-sass": "^3.3.3",
+    "bootstrap-sass-loader": "0.0.6",
+    "css-loader": "^0.9.1",
+    "expose-loader": "^0.6.0",
+    "extract-text-webpack-plugin": "^0.3.8",
     "file-loader": "^0.8.1",
-    "react-hot-loader": "^0.5.0",
+    "react-hot-loader": "^1.1.3",
     "sass-loader": "^0.2.0",
-    "style-loader": "^0.8.1",
+    "style-loader": "^0.8.3",
     "url-loader": "^0.5.5",
-    "webpack-dev-server": "^1.6.5"
+    "webpack-dev-server": "^1.7.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package.json

@@ -1,7 +1,5 @@
-/** @jsx React.DOM */
-
 var $ = require('jquery');
-module React from 'react/addons';
+var React = require('react/addons');
 
 // Next line is necessary for exposing React to browser for
 // the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
@@ -34,6 +32,7 @@ var CommentBox = React.createClass({
   logError: function(xhr, status, err) {
     console.error(`Error loading comments from server!\nURL is ${this.props.url}\nstatus is ${status}\nerr is ${err.toString()}`);
   },
+
   loadCommentsFromServer: function() {
     $.ajax({
       url: this.props.url,
@@ -42,6 +41,7 @@ var CommentBox = React.createClass({
       }, this.logError);
   },
   emptyFormData:  { author: "", text: "" },
+
   handleCommentSubmit: function() {
     // `setState` accepts a callback. To avoid (improbable) race condition,
     // `we'll send the ajax request right after we optimistically set the new
@@ -61,13 +61,15 @@ var CommentBox = React.createClass({
         this.setState({ajaxSending: false});
       });
   },
+
   getInitialState: function() {
     return {
       data: [],
       formData: this.emptyFormData,
       ajaxSending: false
     };
   },
+
   componentDidMount: function() {
     this.loadCommentsFromServer();
     setInterval(this.loadCommentsFromServer, this.props.pollInterval);
@@ -78,6 +80,7 @@ var CommentBox = React.createClass({
       formData: obj
     })
   },
+
   render: function() {
     return (
       <div className="commentBox container">
@@ -116,31 +119,36 @@ var CommentForm = React.createClass({
       formMode: 0
     };
   },
+
   handleSubmit: function(e) {
     e.preventDefault();
     this.props.onCommentSubmit();
     return;
   },
+
   handleSelect: function(selectedKey) {
     this.setState({ formMode: selectedKey });
   },
+
   handleChange: function() {
     // This could also be done using ReactLink:
     // http://facebook.github.io/react/docs/two-way-binding-helpers.html
-    var props;
-    if (this.props.formMode == 2) {
-      props = {
-        author: this.refs.author.getDOMNode().value,
-        text: this.refs.text.getDOMNode().value
-      }
-    } else {
-      props = {
+    var obj;
+    if (this.state.formMode < 2) {
+      obj = {
         author: this.refs.author.getValue(),
         text: this.refs.text.getValue()
       }
+    } else {
+      // This is different because the input is a native HTML element rather than a React element
+      obj = {
+        author: this.refs.inlineAuthor.getDOMNode().value,
+        text: this.refs.inlineText.getDOMNode().value
+      }
     }
-    this.props.onChange(props);
+    this.props.onChange(obj);
   },
+
   formHorizontal: function() {
     return (
       <div><hr/>
@@ -151,6 +159,7 @@ var CommentForm = React.createClass({
         </form></div>
     );
   },
+
   formStacked: function() {
     return (
       <div><hr/>
@@ -168,10 +177,10 @@ var CommentForm = React.createClass({
           <Input label="Inline Form" wrapperClassName="wrapper">
             <Row>
               <Col xs={3}>
-                <input type="text" className="form-control" placeholder="Your Name" ref="author" value={this.props.formData.author} onChange={this.handleChange} disabled={this.props.ajaxSending} />
+                <input type="text" className="form-control" placeholder="Your Name" ref="inlineAuthor" value={this.props.formData.author} onChange={this.handleChange} disabled={this.props.ajaxSending} />
               </Col>
               <Col xs={8}>
-                <input type="text" className="form-control" placeholder="Say something..." ref="text" value={this.props.formData.text} onChange={this.handleChange} disabled={this.props.ajaxSending} />
+                <input type="text" className="form-control" placeholder="Say something..." ref="inlineText" value={this.props.formData.text} onChange={this.handleChange} disabled={this.props.ajaxSending} />
               </Col>
               <Col xs={1}>
                 <input type="submit" className="btn btn-primary" value="Post" disabled={this.props.ajaxSending} />
@@ -196,9 +205,9 @@ var CommentForm = React.createClass({
     return (
       <div>
         <Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
-          <NavItem key={0}>Horizontal Form</NavItem>
-          <NavItem key={1}>Stacked Form</NavItem>
-          <NavItem key={2}>Inline Form</NavItem>
+          <NavItem eventKey={0}>Horizontal Form</NavItem>
+          <NavItem eventKey={1}>Stacked Form</NavItem>
+          <NavItem eventKey={2}>Inline Form</NavItem>
         </Nav>
         {inputForm}
       </div>

webpack/assets/javascripts/CommentBox.jsx

@@ -1,13 +1,12 @@
-/** @jsx React.DOM */
+var React = require('react/addons');
 
-module React from 'react';
 import { CommentBox } from './CommentBox';
 
 var $ = require('jquery');
 
 var render = () => {
   if ($("#content").length > 0) {
-    React.renderComponent(
+    React.render(
       <div>
         <CommentBox url="comments.json" pollInterval={2000} />
         <div className="container">
@@ -22,7 +21,7 @@ var render = () => {
       document.getElementById('content')
     );
   }
-}
+};
 
 $(function() {
   render();

webpack/assets/javascripts/example.jsx

@@ -17,14 +17,7 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.css$/, loader: "style-loader!css-loader" },
-      { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
-
-      // The url-loader uses DataUrls. The file-loader emits files.
-      { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
-      { test: /\.ttf$/,    loader: "file-loader" },
-      { test: /\.eot$/,    loader: "file-loader" },
-      { test: /\.svg$/,    loader: "file-loader" }
+      { test: require.resolve("react"), loader: "expose?React" }
     ]
   }
 };

webpack/webpack.common.config.js

@@ -1,6 +1,7 @@
 // Run like this:
 // cd webpack && node server.js
 
+var path = require("path");
 var config = require("./webpack.common.config");
 var webpack = require("webpack");
 
@@ -18,4 +19,19 @@ config.module.loaders.push(
 );
 config.plugins = [ new webpack.HotModuleReplacementPlugin() ];
 config.devtool = "eval-source-map";
+
+// All the styling loaders only apply to hot-reload, not rails
+config.module.loaders.push(
+  { test: /\.jsx$/, loaders: ["react-hot", "es6", "jsx?harmony"] },
+  { test: /\.css$/, loader: "style-loader!css-loader" },
+  { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images&includePaths[]=" +
+    path.resolve(__dirname, "./assets/stylesheets")},
+
+  // The url-loader uses DataUrls. The file-loader emits files.
+  { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
+  { test: /\.woff2$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
+  { test: /\.ttf$/,    loader: "file-loader" },
+  { test: /\.eot$/,    loader: "file-loader" },
+  { test: /\.svg$/,    loader: "file-loader" });
+
 module.exports = config;

webpack/webpack.hot.config.js

@@ -2,6 +2,8 @@
 // cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
 // Note that Foreman (Procfile.dev) has also been configured to take care of this.
 
+// NOTE: All style sheets handled by the asset pipeline in rails
+
 var config = require("./webpack.common.config");
 
 config.entry.push("./scripts/rails_only"); // rails specific assets
@@ -10,26 +12,17 @@ config.output = { filename: "webpack-bundle.js",
 config.externals = { jquery: "var jQuery" }; // load jQuery from cdn or rails asset pipeline
 config.module.loaders.push(
   { test: /\.jsx$/, loaders: ["es6", "jsx?harmony"] },
-  { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"},
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after webpack-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.
   { test: require.resolve("jquery"), loader: "expose?jQuery" },
   { test: require.resolve("jquery"), loader: "expose?$" }
 );
+module.exports = config;
 
 var devBuild = (typeof process.env["BUILDPACK_URL"]) === "undefined";
 if (devBuild) {
   console.log("Webpack dev build for Rails");
-  config.module.loaders.push(
-    { test: require.resolve("react"), loader: "expose?React" },
-    { test: /\.jsx$/, loaders: ["react-hot", "es6", "jsx?harmony"] }
-  );
-  config.devtool = "eval-source-map";
+  module.exports.devtool = "eval-source-map";
 } else {
   console.log("Webpack production build for Rails");
-  config.module.loaders.push(
-    { test: /\.jsx$/, loaders: ["es6", "jsx?harmony"] }
-  );
 }
-
-module.exports = config;