Update webpacker and fix a bunch of broken things with it

2019-08-03 20:25:22 -07:00 · 2019-08-03 20:25:22 -07:00 · 1fdc3926df
commit 1fdc3926df
parent 1861441100
15 changed files with 3863 additions and 3131 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,18 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": "> 1%",
-        "uglify": true
-      },
-      "useBuiltIns": true
-    }]
-  ],
-
-  "plugins": [
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }]
-  ]
-}
--- a/.gitignore
+++ b/.gitignore
@ -26,10 +26,12 @@ script/scratch.*
 test/fixtures/vcr_cassettes
 .gitconfig
 test/reports
+
+.idea
+.vagrant
+
+/public/packs
 /public/packs-test
 /node_modules
 yarn-debug.log*
 .yarn-integrity
-public/packs
-.idea
-.vagrant
--- a/.postcssrc.yml
+++ b/.postcssrc.yml
@ -1,3 +0,0 @@
-plugins:
-  postcss-import: {}
-  postcss-cssnext: {}
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -111,7 +111,7 @@ GEM
    chronic (0.10.2)
    cityhash (0.9.0)
    coderay (1.1.2)
-    concurrent-ruby (1.1.3)
+    concurrent-ruby (1.1.5)
    connection_pool (2.2.2)
    crack (0.4.3)
      safe_yaml (~> 1.0.0)
@ -146,7 +146,7 @@ GEM
      faraday
      multi_json
    equalizer (0.0.11)
-    erubi (1.7.1)
+    erubi (1.8.0)
    execjs (2.7.0)
    factory_bot (4.8.2)
      activesupport (>= 3.0.0)
@ -195,7 +195,7 @@ GEM
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
    hurley (0.2)
-    i18n (1.2.0)
+    i18n (1.6.0)
      concurrent-ruby (~> 1.0)
    jmespath (1.4.0)
    jquery-rails (4.3.3)
@ -291,10 +291,10 @@ GEM
    ptools (1.3.5-universal-mingw32)
      win32-file (>= 0.7.0)
    public_suffix (3.0.2)
-    rack (2.0.6)
+    rack (2.0.7)
    rack-protection (2.0.3)
      rack
-    rack-proxy (0.6.4)
+    rack-proxy (0.6.5)
      rack
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
@ -324,7 +324,7 @@ GEM
      rake (>= 0.8.7)
      thor (>= 0.19.0, < 2.0)
    raindrops (0.19.0)
-    rake (12.3.2)
+    rake (12.3.3)
    rakismet (1.5.4)
    rb-fsevent (0.10.3)
    rb-inotify (0.9.10)
@ -450,7 +450,7 @@ GEM
      addressable (>= 2.3.6)
      crack (>= 0.3.2)
      hashdiff
-    webpacker (4.0.0.pre.pre.2)
+    webpacker (4.0.7)
      activesupport (>= 4.2)
      rack-proxy (>= 0.6.1)
      railties (>= 4.2)
--- a/app/javascript/src/javascripts/uploader_source.vue
+++ b/app/javascript/src/javascripts/uploader_source.vue
@ -2,7 +2,7 @@
    <div>
        <input type="text" size="50" v-model="realValue" @keyup.enter="add"/>
        <button @click="remove" v-if="index !== 0">-</button>
-        <button @click="add" v-if="last && index < 4">+</button>
+        <button @click="add" v-if="last && index < 9">+</button>
    </div>
 </template>

--- a/app/views/layouts/blank.html.erb
+++ b/app/views/layouts/blank.html.erb
@ -9,8 +9,8 @@
  <%= raw Danbooru.config.custom_html_header_content %>
  <script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-v/CvOfYoICV4azK6zXTy9qXP6UwbdbFVuxd2Lorpes7n5YVsaU1bQqIalcktKchl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
-  <%= javascript_pack_tag "application" %>
  <%= stylesheet_pack_tag "application" %>
+  <%= javascript_pack_tag "application" %>
  <%= yield :html_header %>
 </head>
 <body lang="en">
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@ -28,8 +28,8 @@
  <%= auto_discovery_link_tag :atom, posts_path(:format => "atom", :tags => params[:tags]) %>
  <script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-v/CvOfYoICV4azK6zXTy9qXP6UwbdbFVuxd2Lorpes7n5YVsaU1bQqIalcktKchl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
-  <%= javascript_pack_tag "application" %>
  <%= stylesheet_pack_tag "application" %>
+  <%= javascript_pack_tag "application" %>
  <% if CurrentUser.user.custom_style.present? %>
    <%= stylesheet_link_tag custom_style_users_path, :media => "screen" %>
  <% end %>
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,72 @@
+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',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].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,
+          corejs: false
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}
--- a/bin/setup
+++ b/bin/setup
--- a/bin/webpack
+++ b/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"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
  Webpacker::WebpackRunner.run(ARGV)
+end
--- a/bin/webpack-dev-server
+++ b/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"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
  Webpacker::DevServerRunner.run(ARGV)
+end
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@ -3,8 +3,11 @@
 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
  # ['app/assets', 'engine/foo/app/assets']
@ -13,8 +16,26 @@ 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: true
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
  extensions:
    - .erb
+    - .mjs
    - .js
    - .sass
    - .scss
@ -32,6 +53,9 @@ development:
  <<: *default
  compile: true

+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: false
+
  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
@ -49,7 +73,7 @@ development:
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
-      ignored: /node_modules/
+      ignored: '**/node_modules/**'


 test:
@ -65,5 +89,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
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "license": "MIT",
  "dependencies": {
-    "@rails/webpacker": "^3.5.3",
+    "@rails/webpacker": "^4.0.7",
    "debug-loader": "^0.0.1",
    "expose-loader": "^0.7.5",
    "hammerjs": "^2.0.8",
@ -19,7 +19,7 @@
    "eslint": "^5.3.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-ignore-erb": "^0.1.1",
-    "webpack-dev-server": "^3.1.11"
+    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "lint": "yarn run eslint --plugin eslint-plugin-ignore-erb --ext .js,.js.erb app/javascript/src/javascripts"
--- a/postcss.config.js
+++ b/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
+    })
+  ]
+}
--- a/yarn.lock
+++ b/yarn.lock