react_on_rails 12.0.0.pre.beta.0 → 12.0.0.pre.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc9ebaba5554490a60cfc19fff82996c17e4e7854523baa33f5936be99086a66
-  data.tar.gz: 901f5cbfd43d3c74a707ed3c3d195da94d828c48a085abd9452c45dc8247e7d5
+  metadata.gz: f53b8097c4c41fa99e2e91a3aca2b875725a657fc93092624fd3e6d4f022164f
+  data.tar.gz: 85d6d6da3bba2c596b80e2fac4b260be0ee300a0acf9db4e9f14144cbf35f1a7
 SHA512:
-  metadata.gz: 7a4fd0a61ca25319a8e87227448f6a6c69e6606f98ac6168afaa39a10e2c0a9f052c437d4082e882286082580bc48e79a50555ac2eae32983f99c56f31b326e5
-  data.tar.gz: ec3dd976591147b747f9ec7ac9455684ee8cb126e89872566dfce148fe9f53ac3723c77152ffdce23794b2d2ec1a8088c6f3c2defb2ee8fcf31892adb5681b26
+  metadata.gz: 6b3b2081577a1f5adee8c818b2bbe9cb10f3f321ba0b2eec5477040af9033bd784f662f6639365f0b197185c7d5d93d58c1f5274c0094bb1998484011d4e3b1a
+  data.tar.gz: '01965e573de93892c992bb8045615ce792dd41ffae7198a0841eab3bb356d144aa0e8b7265d648c8053e551b2e0d6c80ff08c830d3f95425828e5540d93befcd'

data/CHANGELOG.md

@@ -17,7 +17,15 @@ Changes since last non-beta release.
 *Please add entries here for your pull requests that are not yet released.*
 
 ## UPCOMING 12.0 RELEASE
-### [12.0.0]
+
+#### Improved
+* Generator supports React Hooks
+
+
+
+### [12.0.0.pre.beta.0]
+Gem version: 12.0.0.pre.beta.0 and npm version 12.0.0-beta.0 released! Please try this out!
+
 #### BREAKING CHANGE
 In order to solve the issues regarding React Hooks compatibility, the number of parameters
 for functions is used to determine if you have a generator function that will get invoked to
@@ -913,7 +921,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.3.0...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.0...master
+[12.0.0.pre.beta.0]: https://github.com/shakacode/react_on_rails/compare/11.3.0...12.0.0-beta.0
 [11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
 [11.2.2]: https://github.com/shakacode/react_on_rails/compare/11.2.1...11.2.2
 [11.2.1]: https://github.com/shakacode/react_on_rails/compare/11.1.8...11.2.1

data/README.md

@@ -14,6 +14,14 @@
 *These are the docs for React on Rails 12, coming soon. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
 
 #### News
+**June 12, 2020**:
+1. Gem version: 12.0.0.pre.beta.0 and npm version 12.0.0-beta.0 released! Please try this out!
+   Major enhancements:
+   1. Typescript bindings
+   2. Proper support for React Hooks
+   3. i18n support for generating a JSON file rather than a JS file.
+2. See Justin's RailsConf talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how).
+
 **April 2, 2020**:
 * Are you interested in support for React on Rails? If so check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
 * HMR is working with [Loadable Components](https://loadable-components.com) for a both amazing hot-reloading developer experience and great runtime performance. Please [email me](mailto:justin@shakacode.com) if you'd like to use [Loadable Components Code Splitting](https://loadable-components.com/docs/code-splitting/) to speed up your app by reducing your bundle sizes and lazily loading the code that's needed.

data/docs/outdated/how-react-on-rails-works.md

@@ -30,7 +30,7 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
 
 Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. 
 
-Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.static).
+Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.dev).
 
 On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You configure the command used as `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md).
 

data/docs/tutorial.md

@@ -37,6 +37,7 @@ gem install rails               # download and install latest stable Rails
 gem install foreman             # download and install Foreman
 ```
 
+## Create a new Ruby on Rails App
 Then we need to create a fresh Rails application with webpacker react support as following.
 
 First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
@@ -44,14 +45,22 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
 ```
 cd <directory where you want to create your new Rails app>
 
-# any name you like for the rails app
-rails new test-react-on-rails --webpack=react --skip-sprockets 
+# Any name you like for the rails app
+# Skip javascript so will add that next and get the current version 
+rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
 
 cd test-react-on-rails
 bundle
 ```
 
-Note: if you are adding React On Rails to an existing app you will instead to run these two commands as well:
+## Add the webpacker gem
+
+```
+bundle add webpacker                 
+bundle add react_on_rails
+```
+
+## Run the webpacker generator
 
 ```
 bundle exec rails webpacker:install
@@ -67,13 +76,17 @@ git add -A
 git commit -m "Initial commit"
 ```
 
-Add the **React On Rails** gem to your `Gemfile`:
+## Add the **React On Rails** gem to your `Gemfile`:
+
+To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
+of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
 
 ```
 gem 'react_on_rails', '12.0.0'         # prefer exact gem version to match npm version
 ```
 
-Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
+Note: The latest released React On Rails version is considered stable. Please use the latest 
+version to ensure you get all the security patches and the best support.
 
 Run `bundle` and commit the changes.
 
@@ -83,21 +96,25 @@ bundle
 git commit -am "Added React on Rails Gem"
 ```
 
-Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
+Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
+
+Note, using `redux` is no longer recommended as the basic installer uses React Hooks. 
+If you want the redux install: `rails generate react_on_rails:install --redux`
 
 ```
 rails generate react_on_rails:install
 ```
 
-Then run server with static client side files:
+Then run server with a static client bundle. Static means that the bundle is saved in your
+public/webpack/packs directory.
 
 ```
 foreman start -f Procfile.dev
 ```
 
-To run with the webpack-dev-server:
+## To run with the webpack-dev-server:
 ```
-foreman start -f Procfile.dev-server
+foreman start -f Procfile.dev-hmr
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
@@ -108,27 +125,8 @@ Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and
 
 First, check that the `hmr` option is `true` in your `config/webpacker.yml` file.
 
-The basic setup will have HMR working with the default webpacker setup. However, the basic will cause a full page refresh each time you save a file.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+The basic setup will have HMR working with the default webpacker setup. The basic HMR will cause
+a full page refresh each time you save a file. You also lose any state on your page during the refresh. Don't try to use HMR
 
 ### Custom IP & PORT setup (Cloud9 example)
 
@@ -140,7 +138,6 @@ web: rails s -p 8080 -b 0.0.0.0
 
 Then visit https://your-shared-addr.c9users.io:8080/hello_world 
 
-
 ## RubyMine
 
 It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
@@ -268,7 +265,6 @@ heroku open
 
 and you will see your live app and you can share this URL with your friends. Congrats!
 
-
 ## Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -331,7 +327,7 @@ mv app/javascript client
 
 ## Using HMR with the rails/webpacker setup
 
-Start the app using `foreman start -f Procfile.dev-server`.
+Start the app using `foreman start -f Procfile.dev-hmr`.
 
 When you change a JSX file and save, the browser will automatically refresh!
 

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,7 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-server]
+                        Procfile.dev-hmr]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -107,7 +107,7 @@ module ReactOnRails
                 foreman start -f Procfile.dev
 
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpack-dev-server. Or use Procfile.dev-server.
+              and bin/webpack-dev-server. Or use Procfile.dev-hmr.
 
             - To server render, change this line app/views/hello_world/index.html.erb to
               `prerender: true` to see server rendering (right click on page and select "view source").

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -4,4 +4,6 @@ web: rails s -p 3000
 # Next line runs a watch process with webpack to compile the changed files.
 # When making frequent changes to client side assets, you will prefer building webpack assets
 # upon saving rather than when you refresh your browser page.
-client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr

@@ -0,0 +1,18 @@
+web: rails s -p 3000
+
+# Note, hot and live reloading don't work with the default generator setup on
+# top of the rails/webpacker Webpack config with server rendering.
+# If you have server rendering enabled (prerender is true), you either need to
+# a. Skip using the webpack-dev-server. bin/webpack --watch is typically
+     fast enough.
+# b. See the React on Rails README for a link to documentation for how to setup
+#    SSR with HMR and React hot loading
+# Otherwise, you will have an error. If you want HMR and Server Rendering, see
+# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
+web: rails s -p 3000
+
+# Run the hot reload server for client development
+webpack-dev-server: bin/webpack-dev-server
+
+# Keep the JS fresh for server rendering. Remove if not server rendering
+rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,46 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 
-export default class HelloWorld extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired, // this is passed from the Rails view
-  };
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
 
-  /**
-   * @param props - Comes from your rails view.
-   */
-  constructor(props) {
-    super(props);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
 
-    // How to set initial state in ES6 class syntax
-    // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
-    this.state = { name: this.props.name };
-  }
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
 
-  updateName = (name) => {
-    this.setState({ name });
-  };
-
-  render() {
-    return (
-      <div>
-        <h3>
-          Hello,
-          {this.state.name}!
-        </h3>
-        <hr />
-        <form>
-          <label htmlFor="name">
-            Say hello to:
-            <input
-              id="name"
-              type="text"
-              value={this.state.name}
-              onChange={(e) => this.updateName(e.target.value)}
-            />
-          </label>
-        </form>
-      </div>
-    );
-  }
-}
+export default HelloWorld;

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "12.0.0-beta.0"
+  VERSION = "12.0.0-beta.1"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "12.0.0-beta.0",
+  "version": "12.0.0-beta.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {

data/rakelib/release.rake

@@ -69,12 +69,6 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
   # Release the new gem version
   unless is_dry_run
     sh_in_dir(gem_root, "gem release")
-
-    # Update master with new npm version
-    sleep 5 # short pause to make sure npmjs has time to update
-    sh_in_dir(File.join(gem_root, "spec", "dummy", "client"), "yarn add react-on-rails@#{npm_version} --exact")
-    sh_in_dir(gem_root, "git commit -am 'Updated spec/dummy/client/package.json latest version'")
-    sh_in_dir(gem_root, "git push")
   end
 end
 # rubocop:enable Metrics/BlockLength

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 12.0.0.pre.beta.0
+  version: 12.0.0.pre.beta.1
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-06-13 00:00:00.000000000 Z
+date: 2020-06-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: addressable
@@ -399,7 +399,7 @@ files:
 - lib/generators/react_on_rails/react_with_redux_generator.rb
 - lib/generators/react_on_rails/templates/.eslintrc
 - lib/generators/react_on_rails/templates/base/base/Procfile.dev
-- lib/generators/react_on_rails/templates/base/base/Procfile.dev-server
+- lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr
 - lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb
 - lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
 - lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server

@@ -1,12 +0,0 @@
-# You can run these commands in separate shells instead of using foreman
-web: rails s -p 3000
-
-# Next line runs the webpack-dev-server
-# You can edit config/webpacker.yml to set HMR to true to see hot reloading.
-# Note, hot and live reloading don't work with the default generator setup on top of
-# the rails/webpacker Webpack config with server rendering.
-# If you have server rendering enabled, modify the call to bin/webpack-dev-server line
-# so you add `--inline=false` and then CSS is not inlined.
-# Otherwise, you will have an error. If you want HMR and Server Rendering, see
-# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
-client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'