Support React on Rails by merging Webpacker Lite

Gemfile.lock

@@ -134,4 +134,4 @@ DEPENDENCIES
   webpacker!
 
 BUNDLED WITH
-   1.14.6
+   1.15.3

README.md

@@ -367,8 +367,14 @@ development:
     host: 0.0.0.0
     port: 8080
     https: false
+    hot_reloading: false
 ```
 
+If you have hot_reloading 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
@@ -453,6 +459,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/hot_reloading` 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
 
@@ -601,8 +617,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 %>
@@ -1103,6 +1120,8 @@ git push heroku master
 Webpacker lazily compiles assets in test env so you can write your tests without any extra
 setup and everything will just work out of the box.
 
+Note, [React on Rails] users should set configuration value `compile` to false, as React on Rails
+handles compilation for test and production environments.
 
 Here is a sample system test case with hello_react example component:
 

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: {
@@ -39,7 +38,6 @@ module.exports = {
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
     new ManifestPlugin({
-      publicPath: output.publicPath,
       writeToFileEmit: true
     })
   ],

lib/install/config/webpacker.yml

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

lib/webpacker.rb

@@ -2,14 +2,15 @@ module Webpacker
   extend self
 
   def bootstrap
-    Webpacker::Env.load
-    Webpacker::Configuration.load
-    Webpacker::Manifest.load
+    Webpacker::Env.load_instance
+    Webpacker::Configuration.load_instance
+    Webpacker::DevServer.load_instance
+    Webpacker::Manifest.load_instance
   end
 
   def compile
     Webpacker::Compiler.compile
-    Webpacker::Manifest.load
+    Webpacker::Manifest.load_instance
   end
 
   def env
@@ -19,6 +20,7 @@ def env
 
 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
@@ -45,19 +49,30 @@ def fetch(key)
     end
 
     def data
-      load if Webpacker.env.development?
-      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Configuration.load must be called first") unless instance
+      load_instance if Webpacker.env.development?
+      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Configuration.load_data must be called first") unless instance
       instance.data
     end
 
     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)
+    def load_data
+      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,73 @@
+# Same convention as manifest/configuration.rb
+
+# Loads webpacker configuration from config/webpacker.yml
+
+require "webpacker/configuration"
+
+class Webpacker::DevServer < Webpacker::FileLoader
+  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 hot_reloading?
+      if enabled?
+        case ENV["WEBPACKER_HMR"]
+        when /true/i then true
+        when /false/i then false
+        else fetch(:hot_reloading)
+        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
+
+    def file_path
+      Webpacker::Configuration.file_path
+    end
+
+    # Uses the hot_reloading_host if appropriate
+    def base_url
+      "#{protocol}://#{host}:#{port}"
+    end
+
+    private
+      def fetch(key)
+        if enabled?
+          data[:dev_server][key] || Webpacker::Configuration.defaults[:dev_server][key]
+        end
+      end
+
+      def data
+        load_instance if Webpacker.env.development?
+        raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::DevServer.load_data must be called first") unless instance
+        instance.data
+      end
+  end
+
+  private
+    def load_data
+      Webpacker::Configuration.instance.data
+    end
+end

lib/webpacker/env.rb

@@ -14,7 +14,7 @@ def file_path
   end
 
   private
-    def load
+    def load_data
       environments = File.exist?(@path) ? YAML.load(File.read(@path)).keys : [].freeze
       return ENV["NODE_ENV"] if environments.include?(ENV["NODE_ENV"])
       return Rails.env if environments.include?(Rails.env)

lib/webpacker/file_loader.rb

@@ -4,21 +4,38 @@ 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)
+    def load_instance(path = file_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
   end
 
   private
     def initialize(path)
       @path = path
-      @data = load
+      @mtime = File.exist?(path) ? File.mtime(path) : nil
+      @data = load_data
     end
 
-    def load
+    def load_data
       {}.freeze
     end
 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.
@@ -25,8 +29,7 @@ def asset_pack_path(name, **options)
   #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
   def javascript_pack_tag(*names, **options)
-    sources = names.map { |name|  Webpacker::Manifest.lookup("#{name}#{compute_asset_extname(name, type: :javascript)}") }
-    javascript_include_tag(*sources, **options)
+    javascript_include_tag(*asset_source(names, :javascript), **options)
   end
 
   # Creates a link tag that references the named pack file, as compiled by Webpack per the entries list
@@ -42,8 +45,23 @@ 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)
-    sources = names.map { |name|  Webpacker::Manifest.lookup("#{name}#{compute_asset_extname(name, type: :stylesheet)}") }
-    stylesheet_link_tag(*sources, **options)
+    if Webpacker::DevServer.hot_reloading?
+      ""
+    else
+      stylesheet_link_tag(*asset_source(names, :stylesheet), **options)
+    end
   end
+
+  private
+    def asset_source(names, type)
+      names.map do |name|
+        name_ensuring_ext = "#{name}#{compute_asset_extname(name, type: type)}"
+        Webpacker::Manifest.asset_source(name_ensuring_ext)
+      end
+    end
 end