React on Rails v9 on rails/webpacker v3

* See CHANGELOG.md for summary of changes
* Change webpack-bundle to hello-world-bundle

See https://github.com/shakacode/react-on-rails-v9-rc-generator/pulls
for examples of new generator output.

* Remove gen examples optimizations for spec
  Older optimizations were for times npm was super slow.

Author: justin808

.eslintignore

@@ -13,3 +13,4 @@ node_package/webpack.config.js
 **/app/assets/javascripts/application.js
 **/coverage/**
 **/cable.js
+**/public/packs*/*

CHANGELOG.md

@@ -8,11 +8,148 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests.*
 
+- Fix regression where `react_component(... prerender: true)` wouldn't find the generated asset bundle, because it wasn't looking for the hashed path.
+
+
+## 9.0 from 8.x. Upgrade Instructions
+All 9.0.0 beta versions can be viewed in [PR 908](https://github.com/shakacode/react_on_rails/pull/908)
+
+For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
+
+- Breaking Configuration Changes
+  1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
+  2. Renamed
+   * config.npm_build_test_command ==> config.build_test_command
+   * config.build_production_command ==> config.build_production_command
+
+- Update the gemfile. Switch over to using the webpacker gem.
+
+```rb
+gem "webpacker"
+```
+
+- Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
+  You will need to rename the following object properties:
+  - webpackOutputPath      ==> output.path
+  - webpackPublicOutputDir ==> output.publicPath
+  - hotReloadingUrl        ==> output.publicPathWithHost
+  - hotReloadingHostname   ==> settings.dev_server.host
+  - hotReloadingPort       ==> settings.dev_server.port
+  - hmr                    ==> settings.dev_server.hmr
+  - manifest               ==> Remove this one. We use the default for Webpack of manifest.json
+  - env                    ==> Use `const { env } = require('process');`
+  - devBuild               ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
+ 
+- Edit your Webpack.config files:
+  - Change your Webpack output to be like:
+    ```
+    const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+    const configPath = resolve('..', 'config');
+    const { output, settings } = webpackConfigLoader(configPath);
+    const hmr = settings.dev_server.hmr;
+    const devBuild = process.env.NODE_ENV !== 'production';
+
+    output: {
+      filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
+      chunkFilename: '[name]-[chunkhash].chunk.js',
+   
+      publicPath: output.publicPath,
+      path: output.path,
+    },
+    ```
+  - Change your ManifestPlugin definition to something like the following
+    ```
+    new ManifestPlugin({
+        publicPath: output.publicPath,
+        writeToFileEmit: true
+      }),
+
+    ```
+
+- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
+  - Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
+  - If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
+  - Alternately, if you are updating from webpacker_lite, you can manually change these:
+  - Add a default setting
+    ```
+    cache_manifest: false
+    ```
+  - For production, set:  
+    ```
+    cache_manifest: true
+    ```
+  - Add a section like this under your development env:
+    ```
+    dev_server:
+      host: localhost
+      port: 3035
+      hmr: false
+    ```
+    Set hmr to your preference.
+  - See the example `spec/dummy/config/webpacker.yml`.
+  - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
+  - Rename `webpack_public_output_dir` to `public_output_path`.
+  
+- Edit your Procfile.dev
+  - Remove the env value WEBPACKER_DEV_SERVER as it's not used
+  - For hot loading:
+    - Set the `hmr` key in your `webpacker.yml` to `true`.
+    
+    
+#### Troubleshooting
+   
+    
+  
+### [9.0.0]
+*Diffs for the beta to master*
+
+### [9.0.0-beta.12]
+- Updated for latest rails/webpacker using the official gem
+- hot reloading working in generator
+
+### [9.0.0-beta.11]
+- Updated for latest rails_webpacker.
+- hot reloading working in spec/dummy
+
+### [9.0.0-beta.10]
+- Updated for the latest rails/webpacker. Added the cache_manifest setting.
+
+### [9.0.0-beta.9]
+- Fixes precompile task going to Webpacker's. You need to set `custom_compile: true` in your `webpacker.yml`.
+- Changed webpack-bundle.js name to hello-world-bundle.js
+- Update for latest from rails/webpacker
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+    branch: "issue-464-merge-webpacker-lite-into-webpacker-v3"
+
+### [9.0.0-beta.8]
+- bugfix for server rendering
+
+### [9.0.0-beta.7]
+- Depend on updated rails/webpacker in branch 
+
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+    branch: "issue-464-merge-webpacker-lite-into-webpacker-v2"
+
+
+### [9.0.0-beta.6]
+- Change "hot" to "hmr".
+
+### [9.0.0-beta.3]
+- Fix typo on webpackConfigLoader.js
+
+### [9.0.0-beta.3]
+- Fix typo on webpackConfigLoader.js
+ 
+### [9.0.0-beta.2]
+- Fixed problems when running in development mode for both the generator and spec/dummy. 
+
+### [9.0.0-beta.1]
+- First version of depending on Webpacker rather than Webpacker Lite  
+
 ### [8.0.7]
 #### fixed
 - Fixes generator bug by keeping blank line at top in case existing .gitignore does not end in a newline. [#916](https://github.com/shakacode/react_on_rails/pull/916) by [justin808](https://github.com/justin808).
 
-
 ### [8.0.6]
 #### fixed
 - Fixes server rendering when using a CDN. Server rendering would try to fetch a file with the "asset_host". This change updates the webpacker_lite dependency to 2.1.0 which has a new helper `pack_path`. [#901](https://github.com/shakacode/react_on_rails/pull/901) by [justin808](https://github.com/justin808). Be sure to update webpacker_lite to 2.1.0.
@@ -313,7 +450,7 @@ No changes.
   - See [shakacode/react-webpack-rails-tutorial/pull/287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287) for an    example of upgrading from v5.
 
   - To configure the asset compliation you can either
-    1. Specify a `config/react_on_rails` setting for `npm_build_production_command` to be nil to turn this feature off.
+    1. Specify a `config/react_on_rails` setting for `build_production_command` to be nil to turn this feature off.
     2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
 
   - If you are using the ReactOnRails test helper, then you will need to add the 'config.npm_build_test_command' to your config to tell react_on_rails what command to run when you run rspec.
@@ -324,7 +461,7 @@ Here is the addition to the generated config file:
 ```ruby
   # 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.build_production_command = "npm run build:production"
 
   # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   # with rspec then this controls what npm command is run
@@ -631,7 +768,20 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/8.0.7...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/rails-webpacker...9.0.0-beta.11
+[9.0.0]: https://github.com/shakacode/react_on_rails/compare/master...9.0.0-beta.11
+[9.0.0-beta.12]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.11...9.0.0-beta.12
+[9.0.0-beta.11]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.10...9.0.0-beta.11
+[9.0.0-beta.10]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.9...9.0.0-beta.10
+[9.0.0-beta.9]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.8...9.0.0-beta.9
+[9.0.0-beta.8]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.7...9.0.0-beta.8
+[9.0.0-beta.7]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.6...9.0.0-beta.7
+[9.0.0-beta.6]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.5...9.0.0-beta.6
+[9.0.0-beta.5]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.4...9.0.0-beta.5
+[9.0.0-beta.4]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.3...9.0.0-beta.4
+[9.0.0-beta.3]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.2...9.0.0-beta.3
+[9.0.0-beta.2]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.1...9.0.0-beta.2
+[9.0.0-beta.1]: https://github.com/shakacode/react_on_rails/compare/master...9.0.0-beta.1
 [8.0.7]: https://github.com/shakacode/react_on_rails/compare/8.0.6...8.0.7
 [8.0.6]: https://github.com/shakacode/react_on_rails/compare/8.0.5...8.0.6
 [8.0.5]: https://github.com/shakacode/react_on_rails/compare/8.0.3...8.0.5

CONTRIBUTING.md

@@ -46,7 +46,7 @@ When making doc changes, we want the change to work on both the gitbook and the
 
 ```sh
 cd react_on_rails/
-bundle && yarn && rake examples:prepare_all && rake node_package && rake
+bundle && yarn && rake examples:gen_all && rake node_package && rake
 ```
 
 In order to run tests in browser
@@ -145,7 +145,7 @@ 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.
+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:gen_all` rake task.
 
 *Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:*
 

Gemfile

@@ -38,6 +38,10 @@ gem "chromedriver-helper"
 gem "launchy"
 gem "poltergeist"
 gem "selenium-webdriver"
-gem "webpacker_lite", "~> 2.1"
+gem "webpacker", "~> 3.0"
 
+# TODO: remove once we get out of beta.
+# gem 'webpacker', path: "../../forks/webpacker"
+
+gem "equivalent-xml", github: "mbklein/equivalent-xml"
 gem "rainbow"

README.md

@@ -24,7 +24,6 @@ Turn on HMR (Hot reloading)
 
 ---------------
 
-
 ## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
 
 Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
@@ -148,7 +147,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac
 
 ## Why Webpack?
 
-Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker_lite](https://github.com/shakacode/webpacker_lite) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
+Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
 
 This usage of webpack fits neatly and simply into existing Rails apps. You can include React components on a Rails view with a simple helper.
 
@@ -166,10 +165,18 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
 1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `client/package.json` file.
 
   ```ruby
-  gem "react_on_rails", "8.0.0"
+  gem "react_on_rails", "9.0.0"
+  gem "webpacker", "~> 3.0"
   ```
 
-2. Commit this to git (you cannot run the generator unless you do this or pass the option `--ignore-warnings`).
+2. Run the following 2 commands to install Webpacker with React:
+   ```
+   bundle exec rails webpacker:install
+   bundle exec rails webpacker:install:react
+   
+   ```
+
+2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
 
 3. See help for the generator:
 
@@ -183,13 +190,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
   rails generate react_on_rails:install
   ```
 
-5. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
-
-  ```bash
-  bundle && yarn
-  ```
-
-6. Ensure that you have `foreman` installed: `gem install foreman`.
+5. Ensure that you have `foreman` installed: `gem install foreman`.
 
 7. Start your Rails server:
 
@@ -259,6 +260,11 @@ cd client && yarn add react-on-rails
 
 That will install the latest version and update your package.json.
 
+## Webpacker Configuration
+
+React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
+
+
 ## How it Works
 The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
 
@@ -423,12 +429,12 @@ end
 In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
 
 ### Globally Exposing Your React Components
-Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
+Place your JavaScript code inside of the default `app/javascript` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
 
 This is how to expose a component to the `react_component` view helper.
 
   ```javascript
-  // client/app/bundles/HelloWorld/startup/HelloWorld.jsx
+  // app/javascript/packs/hello-world-bundle.js
   import HelloWorld from '../components/HelloWorld';
   import ReactOnRails from 'react-on-rails';
   ReactOnRails.register({ HelloWorld });
@@ -591,7 +597,7 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
 ## Deployment
 * Version 6.0 puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb).
   * `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
-  * `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
+  * `build_production_command`: Set to nil to turn off the precompilation of the js assets.
 * See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
 
 ## Integration with Node.js for Server Rendering
@@ -628,6 +634,7 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
 + **Development**
   + [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
   + [Installation Overview](./docs/basics/installation-overview.md)
+  + [Configuration](./docs/basics/configuration.md)
   + [Migration from react-rails](./docs/basics/migrating-from-react-rails.md)
   + [Recommended Project Structure](./docs/additional-reading/recommended-project-structure.md)
   + [Generator Tips](./docs/basics/generator.md)

Rakefile

@@ -3,7 +3,7 @@
 # Rake will automatically load any *.rake files inside of the "rakelib" folder
 # See rakelib/
 tasks = %w[run_rspec lint]
-prepare_for_ci = %w[node_package dummy_apps examples]
+prepare_for_ci = %w[node_package dummy_apps]
 
 if ENV["USE_COVERALLS"] == "TRUE"
   require "coveralls/rake/task"

docs/additional-reading/asset-pipeline.md

@@ -0,0 +1,20 @@
+# Asset Pipeline
+
+The plumbing of webpack produced assets through the asset pipeline is deprecated as of v9.0.
+
+The information in this document is here for those that have not yet upgraded.
+
+
+
+
+This option still works for your `/config/initializers/react_on_rails.rb` if you are still using the
+asset pipeline.
+```
+  ################################################################################
+  # MISCELLANEOUS OPTIONS
+  ################################################################################
+  # If you want to use webpack for CSS and images, and still use the asset pipeline,
+  # see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
+  # And you will use a setting like this.
+  config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
+```