Merge pull request #686 from reactjs/webpacker-without-sprockets

Webpacker without sprockets

Author: rmosolgo

.travis.yml

@@ -17,7 +17,7 @@ gemfile:
   - gemfiles/rails_4.2_sprockets_2.gemfile
   - gemfiles/rails_4.2_sprockets_3.gemfile
   - gemfiles/rails_4.2_sprockets_4.gemfile
-  - gemfiles/rails_5.gemfile
+  - gemfiles/rails_5_no_sprockets_webpacker.gemfile
   - gemfiles/rails_5_no_sprockets.gemfile
   - gemfiles/rails_5_sprockets_4.gemfile
 
@@ -37,7 +37,7 @@ matrix:
     - rvm: 2.1
       gemfile: gemfiles/rails_4.2_sprockets_4.gemfile
     - rvm: 2.1
-      gemfile: gemfiles/rails_5.gemfile
+      gemfile: gemfiles/rails_5_no_sprockets_webpacker.gemfile
     - rvm: 2.1
       gemfile: gemfiles/rails_5_no_sprockets.gemfile
     - rvm: 2.1
@@ -51,7 +51,7 @@ matrix:
     - rvm: jruby-9.0.1.0
       gemfile: gemfiles/rails_4.2_sprockets_2.gemfile
     - rvm: jruby-9.0.1.0
-      gemfile: gemfiles/rails_5_mini_racer.gemfile
+      gemfile: gemfiles/rails_5_no_sprockets_webpacker.gemfile
 
   allow_failures:
     - rvm: jruby-9.0.1.0

Appraisals

@@ -49,9 +49,8 @@ appraise "rails-4.2-sprockets_4" do
   gem "mini_racer"
 end
 
-appraise "rails-5" do
+appraise "rails-5_no_sprockets_webpacker" do
   gem 'rails', '~> 5.0.0'
-  gem "turbolinks", "~> 5.0.0"
   gem "webpacker", github: "rails/webpacker"
   # This ExecJS backend provides stateful context
   # which the default nodejs backend does not

README.md

@@ -288,7 +288,7 @@ MyApp::Application.configure do
   # Settings for the pool of renderers:
   config.react.server_renderer_pool_size  ||= 1  # ExecJS doesn't allow more than one on MRI
   config.react.server_renderer_timeout    ||= 20 # seconds
-  config.react.server_renderer = React::ServerRendering::SprocketsRenderer
+  config.react.server_renderer = React::ServerRendering::BundleRenderer
   config.react.server_renderer_options = {
     files: ["server_rendering.js"],       # files to load for prerendering
     replay_console: true,                 # if true, console.* will be replayed client-side
@@ -306,14 +306,14 @@ end
 - `#initialize(options={})`, which accepts the hash from `config.react.server_renderer_options`
 - `#render(component_name, props, prerender_options)` to return a string of HTML
 
-`react-rails` provides two renderer classes: `React::ServerRendering::ExecJSRenderer` and `React::ServerRendering::SprocketsRenderer`.
+`react-rails` provides two renderer classes: `React::ServerRendering::ExecJSRenderer` and `React::ServerRendering::BundleRenderer`.
 
 `ExecJSRenderer` offers two other points for extension:
 
 - `#before_render(component_name, props, prerender_options)` to return a string of JavaScript to execute _before_ calling `React.render`
 - `#after_render(component_name, props, prerender_options)` to return a string of JavaScript to execute _after_ calling `React.render`
 
-Any subclass of `ExecJSRenderer` may use those hooks (for example, `SprocketsRenderer` uses them to handle `console.*` on the server).
+Any subclass of `ExecJSRenderer` may use those hooks (for example, `BundleRenderer` uses them to handle `console.*` on the server).
 
 ## Controller Actions
 

gemfiles/rails_3.2.gemfile

@@ -2,8 +2,8 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks", "~> 2.0"
 gem "rails", "~> 3.2.21"
 gem "rack-cache", "~> 1.6.1"
-gem "turbolinks", "~> 2.0"
 
 gemspec :path => "../"

gemfiles/rails_4.0.5.gemfile

@@ -2,7 +2,7 @@
 
 source "http://rubygems.org"
 
-gem "rails", "4.0.5"
 gem "turbolinks"
+gem "rails", "4.0.5"
 
 gemspec :path => "../"

gemfiles/rails_4.0_with_therubyracer.gemfile

@@ -2,8 +2,8 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks"
 gem "rails", "~> 4.0.13"
 gem "therubyracer", "0.12.0", :platform => :mri
-gem "turbolinks"
 
 gemspec :path => "../"

gemfiles/rails_4.1.gemfile

@@ -2,7 +2,7 @@
 
 source "http://rubygems.org"
 
-gem "rails", "~> 4.1.10"
 gem "turbolinks", "~> 2.3.0"
+gem "rails", "~> 4.1.10"
 
 gemspec :path => "../"

gemfiles/rails_4.2_sprockets_2.gemfile

@@ -2,8 +2,8 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks"
 gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 2.12"
-gem "turbolinks"
 
 gemspec :path => "../"

gemfiles/rails_4.2_sprockets_3.gemfile

@@ -2,8 +2,8 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks", "~> 2.5.0"
 gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 3.5"
-gem "turbolinks", "~> 2.5.0"
 
 gemspec :path => "../"

gemfiles/rails_4.2_sprockets_4.gemfile

@@ -2,9 +2,9 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks", "~> 2.5.0"
 gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 4.0.x"
-gem "turbolinks", "~> 2.5.0"
 gem "webpacker", :github => "rails/webpacker"
 gem "mini_racer"
 

gemfiles/rails_5.gemfile renamed to gemfiles/rails_5_no_sprockets_webpacker.gemfile

@@ -1,9 +1,9 @@
 # This file was generated by Appraisal
+# This file shouldn't have turbolinks or sprockets in it
 
 source "http://rubygems.org"
 
 gem "rails", "~> 5.0.0"
-gem "turbolinks", "~> 5.0.0"
 gem "webpacker", :github => "rails/webpacker"
 gem "therubyracer"
 

gemfiles/rails_5_sprockets_4.gemfile

@@ -2,8 +2,8 @@
 
 source "http://rubygems.org"
 
+gem "turbolinks", "~> 5.0.0"
 gem "rails", "~> 5.0.0"
 gem "sprockets", "~> 4.0.x"
-gem "turbolinks", "~> 5.0.0"
 
 gemspec :path => "../"

lib/react/rails/railtie.rb

@@ -15,8 +15,8 @@ class Railtie < ::Rails::Railtie
       # 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/"]
       config.react.server_renderer_extensions = ["jsx"]
@@ -96,7 +96,7 @@ class Railtie < ::Rails::Railtie
 
       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

lib/react/server_rendering.rb

@@ -1,6 +1,6 @@
 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

lib/react/server_rendering/sprockets_renderer.rb renamed to lib/react/server_rendering/bundle_renderer.rb

@@ -6,14 +6,14 @@
 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"))
+      TIMEOUT_POLYFILL = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/timeout_polyfill.js"))
 
       def initialize(options={})
         @replay_console = options.fetch(:replay_console, true)
@@ -54,7 +54,7 @@ class << self
       # 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

lib/react/server_rendering/sprockets_renderer/console_polyfill.js renamed to lib/react/server_rendering/bundle_renderer/console_polyfill.js

@@ -28,7 +28,7 @@ module.exports = function(ujs) {
     } else {
       turbolinksClassicDeprecatedEvents.setup(ujs);
     }
-  } else if ($ && typeof $.pjax === 'function') {
+  } else if (typeof $ !== "undefined" && typeof $.pjax === 'function') {
     pjaxEvents.setup(ujs);
   } else {
     nativeEvents.setup(ujs);

lib/react/server_rendering/sprockets_renderer/console_replay.js renamed to lib/react/server_rendering/bundle_renderer/console_replay.js

@@ -1,5 +1,5 @@
 class PagesController < ApplicationController
-  if !SKIP_SPROCKETS
+  if WebpackerHelpers.available? || SprocketsHelpers.available?
     per_request_react_rails_prerenderer
   end
 

lib/react/server_rendering/sprockets_renderer/timeout_polyfill.js renamed to lib/react/server_rendering/bundle_renderer/timeout_polyfill.js

@@ -1,3 +1,5 @@
+var React = require("react")
+
 module.exports = {
   Component: function(props) { return <h2>Named Export</h2> }
 }

react_ujs/src/events/detect.js

@@ -1,3 +1,5 @@
+var React = require("react")
+
 module.exports = function(props) {
   return <h2>Exports</h2>
 }

test/dummy/app/controllers/pages_controller.rb

@@ -2,8 +2,9 @@
 <html>
 <head>
   <title>Dummy</title>
-  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
-  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
+  <% if SprocketsHelpers.available? %>
+    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
+  <% end %>
   <%= csrf_meta_tags %>
 </head>
 <body>

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

@@ -6,8 +6,7 @@
 require "action_mailer/railtie"
 
 # Test no-sprockets environment by testing the gemfile name
-SKIP_SPROCKETS = ENV["BUNDLE_GEMFILE"] =~ /no_sprockets/
-if !SKIP_SPROCKETS
+if SprocketsHelpers.available?
   require "sprockets/railtie"
 end
 
@@ -33,7 +32,7 @@ class Application < Rails::Application
     # config.i18n.default_locale = :de
     config.react.variant = :production
     config.react.addons = false
-    if !SKIP_SPROCKETS
+    if SprocketsHelpers.available?
       config.assets.enabled = true
     end
   end

test/dummy/app/javascript/components/subfolder/exports_component.js

@@ -9,7 +9,7 @@
   # we need this to reload the jsx transformer when different version is dropped in
   config.cache_classes = false
   config.reload_plugins = true
-  if !SKIP_SPROCKETS
+  if SprocketsHelpers.available?
     config.assets.cache_store = :null_store
   end
 

test/dummy/app/views/layouts/application.html.erb

@@ -1,13 +1,13 @@
 require 'test_helper'
 
-when_sprockets_available do
+SprocketsHelpers.when_available do
   class JSXPreprocessorTest < ActiveSupport::TestCase
     REQUIRED_JAVASCRIPT = "var requirePlainJavascript = true;"
     REQUIRED_COFFEESCRIPT =  "var requireCoffee; requireCoffee = true;"
     REQUIRED_JSX = "React.createElement(\"div\", { className: \"require-jsx\" });"
     OWN_JSX = "React.createElement(\"div\", { className: \"le-javascript\" });"
     test 'executes //= require directives' do
-      require_parent = fetch_asset_body("require_test/jsx_preprocessor_test.js")
+      require_parent = SprocketsHelpers.fetch_asset_body("require_test/jsx_preprocessor_test.js")
 
       assert_compiled_javascript_includes(require_parent, REQUIRED_JAVASCRIPT)
       assert_compiled_javascript_includes(require_parent, REQUIRED_COFFEESCRIPT)

test/dummy/config/application.rb

@@ -1,24 +1,24 @@
 require 'test_helper'
 
-when_sprockets_available do
+SprocketsHelpers.when_available do
   class JSXTransformerTest < ActionDispatch::IntegrationTest
     setup do
       reset_transformer
       React::JSX.transformer_class = React::JSX::JSXTransformer
-      manually_expire_asset('JSXTransformer.js')
+      SprocketsHelpers.manually_expire_asset('JSXTransformer.js')
     end
 
     teardown do
       reset_transformer
-      manually_expire_asset('JSXTransformer.js')
+      SprocketsHelpers.manually_expire_asset('JSXTransformer.js')
     end
 
     test 'can use dropped-in version of JSX transformer' do
       hidden_path =     Rails.root.join("vendor/assets/react/JSXTransformer__.js")
       replacing_path =  Rails.root.join("vendor/assets/react/JSXTransformer.js")
 
       FileUtils.cp hidden_path, replacing_path
-      manually_expire_asset('example3.js')
+      SprocketsHelpers.manually_expire_asset('example3.js')
 
       get '/assets/example3.js'
       FileUtils.rm replacing_path
@@ -53,7 +53,7 @@ class JSXTransformerTest < ActionDispatch::IntegrationTest
 
       FileUtils.mkdir_p(custom_path)
       FileUtils.cp(hidden_path, replacing_path)
-      manually_expire_asset('example3.js')
+      SprocketsHelpers.manually_expire_asset('example3.js')
       get '/assets/example3.js'
 
       FileUtils.rm_rf custom_path

test/dummy/config/environments/test.rb

@@ -26,7 +26,7 @@ def transform(code)
   end
 end
 
-when_sprockets_available do
+SprocketsHelpers.when_available do
   class JSXTransformTest < ActionDispatch::IntegrationTest
     setup do
       reset_transformer
@@ -37,30 +37,30 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
     end
 
     test 'asset pipeline should transform JSX' do
-      manually_expire_asset('example.js')
+      SprocketsHelpers.manually_expire_asset('example.js')
       get '/assets/example.js'
       assert_response :success
       assert_compiled_javascript_matches(EXPECTED_JS, @response.body)
     end
 
     test 'asset pipeline should transform JSX + Coffeescript' do
-      manually_expire_asset('example2.js')
+      SprocketsHelpers.manually_expire_asset('example2.js')
       get '/assets/example2.js'
       assert_response :success
       assert_compiled_javascript_matches(EXPECTED_JS_2, @response.body)
     end
 
     test 'use a custom transformer' do
       React::JSX.transformer_class = NullTransformer
-      manually_expire_asset('example2.js')
+      SprocketsHelpers.manually_expire_asset('example2.js')
       get '/assets/example2.js'
 
       assert_equal "TRANSFORMED CODE!;\n", @response.body
     end
 
     def test_babel_transformer_accepts_babel_transformation_options
       React::JSX.transform_options = {blacklist: ['spec.functionName', 'validation.react', "strict"]}
-      manually_expire_asset('example.js')
+      SprocketsHelpers.manually_expire_asset('example.js')
       get '/assets/example.js'
       assert_response :success