react_on_rails 13.3.5 → 14.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +100 -62
- data/Gemfile.development_dependencies +10 -9
- data/README.md +7 -2
- data/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb +41 -0
- data/lib/generators/react_on_rails/base_generator.rb +13 -49
- data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
- data/lib/generators/react_on_rails/generator_messages.rb +40 -0
- data/lib/generators/react_on_rails/install_generator.rb +21 -0
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +2 -2
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static +2 -2
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -2
- data/lib/generators/react_on_rails/templates/base/base/config/{webpacker.yml → shakapacker.yml} +3 -3
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt +3 -1
- data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +2 -2
- data/lib/generators/react_on_rails/templates/dev_tests/spec/system/hello_world_spec.rb +1 -1
- data/lib/react_on_rails/configuration.rb +39 -25
- data/lib/react_on_rails/git_utils.rb +3 -3
- data/lib/react_on_rails/helper.rb +25 -13
- data/lib/react_on_rails/json_output.rb +0 -17
- data/lib/react_on_rails/locales/base.rb +4 -4
- data/lib/react_on_rails/locales/to_js.rb +1 -1
- data/lib/react_on_rails/packs_generator.rb +4 -4
- data/lib/react_on_rails/react_component/render_options.rb +1 -1
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +10 -12
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +3 -3
- data/lib/react_on_rails/test_helper.rb +2 -2
- data/lib/react_on_rails/utils.rb +2 -8
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +2 -2
- data/lib/react_on_rails/webpacker_utils.rb +6 -0
- data/lib/tasks/assets.rake +1 -1
- data/react_on_rails.gemspec +4 -4
- metadata +6 -131
- data/.bookignore +0 -15
- data/.circleci/config.yml +0 -338
- data/.coveralls.yml +0 -1
- data/.dockerignore +0 -2
- data/.eslintignore +0 -17
- data/.eslintrc +0 -53
- data/.github/FUNDING.yml +0 -1
- data/.github/ISSUE_TEMPLATE/bug_report.md +0 -23
- data/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
- data/.github/PULL_REQUEST_TEMPLATE.md +0 -19
- data/.github/workflows/lint-js-and-ruby.yml +0 -54
- data/.github/workflows/main.yml +0 -183
- data/.github/workflows/package-js-tests.yml +0 -35
- data/.github/workflows/rspec-package-specs.yml +0 -46
- data/.gitignore +0 -33
- data/.npmignore +0 -22
- data/.prettierignore +0 -14
- data/.prettierrc +0 -20
- data/.rspec +0 -2
- data/.rubocop.yml +0 -134
- data/.scss-lint.yml +0 -205
- data/.travis.yml +0 -61
- data/book.json +0 -18
- data/docs/additional-details/generator-details.md +0 -56
- data/docs/additional-details/manual-installation-overview.md +0 -30
- data/docs/additional-details/migrating-from-react-rails.md +0 -17
- data/docs/additional-details/recommended-project-structure.md +0 -69
- data/docs/additional-details/updating-dependencies.md +0 -31
- data/docs/additional-details/upgrade-webpacker-v3-to-v4.md +0 -10
- data/docs/api/javascript-api.md +0 -99
- data/docs/api/redux-store-api.md +0 -102
- data/docs/api/view-helpers-api.md +0 -133
- data/docs/contributor-info/errors-with-hooks.md +0 -45
- data/docs/contributor-info/generator-testing.md +0 -11
- data/docs/contributor-info/linters.md +0 -68
- data/docs/contributor-info/pull-requests.md +0 -42
- data/docs/contributor-info/releasing.md +0 -76
- data/docs/deployment/elastic-beanstalk.md +0 -63
- data/docs/deployment/heroku-deployment.md +0 -35
- data/docs/getting-started.md +0 -195
- data/docs/guides/client-vs-server-rendering.md +0 -27
- data/docs/guides/configuration.md +0 -289
- data/docs/guides/deployment.md +0 -5
- data/docs/guides/file-system-based-automated-bundle-generation.md +0 -205
- data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +0 -104
- data/docs/guides/how-react-on-rails-works.md +0 -44
- data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md +0 -40
- data/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md +0 -98
- data/docs/guides/i18n.md +0 -87
- data/docs/guides/installation-into-an-existing-rails-app.md +0 -66
- data/docs/guides/minitest-configuration.md +0 -31
- data/docs/guides/rails-webpacker-react-integration-options.md +0 -213
- data/docs/guides/react-on-rails-overview.md +0 -30
- data/docs/guides/react-server-rendering.md +0 -32
- data/docs/guides/render-functions-and-railscontext.md +0 -205
- data/docs/guides/rspec-configuration.md +0 -73
- data/docs/guides/tutorial.md +0 -374
- data/docs/guides/upgrading-react-on-rails.md +0 -304
- data/docs/guides/webpack-configuration.md +0 -42
- data/docs/home.md +0 -23
- data/docs/javascript/angular-js-integration-migration.md +0 -28
- data/docs/javascript/asset-pipeline.md +0 -12
- data/docs/javascript/capistrano-deployment.md +0 -18
- data/docs/javascript/code-splitting.md +0 -165
- data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +0 -10
- data/docs/javascript/credits.md +0 -10
- data/docs/javascript/foreman-issues.md +0 -15
- data/docs/javascript/images.md +0 -57
- data/docs/javascript/node-dependencies-and-npm.md +0 -19
- data/docs/javascript/react-and-redux.md +0 -36
- data/docs/javascript/react-helmet.md +0 -100
- data/docs/javascript/react-router.md +0 -90
- data/docs/javascript/server-rendering-tips.md +0 -55
- data/docs/javascript/troubleshooting-when-using-webpacker.md +0 -90
- data/docs/javascript/webpack-v1-notes.md +0 -23
- data/docs/javascript/webpack.md +0 -22
- data/docs/misc/articles.md +0 -20
- data/docs/misc/code_of_conduct.md +0 -13
- data/docs/misc/doctrine.md +0 -77
- data/docs/misc/style.md +0 -33
- data/docs/misc/tips.md +0 -10
- data/docs/outdated/deferred-rendering.md +0 -39
- data/docs/outdated/rails-assets-relative-paths.md +0 -195
- data/docs/outdated/rails-assets.md +0 -77
- data/docs/outdated/rails3.md +0 -9
- data/docs/rails/convert-rails-5-api-only-app.md +0 -19
- data/docs/rails/rails-engine-integration.md +0 -32
- data/docs/rails/rails_view_rendering_from_inline_javascript.md +0 -36
- data/docs/rails/turbolinks.md +0 -124
- data/docs/react-on-rails-pro/react-on-rails-pro.md +0 -43
- data/docs/testimonials/hvmn.md +0 -25
- data/docs/testimonials/resortpass.md +0 -13
- data/docs/testimonials/testimonials.md +0 -28
- data/jest.config.js +0 -4
- data/package-scripts.yml +0 -49
- data/package.json +0 -96
- data/rakelib/docker.rake +0 -26
- data/rakelib/dummy_apps.rake +0 -30
- data/rakelib/example_type.rb +0 -96
- data/rakelib/examples.rake +0 -64
- data/rakelib/examples_config.yml +0 -14
- data/rakelib/lint.rake +0 -30
- data/rakelib/node_package.rake +0 -15
- data/rakelib/release.rake +0 -92
- data/rakelib/run_rspec.rake +0 -103
- data/rakelib/task_helpers.rb +0 -62
- data/script/bootstrap +0 -33
- data/script/release +0 -3
- data/script/setup +0 -23
- data/script/test +0 -38
- data/webpackConfigLoader.js +0 -71
- data/yarn.lock +0 -7010
data/docs/api/redux-store-api.md
DELETED
@@ -1,102 +0,0 @@
|
|
1
|
-
# Redux Store
|
2
|
-
|
3
|
-
_This redux API is no longer recommended as it prevents dynamic code splitting for performance. Instead, you should use the standard react_component view helper passing in a "Render-Function."_
|
4
|
-
|
5
|
-
You don't need to use the `redux_store` api to use redux. This api was setup to support multiple calls to `react_component` on one page that all talk to the same redux store.
|
6
|
-
|
7
|
-
If you are only rendering one react component on a page, as is typical to do a "Single Page App" in React, then you should _probably_ pass the props to your React component in a "Render-Function."
|
8
|
-
|
9
|
-
Consider using the `redux_store` helper for the two following use cases:
|
10
|
-
|
11
|
-
1. You want to have multiple React components accessing the same store at once.
|
12
|
-
2. You want to place the props to hydrate the client side stores at the very end of your HTML, probably server rendered, so that the browser can render all earlier HTML first. This is particularly useful if your props will be large. However, you're probably better off using [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) if you're at all concerned about performance.
|
13
|
-
|
14
|
-
## Multiple React Components on a Page with One Store
|
15
|
-
|
16
|
-
You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript.
|
17
|
-
|
18
|
-
A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
|
19
|
-
|
20
|
-
Suppose the Redux store is called `appStore`, and you have 3 React components that each needs to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
|
21
|
-
|
22
|
-
You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note: this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
|
23
|
-
|
24
|
-
```js
|
25
|
-
function appStore(props, railsContext) {
|
26
|
-
// Create a hydrated redux store, using props and the railsContext (object with
|
27
|
-
// Rails contextual information).
|
28
|
-
return myAppStore;
|
29
|
-
}
|
30
|
-
|
31
|
-
ReactOnRails.registerStore({
|
32
|
-
appStore
|
33
|
-
});
|
34
|
-
```
|
35
|
-
|
36
|
-
When registering your component with React on Rails, you can get the store via `ReactOnRails.getStore`:
|
37
|
-
|
38
|
-
```js
|
39
|
-
// getStore will initialize the store if not already initialized, so creates or retrieves store
|
40
|
-
const appStore = ReactOnRails.getStore("appStore");
|
41
|
-
return (
|
42
|
-
<Provider store={appStore}>
|
43
|
-
<CommentsApp />
|
44
|
-
</Provider>
|
45
|
-
);
|
46
|
-
```
|
47
|
-
|
48
|
-
From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note: for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
|
49
|
-
|
50
|
-
**app/views/layouts/application.html.erb**
|
51
|
-
|
52
|
-
```erb
|
53
|
-
...
|
54
|
-
<%= redux_store("appStore", props: @react_props) %>;
|
55
|
-
<%= react_component("NavbarApp") %>
|
56
|
-
yield
|
57
|
-
...
|
58
|
-
```
|
59
|
-
|
60
|
-
Components should be created as [stateless function(al) components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions). Since you can pass in initial props via the helper `redux_store`, you do not need to pass any props directly to the component. Instead, the component hydrates by connecting to the store.
|
61
|
-
|
62
|
-
**_comments.html.erb**
|
63
|
-
|
64
|
-
```erb
|
65
|
-
<%= react_component("CommentsApp") %>
|
66
|
-
```
|
67
|
-
|
68
|
-
**_blogs.html.erb**
|
69
|
-
|
70
|
-
```erb
|
71
|
-
<%= react_component("BlogsApp") %>
|
72
|
-
```
|
73
|
-
|
74
|
-
*Note:* You will not be doing any partial updates to the Redux store when loading a new page. When the page content loads, React on Rails will rehydrate a new version of the store with whatever props are placed on the page.
|
75
|
-
|
76
|
-
## Controller Extension
|
77
|
-
|
78
|
-
Include the module `ReactOnRails::Controller` in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
|
79
|
-
|
80
|
-
`redux_store(store_name, props: {})`
|
81
|
-
|
82
|
-
- **store_name:** A name for the store. You'll refer to this name in 2 places in your JavaScript:
|
83
|
-
1. You'll call `ReactOnRails.registerStore({storeName})` in the same place that you register your components.
|
84
|
-
2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
|
85
|
-
- **props:** Named parameter `props`. ReactOnRails takes care of setting up the hydration of your store with props from the view.
|
86
|
-
|
87
|
-
For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/controllers/pages_controller.rb). Note: this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
|
88
|
-
|
89
|
-
## View Helper
|
90
|
-
|
91
|
-
`redux_store(store_name, props: {})`
|
92
|
-
|
93
|
-
This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note: you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
|
94
|
-
|
95
|
-
`redux_store_hydration_data`
|
96
|
-
|
97
|
-
Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client-side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
|
98
|
-
|
99
|
-
# More Details
|
100
|
-
|
101
|
-
* [lib/react_on_rails/controller.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/controller.rb) source
|
102
|
-
* [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source
|
@@ -1,133 +0,0 @@
|
|
1
|
-
# View and Controller Helpers
|
2
|
-
## View Helpers API
|
3
|
-
|
4
|
-
Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component).
|
5
|
-
|
6
|
-
------------
|
7
|
-
|
8
|
-
### react_component
|
9
|
-
|
10
|
-
```ruby
|
11
|
-
react_component(component_name,
|
12
|
-
props: {},
|
13
|
-
prerender: nil)
|
14
|
-
html_options: {})
|
15
|
-
```
|
16
|
-
|
17
|
-
Uncommonly used options:
|
18
|
-
```
|
19
|
-
trace: nil,
|
20
|
-
replay_console: nil,
|
21
|
-
raise_on_prerender_error: nil,
|
22
|
-
id: nil,
|
23
|
-
```
|
24
|
-
|
25
|
-
- **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
|
26
|
-
All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
|
27
|
-
- **general options:**
|
28
|
-
- **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
|
29
|
-
- **prerender:** enable server-side rendering of a component. Set to false when debugging!
|
30
|
-
- **auto_load_bundle:** will automatically load the bundle for component by calling `append_javascript_pack_tag` and `append_stylesheet_pack_tag` under the hood.
|
31
|
-
- **id:** Id for the div, will be used to attach the React component. This will get assigned automatically if you do not provide an id. Must be unique.
|
32
|
-
- **html_options:** Any other HTML options get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with the styling of `display:inline-block`. You may also use an option of `tag: "span"` to replace the use of the default DIV tag to be a SPAN tag.
|
33
|
-
- **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Only on the **client side** will you will see the `railsContext` and your props.
|
34
|
-
- **random_dom_id:** True to automatically generate random dom ids when using multiple instances of the same React component on one Rails view.
|
35
|
-
- **options if prerender (server rendering) is true:**
|
36
|
-
- **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the configuration of `logging_on_server` set to true, you'll still see the errors on the server.
|
37
|
-
- **logging_on_server:** Default is true. True will log JS console messages and errors to the server.
|
38
|
-
- **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
|
39
|
-
|
40
|
-
-------------
|
41
|
-
|
42
|
-
### react_component_hash
|
43
|
-
|
44
|
-
`react_component_hash` is used to return multiple HTML strings for server rendering, such as for
|
45
|
-
adding meta-tags to a page. It is exactly like react_component except for the following:
|
46
|
-
|
47
|
-
1. `prerender: true` is automatically added to options, as this method doesn't make sense for
|
48
|
-
client only rendering.
|
49
|
-
2. Your JavaScript Render-Function for server rendering must return an Object rather than a React Component.
|
50
|
-
3. Your view code must expect an object and not a string.
|
51
|
-
|
52
|
-
Here is an example of ERB view code:
|
53
|
-
|
54
|
-
```erb
|
55
|
-
<% react_helmet_app = react_component_hash("ReactHelmetApp", prerender: true,
|
56
|
-
props: { helloWorldData: { name: "Mr. Server Side Rendering"}},
|
57
|
-
id: "react-helmet-0", trace: true) %>
|
58
|
-
<% content_for :title do %>
|
59
|
-
<%= react_helmet_app['title'] %>
|
60
|
-
<% end %>
|
61
|
-
<%= react_helmet_app["componentHtml"] %>
|
62
|
-
```
|
63
|
-
|
64
|
-
And here is the JavaScript code:
|
65
|
-
|
66
|
-
```js
|
67
|
-
export default (props, _railsContext) => {
|
68
|
-
const componentHtml = renderToString(<ReactHelmet {...props} />);
|
69
|
-
const helmet = Helmet.renderStatic();
|
70
|
-
|
71
|
-
const renderedHtml = {
|
72
|
-
componentHtml,
|
73
|
-
title: helmet.title.toString(),
|
74
|
-
};
|
75
|
-
return { renderedHtml };
|
76
|
-
};
|
77
|
-
```
|
78
|
-
|
79
|
-
------------
|
80
|
-
|
81
|
-
### cached_react_component and cached_react_component_hash
|
82
|
-
Fragment caching is a [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) feature. The API is the same as the above, but for 2 differences:
|
83
|
-
|
84
|
-
1. The `cache_key` takes the same parameters as any Rails `cache` view helper.
|
85
|
-
1. The **props** are passed via a block so that evaluation of the props is not done unless the cache is broken. Suppose you put your props calculation into some method called `some_slow_method_that_returns_props`:
|
86
|
-
|
87
|
-
```ruby
|
88
|
-
<%= cached_react_component("App", cache_key: [@user, @post], prerender: true) do
|
89
|
-
some_slow_method_that_returns_props
|
90
|
-
end %>
|
91
|
-
```
|
92
|
-
------------
|
93
|
-
|
94
|
-
### rails_context
|
95
|
-
|
96
|
-
You can call `rails_context` or `rails_context(server_side: true|false)` from your controller or view to see what values are are in the Rails Context. Pass true or false depending on whether you want to see the server side or the client side rails_context. Typically, for computing cache keys, you should leave server_side as the default true. When calling this from a controller method, use `helpers.rails_context`.
|
97
|
-
|
98
|
-
------------
|
99
|
-
|
100
|
-
### Renderer Functions (function that will call ReactDOM.render or ReactDOM.hydrate)
|
101
|
-
|
102
|
-
A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
|
103
|
-
|
104
|
-
Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
|
105
|
-
|
106
|
-
Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
|
107
|
-
|
108
|
-
------------
|
109
|
-
|
110
|
-
### React Router
|
111
|
-
|
112
|
-
[React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
|
113
|
-
|
114
|
-
1. [React on Rails docs for react-router](https://www.shakacode.com/react-on-rails/docs/javascript/react-router/)
|
115
|
-
2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
|
116
|
-
3. [Code Splitting docs](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/) for information about how to set up code splitting for server rendered routes.
|
117
|
-
|
118
|
-
------------
|
119
|
-
|
120
|
-
## server_render_js
|
121
|
-
|
122
|
-
`server_render_js(js_expression, options = {})`
|
123
|
-
|
124
|
-
- js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught, and console messages will be handled properly
|
125
|
-
- Currently, the only option you may pass is `replay_console` (boolean)
|
126
|
-
|
127
|
-
This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly.
|
128
|
-
|
129
|
-
------------
|
130
|
-
|
131
|
-
# More details
|
132
|
-
|
133
|
-
See the [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source.
|
@@ -1,45 +0,0 @@
|
|
1
|
-
# Invalid hook call error
|
2
|
-
|
3
|
-
```
|
4
|
-
react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
5
|
-
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
6
|
-
2. You might be breaking the Rules of Hooks
|
7
|
-
3. You might have more than one copy of React in the same app
|
8
|
-
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
|
9
|
-
```
|
10
|
-
|
11
|
-
The main reason to get this is due to multiple versions of React installed.
|
12
|
-
|
13
|
-
```
|
14
|
-
cd <top level>
|
15
|
-
npm ls react
|
16
|
-
|
17
|
-
cd spec/dummy
|
18
|
-
npm ls react
|
19
|
-
```
|
20
|
-
|
21
|
-
For the second one, you might get:
|
22
|
-
|
23
|
-
```
|
24
|
-
react_on_rails@ /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy
|
25
|
-
├── react@16.13.1
|
26
|
-
└─┬ react-on-rails@12.0.0 -> /Users/justin/shakacode/react-on-rails/react_on_rails invalid
|
27
|
-
└── react@16.13.1 extraneous
|
28
|
-
|
29
|
-
npm ERR! invalid: react-on-rails@12.0.0 /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy/node_modules/react-on-rails
|
30
|
-
npm ERR! extraneous: react@16.13.1 /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy/node_modules/react-on-rails/node_modules/react
|
31
|
-
```
|
32
|
-
|
33
|
-
Make sure there is only one version of React installed!
|
34
|
-
|
35
|
-
If you used yarn link, then you'll have two versions of React installed.
|
36
|
-
|
37
|
-
Instead use [Yalc](https://github.com/whitecolor/yalc).
|
38
|
-
|
39
|
-
```
|
40
|
-
cd <top level>
|
41
|
-
yalc publish
|
42
|
-
|
43
|
-
cd spec/dummy
|
44
|
-
yalc link react-on-rails
|
45
|
-
```
|
@@ -1,11 +0,0 @@
|
|
1
|
-
# Generator Testing
|
2
|
-
We create several applications that are examples of running the generator (see lib/generators/react_on_rails/install_generator.rb) with various different options. We can then run tests with these apps just like we would any Rails app and thus ensure that our generator makes apps that actually function properly.
|
3
|
-
|
4
|
-
Special rake tasks in rakelib/examples.rake handle creating the example apps and running a special hidden generator (lib/generators/react_on_rails/dev_tests_generator.rb) that installs the tests we want to run for each app. These tests can be run manually like any Rails app, or they can be run via the `rake run_rspec:examples` command. There are also commands for running each app individually, i.e., `rake run_rspec:example_basic`.
|
5
|
-
|
6
|
-
## Travis and Gemfiles
|
7
|
-
We are currently using Travis for CI. Because of the way Travis works, it is not possible to `bundle install` multiple Gemfiles. Therefore, we have placed all dependencies for generated apps in the gem's main Gemfile. If you generate an app that has a new gem dependency in its Gemfile, you need to add that dependency to the main Gemfile or it will not work in CI.
|
8
|
-
|
9
|
-
## Configuring what Apps are Generated
|
10
|
-
You can specify additional apps to generate and test by adding to the rakelib/examples_config.yml file. The necessary build and test tasks will automatically be created for you dynamically at runtime.
|
11
|
-
|
@@ -1,68 +0,0 @@
|
|
1
|
-
# Linters
|
2
|
-
These linters support the [ShakaCode Style Guidelines](https://www.shakacode.com/react-on-rails/docs/misc/style/)
|
3
|
-
|
4
|
-
## Autofix!
|
5
|
-
|
6
|
-
If you haven't tried the autofix options for `eslint` and `rubocop`, you're seriously missing out!
|
7
|
-
|
8
|
-
1. Be **SURE** you have a clean git status, as you'll want to review what the autofix does to your code!
|
9
|
-
2. **Rubocop:** Be sure to be in the right directory where you have Ruby files, probably the top level of your Rails project.
|
10
|
-
```
|
11
|
-
rubocop -a
|
12
|
-
```
|
13
|
-
|
14
|
-
3. **eslint:**: Be sure to be in the right directory where you have JS files.
|
15
|
-
```
|
16
|
-
eslint --fix .
|
17
|
-
```
|
18
|
-
|
19
|
-
or
|
20
|
-
|
21
|
-
```
|
22
|
-
npm run lint -- --fix
|
23
|
-
```
|
24
|
-
|
25
|
-
Autofixing is a **HUGE** time saver!
|
26
|
-
|
27
|
-
## ESLint
|
28
|
-
|
29
|
-
### Configuring Rules
|
30
|
-
|
31
|
-
Rules are configured with a 0, 1 or 2. Setting a rule to 0 is turning it off, setting it to 1 triggers a warning if that rule is violated, and setting it to 2 triggers an error.
|
32
|
-
|
33
|
-
Rules can also take a few additional options. In this case, the rule can be set to an array, the first item of which is the 0/1/2 flag and the rest are options.
|
34
|
-
|
35
|
-
See file [.eslintrc](https://github.com/shakacode/react_on_rails/tree/master/.eslintrc) for examples of configuration
|
36
|
-
|
37
|
-
### Specify/Override rules in code
|
38
|
-
|
39
|
-
Rules can also be specified in the code file to be linted, as JavaScript comments. This can be useful when the rule is a one-off or is a override to a project-wide rule.
|
40
|
-
|
41
|
-
For example, if your file assumes a few globals and you have the no-undef rule set in the .eslintrc file, you might want to relax the rule in the current file.
|
42
|
-
|
43
|
-
```
|
44
|
-
/* global $, window, angular */
|
45
|
-
// rest of code
|
46
|
-
```
|
47
|
-
|
48
|
-
It's also useful to disable ESLint for particular lines or blocks of lines.
|
49
|
-
|
50
|
-
```
|
51
|
-
console.log('console.log not allowed'); // eslint-disable-line
|
52
|
-
|
53
|
-
alert('alert not allowed'); // eslint-disable-line no-alert
|
54
|
-
|
55
|
-
/* eslint-disable no-console, no-alert */
|
56
|
-
console.log('more console.log');
|
57
|
-
alert('more alert');
|
58
|
-
/* eslint-enable no-console, no-alert */
|
59
|
-
```
|
60
|
-
|
61
|
-
You can disable all rules for a line or block, or only specific rules, as shown above.
|
62
|
-
|
63
|
-
### Useful Reference Links
|
64
|
-
|
65
|
-
* [Configuring ESLint](http://eslint.org/docs/user-guide/configuring.html#configuring-rules)
|
66
|
-
* [ESLint quick start](http://untilfalse.com/eslint-quick-start/)
|
67
|
-
* [RuboCop](https://github.com/bbatsov/rubocop)
|
68
|
-
* [ESLint](http://eslint.org/)
|
@@ -1,42 +0,0 @@
|
|
1
|
-
# Pull Requests
|
2
|
-
|
3
|
-
## Checklist before Committing
|
4
|
-
1. `rake`: runs all linters and specs (you need Docker setup, see below)
|
5
|
-
2. Did you need any more tests for your change?
|
6
|
-
3. Did you document your change? Update the README.md?
|
7
|
-
4. Did you add a CHANGELOG.md entry?
|
8
|
-
|
9
|
-
|
10
|
-
For non-doc fixes:
|
11
|
-
|
12
|
-
* Provide changelog entry in the [unreleased section of the CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#unreleased).
|
13
|
-
* Ensure CI passes and that you added a test that passes with the fix and fails without the fix.
|
14
|
-
* Squash all commits down to one with a nice commit message *ONLY* once final review is given. Make sure this single commit is rebased on top of master.
|
15
|
-
* Please address all code review comments.
|
16
|
-
* Ensure that docs are updated accordingly if a feature is added.
|
17
|
-
|
18
|
-
## Commit Messages
|
19
|
-
|
20
|
-
From [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/)
|
21
|
-
|
22
|
-
#### The seven rules of a great git commit message
|
23
|
-
> Keep in mind: This has all been said before.
|
24
|
-
|
25
|
-
1. Separate subject from body with a blank line
|
26
|
-
1. Limit the subject line to 50 characters
|
27
|
-
1. Capitalize the subject line
|
28
|
-
1. Do not end the subject line with a period
|
29
|
-
1. Use the imperative mood in the subject line
|
30
|
-
1. Wrap the body at 72 characters
|
31
|
-
1. Use the body to explain what and why vs. how
|
32
|
-
|
33
|
-
## Doc Changes
|
34
|
-
|
35
|
-
When making doc changes, we want the change to work on both the gitbook and the regular github site. The issue is that non-doc files will not go to the gitbook site, so doc references to non doc files must use the github URL.
|
36
|
-
|
37
|
-
### Links to other docs:
|
38
|
-
* When making references to doc files, use a relative URL path like:
|
39
|
-
`[Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview/)`
|
40
|
-
|
41
|
-
* When making references to source code files, use a full url path like:
|
42
|
-
`[spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb)`
|
@@ -1,76 +0,0 @@
|
|
1
|
-
# Install and Release
|
2
|
-
|
3
|
-
We're now releasing this as a combined ruby gem plus npm package. We will keep the version numbers in sync.
|
4
|
-
|
5
|
-
## Testing the Gem before Release from a Rails App
|
6
|
-
See [Contributing](https://github.com/shakacode/react_on_rails/tree/master/CONTRIBUTING.md)
|
7
|
-
|
8
|
-
## Releasing a new gem version
|
9
|
-
Run `rake -D release` to see instructions on how to release via the rake task.
|
10
|
-
|
11
|
-
|
12
|
-
As of 01-26-2016, this would give you an output like this:
|
13
|
-
|
14
|
-
```
|
15
|
-
rake release[gem_version,dry_run,tools_install]
|
16
|
-
Releases both the gem and node package using the given version.
|
17
|
-
|
18
|
-
IMPORTANT: the gem version must be in valid rubygem format (no dashes).
|
19
|
-
It will be automatically converted to a valid npm semver by the rake task
|
20
|
-
for the node package version. This only makes a difference for pre-release
|
21
|
-
versions such as `3.0.0.beta.1` (npm version would be `3.0.0-beta.1`).
|
22
|
-
|
23
|
-
This task will also globally install gem-release (ruby gem) and
|
24
|
-
release-it (node package) unless you specify skip installing tools.
|
25
|
-
|
26
|
-
2nd argument: Perform a dry run by passing 'true' as a second argument.
|
27
|
-
3rd argument: Skip installing tools by passing 'false' as a third argument (default is true).
|
28
|
-
|
29
|
-
Example: `rake release[2.1.0,false,false]`
|
30
|
-
```
|
31
|
-
|
32
|
-
Running `rake release[2.1.0]` will create a commit that looks like this:
|
33
|
-
|
34
|
-
```
|
35
|
-
commit d07005cde9784c69e41d73fb9a0ebe8922e556b3
|
36
|
-
Author: Rob Wise <robert.wise@outlook.com>
|
37
|
-
Date: Tue Jan 26 19:49:14 2016 -0500
|
38
|
-
|
39
|
-
Release 2.1.0
|
40
|
-
|
41
|
-
diff --git a/lib/react_on_rails/version.rb b/lib/react_on_rails/version.rb
|
42
|
-
index 3de9606..b71aa7a 100644
|
43
|
-
--- a/lib/react_on_rails/version.rb
|
44
|
-
+++ b/lib/react_on_rails/version.rb
|
45
|
-
@@ -1,3 +1,3 @@
|
46
|
-
module ReactOnRails
|
47
|
-
- VERSION = "2.0.2".freeze
|
48
|
-
+ VERSION = "2.1.0".freeze
|
49
|
-
end
|
50
|
-
diff --git a/package.json b/package.json
|
51
|
-
index aa7b000..af8761e 100644
|
52
|
-
--- a/package.json
|
53
|
-
+++ b/package.json
|
54
|
-
@@ -1,6 +1,6 @@
|
55
|
-
{
|
56
|
-
"name": "react-on-rails",
|
57
|
-
- "version": "2.0.2",
|
58
|
-
+ "version": "2.1.0",
|
59
|
-
"description": "react-on-rails JavaScript for react_on_rails Ruby gem",
|
60
|
-
"main": "node_package/lib/ReactOnRails.js",
|
61
|
-
"directories": {
|
62
|
-
diff --git a/spec/dummy/Gemfile.lock b/spec/dummy/Gemfile.lock
|
63
|
-
index 8ef51df..4489bfe 100644
|
64
|
-
--- a/spec/dummy/Gemfile.lock
|
65
|
-
+++ b/spec/dummy/Gemfile.lock
|
66
|
-
@@ -1,7 +1,7 @@
|
67
|
-
PATH
|
68
|
-
remote: ../..
|
69
|
-
specs:
|
70
|
-
- react_on_rails (2.0.2)
|
71
|
-
+ react_on_rails (2.1.0)
|
72
|
-
connection_pool
|
73
|
-
execjs (~> 2.5)
|
74
|
-
rails (>= 3.2)
|
75
|
-
(END)
|
76
|
-
```
|
@@ -1,63 +0,0 @@
|
|
1
|
-
# Deploying React on Rails to Elastic Beanstalk
|
2
|
-
|
3
|
-
In order to deploy a React on Rails app to elastic beanstalk, you must install yarn on each instance.
|
4
|
-
If yarn is not installed, asset compilation will fail on the elastic beanstalk instance.
|
5
|
-
|
6
|
-
You can install `yarn` by adding a `0x_install_yarn.config` file to your `.ebextensions` folder which contains these commands.
|
7
|
-
|
8
|
-
```
|
9
|
-
files:
|
10
|
-
"/opt/elasticbeanstalk/hooks/appdeploy/pre/09_yarn.sh" :
|
11
|
-
mode: "000755"
|
12
|
-
owner: root
|
13
|
-
group: root
|
14
|
-
content: |
|
15
|
-
#!/usr/bin/env bash
|
16
|
-
set -xe
|
17
|
-
|
18
|
-
EB_SCRIPT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k script_dir)
|
19
|
-
EB_APP_STAGING_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k app_staging_dir)
|
20
|
-
EB_APP_USER=$(/opt/elasticbeanstalk/bin/get-config container -k app_user)
|
21
|
-
EB_SUPPORT_DIR=$(/opt/elasticbeanstalk/bin/get-config container -k support_dir)
|
22
|
-
|
23
|
-
. $EB_SUPPORT_DIR/envvars
|
24
|
-
. $EB_SCRIPT_DIR/use-app-ruby.sh
|
25
|
-
|
26
|
-
# Install nodejs
|
27
|
-
echo "install nodejs"
|
28
|
-
curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash -
|
29
|
-
yum -y install nodejs
|
30
|
-
echo "install yarn"
|
31
|
-
# install yarn
|
32
|
-
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo;
|
33
|
-
yum -y install yarn;
|
34
|
-
|
35
|
-
# yarn install
|
36
|
-
cd $EB_APP_STAGING_DIR
|
37
|
-
yarn
|
38
|
-
|
39
|
-
# mkdir /home/webapp
|
40
|
-
mkdir -p /home/webapp
|
41
|
-
chown webapp:webapp /home/webapp
|
42
|
-
chmod 700 /home/webapp
|
43
|
-
```
|
44
|
-
|
45
|
-
This script installs `yarn` and all `node.js` dependencies before the rails do `assets:precompile`. Also, it creates `/home/webapp` directory allowing the precompile task to create temp files.
|
46
|
-
|
47
|
-
Your app can be deployed to elastic beanstalk successfully. However, the react app javascript files are under `public/packs`. If you are using nginx, you need to let it know the location of `https://yourhost/packs`.
|
48
|
-
|
49
|
-
In your `proxy.conf` setting, please add the following code.
|
50
|
-
|
51
|
-
```
|
52
|
-
...
|
53
|
-
server{
|
54
|
-
...
|
55
|
-
location /packs {
|
56
|
-
root /var/app/current/public;
|
57
|
-
}
|
58
|
-
...
|
59
|
-
}
|
60
|
-
...
|
61
|
-
```
|
62
|
-
|
63
|
-
You can find an example code here: https://github.com/imgarylai/react_on_rails_with_aws_ebs.
|
@@ -1,35 +0,0 @@
|
|
1
|
-
# Heroku Deployment
|
2
|
-
## Heroku buildpacks
|
3
|
-
|
4
|
-
React on Rails requires both a ruby environment (for Rails) and a Node environment (for Webpack), so you will need to have Heroku use multiple buildpacks.
|
5
|
-
|
6
|
-
Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use both buildpacks via the command-line:
|
7
|
-
|
8
|
-
```
|
9
|
-
heroku buildpacks:set heroku/ruby
|
10
|
-
heroku buildpacks:add --index 1 heroku/nodejs
|
11
|
-
```
|
12
|
-
|
13
|
-
For more information, see [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
|
14
|
-
|
15
|
-
## assets:precompile
|
16
|
-
|
17
|
-
### rails/webpacker webpack configuration
|
18
|
-
If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
|
19
|
-
will automatically modify or create an assets:precompile task to build your assets.
|
20
|
-
|
21
|
-
Alternatively, you can specify `config.build_production_command` to have
|
22
|
-
react_on_rails invoke a command for you during assets:precompile.
|
23
|
-
|
24
|
-
```
|
25
|
-
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpacker"
|
26
|
-
```
|
27
|
-
|
28
|
-
### Consider Removing Webpacker's clean task
|
29
|
-
|
30
|
-
If you are deploying on Heroku, then you don't need Webpacker's clean task which
|
31
|
-
might delete files that you need.
|
32
|
-
|
33
|
-
```
|
34
|
-
Rake::Task['webpacker:clean'].clear
|
35
|
-
```
|