diff --git a/app/assets/javascripts/debug_turbolinks.js b/app/assets/javascripts/debug_turbolinks.js deleted file mode 100644 index 4b1c79e44..000000000 --- a/app/assets/javascripts/debug_turbolinks.js +++ /dev/null @@ -1,4 +0,0 @@ -window.DEBUG_TURBOLINKS = true; -console.log('window.DEBUG_TURBOLINKS = true;'); -console.log('To disable Turbolinks debugging, remove the debug_turbolinks require' + - ' from app/assets/javascripts/application.js'); diff --git a/docs/additional_reading/turbolinks.md b/docs/additional_reading/turbolinks.md index 1bdea9a25..a08eb83bb 100644 --- a/docs/additional_reading/turbolinks.md +++ b/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. diff --git a/docs/contributing.md b/docs/contributing.md index c8908308a..cf25a3cc4 100644 --- a/docs/contributing.md +++ b/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. diff --git a/lib/react_on_rails/version_checker.rb b/lib/react_on_rails/version_checker.rb index d2f91767f..5ba50d94d 100644 --- a/lib/react_on_rails/version_checker.rb +++ b/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 diff --git a/node_package/src/ReactOnRails.js b/node_package/src/ReactOnRails.js index f36fcf58f..2d770456f 100644 --- a/node_package/src/ReactOnRails.js +++ b/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; diff --git a/node_package/src/clientStartup.js b/node_package/src/clientStartup.js index 759183e08..87b852fa2 100644 --- a/node_package/src/clientStartup.js +++ b/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); } } diff --git a/node_package/tests/ReactOnRails.test.js b/node_package/tests/ReactOnRails.test.js index 75e9072a2..8e1ebeb5a 100644 --- a/node_package/tests/ReactOnRails.test.js +++ b/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' + ); +}); diff --git a/package.json b/package.json index 17e4b5060..b8c2e47e4 100644 --- a/package.json +++ b/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", diff --git a/spec/dummy/app/assets/javascripts/application_with_turbolinks.js b/spec/dummy/app/assets/javascripts/application_with_turbolinks.js index 0d1b241d1..8ae0e2caf 100644 --- a/spec/dummy/app/assets/javascripts/application_with_turbolinks.js +++ b/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 diff --git a/spec/react_on_rails/fixtures/absolute_path_package.json b/spec/react_on_rails/fixtures/absolute_path_package.json new file mode 100644 index 000000000..854d7f5c5 --- /dev/null +++ b/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" + } +} diff --git a/spec/react_on_rails/fixtures/relative_package.json b/spec/react_on_rails/fixtures/relative_path_package.json similarity index 100% rename from spec/react_on_rails/fixtures/relative_package.json rename to spec/react_on_rails/fixtures/relative_path_package.json diff --git a/spec/react_on_rails/spec_helper.rb b/spec/react_on_rails/spec_helper.rb index 69f9d8ab6..85e34fab4 100644 --- a/spec/react_on_rails/spec_helper.rb +++ b/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" diff --git a/spec/react_on_rails/version_checker_spec.rb b/spec/react_on_rails/version_checker_spec.rb index f247ddc2e..726187d86 100644 --- a/spec/react_on_rails/version_checker_spec.rb +++ b/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