webpacker 3.6.0 → 4.0.0.pre.pre.1

data/lib/install/elm.rb

@@ -22,15 +22,14 @@ copy_file "#{__dir__}/examples/elm/Main.elm",
 
 say "Installing all Elm dependencies"
 run "yarn add elm elm-webpack-loader"
-run "yarn add --dev elm-hot-webpack-loader"
-run "yarn run elm init"
-run "yarn run elm make"
+run "yarn add --dev elm-hot-loader"
+run "yarn run elm package install -- --yes"
 
 say "Updating webpack paths to include .elm file extension"
 insert_into_file Webpacker.config.config_path, "    - .elm\n", after: /extensions:\n/
 
 say "Updating Elm source location"
-gsub_file "elm.json", /\"\src\"\n/,
+gsub_file "elm-package.json", /\"\.\"\n/,
   %("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
 
 say "Updating .gitignore to include elm-stuff folder"

data/lib/install/examples/elm/Main.elm

@@ -1,6 +1,5 @@
 module Main exposing (..)
 
-import Browser
 import Html exposing (Html, h1, text)
 import Html.Attributes exposing (style)
 
@@ -22,7 +21,7 @@ view : Model -> Html Message
 view model =
   -- The inline style is being used for example purposes in order to keep this example simple and
   -- avoid loading additional resources. Use a proper stylesheet when building your own app.
-  h1 [style "display" "flex", style "justify-content" "center"]
+  h1 [style [("display", "flex"), ("justify-content", "center")]]
      [text "Hello Elm!"]
 
 -- MESSAGE
@@ -44,11 +43,11 @@ subscriptions model =
 
 -- MAIN
 
-main : Program (Maybe {}) Model Message
+main : Program Never Model Message
 main =
-  Browser.element
+  Html.program
     {
-      init = always init,
+      init = init,
       view = view,
       update = update,
       subscriptions = subscriptions

data/lib/install/examples/elm/hello_elm.js

@@ -2,15 +2,11 @@
 // head of your layout file, like app/views/layouts/application.html.erb.
 // It will render "Hello Elm!" within the page.
 
-import {
-  Elm
-} from '../Main'
+import Elm from '../Main'
 
 document.addEventListener('DOMContentLoaded', () => {
   const target = document.createElement('div')
 
   document.body.appendChild(target)
-  Elm.Main.init({
-    node: target
-  })
+  Elm.Main.embed(target)
 })

data/lib/install/examples/vue/hello_vue.js

@@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
 //
 // Then uncomment the code block below:
 //
-// import TurbolinksAdapter from 'vue-turbolinks'
+// import TurbolinksAdapter from 'vue-turbolinks';
 // import Vue from 'vue/dist/vue.esm'
 // import App from '../app.vue'
 //

data/lib/install/loaders/elm.js

@@ -2,11 +2,12 @@ const { resolve } = require('path')
 
 const isProduction = process.env.NODE_ENV === 'production'
 const elmSource = resolve(process.cwd())
-const elmBinary = `${elmSource}/node_modules/.bin/elm`
+const elmMake = `${elmSource}/node_modules/.bin/elm-make`
 
-const elmDefaultOptions = { cwd: elmSource, pathToElm: elmBinary }
+const elmDefaultOptions = { cwd: elmSource, pathToMake: elmMake }
 const developmentOptions = Object.assign({}, elmDefaultOptions, {
   verbose: true,
+  warn: true,
   debug: true
 })
 
@@ -18,5 +19,5 @@ const elmWebpackLoader = {
 module.exports = {
   test: /\.elm(\.erb)?$/,
   exclude: [/elm-stuff/, /node_modules/],
-  use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-webpack-loader' }, elmWebpackLoader]
+  use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-loader' }, elmWebpackLoader]
 }

data/lib/install/loaders/vue.js

@@ -2,12 +2,10 @@ const { dev_server: devServer } = require('@rails/webpacker').config
 
 const isProduction = process.env.NODE_ENV === 'production'
 const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
-const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
 
 module.exports = {
   test: /\.vue(\.erb)?$/,
   use: [{
-    loader: 'vue-loader',
-    options: { extractCSS }
+    loader: 'vue-loader'
   }]
 }

data/lib/install/template.rb

@@ -19,7 +19,7 @@ say "Adding configurations"
 
 check_yarn_integrity_config = ->(value) { <<CONFIG }
 # Verifies that versions and hashed value of the package contents in the project's package.json
-config.webpacker.check_yarn_integrity = #{value}
+  config.webpacker.check_yarn_integrity = #{value}
 CONFIG
 
 if Rails::VERSION::MAJOR >= 5
@@ -41,7 +41,7 @@ EOS
 end
 
 say "Installing all JavaScript dependencies"
-run "yarn add @rails/webpacker@3.5 --tilde"
+run "yarn add @rails/webpacker"
 
 say "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server@2.11.2"
@@ -50,7 +50,7 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow
   say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
   say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
-  say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
+  say "p.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
 end
 
 say "Webpacker successfully installed 🎉 🍰", :green

data/lib/install/typescript.rb

@@ -41,6 +41,6 @@ copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript ts-loader@3.5.0 #{additional_packages}"
+run "yarn add typescript ts-loader #{additional_packages}"
 
 say "Webpacker now supports typescript 🎉", :green

data/lib/install/vue.rb

@@ -3,10 +3,19 @@ require "webpacker/configuration"
 say "Copying vue loader to config/webpack/loaders"
 copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/vue.js").to_s
 
+say "Adding vue loader plugin to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const { VueLoaderPlugin } = require('vue-loader')\n",
+  after: "require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())\n",
+  before: "module.exports"
+
 say "Adding vue loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const vue =  require('./loaders/vue')\n",
-  after: "require('@rails/webpacker')\n"
+  after: "require('vue-loader')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.append('vue', vue)\n",
@@ -24,16 +33,16 @@ copy_file "#{__dir__}/examples/vue/app.vue",
   "#{Webpacker.config.source_path}/app.vue"
 
 say "Installing all Vue dependencies"
-run "yarn add vue vue-loader@14.2.2 vue-template-compiler"
+run "yarn add vue vue-loader@next vue-template-compiler"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to enable unsafe-eval rule.", :yellow
   say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
   say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
   say "if Rails.env.development?", :yellow
-  say "  policy.script_src :self, :https, :unsafe_eval", :yellow
+  say "  p.script_src :self, :https, :unsafe_eval", :yellow
   say "else", :yellow
-  say "  policy.script_src :self, :https", :yellow
+  say "  p.script_src :self, :https", :yellow
   say "end", :yellow
 end
 

data/lib/tasks/webpacker.rake

@@ -1,5 +1,4 @@
 tasks = {
-  "webpacker:info"                    => "Provides information on Webpacker's environment",
   "webpacker:install"                 => "Installs and setup webpack with Yarn",
   "webpacker:compile"                 => "Compiles webpack bundles based on environment",
   "webpacker:clobber"                 => "Removes the webpack compiled output directory",

data/lib/tasks/webpacker/yarn_install.rake

@@ -1,6 +1,6 @@
 namespace :webpacker do
   desc "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
   task :yarn_install do
-    system "yarn install --no-progress --production"
+    system "yarn install --no-progress --frozen-lockfile --production"
   end
 end

data/lib/webpacker.rb

@@ -1,5 +1,4 @@
 require "active_support/core_ext/module/attribute_accessors"
-require "active_support/core_ext/string/inquiry"
 require "active_support/logger"
 require "active_support/tagged_logging"
 

data/lib/webpacker/compiler.rb

@@ -44,8 +44,7 @@ class Webpacker::Compiler
 
     def watched_files_digest
       files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
-      file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
-      Digest::SHA1.hexdigest(file_ids.join("/"))
+      Digest::SHA1.hexdigest(files.map { |f| "#{File.basename(f)}/#{File.mtime(f).utc.to_i}" }.join("/"))
     end
 
     def record_compilation_digest
@@ -60,11 +59,10 @@ class Webpacker::Compiler
     def run_webpack
       logger.info "Compiling…"
 
-      stdout, sterr , status = Open3.capture3(webpack_env, "#{RbConfig.ruby} ./bin/webpack")
+      sterr, stdout, status = Open3.capture3(webpack_env, "#{RbConfig.ruby} ./bin/webpack")
 
       if status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
-        logger.info stdout if config.webpack_compile_output?
       else
         logger.error "Compilation failed:\n#{sterr}\n#{stdout}"
       end

data/lib/webpacker/configuration.rb

@@ -1,14 +1,8 @@
-require "yaml"
-require "active_support/core_ext/hash/keys"
-require "active_support/core_ext/hash/indifferent_access"
-
 class Webpacker::Configuration
-  attr_reader :root_path, :config_path, :env
+  delegate :root_path, :config_path, :env, to: :@webpacker
 
-  def initialize(root_path:, config_path:, env:)
-    @root_path = root_path
-    @config_path = config_path
-    @env = env
+  def initialize(webpacker)
+    @webpacker = webpacker
   end
 
   def refresh
@@ -63,10 +57,6 @@ class Webpacker::Configuration
     fetch(:extensions)
   end
 
-  def webpack_compile_output?
-    fetch(:webpack_compile_output)
-  end
-
   private
     def fetch(key)
       data.fetch(key, defaults[key])

data/lib/webpacker/dev_server.rb

@@ -3,10 +3,10 @@ class Webpacker::DevServer
   # Webpacker.dev_server.connect_timeout = 1
   cattr_accessor(:connect_timeout) { 0.01 }
 
-  attr_reader :config
+  delegate :config, to: :@webpacker
 
-  def initialize(config)
-    @config = config
+  def initialize(webpacker)
+    @webpacker = webpacker
   end
 
   def running?
@@ -54,16 +54,12 @@ class Webpacker::DevServer
     "#{host}:#{port}"
   end
 
-  def pretty?
-    fetch(:pretty)
-  end
-
   private
     def fetch(key)
       ENV["WEBPACKER_DEV_SERVER_#{key.upcase}"] || config.dev_server.fetch(key, defaults[key])
     end
 
     def defaults
-      config.send(:defaults)[:dev_server] || {}
+      config.send(:defaults)[:dev_server]
     end
 end

data/lib/webpacker/dev_server_proxy.rb

@@ -11,10 +11,6 @@ class Webpacker::DevServerProxy < Rack::Proxy
   def perform_request(env)
     if env["PATH_INFO"].start_with?("/#{public_output_uri_path}") && Webpacker.dev_server.running?
       env["HTTP_HOST"] = env["HTTP_X_FORWARDED_HOST"] = env["HTTP_X_FORWARDED_SERVER"] = Webpacker.dev_server.host_with_port
-      env["HTTP_X_FORWARDED_PROTO"] = env["HTTP_X_FORWARDED_SCHEME"] = Webpacker.dev_server.protocol
-      unless Webpacker.dev_server.https?
-        env["HTTPS"] = env["HTTP_X_FORWARDED_SSL"] = "off"
-      end
       env["SCRIPT_NAME"] = ""
 
       super(env)

data/lib/webpacker/dev_server_runner.rb

@@ -1,7 +1,6 @@
 require "shellwords"
+require "yaml"
 require "socket"
-require "webpacker/configuration"
-require "webpacker/dev_server"
 require "webpacker/runner"
 
 module Webpacker
@@ -14,22 +13,15 @@ module Webpacker
 
     private
       def load_config
-        app_root = Pathname.new(@app_path)
+        @config_file = File.join(@app_path, "config/webpacker.yml")
+        dev_server = YAML.load_file(@config_file)[ENV["RAILS_ENV"]]["dev_server"]
 
-        config = Configuration.new(
-          root_path: app_root,
-          config_path: app_root.join("config/webpacker.yml"),
-          env: ENV["RAILS_ENV"]
-        )
-
-        dev_server = DevServer.new(config)
-
-        @hostname          = dev_server.host
-        @port              = dev_server.port
-        @pretty            = dev_server.pretty?
+        @hostname          = dev_server["host"]
+        @port              = dev_server["port"]
+        @pretty            = dev_server.fetch("pretty", true)
 
       rescue Errno::ENOENT, NoMethodError
-        $stdout.puts "webpack dev_server configuration not found in #{config.config_path}[#{ENV["RAILS_ENV"]}]."
+        $stdout.puts "webpack dev_server configuration not found in #{@config_file}[#{ENV["RAILS_ENV"]}]."
         $stdout.puts "Please run bundle exec rails webpacker:install to install Webpacker"
         exit!
       end

data/lib/webpacker/env.rb

@@ -13,7 +13,7 @@ class Webpacker::Env
 
   def inquire
     fallback_env_warning unless current
-    current || DEFAULT.inquiry
+    (current || DEFAULT).inquiry
   end
 
   private

data/lib/webpacker/helper.rb

@@ -33,16 +33,6 @@ module Webpacker::Helper
     end
   end
 
-  # Creates a image tag that references the named pack file.
-  #
-  # Example:
-  #
-  #  <%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
-  #  <img alt='Edit Entry' src='/packs/application-k344a6d59eef8632c9d1.png' width='16' height='10' />
-  def image_pack_tag(name, **options)
-    image_tag(asset_path(Webpacker.manifest.lookup!(name)), **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.

data/lib/webpacker/instance.rb

@@ -12,11 +12,7 @@ class Webpacker::Instance
   end
 
   def config
-    @config ||= Webpacker::Configuration.new(
-      root_path: root_path,
-      config_path: config_path,
-      env: env
-    )
+    @config ||= Webpacker::Configuration.new self
   end
 
   def compiler
@@ -24,7 +20,7 @@ class Webpacker::Instance
   end
 
   def dev_server
-    @dev_server ||= Webpacker::DevServer.new config
+    @dev_server ||= Webpacker::DevServer.new self
   end
 
   def manifest

data/lib/webpacker/railtie.rb

@@ -46,8 +46,7 @@ class Webpacker::Engine < ::Rails::Engine
   end
 
   initializer "webpacker.proxy" do |app|
-    insert_middleware = Webpacker.config.dev_server.present? rescue nil
-    if insert_middleware
+    if Rails.env.development?
       app.middleware.insert_before 0,
         Rails::VERSION::MAJOR >= 5 ?
           Webpacker::DevServerProxy : "Webpacker::DevServerProxy", ssl_verify_none: true

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "3.6.0".freeze
+  VERSION = "4.0.0-pre.1".freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "3.6.0",
+  "version": "4.0.0-pre.1",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -12,39 +12,39 @@
     "yarn": ">=0.25.2"
   },
   "dependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.3",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
+    "babel-preset-env": "^1.6.1",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "compression-webpack-plugin": "^1.1.11",
     "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "glob": "^7.1.2",
-    "js-yaml": "^3.12.0",
-    "node-sass": "^4.9.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "js-yaml": "^3.11.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.8.3",
     "path-complete-extname": "^1.0.0",
     "postcss-cssnext": "^3.1.0",
     "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.5",
+    "postcss-loader": "^2.1.3",
     "sass-loader": "^6.0.7",
-    "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^1.2.7",
-    "webpack": "^3.12.0",
-    "webpack-manifest-plugin": "^1.3.2"
+    "style-loader": "^0.20.3",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.4.1",
+    "webpack-assets-manifest": "^3.0.1",
+    "webpack-cli": "^2.0.13"
   },
   "devDependencies": {
-    "eslint": "^4.19.1",
+    "eslint": "^4.18.2",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "jest": "^23.3.0"
+    "jest": "^22.4.2"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",