webpacker 4.0.0.pre.pre.2 → 4.0.0.pre.3

data/docs/cloud9.md

@@ -83,7 +83,7 @@ dev_server:
   use_local_ip: false
 ```
 
-into the these custom configuration:
+into these custom configuration:
 
 ```yaml
 dev_server:

data/docs/css.md

@@ -108,7 +108,7 @@ file in your app root with standard plugins.
 ```yml
 plugins:
   postcss-import: {}
-  postcss-cssnext: {}
+  postcss-preset-env: {}
 ```
 
 ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)

data/docs/es6.md

@@ -6,7 +6,7 @@
 Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
 you can use next generation JavaScript, today. The Webpacker installer sets up a
 standard `.babelrc` file in your app root, which will work great in most cases
-because of [babel-env-preset](https://github.com/babel/babel-preset-env).
+because of [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env).
 
 Following ES6/7 features are supported out of the box:
 
@@ -19,14 +19,14 @@ Following ES6/7 features are supported out of the box:
 We have also included [babel polyfill](https://babeljs.io/docs/usage/polyfill/)
 that includes a custom regenerator runtime and core-js.
 
-Don't forget to import `babel-polyfill` in your main entry point like so:
+Don't forget to import `@babel/polyfill` in your main entry point like so:
 
 ```js
-import "babel-polyfill"
+import "@babel/polyfill"
 ```
 
 
-## Module import() vs require()
+## Module import vs require()
 
 While you are free to use `require()` and `module.exports`, we encourage you
 to use `import` and `export` instead since it reads and looks much better.

data/docs/testing.md

@@ -34,7 +34,7 @@ It is beneficial to use the same webpack configuration file (generated by webpac
 // config/webpack/test.js
 const environment = require('./environment')
 environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
-environment.loaders.set('istanbul-instrumenter', {
+environment.loaders.append('istanbul-instrumenter', {
   test: /\.ts$/,
   enforce: "post",
   loader: "istanbul-instrumenter-loader",

data/docs/webpack.md

@@ -168,8 +168,12 @@ module.exports = {
 // config/webpack/environment.js
 
 const { environment } = require('@rails/webpacker')
+const url = require('./loaders/url')
 
 environment.loaders.prepend('url', url)
+
+// avoid using both file and url loaders
+environment.loaders.get('file').test = /\.(tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i
 ```
 
 ### Overriding Loader Options in webpack 3+ (for CSS Modules etc.)

data/gemfiles/Gemfile-rails.4.2.x

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 4.2"
+gem "rails", "~> 4.2.0"
 gem "rake", ">= 11.1"
 gem "rubocop", ">= 0.49", require: false
 gem "rack-proxy", require: false

data/gemfiles/Gemfile-rails.5.0.x

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 5.0"
+gem "rails", "~> 5.0.0"
 gem "rake", ">= 11.1"
 gem "rubocop", ">= 0.49", require: false
 gem "rack-proxy", require: false

data/gemfiles/Gemfile-rails.5.1.x

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 5.1"
+gem "rails", "~> 5.1.0"
 gem "rake", ">= 11.1"
 gem "rubocop", ">= 0.49", require: false
 gem "rack-proxy", require: false

data/gemfiles/Gemfile-rails.5.2.x

@@ -0,0 +1,10 @@
+source "https://rubygems.org"
+
+gem "webpacker", path: ".."
+
+gem "rails", "~> 5.2.0"
+gem "rake", ">= 11.1"
+gem "rubocop", ">= 0.49", require: false
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/lib/install/angular.rb

@@ -14,9 +14,9 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   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 "  p.script_src :self, :https, :unsafe_eval", :yellow
+  say "  policy.script_src :self, :https, :unsafe_eval", :yellow
   say "else", :yellow
-  say "  p.script_src :self, :https", :yellow
+  say "  policy.script_src :self, :https", :yellow
   say "end", :yellow
 end
 

data/lib/install/bin/webpack

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= ENV["NODE_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
@@ -12,4 +12,8 @@ require "bundler/setup"
 
 require "webpacker"
 require "webpacker/webpack_runner"
-Webpacker::WebpackRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

data/lib/install/bin/webpack-dev-server

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= ENV["NODE_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
@@ -12,4 +12,8 @@ require "bundler/setup"
 
 require "webpacker"
 require "webpacker/dev_server_runner"
-Webpacker::DevServerRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

data/lib/install/coffee.rb

@@ -13,7 +13,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   before: "module.exports"
 
 say "Updating webpack paths to include .coffee file extension"
-insert_into_file Webpacker.config.config_path, "    - .coffee\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/coffee/hello_coffee.coffee",

data/lib/install/config/.babelrc

@@ -1,18 +1,41 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": "> 1%",
-        "uglify": true
-      },
-      "useBuiltIns": true
-    }]
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "forceAllTransforms": true,
+        "useBuiltIns": "entry"
+      }
+    ]
   ],
-
   "plugins": [
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }]
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false,
+        "regenerator": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-regenerator",
+      {
+        "async": false
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
   ]
 }

data/lib/install/config/.browserslistrc

@@ -0,0 +1 @@
+> 1%

data/lib/install/config/.postcssrc.yml

@@ -1,3 +1,3 @@
 plugins:
   postcss-import: {}
-  postcss-cssnext: {}
+  postcss-preset-env: {}

data/lib/install/config/webpacker.yml

@@ -5,6 +5,7 @@ default: &default
   source_entry_path: packs
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -31,6 +32,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

data/lib/install/elm.rb

@@ -22,14 +22,15 @@ 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-loader"
-run "yarn run elm package install -- --yes"
+run "yarn add --dev elm-hot-webpack-loader"
+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: /extensions:\n/
 
 say "Updating Elm source location"
-gsub_file "elm-package.json", /\"\.\"\n/,
+gsub_file "elm.json", /\"\src\"\n/,
   %("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
 
 say "Updating .gitignore to include elm-stuff folder"

data/lib/install/erb.rb

@@ -13,7 +13,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   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: /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/.babelrc

@@ -1,6 +1,47 @@
 {
   "presets": [
-    ["env", { "modules": false } ],
-    "react"
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "forceAllTransforms": true,
+        "useBuiltIns": "entry"
+      }
+    ],
+    [
+      "@babel/preset-react",
+      {
+        "useBuiltIns": true
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false,
+        "regenerator": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-regenerator",
+      {
+        "async": false
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
   ]
 }

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

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

data/lib/install/loaders/vue.js

@@ -1,8 +1,3 @@
-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'))
-
 module.exports = {
   test: /\.vue(\.erb)?$/,
   use: [{

data/lib/install/react.rb

@@ -1,13 +1,14 @@
 require "webpacker/configuration"
 
 babelrc = Rails.root.join(".babelrc")
+babel_react_preset = ["@babel/preset-react", { "useBuiltIns": true }]
 
 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")
+  unless react_babelrc["presets"].flatten.include?("@babel/preset-react")
+    react_babelrc["presets"].push(babel_react_preset)
     say "Copying react preset to your .babelrc file"
 
     File.open(babelrc, "w") do |f|
@@ -23,9 +24,9 @@ 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: /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"
 
 say "Webpacker now supports react.js 🎉", :green

data/lib/install/template.rb

@@ -10,26 +10,18 @@ copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
 say "Copying .babelrc to app root directory"
 copy_file "#{__dir__}/config/.babelrc", ".babelrc"
 
-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
@@ -40,8 +32,13 @@ yarn-debug.log*
 EOS
 end
 
-say "Installing all JavaScript dependencies"
-run "yarn add @rails/webpacker"
+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 https://github.com/rails/webpacker"
+end
 
 say "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server"
@@ -50,7 +47,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 "p.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
+  say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
 end
 
 say "Webpacker successfully installed 🎉 🍰", :green