react-rails 1.9.0 → 3.2.1

data/lib/react/server_rendering/bundle_renderer/timeout_polyfill.js

@@ -0,0 +1,26 @@
+function getStackTrace() {
+  var stack;
+  try {
+    throw new Error('');
+  }
+  catch (error) {
+    stack = error.stack || '';
+  }
+  stack = stack.split('\\n').map(function (line) {
+    return line.trim();
+  });
+  return stack.splice(stack[0] == 'Error' ? 2 : 1);
+};
+
+function printError(functionName){
+  console.error(functionName + ' is not defined for execJS. See https://github.com/sstephenson/execjs#faq. Note babel-polyfill may call this.');
+  console.error(getStackTrace().join('\\n'));
+};
+
+function setTimeout() {
+  printError('setTimeout');
+};
+
+function clearTimeout() {
+  printError('clearTimeout');
+};

data/lib/react/server_rendering/bundle_renderer.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+require "react/server_rendering/environment_container"
+require "react/server_rendering/manifest_container"
+require "react/server_rendering/yaml_manifest_container"
+require "react/server_rendering/separate_server_bundle_container"
+
+module React
+  module ServerRendering
+    # Extends ExecJSRenderer for the Rails environment
+    # - fetches JS code from the Rails app (Shakapacker or Sprockets)
+    # - stringifies props
+    # - implements console replay
+    class BundleRenderer < ExecJSRenderer
+      # Reimplement console methods for replaying on the client
+      CONSOLE_POLYFILL = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_polyfill.js"))
+      CONSOLE_REPLAY   = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_replay.js"))
+      CONSOLE_RESET    = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_reset.js"))
+      TIMEOUT_POLYFILL = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/timeout_polyfill.js"))
+
+      def initialize(options = {})
+        @replay_console = options.fetch(:replay_console, true)
+        filenames = options.fetch(:files, ["server_rendering.js"])
+        js_code = CONSOLE_POLYFILL.dup
+        js_code << TIMEOUT_POLYFILL.dup
+        js_code << options.fetch(:code, "")
+
+        filenames.each do |filename|
+          js_code << asset_container.find_asset(filename)
+        end
+
+        super(options.merge(code: js_code))
+      end
+
+      # Prerender options are expected to be a Hash however might also be a symbol.
+      # pass prerender: :static to use renderToStaticMarkup
+      # pass prerender: true to enable default prerender
+      # pass prerender: {} to proxy some custom options
+      def render(component_name, props, prerender_options)
+        t_options = prepare_options(prerender_options)
+        t_props = prepare_props(props)
+        super(component_name, t_props, t_options)
+      end
+
+      def before_render(_component_name, _props, _prerender_options)
+        @replay_console ? CONSOLE_RESET : ""
+      end
+
+      def after_render(_component_name, _props, _prerender_options)
+        @replay_console ? CONSOLE_REPLAY : ""
+      end
+
+      class << self
+        attr_accessor :asset_container_class
+      end
+
+      # Get an object which exposes assets by their logical path.
+      #
+      # Out of the box, it supports a Sprockets::Environment (application.assets)
+      # and a Sprockets::Manifest (application.assets_manifest), which covers the
+      # default Rails setups.
+      #
+      # You can provide a custom asset container
+      # with `React::ServerRendering::BundleRenderer.asset_container_class = MyAssetContainer`.
+      #
+      # @return [#find_asset(logical_path)] An object that returns asset contents by logical path
+      def asset_container
+        @asset_container ||= asset_container_class.new
+      end
+
+      private
+
+      def prepare_options(options)
+        r_func = render_function(options)
+        opts = case options
+               when Hash then options
+               else
+                 {}
+               end
+        # This seems redundant to pass
+        opts.merge(render_function: r_func)
+      end
+
+      def render_function(opts)
+        if opts == :static
+          "renderToStaticMarkup"
+        else
+          "renderToString"
+        end
+      end
+
+      def prepare_props(props)
+        props.is_a?(String) ? props : props.to_json
+      end
+
+      def assets_precompiled?
+        !::Rails.application.config.assets.compile
+      end
+
+      # Detect what kind of asset system is in use and choose that container.
+      # Or, if the user has provided {.asset_container_class}, use that.
+      # @return [Class] suitable for {#asset_container}
+      def asset_container_class
+        return self.class.asset_container_class if self.class.asset_container_class.present?
+        return SeparateServerBundleContainer if SeparateServerBundleContainer.compatible?
+
+        return EnvironmentContainer unless assets_precompiled?
+
+        return ManifestContainer if ManifestContainer.compatible?
+        return YamlManifestContainer if YamlManifestContainer.compatible?
+
+        # Even though they are precompiled, we can't find them :S
+        EnvironmentContainer
+      end
+    end
+  end
+end

data/lib/react/server_rendering/environment_container.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module React
   module ServerRendering
     # Return asset contents by getting them from a Sprockets::Environment instance.

data/lib/react/server_rendering/exec_js_renderer.rb

@@ -1,41 +1,68 @@
+# frozen_string_literal: true
+
 module React
   module ServerRendering
     # A bare-bones renderer for React.js + Exec.js
-    # - Depends on global ReactDOMServer in the ExecJS context
+    # - Depends on global ReactRailsUJS in the ExecJS context
     # - No Rails dependency
     # - No browser concerns
     class ExecJSRenderer
-      def initialize(options={})
+      # @return [ExecJS::Runtime::Context] The JS context for this renderer
+      attr_reader :context
+
+      def initialize(options = {})
         js_code = options[:code] || raise("Pass `code:` option to instantiate a JS context!")
-        @context = ExecJS.compile(GLOBAL_WRAPPER + js_code)
+        full_code = GLOBAL_WRAPPER + js_code
+        # File.write("./test/dummy/tmp/latest_js_context.js", full_code)
+        @context = ExecJS.compile(full_code)
       end
 
       def render(component_name, props, prerender_options)
-        render_function = prerender_options.fetch(:render_function, "renderToString")
-        js_code = <<-JS
-          (function () {
-            #{before_render(component_name, props, prerender_options)}
-            var result = ReactDOMServer.#{render_function}(React.createElement(#{component_name}, #{props}));
-            #{after_render(component_name, props, prerender_options)}
-            return result;
-          })()
-        JS
-        @context.eval(js_code).html_safe
+        js_executed_before = before_render(component_name, props, prerender_options)
+        js_executed_after = after_render(component_name, props, prerender_options)
+        js_main_section = main_render(component_name, props, prerender_options)
+        render_from_parts(js_executed_before, js_main_section, js_executed_after)
       rescue ExecJS::ProgramError => err
         raise React::ServerRendering::PrerenderError.new(component_name, props, err)
       end
 
       # Hooks for inserting JS before/after rendering
-      def before_render(component_name, props, prerender_options); ""; end
-      def after_render(component_name, props, prerender_options); ""; end
+      def before_render(_component_name, _props, _prerender_options)
+        ""
+      end
+
+      def after_render(_component_name, _props, _prerender_options)
+        ""
+      end
 
       # Handle Node.js & other ExecJS contexts
       GLOBAL_WRAPPER = <<-JS
         var global = global || this;
         var self = self || this;
-        var window = window || this;
       JS
 
+      private
+
+      def render_from_parts(before, main, after)
+        js_code = compose_js(before, main, after)
+        @context.eval(js_code).html_safe
+      end
+
+      def main_render(component_name, props, prerender_options)
+        render_function = prerender_options.fetch(:render_function, "renderToString")
+        "this.ReactRailsUJS.serverRender('#{render_function}', '#{component_name}', #{props})"
+      end
+
+      def compose_js(before, main, after)
+        <<-JS
+          (function () {
+            #{before}
+            var result = #{main};
+            #{after}
+            return result;
+          })()
+        JS
+      end
     end
   end
 end

data/lib/react/server_rendering/manifest_container.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module React
   module ServerRendering
     # Get asset content by reading the compiled file from disk using a Sprockets::Manifest.
@@ -10,7 +12,9 @@ module React
       end
 
       def find_asset(logical_path)
-        asset_path = @manifest.assets[logical_path] || raise("No compiled asset for #{logical_path}, was it precompiled?")
+        asset_path = @manifest.assets[logical_path] || raise(
+          "No compiled asset for #{logical_path}, was it precompiled?"
+        )
         asset_full_path = ::Rails.root.join("public", @manifest.dir, asset_path)
         File.read(asset_full_path)
       end

data/lib/react/server_rendering/separate_server_bundle_container.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "open-uri"
+
+module React
+  module ServerRendering
+    # Get a compiled file from Shakapacker's output path
+    class SeparateServerBundleContainer
+      def self.compatible?
+        !!defined?(Shakapacker)
+      end
+
+      def find_asset(filename)
+        asset_path = Shakapacker.config.public_output_path.join(filename).to_s
+        File.read(asset_path)
+      end
+    end
+  end
+end

data/lib/react/server_rendering/yaml_manifest_container.rb

@@ -1,23 +1,31 @@
+# frozen_string_literal: true
+
 module React
   module ServerRendering
-    # Get asset content by reading the compiled file from disk using the generated maniftest.yml file
+    # Get asset content by reading the compiled file from disk using the generated manifest.yml file
     #
     # This is good for Rails production when assets are compiled to public/assets
     # but sometimes, they're compiled to other directories (or other servers)
     class YamlManifestContainer
       def initialize
-        @assets = YAML.load_file(::Rails.root.join("public", ::Rails.application.config.assets.prefix, "manifest.yml"))
+        @assets = YAML.load_file(public_asset_path("manifest.yml"))
       end
 
       def find_asset(logical_path)
         asset_path = @assets[logical_path] || raise("No compiled asset for #{logical_path}, was it precompiled?")
-        asset_full_path = ::Rails.root.join("public", ::Rails.application.config.assets.prefix, asset_path)
-        File.read(asset_full_path)
+        File.read(public_asset_path(asset_path))
       end
 
       def self.compatible?
         ::Rails::VERSION::MAJOR == 3
       end
+
+      private
+
+      def public_asset_path(asset_name)
+        asset_path = File.join("public", ::Rails.application.config.assets.prefix, asset_name)
+        ::Rails.root.join(asset_path)
+      end
     end
   end
 end

data/lib/react/server_rendering.rb

@@ -1,33 +1,47 @@
-require 'connection_pool'
-require 'react/server_rendering/exec_js_renderer'
-require 'react/server_rendering/sprockets_renderer'
+# frozen_string_literal: true
+
+require "connection_pool"
+require "react/server_rendering/exec_js_renderer"
+require "react/server_rendering/bundle_renderer"
 
 module React
   module ServerRendering
     mattr_accessor :renderer, :renderer_options,
-      :pool_size, :pool_timeout
+                   :pool_size, :pool_timeout
+
+    self.renderer_options = {}
 
+    # Discard the old ConnectionPool & create a new one.
+    # This will clear all state such as loaded code, JS VM state, or options.
+    # @return [void]
     def self.reset_pool
-      options = {size: pool_size, timeout: pool_timeout}
-      @@pool = ConnectionPool.new(options) { create_renderer }
+      options = { size: pool_size, timeout: pool_timeout }
+      @pool = ConnectionPool.new(options) { renderer.new(renderer_options) }
     end
 
+    # Check a renderer out of the pool and use it to render the component.
+    # @param component_name [String] Component identifier, looked up by UJS
+    # @param props [String, Hash] Props for this component
+    # @param prerender_options [Hash] Renderer-specific options
+    # @return [String] Prerendered HTML from `component_name`
     def self.render(component_name, props, prerender_options)
-      @@pool.with do |renderer|
+      @pool.with do |renderer|
         renderer.render(component_name, props, prerender_options)
       end
     end
 
-    def self.create_renderer
-      renderer.new(renderer_options)
+    # Yield a renderer for an arbitrary block
+    def self.with_renderer(&block)
+      @pool.with(&block)
     end
 
+    # Raised when something went wrong during server rendering.
     class PrerenderError < RuntimeError
       def initialize(component_name, props, js_message)
-        message = ["Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}",
-                    js_message.backtrace.join("\n")].join("\n")
+        message = ["Encountered error \"#{js_message.inspect}\" when prerendering #{component_name} with #{props}",
+                   js_message.backtrace.join("\n")].join("\n")
         super(message)
       end
     end
   end
-end
+end

data/lib/react-rails.rb

@@ -1,4 +1,12 @@
-require 'react'
-require 'react/jsx'
-require 'react/rails'
-require 'react/server_rendering'
+# frozen_string_literal: true
+
+require "react"
+require "react/jsx"
+require "react/rails"
+require "react/server_rendering"
+
+module React
+  module Rails
+    autoload :TestHelper, "react/rails/test_helper"
+  end
+end

data/lib/react.rb

@@ -1,19 +1,23 @@
+# frozen_string_literal: true
+
 module React
   # Recursively camelize `props`, returning a new Hash
   # @param props [Object] If it's a Hash or Array, it will be recursed. Otherwise it will be returned.
   # @return [Hash] a new hash whose keys are camelized strings
   def self.camelize_props(props)
-    case props
+    props_as_json = props.as_json
+
+    case props_as_json
     when Hash
-      props.each_with_object({}) do |(key, value), new_props|
+      props_as_json.each_with_object({}) do |(key, value), new_props|
         new_key = key.to_s.camelize(:lower)
         new_value = camelize_props(value)
         new_props[new_key] = new_value
       end
     when Array
-      props.map { |item| camelize_props(item) }
+      props_as_json.map { |item| camelize_props(item) }
     else
-      props
+      props_as_json
     end
   end
 end