xhr_refresh.html.erb

<% provide :other_javascript_tags do %>
  <%= javascript_include_tag 'jquery_rails_manifest', defer: true %>
<% end %>

<div id='component-container'>
  <%= render partial: 'xhr_refresh_partial' %>
</div>

<div>
  Click to refresh components through XHR (first component event handlers won't work anymore)<br/>
  <%= form_tag '/xhr_refresh', method: :get, remote: true, format: :js do %>
    <%= submit_tag 'Refresh', id: 'refresh', name: 'refresh' %>
  <% end %>
</div>
<hr/>

<h1>React Rails Client Rehydration</h1>
<p>
  This example demonstrates client side manual rehydration after a component replacement through XHR.<br/><br/>

  The "Refresh" button on this page will trigger an asynchrounous refresh of component-container content.<br/>
  Components will be prerendered by the server and inserted in the DOM (spec/dummy/app/views/pages/xhr_refresh.js.erb)<br/>
  No client rehydration will occur, preventing any event handler to be correctly attached<br/><br/>

  Thus, the onChange handler of the HelloWorld component won't trigger whereas the one from HellowWorldRehydratable will, thanks to the "hydrate" javscript event dispacthed from xhr_refresh.js.erb<br />
</p>

<hr/>
<h2>Setup</h2>
<ol>
  <li>
    Create component source: spec/dummy/client/app/components/HelloWorldHydratable.jsx
  </li>
  <li>
    Expose the HelloWorldHydratable Component: spec/dummy/client/app/startup/serverRegistration.jsx and spec/dummy/client/app/startup/clientRegistration.jsx
    <br/>
    <pre style='white-space: pre-wrap; word-break: keep-all;'>
      import HelloWorldHydratable from '../components/HelloWorldHydratable';
      import ReactOnRails from 'react-on-rails';
      ReactOnRails.register({ HelloWorldHydratable });
    </pre>
  </li>
  <li>
    Place the component on the view: spec/dummy/app/views/pages/xhr_refresh.html.erb, making sure it has a parent node easily selectable
    <br/>
    <pre style='white-space: pre-wrap; word-break: keep-all;'>
      <div id='my-component-container'>
        <%%= react_component("HelloWorldHydratable", props: { helloWorldData: { name: 'HelloWorld' } }, prerender: true, trace: true, id: "HelloWorldHydratable-react-component-0") %>
      </div>
    </pre>
  </li>
  <li>
    Have a remote form allow to get xhr_request.js.erb
    <br/>
    <pre style='white-space: pre-wrap; word-break: keep-all;'>
      <%%= form_tag '/xhr_refresh', method: :get, remote: true, format: :js do %>
        <%%= submit_tag 'Refresh' %>
      <%% end %>
    </pre>
  </li>
  <li>
    In your xhr_request.js.erb, replace your container content and dispatch the 'hydrate' event that will be caught by HelloWorldHydratable event handler
    <br/>
    <pre style='white-space: pre-wrap; word-break: keep-all;'>
      var container = document.getElementById('component-container');
      <%% new_component = react_component("HelloWorldHydratable", props: { helloWorldData: { name: 'HelloWorld' } }, prerender: true, trace: true, id: "HelloWorldHydratable-react-component-0") %>
      container.innerHTML = "<%%= escape_javascript(new_component) %>";

      var event = document.createEvent('Event');
      event.initEvent('hydrate', true, true);
      document.dispatchEvent(event);
    </pre>
  </li>
</ol>