fix(ServerRendering) improve webpacker + V8 server rendering

Author: rmosolgo

react_ujs/index.js

@@ -113,6 +113,6 @@ if (typeof window !== "undefined") {
 // but we really need it!
 // We need access to this object for server rendering, and
 // we can't do a dynamic `require`, so we'll grab it from here:
-this.ReactRailsUJS = ReactRailsUJS
+self.ReactRailsUJS = ReactRailsUJS
 
 module.exports = ReactRailsUJS

test/dummy/app/javascript/components/GreetingMessage.js

@@ -0,0 +1,23 @@
+var React = require("react")
+
+module.exports = React.createClass({
+  getInitialState: function() {
+    var initialGreeting = 'Hello';
+    if (typeof global !== "undefined" && global.ctx && global.ctx.greeting) {
+      initialGreeting = global.ctx.greeting
+    }
+
+    return {
+      greeting: initialGreeting
+    }
+  },
+  goodbye: function() {
+    this.setState({greeting: 'Goodbye'});
+  },
+  render: function() {
+    return React.DOM.div({},
+      React.DOM.div({}, this.state.greeting, ' ', this.props.name),
+      React.DOM.button({onClick: this.goodbye}, 'Goodbye')
+    );
+  }
+});

test/dummy/app/javascript/components/Todo.js

@@ -0,0 +1,6 @@
+var React = require("react")
+module.exports = React.createClass({
+  render: function() {
+    return React.createElement("li", null, this.props.todo)
+  }
+})

test/dummy/app/javascript/packs/server_rendering.js

@@ -1,5 +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")
+var ReactRailsUJS = require("../../../../../react_ujs/index")
 ReactRailsUJS.loadContext(componentRequireContext)

test/react/server_rendering/sprockets_renderer_test.rb

@@ -4,7 +4,12 @@
   class SprocketsRendererTest < ActiveSupport::TestCase
     CALLBACKS = [:before_render, :after_render]
 
+    webpacker_compiled = false
     setup do
+      if WebpackerHelpers.available? && !webpacker_compiled
+        WebpackerHelpers.compile
+        webpacker_compiled = true
+      end
       @renderer = React::ServerRendering::SprocketsRenderer.new({})
     end
 
@@ -62,8 +67,14 @@ class SprocketsRendererTest < ActiveSupport::TestCase
       err = assert_raises React::ServerRendering::PrerenderError do
         @renderer.render("NonExistentComponent", {}, nil)
       end
-      assert_match(/ReferenceError/, err.to_s)
-      assert_match(/NonExistentComponent/, err.to_s, "it names the component")
+
+      if WebpackerHelpers.available?
+        assert_includes err.message, "Cannot find module './NonExistentComponent'"
+      else
+        assert_match(/ReferenceError/, err.to_s)
+        assert_match(/NonExistentComponent/, err.to_s, "it names the component")
+      end
+
       assert_match(/\n/, err.to_s, "it includes the multi-line backtrace")
     end
 
@@ -86,35 +97,36 @@ class SprocketsRendererTest < ActiveSupport::TestCase
 
         assert_match(/drink more caffeine<\/span>/, additional_renderer.render("WithoutSprockets", {label: "drink more caffeine"}, nil))
       end
-    end
 
-    test '.new accepts any filenames' do
-      limited_renderer = React::ServerRendering::SprocketsRenderer.new(files: ["react-server.js", "react_ujs.js", "components/Todo.js"])
-      assert_match(/get a real job<\/li>/, limited_renderer.render("Todo", {todo: "get a real job"}, nil))
-      err = assert_raises React::ServerRendering::PrerenderError do
-        limited_renderer.render("TodoList", {todos: []}, nil)
+      # These use cases don't apply to Webpacker since the require.context comes from a pack:
+      test '.new accepts any filenames' do
+        limited_renderer = React::ServerRendering::SprocketsRenderer.new(files: ["react-server.js", "react_ujs.js", "components/Todo.js"])
+        assert_match(/get a real job<\/li>/, limited_renderer.render("Todo", {todo: "get a real job"}, nil))
+        err = assert_raises React::ServerRendering::PrerenderError do
+          limited_renderer.render("TodoList", {todos: []}, nil)
+        end
+        assert_match(/ReferenceError/, err.to_s, "it doesnt load other files")
       end
-      assert_match(/ReferenceError/, err.to_s, "it doesnt load other files")
-    end
 
-    test '#render returns html when config.assets.compile is false' do
-      begin
-        legacy_rendering_files = ["react-server.js", "react_ujs.js", "components.js"]
-        Rails.application.config.assets.precompile += legacy_rendering_files
+      test '#render returns html when config.assets.compile is false' do
+        begin
+          legacy_rendering_files = ["react-server.js", "react_ujs.js", "components.js"]
+          Rails.application.config.assets.precompile += legacy_rendering_files
 
-        precompile_assets
+          precompile_assets
 
-        Rails.application.config.assets.compile = false
+          Rails.application.config.assets.compile = false
 
-        @renderer = React::ServerRendering::SprocketsRenderer.new(files: legacy_rendering_files)
+          @renderer = React::ServerRendering::SprocketsRenderer.new(files: legacy_rendering_files)
 
-        result = @renderer.render("Todo", {todo: "write tests"}, nil)
-        assert_match(/<li.*write tests<\/li>/, result)
-        assert_match(/data-react-checksum/, result)
-      ensure
-        Rails.application.config.assets.compile = true
+          result = @renderer.render("Todo", {todo: "write tests"}, nil)
+          assert_match(/<li.*write tests<\/li>/, result)
+          assert_match(/data-react-checksum/, result)
+        ensure
+          Rails.application.config.assets.compile = true
 
-        clear_precompiled_assets
+          clear_precompiled_assets
+        end
       end
     end
   end