upgrade vue2 to latest

.babelrc

@@ -1,20 +0,0 @@
-{
-  "presets": [
-    [
-      "env", {
-        "modules": false,
-        "targets": {
-          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-        }
-      }
-    ],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["transform-vue-jsx", "istanbul"]
-    }
-  }
-}

.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
-charset = utf-8
+[*.{js,jsx,ts,tsx,vue}]
 indent_style = space
 indent_size = 2
 end_of_line = lf
-insert_final_newline = true
 trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.eslintignore

@@ -1,5 +0,0 @@
-/build/
-/config/
-/dist/
-/*.js
-/test/unit/coverage/

.eslintrc.js

@@ -1,81 +0,0 @@
-// https://eslint.org/docs/user-guide/configuring
-
-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
-  env: {
-    browser: true,
-  },
-  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-  extends: [
-    'plugin:vue/essential',
-    'airbnb-base',
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue',
-  ],
-  // check if imports actually resolve
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: 'build/webpack.base.conf.js'
-      }
-    }
-  },
-  // add your custom rules here
-  rules: {
-    "vue/html-closing-bracket-newline": ["error", {
-      "singleline": "never",
-      "multiline": "always"
-    }],
-    "vue/order-in-components": [
-      "error", {
-        "order": [
-          "el",
-          "name",
-          "parent",
-          "functional",
-          ["delimiters", "comments"],
-          ["components", "directives", "filters"],
-          "extends",
-          "mixins",
-          "inheritAttrs",
-          "model",
-          ["props", "propsData"],
-          "data",
-          "computed",
-          "watch",
-          "LIFECYCLE_HOOKS",
-          "methods",
-          ["template", "render"],
-          "renderError",
-        ],
-      },
-    ],
-    'import/extensions': ['error', 'always', {
-      js: 'never',
-      vue: 'never'
-    }],
-    "indent": ["error", 2],
-    // "max-len": ["error", { "code": 180 }],
-    "max-len": "off",
-    'no-param-reassign': ['error', {
-      props: true,
-      ignorePropertyModificationsFor: [
-        'state', // for vuex state
-        'acc', // for reduce accumulators
-        'e' // for e.returnvalue
-      ]
-    }],
-    // allow optionalDependencies
-    'import/no-extraneous-dependencies': ['error', {
-      optionalDependencies: ['test/unit/index.js']
-    }],
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}

.gitignore

@@ -1,9 +1,20 @@
 .DS_Store
 node_modules/
 /dist/
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+
 .runtimeconfig.json
 /functions/.runtimeconfig.json
 /test/unit/coverage/
@@ -17,3 +28,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.log
+*.sw?

.postcssrc.js

@@ -1,10 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-    "plugins": {
-        "postcss-import": {},
-        "postcss-url": {},
-        // to edit target browsers: use "browserslist" field in package.json
-        "autoprefixer": {}
-    }
-}

README.md

@@ -42,16 +42,29 @@ $ yarn dev
 # Compiles and minifies for production
 $ yarn build
 
-# Run tests
-$ yarn test
 
-# Run linter
-$ yarn lint
+### Run your unit tests
+```
+yarn test:unit
+```
+
+### Run your end-to-end tests
+```
+yarn test:e2e
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
 
 # Translate strings (requires google API key)
 $ yarn translate
 ```
 
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};

build/build.js

@@ -1,41 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
-
-const spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
-
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
-    }
-
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})

build/check-versions.js

@@ -1,54 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-const versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function () {
-  const warnings = []
-
-  for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
-
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-
-    for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
-    }
-
-    console.log()
-    process.exit(1)
-  }
-}

build/load-minified.js

@@ -1,11 +0,0 @@
-'use strict'
-
-const fs = require('fs')
-const UglifyJS = require('uglify-es')
-
-module.exports = function(filePath) {
-  const code = fs.readFileSync(filePath, 'utf-8')
-  const result = UglifyJS.minify(code)
-  if (result.error) return ''
-  return result.code
-}

build/service-worker-dev.js

@@ -1,17 +0,0 @@
-// This service worker file is effectively a 'no-op' that will reset any
-// previous service worker registered for the same host:port combination.
-// In the production build, this file is replaced with an actual service worker
-// file that will precache your site's local assets.
-// See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
-
-self.addEventListener('install', () => self.skipWaiting());
-
-self.addEventListener('activate', () => {
-  self.clients.matchAll({ type: 'window' }).then(windowClients => {
-    for (let windowClient of windowClients) {
-      // Force open pages to refresh, so that they have a chance to load the
-      // fresh navigation response from the local dev server.
-      windowClient.navigate(windowClient.url);
-    }
-  });
-});

build/service-worker-prod.js

@@ -1,55 +0,0 @@
-(function() {
-  'use strict';
-
-  // Check to make sure service workers are supported in the current browser,
-  // and that the current page is accessed from a secure origin. Using a
-  // service worker from an insecure origin will trigger JS console errors.
-  var isLocalhost = Boolean(window.location.hostname === 'localhost' ||
-      // [::1] is the IPv6 localhost address.
-      window.location.hostname === '[::1]' ||
-      // 127.0.0.1/8 is considered localhost for IPv4.
-      window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-      )
-    );
-
-  window.addEventListener('load', function() {
-      if ('serviceWorker' in navigator &&
-          (window.location.protocol === 'https:' || isLocalhost)) {
-        navigator.serviceWorker.register('service-worker.js')
-        .then(function(registration) {
-          // updatefound is fired if service-worker.js changes.
-          registration.onupdatefound = function() {
-            // updatefound is also fired the very first time the SW is installed,
-            // and there's no need to prompt for a reload at that point.
-            // So check here to see if the page is already controlled,
-            // i.e. whether there's an existing service worker.
-            if (navigator.serviceWorker.controller) {
-              // The updatefound event implies that registration.installing is set
-              var installingWorker = registration.installing;
-
-              installingWorker.onstatechange = function() {
-                switch (installingWorker.state) {
-                  case 'installed':
-                    // At this point, the old content will have been purged and the
-                    // fresh content will have been added to the cache.
-                    // It's the perfect time to display a "New content is
-                    // available; please refresh." message in the page's interface.
-                    break;
-
-                  case 'redundant':
-                    throw new Error('The installing ' +
-                                    'service worker became redundant.');
-
-                  default:
-                    // Ignore
-                }
-              };
-            }
-          };
-        }).catch(function(e) {
-          console.error('Error during service worker registration:', e);
-        });
-      }
-  });
-})();

build/translate.js

@@ -1,26 +0,0 @@
-/* eslint-disable */
-
-const fs = require('fs');
-const translate = require('translate-json-object')();
-const baseJson = require('../src/i18n/en.json');
-
-// NOTE: Please be careful using you api key, translating the entire app to all languages can get costly
-translate.init({ googleApiKey: 'GOOGLE_TRANSLATE_API_KEY' });
-
-const supportedLanguages = ['ar','zh-CN','en','fr','de','it','ja','pt','ru','es'];
-
-for (let i = 0, promise = Promise.resolve(); i < supportedLanguages.length; i++) {
-    promise = promise.then(() => new Promise(resolve => {
-        const language = supportedLanguages[i];
-
-        translate.translate(baseJson, language)
-            .then((data) => {
-                fs.writeFile(`src/i18n/${language}.json`, JSON.stringify(data, null, 4), () => {
-                    console.log(`Translation to ${language} completed`);
-                    resolve();
-                });
-            }).catch((err) => {
-                console.log('error ', err)
-            });
-    }));
-}

build/utils.js

@@ -1,101 +0,0 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const packageConfig = require('../package.json')
-
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}

build/vue-loader.conf.js

@@ -1,22 +0,0 @@
-'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
-}

build/webpack.base.conf.js

@@ -1,93 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
-
-module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      'styles': path.resolve('./src/styles'),
-      '@': resolve('src'),
-    }
-  },
-  module: {
-    rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-}

build/webpack.dev.conf.js

@@ -1,94 +0,0 @@
-'use strict'
-const fs = require('fs')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: true,
-    hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true,
-      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
-        './service-worker-dev.js'), 'utf-8')}</script>`
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
-})

build/webpack.dev.local.conf.js

@@ -1,94 +0,0 @@
-'use strict'
-const fs = require('fs')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: true,
-    hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/dev.local.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true,
-      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
-        './service-worker-dev.js'), 'utf-8')}</script>`
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
-})

build/webpack.prod.conf.js

@@ -1,161 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
-const loadMinified = require('./load-minified')
-
-const env = process.env.NODE_ENV === 'testing'
-? require('../config/test.env')
-: require('../config/prod.env')
-
-const webpackConfig = merge(baseWebpackConfig, {
-    module: {
-        rules: utils.styleLoaders({
-            sourceMap: config.build.productionSourceMap,
-            extract: true,
-            usePostCSS: true
-        })
-    },
-    devtool: config.build.productionSourceMap ? config.build.devtool : false,
-    output: {
-        path: config.build.assetsRoot,
-        filename: utils.assetsPath('js/[name].[chunkhash].js'),
-        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-    },
-    plugins: [
-        // http://vuejs.github.io/vue-loader/en/workflow/production.html
-        new webpack.DefinePlugin({
-            'process.env': env
-        }),
-        // service worker caching
-        new SWPrecacheWebpackPlugin({
-            cacheId: 'Gamebrary',
-            filename: 'service-worker.js',
-            staticFileGlobs: ['dist/**/*.{js,html,css}'],
-            minify: true,
-            stripPrefix: 'dist/'
-        }),
-        new UglifyJsPlugin({
-            uglifyOptions: {
-                compress: {
-                    warnings: false
-                }
-            },
-            sourceMap: config.build.productionSourceMap,
-            parallel: true
-        }),
-        // extract css into its own file
-        new ExtractTextPlugin({
-            filename: utils.assetsPath('css/[name].[contenthash].css'),
-            // Setting the following option to `false` will not extract CSS from codesplit chunks.
-            // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-            // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
-            // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-            allChunks: true,
-        }),
-        // Compress extracted CSS. We are using this plugin so that possible
-        // duplicated CSS from different components can be deduped.
-        new OptimizeCSSPlugin({
-            cssProcessorOptions: config.build.productionSourceMap
-            ? { safe: true, map: { inline: false } }
-            : { safe: true }
-        }),
-        // generate dist index.html with correct asset hash for caching.
-        // you can customize output by editing /index.html
-        // see https://github.com/ampedandwired/html-webpack-plugin
-        new HtmlWebpackPlugin({
-            filename: process.env.NODE_ENV === 'testing'
-            ? 'index.html'
-            : config.build.index,
-            template: 'index.html',
-            inject: true,
-            minify: {
-                removeComments: true,
-                collapseWhitespace: true,
-                removeAttributeQuotes: true
-                // more options:
-                // https://github.com/kangax/html-minifier#options-quick-reference
-            },
-            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-            chunksSortMode: 'dependency',
-            serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname,
-                './service-worker-prod.js'))}</script>`
-        }),
-        // keep module.id stable when vendor modules does not change
-        new webpack.HashedModuleIdsPlugin(),
-        // enable scope hoisting
-        new webpack.optimize.ModuleConcatenationPlugin(),
-        // split vendor js into its own file
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks (module) {
-                // any required modules inside node_modules are extracted to vendor
-                return (
-                    module.resource &&
-                    /\.js$/.test(module.resource) &&
-                    module.resource.indexOf(
-                        path.join(__dirname, '../node_modules')
-                    ) === 0
-                )
-            }
-        }),
-        // extract webpack runtime and module manifest to its own file in order to
-        // prevent vendor hash from being updated whenever app bundle is updated
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'manifest',
-            minChunks: Infinity
-        }),
-        // This instance extracts shared chunks from code splitted chunks and bundles them
-        // in a separate chunk, similar to the vendor chunk
-        // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'app',
-            async: 'vendor-async',
-            children: true,
-            minChunks: 3
-        }),
-
-        // copy custom static assets
-        new CopyWebpackPlugin([
-            {
-                from: path.resolve(__dirname, '../static'),
-                to: config.build.assetsSubDirectory,
-                ignore: ['.*']
-            }
-        ])
-    ]
-})
-
-if (config.build.productionGzip) {
-    const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-    webpackConfig.plugins.push(
-        new CompressionWebpackPlugin({
-            asset: '[path].gz[query]',
-            algorithm: 'gzip',
-            test: new RegExp(
-                '\\.(' +
-                config.build.productionGzipExtensions.join('|') +
-                ')$'
-            ),
-            threshold: 10240,
-            minRatio: 0.8
-        })
-    )
-}
-
-if (config.build.bundleAnalyzerReport) {
-    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig

build/webpack.test.conf.js

@@ -1,32 +0,0 @@
-'use strict'
-// This is the webpack config used for unit tests.
-
-const utils = require('./utils')
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-
-const webpackConfig = merge(baseWebpackConfig, {
-  // use inline sourcemap for karma-sourcemap-loader
-  module: {
-    rules: utils.styleLoaders()
-  },
-  devtool: '#inline-source-map',
-  resolveLoader: {
-    alias: {
-      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
-      // see discussion at https://github.com/vuejs/vue-loader/issues/724
-      'scss-loader': 'sass-loader'
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/test.env')
-    })
-  ]
-})
-
-// no need for app entry during tests
-delete webpackConfig.entry
-
-module.exports = webpackConfig

config/dev.env.js

@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"',
-})

config/dev.local.env.js

@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-    NODE_ENV: '"development"',
-});

config/index.js

@@ -1,76 +0,0 @@
-'use strict'
-// Template version: 1.3.1
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-    dev: {
-
-    // Paths
-        assetsSubDirectory: 'static',
-        assetsPublicPath: '',
-        proxyTable: {},
-
-        // Various Dev Server settings
-        host: 'localhost', // can be overwritten by process.env.HOST
-        port: 4000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-        autoOpenBrowser: true,
-        errorOverlay: true,
-        notifyOnErrors: true,
-        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-
-        // Use Eslint Loader?
-        // If true, your code will be linted during bundling and
-        // linting errors and warnings will be shown in the console.
-        useEslint: true,
-        // If true, eslint errors and warnings will also be shown in the error overlay
-        // in the browser.
-        showEslintErrorsInOverlay: false,
-
-        /**
-     * Source Maps
-     */
-
-        // https://webpack.js.org/configuration/devtool/#development
-        devtool: 'cheap-module-eval-source-map',
-
-        // If you have problems debugging vue-files in devtools,
-        // set this to false - it *may* help
-        // https://vue-loader.vuejs.org/en/options.html#cachebusting
-        cacheBusting: true,
-
-        cssSourceMap: true
-    },
-
-    build: {
-    // Template for index.html
-        index: path.resolve(__dirname, '../dist/index.html'),
-
-        // Paths
-        assetsRoot: path.resolve(__dirname, '../dist'),
-        assetsSubDirectory: 'static',
-        assetsPublicPath: '',
-
-        /**
-     * Source Maps
-     */
-
-        productionSourceMap: true,
-        // https://webpack.js.org/configuration/devtool/#production
-        devtool: '#source-map',
-
-        // Gzip off by default as many popular static hosts such as
-        // Surge or Netlify already gzip all static assets for you.
-        // Before setting to `true`, make sure to:
-        // npm install --save-dev compression-webpack-plugin
-        productionGzip: false,
-        productionGzipExtensions: ['js', 'css'],
-
-        // Run the build command with an extra argument to
-        // View the bundle analyzer report after build finishes:
-        // `npm run build --report`
-        // Set to `true` or `false` to always turn it on or off
-        bundleAnalyzerReport: process.env.npm_config_report
-    }
-}

config/prod.env.js

@@ -1,4 +0,0 @@
-'use strict'
-module.exports = {
-    NODE_ENV: '"production"',
-}

config/test.env.js

@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

firebase.json

@@ -1,15 +1,15 @@
 {
     "database": {
-        "rules": "config/firebase/database.rules.json"
+        "rules": "firebase/database.rules.json"
     },
     "firestore": {
-        "rules": "config/firebase/firestore.rules",
-        "indexes": "config/firebase/firestore.indexes.json"
+        "rules": "firebase/firestore.rules",
+        "indexes": "firebase/firestore.indexes.json"
     },
     "hosting": {
         "public": "dist",
         "ignore": [
-            "config/firebase/firebase.json",
+            "firebase/firebase.json",
             "**/.*",
             "**/node_modules/**"
         ],
@@ -21,6 +21,6 @@
         ]
     },
     "storage": {
-        "rules": "config/firebase/storage.rules"
+        "rules": "firebase/storage.rules"
     }
 }

index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
-  <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="192x192"  href="static/icons/android-chrome-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="static/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="static/icons/icon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="static/icons/favicon-16x16.png">
-  <link rel="shortcut icon" href="static/icons/favicon.ico">
-  <link rel="manifest" href="static/manifest.json">
-  <link rel="mask-icon" href="static/icons/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#222226">
-  <meta name="msapplication-TileImage" content="static/icons/mstile-150x150.png">
-  <meta name="msapplication-config" content="static/icons/browserconfig.xml">
-  <meta name="theme-color" content="#222226">
-  <meta name="apple-mobile-web-app-title" content="Gamebrary">
-  <meta name="description" content="Open source tool to organize video game collections.">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <title>Gamebrary</title>
-
-  <script src="https://kit.fontawesome.com/4c930ed66a.js" crossorigin="anonymous" />
-  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
-  <script>
-  if (window.location.origin.indexOf('localhost') === -1) {
-    window['_fs_debug'] = false;
-    window['_fs_host'] = 'fullstory.com';
-    window['_fs_org'] = 'HX3XV';
-    window['_fs_namespace'] = 'FS';
-    (function(m,n,e,t,l,o,g,y){
-      if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
-      g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
-      o=n.createElement(t);o.async=1;o.src='https://'+_fs_host+'/s/fs.js';
-      y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
-      g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
-      g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
-      g.consent=function(a){g("consent",!arguments.length||a)};
-      g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
-      g.clearUserCookie=function(){};
-    })(window,document,window['_fs_namespace'],'script','user');
-  }
-  </script>
-</head>
-<body>
-  <div id="app" />
-</body>
-</html>

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -6,17 +6,19 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-        "dev:local": "webpack-dev-server --inline --progress --config build/webpack.dev.local.conf.js",
-        "start": "npm run dev",
-        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
-        "test": "npm run unit",
-        "lint": "eslint --ext .js,.vue src test/unit",
-        "translate": "node build/translate.js",
-        "build": "node build/build.js",
-        "deploy": "firebase deploy"
+      "dev": "vue-cli-service serve --port 4000",
+      "build": "vue-cli-service build",
+      "test:unit": "vue-cli-service test:unit",
+      "test:e2e": "vue-cli-service test:e2e",
+      "lint": "vue-cli-service lint",
+      "deploy": "firebase deploy"
     },
     "dependencies": {
+        "core-js": "^3.8.3",
+        "register-service-worker": "^1.7.2",
+        "vue": "^2.6.14",
+        "vue-router": "^3.5.1",
+        "vuex": "^3.6.2",
         "@vue-stripe/vue-stripe": "^4.4.2",
         "axios": "^0.21.1",
         "bootstrap": "^4.5.2",
@@ -30,99 +32,78 @@
         "lodash.groupby": "^4.6.0",
         "lodash.orderby": "^4.6.0",
         "lodash.sortby": "^4.7.0",
-        "node-sass": "^4.8.3",
         "packery": "^2.1.2",
         "portal-vue": "^2.1.7",
         "raven-js": "^3.27.0",
-        "sass-loader": "^7.0.1",
-        "sw-precache-webpack-plugin": "^0.11.5",
         "translate-json-object": "^2.3.3",
-        "vue": "^2.6.14",
         "vue-analytics": "^5.16.0",
         "vue-axios": "^2.1.1",
         "vue-dayjs": "^1.0.2",
         "vue-i18n": "^8.0.0",
-        "vue-markdown": "^2.2.4",
         "vue-observe-visibility": "^1.0.0",
         "vue-raven": "^1.0.0",
-        "vue-router": "^3.0.1",
         "vue-shortkey": "^3.1.7",
         "vue-tweet-embed": "^2.4.0",
         "vuedraggable": "^2.24.3",
         "vuefire": "^1.4.5",
-        "vuex": "^3.0.1",
         "vuex-persist": "^1.2.2"
     },
     "devDependencies": {
-        "autoprefixer": "^7.1.2",
-        "babel-core": "^6.22.1",
-        "babel-eslint": "^8.2.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-loader": "^7.1.1",
-        "babel-plugin-istanbul": "^4.1.1",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "babel-plugin-transform-runtime": "^6.22.0",
-        "babel-plugin-transform-vue-jsx": "^3.5.0",
-        "babel-preset-env": "^1.3.2",
-        "babel-preset-stage-2": "^6.22.0",
-        "chai": "^4.1.2",
-        "chalk": "^2.0.1",
-        "copy-webpack-plugin": "^4.0.1",
-        "cross-env": "^5.0.1",
-        "css-loader": "^0.28.0",
-        "eslint": "^4.15.0",
-        "eslint-config-airbnb-base": "^11.3.0",
-        "eslint-friendly-formatter": "^3.0.0",
-        "eslint-import-resolver-webpack": "^0.8.3",
-        "eslint-loader": "^1.7.1",
-        "eslint-plugin-import": "^2.7.0",
-        "eslint-plugin-promise": "^4.0.1",
-        "eslint-plugin-vue": "^4.0.0",
-        "extract-text-webpack-plugin": "^3.0.0",
-        "file-loader": "^1.1.4",
-        "friendly-errors-webpack-plugin": "^1.6.1",
-        "html-webpack-plugin": "^2.30.1",
-        "inject-loader": "^3.0.0",
-        "karma": "^1.4.1",
-        "karma-coverage": "^1.1.1",
-        "karma-mocha": "^1.3.0",
-        "karma-phantomjs-launcher": "^1.0.2",
-        "karma-phantomjs-shim": "^1.4.0",
-        "karma-sinon-chai": "^1.3.1",
-        "karma-sourcemap-loader": "^0.3.7",
-        "karma-spec-reporter": "0.0.31",
-        "karma-webpack": "^2.0.2",
-        "mocha": "^3.2.0",
-        "node-notifier": "^8.0.1",
-        "optimize-css-assets-webpack-plugin": "^3.2.0",
-        "ora": "^1.2.0",
-        "phantomjs-prebuilt": "^2.1.14",
-        "portfinder": "^1.0.13",
-        "postcss-import": "^11.0.0",
-        "postcss-loader": "^2.0.8",
-        "postcss-url": "^7.2.1",
-        "rimraf": "^2.6.0",
-        "semver": "^5.3.0",
-        "shelljs": "^0.7.6",
-        "sinon": "^4.0.0",
-        "sinon-chai": "^2.8.0",
-        "uglifyjs-webpack-plugin": "^1.1.1",
-        "url-loader": "^0.5.8",
-        "vue-loader": "^13.3.0",
-        "vue-style-loader": "^3.0.1",
-        "vue-template-compiler": "^2.6.11",
-        "webpack": "^3.6.0",
-        "webpack-bundle-analyzer": "^3.3.2",
-        "webpack-dev-server": "^2.9.1",
-        "webpack-merge": "^4.1.0"
+      "babel-loader": "^7.1.1",
+      "@babel/core": "^7.12.16",
+      "@babel/eslint-parser": "^7.12.16",
+      "@vue/cli-plugin-babel": "~5.0.0",
+      "@vue/cli-plugin-e2e-cypress": "~5.0.0",
+      "@vue/cli-plugin-eslint": "~5.0.0",
+      "@vue/cli-plugin-pwa": "~5.0.0",
+      "@vue/cli-plugin-router": "~5.0.0",
+      "@vue/cli-plugin-unit-jest": "~5.0.0",
+      "@vue/cli-plugin-vuex": "~5.0.0",
+      "@vue/cli-service": "~5.0.0",
+      "@vue/eslint-config-airbnb": "^6.0.0",
+      "@vue/test-utils": "^1.1.3",
+      "@vue/vue2-jest": "^27.0.0-alpha.2",
+      "babel-jest": "^27.0.6",
+      "cypress": "^8.3.0",
+      "eslint": "^7.32.0",
+      "eslint-plugin-import": "^2.25.3",
+      "eslint-plugin-vue": "^8.0.3",
+      "eslint-plugin-vuejs-accessibility": "^1.1.0",
+      "jest": "^27.0.5",
+      "sass": "^1.32.7",
+      "sass-loader": "^12.0.0",
+      "vue-template-compiler": "^2.6.14"
     },
-    "engines": {
-        "node": ">= 10.19.0",
-        "npm": ">= 3.0.0"
+    "eslintConfig": {
+      "root": true,
+      "env": {
+        "node": true
+      },
+      "extends": [
+        "plugin:vue/essential"
+      ],
+      "parserOptions": {
+        "parser": "@babel/eslint-parser"
+      },
+      "rules": {},
+      "overrides": [
+        {
+          "files": [
+            "**/__tests__/*.{j,t}s?(x)",
+            "**/tests/unit/**/*.spec.{j,t}s?(x)"
+          ],
+          "env": {
+            "jest": true
+          }
+        }
+      ]
     },
     "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not ie <= 8"
-    ]
+      "> 1%",
+      "last 2 versions",
+      "not dead"
+    ],
+    "jest": {
+      "preset": "@vue/cli-plugin-unit-jest"
+    }
 }