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;