react_on_rails 5.2.0 → 6.0.0.beta.1

data/lib/generators/react_on_rails/templates/base/base/client/node/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "react_on_rails_node",
+    "version": "0.0.0",
+    "private": true,
+    "scripts": {
+        "start": "node ./server.js -s webpack-bundle.js"
+    },
+    "dependencies": {
+    }
+}

data/lib/generators/react_on_rails/templates/base/base/client/node/server.js

@@ -0,0 +1,82 @@
+var net = require('net');
+var fs = require('fs');
+
+var bundlePath = '../../app/assets/webpack/';
+var bundleFileName = 'webpack-bundle.js';
+
+var currentArg;
+
+function Handler() {
+  this.queue = [];
+  this.initialized = false;
+}
+
+Handler.prototype.handle = function (connection) {
+  var callback = function () {
+    connection.setEncoding('utf8');
+    connection.on('data', (data)=> {
+      console.log('Processing request: ' + data);
+      var result = eval(data);
+      connection.write(result);
+    });
+  };
+
+  if (this.initialized) {
+    callback();
+  } else {
+    this.queue.push(callback);
+  }
+};
+
+Handler.prototype.initialize = function () {
+  console.log('Processing ' + this.queue.length + ' pending requests');
+  var callback;
+  while (callback = this.queue.pop()) {
+    callback();
+  }
+
+  this.initialized = true;
+};
+
+var handler = new Handler();
+
+process.argv.forEach((val) => {
+  if (val[0] == '-') {
+    currentArg = val.slice(1);
+    return;
+  }
+
+  if (currentArg == 's') {
+    bundleFileName = val;
+  }
+});
+
+try {
+  fs.mkdirSync(bundlePath);
+} catch (e) {
+  if (e.code != 'EEXIST') throw e;
+}
+
+fs.watchFile(bundlePath + bundleFileName, (curr) => {
+  if (curr && curr.blocks && curr.blocks > 0) {
+    if (handler.initialized) {
+      console.log('Reloading server bundle must be implemented by restarting the node process!');
+      return;
+    }
+
+    require(bundlePath + bundleFileName);
+    console.log('Loaded server bundle: ' + bundlePath + bundleFileName);
+    handler.initialize();
+  }
+});
+
+var unixServer = net.createServer(function (connection) {
+  handler.handle(connection);
+});
+
+unixServer.listen('node.sock');
+
+process.on('SIGINT', () => {
+  unixServer.close();
+  process.exit();
+});

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

@@ -7,23 +7,11 @@
     "npm": "3.5.0"
   },
   "scripts": {
-    "build:client": "NODE_ENV=production webpack --config webpack.client.rails.config.js",
-    <%- if options.server_rendering? -%>
-    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
-    <%- end -%>
-    "build:dev:client": "webpack -w --config webpack.client.rails.config.js",
-    <%- if options.server_rendering? -%>
-    "build:dev:server": "webpack -w --config webpack.server.rails.config.js",
-    <%- end -%>
-    "build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
-    <%- if options.server_rendering? -%>
-    "build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
-    <%- end -%>
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:test": "webpack --config webpack.config.js",
+    "build:production": "NODE_ENV=production webpack --config webpack.config.js",
+    "build:development": "webpack -w --config webpack.config.js"
   },
   "dependencies": {
-    "autoprefixer": "^6.3.5",
-    "axios": "^0.9.1",
     "babel": "^6.5.2",
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
@@ -33,17 +21,12 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "css-loader": "^0.23.1",
     "es5-shim": "^4.5.7",
     "expose-loader": "^0.7.1",
     <%- if options.redux? -%>
     "immutable": "^3.7.6",
     <%- end -%>
     "imports-loader": "^0.6.5",
-    "jquery": "^2.2.2",
-    "jquery-ujs": "^1.2.1",
-    "loader-utils": "^0.2.13",
-    "lodash": "^4.7.0",
     <%- if options.redux? -%>
     "mirror-creator": "1.1.0",
     <%- end -%>

data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
+config = {
+  entry: [
+    'es5-shim/es5-shim',
+    'es5-shim/es5-sham',
+    'babel-polyfill',
+    './app/bundles/HelloWorld/startup/HelloWorldApp',
+  ],
+
+  output: {
+    filename: 'webpack-bundle.js',
+    path: '../app/assets/webpack',
+  },
+
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom'),
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(nodeEnv),
+      },
+    }),
+  ],
+  module: {
+    loaders: [
+      {
+        test: require.resolve('react'),
+        loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
+      },
+      {
+        test: /\.jsx?$/, loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+};
+
+module.exports = config;
+
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  module.exports.devtool = 'eval-source-map';
+} else {
+  config.plugins.push(
+    new webpack.optimize.DedupePlugin()
+  );
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+}

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt

@@ -2,42 +2,76 @@
 ReactOnRails.configure do |config|
   # Client bundles are configured in application.js
 
-  # Directory where your generated assets go
+  # Directory where your generated assets go. All generated assets must go to the same directory.
+  # Configure this in your webpack config files. This relative to your Rails root directory.
   config.generated_assets_dir = File.join(%w(app assets webpack))
 
-  # Define the files for we need to check for webpack compilation when running tests
-  <%- if options.server_rendering? %>
-  config.webpack_generated_files = %w( client-bundle.js server-bundle.js )
-  <% else %>
-  config.webpack_generated_files = %w( client-bundle.js )
-  <%- end %>
-
-  # Server rendering:
-  # Server bundle is a single file for all server rendering of components.
-  # Set the server_bundle_js_file to "" if you know that you will not be server rendering.
-  <%- if options.server_rendering? %>
-  config.server_bundle_js_file = "server-bundle.js"
-  <% else %>
-  config.server_bundle_js_file = ""
-  <%- end %>
-  # increase if you're on JRuby
-  config.server_renderer_pool_size = 1
-  # seconds
-  config.server_renderer_timeout = 20
+  # Define the files we need to check for webpack compilation when running tests.
+  config.webpack_generated_files = %w( webpack-bundle.js )
+
+  # This is the file used for server rendering of React when using `(prerender: true)`
+  # If you are never using server rendering, you may set this to "".
+  # If you are using the same file for client and server rendering, having this set probably does
+  # not affect performance.
+  config.server_bundle_js_file = "webpack-bundle.js"
+
+  # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  # with rspec then this controls what npm command is run
+  # to automatically refresh your webpack assets on every test run.
+  config.npm_build_test_command = "npm run build:test"
+
+  # This configures the script to run to build the production assets by webpack. Set this to nil
+  # if you don't want react_on_rails building this file for you.
+  config.npm_build_production_command = "npm run build:production"
+
+  ################################################################################
+  # CLIENT RENDERING OPTIONS
+  # Below options can be overriden by passing options to the react_on_rails
+  # `render_component` view helper method.
+  ################################################################################
+  # default is false
+  config.prerender = false
+
+  # default is true for development, off otherwise
+  config.trace = Rails.env.development?
+
+  ################################################################################
+  # SERVER RENDERING OPTIONS
+  ################################################################################
   # If set to true, this forces Rails to reload the server bundle if it is modified
   config.development_mode = Rails.env.development?
+
   # For server rendering. This can be set to false so that server side messages are discarded.
   # Default is true. Be cautious about turning this off.
   config.replay_console = true
-  # Default is true. Logs server rendering messags to Rails.logger.info
+
+  # Default is true. Logs server rendering messages to Rails.logger.info
   config.logging_on_server = true
 
-  # The following options can be overriden by passing to the helper method:
+  config.raise_on_prerender_error = false # change to true to raise exception on server if the JS code throws
+
+  # Server rendering only (not for render_component helper)
+  # You can configure your pool of JS virtual machines and specify where it should load code:
+  # On MRI, use `therubyracer` for the best performance
+  # (see [discussion](https://github.com/reactjs/react-rails/pull/290))
+  # On MRI, you'll get a deadlock with `pool_size` > 1
+  # If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
+  config.server_renderer_pool_size = 1 # increase if you're on JRuby
+  config.server_renderer_timeout = 20 # seconds
+
+  ################################################################################
+  # MISCELLANEOUS OPTIONS
+  ################################################################################
 
-  # Default is false
-  config.prerender = false
-  # Default is true for development, off otherwise
-  config.trace = Rails.env.development?
   # Default is false, enable if your content security policy doesn't include `style-src: 'unsafe-inline'`
   config.skip_display_none = false
+
+  # The server render method - either ExecJS or NodeJS
+  config.server_render_method = "ExecJS"
+
+  # Client js uses assets not digested by rails.
+  # For any asset matching this regex, non-digested symlink will be created
+  # To disable symlinks set this parameter to nil.
+  config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg)/
+
 end

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake.tt

@@ -14,10 +14,7 @@ namespace :assets do
 
   desc "Compile assets with webpack"
   task :webpack do
-    sh "cd client && npm run build:client"
-    <%- if options[:server_rendering] -%>
-    sh "cd client && npm run build:server"
-    <%- end -%>
+    sh "cd client && npm run build:production"
   end
 
   task :clobber do

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/load_test.rake

@@ -0,0 +1,8 @@
+namespace :load_test do
+  desc "Load test with apache benchmark"
+  task :run, [:url, :count] do |_, args|
+    url = args[:url] || "http://localhost:3000/hello_world"
+    count = args[:count] || 500
+    system("ab -c 10 -n #{count} #{url}")
+  end
+end

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

@@ -8,18 +8,6 @@
   "scripts": {
     "postinstall": "cd client && npm install",
     "rails-server": "echo 'visit http://localhost:3000/hello_world' && foreman start -f Procfile.dev",
-    "build:production:client": "(cd client && npm run build:production:client --silent)",
-    <%- if options.server_rendering? -%>
-    "build:production:server": "(cd client && npm run build:production:server --silent)",
-    <%- end -%>
-    "build:client": "(cd client && npm run build:client --silent",
-    <%- if options.server_rendering? -%>
-    "build:server": "(cd client && npm run build:server --silent)",
-    <%- end -%>
-    "build:dev:client": "(cd client && npm run build:dev:client --silent)",
-    <%- if options.server_rendering? -%>
-    "build:dev:server": "(cd client && npm run build:dev:server --silent)",
-    <%- end -%>
     "test": "rspec"
   }
 }

data/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb

@@ -3,7 +3,7 @@ require_relative "../rails_helper"
 feature "Hello World", js: true do
   scenario "the hello world example works" do
     visit "/hello_world"
-    expect(heading).to have_text("Rendering")
+    expect(heading).to have_text("Hello World")
     expect(message).to have_text("Stranger")
     name_input.set("John Doe")
     expect(message).to have_text("John Doe")

data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb

@@ -36,6 +36,7 @@ Capybara.javascript_driver = :poltergeist
 RSpec.configure do |config|
   # Ensure that if we are running js tests, we are using latest webpack assets
   # This will use the defaults of :js and :server_rendering meta tags
+  ReactOnRails::TestHelper.launch_node if ReactOnRails.configuration.server_render_method == "NodeJS"
   ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
 
   # Remove this line if you"re not using ActiveRecord or ActiveRecord fixtures

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

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react';
 import HelloWorldWidget from '../components/HelloWorldWidget';
-import _ from 'lodash';
 
 // Simple example of a React "smart" component
 export default class HelloWorld extends React.Component {
@@ -14,11 +13,6 @@ export default class HelloWorld extends React.Component {
     // How to set initial state in ES6 class syntax
     // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
     this.state = { name: this.props.name };
-
-    // 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, 'updateName');
   }
 
   updateName(name) {
@@ -28,7 +22,7 @@ export default class HelloWorld extends React.Component {
   render() {
     return (
       <div>
-        <HelloWorldWidget name={this.state.name} updateName={this.updateName} />
+        <HelloWorldWidget name={this.state.name} updateName={e => this.updateName(e)} />
       </div>
     );
   }

data/lib/generators/react_on_rails/templates/{base/base/client/app/bundles/HelloWorld/startup/clientRegistration.jsx.tt → no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt}

@@ -1,5 +1,11 @@
+import React from 'react';
 import ReactOnRails from 'react-on-rails';
-import HelloWorldApp from './HelloWorldAppClient';
+
+import HelloWorld from '../containers/HelloWorld';
+
+const HelloWorldApp = (props) => (
+  <HelloWorld {...props} />
+);
 
 // This is how react_on_rails can see the HelloWorldApp in the browser.
 ReactOnRails.register({ HelloWorldApp });

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/{HelloWorldAppClient.jsx.tt → HelloWorldApp.jsx.tt}

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactOnRails from 'react-on-rails';
 import { Provider } from 'react-redux';
 
 import createStore from '../store/helloWorldStore';
@@ -7,7 +8,7 @@ import HelloWorld from '../containers/HelloWorld';
 // See documentation for https://github.com/reactjs/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.
-export default (props) => {
+const HelloWorldApp = (props) => {
   const store = createStore(props);
   const reactComponent = (
     <Provider store={store}>
@@ -16,3 +17,6 @@ export default (props) => {
   );
   return reactComponent;
 };
+
+// This is how react_on_rails can see the HelloWorldApp in the browser.
+ReactOnRails.register({ HelloWorldApp });

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

@@ -6,10 +6,6 @@ import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
 // 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 { initialStates } from '../reducers';
 
@@ -27,7 +23,7 @@ export default props => {
 
   const reducer = combineReducers(reducers);
   const composedStore = compose(
-    applyMiddleware(thunkMiddleware, loggerMiddleware)
+    applyMiddleware(thunkMiddleware)
   );
   const storeCreator = composedStore(createStore);
   const store = storeCreator(reducer, initialState);