diff --git a/.travis.yml b/.travis.yml index d1db631b..2e7f3ab8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -29,9 +29,8 @@ install: - npm install npm@latest -g - npm install -g yarn - npm --version - - npm install + - yarn install - rake react_on_rails:locale - - cd client && npm run build:test - rake db:setup # Tip: No need to run xvfb if running headless testing. However, we're going to start with diff --git a/Gemfile b/Gemfile index 8a6a9d8e..8cb0b510 100644 --- a/Gemfile +++ b/Gemfile @@ -38,7 +38,7 @@ gem "sdoc", group: :doc # Use Rails Html Sanitizer for HTML sanitization gem "rails-html-sanitizer" -gem "react_on_rails", "~> 6.7.1" +gem "react_on_rails", "6.9.3" # See https://github.com/sstephenson/execjs#readme for more supported runtimes # mini_racer is probably faster than therubyracer diff --git a/Gemfile.lock b/Gemfile.lock index 251d1bb5..1e5ee7df 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,44 +1,44 @@ GEM remote: https://rubygems.org/ specs: - actioncable (5.0.1) - actionpack (= 5.0.1) - nio4r (~> 1.2) + actioncable (5.0.2) + actionpack (= 5.0.2) + nio4r (>= 1.2, < 3.0) websocket-driver (~> 0.6.1) - actionmailer (5.0.1) - actionpack (= 5.0.1) - actionview (= 5.0.1) - activejob (= 5.0.1) + actionmailer (5.0.2) + actionpack (= 5.0.2) + actionview (= 5.0.2) + activejob (= 5.0.2) mail (~> 2.5, >= 2.5.4) rails-dom-testing (~> 2.0) - actionpack (5.0.1) - actionview (= 5.0.1) - activesupport (= 5.0.1) + actionpack (5.0.2) + actionview (= 5.0.2) + activesupport (= 5.0.2) rack (~> 2.0) rack-test (~> 0.6.3) rails-dom-testing (~> 2.0) rails-html-sanitizer (~> 1.0, >= 1.0.2) - actionview (5.0.1) - activesupport (= 5.0.1) + actionview (5.0.2) + activesupport (= 5.0.2) builder (~> 3.1) erubis (~> 2.7.0) rails-dom-testing (~> 2.0) - rails-html-sanitizer (~> 1.0, >= 1.0.2) - activejob (5.0.1) - activesupport (= 5.0.1) + rails-html-sanitizer (~> 1.0, >= 1.0.3) + activejob (5.0.2) + activesupport (= 5.0.2) globalid (>= 0.3.6) - activemodel (5.0.1) - activesupport (= 5.0.1) - activerecord (5.0.1) - activemodel (= 5.0.1) - activesupport (= 5.0.1) + activemodel (5.0.2) + activesupport (= 5.0.2) + activerecord (5.0.2) + activemodel (= 5.0.2) + activesupport (= 5.0.2) arel (~> 7.0) - activesupport (5.0.1) + activesupport (5.0.2) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (~> 0.7) minitest (~> 5.1) tzinfo (~> 1.1) - addressable (2.5.0) + addressable (2.5.1) public_suffix (~> 2.0, >= 2.0.2) archive-zip (0.7.0) io-like (~> 0.3.0) @@ -136,12 +136,12 @@ GEM libv8 (~> 5.3) minitest (5.10.1) multi_json (1.12.1) - nio4r (1.2.1) - nokogiri (1.7.0.1) + nio4r (2.0.0) + nokogiri (1.7.1) mini_portile2 (~> 2.1.0) parser (2.3.2.0) ast (~> 2.2) - pg (0.19.0) + pg (0.20.0) poltergeist (1.11.0) capybara (~> 2.1) cliver (~> 0.3.1) @@ -170,26 +170,26 @@ GEM rack (2.0.1) rack-test (0.6.3) rack (>= 1.0) - rails (5.0.1) - actioncable (= 5.0.1) - actionmailer (= 5.0.1) - actionpack (= 5.0.1) - actionview (= 5.0.1) - activejob (= 5.0.1) - activemodel (= 5.0.1) - activerecord (= 5.0.1) - activesupport (= 5.0.1) + rails (5.0.2) + actioncable (= 5.0.2) + actionmailer (= 5.0.2) + actionpack (= 5.0.2) + actionview (= 5.0.2) + activejob (= 5.0.2) + activemodel (= 5.0.2) + activerecord (= 5.0.2) + activesupport (= 5.0.2) bundler (>= 1.3.0, < 2.0) - railties (= 5.0.1) + railties (= 5.0.2) sprockets-rails (>= 2.0.0) rails-dom-testing (2.0.2) activesupport (>= 4.2.0, < 6.0) nokogiri (~> 1.6) rails-html-sanitizer (1.0.3) loofah (~> 2.0) - railties (5.0.1) - actionpack (= 5.0.1) - activesupport (= 5.0.1) + railties (5.0.2) + actionpack (= 5.0.2) + activesupport (= 5.0.2) method_source rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) @@ -199,7 +199,7 @@ GEM rb-inotify (0.9.7) ffi (>= 0.5.0) rdoc (4.3.0) - react_on_rails (6.7.1) + react_on_rails (6.9.3) addressable connection_pool execjs (~> 2.5) @@ -277,7 +277,7 @@ GEM thread_safe (0.3.6) tilt (2.0.5) tins (1.12.0) - tzinfo (1.2.2) + tzinfo (1.2.3) thread_safe (~> 0.1) uglifier (3.0.3) execjs (>= 0.3.0, < 3) @@ -329,7 +329,7 @@ DEPENDENCIES rails rails-html-sanitizer rainbow - react_on_rails (~> 6.7.1) + react_on_rails (= 6.9.3) redis rspec-rails (~> 3) rspec-retry @@ -348,4 +348,4 @@ RUBY VERSION ruby 2.3.1p112 BUNDLED WITH - 1.13.6 + 1.14.6 diff --git a/README.md b/README.md index 9ee871ed..8e5c23e3 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ See package.json and Gemfile for versions 1. Check that you have Postgres installed. Run `which postgres` to check. Use 9.4 or greater. 1. Check that you have `qmake` installed. Run `which qmake` to check. If missing, follow these instructions: [Installing Qt and compiling capybara-webkit](https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit) 1. `bundle install` -1. `npm install -g yarn` +1. `brew install yarn` 1. `yarn` 1. `rake db:setup` 1. `foreman start -f Procfile.hot` @@ -132,7 +132,7 @@ See package.json and Gemfile for versions ### Basic Command Line 1. Run all linters and tests: `rake` -1. See all npm commands: `npm run` +1. See all npm commands: `yarn run` 1. To start all development processes: `foreman start -f Procfile.dev` 1. To start only all Rails development processes: `foreman start -f Procfile.hot` @@ -146,7 +146,7 @@ See package.json and Gemfile for versions We include a sample setup for developing your JavaScript files without Rails. However, this is no longer recommended as it's best to create your APIs in Rails, and take advantage of the hot reloading of your react components provided by this project. -1. Run the node server with file `server-express.js` with command `npm run` or `cd client && node server-express.js`. +1. Run the node server with file `server-express.js` with command `yarn run` or `cd client && node server-express.js`. 2. Point your browser to [http://localhost:4000](http://localhost:4000) Save a change to a JSX file and see it update immediately in the browser! Note, any browser state still exists, such as what you've typed in the comments box. That's totally different than [Live Reload](http://livereload.com/) which refreshes the browser. Note, we just got this working with your regular Rails server! See above for **Hot Loading**. diff --git a/client/package.json b/client/package.json index 7bbb3fa4..78c2491d 100644 --- a/client/package.json +++ b/client/package.json @@ -76,7 +76,7 @@ "react-bootstrap": "^0.30.7", "react-dom": "^15.4.1", "react-intl": "^2.2.2", - "react-on-rails": "^6.2.1", + "react-on-rails": "^6.9.3", "react-redux": "^4.4.6", "react-router": "^3.0.0", "react-router-redux": "^4.0.7", diff --git a/client/webpack.client.rails.build.config.js b/client/webpack.client.rails.build.config.js index 9ea531c1..299f99a5 100644 --- a/client/webpack.client.rails.build.config.js +++ b/client/webpack.client.rails.build.config.js @@ -2,7 +2,7 @@ {"functions": "never", "arrays": "only-multiline", "objects": "only-multiline"} ] */ // Run like this: -// cd client && npm run build:client +// cd client && yarn run build:client // Note that Foreman (Procfile.dev) has also been configured to take care of this. const path = require('path'); diff --git a/client/yarn.lock b/client/yarn.lock index 949cbf16..d28bc02c 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -130,6 +130,12 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" +aria-query@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.3.0.tgz#cb8a9984e2862711c83c80ade5b8f5ca0de2b467" + dependencies: + ast-types-flow "0.0.7" + arr-diff@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf" @@ -215,6 +221,10 @@ assertion-error@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c" +ast-types-flow@0.0.7: + version "0.0.7" + resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" + async-each@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" @@ -1867,6 +1877,10 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" +emoji-regex@^6.1.0: + version "6.4.1" + resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.1.tgz#77486fe9cd45421d260a6238b88d721e2fad2050" + emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" @@ -2015,22 +2029,22 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-config-airbnb-base@^10.0.0: - version "10.0.1" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-10.0.1.tgz#f17d4e52992c1d45d1b7713efbcd5ecd0e7e0506" +eslint-config-airbnb-base@^11.1.0: + version "11.1.2" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-11.1.2.tgz#259209a7678bf693e31cbe8f953f206b6aa7ccc3" -eslint-config-airbnb@^13.0.0: - version "13.0.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-13.0.0.tgz#688d15d3c276c0c753ae538c92a44397d76ae46e" +eslint-config-airbnb@^14.1.0: + version "14.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-14.1.0.tgz#355d290040bbf8e00bf8b4b19f4b70cbe7c2317f" dependencies: - eslint-config-airbnb-base "^10.0.0" + eslint-config-airbnb-base "^11.1.0" -eslint-config-shakacode@^13.2.0-beta.1: - version "13.2.1" - resolved "https://registry.yarnpkg.com/eslint-config-shakacode/-/eslint-config-shakacode-13.2.1.tgz#93194d101101ede72bc2c7cfbe3214deac1c86c4" +eslint-config-shakacode@^14.1.1: + version "14.1.1" + resolved "https://registry.yarnpkg.com/eslint-config-shakacode/-/eslint-config-shakacode-14.1.1.tgz#bc31841c20799435c14ae7b008f04fc8e1d7f97a" dependencies: babel-eslint "^7.1.1" - eslint-config-airbnb "^13.0.0" + eslint-config-airbnb "^14.1.0" eslint-import-resolver-node@^0.2.0: version "0.2.3" @@ -2078,15 +2092,18 @@ eslint-plugin-import@^2.2.0: minimatch "^3.0.3" pkg-up "^1.0.0" -eslint-plugin-jsx-a11y@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-2.2.3.tgz#4e35cb71b8a7db702ac415c806eb8e8d9ea6c65d" +eslint-plugin-jsx-a11y@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-4.0.0.tgz#779bb0fe7b08da564a422624911de10061e048ee" dependencies: + aria-query "^0.3.0" + ast-types-flow "0.0.7" damerau-levenshtein "^1.0.0" + emoji-regex "^6.1.0" jsx-ast-utils "^1.0.0" object-assign "^4.0.1" -eslint-plugin-react@^6.7.1: +eslint-plugin-react@^6.10.3: version "6.10.3" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78" dependencies: @@ -2096,7 +2113,7 @@ eslint-plugin-react@^6.7.1: jsx-ast-utils "^1.3.4" object.assign "^4.0.4" -eslint@^3.10.2: +eslint@^3.18.0: version "3.18.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.18.0.tgz#647e985c4ae71502d20ac62c109f66d5104c8a4b" dependencies: @@ -4629,9 +4646,9 @@ react-intl@^2.2.2: intl-relativeformat "^1.3.0" invariant "^2.1.1" -react-on-rails@^6.2.1: - version "6.8.2" - resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-6.8.2.tgz#756bdec765efea4154acf44457307c292ef3c033" +react-on-rails@^6.9.3: + version "6.9.3" + resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-6.9.3.tgz#71aa3c6d0995e387e2c406359f7988991ac4180e" react-overlays@^0.6.12: version "0.6.12" diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb index b704cd18..e7d3161c 100644 --- a/config/initializers/react_on_rails.rb +++ b/config/initializers/react_on_rails.rb @@ -17,11 +17,11 @@ # 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" + config.npm_build_test_command = "yarn 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" + config.npm_build_production_command = "yarn run build:production" ################################################################################ # CLIENT RENDERING OPTIONS @@ -75,8 +75,6 @@ ################################################################################ # MISCELLANEOUS OPTIONS ################################################################################ - # Default is false, enable if your content security policy doesn't include `style-src: 'unsafe-inline'` - config.skip_display_none = false # This allows you to add additional values to the Rails Context. Implement one static method # called `custom_context(view_context)` and return a Hash. diff --git a/docs/bourbon-integration.md b/docs/bourbon-integration.md index 28f1ad76..73edccca 100644 --- a/docs/bourbon-integration.md +++ b/docs/bourbon-integration.md @@ -2,7 +2,7 @@ To use [bourbon](https://github.com/thoughtbot/bourbon) take the following steps: -- Install node-bourbon `cd client && npm install --save node-bourbon` +- Install node-bourbon `cd client && yarn install --save node-bourbon` - Update [bootstrap-sass.js](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/bootstrap-sass.config.js) to use the right paths: ``` // Add this diff --git a/docs/tests-and-ci.md b/docs/tests-and-ci.md index c7ffd3e0..d90bdd3e 100644 --- a/docs/tests-and-ci.md +++ b/docs/tests-and-ci.md @@ -10,26 +10,25 @@ We have: From the root of the project, you can run all specs+tests+linter with - npm run test + yarn run test Run the feature specs individually with `rspec`. Run the React unit tests (all .js and .jsx files) from the `client` dir with; cd client - npm run test --silent + yarn run test --silent In lieu of having `mocha --watch` working properly (pull request welcome!), you can have your js tests continually running with `watch` - npm install -g watch + yarn install -g watch cd client - watch 'npm run test --silent' test/ app/ + watch 'yarn run test --silent' test/ app/ ## CI configuration Add those lines to your CI scripts after `bundle install` ```sh -npm install -cd client && npm run build:client && npm run build:server +yarn install ``` diff --git a/lib/tasks/ci.rake b/lib/tasks/ci.rake index 5828fc91..b9d7d311 100644 --- a/lib/tasks/ci.rake +++ b/lib/tasks/ci.rake @@ -14,7 +14,7 @@ if Rails.env.development? || Rails.env.test? task :js_tests do puts Rainbow("Running JavaScript tests").green - sh "npm run test:client" + sh "yarn run test:client" end task :rspec_tests do diff --git a/lib/tasks/linters.rake b/lib/tasks/linters.rake index 60500d6c..b10f418e 100644 --- a/lib/tasks/linters.rake +++ b/lib/tasks/linters.rake @@ -38,7 +38,7 @@ if %w(development test).include? Rails.env desc "eslint" task :eslint do - cmd = "npm run lint" + cmd = "yarn run lint" puts "Running eslint via `#{cmd}`" sh cmd end diff --git a/scripts/lint b/scripts/lint index 15595b66..3e3fe72d 100755 --- a/scripts/lint +++ b/scripts/lint @@ -7,7 +7,7 @@ echo Linting with ruby-lint ruby-lint app config spec echo Linting with eslint -(cd client && npm run lint) +(cd client && yarn run lint) scss-lint client/**/*.scss app/assets/stylesheets/*.scss diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb index 3d295cd2..893c6cb0 100644 --- a/spec/rails_helper.rb +++ b/spec/rails_helper.rb @@ -39,7 +39,13 @@ config.include FactoryGirl::Syntax::Methods # Next line will ensure that assets are built if webpack -w is not running - ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config) + ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config, :feature_spec) + + # Because we're using some CSS Webpack files, we need to ensure the webpack files are generated + # for all feature specs. https://github.com/shakacode/react_on_rails/issues/792 + config.define_derived_metadata(file_path: %r{spec/features}) do |metadata| + metadata[:feature_spec] = true + end # For Poltergeist # Turning animations off results in about a 10 sec difference: