Add example for returning component from async render function (#1829)

* add examples

make renderer runnable on one process

Modify example views to pass props to components and add integration tests for async rendering functionality.

Revert "make renderer runnable on one process"

This reverts commit 91efa37a665f836b05a116e6548ef809d956a67c.

Update Gemfile and package.json to use the master branch of react_on_rails

Update component source paths and improve menu link labels for clarity

revert changes to react on rails dependency

* Add 'use client' directive to AsyncRenderFunction components for client-side rendering support

---------

Co-authored-by: Example User <[email protected]>

Author: AbanoubGhadban

react_on_rails_pro/spec/dummy/app/views/pages/async_render_function_returns_component.html.erb

@@ -0,0 +1,12 @@
+<h1>Async Render Function Returns Component</h1>
+<p>
+  This example demonstrates a component that returns a React component from an async function.
+</p>
+
+<%= react_component("AsyncRenderFunctionReturnsComponent", props: { hello: "world" }, prerender: true, trace: true) %>
+
+<hr/>
+<h2>Details</h2>
+<p>
+  Component source: spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsComponent.server.jsx
+</p>

react_on_rails_pro/spec/dummy/app/views/pages/async_render_function_returns_string.html.erb

@@ -0,0 +1,12 @@
+<h1>Async Render Function Returns String</h1>
+<p>
+  This example demonstrates a component that returns a string from an async function.
+</p>
+
+<%= react_component("AsyncRenderFunctionReturnsString", props: { hello: "world" }, prerender: true, trace: true) %>
+
+<hr/>
+<h2>Details</h2>
+<p>
+  Component source: spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsString.server.jsx
+</p>

react_on_rails_pro/spec/dummy/app/views/shared/_menu.erb

@@ -55,6 +55,12 @@ end
   <li>
     <%= link_to("Console Logs in Async Server", console_logs_in_async_server_path, class: cp(console_logs_in_async_server_path)) %>
   </li>
+  <li>
+    <%= link_to("Async Render Function Returns a String", async_render_function_returns_string_path, class: cp(async_render_function_returns_string_path)) %>
+  </li>
+  <li>
+    <%= link_to("Async Render Function Returns a Component", async_render_function_returns_component_path, class: cp(async_render_function_returns_component_path)) %>
+  </li>
 </ul>
 
 <h2 class="text-red-700 text-2xl mt-5">

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsComponent.client.jsx

@@ -0,0 +1,8 @@
+'use client';
+
+// Top level component for simple client side only rendering
+import React from 'react';
+
+import EchoProps from '../components/EchoProps';
+
+export default (props) => <EchoProps {...props} />;

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsComponent.server.jsx

@@ -0,0 +1,17 @@
+'use client';
+
+// Top level component for simple client side only rendering
+import React from 'react';
+import EchoProps from '../components/EchoProps';
+
+/*
+ *  Export an async function that takes the props and returns a promise that resolves to a React component.
+ *
+ *  Note, this is a fictional example, as you'd only use a Render-Function if you wanted to run
+ *  some extra code, such as setting up Redux and React Router.
+ *
+ */
+export default async (props, _railsContext) => {
+  await Promise.resolve();
+  return () => <EchoProps {...props} />;
+};

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsString.client.jsx

@@ -0,0 +1,8 @@
+'use client';
+
+// Top level component for simple client side only rendering
+import React from 'react';
+
+import EchoProps from '../components/EchoProps';
+
+export default (props) => <EchoProps {...props} />;

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncRenderFunctionReturnsString.server.jsx

@@ -0,0 +1,20 @@
+'use client';
+
+// Top level component for simple client side only rendering
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import EchoProps from '../components/EchoProps';
+
+/*
+ *  Export an async function that takes the props and returns a promise that resolves to the rendered HTML string.
+ *
+ *  Note, this is a fictional example, as you'd only use a Render-Function if you wanted to run
+ *  some extra code, such as setting up Redux and React Router.
+ *
+ *  And the use of renderToString would probably be done with React Router v4
+ *
+ */
+export default async (props, _railsContext) => {
+  const renderedHtml = await Promise.resolve(renderToString(<EchoProps {...props} />));
+  return renderedHtml;
+};

react_on_rails_pro/spec/dummy/config/routes.rb

@@ -34,6 +34,8 @@
       as: :async_on_server_sync_on_client_client_render
   get "server_router/(*all)" => "pages#server_router", as: :server_router
   get "server_router_client_render/(*all)" => "pages#server_router_client_render", as: :server_router_client_render
+  get "async_render_function_returns_string" => "pages#async_render_function_returns_string"
+  get "async_render_function_returns_component" => "pages#async_render_function_returns_component"
   rsc_payload_route controller: "pages"
 
   # routes copied over from react on rails

react_on_rails_pro/spec/dummy/spec/system/integration_spec.rb

@@ -217,6 +217,28 @@ def change_text_expect_dom_selector(dom_selector, expect_no_change: false)
   end
 end
 
+describe "async render function returns string", :js do
+  subject { page }
+
+  before { visit "/async_render_function_returns_string" }
+
+  it "renders the string returned from the async render function" do
+    expect(page).to have_text 'Props: {"hello":"world"}'
+    expect(page.html).to include("[SERVER] RENDERED AsyncRenderFunctionReturnsString to dom node with id")
+  end
+end
+
+describe "async render function returns component", :js do
+  subject { page }
+
+  before { visit "/async_render_function_returns_component" }
+
+  it "renders the component returned from the async render function" do
+    expect(page).to have_text 'Props: {"hello":"world"}'
+    expect(page.html).to include("[SERVER] RENDERED AsyncRenderFunctionReturnsComponent to dom node with id")
+  end
+end
+
 describe "Manual client hydration", :js, type: :system do
   before { visit "/xhr_refresh" }