Fix WS-2018-0076 and WS-2019-0063. Move notification to bottom left.

.browserslistrc

@@ -0,0 +1 @@
+defaults

.gitignore

@@ -13,13 +13,12 @@
 !/log/.keep
 !/tmp/.keep
 
-/node_modules
-/yarn-error.log
-
 .byebug_history
+
 /public/packs
 /public/packs-test
 /node_modules
+/yarn-error.log
 yarn-debug.log*
 .yarn-integrity
 

Gemfile

@@ -17,7 +17,7 @@ gem 'counter_culture', '~> 1.12'
 gem 'devise', '~> 4.5'
 gem 'dotenv-rails', '~> 2.6'
 gem 'uglifier', '~> 4.1'
-gem 'webpacker', '4.0.0.pre.pre.2'
+gem 'webpacker', '~> 4.0'
 
 group :development do
   gem 'awesome_print', '~> 1.8'

Gemfile.lock

@@ -135,7 +135,7 @@ GEM
     minitest (5.11.3)
     msgpack (1.2.9)
     nio4r (2.3.1)
-    nokogiri (1.10.2)
+    nokogiri (1.10.3)
       mini_portile2 (~> 2.4.0)
     orm_adapter (0.5.0)
     pg (1.1.4)
@@ -245,7 +245,7 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (~> 1.0)
       selenium-webdriver (~> 3.0)
-    webpacker (4.0.0.pre.pre.2)
+    webpacker (4.0.7)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -288,7 +288,7 @@ DEPENDENCIES
   uglifier (~> 4.1)
   web-console (~> 3.7)
   webdrivers (~> 3.0)
-  webpacker (= 4.0.0.pre.pre.2)
+  webpacker (~> 4.0)
 
 RUBY VERSION
    ruby 2.6.1p33

app/javascript/snibox/utils/notifications.js

@@ -2,9 +2,9 @@ import Swal from 'sweetalert2'
 
 const options = {
   toast: true,
-  position: 'top',
+  position: 'bottom-start',
   showConfirmButton: false,
-  customClass: 'snibox-swal2-slideInDown'
+  customClass: 'snibox-swal2-slideInLeft'
 }
 
 export default {

app/javascript/styles/snibox/utils/_sweetalert2.scss

@@ -36,6 +36,7 @@
 .swal2-toast {
   .swal2-title {
     text-align: left !important;
+    flex-direction: column;
 
     hr {
       margin: 0.75em 0;

app/views/layouts/application.html.erb

@@ -9,7 +9,7 @@
   <%= render 'shared/apple_touch_icons' %>
 
   <%= csrf_meta_tags %>
-  <%= favicon_link_tag asset_pack_path('images/favicon.ico') %>
+  <%= favicon_link_tag asset_pack_path('media/images/favicon.ico') %>
 
   <%= stylesheet_pack_tag 'common' %>
   <%= render 'shared/rspec_disable_animations' if Rails.env.test? %>

app/views/shared/_apple_touch_icons.html.erb

@@ -1,10 +1,10 @@
 <!-- apple touch icons -->
-<%= tag("link", rel: "apple-touch-icon", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "57x57", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-57x57.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "72x72", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-72x72.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "76x76", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-76x76.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "114x114", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-114x114.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "120x120", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-120x120.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "144x144", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-144x144.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "152x152", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-152x152.png')) %>
-<%= tag("link", rel: "apple-touch-icon", sizes: "180x180", href: asset_pack_path('images/apple-touch-icons/apple-touch-icon-180x180.png')) %>
+<%= tag("link", rel: "apple-touch-icon", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "57x57", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-57x57.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "72x72", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-72x72.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "76x76", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-76x76.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "114x114", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-114x114.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "120x120", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-120x120.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "144x144", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-144x144.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "152x152", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-152x152.png')) %>
+<%= tag("link", rel: "apple-touch-icon", sizes: "180x180", href: asset_pack_path('media/images/apple-touch-icons/apple-touch-icon-180x180.png')) %>

babel.config.js

@@ -0,0 +1,76 @@
+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: [
+      // from ./babelrc (previous webpacker)
+      // require('syntax-dynamic-import'),
+      // require('transform-object-rest-spread'),
+      // original
+      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)
+  }
+}

bin/webpack

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

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,9 +1,9 @@
 const { environment } = require('@rails/webpacker')
 const { VueLoaderPlugin } = require('vue-loader')
-const vue =  require('./loaders/vue')
+const vue = require('./loaders/vue')
 
-environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())
-environment.loaders.append('vue', vue)
+environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
+environment.loaders.prepend('vue', vue)
 
 // based on https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
 // let's use chunks just for vendor for now

config/webpack/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: [{

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,27 @@ 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
+  extract_css: true
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
     - .vue
+    - .mjs
     - .js
     - .sass
     - .scss
@@ -32,6 +54,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: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -49,7 +74,7 @@ development:
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
-      ignored: /node_modules/
+      ignored: '**/node_modules/**'
 
 
 test:
@@ -65,5 +90,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

package.json

@@ -1,8 +1,9 @@
 {
   "dependencies": {
-    "@rails/webpacker": "^4.0.0-pre.2",
+    "@rails/webpacker": "^4.0.7",
     "animate.css": "^3.7.1",
     "axios": "^0.19.0",
+    "babel-runtime": "^6.26.0",
     "bulma": "^0.7.1",
     "clipboard": "^2.0.4",
     "codemirror": "^5.39.0",
@@ -16,14 +17,14 @@
     "rails-ujs": "^5.1.5",
     "smoothscroll-polyfill": "^0.4.4",
     "sweetalert2": "^7.24.3",
-    "vue": "^2.5.16",
+    "vue": "^2.6.10",
     "vue-highlightjs": "^1.2.3",
-    "vue-loader": "^v15.0.0",
+    "vue-loader": "^15.7.0",
     "vue-markdown": "^2.2.4",
-    "vue-template-compiler": "^2.5.16",
+    "vue-template-compiler": "^2.6.10",
     "vuex": "^v3.0.1"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "^3.5.1"
   }
 }

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
+    })
+  ]
+}