Initial RSC Implementation

Signed-off-by: Khaled Emara <[email protected]>

Author: KhaledEmaraDev

app/controllers/react_on_rails_pro/rsc_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ReactOnRailsPro
+  # TODO: Make mountable through Engine
+  class RscController < ApplicationController
+    include ActionController::Live
+    include ReactOnRails::Helper
+
+    def render_rsc
+      render_options = ReactOnRails::ReactComponent::RenderOptions.new(
+        react_component_name: params[:componentName],
+        options: {
+          trace: true,
+          replay_console: true,
+          raise_on_prerender_error: true
+        }
+      )
+
+      # TODO: RailsContext
+      js_code = ReactOnRailsPro::ServerRenderingJsCode.render_rsc(
+        props_string(params[:props] || {}).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029'),
+        initialize_redux_stores,
+        params[:componentName],
+        render_options
+      )
+
+      ReactOnRailsPro::ServerRenderingPool::ProRendering.reset_pool_if_server_bundle_was_modified
+      ReactOnRailsPro::ServerRenderingPool::NodeRenderingPool.eval_js(
+        js_code,
+        render_options,
+        false,
+        response
+      )
+    ensure
+      response.stream.close
+    end
+  end
+end

config/routes.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+Rails.application.routes.draw do
+  get "rsc/:componentName" => "react_on_rails_pro/rsc#render_rsc", as: :rsc
+end

lib/react_on_rails_pro/request.rb

@@ -12,9 +12,9 @@ def reset_connection
         @connection = create_connection
       end
 
-      def render_code(path, js_code, send_bundle)
+      def render_code(path, js_code, send_bundle, live_response = nil)
         Rails.logger.info { "[ReactOnRailsPro] Perform rendering request #{path}" }
-        perform_request(path, form_with_code(js_code, send_bundle))
+        perform_request(path, form_with_code(js_code, send_bundle), live_response)
       end
 
       def upload_assets
@@ -34,43 +34,84 @@ def connection
         @connection ||= create_connection
       end
 
-      def perform_request(path, form)
-        available_retries = ReactOnRailsPro.configuration.renderer_request_retry_limit
-        retry_request = true
-        while retry_request
-          begin
-            response = connection.request(Net::HTTP::Post::Multipart.new(path, form))
-            retry_request = false
-          rescue Timeout::Error => e
-            # Testing timeout catching:
-            # https://github.com/shakacode/react_on_rails_pro/pull/136#issue-463421204
-            if available_retries.zero?
-              raise ReactOnRailsPro::Error, "Time out error when getting the response on: #{path}.\n" \
+      # TODO: Fix Metrics/AbcSize
+      # rubocop:disable Metrics/AbcSize
+      def perform_request(path, form, live_response = nil)
+        if live_response
+          date = Time.now.httpdate
+
+          live_response.headers["Content-Type"] = "text/x-component"
+          live_response.headers["Date"] = date
+          live_response.headers["Connection"] = "keep-alive"
+          live_response.headers["Keep-Alive"] = "timeout=5"
+          live_response.headers["Last-Modified"] = date
+        end
+
+        response_code = nil
+        response_body = ""
+
+        cache_key = Digest::MD5.hexdigest(form["renderingRequest"])
+        cached_response = Rails.cache.read(cache_key)
+
+        if cached_response
+          response_code = "200"
+          response_body = cached_response
+          live_response.status = 200
+          live_response.stream.write(response_body)
+        else
+          available_retries = ReactOnRailsPro.configuration.renderer_request_retry_limit
+          retry_request = true
+
+          while retry_request
+            begin
+              connection.request(Net::HTTP::Post::Multipart.new(path, form)) do |res|
+                response_code = res.code
+                if response_code == "200"
+                  if live_response
+                    live_response.status = res.code
+                  end
+                  res.read_body do |chunk|
+                    response_body += chunk
+                    if live_response
+                      live_response.stream.write(chunk)
+                    end
+                  end
+                  Rails.cache.write(cache_key, response_body)
+                end
+              end
+              retry_request = false
+            rescue Timeout::Error => e
+              # Testing timeout catching:
+              # https://github.com/shakacode/react_on_rails_pro/pull/136#issue-463421204
+              if available_retries.zero?
+                raise ReactOnRailsPro::Error, "Time out error when getting the response on: #{path}.\n" \
+                                              "Original error:\n#{e}\n#{e.backtrace}"
+              end
+              Rails.logger.info do
+                "[ReactOnRailsPro] Timed out trying to connect to the Node Renderer. " \
+                  "Retrying #{available_retries} more times..."
+              end
+              available_retries -= 1
+              next
+            rescue StandardError => e
+              raise ReactOnRailsPro::Error, "Can't connect to NodeRenderer renderer: #{path}.\n" \
                                             "Original error:\n#{e}\n#{e.backtrace}"
             end
-            Rails.logger.info do
-              "[ReactOnRailsPro] Timed out trying to connect to the Node Renderer. " \
-                "Retrying #{available_retries} more times..."
-            end
-            available_retries -= 1
-            next
-          rescue StandardError => e
-            raise ReactOnRailsPro::Error, "Can't connect to NodeRenderer renderer: #{path}.\n" \
-                                          "Original error:\n#{e}\n#{e.backtrace}"
           end
         end
 
         Rails.logger.info { "[ReactOnRailsPro] Node Renderer responded" }
 
-        case response.code
+        case response_code
         when "412"
           # 412 is a protocol error, meaning the server and renderer are running incompatible versions
           # of React on Rails.
-          raise ReactOnRailsPro::Error, response.body
+          raise ReactOnRailsPro::Error, response_body
         else
-          response
+          OpenStruct.new(code: response_code, body: response_body)
         end
       end
+      # rubocop:enable Metrics/AbcSize
 
       def form_with_code(js_code, send_bundle)
         form = common_form_data

lib/react_on_rails_pro/server_rendering_js_code.rb

@@ -26,6 +26,26 @@ def render(props_string, rails_context, redux_stores, react_component_name, rend
         })()
         JS
       end
+
+      # TODO: async?
+      def render_rsc(props_string, redux_stores, react_component_name, render_options)
+        <<-JS
+        (function() {
+        #{ssr_pre_hook_js}
+        #{redux_stores}
+          var props = #{props_string};
+          return ReactOnRailsPro.renderReactServerComponent({
+            name: '#{react_component_name}',
+            domNodeId: '#{render_options.dom_id}',
+            props: props,
+            trace: #{render_options.trace},
+            throwJsErrors: #{ReactOnRailsPro.configuration.throw_js_errors},
+            renderingReturnsPromises: #{ReactOnRailsPro.configuration.rendering_returns_promises},
+            expressRes: expressRes
+          });
+        })()
+        JS
+      end
     end
   end
 end

lib/react_on_rails_pro/server_rendering_pool/node_rendering_pool.rb

@@ -41,21 +41,21 @@ def exec_server_render_js(js_code, render_options)
             .exec_server_render_js(js_code, render_options, self)
         end
 
-        def eval_js(js_code, render_options, send_bundle: false)
+        def eval_js(js_code, render_options, send_bundle = false, live_response = nil)
           # In case this method is called with simple, raw JS, not depending on the bundle, next line
           # is needed.
           @bundle_hash ||= ReactOnRailsPro::Utils.bundle_hash
 
           path = "/bundles/#{@bundle_hash}"
 
-          response = ReactOnRailsPro::Request.render_code(path, js_code, send_bundle)
+          response = ReactOnRailsPro::Request.render_code(path, js_code, send_bundle, live_response)
 
           case response.code
           when "200"
             response.body
           when "410"
             # 410 is a special value meaning send the updated bundle with the next request.
-            eval_js(js_code, render_options, send_bundle: true)
+            eval_js(js_code, render_options, true, live_response)
           when "400"
             raise ReactOnRailsPro::Error,
                   "Renderer unhandled error at the VM level: #{response.code}:\n#{response.body}"

packages/node-renderer/src/worker.js

@@ -131,8 +131,12 @@ module.exports = function run(config) {
                 bundleTimestamp,
                 providedNewBundle,
                 assetsToCopy,
+                res,
               });
-              setResponse(result, res);
+              // Check if response is already sent
+              if (!res.headersSent) {
+                setResponse(result, res);
+              }
             } catch (err) {
               const exceptionMessage = formatExceptionMessage(
                 renderingRequest,
@@ -149,7 +153,7 @@ module.exports = function run(config) {
             }
           },
           'handleRenderRequest',
-          'SSR Request',
+          'Server Render Request',
         );
       } catch (theErr) {
         const exceptionMessage = formatExceptionMessage(renderingRequest, theErr);

packages/node-renderer/src/worker/handleRenderRequest.js

@@ -27,9 +27,9 @@ const { buildVM, getVmBundleFilePath, runInVM } = require('./vm');
  * @param renderingRequest
  * @returns {Promise<*>}
  */
-async function prepareResult(renderingRequest) {
+async function prepareResult(renderingRequest, res) {
   try {
-    const result = await runInVM(renderingRequest, cluster);
+    const result = await runInVM(renderingRequest, cluster, res);
 
     let exceptionMessage = null;
     if (!result) {
@@ -72,6 +72,7 @@ async function handleNewBundleProvided(
   providedNewBundle,
   renderingRequest,
   assetsToCopy,
+  res,
 ) {
   log.info('Worker received new bundle: %s', bundleFilePathPerTimestamp);
 
@@ -122,7 +123,7 @@ to ${bundleFilePathPerTimestamp})`,
       // file must be fully written
       log.info('buildVM, bundleFilePathPerTimestamp', bundleFilePathPerTimestamp);
       await buildVM(bundleFilePathPerTimestamp);
-      return prepareResult(renderingRequest);
+      return prepareResult(renderingRequest, res);
     } catch (error) {
       const msg = formatExceptionMessage(
         renderingRequest,
@@ -158,13 +159,14 @@ module.exports = async function handleRenderRequest({
   bundleTimestamp,
   providedNewBundle,
   assetsToCopy,
+  res,
 }) {
   try {
     const bundleFilePathPerTimestamp = getRequestBundleFilePath(bundleTimestamp);
 
     // If current vm is correct and ready
     if (getVmBundleFilePath() === bundleFilePathPerTimestamp) {
-      return prepareResult(renderingRequest);
+      return prepareResult(renderingRequest, res);
     }
 
     // If gem has posted updated bundle:
@@ -174,6 +176,7 @@ module.exports = async function handleRenderRequest({
         providedNewBundle,
         renderingRequest,
         assetsToCopy,
+        res,
       );
     }
 
@@ -201,7 +204,7 @@ module.exports = async function handleRenderRequest({
     // have written it or it was saved during deployment.
     await buildVM(bundleFilePathPerTimestamp);
 
-    return prepareResult(renderingRequest);
+    return prepareResult(renderingRequest, res);
   } catch (error) {
     const msg = formatExceptionMessage(
       renderingRequest,

packages/node-renderer/src/worker/vm.js

@@ -67,7 +67,7 @@ exports.buildVM = async function buildVM(filePath) {
     const { supportModules, includeTimerPolyfills } = getConfig();
     vmBundleFilePath = undefined;
     if (supportModules) {
-      context = vm.createContext({ Buffer, process, setTimeout, setInterval, clearTimeout, clearInterval });
+      context = vm.createContext({ Buffer, process, setTimeout, setInterval, setImmediate, clearTimeout, clearInterval, clearImmediate });
     } else {
       context = vm.createContext();
     }
@@ -111,8 +111,10 @@ exports.buildVM = async function buildVM(filePath) {
       // Define timer polyfills:
       vm.runInContext(`function setInterval() {}`, context);
       vm.runInContext(`function setTimeout() {}`, context);
+      vm.runInContext(`function setImmediate() {}`, context);
       vm.runInContext(`function clearTimeout() {}`, context);
       vm.runInContext(`function clearInterval() {}`, context);
+      vm.runInContext(`function clearImmediate() {}`, context);
     }
 
     // Run bundle code in created context:
@@ -164,7 +166,7 @@ exports.buildVM = async function buildVM(filePath) {
  * @param vmCluster
  * @returns {{exceptionMessage: string}}
  */
-exports.runInVM = async function runInVM(renderingRequest, vmCluster) {
+exports.runInVM = async function runInVM(renderingRequest, vmCluster, res) {
   const { bundlePath } = getConfig();
 
   try {
@@ -179,6 +181,7 @@ ${smartTrim(renderingRequest)}`);
 
     vm.runInContext('console.history = []', context);
 
+    context.expressRes = res;
     let result = vm.runInContext(renderingRequest, context);
     if (typeof result !== 'string') {
       const objectResult = await result;

packages/react-on-rails-pro/.eslintignore

@@ -0,0 +1,11 @@
+node_modules
+lib/
+webpack.config.js
+**/node_modules/**
+**/assets/webpack/**
+**/public/webpack/**
+**/generated/**
+**/app/assets/javascripts/application.js
+**/cable.js
+**/public/packs*/*
+bundle/