react_on_rails 2.0.2 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintignore +4 -0
  3. data/.gitignore +2 -1
  4. data/.npmignore +2 -0
  5. data/.rubocop.yml +2 -3
  6. data/CHANGELOG.md +50 -19
  7. data/README.md +37 -4
  8. data/app/helpers/react_on_rails_helper.rb +6 -6
  9. data/docs/additional_reading/rspec_configuration.md +10 -0
  10. data/docs/additional_reading/turbolinks.md +39 -0
  11. data/docs/additional_reading/updating-dependencies.md +33 -0
  12. data/docs/coding-style/style.md +0 -1
  13. data/docs/contributing.md +2 -1
  14. data/docs/doctrine.md +78 -0
  15. data/docs/recommended-project-structure.md +22 -0
  16. data/docs/releasing.md +59 -27
  17. data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
  18. data/lib/generators/react_on_rails/generator_messages.rb +1 -1
  19. data/lib/generators/react_on_rails/install_generator.rb +1 -11
  20. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +29 -28
  21. data/lib/generators/react_on_rails/templates/base/base/client/server.js +14 -6
  22. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js +4 -2
  23. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.hot.config.js.tt +2 -2
  24. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -0
  25. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
  26. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +3 -5
  27. data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +3 -5
  28. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx +4 -3
  29. data/lib/react_on_rails.rb +11 -0
  30. data/lib/react_on_rails/configuration.rb +15 -13
  31. data/lib/react_on_rails/engine.rb +0 -2
  32. data/lib/react_on_rails/ensure_assets_compiled.rb +31 -0
  33. data/lib/react_on_rails/git_utils.rb +12 -0
  34. data/lib/react_on_rails/utils.rb +7 -0
  35. data/lib/react_on_rails/version.rb +1 -1
  36. data/lib/react_on_rails/version_checker.rb +0 -3
  37. data/lib/react_on_rails/version_syntax_converter.rb +3 -5
  38. data/npm-shrinkwrap.json +4253 -0
  39. data/package.json +20 -16
  40. data/rakelib/example_type.rb +5 -6
  41. data/rakelib/examples.rake +1 -0
  42. data/rakelib/lint.rake +2 -2
  43. data/rakelib/release.rake +70 -0
  44. data/rakelib/run_rspec.rake +17 -8
  45. data/rakelib/task_helpers.rb +3 -3
  46. data/react_on_rails.gemspec +2 -2
  47. data/script/release +1 -1
  48. metadata +14 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c2f1692d27068c5ff56f536cb757df449c45f24b
4
- data.tar.gz: 318551a2d916e05290e9016c3b6b711e5626df6c
3
+ metadata.gz: fb99dea8d39f2e84fd72b80d73d7333815b40bf9
4
+ data.tar.gz: bfdf9b5e78fbfe0449500ad8e033b5d5ca7806f4
5
5
  SHA512:
6
- metadata.gz: bccce7baf521f616d7e3114e4ec3a1ce76d838c2079255ae842f17190c92b732a664f72bff6fc750b8751bbfd8e482ace93573c5b61d84767a8c4c376cbcdc80
7
- data.tar.gz: cd5e62885e22cf3f30e3402f65dc2e4d1d25adbeb9e1a941848821e73315c9ccd2408e8de4f8c49d45d25c3ed145611b6cbfc097222c2f2cff7b0aa89d66811c
6
+ metadata.gz: 35bb78629f6618a2551559b052eda1e8fe5d5ab1929716881d617fbb9c6b3fa4204d0c16f2513243825cc68a96aefd394940ae4f76cab8e7d48c1ef4b2fbb159
7
+ data.tar.gz: c944b722816f3fb8e87392b223d43f09d7ff1ab26bf3c546ce86fe50c618d603c5a5b44d7c60be2df94253a0f51ad08e2a101a0a4e5cb634a8ac94bd11515f70
@@ -5,3 +5,7 @@ spec/dummy
5
5
  node_package/lib/
6
6
  node_package/tests/node_modules
7
7
  node_package/webpack.config.js
8
+ **/node_modules/**
9
+ **/generated/**
10
+ **/app/assets/javascripts/application.js
11
+ **/coverage/**
data/.gitignore CHANGED
@@ -20,9 +20,10 @@
20
20
  .ruby-gemset
21
21
 
22
22
  node_modules
23
- /examples
24
23
 
25
24
  /node_package/lib
26
25
 
27
26
  npm-debug.*
28
27
  spec/dummy/client/npm-debug.log.*
28
+
29
+ /gen-examples
data/.npmignore CHANGED
@@ -18,3 +18,5 @@ rakelib
18
18
  ruby-lint.yml
19
19
  spec
20
20
  node_modules
21
+ tmp
22
+ gen-examples
@@ -20,7 +20,7 @@ AllCops:
20
20
  - !ruby/regexp /old_and_unused\.rb$/
21
21
  - 'spec/react_on_rails/dummy-for-generators/**/*'
22
22
  - 'spec/dummy/bin/**/*'
23
- - 'examples/**/*'
23
+ - 'gen-examples/examples/**/*'
24
24
 
25
25
  Metrics/LineLength:
26
26
  Max: 120
@@ -43,7 +43,7 @@ Lint/HandleExceptions:
43
43
 
44
44
  # Offense count: 1
45
45
  Metrics/AbcSize:
46
- Max: 23
46
+ Max: 24
47
47
 
48
48
  # Offense count: 1
49
49
  # Configuration parameters: CountComments.
@@ -69,4 +69,3 @@ Metrics/ModuleLength:
69
69
  Style/GlobalVars:
70
70
  Exclude:
71
71
  - 'spec/dummy/config/environments/development.rb'
72
-
@@ -1,7 +1,34 @@
1
1
  # Change Log
2
2
  All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
3
3
 
4
- ## v2.0.0
4
+ Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
5
+
6
+ ## [Unreleased]
7
+
8
+ ## [2.1.0] - 2016-01-26
9
+ ##### Added
10
+ - Added EnsureAssetsCompiled feature so that you do not accidentally run tests without properly compiling the JavaScript bundles. Add a line to your `rails_helper.rb` file to check that the latest Webpack bundles have been generated prior to running tests that may depend on your client-side code. See [docs](docs/additional_reading/rspec_configuration.md) for more detailed instructions. [#222](https://github.com/shakacode/react_on_rails/pull/222)
11
+ - Added [migration guide](https://github.com/shakacode/react_on_rails#migrate-from-react-rails) for migrating from React-Rails. [#219](https://github.com/shakacode/react_on_rails/pull/219)
12
+ - Added [React on Rails Doctrine](docs/doctrine.md) to docs. Discusses the project's motivations, conventions, and principles. [#220](https://github.com/shakacode/react_on_rails/pull/220)
13
+ - Added ability to skip `display:none` style in the generated content tag for a component. Some developers may want to disable inline styles for security reasons. See generated config [initializer file](lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb#L27) for example on setting `skip_display_none`. [#218](https://github.com/shakacode/react_on_rails/pull/218)
14
+
15
+ ##### Changed
16
+ - Changed message when running the dev (a.k.a. "express" server). [#227](https://github.com/shakacode/react_on_rails/commit/543ae70254d0c7b477e2c92af86f40746e58a431)
17
+
18
+ ##### Fixed
19
+ - Fixed handling of Turbolinks. Code was checking that Turbolinks was installed when it was not yet because some setups load Turbolinks after the bundles. The changes to the code will check if Turbolinks is installed after the page loaded event fires. Code was also added to allow easy debugging of Turbolinks, which should be useful when v5 of Turbolinks is released shortly. Details of how to configure Turbolinks with troubleshooting were added to docs/additional_reading/turbolinks.md. [#221](https://github.com/shakacode/react_on_rails/pull/221)
20
+ - Fixed issue with already initialized constant warning appearing when starting a Rails server [#226](https://github.com/shakacode/react_on_rails/pull/226)
21
+ - Fixed to make backwards compatible with Ruby v2.0 and updated all Ruby and Node dependencies.
22
+
23
+ ---
24
+
25
+ ## [2.0.2]
26
+ - Added better messages after generator runs. [#210](https://github.com/shakacode/react_on_rails/pull/210)
27
+
28
+ ## [2.0.1]
29
+ - Fixed bug with version matching between gem and npm package.
30
+
31
+ ## [2.0.0]
5
32
  - Move JavaScript part of react_on_rails to npm package 'react-on-rails'.
6
33
  - Converted JavaScript code to ES6! with tests!
7
34
  - No global namespace pollution. ReactOnRails is the only global added.
@@ -39,7 +66,7 @@ Best done with Object destructing:
39
66
  - JS Linter uses ShakaCode JavaScript style: https://github.com/shakacode/style-guide-javascript
40
67
  - Generators account these differences.
41
68
 
42
- ### Migration Steps
69
+ ##### Migration Steps
43
70
  [Example of upgrading](https://github.com/shakacode/react-webpack-rails-tutorial/commit/5b1b8698e8daf0f0b94e987740bc85ee237ef608)
44
71
 
45
72
  1. Update the `react_on_rails` gem.
@@ -51,42 +78,46 @@ Best done with Object destructing:
51
78
  7. Run `cd client && npm i --save react-on-rails` to get react-on-rails into your `client/package.json`.
52
79
  8. You should also update any other dependencies if possible to match up with the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
53
80
 
54
- ## v1.2.2
55
- ### Fixed
81
+ ---
82
+
83
+ ## [1.2.2]
84
+ ##### Fixed
56
85
  - Missing Lodash from generated package.json [#175](https://github.com/shakacode/react_on_rails/pull/175)
57
86
  - Rails 3.2 could not run generators [#182](https://github.com/shakacode/react_on_rails/pull/182)
58
87
  - Better placement of jquery_ujs dependency [#171](https://github.com/shakacode/react_on_rails/pull/171)
59
88
  - Add more detailed description when adding --help option to generator [#161](https://github.com/shakacode/react_on_rails/pull/161)
60
89
  - Lots of better docs.
61
90
 
62
- ## v1.2.0
63
- ### Added
91
+ ## [1.2.0]
92
+ ##### Added
64
93
  - Support `--skip-bootstrap` or `-b` option for generator.
65
94
  - Create examples tasks to test generated example apps.
66
95
 
67
- ### Fixed
96
+ ##### Fixed
68
97
  - Fix non-server rendering configuration issues.
69
98
  - Fix application.js incorrect overwritten issue.
70
99
  - Fix Gemfile dependencies.
71
100
  - Fix several generator issues.
72
101
 
73
- ### Removed
74
- - Remove templates/client folder.
102
+ ##### Removed
103
+ - Removed templates/client folder.
104
+
105
+ ---
75
106
 
76
107
  ## [1.1.1] - 2015-11-28
77
- ### Added
108
+ ##### Added
78
109
  - Support for React Router.
79
110
  - Error and redirect handling.
80
111
  - Turbolinks support.
81
112
 
82
- ### Fixed
113
+ ##### Fixed
83
114
  - Fix several generator related issues.
84
115
 
85
- ### Deprecated
86
- - Nothing.
87
-
88
- ### Removed
89
- - Nothing.
90
-
91
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/v1.0.0...HEAD
92
- [1.1.1]: https://github.com/shakacode/react_on_rails/compare/v1.0.0...v1.1.1
116
+ [Unreleased]: https://github.com/shakacode/react_on_rails/compare/v2.1.0...HEAD
117
+ [2.1.0]: https://github.com/shakacode/react_on_rails/compare/v2.0.2...v2.1.0
118
+ [2.0.2]: https://github.com/shakacode/react_on_rails/compare/v2.0.1...v2.0.2
119
+ [2.0.1]: https://github.com/shakacode/react_on_rails/compare/v2.0.0...v2.0.1
120
+ [2.0.0]: https://github.com/shakacode/react_on_rails/compare/v1.2.2...v2.0.0
121
+ [1.2.2]: https://github.com/shakacode/react_on_rails/compare/v1.2.0...v1.2.2
122
+ [1.2.0]: https://github.com/shakacode/react_on_rails/compare/v1.1.0...v1.2.0
123
+ [1.1.1]: https://github.com/shakacode/react_on_rails/compare/v1.1.1...v1.0.0
data/README.md CHANGED
@@ -2,16 +2,19 @@
2
2
 
3
3
  # NEWS
4
4
 
5
- * 2.0 has shipped! Please grab the latest and let us know if you see any issues! [Migration steps from 1.x](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#migration-steps).
6
- * It does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
5
+ * 2.1 is almost ready and will probably ship on Monday, 1/25/2016. Please grab the latest and let us know if you see any issues! [Migration steps from 1.x](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#migration-steps).
6
+ * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
7
7
 
8
8
  # React on Rails
9
9
 
10
- **Project Objective**: To provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://github.com/rackt/react-router), [**Redux**](https://github.com/rackt/redux), [**React-Router**](https://github.com/rackt/react-router). This differs significantly from typical Rails. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems.
10
+ **Project Objective**: To provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://github.com/rackt/react-router), [**Redux**](https://github.com/rackt/redux), [**React-Router**](https://github.com/rackt/react-router). This differs significantly from typical Rails. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. If you are interested in implementing React using traditional Rails architecture, see [react-rails](https://github.com/reactjs/react-rails).
11
11
 
12
12
  React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x is supported, with server rendering. [Redux](https://github.com/rackt/redux) and [React-Router](https://github.com/rackt/react-redux) are supported as well. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
13
13
 
14
- Be sure to see the [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
14
+ Be sure to see:
15
+
16
+ * [The React on Rails Doctrine](docs/doctrine.md)
17
+ * [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
15
18
 
16
19
  ## Including your React Component in your Rails Views
17
20
  Please see [Getting Started](#getting-started) for how to set up your Rails project for React on Rails to understand how `react_on_rails` can see your ReactComponents.
@@ -76,6 +79,7 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
76
79
  + [Running the Linters](#running-the-linters)
77
80
  + [Developing with the Webpack Dev Server](#developing-with-the-webpack-dev-server)
78
81
  + [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server)
82
+ + [Migrate From react-rails](#migrate-from-react-rails)
79
83
  + [Additional Reading](#additional-reading)
80
84
  + [Contributing](#contributing)
81
85
  + [License](#license)
@@ -350,6 +354,23 @@ Note that **React-related error messages are typically significantly more helpfu
350
354
  ### Adding Additional Routes for the Dev Server
351
355
  As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in `client/server.js`. See our example `server.js` from our [tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/server.js).
352
356
 
357
+ ## Migrate From react-rails
358
+ If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails).
359
+
360
+ - Remove the 'react-rails' gem from your Gemfile.
361
+
362
+ - Remove the generated generated lines for react-rails in your application.js file.
363
+
364
+ ```
365
+ //= require react
366
+ //= require react_ujs
367
+ //= require components
368
+ ```
369
+
370
+ - Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started.
371
+
372
+ Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline.
373
+
353
374
  ## Additional Reading
354
375
  + [Generated Client Code](docs/additional_reading/generated_client_code.md)
355
376
  + [Heroku Deployment](docs/additional_reading/heroku_deployment.md)
@@ -357,11 +378,23 @@ As you add more routes to your front-end application, you will need to make the
357
378
  + [Node Dependencies and NPM](docs/additional_reading/node_dependencies_and_npm.md)
358
379
  + [Optional Configuration](docs/additional_reading/optional_configuration.md)
359
380
  + [React Router](docs/additional_reading/react_router.md)
381
+ + [RSpec Configuration](docs/additional_reading/rspec_configuration.md)
360
382
  + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
361
383
  + [Tips](docs/additional_reading/tips.md)
384
+ + [Tutorial for v2.0](docs/tutorial-v2.md), deployed [here](https://shakacode-react-on-rails.herokuapp.com/).
385
+ + [Turbolinks](docs/additional_reading/turbolinks.md)
362
386
  + [Webpack Configuration](docs/additional_reading/webpack.md)
363
387
  + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
364
388
 
389
+ ## Demos
390
+ + [www.reactrails.com](http://www.reactrails.com)
391
+ + [spec app](spec/dummy): Great simple examples used for our tests.
392
+ ```
393
+ cd spec/dummy
394
+ bundle && npm i
395
+ foreman start
396
+ ```
397
+
365
398
  ## Contributing
366
399
  Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant](contributor-covenant.org) code of conduct (see [CODE OF CONDUCT](docs/code_of_conduct.md)).
367
400
 
@@ -40,11 +40,11 @@ module ReactOnRailsHelper
40
40
  # We use this react_component_index in case we have the same component multiple times on the page.
41
41
  react_component_index = next_react_component_index
42
42
  react_component_name = component_name.camelize # Not sure if we should be doing this (JG)
43
- if options[:id].nil?
44
- dom_id = "#{component_name}-react-component-#{react_component_index}"
45
- else
46
- dom_id = options[:id]
47
- end
43
+ dom_id = if options[:id].nil?
44
+ "#{component_name}-react-component-#{react_component_index}"
45
+ else
46
+ options[:id]
47
+ end
48
48
 
49
49
  # Setup the page_loaded_js, which is the same regardless of prerendering or not!
50
50
  # The reason is that React is smart about not doing extra work if the server rendering did its job.
@@ -61,7 +61,7 @@ module ReactOnRailsHelper
61
61
  content_tag(:div,
62
62
  "",
63
63
  class: "js-react-on-rails-component",
64
- style: "display:none",
64
+ style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
65
65
  data: data)
66
66
 
67
67
  # Create the HTML rendering part
@@ -0,0 +1,10 @@
1
+ # RSpec Configuration
2
+ Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
3
+
4
+ ReactOnRails provides a helper method called `configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument.
5
+
6
+ You can pass an RSpec metatag as an optional second parameter to this helper method if you want this helper to run on examples other than where `js: true` (default). The helper will compile webpack files only once per test run.
7
+
8
+ If you do not want to be slowed down by re-compiling webpack assets from scratch every test run, you can call `npm run build:client` (and `npm run build:server` if doing server rendering) to have webpack recompile these files in the background, which will be much faster. The helper looks for these processes and will abort recompiling if it finds them to be running.
9
+
10
+ If you want to use a testing framework other than RSpec, we suggest you implement similar logic.
@@ -0,0 +1,39 @@
1
+ # Turbolinks
2
+
3
+ * See [Turbolinks on Github](https://github.com/rails/turbolinks)
4
+ * Currently support 2.5.x of Turbolinks. We plan to update to Turbolinks 5 soon.
5
+
6
+ ## Why Turbolinks?
7
+ As you switch between Rails HTML controller requests, you will only load the HTML and you will
8
+ not reload JavaScript and stylesheets. This definitely can make an app perform better, even if
9
+ the JavaScript and stylesheets are cached by the browser, as they will still require parsing.
10
+
11
+ ### Install Checklist
12
+ 1. Include the gem "turbolinks".
13
+ 1. Included the proper "track" tags when you include the javascript and stylesheet:
14
+ ```erb
15
+ <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
16
+ <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
17
+ ```
18
+ 1. Add turbolinks to your `application.js` file:
19
+ ```javascript
20
+ //= require turbolinks
21
+ ```
22
+
23
+ ## Troubleshooting
24
+
25
+ You cans set a global debug flag in your `application.js` to turn on tracing of Turbolinks events
26
+ as they pertain to React on Rails.
27
+
28
+ 1. Add this line to your `application.js`:
29
+ ```javascript
30
+ //= require testGlobals
31
+ ```
32
+ 2. Initialie the global debug value of `DEBUG_TURBOLINKS` like this:
33
+ ```javascript
34
+ window.DEBUG_TURBOLINKS = true;
35
+ console.log('window.DEBUG_TURBOLINKS = true;');
36
+ ```
37
+
38
+ This will print out events related to the initialization of the components created with the view
39
+ helper `react_component`.
@@ -0,0 +1,33 @@
1
+ # Updating Dependencies
2
+
3
+ If you frequently update you dependencies in small batches, you will avoid large and painful updates later. Then again, if you don't have good tests coverage, it's hazardous to update dependencies at any time.
4
+
5
+ ## Ruby
6
+
7
+ Delete any unwanted version constraints from your Gemfile and run:
8
+
9
+ ```bash
10
+ bundle update
11
+ ```
12
+
13
+ ## NPM
14
+
15
+ 1. Install [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)
16
+ 1. Run `npm outdated` and read CHANGELOGs of major updated packages before you update. You might not be ready for some updates.
17
+ 1. Run these commands. Note, you may or may not want to remove your npm-shrinkwrap.json if you get some werid conflicts, and you may or may not need to `rm -rf` your `node_modules` directory.
18
+
19
+ ```
20
+ cd client
21
+ rm npm-shrinkwrap.json
22
+ ncu -u -a
23
+ npm i
24
+ ```
25
+
26
+ Some combinations that I often run:
27
+
28
+ ### remove old installed `node_modules` so you only get what corresponds to package.json
29
+ ```
30
+ ncu -u -a && rm -rf node_modules && npm i
31
+ ```
32
+
33
+ Note: newer versions of npm (>3) automatically create a new version of the npm-shrinkwrap.json.
@@ -18,7 +18,6 @@ Follow these style guidelines per the linter configuration. Basically, lint your
18
18
  ### JavaScript Coding Standards
19
19
  * [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
20
20
  * Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
21
- * [AirBnb Javascript](https://github.com/airbnb/javascript)
22
21
  * [JSDoc](http://usejsdoc.org/)
23
22
 
24
23
  ### Git coding Standards
@@ -12,7 +12,8 @@ bundle && npm i && rake examples:prepare_all && rake symlink_node_package && rak
12
12
  It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
13
13
 
14
14
  * /coverage
15
- * /examples
15
+ * /tmp
16
+ * /gen-examples
16
17
  * /node_package/lib
17
18
  * /node_modules
18
19
  * /spec/dummy/app/assets/javascripts/generated
@@ -0,0 +1,78 @@
1
+ # The React on Rails Doctrine
2
+
3
+ By Justin Gordon, January 24, 2016
4
+
5
+ This document is an extension and complement to [The Rails Doctrine](http://rubyonrails.org/doctrine/). If you haven't read that document, I suggest you do so first.
6
+
7
+ As stated in the [React on Rails README](../README.md), the project objective is to provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? A good example is view helper integration of React components on a Rails view. If the answer is yes, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. For example, we needed an easy way to integrate [Twitter Bootstrap](http://getbootstrap.com/) with Webpack, and we released the [npm bootstrap-loader](https://github.com/shakacode/bootstrap-loader/).
8
+
9
+ Besides the project objective, let's stick with the "Rails Doctrine" and keep the following in mind.
10
+
11
+ ## Optimize for Programmer Happiness
12
+ The React on Rails setup provides several key components related to front-end developer happiness:
13
+
14
+ 1. [Hot reloading of both JavaScript and CSS](https://gaearon.github.io/react-hot-loader/), via the [webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html). This works for both using an [express server](http://expressjs.com/) to load stubs for the ajax requests, as well as using a live Rails server. **Oh yes**, your Rails server can do hot reloading!
15
+ 2. [CSS modules](https://github.com/css-modules/webpack-demo) which remove the madness of a global namespace for CSS. We organize our CSS (Sass, actually) right next to our JavaScript React component files. This means no more creating long class names to ensure that CSS picks up the right styles.
16
+ 3. [ES6 JavaScript](http://es6-features.org/#Constants) is a great language for client side coding, much more so than Ruby due to the asynchronous nature of UI programming.
17
+ 4. JavaScript libraries and tooling work better in the native node way, rather than via some aspect of Sprockets and the Rails Asset Pipeline. We find way less frustration this way, especially from being able to get the latest advances with the rest of the JavaScript community. Why complicated beautiful JavaScript tooling Rails asset pipeline complexity?
18
+ 5. We want our JavaScript from npm. Getting JavaScript from rubygems.org is comparatively frustrating.
19
+ 6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the npm libraries on github.com.
20
+ 7. You can get set up on React on Rails **FAST** using our application generator.
21
+ 8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes.
22
+ 9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](additional_reading/heroku_deployment.md).
23
+
24
+ ## Convention over Configuration
25
+ * React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:
26
+ * [Style Guide](coding-style/style.md)
27
+ * [linters](coding-style/linters.md)
28
+ * [Recommended Project Structure](recommended-project-structure.md)
29
+
30
+ We're big believers in this quote from the Rails Doctrine:
31
+
32
+ > The same goes even when you understand how all the pieces go together. When there’s an obvious next step for every change, we can scoot through the many parts of an application that is the same or very similar to all the other applications that went before it. A place for everything and everything in its place. Constraints liberate even the most able minds.
33
+
34
+
35
+ ## The Menu Is Omakase
36
+ Here's the chef's selection from the React on Rails community:
37
+
38
+ ### Libraries
39
+ * [Bootstrap](http://getbootstrap.com/), loaded from [bootstrap-loader](https://github.com/shakacode/bootstrap-loader/). Common UI styles.
40
+ * [Lodash](https://lodash.com/): Swiss army knife of utilities.
41
+ * [React](https://facebook.github.io/react/): UI components.
42
+ * [React-Router](https://github.com/rackt/react-router): Provider of deep links for client-side application.
43
+ * [Redux](https://github.com/rackt/redux): Flux implementation (aka "state container").
44
+
45
+ ### JavaScript Tooling
46
+ * [Babel](https://babeljs.io/): Transpiler for ES6 into ES5 and much more.
47
+ * [EsLint](http://eslint.org/) and [Jsrc](http://jscs.info/): JavaScript linters.
48
+ * [Webpack](http://webpack.github.io/): Generator of deployment assets and provider of hot module reloading.
49
+
50
+ By having a common set of tools, we can discuss what we should or shouldn't be using. Thus, this takes out the "JavaScript Fatigue" from having too many unclear choices in the JavaScript world.
51
+
52
+ By the way, we're *not* omakase for standard Rails. That would be CoffeeScript. However, the Rails Doctrine makes it clear that non-standard menu choices are certainly welcome!
53
+
54
+ ## No One Paradigm
55
+ React on Rails fits into the "No One Paradigm" of the Rails ecosystem from the perspective that it rocks for client side development with Rails, even though it's a totally different language than the server code written in Ruby.
56
+
57
+ ## Exalt Beautiful Code
58
+ ES5 was ugly. ES6 is beautiful. React is beautiful. Client side code written with React plus Redux, fully linted with the ShakaCode linters, and organized per our recommended project structure is beautiful. Don't take our word for it. Take a look at the component sample code in the [react-webpack-rails-tutorial sample code](https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client/app/bundles/comments).
59
+
60
+ ## Value Integrated Systems
61
+ Assuming that you're building the type of app that's a good fit for Rails (document/database based with lots of business rules), the tight integration of modern JavaScript with React on top of Ruby on Rails is better than building a pure client side app and separate microservices. Here's why:
62
+
63
+ * Via React on Rails, we can seamlessly integrate React UI components with Rails.
64
+ * Tight integration allows for trivial set up of server rendering of React on top of Rails, complete with support for fragment caching of the server rendered HTML, and integration with [Turbolinks](https://github.com/rails/turbolinks).
65
+ * Tight integration allows mixing and matching Rails pages with React driven pages, even on the same page. Not every part of a UI requires the high fidelity achievable using React. Many existing apps may have hundreds of standards Rails forms. Support for mixing and matching React with Rails forms provides the best of both worlds.
66
+
67
+ ## Progress over Stability
68
+ React on Rails will maintain an active pace of development, to keep up with:
69
+
70
+ * Community suggestions.
71
+ * New client side tooling, libraries, and techniques.
72
+ * Updates to Rails.
73
+
74
+ ## Raise a Big Tent
75
+ React on Rails is definitely a part of the big tent of Rails. Plus, React on Rails provides its own big tent. A huge benefit of the React on Rails system is simple integration with Webpack and NPM, allowing integration with almost any library available on [npm](https://www.npmjs.org/)! The integration with Webpack also allows for other Webpack supported build tools.
76
+
77
+ ## Thanks!
78
+ Thanks for reading and being a part of the React on Rails community. Feedback on this document and *anything* in React on Rails is welcome. Please [open an issue](https://github.com/shakacode/react_on_rails/issues/new) or a pull request. If you'd like to join our private Slack channel, please [email](mailto:contact@shakacode.com) us a request.