react_on_rails_pro 16.2.0.test.6 → 16.2.0

data/docs/code-splitting.md

@@ -1,7 +1,8 @@
 # Server-side rendering with code-splitting in React on Rails
+
 by ShakaCode
 
-*Last updated June 13, 2019*
+_Last updated June 13, 2019_
 
 # Deprecated
 
@@ -21,14 +22,16 @@ If the project includes server rendering, then you need to exclude the use of dy
 # Dependencies
 
 Install following libraries in client folder:
+
 ```
 yarn add react-loadable webpack-conditional-loader
 ```
 
 - [react-loadable](https://github.com/jamiebuilds/react-loadable) - take cares of loading and correctly displaying our dynamic components.
-- [webpack-conditional-loader](https://www.npmjs.com/package/webpack-conditional-loader) - allow us conditionally extract parts of our code into different bundles. 
+- [webpack-conditional-loader](https://www.npmjs.com/package/webpack-conditional-loader) - allow us conditionally extract parts of our code into different bundles.
 
 Add `webpack-conditional-loader` to the loaders, like this:
+
 ```js
 {
   test: /\.jsx?$/,
@@ -45,6 +48,7 @@ Add `webpack-conditional-loader` to the loaders, like this:
 ```
 
 Optionally. Create alias for `DynamicImports.js` file in `resolve`:
+
 ```js
 alias: {
   DynamicImports: path.resolve(__dirname, 'client', 'DynamicImports.js'),
@@ -54,6 +58,7 @@ alias: {
 # Simple example of using dynamic components
 
 Consider the component that we want to convert to a dynamic:
+
 ```
 components
   |_ Map
@@ -61,6 +66,7 @@ components
 ```
 
 Let's create `index.jsx` in `Map` directory with the following contents:
+
 ```jsx
 let Component = null;
 
@@ -84,16 +90,16 @@ import Loadable from 'react-loadable';
 
 import Loading from '../Loading';
 
-const load = opts => Loadable({
-  delay: 10000,
-  loading: () => <Loading />,
-  render(loaded, props) {
-    const LoadedComponent = loaded.default;
-    return <LoadedComponent {...props} />;
-  },
-  ...opts,
-});
-
+const load = (opts) =>
+  Loadable({
+    delay: 10000,
+    loading: () => <Loading />,
+    render(loaded, props) {
+      const LoadedComponent = loaded.default;
+      return <LoadedComponent {...props} />;
+    },
+    ...opts,
+  });
 
 /* Here we're wrapping our component in react-loadable HOC */
 const DynamicComponent = load({
@@ -101,7 +107,7 @@ const DynamicComponent = load({
     We need to specify these params: `webpackChunkName`, `modules` and `webpack`
     so react-loadable can load our chunk correctly
   */
-  loader: () => import(/* webpackChunkName: "Map" */'./Map'),
+  loader: () => import(/* webpackChunkName: "Map" */ './Map'),
   modules: ['./Map'],
   webpack: () => [require.resolveWeak('./Map')],
 });
@@ -116,12 +122,15 @@ export default Component;
 ```
 
 Now, if we want to use this component we should import it like this:
+
 ```jsx
-import Map from './components/Map'
+import Map from './components/Map';
 ```
+
 in this case, webpack will load `index.jsx` instead of `Map.jsx` if not some other special order specified.
 
 Also, `IS_SSR=true` must added when creating server side bundle, like this:
+
 ```
 NODE_ENV=production IS_SSR=true webpack --config webpack.config.ssr.prod.js
 ```
@@ -141,33 +150,34 @@ More details can be found in the documentation react-loadable.
 
 But we can get rid of annoying flickering `Loading ...` the first time the page loads. The server renderer has already rendered the necessary components. Therefore, we can transfer this information from the server renderer to the client and preload the necessary modules.
 
-Unfortunately, the way specified in the documentation `react-loadable` does not work for us. 
+Unfortunately, the way specified in the documentation `react-loadable` does not work for us.
 
 Here is another similar method.
 
 For this we use the function `registerDynamicComponentOnServer`. We will place it in the new file `DynamicImports.js`:
 
-
 ```javascript
-export const registerDynamicComponentOnServer = name => {
-  const serverSide = typeof window === 'undefined'
+export const registerDynamicComponentOnServer = (name) => {
+  const serverSide = typeof window === 'undefined';
 
   if (serverSide) {
     if (typeof global.dynamicComponents === 'undefined') {
-      global.dynamicComponents = []
+      global.dynamicComponents = [];
     }
     if (global.dynamicComponents.indexOf(name) === -1) {
-      global.dynamicComponents.push(name)
+      global.dynamicComponents.push(name);
     }
   }
-}
+};
 ```
+
 As you can see from the function body, it runs only for server-side rendering.  
 It simply adds the name of the component to the global array `dynamicComponents` which will be transferred to the client later.
 
 It must be imported into the component that needs to be made dynamic and called in the render method of this component. For example:
 
 components/Map/Map.jsx:
+
 ```javascript
 ...
 import { registerDynamicComponentOnServer } from 'DynamicImports';
@@ -182,39 +192,33 @@ class Map extends React.Component {
 }
 ```
 
-
 Then this global array must be passed to the client.
 To do this, change server entry point as follows:
 
-
 **ServerApp.js**:
+
 ```javascript
 import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails-pro';
 
 import App from './App';
 
 const ServerApp = (props, railsContext) => {
-
-  const html = renderToString(
-    <App
-      {...props}
-      components={{ MainPage, AboutPage }}
-    />
-  );
+  const html = renderToString(<App {...props} components={{ MainPage, AboutPage }} />);
 
   return {
     html,
     dynamicComponents: JSON.stringify(global.dynamicComponents),
   };
-}
+};
 
-ReactOnRails.register({ App: ServerApp })
+ReactOnRails.register({ App: ServerApp });
 
-export default ServerApp
+export default ServerApp;
 ```
 
 And add our array to view in rails, where our react_component is displayed
+
 ```slim
 <% component = react_component("App", props: {}, prerender: true) %>
 
@@ -237,90 +241,87 @@ To do this, we will create an object with the component names as the keys, and t
 We will add it to `DynamicImports.js` and add a check for the presence of the registered component in this object in the function` registerDynamicComponentOnServer`:
 
 **DynamicImports.js**
+
 ```javascript
 const DynamicImports = {
-  Map: () => import('./components/Map')
-}
+  Map: () => import('./components/Map'),
+};
 
-export const registerDynamicComponentOnServer = name => {
-  const serverSide = typeof window === 'undefined'
+export const registerDynamicComponentOnServer = (name) => {
+  const serverSide = typeof window === 'undefined';
 
   if (serverSide) {
     if (typeof global.dynamicComponents === 'undefined') {
-      global.dynamicComponents = []
+      global.dynamicComponents = [];
     }
     if (typeof DynamicImports[name] === 'undefined') {
-      throw new Error(`Dynamic import not defined for ${name}`)
+      throw new Error(`Dynamic import not defined for ${name}`);
     }
     if (global.dynamicComponents.indexOf(name) === -1) {
-      global.dynamicComponents.push(name)
+      global.dynamicComponents.push(name);
     }
   }
-}
+};
 
-export default DynamicImports
+export default DynamicImports;
 ```
 
 Now we can load the component we need, knowing its name
 For example:
+
 ```javascript
-DynamicImports ['Map'] ()
+DynamicImports['Map']();
 ```
+
 This function will return Promise, which can be used for client rendering.
 
 Change the Client.js to add the preloading of the required components:
 
-
 **Client.js**
+
 ```javascript
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import Loadable from 'react-loadable'
+import Loadable from 'react-loadable';
 
 import App from './App';
 
-import DynamicImports from 'DynamicImports'
+import DynamicImports from 'DynamicImports';
 
 const App = (props, railsContext, domNodeId) => {
-
   const dynamicComponents =
-    typeof window.dynamicComponents !== 'undefined'
-      ? JSON.parse(window.dynamicComponents)
-      : []
-
+    typeof window.dynamicComponents !== 'undefined' ? JSON.parse(window.dynamicComponents) : [];
 
-  const dynamicImports = []
-  dynamicComponents.map(name => {
-    const dynamicImportInvoked = DynamicImports[name]()
-    dynamicImports.push(dynamicImportInvoked)
-  })
+  const dynamicImports = [];
+  dynamicComponents.map((name) => {
+    const dynamicImportInvoked = DynamicImports[name]();
+    dynamicImports.push(dynamicImportInvoked);
+  });
 
   Promise.all(dynamicImports)
     .then(() => Loadable.preloadReady())
     .then(() => {
       hydrateRoot(
-        <App
-          {...props}
-          components={{ MainPage, AboutPage }}
-        />,
+        <App {...props} components={{ MainPage, AboutPage }} />,
         document.getElementById(domNodeId),
-      )
-    })
-}
+      );
+    });
+};
 
-export default App
+export default App;
 ```
 
 This code requires explanation.
 
 The array with names of rendered components called `dynamicComponents` is used in the map function.  
 In this function, the dynamic import invoked and the result (promise) is added to `dynamicImports` array.
+
 ```javascript
-  const dynamicImports = []
-  dynamicComponents.map(name => {
-    const dynamicImportInvoked = DynamicImports[name]()
-    dynamicImports.push(dynamicImportInvoked)
-  })
+const dynamicImports = [];
+dynamicComponents.map((name) => {
+  const dynamicImportInvoked = DynamicImports[name]();
+  dynamicImports.push(dynamicImportInvoked);
+});
 ```
 
 This array is used in the function `Promise.all`
@@ -334,16 +335,19 @@ Then fires `Loadable.preloadReady()`
 ```javascript
 .then(() => Loadable.preloadReady())
 ```
+
 As in the doc:
 Check for modules that are already loaded in the browser and call the matching LoadableComponent.preload methods.
 
 We need to call this method to initialize already preloaded components.
 
 In addition, note that in the creation of dynamic modules, the `modules` and` webpack` options are used, per the docs for react-loadable.
+
 ```javascript
   modules: ['./AboutPage'],
   webpack: () => [require.resolveWeak('./AboutPage')],
 ```
+
 They are needed to make .preload method work properly
 
 Thus, all dynamic modules will be loaded up to hydrate, and there will be no flicker.

data/docs/configuration.md

@@ -1,6 +1,6 @@
 # Configuration
 
-`config/initializers/react_on_rails_pro.rb`  
+`config/initializers/react_on_rails_pro.rb`
 
 1. You don't need to create a initializer if you are satisfied with the defaults as described below.
 1. Values beginning with `renderer` pertain only to using an external rendering server. You will need to ensure these values are consistent with your configuration for the external rendering server, as given in [JS configuration](https://www.shakacode.com/react-on-rails-pro/docs/node-renderer/js-configuration/)
@@ -32,12 +32,12 @@ ReactOnRailsPro.configure do |config|
   # Remote bundle caching saves deployment time by caching bundles.
   # See /docs/bundle-caching.md for usage and an example of a module called S3BundleCacheAdapter.
   config.remote_bundle_cache_adapter = nil
-  
+
   # ALL OPTIONS BELOW ONLY APPLY IF SERVER RENDERING
 
   # If true, then cache the evaluation of JS for prerendering using the standard Rails cache.
   # Applies to all rendering engines.
-  # Default for `prerender_caching` is false.  
+  # Default for `prerender_caching` is false.
   config.prerender_caching = true
 
   # Retry request in case of time out on the node-renderer side
@@ -77,9 +77,9 @@ ReactOnRailsPro.configure do |config|
   # config.renderer_password = ENV["RENDERER_PASSWORD"]
 
   # Set the `ssr_timeout` configuration so the Rails server will not wait more than this many seconds
-  # for a SSR request to return once issued. 
+  # for a SSR request to return once issued.
   config.ssr_timeout = 5
-  
+
   # If false, then crash if no backup rendering when the remote renderer is not available
   # Can be useful to set to false in development or testing to make sure that the remote renderer
   # works and any non-availability of the remote renderer does not just do ExecJS.
@@ -103,7 +103,7 @@ ReactOnRailsPro.configure do |config|
   config.renderer_http_pool_warn_timeout = 0.25 # seconds
 
   # Snippet of JavaScript to be run right at the beginning of the server rendering process. The code
-  # to be executed must either be self contained or reference some globally exposed module.  
+  # to be executed must either be self contained or reference some globally exposed module.
   # For example, suppose that we had to call `SomeLibrary.clearCache()`between every call to server
   # renderer to ensure no leakage of state between calls. Note, SomeLibrary needs to be globally
   # exposed in the server rendering webpack bundle. This code is visible in the tracing of the calls

data/docs/contributors-info/onboarding-customers.md

@@ -1,6 +1,7 @@
 # Creating a github OAuth Token
 
-*[Document for ShakaCode Staff](https://docs.google.com/document/d/10snzXEWgkorcai76_OxlhjQcDae_WoxRfBCdVbmcQoU/edit)*
+_[Document for ShakaCode Staff](https://docs.google.com/document/d/10snzXEWgkorcai76_OxlhjQcDae_WoxRfBCdVbmcQoU/edit)_
 
 # Customer Steps
+
 See [Installation](../installation.md).

data/docs/contributors-info/releasing.md

@@ -33,6 +33,7 @@ rake release[17.0.0,false,verdaccio]
 ```
 
 This unified script releases all 5 packages together:
+
 - react-on-rails (NPM)
 - react-on-rails-pro (NPM)
 - react-on-rails-pro-node-renderer (NPM)

data/docs/contributors-info/style.md

@@ -1,33 +1,41 @@
 # Code Style
+
 This document describes the coding style of [ShakaCode](http://www.shakacode.com). Yes, it's opinionated, as all style guidelines should be. We shall put as little as possible into this guide and instead rely on:
 
-* Use of linters with our standard linter configuration.
-* References to existing style guidelines that support the linter configuration.
-* Anything additional goes next.
+- Use of linters with our standard linter configuration.
+- References to existing style guidelines that support the linter configuration.
+- Anything additional goes next.
 
 ## Client Side JavaScript and React
-* See the [Shakacode JavaScript Style Guide](https://github.com/shakacode/style-guide-javascript)
+
+- See the [Shakacode JavaScript Style Guide](https://github.com/shakacode/style-guide-javascript)
 
 ## Style Guides to Follow
+
 Follow these style guidelines per the linter configuration. Basically, lint your code and if you have questions about the suggested fixes, look here:
 
 ### Ruby Coding Standards
-* [ShakaCode Ruby Coding Standards](https://github.com/shakacode/style-guide-ruby)
-* [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
+
+- [ShakaCode Ruby Coding Standards](https://github.com/shakacode/style-guide-ruby)
+- [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
 
 ### JavaScript Coding Standards
-* [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
-* Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
-* [JSDoc](http://usejsdoc.org/)
+
+- [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
+- Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
+- [JSDoc](http://usejsdoc.org/)
 
 ### Git coding Standards
-* [Git Coding Standards](http://chlg.co/1GV2m9p)
+
+- [Git Coding Standards](http://chlg.co/1GV2m9p)
 
 ### Sass Coding Standards
-* [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
-* [Github Front End Guidelines](http://primercss.io/guidelines/)
+
+- [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
+- [GitHub Front End Guidelines](http://primercss.io/guidelines/)
 
 # Git Usage
-* Follow a github-flow model where you branch off of master for features.
-* Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
-* Run hosted CI and code coverage.
+
+- Follow a github-flow model where you branch off of master for features.
+- Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
+- Run hosted CI and code coverage.

data/docs/home-pro.md

@@ -3,67 +3,77 @@
 Node rendering and caching performance enhancements for [React on Rails](https://github.com/shakacode/react_on_rails). Now supports React 18 with updates to React on Rails! Check the [React on Rails CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md) for details and the updates to the [loadable-components instructions](https://github.com/shakacode/react_on_rails_pro/blob/master/docs/code-splitting-loadable-components.md).
 
 ## Getting Started
+
 The best way to see how React on Rails Pro works is to install this repo locally and take a look at
 the example application:
 
-[spec/dummy](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/README.md)
+[spec/dummy](https://github.com/shakacode/react_on_rails/blob/master/react_on_rails/spec/dummy/README.md)
+
 1. Uses a @rails/webpacker standard configuration.
 1. Has pages that demonstrate:
    1. caching
    2. loadable-components
-1. Has all the basic react_on_rails specs that run against the Node Renderer 
+1. Has all the basic react_on_rails specs that run against the Node Renderer
 1. Demonstrates using HMR and loadable-components with almost the same example that is present in [loadable-components for SSR](https://github.com/gregberge/loadable-components/tree/main/examples/server-side-rendering)
-   
+
 See the README.md in those sample apps for more details.
 
 ## Features
 
 ### 🚀 Next-Gen Server Rendering: Streaming with React 18's Latest APIs
+
 React on Rails Pro supports React 18's Streaming Server-Side Rendering, allowing you to progressively render and stream HTML content to the client. This enables faster page loads and better user experience.
 
 See [docs/streaming-server-rendering](./streaming-server-rendering.md) for more details.
 
 ### Caching
+
 Caching of SSR is critical for achieving optimum performance.
 
-* **Fragment Caching**: for `react_component` and `react_component_hash`, including lazy evaluation of props.
-* **Prerender Caching**: Server rendering JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods.
+- **Fragment Caching**: for `react_component` and `react_component_hash`, including lazy evaluation of props.
+- **Prerender Caching**: Server rendering JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods.
 
 See [docs/caching](./caching.md) for more details.
 
 ### Clearing of Global State
+
 Suppose you detect that some library used in server-rendering is leaking state between calls to server render. In that case, you can set the `config.ssr_pre_hook_js` in your `config/initializers/react_on_rails_pro.rb` to run some JavaScript to clear the globally leaked state at the beginning of each call to server render.
 
-For more details, see [Rails Configuration](https://github.com/shakacode/react_on_rails/blob/master/docs/configuration.md).
+For more details, see [Rails Configuration](https://github.com/shakacode/react_on_rails/blob/master/docs/configuration/configuration.md).
 
 ### React On Rails Pro Node Renderer
+
 The "React on Rails Pro Node Renderer" provides more efficient server rendering on a standalone Node JS server.
 See the [Node Renderer Docs](./node-renderer/basics.md).
 
 ### Bundle Caching
+
 Don't wait for the same webpack bundles to be built over and over. See the [bundle-caching docs](./bundle-caching.md).
 
 ## Other Utility Methods
+
 See the [Ruby API](./ruby-api.md).
 
 ## References
 
-* [Installation](./installation.md)
-* [Streaming Server Rendering](./streaming-server-rendering.md)
-* [Caching](./caching.md)
-* [Rails Configuration](./configuration.md)
-* [Node Renderer Docs](./node-renderer/basics.md)
+- [Installation](./installation.md)
+- [Streaming Server Rendering](./streaming-server-rendering.md)
+- [Caching](./caching.md)
+- [Rails Configuration](./configuration.md)
+- [Node Renderer Docs](./node-renderer/basics.md)
 
 # Features
+
 ## Code Splitting
 
 From [The Cost of JavaScript in 2018](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4):
 
 > To stay fast, only load JavaScript needed for the current page. Prioritize what a user will need and lazy-load the rest with code-splitting. This gives you the best chance at loading and getting interactive fast. Stacks with route-based code-splitting by default are game-changers.
 
-
 ## Caching
+
 ### Server Rendering
+
 Server rendering of JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods, including ExecJS and the Node VM Renderer.
 
 ### Pro: Fragment Caching
@@ -90,24 +100,31 @@ Note, even without server rendering (without step 3 above), fragment caching is
 See [Caching](./caching.md) for more additional details.
 
 ## React On Rails Pro Node React Render
+
 The "React on Rails Pro Node React Renderer" provides more efficient React Server Side Rendering on a standalone Node JS server.
 
 ### Overall Management Memory and CPU on both the Rendering and Ruby Servers
+
 A separate Node rendering server is easier to manage in terms of monitoring memory and CPU performance, allocating dynos, etc. This also makes it easier to manage the ruby servers, as you no longer have to consider the impact of starting an embedded V8. Thus, you can never hang your Ruby servers due to JavaScript memory leaks.
 
 ### Proper Node Tooling
+
 A disadvantage of Ruby embedded JavaScript (ExecJS) is that it precludes the use of standard Node tooling for doing things like profiling and tracking down memory leaks. With the renderer on a separate Node.js server, we were able to use node-memwatch (https://github.com/marcominetti/node-memwatch) to find few memory leaks in the Egghead React code.
 
 ### Caching of React Rendering
+
 To limit the load on the renderer server or embedded ExecJS, caching of React rendering requests can be enabled by a config setting. Because current React rendering requests are idempotent (same value regardless of calls), caching should be feasible for all server rendering calls. The current renderer does not allow any asynchronous calls to fetch data. The rendering request includes all data for rendering.
 
 ### Rolling Restart of Node Workers
+
 Due to poor performance and crashes due to memory leaks, the rolling restart of node workers was thus added as an option to the core rendering product. This option is cheap insurance against the renderer getting too slow from a memory leak due to a bug in some newly deployed JavaScript code.
 
 ### Docs
+
 See the [Node React Render Docs](./node-renderer/basics.md).
 
 ## Other Utility Methods
+
 See the [Ruby API](./ruby-api.md).
 
 # Testimonials
@@ -121,9 +138,10 @@ For details, see [Egghead React on Rails Pro Deployment Highlights](https://gith
 
 ## Why should I use React on Rails Pro if ExecJS seems to work?
 
-Caching is extremely useful to any server rendering you're doing, with or without ExecJS. 
+Caching is extremely useful to any server rendering you're doing, with or without ExecJS.
 
 React on Rails pro support caching at 2 levels:
+
 1. Caching of rendering request to ExecJS (or the Node renderer). This avoids extra calls to ExecJS.
 2. Fragment caching of server rendering. This avoids even the calculations of prop values from the database and the cost of converting the props to a string (lots of CPU there)
 
@@ -142,5 +160,5 @@ For more info, email [justin@shakacode.com](mailto:justin@shakacode.com).
 
 # References
 
-* [Caching](./caching.md)
-* [Rails Configuration](./configuration.md)
+- [Caching](./caching.md)
+- [Rails Configuration](./configuration.md)