Fixes turbolinks loading issue

.gitignore

@@ -20,7 +20,7 @@
 .ruby-gemset
 
 node_modules
-/examples
+/tmp/examples
 
 /node_package/lib
 

.npmignore

@@ -18,3 +18,4 @@ rakelib
 ruby-lint.yml
 spec
 node_modules
+tmp

.rubocop.yml

@@ -20,7 +20,7 @@ AllCops:
     - !ruby/regexp /old_and_unused\.rb$/
     - 'spec/react_on_rails/dummy-for-generators/**/*'
     - 'spec/dummy/bin/**/*'
-    - 'examples/**/*'
+    - 'tmp/examples/**/*'
 
 Metrics/LineLength:
   Max: 120

README.md

@@ -378,6 +378,7 @@ Note: If you have components from react-rails you want to use, then you will nee
 + [React Router](docs/additional_reading/react_router.md)
 + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
 + [Tips](docs/additional_reading/tips.md)
++ [Turbolinks](docs/additional_reading/turbolinks.md)
 + [Webpack Configuration](docs/additional_reading/webpack.md)
 + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
 

docs/additional_reading/turbolinks.md

@@ -0,0 +1,39 @@
+# Turbolinks
+
+* See [Turbolinks on Github](https://github.com/rails/turbolinks)
+* Currently support 2.5.x of Turbolinks. We plan to update to Turbolinks 5 soon.
+
+## Why Turbolinks?
+As you switch between Rails HTML controller requests, you will only load the HTML and you will 
+not reload JavaScript and stylesheets. This definitely can make an app perform better, even if 
+the JavaScript and stylesheets are cached by the browser, as they will still require parsing.
+
+### Install Checklist
+1. Include the gem "turbolinks".
+1. Included the proper "track" tags when you include the javascript and stylesheet:
+  ```erb
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  ```
+1. Add turbolinks to your `application.js` file:
+   ```javascript
+   //= require turbolinks
+   ```
+
+## Troubleshooting
+
+You cans set a global debug flag in your `application.js` to turn on tracing of Turbolinks events
+as they pertain to React on Rails.
+
+1. Add this line to your `application.js`:
+   ```javascript
+   //= require testGlobals
+   ```
+2. Initialie the global debug value of `DEBUG_TURBOLINKS` like this:
+   ```javascript
+   window.DEBUG_TURBOLINKS = true;
+   console.log('window.DEBUG_TURBOLINKS = true;');
+   ```
+
+This will print out events related to the initialization of the components created with the view 
+helper `react_component`.

docs/contributing.md

@@ -12,7 +12,7 @@ bundle && npm i && rake examples:prepare_all && rake symlink_node_package && rak
 It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
 
 * /coverage
-* /examples
+* /tmp (takes care of /tmp/examples)
 * /node_package/lib
 * /node_modules
 * /spec/dummy/app/assets/javascripts/generated

docs/releasing.md

@@ -10,7 +10,7 @@ Install https://github.com/svenfuchs/gem-release
 
 ```bash
 # Having the examples prevents publishing
-rm -rf examples
+rm -rf tmp/examples
 gem bump
 # Or manually update the version number
 cd spec/dummy

lib/generators/react_on_rails/dev_tests_generator.rb

@@ -24,7 +24,7 @@ def change_package_json_to_use_local_react_on_rails_module
         package_json = File.join(destination_root, "client", "package.json")
         old_contents = File.read(package_json)
         new_contents = old_contents.gsub(/"react-on-rails": ".+",/,
-                                         '"react-on-rails": "../../..",')
+                                         '"react-on-rails": "../../../..",')
         File.open(package_json, "w+") { |f| f.puts new_contents }
       end
 

node_package/scripts/symlink-node-package

@@ -12,7 +12,7 @@ root_path=${DIR}/../..
 (cd $root_path && npm link)
 
 # Link the example apps to use react_on_rails node_package
-examplesDir=${root_path}/examples
+examplesDir=${root_path}/tmp/examples
 if [ -d $examplesDir ] ; then
   for type in $( ls $examplesDir ); do
     d=$examplesDir/${type}/client

node_package/src/clientStartup.js

@@ -5,7 +5,20 @@ import handleError from './handleError';
 import isRouterResult from './isRouterResult';
 
 const REACT_ON_RAILS_COMPONENT_CLASS_NAME = 'js-react-on-rails-component';
-const turbolinksInstalled = (typeof Turbolinks !== 'undefined');
+
+function debugTurbolinks(...msg) {
+  if (!window) {
+    return;
+  }
+
+  if (window.DEBUG_TURBOLINKS) {
+    console.log('TURBO:', ...msg);
+  }
+}
+
+function turbolinksInstalled() {
+  return (typeof Turbolinks !== 'undefined');
+}
 
 function forEachComponent(fn) {
   const els = document.getElementsByClassName(REACT_ON_RAILS_COMPONENT_CLASS_NAME);
@@ -25,7 +38,7 @@ function render(el) {
   const trace = JSON.parse(el.getAttribute('data-trace'));
   const expectTurboLinks = JSON.parse(el.getAttribute('data-expect-turbo-links'));
 
-  if (!turbolinksInstalled && expectTurboLinks) {
+  if (!turbolinksInstalled() && expectTurboLinks) {
     console.warn('WARNING: NO TurboLinks detected in JS, but it is in your Gemfile');
   }
 
@@ -57,6 +70,8 @@ function render(el) {
 }
 
 function reactOnRailsPageLoaded() {
+  debugTurbolinks('reactOnRailsPageLoaded');
+
   forEachComponent(render);
 }
 
@@ -67,27 +82,40 @@ function unmount(el) {
 }
 
 function reactOnRailsPageUnloaded() {
+  debugTurbolinks('reactOnRailsPageUnloaded');
   forEachComponent(unmount);
 }
 
-let ranOnce = false;
-
 export default function clientStartup(context) {
-  if (ranOnce) {
+  const document = context.document;
+
+  // Check if server rendering
+  if (!document) {
     return;
   }
 
-  const document = context.document;
+  // Tried with a file local variable, but the install handler gets called twice.
+  if (context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__) {
+    return;
+  }
 
-  // Install listeners when running on the client (browser)
-  if (typeof document !== 'undefined') {
-    if (!turbolinksInstalled) {
+  context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
+
+  debugTurbolinks('Adding DOMContentLoaded event to install event listeners.');
+
+  document.addEventListener('DOMContentLoaded', () => {
+    // Install listeners when running on the client (browser).
+    // We must do this check for turbolinks AFTER the document is loaded because we load the
+    // Webpack bundles first.
+
+    if (!turbolinksInstalled()) {
+      debugTurbolinks('WITHOUT TURBOLINKS: DOMContentLoaded handler installed.');
       document.addEventListener('DOMContentLoaded', reactOnRailsPageLoaded);
     } else {
+      debugTurbolinks('WITH TURBOLINKS: document page:before-unload and page:change handlers' +
+        ' installed.');
       document.addEventListener('page:before-unload', reactOnRailsPageUnloaded);
       document.addEventListener('page:change', reactOnRailsPageLoaded);
     }
-  }
-
-  ranOnce = true;
+  });
 }

node_package/tests/ComponentStore.test.js

@@ -1,4 +1,6 @@
 /* eslint-disable react/no-multi-comp */
+/* eslint-disable react/prefer-es6-class */
+
 import test from 'tape';
 import ComponentStore from '../src/ComponentStore';
 import React from 'react';

node_package/tests/generatorFunction.test.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-multi-comp */
+/* eslint-disable react/prefer-es6-class */
 
 import test from 'tape';
 import React from 'react';

rakelib/examples.rake

@@ -64,6 +64,7 @@ namespace :examples do
     task example_type.gen_task_name_short => example_type.clean_task_name do
       mkdir_p(example_type.dir)
       sh_in_dir(examples_dir, "rails new #{example_type.name} #{example_type.rails_options}")
+      sh_in_dir(example_type.dir, "touch .gitignore")
       append_to_gemfile(example_type.gemfile, example_type.required_gems)
       bundle_install_in(example_type.dir)
       sh_in_dir(example_type.dir, example_type.generator_shell_commands)

rakelib/run_rspec.rake

@@ -9,18 +9,18 @@ include ReactOnRails::TaskHelpers
 namespace :run_rspec do
   desc "Run RSpec for top level only"
   task :gem do
-    run_tests_in("", rspec_args: "spec/react_on_rails")
+    run_tests_in("", rspec_args: File.join("spec", "react_on_rails"))
   end
 
   task dummy: ["dummy_apps:dummy_app"] do
-    run_tests_in("spec/dummy", env_vars: "DRIVER=selenium_firefox")
+    run_tests_in(File.join("spec", "dummy"), env_vars: "DRIVER=selenium_firefox")
   end
 
   # Dynamically define Rake tasks for each example app found in the examples directory
   ExampleType.all.each do |example_type|
     desc "Runs RSpec for #{example_type.name_pretty} only"
     task example_type.rspec_task_name_short => example_type.prepare_task_name do
-      run_tests_in("#{File.basename(examples_dir)}/#{example_type.name}") # have to use relative path
+      run_tests_in(File.join(examples_dir, example_type.name)) # have to use relative path
     end
   end
 
@@ -52,14 +52,23 @@ task run_rspec: ["run_rspec:run_rspec"]
 
 private
 
-# Runs rspec in the given directory (if string is passed, assumed to be relative
-# to root of the gem.
+# Runs rspec in the given directory.
+# If string is passed and it's not absolute, it's converted relative to root of the gem.
 # TEST_ENV_COMMAND_NAME is used to make SimpleCov.command_name unique in order to
 # prevent a name collision. Defaults to the given directory's name.
 def run_tests_in(dir, options = {})
-  dir = Pathname.new(File.join(gem_root, dir)) if dir.is_a?(String)
-  command_name = options.fetch(:command_name, dir.basename)
+  if dir.is_a?(String)
+    path = if dir.start_with?(File::SEPARATOR)
+             Pathname.new(dir)
+           else
+             Pathname.new(File.join(gem_root, dir))
+           end
+  else
+    path = dir
+  end
+
+  command_name = options.fetch(:command_name, path.basename)
   rspec_args = options.fetch(:rspec_args, "")
   env_vars = %(#{options.fetch(env_vars, '')} COVERAGE=true TEST_ENV_COMMAND_NAME="#{command_name}")
-  sh_in_dir(dir, "#{env_vars} bundle exec rspec #{rspec_args}")
+  sh_in_dir(path.realpath, "#{env_vars} bundle exec rspec #{rspec_args}")
 end

rakelib/task_helpers.rb

@@ -7,7 +7,7 @@ def gem_root
 
     # Returns the folder where examples are located
     def examples_dir
-      File.join(gem_root, "examples")
+      File.join(gem_root, "tmp", "examples")
     end
 
     def dummy_app_dirs

react_on_rails.gemspec

@@ -14,7 +14,7 @@ Gem::Specification.new do |s|
   s.homepage      = "https://github.com/shakacode/react_on_rails"
   s.license       = "MIT"
 
-  s.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features|examples|node_modules|node_package|coverage)/}) }
+  s.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features|tmp|node_modules|node_package|coverage)/}) }
   s.bindir        = "exe"
   s.executables   = s.files.grep(%r{^exe/}) { |f| File.basename(f) }
   s.require_paths = ["lib"]

spec/dummy/app/assets/javascripts/application.js

@@ -10,9 +10,7 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
+//= require testGlobals
+//= require generated/client
 
 //= require turbolinks
-//
-//= require generated/client

spec/dummy/app/assets/javascripts/testGlobals.js

@@ -0,0 +1,2 @@
+window.DEBUG_TURBOLINKS = true;
+console.log('window.DEBUG_TURBOLINKS = true;');

spec/dummy/client/app/components/HelloWorld.jsx

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import ReactCompat from '../utils/ReactCompat';
 
 // Super simple example of the simplest possible React component
 class HelloWorld extends React.Component {
@@ -16,15 +15,22 @@ class HelloWorld extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.state = props.helloWorldData;
+    this.setNameDomRef = this.setNameDomRef.bind(this);
+    this.handleChange = this.handleChange.bind(this);
   }
 
-  _handleChange() {
-    const name = ReactCompat.reactFindDOMNode()(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.value;
     this.setState({ name });
   }
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  }
+
   render() {
-    console.log('HelloWorld demonstrating a call to console.log in spec/dummy/client/app/components/HelloWorld.jsx:18');
+    console.log('HelloWorld demonstrating a call to console.log in '
+      + 'spec/dummy/client/app/components/HelloWorld.jsx:18');
 
     const { name } = this.state;
 
@@ -35,7 +41,7 @@ class HelloWorld extends React.Component {
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={::this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={this.handleChange} />
         </p>
       </div>
     );

spec/dummy/client/app/components/HelloWorldES5.jsx

@@ -1,5 +1,7 @@
+/* eslint-disable react/prefer-es6-class */
+
 import React from 'react';
-import ReactCompat from '../utils/ReactCompat';
+import ReactDOM from 'react-dom';
 
 // Super simple example of React component using React.createClass
 const HelloWorldES5 = React.createClass({
@@ -8,14 +10,20 @@ const HelloWorldES5 = React.createClass({
   },
 
   getInitialState() {
+    //this.setNameDomRef = this.setNameDomRef.bind(this);
+    //this.handleChange = this.handleChange.bind(this);
     return this.props.helloWorldData;
   },
 
-  _handleChange() {
-    const name = ReactCompat.reactFindDOMNode()(this.refs.name).value;
+  handleChange() {
+    const name =  this.nameDomRef.value;
     this.setState({ name });
   },
 
+  setNameDomRef(nameDomNode) {
+    this.nameDomRef = nameDomNode;
+  },
+
   render() {
     const { name } = this.state;
 
@@ -26,7 +34,7 @@ const HelloWorldES5 = React.createClass({
         </h3>
         <p>
           Say hello to:
-          <input type="text" ref="name" defaultValue={name} onChange={this._handleChange} />
+          <input type="text" ref={this.setNameDomRef} defaultValue={name} onChange={this.handleChange} />
         </p>
       </div>
     );