react-rails 1.11.0 → 2.0.0

data/lib/generators/react/install_generator.rb

@@ -11,13 +11,70 @@ module React
         default: false,
         desc: 'Skip Git keeps'
 
+      class_option :skip_server_rendering,
+        type: :boolean,
+        default: false,
+        desc: "Don't generate server_rendering.js or config/initializers/react_server_rendering.rb"
+
+      # Make an empty `components/` directory in the right place:
       def create_directory
-        empty_directory 'app/assets/javascripts/components'
-        create_file 'app/assets/javascripts/components/.gitkeep' unless options[:skip_git]
+        components_dir = if webpacker?
+          Pathname.new(javascript_dir).parent.to_s
+        else
+          javascript_dir
+        end
+        empty_directory File.join(components_dir, 'components')
+        if !options[:skip_git]
+          create_file File.join(components_dir, 'components/.gitkeep')
+        end
+      end
+
+      # Add requires, setup UJS
+      def setup_react
+        if webpacker?
+          setup_react_webpacker
+        else
+          setup_react_sprockets
+        end
       end
 
-      def inject_react
-        require_react = "//= require react\n"
+      def create_server_rendering
+        if options[:skip_server_rendering]
+          return
+        elsif webpacker?
+          ssr_manifest_path = File.join(javascript_dir, "server_rendering.js")
+          template("server_rendering_pack.js", ssr_manifest_path)
+        else
+          ssr_manifest_path = File.join(javascript_dir, "server_rendering.js")
+          template("server_rendering.js", ssr_manifest_path)
+          initializer_path = "config/initializers/react_server_rendering.rb"
+          template("react_server_rendering.rb", initializer_path)
+        end
+      end
+
+      private
+
+      def webpacker?
+        !!defined?(Webpacker)
+      end
+
+      def javascript_dir
+        if webpacker?
+          Webpacker::Configuration.source_path
+            .join(Webpacker::Configuration.entry_path)
+            .relative_path_from(::Rails.root)
+            .to_s
+        else
+          'app/assets/javascripts'
+        end
+      end
+
+      def manifest
+        Pathname.new(destination_root).join(javascript_dir, 'application.js')
+      end
+
+      def setup_react_sprockets
+        require_react = "//= require react\n//= require react_ujs\n//= require components\n"
 
         if manifest.exist?
           manifest_contents = File.read(manifest)
@@ -32,26 +89,27 @@ module React
         else
           create_file manifest, require_react
         end
-      end
 
-      def inject_components
-        inject_into_file manifest, "//= require components\n", {after: "//= require react\n"}
-      end
-
-      def inject_react_ujs
-        inject_into_file manifest, "//= require react_ujs\n", {after: "//= require react\n"}
-      end
-
-      def create_components
         components_js = "//= require_tree ./components\n"
-        components_file = File.join(*%w(app assets javascripts components.js))
+        components_file = File.join(javascript_dir, "components.js")
         create_file components_file, components_js
       end
 
-      private
+      WEBPACKER_SETUP_UJS = <<-JS
+// Support component names relative to this directory:
+var componentRequireContext = require.context("components", true)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(componentRequireContext)
+JS
 
-      def manifest
-        Pathname.new(destination_root).join('app/assets/javascripts', 'application.js')
+      def setup_react_webpacker
+        yarn_binstub = File.expand_path("./bin/yarn", ::Rails.root)
+        `#{yarn_binstub} add react_ujs`
+        if manifest.exist?
+          append_file(manifest, WEBPACKER_SETUP_UJS)
+        else
+          create_file(manifest, WEBPACKER_SETUP_UJS)
+        end
       end
     end
   end

data/lib/generators/templates/react_server_rendering.rb

@@ -0,0 +1,2 @@
+# To render React components in production, precompile the server rendering manifest:
+Rails.application.config.assets.precompile += ["server_rendering.js"]

data/lib/generators/templates/server_rendering.js

@@ -0,0 +1,6 @@
+//= require react-server
+//= require react_ujs
+//= require ./components
+//
+// By default, this file is loaded for server-side rendering.
+// It should require your components and any dependencies.

data/lib/generators/templates/server_rendering_pack.js

@@ -0,0 +1,5 @@
+// By default, this pack is loaded for server-side rendering.
+// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
+var componentRequireContext = require.context("components", true)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(componentRequireContext)

data/lib/react/jsx.rb

@@ -17,6 +17,8 @@ module React
     # - #transform(code) => new code
     self.transformer_class = DEFAULT_TRANSFORMER
 
+    # @param code [String] JSX code to transform into JavaScript
+    # @return [String] plain, browser-ready JavaScript code
     def self.transform(code)
       self.transformer ||= transformer_class.new(transform_options)
       self.transformer.transform(code)

data/lib/react/rails/component_mount.rb

@@ -11,12 +11,13 @@ module React
       attr_accessor :output_buffer
       mattr_accessor :camelize_props_switch
 
-      # ControllerLifecycle calls these hooks
+      # {ControllerLifecycle} calls these hooks
       # You can use them in custom helper implementations
-      def setup(env)
+      def setup(controller)
+        @controller = controller
       end
 
-      def teardown(env)
+      def teardown(controller)
       end
 
       # Render a UJS-type HTML tag annotated with data attributes, which
@@ -30,7 +31,7 @@ module React
 
         prerender_options = options[:prerender]
         if prerender_options
-          block = Proc.new{ concat React::ServerRendering.render(name, props, prerender_options) }
+          block = Proc.new{ concat(prerender_component(name, props, prerender_options)) }
         end
 
         html_options = options.reverse_merge(:data => {})
@@ -45,7 +46,24 @@ module React
         # remove internally used properties so they aren't rendered to DOM
         html_options.except!(:tag, :prerender, :camelize_props)
 
-        content_tag(html_tag, '', html_options, &block)
+        rendered_tag = content_tag(html_tag, '', html_options, &block)
+        if React::ServerRendering.renderer_options[:replay_console]
+          # Grab the server-rendered console replay script
+          # and move it _outside_ the container div
+          rendered_tag.sub!(/\n(<script class="react-rails-console-replay">.*<\/script>)<\/(\w+)>$/m,'</\2>\1')
+          rendered_tag.html_safe
+        else
+          rendered_tag
+        end
+      end
+
+      private
+
+      # If this controller has checked out a renderer, use that one.
+      # Otherwise, use {React::ServerRendering} directly (which will check one out for this rendering).
+      def prerender_component(component_name, props, prerender_options)
+        renderer = @controller.try(:react_rails_prerenderer) || React::ServerRendering
+        renderer.render(component_name, props, prerender_options)
       end
     end
   end

data/lib/react/rails/controller_lifecycle.rb

@@ -1,25 +1,53 @@
 module React
   module Rails
+    # This module is included into ActionController so that
+    # per-request hooks can be called in the view helper.
     module ControllerLifecycle
       extend ActiveSupport::Concern
 
       included do
         # use both names to support Rails 3..5
-        before_action_with_fallback = respond_to?(:before_action) ? :before_action : :before_filter
-        after_action_with_fallback = respond_to?(:after_action) ? :after_action : :after_filter
-        public_send(before_action_with_fallback, :setup_react_component_helper)
-        public_send(after_action_with_fallback, :teardown_react_component_helper)
+        around_action_with_fallback = respond_to?(:around_action) ? :around_action : :around_filter
+        public_send(around_action_with_fallback, :use_react_component_helper)
         attr_reader :__react_component_helper
       end
 
-      def setup_react_component_helper
+      module ClassMethods
+        # Call this in the controller to check out a prerender for the whole request.
+        # You can access the renderer with {#react_rails_prerenderer}.
+        def per_request_react_rails_prerenderer
+          around_action_with_fallback = respond_to?(:around_action) ? :around_action : :around_filter
+          public_send(around_action_with_fallback, :per_request_react_rails_prerenderer)
+        end
+      end
+
+      # Instantiate the ViewHelper implementation and call its #setup method
+      # then let the controller action run,
+      # then call the ViewHelper implementation's #teardown method
+      def use_react_component_helper
         new_helper = React::Rails::ViewHelper.helper_implementation_class.new
         new_helper.setup(self)
         @__react_component_helper = new_helper
+        yield
+        @__react_component_helper.teardown(self)
       end
 
-      def teardown_react_component_helper
-        @__react_component_helper.teardown(self)
+      # If you want a per-request renderer, add this method as an around-action
+      #
+      # (`.per_request_react_rails_prerenderer` does this for you)
+      # @example Having one renderer instance for each controller action
+      #   around_action :per_request_react_rails_prerenderer
+      def per_request_react_rails_prerenderer
+        React::ServerRendering.with_renderer do |renderer|
+          @__react_rails_prerenderer = renderer
+          yield
+        end
+      end
+
+
+      # An instance of a server renderer, for use during this request
+      def react_rails_prerenderer
+        @__react_rails_prerenderer
       end
     end
   end

data/lib/react/rails/railtie.rb

@@ -15,14 +15,27 @@ module React
       # Server rendering:
       config.react.server_renderer_pool_size  = 1   # increase if you're on JRuby
       config.react.server_renderer_timeout    = 20  # seconds
-      config.react.server_renderer            = nil # defaults to SprocketsRenderer
-      config.react.server_renderer_options    = {}  # SprocketsRenderer provides defaults
+      config.react.server_renderer            = nil # defaults to BundleRenderer
+      config.react.server_renderer_options    = {}  # BundleRenderer provides defaults
+      # Changing files with these extensions in these directories will cause the server renderer to reload:
+      config.react.server_renderer_directories = ["/app/assets/javascripts/", "app/javascript"]
+      config.react.server_renderer_extensions = ["jsx", "js"]
       # View helper implementation:
       config.react.view_helper_implementation = nil # Defaults to ComponentMount
 
       # Watch .jsx files for changes in dev, so we can reload the JS VMs with the new JS code.
       initializer "react_rails.add_watchable_files", group: :all do |app|
-        app.config.watchable_files.concat Dir["#{app.root}/app/assets/javascripts/**/*.jsx*"]
+        # Watch files ending in `server_renderer_extensions` in each of `server_renderer_directories`
+        reload_paths = config.react.server_renderer_directories.reduce({}) do |memo, dir|
+          app_dir = File.join(app.root, dir)
+          memo[app_dir] = config.react.server_renderer_extensions
+          memo
+        end
+
+        # Rails checks these objects for changes:
+        app.reloaders << app.config.file_watcher.new([], reload_paths)
+        # Reload renderers in dev when files change
+        config.to_prepare { React::ServerRendering.reset_pool }
       end
 
       # Include the react-rails view helper lazily
@@ -81,20 +94,13 @@ module React
 
       config.after_initialize do |app|
         # The class isn't accessible in the configure block, so assign it here if it wasn't overridden:
-        app.config.react.server_renderer ||= React::ServerRendering::SprocketsRenderer
+        app.config.react.server_renderer ||= React::ServerRendering::BundleRenderer
 
         React::ServerRendering.pool_size        = app.config.react.server_renderer_pool_size
         React::ServerRendering.pool_timeout     = app.config.react.server_renderer_timeout
         React::ServerRendering.renderer_options = app.config.react.server_renderer_options
         React::ServerRendering.renderer         = app.config.react.server_renderer
-
         React::ServerRendering.reset_pool
-        # Reload renderers in dev when files change
-        if Gem::Version.new(::Rails::VERSION::STRING) >= Gem::Version.new("5.x")
-          ActiveSupport::Reloader.to_prepare { React::ServerRendering.reset_pool }
-        else
-          ActionDispatch::Reloader.to_prepare { React::ServerRendering.reset_pool }
-        end
       end
 
       initializer "react_rails.setup_engine", :group => :all do |app|

data/lib/react/rails/version.rb

@@ -2,6 +2,6 @@ module React
   module Rails
     # If you change this, make sure to update VERSIONS.md
     # And the version hint in README.md, if needed
-    VERSION = "1.11.0"
+    VERSION = "2.0.0"
   end
 end

data/lib/react/server_rendering.rb

@@ -1,27 +1,39 @@
 require 'connection_pool'
 require 'react/server_rendering/exec_js_renderer'
-require 'react/server_rendering/sprockets_renderer'
+require 'react/server_rendering/bundle_renderer'
 
 module React
   module ServerRendering
     mattr_accessor :renderer, :renderer_options,
       :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 }
+      @@pool = ConnectionPool.new(options) { self.renderer.new(self.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|
         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
+      @@pool.with { |renderer| yield(renderer) }
     end
 
+    # Raised when something went wrong during server rendering.
     class PrerenderError < RuntimeError
       def initialize(component_name, props, js_message)
         message = ["Encountered error \"#{js_message.inspect}\" when prerendering #{component_name} with #{props}",

data/lib/react/server_rendering/{sprockets_renderer.rb → bundle_renderer.rb}

@@ -1,22 +1,24 @@
 require "react/server_rendering/environment_container"
 require "react/server_rendering/manifest_container"
+require "react/server_rendering/webpacker_manifest_container"
 require "react/server_rendering/yaml_manifest_container"
 
 module React
   module ServerRendering
     # Extends ExecJSRenderer for the Rails environment
-    # - builds JS code out of the asset pipeline
+    # - fetches JS code from the Rails app (webpacker or sprockets)
     # - stringifies props
     # - implements console replay
-    class SprocketsRenderer < ExecJSRenderer
+    class BundleRenderer < ExecJSRenderer
       # Reimplement console methods for replaying on the client
-      CONSOLE_POLYFILL = File.read(File.join(File.dirname(__FILE__), "sprockets_renderer/console_polyfill.js"))
-      CONSOLE_REPLAY   = File.read(File.join(File.dirname(__FILE__), "sprockets_renderer/console_replay.js"))
-      TIMEOUT_POLYFILL = File.read(File.join(File.dirname(__FILE__), "sprockets_renderer/timeout_polyfill.js"))
+      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, ["react-server.js", "components.js"])
+        filenames = options.fetch(:files, ["server_rendering.js"])
         js_code = CONSOLE_POLYFILL.dup
         js_code << TIMEOUT_POLYFILL.dup
         js_code << options.fetch(:code, '')
@@ -38,6 +40,10 @@ module React
         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
@@ -53,23 +59,11 @@ module React
       # default Rails setups.
       #
       # You can provide a custom asset container
-      # with `React::ServerRendering::SprocketsRenderer.asset_container_class = MyAssetContainer`.
+      # 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 ||= if self.class.asset_container_class.present?
-          self.class.asset_container_class.new
-        elsif assets_precompiled? && ManifestContainer.compatible?
-          ManifestContainer.new
-        elsif assets_precompiled? && YamlManifestContainer.compatible?
-          YamlManifestContainer.new
-        else
-          EnvironmentContainer.new
-        end
-      end
-
-      def assets_precompiled?
-        !::Rails.application.config.assets.compile
+        @asset_container ||= asset_container_class.new
       end
 
       private
@@ -97,6 +91,32 @@ module React
       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
+        if self.class.asset_container_class.present?
+          self.class.asset_container_class
+        elsif WebpackerManifestContainer.compatible?
+          WebpackerManifestContainer
+        elsif assets_precompiled?
+          if ManifestContainer.compatible?
+            ManifestContainer
+          elsif YamlManifestContainer.compatible?
+            YamlManifestContainer
+          else
+            # Even though they are precompiled, we can't find them :S
+            EnvironmentContainer
+          end
+        else
+          EnvironmentContainer
+        end
+      end
     end
   end
 end