Support React on Rails by merging Webpacker Lite

README.md

@@ -271,7 +271,7 @@ foreman start
 ```
 
 By default, `webpack-dev-server` listens on `0.0.0.0` that means listening
-on all IP addresses available on your system: LAN IP address, localhost, 127.0.0.1 etc. 
+on all IP addresses available on your system: LAN IP address, localhost, 127.0.0.1 etc.
 However, we use `localhost` as default hostname for serving assets in browser
 and if you want to change that, for example on cloud9 you can do so
 by changing host set in `config/webpacker.yml`.
@@ -360,8 +360,14 @@ development:
     host: 0.0.0.0
     port: 8080
     https: false
+    hmr: false
 ```
 
+If you have hmr turned to `true`, then the `stylesheet_pack_tag` generates no output, as you will want
+to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the
+`stylesheet_pack_tag` will create the appropriate HTML tags.
+
+
 #### Resolved Paths
 
 If you are adding webpacker to an existing app that has most of the assets inside
@@ -445,6 +451,16 @@ You can checkout these links on this subject:
 - https://webpack.js.org/configuration/dev-server/#devserver-hot
 - https://webpack.js.org/guides/hmr-react/
 
+If you are using hot reloading, you should either set the `dev_server/hmr` key to TRUE or set the
+ENV value `WEBPACKER_HMR=TRUE`. That way, your stylesheet pack tag will do **nothing** because you
+need your styles inlined in your JavaScript for hot reloading to work properly.
+
+### Live Reloading or Static Reloading
+Live Reloading is having your assets for development provided by the webpack-dev-server.
+
+You can override the the presence of the `dev_server` setup by setting ENV value: `WEBPACKER_DEV_SERVER=FALSE`.
+
+You might do this if you are switching back and forth between statically compiling files during development and trying to get hot reloading to work.
 
 ## Linking Styles, Images and Fonts
 
@@ -593,9 +609,9 @@ and
 
 #### React
 
-You may consider using [react-rails](https://github.com/reactjs/react-rails) or
-[webpacker-react](https://github.com/renchap/webpacker-react) for more advanced react integration.
-However here is how you can do it yourself:
+If you need more advanced React-integration, like server rendering, redux, or react-router, see [shakacode/react_on_rails](https://github.com/shakacode/react_on_rails), [react-rails](https://github.com/reactjs/react-rails), and [webpacker-react](https://github.com/renchap/webpacker-react).
+
+If you're not concerned with view helpers to pass props or server rendering, can do it yourself:
 
 ```erb
 <%# views/layouts/application.html.erb %>

lib/install/config/webpack/development.js

@@ -1,5 +1,6 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
+const webpack = require('webpack')
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
 const { settings, output } = require('./configuration.js')
@@ -16,6 +17,7 @@ module.exports = merge(sharedConfig, {
     https: settings.dev_server.https,
     host: settings.dev_server.host,
     port: settings.dev_server.port,
+    hot: settings.dev_server.hmr,
     contentBase: output.path,
     publicPath: output.publicPath,
     compress: true,
@@ -27,5 +29,10 @@ module.exports = merge(sharedConfig, {
     stats: {
       errorDetails: true
     }
-  }
+  },
+
+  plugins: settings.dev_server.hmr ? [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  ] : []
 })

lib/install/config/webpack/shared.js

@@ -27,8 +27,7 @@ module.exports = {
 
   output: {
     filename: '[name].js',
-    path: output.path,
-    publicPath: output.publicPath
+    path: output.path
   },
 
   module: {
@@ -38,10 +37,7 @@ module.exports = {
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[contenthash].css' : '[name].css'),
-    new ManifestPlugin({
-      publicPath: output.publicPath,
-      writeToFileEmit: true
-    })
+    new ManifestPlugin({ writeToFileEmit: true })
   ],
 
   resolve: {

lib/install/config/webpacker.yml

@@ -33,6 +33,7 @@ development:
     host: localhost
     port: 8080
     https: false
+    hmr: false
 
 test:
   <<: *default

lib/webpacker.rb

@@ -4,6 +4,7 @@ module Webpacker
   def bootstrap
     Webpacker::Env.load
     Webpacker::Configuration.load
+    Webpacker::DevServer.load
     Webpacker::Manifest.load
   end
 
@@ -20,6 +21,7 @@ def env
 require "webpacker/logger"
 require "webpacker/env"
 require "webpacker/configuration"
+require "webpacker/dev_server"
 require "webpacker/manifest"
 require "webpacker/compiler"
 require "webpacker/railtie" if defined?(Rails)

lib/webpacker/configuration.rb

@@ -8,8 +8,12 @@ def entry_path
       source_path.join(fetch(:source_entry_path))
     end
 
+    def public_output_path
+      fetch(:public_output_path)
+    end
+
     def output_path
-      public_path.join(fetch(:public_output_path))
+      public_path.join(public_output_path)
     end
 
     def manifest_path
@@ -57,11 +61,22 @@ def data
     def defaults
       @defaults ||= HashWithIndifferentAccess.new(YAML.load(default_file_path.read)[Webpacker.env])
     end
+
+    # Uses the webpack dev server host if appropriate
+    def output_path_or_url
+      if Webpacker::DevServer.enabled?
+        Webpacker::DevServer.base_url
+      else
+        # Ensure we start with a slash so that the asset helpers don't prepend the default asset
+        # pipeline locations.
+        public_output_path.starts_with?("/") ? public_output_path : "/#{public_output_path}"
+      end
+    end
   end
 
   private
     def load
-      return super unless File.exist?(@path)
+      return Webpacker::Configuration.defaults unless File.exist?(@path)
       HashWithIndifferentAccess.new(YAML.load(File.read(@path))[Webpacker.env])
     end
 end

lib/webpacker/dev_server.rb

@@ -0,0 +1,54 @@
+# Same convention as manifest/configuration.rb
+# Loads webpacker configuration from config/webpacker.yml
+
+class Webpacker::DevServer < Webpacker::Configuration
+  class << self
+    def enabled?
+      case ENV["WEBPACKER_DEV_SERVER"]
+      when /true/i then true
+      when /false/i then false
+      else !data[:dev_server].nil?
+      end
+    end
+
+    # read settings for dev_server
+    def hmr?
+      if enabled?
+        case ENV["WEBPACKER_HMR"]
+        when /true/i then true
+        when /false/i then false
+        else fetch(:hmr)
+        end
+      else
+        false
+      end
+    end
+
+    def host
+      fetch(:host)
+    end
+
+    def port
+      fetch(:port)
+    end
+
+    def https?
+      fetch(:https)
+    end
+
+    def protocol
+      https? ? "https" : "http"
+    end
+
+    # Uses the hot_reloading_host if appropriate
+    def base_url
+      "#{protocol}://#{host}:#{port}"
+    end
+
+    def fetch(key)
+      if enabled?
+        data[:dev_server][key] || defaults[:dev_server][key]
+      end
+    end
+  end
+end

lib/webpacker/file_loader.rb

@@ -4,13 +4,29 @@ class NotFoundError < StandardError; end
   class FileLoaderError < StandardError; end
 
   class_attribute :instance
-  attr_accessor :data
+  attr_accessor :data, :mtime, :path
 
   class << self
     def load(path = file_path)
-      self.instance = new(path)
+      if instance.nil? || !production_env? || !file_cached?(path)
+        self.instance = new(path)
+      end
+    end
+
+    def file_path
+      raise FileLoaderError.new("Subclass of Webpacker::FileLoader should override this method")
     end
 
+    private
+      def file_cached?(path)
+        File.exist?(path) && self.instance.mtime == File.mtime(path)
+      end
+
+      # Prefer the NODE_ENV to the rails env.
+      def production_env?
+        (ENV["NODE_ENV"].presence || Rails.env) == "production"
+      end
+
     protected
       def ensure_loaded_instance(klass)
         raise Webpacker::FileLoader::FileLoaderError.new("#{klass.name}#load must be called first") unless instance
@@ -20,6 +36,7 @@ def ensure_loaded_instance(klass)
   private
     def initialize(path)
       @path = path
+      @mtime = File.exist?(path) ? File.mtime(path) : nil
       @data = load
     end
 

lib/webpacker/helper.rb

@@ -9,8 +9,12 @@ module Webpacker::Helper
   # In production mode:
   #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_path(name, **options)
-    asset_path(Webpacker::Manifest.lookup(name), **options)
+    path = Webpacker::Configuration.public_output_path
+    file = Webpacker::Manifest.lookup(name)
+    full_path = "#{path}/#{file}"
+    asset_path(full_path, **options)
   end
+
   # Creates a script tag that references the named pack file, as compiled by Webpack per the entries list
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
@@ -41,13 +45,21 @@ def javascript_pack_tag(*names, **options)
   #   # In production mode:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
+  #   # In development mode with hot-reloading
+  #   <%= stylesheet_pack_tag('main') %> <% # Default is false for enabled_when_hot_loading%>
+  #   # No output
+  #
   def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    if Webpacker::DevServer.hmr?
+      ""
+    else
+      stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    end
   end
 
   private
     def sources_from_pack_manifest(names, type:)
-      names.map { |name| Webpacker::Manifest.lookup(pack_name_with_extension(name, type: type)) }
+      names.map { |name| Webpacker::Manifest.asset_source(pack_name_with_extension(name, type: type)) }
     end
 
     def pack_name_with_extension(name, type:)

lib/webpacker/manifest.rb

@@ -17,31 +17,86 @@ def file_path
       Webpacker::Configuration.manifest_path
     end
 
-    def lookup(name)
+    # Converts the "name" (aka the pack or bundle name) to to the full path for use in a browser.
+    def asset_source(name)
+      output_path_or_url = Webpacker::Configuration.output_path_or_url
+      mapped_name = lookup(name)
+      "#{output_path_or_url}/#{mapped_name}"
+    end
+
+    # Converts the "name" (aka the pack or bundle name) to the possibly hashed name per a manifest.
+    #
+    # If Configuration.compile? then compilation is invoked the file is missing.
+    #
+    # Options
+    # throw_if_missing: default is true. If false, then nill is returned if the file is missing.
+    def lookup(name, throw_if_missing: true)
+      instance.confirm_manifest_exists
+
       if Webpacker::Configuration.compile?
-        compile_and_find!(name)
+        compile_and_find!(name, throw_if_missing: throw_if_missing)
       else
-        find!(name)
+        # Since load checks a `mtime` on the manifest for a non-production env before loading,
+        # we should always call this before a call to `find!` since one may be using
+        # `webpack -w` and a file may have been added to the manifest since Rails first started.
+        load
+        raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Manifest.load must be called first") unless instance
+
+        return find!(name, throw_if_missing: throw_if_missing)
       end
     end
 
+    # Why does this method exist? Testing? It's not in the README
     def lookup_path(name)
-      Rails.root.join(File.join(Webpacker::Configuration.public_path, lookup(name)))
+      Rails.root.join(File.join(Webpacker::Configuration.output_path, lookup(name)))
     end
 
     private
-      def find!(name)
+      def missing_file_from_manifest_error(bundle_name)
+        msg = <<-MSG
+Webpacker can't find #{bundle_name} in your manifest at #{file_path}. Possible causes:
+  1. You are hot reloading.
+  2. You want to set Configuration.compile to true for your environment.
+  3. Webpack has not re-run to reflect updates.
+  4. You have misconfigured Webpacker's config/webpacker.yml file.
+  5. Your Webpack configuration is not creating a manifest.
+Your manifest contains:
+#{instance.data.to_json}
+        MSG
+        raise(Webpacker::FileLoader::NotFoundError.new(msg))
+      end
+
+      def missing_manifest_file_error(path_object)
+        msg = <<-MSG
+Webpacker can't find the manifest file: #{path_object}
+Possible causes:
+  1. You have not invoked webpack.
+  2. You have misconfigured Webpacker's config/webpacker_.yml file.
+  3. Your Webpack configuration is not creating a manifest.
+MSG
+        raise(Webpacker::FileLoader::NotFoundError.new(msg))
+      end
+
+      def find!(name, throw_if_missing: true)
         ensure_loaded_instance(self)
-        instance.data[name.to_s] ||
-          raise(Webpacker::FileLoader::NotFoundError.new("Can't find #{name} in #{file_path}. Is webpack still compiling?"))
+        value = instance.data[name.to_s]
+        return value if value.present?
+
+        if throw_if_missing
+          missing_file_from_manifest_error(name)
+        end
       end
 
-      def compile_and_find!(name)
+      def compile_and_find!(name, throw_if_missing: true)
         Webpacker.logger.tagged("Webpacker") { Webpacker.compile }
-        find!(name)
+        find!(name, throw_if_missing: throw_if_missing)
       end
   end
 
+  def confirm_manifest_exists
+    raise missing_manifest_file_error(@path) unless File.exist?(@path)
+  end
+
   private
     def load
       return super unless File.exist?(@path)