Add tests, dummy examples, docs, plus a bit of polish

Author: Nicholas Barone

docs/getting-started.md

@@ -121,6 +121,24 @@ issue.
   };
   ```
 
+- You can pass a block to `react_component`, and it will be provided as the `children` prop to the React component, as a React element:
+  ```ruby
+    <%= react_component("YourComponent") do %>
+      <p>Contained HTML<p>
+      <%= render "your/partial" %>
+    <% end %>
+  ```
+  ```js
+  import React from 'react';
+
+  export default (props) => {
+    return () => (
+      <div>{ props.children }</div>
+    );
+  };
+  ```
+  **Note that this is implementing using React's [dangerouslySetInnerHtml](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html)**, so named because of the exposure to cross-site scripting attacks. You should generally be fine since the HTML is coming from your own code via the Rails rendering engine, but this is sharp knife so please exercise caution :)
+
 See the [View Helpers API](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/) for more details on `react_component` and its sibling function `react_component_hash`.
 
 ## Globally Exposing Your React Components

lib/react_on_rails/helper.rb

@@ -110,8 +110,10 @@ def react_component(component_name, options = {}, &block)
     #    <% end %>
     #    <%= react_helmet_app["componentHtml"] %>
     #
-    def react_component_hash(component_name, options = {})
+    def react_component_hash(component_name, options = {}, &block)
+      (options[:props] ||= {})[:children_html] = capture(&block) if block
       options[:prerender] = true
+
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]

node_package/src/createReactOutput.ts

@@ -26,8 +26,6 @@ export default function createReactOutput({
 }: CreateParams): CreateReactOutputResult {
   const { name, component, renderFunction } = componentObj;
 
-  const children = props?.children_html ? React.createElement('div', {dangerouslySetInnerHTML: {__html: props.children_html }}) : null;
-
   if (trace) {
     if (railsContext && railsContext.serverSide) {
       console.log(`RENDERED ${name} to dom node with id: ${domNodeId}`);
@@ -38,13 +36,20 @@ export default function createReactOutput({
       console.log(`RENDERED ${name} to dom node with id: ${domNodeId} with props, railsContext:`,
         props, railsContext);
     }
+
+    if (renderFunction) {
+      console.log(`${name} is a renderFunction`);
+    }
   }
 
+  // Convert any nested content passed to the component into a React element.
+  const children = props?.children_html ? React.createElement('div', {dangerouslySetInnerHTML: {__html: props.children_html }}) : null;
+
+  const createElementFromComponent = (komponent: ReactComponent) => React.createElement(komponent, props, children);
+
   if (renderFunction) {
     // Let's invoke the function to get the result
-    if (trace) {
-      console.log(`${name} is a renderFunction`);
-    }
+
     const renderFunctionResult = (component as RenderFunction)(props, railsContext);
     if (isServerRenderHash(renderFunctionResult as CreateReactOutputResult)) {
       // We just return at this point, because calling function knows how to handle this case and
@@ -70,8 +75,8 @@ work if you return JSX. Update by wrapping the result JSX of ${name} in a fat ar
 
     // If a component, then wrap in an element
     const reactComponent = renderFunctionResult as ReactComponent;
-    return React.createElement(reactComponent, props, children);
+    return createElementFromComponent(reactComponent);
   }
   // else
-  return React.createElement(component as ReactComponent, props, children);
+  return createElementFromComponent(component as ReactComponent);
 }

spec/dummy/app/views/pages/children_example.erb

@@ -0,0 +1,4 @@
+<%= react_component("ChildrenExample", prerender: true, trace: true) do %>
+  <p>This page demonstrates using Rails to produce content for child nodes of React components</p>
+  <p>And, just to check that multiple DOM nodes are fine</p>
+<% end %>

spec/dummy/app/views/shared/_header.erb

@@ -104,5 +104,8 @@
   <li>
     <%= link_to "Incorrectly wrapping a pure component in a function", pure_component_wrapped_in_function_path %>
   </li>
+    <li>
+    <%= link_to "Children Example", children_example_path %>
+  </li>
 </ul>
 <hr/>

spec/dummy/client/app/startup/ChildrenExample.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const ComponentWithChildren = ({ children }) => (
+  <div>
+    <h1>This is component for testing passing children in from Rails</h1>
+    { children }
+  </div>
+);
+
+export default ComponentWithChildren;

spec/dummy/config/routes.rb

@@ -39,6 +39,7 @@
   get "react_helmet_broken" => "pages#react_helmet_broken"
   get "broken_app" => "pages#broken_app"
   get "image_example" => "pages#image_example"
+  get "children_example" => "pages#children_example"
   get "context_function_return_jsx" => "pages#context_function_return_jsx"
   get "pure_component_wrapped_in_function" => "pages#pure_component_wrapped_in_function"
   get "turbo_frame_tag_hello_world" => "pages#turbo_frame_tag_hello_world"

spec/dummy/spec/system/integration_spec.rb

@@ -284,6 +284,21 @@ def finished_all_ajax_requests?
   end
 end
 
+describe "with children", :js do
+  subject { page }
+
+  before { visit "/children_example" }
+
+  it "children_example should not have any errors" do
+    expect(page).to have_text(
+      "This page demonstrates using Rails to produce content for child nodes of React components"
+    )
+    expect(page).to have_text(
+      "And, just to check that multiple DOM nodes are fine"
+    )
+  end
+end
+
 describe "use different props for server/client", :js do
   subject { page }