react_on_rails 1.0.0.pre → 1.0.0

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import HelloWorld from '../containers/HelloWorld';
+
+const HelloWorldAppClient = props => {
+  const reactComponent = (
+    <HelloWorld {...props} />
+  );
+  return reactComponent;
+};
+
+export default HelloWorldAppClient;

data/lib/generators/react_on_rails/templates/no_redux/base/client/package.json.tt

@@ -0,0 +1,75 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "version": "1.1.0",
+  "description": "Built using the react_on_rails generator.",
+  "main": "server.js",
+  "engines": {
+    "node": "4.2.0",
+    "npm": "3.3.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial.git"
+  },
+  "keywords": [
+    "react",
+    "tutorial",
+    "comment",
+    "example"
+  ],
+  "author": "justin808",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues"
+  },
+  "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js",
+    "build:client": "NODE_ENV=production webpack --config webpack.client.rails.config.js",
+    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
+    "build:dev:client": "webpack -w --config webpack.client.rails.config.js",
+    "build:dev:server": "webpack -w --config webpack.server.rails.config.js",<%- unless options.skip_linters? %>
+   "lint": "npm run eslint && npm run jscs",
+    "eslint": "eslint --ext .js,.jsx .",
+    "jscs": "jscs --verbose ."<%- end %>
+  },
+  "dependencies": {
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "body-parser": "^1.14.1",
+    "es5-shim": "^4.1.14",
+    "es6-promise": "^3.0.2",
+    "expose-loader": "^0.7.0",
+    "imports-loader": "^0.6.4",
+    "jquery": "^2.1.4",
+    "jquery-ujs": "^1.1.0-1",
+    "loader-utils": "^0.2.11",
+    "react": "^0.14.0",
+    "react-bootstrap": "^0.27.0",
+    "react-dom": "^0.14.0",
+    "sleep": "^3.0.0",
+    "webpack": "^1.12.2"
+  },
+  "devDependencies": {<%- unless options.skip_linters? %>
+    "babel-eslint": "^4.1.3",
+    <%- end %>"babel-plugin-react-transform": "^1.1.1",
+    "bootstrap-sass": "^3.3.5",
+    "bootstrap-sass-loader": "^1.0.9",
+    "css-loader": "^0.19.0",<%- unless options.skip_linters? %>
+    "eslint": "^1.6.0",
+    "eslint-config-airbnb": "0.1.0",
+    "eslint-plugin-react": "^3.5.1",<%- end %>
+    "esprima-fb": "^15001.1001.0-dev-harmony-fb",
+    "express": "^4.13.3",
+    "file-loader": "^0.8.4",
+    "jade": "^1.11.0",<%- unless options.skip_linters? %>
+    "jscs": "^2.3.0",
+    <%- end %>"node-sass": "^3.3.3",
+    "react-transform-hmr": "^1.0.1",
+    "sass-loader": "^3.0.0",
+    "style-loader": "^0.12.4",
+    "url-loader": "^0.5.6",
+    "webpack-dev-server": "^1.12.0"
+  }
+}

data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import HelloWorld from '../containers/HelloWorld';
+
+const HelloWorldAppServer = props => {
+  const reactComponent = (
+    <HelloWorld {...props} />
+  );
+  return reactComponent;
+};
+
+export default HelloWorldAppServer;

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx

@@ -0,0 +1,8 @@
+import * as actionTypes from '../constants/helloWorldConstants';
+
+export function updateName(name) {
+  return {
+    type: actionTypes.HELLO_WORLD_NAME_UPDATE,
+    name,
+  };
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx

@@ -0,0 +1,48 @@
+// HelloWorldWidget is an arbitrary name for any "dumb" component. We do not recommend suffixing all your
+// dump component names with Widget.
+
+import React, { PropTypes } from 'react';
+import Immutable from 'immutable';
+import _ from 'lodash';
+
+// Simple example of a React "dumb" component
+export default class HelloWorldWidget extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    // Uses lodash to bind all methods to the context of the object instance, otherwise
+    // the methods defined here would not refer to the component's class, not the component
+    // instance itself.
+    _.bindAll(this, '_handleChange');
+  }
+
+  static propTypes = {
+    // We prefix all property and variable names pointing to Immutable.js objects with '$$'.
+    // This allows us to immediately know we don't call $$helloWorldStore['someProperty'], but instead use
+    // the Immutable.js `get` API for Immutable.Map
+    actions: PropTypes.object.isRequired,
+    $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
+  // React will automatically provide us with the event `e`
+  _handleChange(e) {
+    const name = e.target.value;
+    this.props.actions.updateName(name);
+  }
+
+  render() {
+    const $$helloWorldStore = this.props.$$helloWorldStore;
+    const name = $$helloWorldStore.get('name');
+    return (
+      <div>
+        <h3>
+          Hello, {name}!
+        </h3>
+        <p>
+          Say hello to:
+          <input type="text" value={name} onChange={this._handleChange} />
+        </p>
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx

@@ -0,0 +1,8 @@
+// See https://www.npmjs.com/package/mirror-creator
+// Allows us to easily setup constants inside of
+// client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
+import mirrorCreator from 'mirror-creator';
+
+export default mirrorCreator([
+  'HELLO_WORLD_NAME_UPDATE',
+]);

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import HelloWorldWidget from '../components/HelloWorldWidget';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Immutable from 'immutable';
+import * as helloWorldActionCreators from '../actions/helloWorldActionCreators';
+
+function select(state) {
+  // Which part of the Redux global state does our component want to receive as props?
+  // Note the use of `$$` to prefix the property name because the value is of type Immutable.js
+  return { $$helloWorldStore: state.$$helloWorldStore };
+}
+
+// Simple example of a React "smart" component
+class HelloWorld extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+
+    // This corresponds to the value used in function select above.
+    $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
+  render() {
+    const { dispatch, $$helloWorldStore } = this.props;
+    const actions = bindActionCreators(helloWorldActionCreators, dispatch);
+
+    // This uses the ES2015 spread operator to pass properties as it is more DRY
+    // This is equivalent to:
+    // <HelloWorldWidget $$helloWorldStore={$$helloWorldStore} actions={actions} />
+    return (
+      <HelloWorldWidget {...{$$helloWorldStore, actions}} />
+    );
+  }
+}
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/rackt/react-redux/blob/master/docs/api.md#examples
+export default connect(select)(HelloWorld);

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

@@ -0,0 +1,21 @@
+import Immutable from 'immutable';
+
+import * as actionTypes from '../constants/helloWorldConstants';
+
+export const $$initialState = Immutable.fromJS({
+  name: '', // this is the default state that would be used if one were not passed into the store
+});
+
+export default function helloWorldReducer($$state = $$initialState, action) {
+  const { type, name } = action;
+
+  switch (type) {
+    case actionTypes.HELLO_WORLD_NAME_UPDATE: {
+      return $$state.set('name', name);
+    }
+
+    default: {
+      return $$state;
+    }
+  }
+}

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.jsx

@@ -0,0 +1,14 @@
+// This file is our manifest of all reducers for the app.
+// See /client/app/bundles/HelloWorld/store/helloWorldStore.jsx
+// A real world app will like have many reducers and it helps to organize them in one file.
+// See `docs/generators/reducers.md` at https://github.com/shakacode/react_on_rails
+import helloWorldReducer from './helloWorldReducer';
+import { $$initialState as $$helloWorldState } from './helloWorldReducer';
+
+export default {
+  $$helloWorldStore: helloWorldReducer,
+};
+
+export const initalStates = {
+  $$helloWorldState,
+};

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../store/helloWorldStore';
+import HelloWorld from '../containers/HelloWorld';
+
+// See documentation for https://github.com/rackt/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+const HelloWorldAppClient = props => {
+  const store = createStore(props);
+  const reactComponent = (
+    <Provider store={store}>
+      <HelloWorld />
+    </Provider>
+  );
+  return reactComponent;
+};
+
+export default HelloWorldAppClient;

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx

@@ -0,0 +1,35 @@
+import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
+
+// See https://github.com/gaearon/redux-thunk and http://redux.js.org/docs/advanced/AsyncActions.html
+// This is not actually used for this simple example, but you'd probably want to use this once your app has
+// asynchronous actions.
+import thunkMiddleware from 'redux-thunk';
+
+// This provides an example of logging redux actions to the console.
+// You'd want to disable this for production.
+import loggerMiddleware from 'lib/middlewares/loggerMiddleware';
+
+import reducers from '../reducers';
+import { initalStates } from '../reducers';
+
+export default props => {
+  // This is how we get initial props Rails into redux.
+  const { name } = props;
+  const { $$helloWorldState } = initalStates;
+
+  // Redux expects to initialize the store using an Object, not an Immutable.Map
+  const initialState = {
+    $$helloWorldStore: $$helloWorldState.merge({
+      name: name,
+    }),
+  };
+
+  const reducer = combineReducers(reducers);
+  const composedStore = compose(
+    applyMiddleware(thunkMiddleware, loggerMiddleware)
+  );
+  const storeCreator = composedStore(createStore);
+  const store = storeCreator(reducer, initialState);
+
+  return store;
+};

data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js

@@ -0,0 +1,25 @@
+/* eslint no-console: 0 */
+import _ from 'lodash';
+
+// This logger should be configured not to run in a production environment.
+// See https://github.com/petehunt/webpack-howto#6-feature-flags for you might turn this off for production.
+export default function logger({ getState }) {
+  return next => action => {
+    console.log('will dispatch', action);
+
+    // Call the next dispatch method in the middleware chain.
+    const result = next(action);
+
+    // We can't console.log immutable objects out-of-the-box.
+    const immutableState = getState();
+    const readableState = _.reduce(immutableState, (result, immutable, key) => {
+      result[key] = immutable.toJS();
+    }, {});
+
+    console.log('state after dispatch', readableState);
+
+    // This will likely be the action itself, unless
+    // a middleware further in chain changed it.
+    return result;
+  };
+}

data/lib/generators/react_on_rails/templates/redux/base/client/package.json.tt

@@ -0,0 +1,82 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "version": "1.1.0",
+  "description": "Built using the react_on_rails generator.",
+  "main": "server.js",
+  "engines": {
+    "node": "4.2.0",
+    "npm": "3.3.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial.git"
+  },
+  "keywords": [
+    "react",
+    "tutorial",
+    "comment",
+    "example"
+  ],
+  "author": "justin808",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues"
+  },
+  "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js",
+    "build:client": "NODE_ENV=production webpack --config webpack.client.rails.config.js",
+    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
+    "build:dev:client": "webpack -w --config webpack.client.rails.config.js",
+    "build:dev:server": "webpack -w --config webpack.server.rails.config.js",<%- unless options.skip_linters? %>
+    "lint": "npm run eslint && npm run jscs",
+    "eslint": "eslint --ext .js,.jsx .",
+    "jscs": "jscs --verbose ."<%- end %>
+  },
+  "dependencies": {
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "body-parser": "^1.14.1",
+    "es5-shim": "^4.1.14",
+    "es6-promise": "^3.0.2",
+    "expose-loader": "^0.7.0",
+    "immutable": "^3.7.5",
+    "imports-loader": "^0.6.4",
+    "jquery": "^2.1.4",
+    "jquery-ujs": "^1.1.0-1",
+    "lodash": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+    "loader-utils": "^0.2.11",
+    "mirror-creator": "0.0.1",
+    "react": "^0.14.0",
+    "react-bootstrap": "^0.27.0",
+    "react-dom": "^0.14.0",
+    "react-redux": "^3.1.0",
+    "redux": "^3.0.2",
+    "redux-promise": "^0.5.0",
+    "redux-thunk": "^1.0.0",
+    "sleep": "^3.0.0",
+    "webpack": "^1.12.2"
+  },
+  "devDependencies": {<%- unless options.skip_linters? %>
+    "babel-eslint": "^4.1.3",<%- end %>
+    "babel-plugin-react-transform": "^1.1.1",
+    "bootstrap-sass": "^3.3.5",
+    "bootstrap-sass-loader": "^1.0.9",
+    "css-loader": "^0.19.0",<%- unless options.skip_linters? %>
+    "eslint": "^1.6.0",
+    "eslint-config-airbnb": "0.1.0",
+    "eslint-plugin-react": "^3.5.1",<%- end %>
+    "esprima-fb": "^15001.1001.0-dev-harmony-fb",
+    "express": "^4.13.3",
+    "file-loader": "^0.8.4",
+    "jade": "^1.11.0",<%- unless options.skip_linters? %>
+    "jscs": "^2.3.0",<%- end %>
+    "node-sass": "^3.3.3",
+    "react-transform-hmr": "^1.0.1",
+    "sass-loader": "^3.0.0",
+    "style-loader": "^0.12.4",
+    "url-loader": "^0.5.6",
+    "webpack-dev-server": "^1.12.0"
+  }
+}

data/lib/generators/react_on_rails/templates/redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../store/helloWorldStore';
+import HelloWorld from '../containers/HelloWorld';
+
+// See documentation for https://github.com/rackt/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+// This is how the server redux gets hydrated with data.
+const HelloWorldAppServer = props => {
+  const store = createStore(props);
+  const reactComponent = (
+    <Provider store={store}>
+      <HelloWorld />
+    </Provider>
+  );
+  return reactComponent;
+};
+
+export default HelloWorldAppServer;