Add an integration test for registerRenderer

Added a new page /client_side_manual_render. This page renders the
react component `ManualRenderApp`, which is registered on the client
side using `registerRenderer`. The given renderer function just
renders some simple html to the DOM.

The integration test tests for the presence of the html rendered by
the ManualRenderApp renderer. The test passing suggests that
ReactOnRails properly delegates to the renderer function on client
startup.

Author: jtibbertsma

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

@@ -56,6 +56,9 @@
   <li>
     <%= link_to "One Page with Many Examples at Once", root_path %>
   </li>
+  <li>
+    <%= link_to "Manually Rendered Component", client_side_manual_render_path %>
+  </li>
   <li>
     <%= link_to "React Router", react_router_path %>
   </li>

spec/dummy/app/views/pages/client_side_manual_render.html.erb

@@ -0,0 +1,52 @@
+<%= render "header" %>
+
+<%= react_component("ManualRenderApp", props: {}, prerender: false) %>
+<hr/>
+
+<h2>Manual Rendering with registerRenderer</h2>
+<ul>
+  <li>
+    <p>Use react_component the same way you would if you were using register:</p>
+    <pre>
+  <%%= react_component("ManualRenderApp", props: {}, prerender: false) %>
+    </pre>
+    <p>spec/dummy/app/views/pages/client_side_manual_render.html.erb</p>
+    <br>
+  </li>
+
+  <li>
+    <p>Use registerRenderer to expose the rendering function to ReactOnRails:</p>
+    <pre>
+  import ManualRenderApp from './ManualRenderAppRenderer';
+
+  ReactOnRails.registerRenderer({
+    ManualRenderApp,
+  });
+    </pre>
+    <p>spec/dummy/client/app/startup/clientRegistration.jsx</p>
+    <br>
+  </li>
+
+  <li>
+    <p>A renderer is a function that accepts props, railsContext, domNodeId:</p>
+    <pre>
+  const ManualRenderApp = (props, railsContext, domNodeId) => {
+    const reactElement = (
+      <%= '<div>' %>
+        <%= '<h1>Manual Render Example</h1>' %>
+        <%= '<p>If you can see this, registerRenderer works.</p>' %>
+      <%= '</div>' %>
+    );
+
+    ReactDOM.render(reactElement, document.getElementById(domNodeId));
+  };
+    </pre>
+    <p>spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx</p>
+    <br>
+  </li>
+</ul>
+
+<p>
+  One possible use case for this is
+  <a href="https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/code-splitting.md"> Code Splitting</a>.
+</p>

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default (props, railsContext, domNodeId) => {
+  const reactElement = (
+    <div>
+      <h1>Manual Render Example</h1>
+      <p>If you can see this, registerRenderer works.</p>
+    </div>
+  );
+
+  ReactDOM.render(reactElement, document.getElementById(domNodeId));
+};

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

@@ -10,6 +10,7 @@ import ReduxSharedStoreApp from './ClientReduxSharedStoreApp';
 import RouterApp from './ClientRouterApp';
 import PureComponent from '../components/PureComponent';
 import CssModulesImagesFontsExample from '../components/CssModulesImagesFontsExample';
+import ManualRenderApp from './ManualRenderAppRenderer'
 
 import SharedReduxStore from '../stores/SharedReduxStore';
 
@@ -29,6 +30,10 @@ ReactOnRails.register({
   CssModulesImagesFontsExample,
 });
 
+ReactOnRails.registerRenderer({
+  ManualRenderApp,
+});
+
 ReactOnRails.registerStore({
   SharedReduxStore,
 });

spec/dummy/config/routes.rb

@@ -20,6 +20,7 @@
   get "server_side_redux_app" => "pages#server_side_redux_app"
   get "server_side_hello_world_with_options" => "pages#server_side_hello_world_with_options"
   get "server_side_redux_app_cached" => "pages#server_side_redux_app_cached"
+  get "client_side_manual_render" => "pages#client_side_manual_render"
   get "render_js" => "pages#render_js"
   get "react_router(/*all)" => "react_router#index", as: :react_router
   get "pure_component" => "pages#pure_component"

spec/dummy/spec/features/integration_spec.rb

@@ -143,6 +143,16 @@ def change_text_expect_dom_selector(dom_selector)
   end
 end
 
+feature "Manual Rendering", :js do
+  subject { page }
+  background { visit "/client_side_manual_render" }
+  scenario "renderer function is called successfully" do
+    header_text = page.find(:css, "h1").text
+    expect(header_text).to eq("Manual Render Example")
+    expect(subject).to have_text "registerRenderer works"
+  end
+end
+
 shared_examples "React Component Shared Store" do |url|
   subject { page }
   background { visit url }