Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
 into script-tag
  • Loading branch information
cheremukhin23 committed Mar 27, 2017
2 parents 27bfe25 + 80640d6 commit 38b5f77
Show file tree
Hide file tree
Showing 27 changed files with 283 additions and 226 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ node_package/webpack.config.js
**/generated/**
**/app/assets/javascripts/application.js
**/coverage/**
**/cable.js
12 changes: 6 additions & 6 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ language: ruby
rvm:
# Ruby 2.0.0 fails due to newer Nokogir
# nokogiri-1.7.0.1 requires ruby version >= 2.1.0, which is incompatible with the current version, ruby 2.0.0p648
- 2.1.10
# Rails 5 requires 2.2
# - 2.1.10
- 2.2.6
- 2.3.1
services:
Expand All @@ -25,7 +26,6 @@ env:
- RAILS_ENV=test
- DRIVER=selenium_chrome
- CHROME_BIN=/usr/bin/google-chrome
- ENABLE_TURBOLINKS_5=TRUE
- USE_COVERALLS=TRUE

before_install:
Expand All @@ -36,11 +36,11 @@ before_install:
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen scn 1600x1200x16"

install:
- nvm install node
- travis_retry nvm install node
- node -v
- npm i -g [email protected]
- yarn
- bundle install
- travis_retry npm i -g [email protected]
- travis_retry yarn
- travis_retry bundle install
- rake dummy_apps
- rake examples
- rake node_package
Expand Down
10 changes: 8 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]

## [Unreleased]
*Please add entries here for your pull requests.*

## [6.8.1] - 2017-03-21
### Fixed
- Fixed error "The node you're attempting to unmount was rendered by another copy of React." [#706](https://github.com/shakacode/react_on_rails/issues/706) when navigating to cached page using Turbolinks [#763](https://github.com/shakacode/react_on_rails/pull/763) by [szyablitsky](https://github.com/szyablitsky).

## [6.8.0] - 2017-03-06
## Added
- Converted to Webpack v2 for generators, tests, and all example code. [#742](https://github.com/shakacode/react_on_rails/pull/742) by [justin808](https://github.com/justin808).
Expand All @@ -29,7 +34,7 @@ Commenting out this line addresses the issue:

```
config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
```
```

### Added
- Allow using rake task to generate javascript locale files. The test helper automatically creates the localization files when needed. [#717](https://github.com/shakacode/react_on_rails/pull/717) by [JasonYCHuang](https://github.com/JasonYCHuang).
Expand Down Expand Up @@ -484,7 +489,8 @@ Best done with Object destructing:
##### Fixed
- Fix several generator related issues.

[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.8.0...master
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.8.1...master
[6.8.1]: https://github.com/shakacode/react_on_rails/compare/6.8.0...6.8.1
[6.8.0]: https://github.com/shakacode/react_on_rails/compare/6.7.2...6.8.0
[6.7.2]: https://github.com/shakacode/react_on_rails/compare/6.7.1...6.7.2
[6.7.1]: https://github.com/shakacode/react_on_rails/compare/6.7.0...6.7.1
Expand Down
58 changes: 39 additions & 19 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ When making doc changes, we want the change to work on both the gitbook and the
## To run tests:
* After updating code via git, to prepare all examples and run all tests:

```
```sh
cd react_on_rails/
bundle && yarn && rake examples:prepare_all && rake node_package && rake
```

Expand Down Expand Up @@ -72,32 +73,49 @@ It's critical to configure your IDE/editor to ignore certain directories. Otherw
* /spec/react_on_rails/dummy-for-generators

# Configuring your test app to use your local fork
You can test the `react-on-rails` gem using your own external test app or the gem's internal `spec/dummy` app. The `spec/dummy` app is an example of the various setup techniques you can use with the gem.
```
├── test
| └── client
└── react_on_rails
└── spec
└── dummy
```

## Ruby Gem
If you want to test the gem with an application before you release a new version of the gem, you can specify the path to your local version via your test app's Gemfile:
## Testing the Ruby Gem
If you want to test the ruby parts of the gem with an application before you release a new version of the gem, you can specify the path to your local version via your test app's Gemfile:

```ruby
gem "react_on_rails", path: "../path-to-react-on-rails"
```

Note that you will need to bundle install after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.

## NPM for react-on-rails
First, be **sure** to build the NPM package
## Testing the Node package for react-on-rails
In addition to testing the Ruby parts out, you can also test the node package parts of the gem with an external application. First, be **sure** to build the NPM package:

```sh
cd react_on_rails/
yarn
yarn run build
```

Use a relative path in your `package.json`, like this:
Install the local package by using a relative path in your test/client app's `package.json`, like this:
```sh
cd client
yarn add "react-on-rails@../../react_on_rails"
cd test/client
npm i --save 'react-on-rails@../path-to-react-on-rails'
```
_Note: You must use npm here till yarn stops preferring cached packages over local. see [issue #2649](https://github.com/yarnpkg/yarn/issues/2649)_

When you use a relative path, be sure to run the above `yarn` command whenever you change the node package for react-on-rails.

#### Example: Testing NPM changes with the dummy app
1. Add `console.log('Hello!')` [here](https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.js#L181) in `react_on_rails/node_package/src/clientStartup.js` to confirm we're getting an update to the node package.
2. Run the install script `npm run install-react-on-rails` in `react_on_rails/spec/dummy` to copy over our changes to the dummy app. Alternatively, you can run `npm i --save 'file:../../../'` in `react_on_rails/spec/dummy/client`. Our NPM changes are now available in the dummy app.
3. Refresh the browser if the server is already running or start the server using `foreman start` from `react_on_rails/spec/dummy` and navigate to `http://localhost:5000/`. You will now see the `Hello!` message printed in the browser's console.

_Note: running `npm i` automatically builds the npm package before installing. However, when using yarn you will need to run `yarn run build` in the root directory before the install script. This will be updated when yarn issue #2649 (above) is resolved._

# Development Setup for Gem and Node Package Contributors

## Checklist before Committing
Expand All @@ -119,11 +137,13 @@ yarn global add phantomjs
Note this *must* be installed globally for the dummy test project rspec runner to see it properly.

### Local Node Package
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the test app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the dummy app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)

```sh
cd react_on_rails/spec/dummy
yarn run install-react-on-rails
```
_Note: this runs npm under the hood as explained in **Test NPM for react-on-rails** section above_

From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.

Expand All @@ -141,9 +161,9 @@ From now on, the example and dummy apps will use your local node_package folder
### Install NPM dependencies and build the NPM package for react-on-rails

```sh
cd <top level>
cd react_on_rails/
yarn
npm build
yarn build
```

Or run this which builds the yarn package, then the webpack files for spec/dummy, and runs tests in
Expand All @@ -153,40 +173,40 @@ spec/dummy.
```sh
# Optionally change default selenium_firefox driver
export DRIVER=poltergeist
cd <top level>
cd react_on_rails/
yarn run dummy:spec
```

### Run NPM JS tests

```sh
cd <top level>
cd react_on_rails/
yarn test
```

### Run spec/dummy tests

```sh
cd spec/dummy
cd react_on_rails/spec/dummy
rspec
```

Eventually, we may have JS tests:

```sh
cd spec/dummy/client
cd react_on_rails/spec/dummy/client
yarn run test
```

### Run most tests and linting

```sh
cd <top level>
npm run check
cd react_on_rails/
yarn run check
```

### Starting the Dummy App
To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `yarn run build`. Since the react-on-rails package should be sym linked, you don't have to `yarn react-on-rails` after every change.
To run the dummy app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `yarn run build`. Since the react-on-rails package should be sym linked, you don't have to `yarn react-on-rails` after every change.

### RSpec Testing
Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within the sample apps, like `spec/dummy`.
Expand All @@ -195,7 +215,7 @@ If you run `rspec` at the top level, you'll see this message: `require': cannot

After running a test, you can view the coverage results SimpleCov reports by opening `coverage/index.html`.

To test `spec/dummy` against Turbolinks 5, install the gem by running `ENABLE_TURBOLINKS_5=TRUE bundle install` in the `spec/dummy` directory before running `rake`.
To test `spec/dummy` against Turbolinks 2, install the gem by running `ENABLE_TURBOLINKS_2=TRUE bundle install` in the `spec/dummy` directory before running `rake`. Turbolinks 5 is the default.

Run `rake -T` or `rake -D` to see testing options.

Expand Down
9 changes: 5 additions & 4 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ gem "sdoc", "~> 0.4.0", group: :doc
gem "spring"
gem "sqlite3"
gem "mini_racer"
if ENV["ENABLE_TURBOLINKS_5"].nil? || ENV["ENABLE_TURBOLINKS_5"].strip.empty?
gem "turbolinks", "2.5.3"
else
if ENV["ENABLE_TURBOLINKS_2"].nil? || ENV["ENABLE_TURBOLINKS_2"].strip.empty?
gem "turbolinks", "~> 5.0"
else
gem "turbolinks", "2.5.3"
end
gem "uglifier", ">= 2.7.2"
gem "web-console", "~> 2.0", group: :development
Expand All @@ -35,7 +35,8 @@ gem "rspec-rails"
gem "rspec-retry"
gem "capybara"
gem "capybara-screenshot"
gem "capybara-webkit"
# Trouble installing on Sierra
# gem "capybara-webkit"
gem "chromedriver-helper"
gem "launchy"
gem "poltergeist"
Expand Down
4 changes: 4 additions & 0 deletions KUDOS.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ This is a sibling file to [PROJECTS.md](./PROJECTS.md).

I'm looking for quotes on why you like using React on Rails. You might mention any benefits you particularly like and if you've migrated from react-rails. Just click to edit and github will automatically open up a PR. Thanks to everybody that contributes!

### March 23, 2017
Github issue [#766](https://github.com/shakacode/react_on_rails/issues/766).
![2017-03-23_17-43-17](https://cloud.githubusercontent.com/assets/1118459/24279884/badab166-0ff0-11e7-87ab-94253f55a3d9.png)

### March 2, 2017
![2017-03-05_21-34-34](https://cloud.githubusercontent.com/assets/1118459/23600716/0d8c40d6-01ec-11e7-998d-4ce9e6abcacb.png)

Expand Down
4 changes: 3 additions & 1 deletion PROJECTS.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
#Projects using React on Rails
# Projects using React on Rails

*Please add your project to this list.*

## Commercial Products Live
* **[Friends and Guests](https://www.friendsandguests.com/)**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Network Connecting Hosts and Guests".
* **[KissKissBankBank](https://www.kisskissbankbank.com/)**, large French crowdfunding platform.
* **[Nootrobox](https://nootrobox.com)**: Web ecommerce site for "biohacking" products.
* **[GuavaPass](https://guavapass.com/)**: Coaching client of [ShakaCode](http://www.shakacode.com) and React on Rails fan!
* **[Pivotal Tracker](http://www.pivotaltracker.com/)**: The first (and most-loved) agile project management tool built on Rails. React on Rails has greatly simplified integration and workflow for our React components in Rails!
Expand Down Expand Up @@ -38,3 +39,4 @@

* [github.com/Limenius/symfony-react-sandbox](https://github.com/Limenius/symfony-react-sandbox)
* [github.com/tswayne/react-helper](https://github.com/tswayne/react-helper)
* [github.com/KissKissBankBank/kitten](https://github.com/KissKissBankBank/kitten)
7 changes: 6 additions & 1 deletion docs/additional-reading/hot-reloading-rails-development.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
# Hot Reloading of Assets For Rails Development

This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. There are 2 examples of this setup:
This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. See [Issue 332](https://github.com/shakacode/react_on_rails/issues/332) for troubleshooting. There are 3 examples of this setup:

1. [minimal demo here](https://github.com/retroalgic/react-on-rails-hot-minimal): The most simple and updated hot reloading setup.
1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy): Simpler setup used for integration testing this gem.
1. [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). Full featured setup using Twitter bootstrap.

## Help Wanted

This doc might be outdated. PRs welcome!

## High Level Strategy

We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rather than the asset pipeline, and only during development mode. This is configured via the `Procfile.hot`.
Expand Down
22 changes: 15 additions & 7 deletions docs/additional-reading/rails-assets-relative-paths.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,24 +157,32 @@ module.exports = {
})
],
module: {
loaders: [
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: require.resolve('react'),
loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
},
}
},
{
// The important stuff
test: /\.(jpg|jpeg|png)(\?.*)?$/, // Load only .jpg .jpeg, and .png files
loader: 'file-loader',
query: {
name: '[name][md5:hash].[ext]', // Name of bundled asset
outputPath: 'webpack-assets/', // Output location for assets. Final: `app/assets/webpack/webpack-assets/`
publicPath: '/assets/webpack-assets/' // Endpoint asset can be found at on Rails server
use: {
loader: 'file-loader',
options: {
name: '[name][md5:hash].[ext]', // Name of bundled asset
outputPath: 'webpack-assets/', // Output location for assets. Final: `app/assets/webpack/webpack-assets/`
publicPath: '/assets/webpack-assets/' // Endpoint asset can be found at on Rails server
}
}
}
]
Expand Down
2 changes: 1 addition & 1 deletion docs/additional-reading/turbolinks.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ TURBO: reactOnRailsPageLoaded

Turbolinks 5:
```
TURBO: WITH TURBOLINKS 5: document turbolinks:before-render and turbolinks:load handlers installed. (program)
TURBO: WITH TURBOLINKS 5: document turbolinks:before-render and turbolinks:render handlers installed. (program)
TURBO: reactOnRailsPageLoaded
```

Expand Down
2 changes: 1 addition & 1 deletion lib/react_on_rails/version.rb
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module ReactOnRails
VERSION = "6.8.0".freeze
VERSION = "6.8.1".freeze
end
5 changes: 3 additions & 2 deletions node_package/src/clientStartup.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,10 @@ export function clientStartup(context) {
if (turbolinksVersion5()) {
debugTurbolinks(
'USING TURBOLINKS 5: document added event listeners ' +
'turbolinks:before-render and turbolinks:load.');
'turbolinks:before-render and turbolinks:render.');
document.addEventListener('turbolinks:before-render', reactOnRailsPageUnloaded);
document.addEventListener('turbolinks:load', reactOnRailsPageLoaded);
document.addEventListener('turbolinks:render', reactOnRailsPageLoaded);
reactOnRailsPageLoaded();
} else {
debugTurbolinks(
'USING TURBOLINKS 2: document added event listeners page:before-unload and ' +
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-on-rails",
"version": "6.8.0",
"version": "6.8.1",
"description": "react-on-rails JavaScript for react_on_rails Ruby gem",
"main": "node_package/lib/ReactOnRails.js",
"directories": {
Expand Down
4 changes: 2 additions & 2 deletions rakelib/dummy_apps.rake
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ namespace :dummy_apps do
sh_in_dir(dummy_app_dir, "yarn install --mutex network")
end

task :dummy_app_with_turbolinks_5 do
task :dummy_app_with_turbolinks_2 do
dummy_app_dir = File.join(gem_root, "spec/dummy")
bundle_install_with_turbolinks_5_in(dummy_app_dir)
bundle_install_with_turbolinks_2_in(dummy_app_dir)
sh_in_dir(dummy_app_dir, "yarn install --mutex network")
end

Expand Down
Loading

0 comments on commit 38b5f77

Please sign in to comment.