react_rails_webpack 1.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2afcde60582db2cc8f2515626631b4487a623e52
+  data.tar.gz: dd31b30aaf1daad94c2bb6d42ad03bf310bc0949
+SHA512:
+  metadata.gz: 541cd90bdfcede1cd55f82bb1b43901eb9af7db2fdc5f6fb0c00aec6daea50082306878765b43ecd040de91a19639263915331875db0f39753b33d28d75321e8
+  data.tar.gz: 1f73ba6a30b9bab83c02c9f996e88ad44ec98e5b73c8def14f9831ade03e2b93db669cb37a9fe5143a06ceeda8852588eceb2c9dc910d6b4bd6d16ab83337917

data/.gitignore

@@ -0,0 +1,10 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+/lib/react_rails_webpack/client/node_modules

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at neurodynamicdev@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in react_rails_webpack.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Neurodynamic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,179 @@
+# ReactRailsWebpack
+
+A set of Rails generators that create all the necessary boilerplate code for integrating React, Webpack, and Redux libraries into Rails 4.0+ apps.
+
+## Quick Start
+
+### Install
+
+1. Make sure you have the [requirements](#requirements) installed
+2. Add `gem 'react_rails_webpack'` to your Gemfile
+3. Run `bundle install`
+4. Run `rails g react_rails_webpack:install` ([further explanation of what this does](#generating-the-integration))
+5. Run `npm run install`
+6. Run `npm run build`
+7. Set the dev server hostname ([instructions](#setting-the-dev-server-hostname))
+
+### Add example page
+
+1. Run `rails g react_rails_webpack:create_example_page`
+2. Start the Rails server (run `rails server`)
+3. Go to [localhost:3000/greeting](http://localhost:3000/greeting) to see your React/Rails integration in action
+
+### Suggested Development Workflow
+
+1. Write and test new components by running the webpack dev server with the command `npm run start` (note: the base html page for the webpack dev server is based on the html provided to `context.defaultTemplate` in [the webpack.config.js file](lib/react_rails_webpack/client/webpack.config.js))
+2. Add any components you want to spin up with the `react_component` helper in Rails to [the available components file](lib/react_rails_webpack/client/src/app/availableComponents.js) ([further explanation](#creating-and-using-your-own-components))
+3. Run the `npm run build` command to compile your javascript files and add them to the Rails assets folder
+4. Add calls to the `react_component` helper method in your Rails app to render your React components in views
+5. Make sure they still work, repeat steps 1-5 until satisfied
+
+## About
+
+When I looked over the available gems for react/rails integrations, none of them were as customizable as I wanted, so I decided to build my own. Since I wanted it to be as customizable as possible, I made my gem a set of generators, instead of a bunch of under-the-hood gem code. You can customize the inner workings of this integration to your heart's content, since all the files used for the integration will be added directly to your app. You can edit them, delete them, and add or remove any npm packages you like, because this integration allows you to use any npm packages you could use in a static front-end react app.
+
+### Pros:
+
+- Webpack integration
+- Hot-reloading webpack development server
+- Ability to see dev server output on any computer (or mobile device) on your network
+- Built-in redux integration
+- Generators provide example code for basic react components and react-redux components
+- Highly customizable
+- Ability to use any npm packages that you could use on a static front-end app
+
+### Cons:
+
+- This gem does not do server-side rendering, so if you need to do SEO stuff within your react components, it's probably the wrong choice
+
+## Installing the Gem
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'react_rails_webpack'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install react_rails_webpack
+
+## Requirements
+
+- [Rails](http://rubyonrails.org/) 4.0+
+- [node](https://nodejs.org/) (tested on 4.2.2)
+- [npm](https://www.npmjs.com/) (tested on 3.4.0)
+
+## Generating the Integration
+
+Run the install generator like this:
+
+    $ rails g react_rails_webpack:install
+
+This will setup a basic react integration with some example components (one standard react component and one using react with redux) under [a client folder](lib/react_rails_webpack/client) in your project's root. Once the generator's run is done, run the commands below (from your project's root):
+
+**Note**: Make sure you have [node](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your machine before running these.
+
+    $ npm run install   # installs the needed npm packages
+    $ npm run build     # uses webpack to compile your javascript code to your assets folder
+
+Then set the dev server hostname ([instructions](#setting-the-dev-server-hostname)).
+
+## Setting the dev server hostname
+
+Then go to [the client/environment.json file](lib/react_rails_webpack/client/environment.json) and fill in your computer's network name. If you're using a Mac, to find out what your computer's network name is, you can go to `System Preferences`, and then the `Sharing` menu, and you should see it in the `Computer Name` field. `environment.json` should end up looking something like this:
+
+```
+{
+  "hostname": "my_mac.local"
+}
+```
+
+## Generating an Example Page
+
+If you want to setup an example page in your Rails app that uses the provided React components, run:
+
+    $ rails g react_rails_webpack:create_example_page
+
+Then run the rails server and go to [the greeting page](localhost:3000/greeting) to see everything in action.
+
+## Creating and using your own components
+
+Let's say you want to make a checkout form component with react. Here's what you'd need to do to use it from Rails:
+
+- Create the component in the [client/src/components](lib/react_rails_webpack/client/src/components) directory
+- Add the component to the list of components in the [client/src/app/availableComponents.js](lib/react_rails_webpack/client/src/app/availableComponents.js) file (this file is what makes components available to Rails)
+
+For example, if you called your component `CheckoutForm`, your `client/src/app/availableComponents.js` file might look like this:
+
+```javascript
+import CheckoutForm from '../components/CheckoutForm'
+
+export default {
+  CheckoutForm: {
+    class: CheckoutForm
+  }
+}
+```
+
+Or like this if it's a component that uses redux:
+
+```javascript
+import {CheckoutFormContainer} from '../components/CheckoutForm'
+
+export default {
+  CheckoutForm: {
+    redux: true,
+    class: CheckoutFormContainer
+  }
+}
+```
+
+- Wherever you want this component to render in your view, put a call to the `react_component` helper method with the components name and props, like so:
+
+```ruby
+render_component "CheckoutForm", { customerName: 'Harper' }
+```
+
+## Adding Trailblazer Integration
+
+Running this generator:
+
+    $ rails g react_rails_webpack:trailblazer_integration
+
+Will add a [trailblazer](https://github.com/apotonick/trailblazer) cell for react components to your `lib` folder.
+
+
+## Working with the Webpack Dev Server
+
+`npm run start` will start a webpack development server with hot reloading that is completely independent of your Rails app. You can see the output of this server on any computer or mobile device on your local network by going to `hostname:3000` (replace `hostname` with whatever you set it to in the `hostname.json` file).
+
+## Gotchas
+
+### Forgetting to run `npm run build`
+
+Remember, while your changes to components will hot reload when you use the webpack dev server, they will not show up at all in your Rails app until you run the `npm run build` command.
+
+### Forgetting to add components to the `client/src/app/availableComponents.js` file
+
+Components will not be accessible from Rails if you forget to add them here.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/neurodynamic/react_rails_webpack. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "react_rails_webpack"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/react_rails_webpack/app/controllers/react_example_controller.rb

@@ -0,0 +1,6 @@
+class ReactExampleController < ApplicationController
+  def greeting
+    @props_for_hello_component = { details: 'My initial greeting was set with getInitialState in the client/src/components/Hello.jsx file.' }
+    @props_for_hello_with_redux_component = { details: 'My initial greeting was set with initialState in the client/src/redux/reducer.js file.' }
+  end
+end

data/lib/react_rails_webpack/app/helpers/react_helper.rb

@@ -0,0 +1,21 @@
+require 'json'
+
+module ReactHelper
+  include ActionView::Helpers::JavaScriptHelper
+
+  # Props should be a Ruby hash
+  def react_component(component_name, props = {})
+    # Give second argument to content_tag some text
+    # if you want to test to see if React is properly
+    # replacing its content with a component
+    content_tag(
+      :div,
+      javascript_tag('renderLastComponentDiv()'),
+      class: 'react-component-target',
+      data: {
+        componentName: component_name,
+        componentProps: props.to_json
+      }
+    )
+  end
+end

data/lib/react_rails_webpack/app/views/react_example/greeting.html.erb

@@ -0,0 +1,2 @@
+<%= react_component "Hello", @props_for_hello_component %>
+<%= react_component "HelloWithRedux", @props_for_hello_with_redux_component %>

data/lib/react_rails_webpack/client/environment.json

@@ -0,0 +1,3 @@
+{
+  "hostname": "YOUR_COMPUTERS_NAME_ON_YOUR_NETWORK.local"
+}

data/lib/react_rails_webpack/client/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "react-client",
+  "version": "1.0.0",
+  "description": "react client-side",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "prebuild": "rm -rf ../app/assets/webpack && mkdir ../app/assets/webpack",
+    "build": "NODE_ENV=production webpack",
+    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "autoprefixer": "^6.0.3",
+    "babel": "^5.8.23",
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.21.0",
+    "file-loader": "^0.8.4",
+    "history": "^1.12.5",
+    "hjs-webpack": "neurodynamic/hjs-webpack",
+    "json-loader": "^0.5.3",
+    "postcss-loader": "^0.7.0",
+    "react": "^0.14.6",
+    "react-dom": "^0.14.0",
+    "react-hot-loader": "^1.3.0",
+    "react-redux": "^4.0.6",
+    "react-script-loader": "0.0.1",
+    "react-tap-event-plugin": "^0.2.1",
+    "redux": "^3.0.4",
+    "redux-form": "^4.0.7",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.6",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "devDependencies": {
+    "chai": "^3.4.0",
+    "chai-immutable": "^1.3.0",
+    "jsdom": "^7.0.2",
+    "mocha": "^2.3.3",
+    "node-sass": "^3.4.2",
+    "redux-devtools": "^3.0.1",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.2",
+    "sass-loader": "^3.1.1"
+  }
+}

data/lib/react_rails_webpack/client/src/app/DevTools.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+// Exported from redux-devtools
+import { createDevTools } from 'redux-devtools'
+
+// Monitors are separate packages, and you can make a custom one
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+// createDevTools takes a monitor and produces a DevTools component
+const DevTools = createDevTools(
+  // Monitors are individually adjustable with props.
+  // Consult their repositories to learn about those props.
+  // Here, we put LogMonitor inside a DockMonitor.
+  <DockMonitor toggleVisibilityKey='ctrl-h'
+               changePositionKey='ctrl-q'
+               defaultIsVisible={false}>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+)
+
+export default DevTools

data/lib/react_rails_webpack/client/src/app/availableComponents.js

@@ -0,0 +1,15 @@
+import Hello from '../components/Hello'
+import {HelloWithReduxContainer} from '../components/HelloWithRedux'
+
+// Edit this list with your own React components.
+// Set the redux key to true to integrate them
+// with redux for application state management.
+export default {
+  HelloWithRedux: {
+    redux: true,
+    class: HelloWithReduxContainer
+  },
+  Hello: {
+    class: Hello
+  }
+}

data/lib/react_rails_webpack/client/src/app/initializeReduxStore.js

@@ -0,0 +1,22 @@
+import {compose, createStore, combineReducers} from 'redux'
+import DevTools from './DevTools'
+
+import exampleReducer from '../redux/reducer'
+
+// If you have more than one reducer, combine them here
+const reducer = combineReducers({
+  exampleReducer: exampleReducer
+})
+
+const finalCreateStore = compose(
+  // Middleware you want to use in development:
+  // applyMiddleware(d1, d2, d3),
+  // Required! Enable Redux DevTools with the monitors you chose
+  DevTools.instrument()
+)(createStore)
+
+export default function () {
+  const store = finalCreateStore(reducer)
+
+  return store
+}

data/lib/react_rails_webpack/client/src/app/renderingComponentsInDivs.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import wrapWithProvider from './wrapWithProvider'
+
+// Used in findAndCreateComponent
+import components from './availableComponents'
+
+// This function gets called by the react_rails_webpack Rails helper
+// It renders the specified component in the div from which the
+// function is called.
+export function renderLastComponentDiv () {
+  const elements = document.getElementsByClassName('react-component-target')
+  const lastElementIndex = elements.length - 1
+  renderReactComponentInDiv(elements[lastElementIndex])
+}
+
+export function renderReactComponentInDiv (targetDiv) {
+  const componentName = targetDiv.getAttribute('data-componentname')
+  const componentProps = JSON.parse(targetDiv.getAttribute('data-componentprops'))
+
+  ReactDOM.render(
+    findAndCreateComponent(componentName, componentProps),
+    targetDiv)
+}
+
+function findAndCreateComponent (componentName, props) {
+  const component = components[componentName]
+
+  if (component.redux) {
+    const element = React.createElement(component.class, props)
+    return wrapWithProvider(element)
+  } else {
+    return React.createElement(component.class, props)
+  }
+}

data/lib/react_rails_webpack/client/src/app/wrapWithProvider.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import DevTools from './DevTools'
+import initializeReduxStore from './initializeReduxStore'
+import {Provider} from 'react-redux'
+
+export default function wrapWithProvider (component, devTools = true) {
+  // Add DevTools if this is NOT a production app
+  if (process.env.NODE_ENV !== 'production' && devTools) {
+    component = wrapWithDevTools(component)
+  }
+
+  // return component wrapped in Provider
+  // with initialized react-redux store
+  return React.createElement(
+    Provider,
+    {
+      store: initializeReduxStore(),
+      children: component
+    }
+  )
+}
+
+export function wrapWithDevTools (component) {
+  return <div className='debug-panel-and-content-wrapper'>
+    {component}
+    <DevTools />
+  </div>
+}

data/lib/react_rails_webpack/client/src/app.js

@@ -0,0 +1,22 @@
+import {
+  renderReactComponentInDiv, renderLastComponentDiv
+} from './app/renderingComponentsInDivs'
+
+import './app.sass'
+import injectTapEventPlugin from 'react-tap-event-plugin'
+
+injectTapEventPlugin()
+
+// In development, render things automatically
+if (process.env.NODE_ENV !== 'production') {
+  const componentDivs = document.getElementsByClassName('react-component-target')
+
+  Array.prototype.forEach.call(componentDivs, (div) => {
+    renderReactComponentInDiv(div)
+  })
+} else {
+  // In production, expose these methods
+  // so they can be called by the app
+  window.renderLastComponentDiv = renderLastComponentDiv
+  document.renderLastComponentDiv = renderLastComponentDiv
+}

data/lib/react_rails_webpack/client/src/components/Hello.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default React.createClass({
+  propTypes: {
+    details: React.PropTypes.string.isRequired
+  },
+  getInitialState: function () {
+    return { greeting: 'Hello there, friend!' }
+  },
+  render () {
+    return <div>
+      <h2>This is the "Hello" component from 'components/Hello.jsx'</h2>
+      <p><strong>Details</strong>: {this.props.details}</p>
+      <p>Current greeting: {this.state.greeting}</p>
+
+      <label htmlFor='greeting'>Change the greeting here: </label>
+      <input type='text' id='greeting' value={this.state.greeting} onChange={(e) => this.setState({ greeting: e.target.value })}/>
+    </div>
+  }
+})

data/lib/react_rails_webpack/client/src/components/HelloWithRedux.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import * as actionCreators from '../redux/reducer'
+
+export const HelloWithRedux = React.createClass({
+  propTypes: {
+    greeting: React.PropTypes.string.isRequired,
+    details: React.PropTypes.string.isRequired,
+    setGreeting: React.PropTypes.func.isRequired
+  },
+  render () {
+    return <div>
+      <h2>This is the "HelloWithRedux" component from 'components/HelloWithRedux.jsx'</h2>
+      <p><strong>Details</strong>: {this.props.details}</p>
+      <p>Current greeting: {this.props.greeting}</p>
+
+      <label htmlFor='greeting'>Change the greeting here: </label>
+      <input type='text' id='greeting' value={this.props.greeting} onChange={(e) => this.props.setGreeting(e.target.value)}/>
+    </div>
+  }
+})
+
+function mapStateToProps (state) {
+  return { greeting: state.exampleReducer.greeting }
+}
+
+export const HelloWithReduxContainer = connect(
+  mapStateToProps,
+  actionCreators
+)(HelloWithRedux)

data/lib/react_rails_webpack/client/src/redux/reducer.js

@@ -0,0 +1,20 @@
+// Example redux reducer
+// Reducer style reference: https://github.com/erikras/ducks-modular-redux
+
+const SET_GREETING = 'SET_GREETING'
+
+const initialState = { greeting: 'Salutations!' }
+
+export default function reducer (state = initialState, action) {
+  switch (action.type) {
+    case SET_GREETING:
+      return { greeting: action.greeting }
+
+    default:
+      return state
+  }
+}
+
+export function setGreeting (greeting) {
+  return { type: SET_GREETING, greeting: greeting }
+}

data/lib/react_rails_webpack/client/test/redux/actions/set_greeting_spec.js

@@ -0,0 +1,17 @@
+import {expect} from 'chai'
+
+import reducer from '../../../src/redux/reducer'
+import {setGreeting} from '../../../src/redux/reducer'
+
+describe('setGreeting', () => {
+  it('sets the greeting', () => {
+    const initialState = 'Heck off'
+
+    const action = setGreeting('Lovely to meet you')
+
+    const nextState = reducer(initialState, action)
+    const expectedState = 'Lovely to meet you'
+
+    expect(nextState).to.equal(expectedState)
+  })
+})

data/lib/react_rails_webpack/client/test/test_helper.js

@@ -0,0 +1,17 @@
+import jsdom from 'jsdom'
+import chai from 'chai'
+import chaiImmutable from 'chai-immutable'
+
+const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
+const win = doc.defaultView
+
+global.document = doc
+global.window = win
+
+Object.keys(window).forEach((key) => {
+  if (!(key in global)) {
+    global[key] = window[key]
+  }
+})
+
+chai.use(chaiImmutable)

data/lib/react_rails_webpack/client/webpack.config.js

@@ -0,0 +1,32 @@
+require('webpack')
+var getConfig = require('hjs-webpack')
+var environment = require('./environment.json')
+
+var config = getConfig({
+  in: 'src/app.js',
+  out: '../app/assets/webpack',
+  minify: false,
+  html: function (context) {
+    return {
+      'index.html':
+        context.defaultTemplate(
+          {
+            // title: 'Site Title'
+            // head: '<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>',
+            html: "<div class=\"react-component-target\" data-componentname=\"Hello\" data-componentprops='{ \"details\": \"My initial greeting was set with getInitialState in the client/src/components/Hello.jsx file.\" }'></div>" +
+            "<div class=\"react-component-target\" data-componentname=\"HelloWithRedux\" data-componentprops='{ \"details\": \"My initial greeting was set with initialState in the client/src/redux/reducer.js file.\" }'></div>"
+          }
+        )
+    }
+  },
+
+  // environment.hostname is set in your environment.json file
+  // Set it to your computer's name on your network
+  // On a Mac, to see your computer's name on your network,
+  // go to System Preferences, and then the "Sharing" menu,
+  // and you should see a "Computer Name" input field
+  hostname: environment.hostname,
+  isDev: process.env.NODE_ENV !== 'production'
+})
+
+module.exports = config

data/lib/react_rails_webpack/create_example_page_generator.rb

@@ -0,0 +1,38 @@
+require 'rails/generators/base'
+require 'fileutils'
+
+module ReactRailsWebpack
+  class CreateExamplePageGenerator < Rails::Generators::Base
+    desc "This generator sets up a demo page for react/rails integration in a Rails app."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def add_files
+      inside 'app' do
+        inside 'controllers' do
+          copy_file 'react_example_controller.rb'
+        end
+
+        inside 'views' do
+          FileUtils.mkdir_p 'react_example'
+
+          inside 'react_example' do
+            copy_file 'greeting.html.erb'
+          end
+        end
+      end
+    end
+
+    def add_route
+      insert_into_file(
+        'config/routes.rb',
+        "  get 'greeting' => 'react_example#greeting'\n",
+        after: "Rails.application.routes.draw do\n"
+      )
+    end
+
+    def print_next_steps
+      puts "\n\nDone! Start your Rails server and go to localhost:3000/greeting to see your React/Rails integration in action!"
+    end
+  end
+end

data/lib/react_rails_webpack/install_generator.rb

@@ -0,0 +1,90 @@
+require 'rails/generators/base'
+
+module ReactRailsWebpack
+  class InstallGenerator < Rails::Generators::Base
+    desc "This generator sets up the files for a rails and react integration using webpack."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def setup_client_folder
+      puts 'Adding client folder...'
+      directory 'client'
+    end
+
+    def add_root_package_dot_json
+      copy_file 'package.json'
+    end
+
+    def add_react_helper
+      puts 'Adding react_helper.rb...'
+      inside 'app' do
+        inside 'helpers' do
+          copy_file 'react_helper.rb'
+        end
+      end
+    end
+
+    def update_gitignore
+      puts 'updating .gitignore...'
+      append_to_file '.gitignore' do
+        "\n\n\# react_rails_webpack ignores\nclient/node_modules\nclient/environment.json\nnpm-debug.log"
+      end
+    end
+
+    def add_webpack_asset_inclusion
+      puts 'Adding asset includes...'
+      # Add webpack folder to application asset paths
+      app_dot_rb_insert = "    config.assets.paths << \"\#\{config.root\}/app/assets/webpack\"\n"
+      insert_into_file(
+        'config/application.rb',
+        app_dot_rb_insert,
+        after: "  class Application < Rails::Application\n"
+      ) unless file_already_contains?(app_dot_rb_insert, 'config/application.rb')
+
+      # Add webpack folder require to application.js
+      app_dot_js_insert = "//= require_tree ../webpack\n"
+      insert_into_file(
+        'app/assets/javascripts/application.js',
+        app_dot_js_insert,
+        after: "//= require_tree .\n"
+      ) unless file_already_contains?(app_dot_js_insert, 'app/assets/javascripts/application.js')
+
+      # Add webpack folder require to application.css or .scss or .sass
+      if File.exist?('app/assets/stylesheets/application.css')
+        insert_into_file(
+          'app/assets/stylesheets/application.css',
+          "\n *= require_tree ../webpack\n",
+          before: ' *= require_self'
+        ) unless file_already_contains?("\n *= require_tree ../webpack\n", 'app/assets/stylesheets/application.css')
+      end
+
+      ensure_prepended "@import '../webpack/*\n", 'app/assets/stylesheets/application.scss' if File.exist?('app/assets/stylesheets/application.scss')
+      ensure_prepended "@import '../webpack/*\n", 'app/assets/stylesheets/application.sass' if File.exist?('app/assets/stylesheets/application.sass')
+    end
+
+    def print_reminders
+      puts "\n\nDone! Now make sure you have node and npm installed, and then run the 'npm run install' and 'npm run build' commands to finish setting up."
+      puts "Also, don't forget to set your hostname in the client/environment.json file. Instructions for this can be found here: https://github.com/neurodynamic/react_rails_webpack#setting-the-dev-server-hostname"
+    end
+
+
+    private
+
+    def current_directory_path
+      File.join(File.expand_path(File.dirname(__FILE__)))
+    end
+
+    def ensure_prepended(line, file)
+      return if file_already_contains?(line, file)
+      prepend_to_file(file, line)
+    end
+
+    def file_missing?(file)
+      !File.exist?(file)
+    end
+
+    def file_already_contains?(string, file)
+      File.readlines(file).join.include?(string)
+    end
+  end
+end

data/lib/react_rails_webpack/lib/react_cell.rb

@@ -0,0 +1,22 @@
+require 'json'
+
+class ReactCell < Cell::Concept
+  include ActionView::Helpers::JavaScriptHelper
+  include ActionView::Helpers::TagHelper
+
+  # Props should be a Ruby hash
+  def react_component(component_name, props = {})
+    # Give second argument to content_tag some text
+    # if you want to test to see if React is properly
+    # replacing its content with a component
+    content_tag(
+      :div,
+      javascript_tag('renderLastComponentDiv()'),
+      class: 'react-component-target',
+      data: {
+        componentName: component_name,
+        componentProps: props.to_json
+      }
+    )
+  end
+end

data/lib/react_rails_webpack/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "start": "cd client && npm run start",
+    "prebuild": "cd client && npm run prebuild",
+    "build": "cd client && npm run build",
+    "install": "cd client && npm install",
+    "test": "cd client && npm run test"
+  }
+}

data/lib/react_rails_webpack/trailblazer_integration_generator.rb

@@ -0,0 +1,15 @@
+require 'rails/generators/base'
+
+module ReactRailsWebpack
+  class TrailblazerIntegrationGenerator < Rails::Generators::Base
+    desc "This generator adds a react_cell file to use in a Trailblazer/Rails app."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def add_react_cell_file_to_lib
+      inside 'lib' do
+        copy_file 'react_cell.rb'
+      end
+    end
+  end
+end

data/lib/react_rails_webpack/version.rb

@@ -0,0 +1,3 @@
+module ReactRailsWebpack
+  VERSION = "1.0.1"
+end

data/lib/react_rails_webpack.rb

@@ -0,0 +1,11 @@
+require 'react_rails_webpack/version'
+
+module ReactRailsWebpack
+  class ReactRailsWebpackRailtie < Rails::Railtie
+    generators do
+      require_relative 'react_rails_webpack/install_generator'
+      require_relative 'react_rails_webpack/create_example_page_generator'
+      require_relative 'react_rails_webpack/trailblazer_integration_generator'
+    end
+  end
+end

data/react_rails_webpack.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'react_rails_webpack/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "react_rails_webpack"
+  spec.version       = ReactRailsWebpack::VERSION
+  spec.authors       = ["Neurodynamic"]
+  spec.email         = ["neurodynamicdev@gmail.com"]
+
+  spec.summary       = %q{A gem supplying generators to setup flexible integrations of react, webpack, and redux with Rails}
+  # spec.description   = %q{TODO: Write a longer description or delete this line.}
+  spec.homepage      = "https://github.com/neurodynamic/react_rails_webpack"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  # spec.add_dependency("railties", ">= 4.1.0", "< 5.1")
+  spec.add_dependency("rails", ">= 4")
+  spec.add_dependency "colorize", ">= 0.7.7"
+  spec.add_development_dependency "bundler", "~> 1.11"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

metadata

@@ -0,0 +1,135 @@
+--- !ruby/object:Gem::Specification
+name: react_rails_webpack
+version: !ruby/object:Gem::Version
+  version: 1.0.1
+platform: ruby
+authors:
+- Neurodynamic
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-08-05 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4'
+- !ruby/object:Gem::Dependency
+  name: colorize
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.7.7
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.7.7
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- neurodynamicdev@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/react_rails_webpack.rb
+- lib/react_rails_webpack/app/controllers/react_example_controller.rb
+- lib/react_rails_webpack/app/helpers/react_helper.rb
+- lib/react_rails_webpack/app/views/react_example/greeting.html.erb
+- lib/react_rails_webpack/client/environment.json
+- lib/react_rails_webpack/client/package.json
+- lib/react_rails_webpack/client/src/app.js
+- lib/react_rails_webpack/client/src/app.sass
+- lib/react_rails_webpack/client/src/app/DevTools.jsx
+- lib/react_rails_webpack/client/src/app/availableComponents.js
+- lib/react_rails_webpack/client/src/app/initializeReduxStore.js
+- lib/react_rails_webpack/client/src/app/renderingComponentsInDivs.js
+- lib/react_rails_webpack/client/src/app/wrapWithProvider.jsx
+- lib/react_rails_webpack/client/src/components/Hello.jsx
+- lib/react_rails_webpack/client/src/components/HelloWithRedux.jsx
+- lib/react_rails_webpack/client/src/redux/reducer.js
+- lib/react_rails_webpack/client/test/redux/actions/set_greeting_spec.js
+- lib/react_rails_webpack/client/test/test_helper.js
+- lib/react_rails_webpack/client/webpack.config.js
+- lib/react_rails_webpack/create_example_page_generator.rb
+- lib/react_rails_webpack/install_generator.rb
+- lib/react_rails_webpack/lib/react_cell.rb
+- lib/react_rails_webpack/package.json
+- lib/react_rails_webpack/trailblazer_integration_generator.rb
+- lib/react_rails_webpack/version.rb
+- react_rails_webpack.gemspec
+homepage: https://github.com/neurodynamic/react_rails_webpack
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: A gem supplying generators to setup flexible integrations of react, webpack,
+  and redux with Rails
+test_files: []