Return markup hash form react component helper

[udovenko]

• Implement handling of Hash result of server_rendered_react_component_html in react_on_rails helper
• Implement additional example page for server rendered HTML that shows usage of htmlResult object
• Add conditional title to dummy app layout
• Implement rendering title string in generator function on server
• Add test for conditional title to integration_spec

---

This change is 

[justin808]

@udovenko AWESOME start.

Besides the comments below, we need:

• CHANGELOG.md entry
• /docs/additional-reading/react-helmut.md
• Update to the README

---

Reviewed 14 of 14 files at r1.
Review status: all files reviewed at latest revision, 11 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 121 at r1 (raw file):

    if server_rendered_html.is_a?(String)
      build_react_component_result_for_server_rendered_string(

Let's create a Hash of params and pass this to both methods. For more than 2 params, I prefer named params, or in our case, a hash of params.

---

app/helpers/react_on_rails_helper.rb, line 230 at r1 (raw file):

    result = compose_react_component_html_with_spec_and_console(
      component_specification_tag, rendered_output, options.replay_console ? console_script : "")

1. named params
2. Don't use a ternary as a param

---

app/helpers/react_on_rails_helper.rb, line 243 at r1 (raw file):

    # We expect uncapitalized component_name to be a key for rendered component HTML string:
    uncapitalized_component_name = component_name.clone
    uncapitalized_component_name[0] = uncapitalized_component_name[0].downcase

Why only the first character as downcased?

Note, downcase copies: https://ruby-doc.org/core-2.1.0/String.html#method-i-downcase while downcase! mutates.

I'd suggest we consider using the same key in the hash to mean the component, rather than the accessory information.

---

app/helpers/react_on_rails_helper.rb, line 245 at r1 (raw file):

    uncapitalized_component_name[0] = uncapitalized_component_name[0].downcase
    unless server_rendered_html[uncapitalized_component_name]
      fail "server_rendered_html expected to contain uncapitalized component_name."

display the expected component name in the error message

---

app/helpers/react_on_rails_helper.rb, line 261 at r1 (raw file):

prepend_render_rails_context(result)
create a local variable for this

---

docs/api/javascript-api.md, line 11 at r1 (raw file):

or you may use a

• "generator function" to return a React component or an object with the following shape:
• { renderedHtml, redirectLocation, error }.

or, in the case of server rendering, you may use a "generator function" to return a React component or an object with the following shape:
{ renderedHtml, redirectLocation, error }.

See the example in /docs/additional-reading/react-helmut.md

---

docs/api/javascript-api.md, line 12 at r1 (raw file):

   * to a Ruby Hash. This is useful if you want to use something like React Helmet to return
   * additional values when rendering. In this case rendered component HTML **must** be returned
   * under key matching uncapitalized component name.

switch to componentHtml

In this case rendered component HTML must be returned
under the key componentHtml

---

spec/dummy/app/views/pages/rendered_htmls.erb, line 9 at r1 (raw file):

<% end %>

<%= render_hash["renderedHtmls"] %>

I really don't like having the component name be RenderedHtmls and the hash key being renderedHtmls.

<%= render_hash["componentHtml"] %>

CC: @alexfedoseev @robwise

---

spec/dummy/client/app/startup/clientRegistration.jsx, line 49 at r1 (raw file):

  CacheDisabled,
  RenderedHtml,
  RenderedHtmls,

I think we need to change the name from RenderedHtmls to ReactHelmutApp so it's clear that it's showing React Helmut.

---

spec/dummy/client/app/startup/ClientRenderedHtmls.jsx, line 9 at r1 (raw file):

 *  This is used for the client rendering hook after the page html is rendered.
 *  React will see that the state is the same and not do anything.
 *  Note, this is imported as "HelloWorldApp" by "clientRegistration.jsx"

please fix up, trim up comments to reflect this example

---

spec/dummy/client/app/startup/ServerRenderedHtmls.jsx, line 24 at r1 (raw file):

const renderedHtml = {
renderedHtmls: componentHtml,
title: helmet.title.toString(),
};

  const renderedHtml = {
    componentHtml,
    title: helmet.title.toString(),
  };

---

Comments from Reviewable

[udovenko]

Review status: all files reviewed at latest revision, 11 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 121 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

Let's create a Hash of params and pass this to both methods. For more than 2 params, I prefer named params, or in our case, a hash of params.

Yes, that's reasonable.

---

app/helpers/react_on_rails_helper.rb, line 230 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

1. named params
2. Don't use a ternary as a param

Will fix...

---

app/helpers/react_on_rails_helper.rb, line 243 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

Why only the first character as downcased?

Note, downcase copies: https://ruby-doc.org/core-2.1.0/String.html#method-i-downcase while downcase! mutates.

I'd suggest we consider using the same key in the hash to mean the component, rather than the accessory information.

So we will access the component by the same key as used for its registration?

---

app/helpers/react_on_rails_helper.rb, line 245 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

display the expected component name in the error message

Will do...

---

app/helpers/react_on_rails_helper.rb, line 261 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

prepend_render_rails_context(result)
create a local variable for this

ok

---

docs/api/javascript-api.md, line 11 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

or you may use a

• "generator function" to return a React component or an object with the following shape:
• { renderedHtml, redirectLocation, error }.

or, in the case of server rendering, you may use a "generator function" to return a React component or an object with the following shape:
{ renderedHtml, redirectLocation, error }.

See the example in /docs/additional-reading/react-helmut.md

See comment above...

---

docs/api/javascript-api.md, line 12 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

switch to componentHtml

In this case rendered component HTML must be returned
under the key componentHtml

In this case rendered component must be under the key that matches its registration name (that is passed as component_name to react_component helper) inside componentHtml object. Suppose we registered component as App:

return {
   componentHtml: {
       App: reactDomServer.renderToString(...),
       additionalMarkup: blabla,
   }
}

---

spec/dummy/app/views/pages/rendered_htmls.erb, line 9 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

I really don't like having the component name be RenderedHtmls and the hash key being renderedHtmls.

<%= render_hash["componentHtml"] %>

CC: @alexfedoseev @robwise

The name of the hash key here must be the same as the key for component registration. I can register it as "ReactHelmetApp" then...

---

spec/dummy/client/app/startup/clientRegistration.jsx, line 49 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

I think we need to change the name from RenderedHtmls to ReactHelmutApp so it's clear that it's showing React Helmut.

see above...

---

Comments from Reviewable

[udovenko]

react-hElmet...

---

Review status: all files reviewed at latest revision, 11 unresolved discussions, some commit checks failed.

---

Comments from Reviewable

[udovenko]

Review status: 5 of 14 files reviewed at latest revision, 11 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 121 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

Yes, that's reasonable.

Done.

---

app/helpers/react_on_rails_helper.rb, line 230 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

Will fix...

Done.

---

app/helpers/react_on_rails_helper.rb, line 243 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

So we will access the component by the same key as used for its registration?

Done.

---

app/helpers/react_on_rails_helper.rb, line 245 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

Will do...

Done.

---

spec/dummy/client/app/startup/ReactHelmetClientApp.jsx, line 9 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

please fix up, trim up comments to reflect this example

Done.

---

spec/dummy/client/app/startup/ReactHelmetServerApp.jsx, line 24 at r1 (raw file):

Previously, justin808 (Justin Gordon) wrote…

const renderedHtml = {
renderedHtmls: componentHtml,
title: helmet.title.toString(),
};

  const renderedHtml = {
    componentHtml,
    title: helmet.title.toString(),
  };

Done.

---

Comments from Reviewable

[udovenko]

Review status: 4 of 16 files reviewed at latest revision, 11 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 261 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

ok

Done.

---

docs/api/javascript-api.md, line 11 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

See comment above...

Done.

---

docs/api/javascript-api.md, line 12 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

In this case rendered component must be under the key that matches its registration name (that is passed as component_name to react_component helper) inside componentHtml object. Suppose we registered component as App:

return {
   componentHtml: {
       App: reactDomServer.renderToString(...),
       additionalMarkup: blabla,
   }
}

Done.

---

spec/dummy/app/views/pages/react_helmet.erb, line 9 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

The name of the hash key here must be the same as the key for component registration. I can register it as "ReactHelmetApp" then...

Done.

---

spec/dummy/client/app/startup/clientRegistration.jsx, line 49 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

see above...

Done.

---

spec/dummy/client/app/startup/ReactHelmetClientApp.jsx, line 9 at r1 (raw file):

Previously, udovenko (Denis Udovenko) wrote…

Done.

Done.

---

Comments from Reviewable

[udovenko]

@justin808 I think I've fixed all your review notices. Hope I didn't miss anything...

[justin808]

@udovenko The main change is to fix the return keys. See below.

I'll try to get feedback from @robwise and @alexfedoseev on the API.

---

Reviewed 18 of 18 files at r2.
Review status: all files reviewed at latest revision, 22 unresolved discussions, some commit checks failed.

---

CHANGELOG.md, line 11 at r2 (raw file):

### Added
- Add possibility to return multiple HTML strings in a ```Hash``` as a result of ```react_component``` method call. Allows to build ```<head>``` contents with [React Helmet](https://github.com/nfl/react-helmet).
[#800](https://github.com/shakacode/react_on_rails/pull/800) by [udovenko](https://github.com/udovenko).

I think you wanted to use a single back tick, rather than three.

---

README.md, line 342 at r2 (raw file):

If you need to return multiple HTML strings from generator function and receive a Hash as a result of react_component helper call, you can put an object under renderedHtml key. This is useful when you using side effects libraries like react helmet.

For server rendering, if you wish to return multiple HTML strings from a generator function, such when using nfl/react-helmut, you may return an Object from your generator function with a single top level property of renderedHtml. Inside this Object, place a key called componentHtml, along with any other needed keys . This is useful when you using side effects libraries like react helmet. Your Ruby code with get this Object as a Hash containing keys componentHtml and any other custom keys that you added.

{ renderedHtml: { componentHtml, customKey1, customKey2} }

---

app/helpers/react_on_rails_helper.rb, line 227 at r2 (raw file):

  def build_react_component_result_for_server_rendered_string(params)
    unless params[:server_rendered_html] && params[:component_specification_tag] &&

Please assign the params to local variables. It's a bummer that we can't use named parameters due to a desire to maintain Ruby 2.0 compat.

---

app/helpers/react_on_rails_helper.rb, line 258 at r2 (raw file):

    # We expect component_name to be a key for rendered component HTML string:
    unless params[:server_rendered_html][params[:component_name]]

I thought we're switching to a constant of {renderedHtml: {componetHtml, other1, other2}}

---

app/helpers/react_on_rails_helper.rb, line 259 at r2 (raw file):

    # We expect component_name to be a key for rendered component HTML string:
    unless params[:server_rendered_html][params[:component_name]]
      fail "server_rendered_html expected to contain component_name #{params[:component_name]}."

I think it's awkward that the code inside of the the generator function needs to know it's name to work. If the name changes, this will be fragile.

I'd rather see that we fix the shape of the return Object: {renderedHtml: {componetHtml, other1, other2}}

@alexfedoseev @robwise, any opinions on this?

---

docs/additional-reading/react-helmet.md, line 1 at r2 (raw file):

# Using React Helmet to build ```<head>``` content

single backtick vs triple?

---

docs/additional-reading/react-helmet.md, line 13 at r2 (raw file):

```javascript
export default (props, _railsContext) => {
  const YourAppRegistrationKey = renderToString(<App {...props} />);

YourAppRegistrationKey does not sound right as the var name.

please use componentHtml

 const componentHtml = renderToString(<App {...props} />);
 const helmet = Helmet.renderStatic();
 const renderedHtml = {
    componentHtml,
    title: helmet.title.toString(),
  };

---

docs/additional-reading/react-helmet.md, line 74 at r2 (raw file):

Quoted 7 lines of code…

> ```ruby > <% render_hash = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %> >   > <% content_for :title do %> > <%= render_hash['title'] %> > <% end %> >   > <%= render_hash["ReactHelmetApp"] %> ```

@alexfedoseev @robwise How about this:

<% react_helmut_app = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
 
<% content_for :title do %>
  <%= react_helmut_app['title'] %>
<% end %>
 
<%= react_helmut_app["componentHtml"] %>

---

docs/api/javascript-api.md, line 12 at r2 (raw file):

   * On the server renderedHtml may be an Object, which converts to a Ruby Hash. This is useful
   * if you want to use something like ReactHelmet to return additional values when rendering.
   * In this case rendered component HTML must be returned under the same key as used for

Let's modify the doc to reflect this (no markdown, naturally).

For server rendering, if you wish to return multiple HTML strings from a generator function, such when using nfl/react-helmut, you may return an Object from your generator function with a single top level property of renderedHtml. Inside this Object, place a key called componentHtml, along with any other needed keys . This is useful when you using side effects libraries like react helmet. Your Ruby code with get this Object as a Hash containing keys componentHtml and any other custom keys that you added.

{ renderedHtml: { componentHtml, customKey1, customKey2} }

---

node_package/tests/ReactOnRails.test.js, line 138 at r2 (raw file):

  }

  ReactOnRails.setStore('storeGenerator', storeGenerator({}));

Why did this change? Was this an old bug?

---

spec/dummy/app/views/pages/react_helmet.erb, line 9 at r2 (raw file):

<% end %>

<%= render_hash["ReactHelmetApp"] %>

see example from docs above.

---

Comments from Reviewable

[udovenko]

Review status: 13 of 20 files reviewed at latest revision, 22 unresolved discussions, some commit checks failed.

---

CHANGELOG.md, line 11 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

I think you wanted to use a single back tick, rather than three.

Done.

---

README.md, line 342 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

If you need to return multiple HTML strings from generator function and receive a Hash as a result of react_component helper call, you can put an object under renderedHtml key. This is useful when you using side effects libraries like react helmet.

For server rendering, if you wish to return multiple HTML strings from a generator function, such when using nfl/react-helmut, you may return an Object from your generator function with a single top level property of renderedHtml. Inside this Object, place a key called componentHtml, along with any other needed keys . This is useful when you using side effects libraries like react helmet. Your Ruby code with get this Object as a Hash containing keys componentHtml and any other custom keys that you added.

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Done.

---

app/helpers/react_on_rails_helper.rb, line 227 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

Please assign the params to local variables. It's a bummer that we can't use named parameters due to a desire to maintain Ruby 2.0 compat.

Done.

---

app/helpers/react_on_rails_helper.rb, line 258 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

I thought we're switching to a constant of {renderedHtml: {componetHtml, other1, other2}}

Done.

---

app/helpers/react_on_rails_helper.rb, line 259 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

I think it's awkward that the code inside of the the generator function needs to know it's name to work. If the name changes, this will be fragile.

I'd rather see that we fix the shape of the return Object: {renderedHtml: {componetHtml, other1, other2}}

@alexfedoseev @robwise, any opinions on this?

Done.

---

docs/additional-reading/react-helmet.md, line 1 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

single backtick vs triple?

Done.

---

docs/additional-reading/react-helmet.md, line 13 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

YourAppRegistrationKey does not sound right as the var name.

please use componentHtml

 const componentHtml = renderToString(<App {...props} />);
 const helmet = Helmet.renderStatic();
 const renderedHtml = {
    componentHtml,
    title: helmet.title.toString(),
  };

Done.

---

docs/additional-reading/react-helmet.md, line 74 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

<% render_hash = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
 
<% content_for :title do %>
  <%= render_hash['title'] %>
<% end %>
 
<%= render_hash["ReactHelmetApp"] %>

@alexfedoseev @robwise How about this:

<% react_helmut_app = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
 
<% content_for :title do %>
  <%= react_helmut_app['title'] %>
<% end %>
 
<%= react_helmut_app["componentHtml"] %>

Done.

---

docs/api/javascript-api.md, line 12 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

Let's modify the doc to reflect this (no markdown, naturally).

For server rendering, if you wish to return multiple HTML strings from a generator function, such when using nfl/react-helmut, you may return an Object from your generator function with a single top level property of renderedHtml. Inside this Object, place a key called componentHtml, along with any other needed keys . This is useful when you using side effects libraries like react helmet. Your Ruby code with get this Object as a Hash containing keys componentHtml and any other custom keys that you added.

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Done.

---

node_package/tests/ReactOnRails.test.js, line 138 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

Why did this change? Was this an old bug?

This bug came from my previous PR. setStore method expects store instance, not store generator function. This change does not affect test results but I think this should be fixed to avoid misleading for other contributors.

---

spec/dummy/app/views/pages/react_helmet.erb, line 9 at r2 (raw file):

Previously, justin808 (Justin Gordon) wrote…

see example from docs above.

Done.

---

Comments from Reviewable

[udovenko]

@justin808 It's done I think.

[justin808]

see comments below

---

Reviewed 2 of 18 files at r2, 7 of 8 files at r3.
Review status: all files reviewed at latest revision, 14 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 228 at r4 (raw file):

    # Destructure params to local variables:
    server_rendered_html, component_specification_tag, console_script, options =
      params.values_at(:server_rendered_html, :component_specification_tag, :console_script, :options)

nifty! @robwise not as good as ES6 destructuring!

HOWEVER:

https://robots.thoughtbot.com/ruby-2-keyword-arguments

Ruby 2.0 introduced keyword arguments!

Take a look at this:
https://github.com/shakacode/react_on_rails/pull/651/files

Only very old Ruby < 2 required hash for params! I'm glad I caught that.

---

app/helpers/react_on_rails_helper.rb, line 232 at r4 (raw file):

    unless server_rendered_html && component_specification_tag && console_script && options
      fail "At least one of params :server_rendered_html, :component_specification_tag, :console_script or :options " \
           "is missing."

see that PR 651 and see how required params are done

---

app/helpers/react_on_rails_helper.rb, line 261 at r4 (raw file):

    content_tag_options[:id] = options.dom_id

    component_html_key = "componentHtml"

This should be declared as a Ruby const at the top of this file, all caps

---

app/helpers/react_on_rails_helper.rb, line 263 at r4 (raw file):

unless params[:server_rendered_html][component_html_key]

unless params[:server_rendered_html][COMPONENT_HTML_KEY]

---

Comments from Reviewable

[udovenko]

Review status: 18 of 19 files reviewed at latest revision, 4 unresolved discussions, some commit checks failed.

---

app/helpers/react_on_rails_helper.rb, line 228 at r4 (raw file):

Previously, justin808 (Justin Gordon) wrote…

nifty! @robwise not as good as ES6 destructuring!

HOWEVER:

https://robots.thoughtbot.com/ruby-2-keyword-arguments

Ruby 2.0 introduced keyword arguments!

Take a look at this:
https://github.com/shakacode/react_on_rails/pull/651/files

Only very old Ruby < 2 required hash for params! I'm glad I caught that.

Done.

---

app/helpers/react_on_rails_helper.rb, line 232 at r4 (raw file):

Previously, justin808 (Justin Gordon) wrote…

see that PR 651 and see how required params are done

Done.

---

app/helpers/react_on_rails_helper.rb, line 261 at r4 (raw file):

Previously, justin808 (Justin Gordon) wrote…

This should be declared as a Ruby const at the top of this file, all caps

Done.

---

app/helpers/react_on_rails_helper.rb, line 263 at r4 (raw file):

Previously, justin808 (Justin Gordon) wrote…

unless params[:server_rendered_html][component_html_key]

unless params[:server_rendered_html][COMPONENT_HTML_KEY]

Done.

---

Comments from Reviewable

[udovenko]

@justin808 Done...

[justin808]

Great job @udovenko!

---

Reviewed 1 of 1 files at r6.
Review status: all files reviewed at latest revision, 1 unresolved discussion, some commit checks failed.

---

Comments from Reviewable

[justin808]

---

Reviewed 4 of 4 files at r7.
Review status: all files reviewed at latest revision, all discussions resolved, some commit checks failed.

---

Comments from Reviewable

[coveralls]

Coverage increased (+0.06%) to 97.977% when pulling 301adb2 on udovenko:return_markup_hash_form_react_component_helper into 2bef1d5 on shakacode:master.

[justin808]

Reviewed 4 of 4 files at r8.
Review status: all files reviewed at latest revision, 1 unresolved discussion, some commit checks failed.

---

spec/dummy/client/package.json, line 36 at r8 (raw file):

    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-helmet": "5.0.3",

no ^?

why?

@udovenko

---

Comments from Reviewable

[justin808]

---

Review status: all files reviewed at latest revision, 1 unresolved discussion, some commit checks failed.

---

Comments from Reviewable