Fix tracing for turbolinks

docs/additional_reading/turbolinks.md

@@ -19,8 +19,39 @@ the JavaScript and stylesheets are cached by the browser, as they will still req
    ```javascript
    //= require turbolinks
    ```
+Note, in the future, we might change to installing this via npm.
 
 ## Troubleshooting
-To turn on tracing of Turbolinks events, require `debug_turbolinks` (provided by ReactOnRails) inside of `app/assets/javascripts/application.js` **at the beginning of the file**. This will print out events related to the initialization of the components created with the view helper `react_component`.
+To turn on tracing of Turbolinks events, put this in your registration file, where you register your components. 
+
+```js
+   ReactOnRails.setOptions({
+     traceTurbolinks: true,
+   });
+```
+
+Rather than setting the value to true, you could set it to TRACE_TURBOLINKS, and then you could place this in your `webpack.client.base.config.js`:
+
+Define this const at the top of the file:
+```js
+  const devBuild = process.env.NODE_ENV !== 'production';
+```
+
+Add this DefinePlugin option:
+```js
+  plugins: [
+   new webpack.DefinePlugin({
+     TRACE_TURBOLINKS: devBuild,
+   }),
+```
+
+At Webpack compile time, the value of devBuild is inserted into your file.
+
+Once you do that, you'll see messages prefixed with **TURBO:** like this in the browser console:
+
+```
+TURBO: WITH TURBOLINKS: document page:before-unload and page:change handlers installed. (program)
+TURBO: reactOnRailsPageLoaded
+```
 
 We've noticed that Turbolinks doesn't work if you use the ruby gem version of jQuery and jQuery ujs. Therefore we recommend using the node packages instead. See the [tutorial app](https://github.com/shakacode/react-webpack-rails-tutorial) for how to accomplish this.

docs/contributing.md

@@ -41,13 +41,33 @@ npm i
 npm run build
 ```
 
-Use either npm-link (described below), or use a relative path in your `package.json`, like this:
-
-```js
-"react-on-rails": "../path-to-react-on-rails".
+Use a relative path in your `package.json`, like this:
+```sh
+cd client
+npm install --save "react-on-rails@../../react_on_rails"
 ```
 
-If you use a relative path, be sure to run `npm i` whenever you rebuild the node package.
+When you use a relative path, be sure to run the above `npm install` command whenever you change the node package for react-on-rails.
+
+Wihle we'd prefer to us `npm link`, we get errors. If you can figure out how to get `npm link react-on-rails` to work with this project, please file an issue or PR! This used to work with babel 5.
+
+This is the error:
+
+```
+16:34:11 rails-client-assets.1 | ERROR in /react_on_rails/node_package/lib/ReactOnRails.js
+16:34:11 rails-client-assets.1 | Module build failed: ReferenceError: Unknown plugin "react-transform" specified in "base" at 0, attempted to resolve relative to "/react_on_rails/node_package/lib"
+16:34:11 rails-client-assets.1 |     at /react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193:17
+16:34:11 rails-client-assets.1 |     at Array.map (native)
+16:34:11 rails-client-assets.1 |     at Function.normalisePlugins (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
+16:34:11 rails-client-assets.1 |     at OptionManager.mergeOptions (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
+16:34:11 rails-client-assets.1 |     at OptionManager.init (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
+16:34:11 rails-client-assets.1 |     at File.initOptions (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/index.js:191:75)
+16:34:11 rails-client-assets.1 |     at new File (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/file/index.js:122:22)
+16:34:11 rails-client-assets.1 |     at Pipeline.transform (/react-webpack-rails-tutorial/client/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
+16:34:11 rails-client-assets.1 |     at transpile (/react-webpack-rails-tutorial/client/node_modules/babel-loader/index.js:14:22)
+16:34:11 rails-client-assets.1 |     at Object.module.exports (/react-webpack-rails-tutorial/client/node_modules/babel-loader/index.js:88:12)
+16:34:11 rails-client-assets.1 |  @ ./app/bundles/comments/startup/clientRegistration.jsx 15:20-45
+```
 
 # Development Setup for Gem and Node Package Contributors
 
@@ -164,6 +184,10 @@ All linting is performed from the docker container for CI. You will need docker
 Once you have docker and docker-compose running locally, run `docker-compose build lint`. This will build the `reactonrails_lint` docker image and docker-compose `lint` container. The initial build is slow, but after the install, startup is very quick.
 
 ### Linting Commands
+Run `rake lint`. 
+
+Alternately with Docker:
+
 Run `rake -D docker` to see all docker linting commands for rake. `rake docker:lint` will run all linters. For individual rake linting commands please refer to `rake -D docker` for the list.
 
 You can run specific linting for directories or files by using `docker-compose run lint rubocop (file path or directory)`, etc.

lib/react_on_rails/version_checker.rb

@@ -61,7 +61,7 @@ def raw
       end
 
       def relative_path?
-        raw.match(/\.\./).present?
+        raw.match(%r{(\.\.|\Afile:///)}).present?
       end
 
       def major

node_package/src/ReactOnRails.js

@@ -9,7 +9,31 @@ import context from './context';
 
 const ctx = context();
 
+const DEFAULT_OPTIONS = {
+  traceTurbolinks: false,
+};
+
 ctx.ReactOnRails = {
+  /**
+   * Set options for ReactOnRails, typically before you call ReactOnRails.register
+   * Available Options:
+   * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
+   */
+  setOptions(options) {
+    if (options.hasOwnProperty('traceTurbolinks')) {
+      this._options.traceTurbolinks = options.traceTurbolinks;
+      delete options.traceTurbolinks;
+    }
+
+    if (Object.keys(options).length > 0) {
+      throw new Error('Invalid options passed to ReactOnRails.options: ', JSON.stringify(options));
+    }
+  },
+
+  option(key) {
+    return this._options[key];
+  },
+
   /**
    * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
    * find you components for rendering.
@@ -75,8 +99,14 @@ ctx.ReactOnRails = {
   registeredComponents() {
     return ComponentStore.components();
   },
+
+  resetOptions() {
+    this._options = Object.assign({}, DEFAULT_OPTIONS);
+  },
 };
 
+ReactOnRails.resetOptions();
+
 clientStartup(ctx);
 
 export default ctx.ReactOnRails;

node_package/src/clientStartup.js

@@ -11,7 +11,7 @@ function debugTurbolinks(...msg) {
     return;
   }
 
-  if (window.DEBUG_TURBOLINKS) {
+  if (ReactOnRails.option('traceTurbolinks')) {
     console.log('TURBO:', ...msg);
   }
 }

node_package/tests/ReactOnRails.test.js

@@ -24,3 +24,37 @@ test('ReactOnRails render returns a virtual DOM element for component', (assert)
   assert.deepEqual(actual, R1,
     'ReactOnRails render should return a virtual DOM element for component');
 });
+
+test('ReactOnRails accepts traceTurbolinks as an option true', (assert) => {
+  ReactOnRails.resetOptions();
+  assert.plan(1);
+  ReactOnRails.setOptions({ traceTurbolinks: true });
+  const actual = ReactOnRails.option('traceTurbolinks');
+  assert.equal(actual, true);
+});
+
+test('ReactOnRails accepts traceTurbolinks as an option false', (assert) => {
+  ReactOnRails.resetOptions();
+  assert.plan(1);
+  ReactOnRails.setOptions({ traceTurbolinks: false });
+  const actual = ReactOnRails.option('traceTurbolinks');
+  assert.equal(actual, false);
+});
+
+test('ReactOnRails not specified has traceTurbolinks as false', (assert) => {
+  ReactOnRails.resetOptions();
+  assert.plan(1);
+  ReactOnRails.setOptions({ });
+  const actual = ReactOnRails.option('traceTurbolinks');
+  assert.equal(actual, false);
+});
+
+test('serverRenderReactComponent throws error for invalid options', (assert) => {
+  ReactOnRails.resetOptions();
+  assert.plan(1);
+  assert.throws(
+    () => ReactOnRails.setOptions({ foobar: true }),
+    /Invalid option/,
+    'setOptions should throw an error for invalid options'
+  );
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -50,6 +50,7 @@
     "symlink-node-package": "node_package/scripts/symlink-node-package",
     "prepublish": "npm run build",
     "build": "node_package/scripts/build",
+    "build-watch": "$(npm bin)/babel --watch --out-dir node_package/lib node_package/src",
     "eslint": "eslint . --ext .jsx and .js",
     "jscs": "jscs . -e -v",
     "lint": "npm run eslint && npm run jscs",

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

@@ -2,8 +2,6 @@
 // and disabled via an environment variable (see also:
 //           Gemfile, layout/application.html.erb, and config/initializers/assets.rb
 
-//= require debug_turbolinks
-
 //= require application
 
 //= require turbolinks

spec/react_on_rails/fixtures/absolute_path_package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "babel": "^6.3.26",
+    "react-on-rails": "file:///Users/justin/shakacode/react_on_rails",
+    "webpack": "^1.12.8"
+  },
+  "devDependencies": {
+    "babel-eslint": "^5.0.0-beta6"
+  }
+}

spec/react_on_rails/spec_helper.rb

@@ -1,2 +1,15 @@
 $LOAD_PATH.unshift File.expand_path("../../../lib", __FILE__)
 require "react_on_rails"
+require "awesome_print"
+require "pry"
+require "pry-byebug"
+require "pry-stack_explorer"
+require "pry-doc"
+
+# Fails travis
+# require "pry-state"
+# require "pry-toys"
+# require "pry-rescue"
+
+require "binding_of_caller"
+require "awesome_print"

spec/react_on_rails/version_checker_spec.rb

@@ -37,7 +37,7 @@ module ReactOnRails
         end
       end
 
-      context "when package json uses a relative path" do
+      context "when package json uses a relative path with dots" do
         let(:node_package_version) do
           double_package_version(raw: "../../..", major: "", relative_path: true)
         end
@@ -98,7 +98,7 @@ def check_version(node_package_version, logger)
       end
 
       context "with node version of '../../..'" do
-        let(:package_json) { File.expand_path("../fixtures/relative_package.json", __FILE__) }
+        let(:package_json) { File.expand_path("../fixtures/relative_path_package.json", __FILE__) }
 
         describe "#raw" do
           specify { expect(node_package_version.raw).to eq("../../..") }
@@ -112,6 +112,22 @@ def check_version(node_package_version, logger)
           specify { expect(node_package_version.major).to be_nil }
         end
       end
+
+      context "with node version of 'file:///Users/justin/shakacode/react_on_rails'" do
+        let(:package_json) { File.expand_path("../fixtures/absolute_path_package.json", __FILE__) }
+
+        describe "#raw" do
+          specify { expect(node_package_version.raw).to eq("file:///Users/justin/shakacode/react_on_rails") }
+        end
+
+        describe "#relative_path?" do
+          specify { expect(node_package_version.relative_path?).to be true }
+        end
+
+        describe "#major" do
+          specify { expect(node_package_version.major).to be_nil }
+        end
+      end
     end
   end
 end