Updating to LUX 2.0

.babelrc

@@ -1,18 +1,51 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": "> 1%",
-        "uglify": true
-      },
-      "useBuiltIns": true
-    }]
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "forceAllTransforms": true,
+        "useBuiltIns": "entry"
+      }
+    ]
   ],
-
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": {
+            "node": "current"
+          }
+      }]]
+    }
+  },
   "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
+      }
+    ]
   ]
 }

.postcssrc.yml

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

bin/webpack-dev-server

@@ -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

config/webpack/environment.js

@@ -1,5 +1,8 @@
 const { environment } = require('@rails/webpacker')
+const { VueLoaderPlugin } = require('vue-loader')
 const vue =  require('./loaders/vue')
 
+environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())
 environment.loaders.append('vue', vue)
+
 module.exports = environment

config/webpack/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'
   }]
 }

config/webpacker.yml

@@ -28,6 +28,8 @@ default: &default
     - .jpeg
     - .jpg
 
+  dev_tool: source-map
+
 development:
   <<: *default
   compile: true

package.json

@@ -1,14 +1,20 @@
 {
   "dependencies": {
-    "@rails/webpacker": "3.5.5",
+    "@rails/webpacker": "https://github.com/rails/webpacker",
     "lux-design-system": "^2.0.3",
     "vue": "^2.6.5",
-    "vue-loader": "14.2.2",
+    "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.6.5",
-    "vue-turbolinks": "^2.0.4"
+    "vue-turbolinks": "^2.0.4",
+    "webpack": "^4.29.3"
   },
   "devDependencies": {
+    "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-preset-env": "^1.7.0",
+    "postcss-cssnext": "^3.1.0",
     "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^2.11.3"
+    "webpack-dev-server": ">=3.1.14"
   }
 }