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

This diff has not been reviewed by any users.
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cc9ebaba5554490a60cfc19fff82996c17e4e7854523baa33f5936be99086a66
4
- data.tar.gz: 901f5cbfd43d3c74a707ed3c3d195da94d828c48a085abd9452c45dc8247e7d5
3
+ metadata.gz: f53b8097c4c41fa99e2e91a3aca2b875725a657fc93092624fd3e6d4f022164f
4
+ data.tar.gz: 85d6d6da3bba2c596b80e2fac4b260be0ee300a0acf9db4e9f14144cbf35f1a7
5
5
  SHA512:
6
- metadata.gz: 7a4fd0a61ca25319a8e87227448f6a6c69e6606f98ac6168afaa39a10e2c0a9f052c437d4082e882286082580bc48e79a50555ac2eae32983f99c56f31b326e5
7
- data.tar.gz: ec3dd976591147b747f9ec7ac9455684ee8cb126e89872566dfce148fe9f53ac3723c77152ffdce23794b2d2ec1a8088c6f3c2defb2ee8fcf31892adb5681b26
6
+ metadata.gz: 6b3b2081577a1f5adee8c818b2bbe9cb10f3f321ba0b2eec5477040af9033bd784f662f6639365f0b197185c7d5d93d58c1f5274c0094bb1998484011d4e3b1a
7
+ data.tar.gz: '01965e573de93892c992bb8045615ce792dd41ffae7198a0841eab3bb356d144aa0e8b7265d648c8053e551b2e0d6c80ff08c830d3f95425828e5540d93befcd'
@@ -17,7 +17,15 @@ Changes since last non-beta release.
17
17
  *Please add entries here for your pull requests that are not yet released.*
18
18
 
19
19
  ## UPCOMING 12.0 RELEASE
20
- ### [12.0.0]
20
+
21
+ #### Improved
22
+ * Generator supports React Hooks
23
+
24
+
25
+
26
+ ### [12.0.0.pre.beta.0]
27
+ Gem version: 12.0.0.pre.beta.0 and npm version 12.0.0-beta.0 released! Please try this out!
28
+
21
29
  #### BREAKING CHANGE
22
30
  In order to solve the issues regarding React Hooks compatibility, the number of parameters
23
31
  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:
913
921
  ##### Fixed
914
922
  - Fix several generator related issues.
915
923
 
916
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.3.0...master
924
+ [Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.0...master
925
+ [12.0.0.pre.beta.0]: https://github.com/shakacode/react_on_rails/compare/11.3.0...12.0.0-beta.0
917
926
  [11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
918
927
  [11.2.2]: https://github.com/shakacode/react_on_rails/compare/11.2.1...11.2.2
919
928
  [11.2.1]: https://github.com/shakacode/react_on_rails/compare/11.1.8...11.2.1
data/README.md CHANGED
@@ -14,6 +14,14 @@
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).*
15
15
 
16
16
  #### News
17
+ **June 12, 2020**:
18
+ 1. Gem version: 12.0.0.pre.beta.0 and npm version 12.0.0-beta.0 released! Please try this out!
19
+ Major enhancements:
20
+ 1. Typescript bindings
21
+ 2. Proper support for React Hooks
22
+ 3. i18n support for generating a JSON file rather than a JS file.
23
+ 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).
24
+
17
25
  **April 2, 2020**:
18
26
  * 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).
19
27
  * 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.
@@ -30,7 +30,7 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
30
30
 
31
31
  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.
32
32
 
33
- Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.static).
33
+ Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.dev).
34
34
 
35
35
  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).
36
36
 
@@ -37,6 +37,7 @@ gem install rails # download and install latest stable Rails
37
37
  gem install foreman # download and install Foreman
38
38
  ```
39
39
 
40
+ ## Create a new Ruby on Rails App
40
41
  Then we need to create a fresh Rails application with webpacker react support as following.
41
42
 
42
43
  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
44
45
  ```
45
46
  cd <directory where you want to create your new Rails app>
46
47
 
47
- # any name you like for the rails app
48
- rails new test-react-on-rails --webpack=react --skip-sprockets
48
+ # Any name you like for the rails app
49
+ # Skip javascript so will add that next and get the current version
50
+ rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
49
51
 
50
52
  cd test-react-on-rails
51
53
  bundle
52
54
  ```
53
55
 
54
- Note: if you are adding React On Rails to an existing app you will instead to run these two commands as well:
56
+ ## Add the webpacker gem
57
+
58
+ ```
59
+ bundle add webpacker
60
+ bundle add react_on_rails
61
+ ```
62
+
63
+ ## Run the webpacker generator
55
64
 
56
65
  ```
57
66
  bundle exec rails webpacker:install
@@ -67,13 +76,17 @@ git add -A
67
76
  git commit -m "Initial commit"
68
77
  ```
69
78
 
70
- Add the **React On Rails** gem to your `Gemfile`:
79
+ ## Add the **React On Rails** gem to your `Gemfile`:
80
+
81
+ To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
82
+ of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
71
83
 
72
84
  ```
73
85
  gem 'react_on_rails', '12.0.0' # prefer exact gem version to match npm version
74
86
  ```
75
87
 
76
- 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.
88
+ Note: The latest released React On Rails version is considered stable. Please use the latest
89
+ version to ensure you get all the security patches and the best support.
77
90
 
78
91
  Run `bundle` and commit the changes.
79
92
 
@@ -83,21 +96,25 @@ bundle
83
96
  git commit -am "Added React on Rails Gem"
84
97
  ```
85
98
 
86
- 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.
99
+ 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.
100
+
101
+ Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
102
+ If you want the redux install: `rails generate react_on_rails:install --redux`
87
103
 
88
104
  ```
89
105
  rails generate react_on_rails:install
90
106
  ```
91
107
 
92
- Then run server with static client side files:
108
+ Then run server with a static client bundle. Static means that the bundle is saved in your
109
+ public/webpack/packs directory.
93
110
 
94
111
  ```
95
112
  foreman start -f Procfile.dev
96
113
  ```
97
114
 
98
- To run with the webpack-dev-server:
115
+ ## To run with the webpack-dev-server:
99
116
  ```
100
- foreman start -f Procfile.dev-server
117
+ foreman start -f Procfile.dev-hmr
101
118
  ```
102
119
 
103
120
  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
108
125
 
109
126
  First, check that the `hmr` option is `true` in your `config/webpacker.yml` file.
110
127
 
111
- 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.
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
128
+ The basic setup will have HMR working with the default webpacker setup. The basic HMR will cause
129
+ 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
132
130
 
133
131
  ### Custom IP & PORT setup (Cloud9 example)
134
132
 
@@ -140,7 +138,6 @@ web: rails s -p 8080 -b 0.0.0.0
140
138
 
141
139
  Then visit https://your-shared-addr.c9users.io:8080/hello_world
142
140
 
143
-
144
141
  ## RubyMine
145
142
 
146
143
  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
268
265
 
269
266
  and you will see your live app and you can share this URL with your friends. Congrats!
270
267
 
271
-
272
268
  ## Turning on Server Rendering
273
269
 
274
270
  You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -331,7 +327,7 @@ mv app/javascript client
331
327
 
332
328
  ## Using HMR with the rails/webpacker setup
333
329
 
334
- Start the app using `foreman start -f Procfile.dev-server`.
330
+ Start the app using `foreman start -f Procfile.dev-hmr`.
335
331
 
336
332
  When you change a JSX file and save, the browser will automatically refresh!
337
333
 
@@ -33,7 +33,7 @@ module ReactOnRails
33
33
  app/views/layouts/hello_world.html.erb
34
34
  config/initializers/react_on_rails.rb
35
35
  Procfile.dev
36
- Procfile.dev-server]
36
+ Procfile.dev-hmr]
37
37
  base_files.each { |file| copy_file("#{base_path}#{file}", file) }
38
38
  end
39
39
 
@@ -107,7 +107,7 @@ module ReactOnRails
107
107
  foreman start -f Procfile.dev
108
108
 
109
109
  - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
110
- and bin/webpack-dev-server. Or use Procfile.dev-server.
110
+ and bin/webpack-dev-server. Or use Procfile.dev-hmr.
111
111
 
112
112
  - To server render, change this line app/views/hello_world/index.html.erb to
113
113
  `prerender: true` to see server rendering (right click on page and select "view source").
@@ -4,4 +4,6 @@ web: rails s -p 3000
4
4
  # Next line runs a watch process with webpack to compile the changed files.
5
5
  # When making frequent changes to client side assets, you will prefer building webpack assets
6
6
  # upon saving rather than when you refresh your browser page.
7
- client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
7
+ # Note, if using React on Rails localization you will need to run
8
+ # `bundle exec rake react_on_rails:locale` before you run bin/webpack
9
+ client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
@@ -0,0 +1,18 @@
1
+ web: rails s -p 3000
2
+
3
+ # Note, hot and live reloading don't work with the default generator setup on
4
+ # top of the rails/webpacker Webpack config with server rendering.
5
+ # If you have server rendering enabled (prerender is true), you either need to
6
+ # a. Skip using the webpack-dev-server. bin/webpack --watch is typically
7
+ fast enough.
8
+ # b. See the React on Rails README for a link to documentation for how to setup
9
+ # SSR with HMR and React hot loading
10
+ # Otherwise, you will have an error. If you want HMR and Server Rendering, see
11
+ # the example in the https://github.com/shakacode/react-webpack-rails-tutorial
12
+ web: rails s -p 3000
13
+
14
+ # Run the hot reload server for client development
15
+ webpack-dev-server: bin/webpack-dev-server
16
+
17
+ # Keep the JS fresh for server rendering. Remove if not server rendering
18
+ rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch
@@ -1,46 +1,25 @@
1
1
  import PropTypes from 'prop-types';
2
- import React from 'react';
2
+ import React, { useState } from 'react';
3
3
 
4
- export default class HelloWorld extends React.Component {
5
- static propTypes = {
6
- name: PropTypes.string.isRequired, // this is passed from the Rails view
7
- };
4
+ const HelloWorld = (props) => {
5
+ const [name, setName] = useState(props.name);
8
6
 
9
- /**
10
- * @param props - Comes from your rails view.
11
- */
12
- constructor(props) {
13
- super(props);
7
+ return (
8
+ <div>
9
+ <h3>Hello, {name}!</h3>
10
+ <hr />
11
+ <form>
12
+ <label htmlFor="name">
13
+ Say hello to:
14
+ <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
15
+ </label>
16
+ </form>
17
+ </div>
18
+ );
19
+ };
14
20
 
15
- // How to set initial state in ES6 class syntax
16
- // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
17
- this.state = { name: this.props.name };
18
- }
21
+ HelloWorld.propTypes = {
22
+ name: PropTypes.string.isRequired, // this is passed from the Rails view
23
+ };
19
24
 
20
- updateName = (name) => {
21
- this.setState({ name });
22
- };
23
-
24
- render() {
25
- return (
26
- <div>
27
- <h3>
28
- Hello,
29
- {this.state.name}!
30
- </h3>
31
- <hr />
32
- <form>
33
- <label htmlFor="name">
34
- Say hello to:
35
- <input
36
- id="name"
37
- type="text"
38
- value={this.state.name}
39
- onChange={(e) => this.updateName(e.target.value)}
40
- />
41
- </label>
42
- </form>
43
- </div>
44
- );
45
- }
46
- }
25
+ export default HelloWorld;
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ReactOnRails
4
- VERSION = "12.0.0-beta.0"
4
+ VERSION = "12.0.0-beta.1"
5
5
  end
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-on-rails",
3
- "version": "12.0.0-beta.0",
3
+ "version": "12.0.0-beta.1",
4
4
  "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
5
5
  "main": "node_package/lib/ReactOnRails.js",
6
6
  "directories": {
@@ -69,12 +69,6 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
69
69
  # Release the new gem version
70
70
  unless is_dry_run
71
71
  sh_in_dir(gem_root, "gem release")
72
-
73
- # Update master with new npm version
74
- sleep 5 # short pause to make sure npmjs has time to update
75
- sh_in_dir(File.join(gem_root, "spec", "dummy", "client"), "yarn add react-on-rails@#{npm_version} --exact")
76
- sh_in_dir(gem_root, "git commit -am 'Updated spec/dummy/client/package.json latest version'")
77
- sh_in_dir(gem_root, "git push")
78
72
  end
79
73
  end
80
74
  # rubocop:enable Metrics/BlockLength
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: react_on_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.0.0.pre.beta.0
4
+ version: 12.0.0.pre.beta.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Justin Gordon
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-06-13 00:00:00.000000000 Z
11
+ date: 2020-06-14 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: addressable
@@ -399,7 +399,7 @@ files:
399
399
  - lib/generators/react_on_rails/react_with_redux_generator.rb
400
400
  - lib/generators/react_on_rails/templates/.eslintrc
401
401
  - lib/generators/react_on_rails/templates/base/base/Procfile.dev
402
- - lib/generators/react_on_rails/templates/base/base/Procfile.dev-server
402
+ - lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr
403
403
  - lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb
404
404
  - lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
405
405
  - lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt
@@ -1,12 +0,0 @@
1
- # You can run these commands in separate shells instead of using foreman
2
- web: rails s -p 3000
3
-
4
- # Next line runs the webpack-dev-server
5
- # You can edit config/webpacker.yml to set HMR to true to see hot reloading.
6
- # Note, hot and live reloading don't work with the default generator setup on top of
7
- # the rails/webpacker Webpack config with server rendering.
8
- # If you have server rendering enabled, modify the call to bin/webpack-dev-server line
9
- # so you add `--inline=false` and then CSS is not inlined.
10
- # Otherwise, you will have an error. If you want HMR and Server Rendering, see
11
- # the example in the https://github.com/shakacode/react-webpack-rails-tutorial
12
- client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'