webpacker 3.6.0 → 4.0.2

data/lib/install/config/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}

data/lib/install/config/webpacker.yml

@@ -3,8 +3,10 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
   webpack_compile_output: false
 
   # Additional paths webpack should lookup modules
@@ -14,7 +16,25 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
+    - .mjs
     - .js
     - .sass
     - .scss
@@ -32,6 +52,9 @@ development:
   <<: *default
   compile: true
 
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  check_yarn_integrity: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -65,5 +88,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

data/lib/install/elm.rb

@@ -9,7 +9,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('elm', elm)\n",
+  "environment.loaders.prepend('elm', elm)\n",
   before: "module.exports"
 
 say "Copying Elm example entry file to #{Webpacker.config.source_entry_path}"
@@ -27,7 +27,7 @@ run "yarn run elm init"
 run "yarn run elm make"
 
 say "Updating webpack paths to include .elm file extension"
-insert_into_file Webpacker.config.config_path, "    - .elm\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating Elm source location"
 gsub_file "elm.json", /\"\src\"\n/,

data/lib/install/erb.rb

@@ -9,11 +9,11 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('erb', erb)\n",
+  "environment.loaders.prepend('erb', erb)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .erb file extension"
-insert_into_file Webpacker.config.config_path, "    - .erb\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",

data/lib/install/examples/react/babel.config.js

@@ -0,0 +1,83 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        require('babel-plugin-transform-react-remove-prop-types').default,
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

data/lib/install/examples/stimulus/application.js

@@ -1,6 +1 @@
-import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
-
-const application = Application.start()
-const context = require.context("controllers", true, /.js$/)
-application.load(definitionsFromContext(context))
+import "controllers"

data/lib/install/examples/stimulus/controllers/index.js

@@ -0,0 +1,9 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))

data/lib/install/examples/typescript/tsconfig.json

@@ -6,6 +6,10 @@
     "lib": ["es6", "dom"],
     "module": "es6",
     "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+        "*": ["node_modules/*", "app/javascript/*"]
+    },
     "sourceMap": true,
     "target": "es5"
   },

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

@@ -48,9 +48,9 @@ document.addEventListener('DOMContentLoaded', () => {
 //
 //
 //
-// If the using turbolinks, install 'vue-turbolinks':
+// If the project is using turbolinks, install 'vue-turbolinks':
 //
-// yarn add 'vue-turbolinks'
+// yarn add vue-turbolinks
 //
 // Then uncomment the code block below:
 //
@@ -63,8 +63,10 @@ document.addEventListener('DOMContentLoaded', () => {
 // document.addEventListener('turbolinks:load', () => {
 //   const app = new Vue({
 //     el: '#hello',
-//     data: {
-//       message: "Can you say hello?"
+//     data: () => {
+//       return {
+//         message: "Can you say hello?"
+//       }
 //     },
 //     components: { App }
 //   })

data/lib/install/javascript/packs/application.js

@@ -7,4 +7,12 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
 console.log('Hello World from Webpacker')

data/lib/install/loaders/typescript.js

@@ -1,6 +1,11 @@
+const PnpWebpackPlugin = require('pnp-webpack-plugin')
+
 module.exports = {
   test: /\.(ts|tsx)?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader'
-  }]
+  use: [
+    {
+      loader: 'ts-loader',
+      options: PnpWebpackPlugin.tsLoaderOptions()
+    }
+  ]
 }

data/lib/install/loaders/vue.js

@@ -1,13 +1,6 @@
-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/react.rb

@@ -1,31 +1,18 @@
 require "webpacker/configuration"
+require "fileutils"
 
-babelrc = Rails.root.join(".babelrc")
+replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
 
-if File.exist?(babelrc)
-  react_babelrc = JSON.parse(File.read(babelrc))
-  react_babelrc["presets"] ||= []
-
-  unless react_babelrc["presets"].include?("react")
-    react_babelrc["presets"].push("react")
-    say "Copying react preset to your .babelrc file"
-
-    File.open(babelrc, "w") do |f|
-      f.puts JSON.pretty_generate(react_babelrc)
-    end
-  end
-else
-  say "Copying .babelrc to app root directory"
-  copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
-end
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
 
 say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
 
 say "Updating webpack paths to include .jsx file extension"
-insert_into_file Webpacker.config.config_path, "    - .jsx\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Installing all react dependencies"
-run "yarn add react react-dom babel-preset-react prop-types"
+run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"
 
 say "Webpacker now supports react.js 🎉", :green

data/lib/install/template.rb

@@ -4,47 +4,46 @@ copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 puts "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
-say "Copying .postcssrc.yml to app root directory"
-copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
+say "Copying postcss.config.js to app root directory"
+copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
 
-say "Copying .babelrc to app root directory"
-copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
 
-say "Creating JavaScript app source directory"
-directory "#{__dir__}/javascript", Webpacker.config.source_path
+say "Copying .browserslistrc to app root directory"
+copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
 
-apply "#{__dir__}/binstubs.rb"
-
-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
-
-if Rails::VERSION::MAJOR >= 5
-  environment check_yarn_integrity_config.call("true"), env: :development
-  environment check_yarn_integrity_config.call("false"), env: :production
+if Dir.exists?(Webpacker.config.source_path)
+  say "The JavaScript app source directory already exists"
 else
-  inject_into_file "config/environments/development.rb", "\n  #{check_yarn_integrity_config.call("true")}", after: "Rails.application.configure do", verbose: false
-  inject_into_file "config/environments/production.rb", "\n  #{check_yarn_integrity_config.call("false")}", after: "Rails.application.configure do", verbose: false
+  say "Creating JavaScript app source directory"
+  directory "#{__dir__}/javascript", Webpacker.config.source_path
 end
 
+apply "#{__dir__}/binstubs.rb"
+
 if File.exists?(".gitignore")
-  append_to_file ".gitignore", <<-EOS
-/public/packs
-/public/packs-test
-/node_modules
-yarn-debug.log*
-.yarn-integrity
-EOS
+  append_to_file ".gitignore" do
+    "\n"                   +
+    "/public/packs\n"      +
+    "/public/packs-test\n" +
+    "/node_modules\n"      +
+    "/yarn-error.log\n"    +
+    "yarn-debug.log*\n"    +
+    ".yarn-integrity\n"
+  end
 end
 
-say "Installing all JavaScript dependencies"
-run "yarn add @rails/webpacker@3.5 --tilde"
+if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+  say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
+  run "yarn add @rails/webpacker"
+else
+  say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
+  run "yarn add @rails/webpacker@next"
+end
 
 say "Installing dev server for live reloading"
-run "yarn add --dev webpack-dev-server@2.11.2"
+run "yarn add --dev webpack-dev-server"
 
 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

data/lib/install/typescript.rb

@@ -24,23 +24,23 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('typescript', typescript)\n",
+  "environment.loaders.prepend('typescript', typescript)\n",
   before: "module.exports"
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
 
 say "Updating webpack paths to include .ts file extension"
-insert_into_file Webpacker.config.config_path, "    - .ts\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating webpack paths to include .tsx file extension"
-insert_into_file Webpacker.config.config_path, "    - .tsx\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 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,17 +3,26 @@ 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 to config/webpack/environment.js"
+say "Adding vue loader plugin to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const vue =  require('./loaders/vue')\n",
+  "const { VueLoaderPlugin } = require('vue-loader')\n",
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('vue', vue)\n",
+  "environment.plugins.prepend('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('vue-loader')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('vue', vue)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .vue file extension"
-insert_into_file Webpacker.config.config_path, "    - .vue\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/vue/hello_vue.js",
@@ -24,7 +33,7 @@ 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 vue-template-compiler"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to enable unsafe-eval rule.", :yellow