Support singleton webpacker (3 and above)

.travis.yml

@@ -12,7 +12,8 @@ rvm:
 gemfile:
   # These have webpacker:
   - gemfiles/rails_4.2_sprockets_4.gemfile
-  - gemfiles/rails_5_no_sprockets_webpacker.gemfile
+  - gemfiles/rails_5_no_sprockets_webpacker_1.gemfile
+  - gemfiles/rails_5_no_sprockets_webpacker_3.gemfile
   # These don't have webpacker:
   - gemfiles/rails_3.2.gemfile
   - gemfiles/rails_4.0.5.gemfile

Appraisals

@@ -43,15 +43,22 @@ appraise "rails-4.2-sprockets_4" do
   gem 'rails', '~> 4.2.1'
   gem "sprockets", "~> 4.0.x"
   gem "turbolinks", "~> 2.5.0"
-  gem "webpacker", github: "rails/webpacker"
   # This ExecJS backend provides stateful context
   # which the default nodejs backend does not
   gem "mini_racer"
 end
 
-appraise "rails-5_no_sprockets_webpacker" do
+appraise "rails-5_no_sprockets_webpacker_1" do
   gem 'rails', '~> 5.0.0'
-  gem "webpacker", github: "rails/webpacker"
+  gem "webpacker", '~> 1.0'
+  # This ExecJS backend provides stateful context
+  # which the default nodejs backend does not
+  gem "therubyracer"
+end
+
+appraise "rails-5_no_sprockets_webpacker_3" do
+  gem 'rails', '~> 5.0.0'
+  gem 'webpacker', '>= 3.0 '
   # This ExecJS backend provides stateful context
   # which the default nodejs backend does not
   gem "therubyracer"
@@ -66,7 +73,7 @@ appraise "rails-5-no_sprockets" do
 end
 
 appraise "rails-5.1-sprockets_4" do
-  gem "rails", "5.1.0.rc1"
+  gem "rails", "~> 5.1"
   gem "sprockets", "~> 4.0.x"
   gem "turbolinks", "~> 5.0.0"
 end

gemfiles/rails_4.2_sprockets_4.gemfile

@@ -5,7 +5,6 @@ source "http://rubygems.org"
 gem "turbolinks", "~> 2.5.0"
 gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 4.0.x"
-gem "webpacker", :github => "rails/webpacker"
 gem "mini_racer"
 
 gemspec :path => "../"

gemfiles/rails_5.1_sprockets_4.gemfile

@@ -3,7 +3,7 @@
 source "http://rubygems.org"
 
 gem "turbolinks", "~> 5.0.0"
-gem "rails", "5.1.0.rc1"
+gem "rails", "~> 5.1"
 gem "sprockets", "~> 4.0.x"
 
 gemspec :path => "../"

gemfiles/rails_5_no_sprockets.gemfile

@@ -1,5 +1,4 @@
 # This file was generated by Appraisal
-# This shouldn't have turbolinks or sprockets
 
 source "http://rubygems.org"
 

gemfiles/rails_5_no_sprockets_webpacker.gemfile → gemfiles/rails_5_no_sprockets_webpacker_1.gemfile

@@ -1,10 +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 "webpacker", :github => "rails/webpacker"
+gem "webpacker", "~> 1.0"
 gem "therubyracer"
 
 gemspec :path => "../"

gemfiles/rails_5_no_sprockets_webpacker_3.gemfile

@@ -0,0 +1,9 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+
+gem "rails", "~> 5.0.0"
+gem "webpacker", ">= 3.0 "
+gem "therubyracer"
+
+gemspec :path => "../"

lib/generators/react/component_generator.rb

@@ -103,7 +103,7 @@ def create_component_file
         if webpacker?
           new_file_name = file_name.camelize
           extension = options[:coffee] ? "coffee" : "js"
-          target_dir = Webpacker::Configuration.source_path
+          target_dir = webpack_configuration.source_path
             .join("components")
             .relative_path_from(::Rails.root)
             .to_s
@@ -119,6 +119,10 @@ def create_component_file
 
       private
 
+      def webpack_configuration
+        Webpacker.respond_to?(:config) ? Webpacker.config : Webpacker::Configuration
+      end
+
       def component_name
         file_name.camelize
       end

lib/generators/react/install_generator.rb

@@ -60,8 +60,7 @@ def webpacker?
 
       def javascript_dir
         if webpacker?
-          Webpacker::Configuration.source_path
-            .join(Webpacker::Configuration.entry_path)
+          webpack_source_path
             .relative_path_from(::Rails.root)
             .to_s
         else
@@ -110,6 +109,16 @@ def setup_react_webpacker
           create_file(manifest, WEBPACKER_SETUP_UJS)
         end
       end
+
+      private
+
+      def webpack_source_path
+        if Webpacker.respond_to?(:config)
+          Webpacker.config.source_entry_path # Webpacker >3
+        else
+          Webpacker::Configuration.source_path.join(Webpacker::Configuration.entry_path) # Webpacker <3
+        end
+      end
     end
   end
 end

lib/react/server_rendering/webpacker_manifest_container.rb

@@ -12,7 +12,7 @@ class WebpackerManifestContainer
 
       def find_asset(logical_path)
         # raises if not found
-        asset_path = Webpacker::Manifest.lookup(logical_path).to_s
+        asset_path = manifest.lookup(logical_path).to_s
         if asset_path.start_with?("http")
           # Get a file from the webpack-dev-server
           dev_server_asset = open(asset_path).read
@@ -21,11 +21,23 @@ def find_asset(logical_path)
           dev_server_asset
         else
           # Read the already-compiled pack:
-          full_path = Webpacker::Manifest.lookup_path(logical_path).to_s
+          full_path = file_path(logical_path).to_s
           File.read(full_path)
         end
       end
 
+      def manifest
+        Webpacker.respond_to?(:manifest) ? Webpacker.manifest : Webpacker::Manifest
+      end
+
+      def file_path path
+        manifest.respond_to?(:lookup_path) ? manifest.lookup_path(path) : File.join(config.output_path, manifest.lookup(path).split('/')[2..-1])
+      end
+
+      def config
+        !!defined?(Webpacker::Configuration) ? Webpacker::Configuration : Webpacker.config
+      end
+
       def self.compatible?
         !!defined?(Webpacker)
       end

test/dummy/config/webpack/development.js

@@ -1,16 +1,20 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+try {
+  const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
+  module.exports = environment.toWebpackConfig()
+} catch (e) {
+  const merge = require('webpack-merge')
+  const sharedConfig = require('./shared.js')
 
-module.exports = merge(sharedConfig, {
-  devtool: 'sourcemap',
+  module.exports = merge(sharedConfig, {
+    devtool: 'sourcemap',
 
-  stats: {
-    errorDetails: true
-  },
+    stats: {
+      errorDetails: true
+    },
 
-  output: {
-    pathinfo: true
-  }
-})
+    output: {
+      pathinfo: true
+    }
+  })
+}

test/dummy/config/webpack/environment.js

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment

test/dummy/config/webpack/paths.yml

@@ -27,7 +27,6 @@ development:
 
 test:
   <<: *default
-  manifest: manifest-test.json
 
 production:
   <<: *default

test/dummy/config/webpack/production.js

@@ -1,21 +1,20 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+try {
+  const environment = require('./environment')
 
-/* eslint global-require: 0 */
+  module.exports = environment.toWebpackConfig()
+} catch (e) {
+  const merge = require('webpack-merge')
+  const sharedConfig = require('./shared.js')
 
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const CompressionPlugin = require('compression-webpack-plugin')
-const sharedConfig = require('./shared.js')
+  module.exports = merge(sharedConfig, {
+    devtool: 'sourcemap',
 
-module.exports = merge(sharedConfig, {
-  output: { filename: '[name]-[chunkhash].js' },
+    stats: {
+      errorDetails: true
+    },
 
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin(),
-    new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
-    })
-  ]
-})
+    output: {
+      pathinfo: true
+    }
+  })
+}

test/dummy/config/webpack/test.js

@@ -1,6 +1,20 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+try {
+  const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
+  module.exports = environment.toWebpackConfig()
+} catch (e) {
+  const merge = require('webpack-merge')
+  const sharedConfig = require('./shared.js')
 
-module.exports = merge(sharedConfig, {})
+  module.exports = merge(sharedConfig, {
+    devtool: 'sourcemap',
+
+    stats: {
+      errorDetails: true
+    },
+
+    output: {
+      pathinfo: true
+    }
+  })
+}

test/dummy/config/webpacker.yml

@@ -0,0 +1,56 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default                 # ~ = Rails.root
+  source_path: app/javascript     # ~/:source
+  source_entry_path: packs        # ~/:source/:entry
+  public_output_path: packs       # ~/public/:output
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  extensions:
+    - .coffee
+    - .erb
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  dev_server:
+    host: localhost
+    port: 3035
+    hmr: false
+    https: false
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production demands on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

test/react/server_rendering/webpacker_manifest_container_test.rb

@@ -1,13 +1,14 @@
 require "test_helper"
 require "open-uri"
+require 'pry'
 
 WebpackerHelpers.when_webpacker_available do
   class WebpackerManifestContainerTest < ActiveSupport::TestCase
     setup do
       WebpackerHelpers.clear_webpacker_packs
     end
 
-    test "it loads JS from the webpacker container" do
+    def test_it_loads_JS_from_the_webpacker_container
       WebpackerHelpers.compile
       container = React::ServerRendering::WebpackerManifestContainer.new
       js_file = container.find_asset("application.js")

test/server_rendered_html_test.rb

@@ -61,15 +61,15 @@ def wait_to_ensure_asset_pipeline_detects_changes
 
         if WebpackerHelpers.available?
           new_file_path = '../dummy/app/javascript/components/NewList.js'
-          new_file_contents = <<-JS
-          var React = require("react")
-          module.exports = function() { return <span>"New List"</span> }
-          JS
+          new_file_contents = <<-HEREDOC
+var React = require("react")
+module.exports = function() { return <span>"New List"</span> }
+HEREDOC
         else
           new_file_path = '../dummy/app/assets/javascripts/components/ZZ_NewComponent.js.jsx'
-          new_file_contents = <<-JS
-          var NewList = function() { return <span>"New List"</span> }
-          JS
+          new_file_contents = <<-HEREDOC
+var NewList = function() { return <span>"New List"</span> }
+HEREDOC
         end
 
         new_file_path = File.expand_path(new_file_path, __FILE__)