stack upgrade

Author: Shuunen

.eslintrc.json

@@ -1,3 +1,86 @@
 {
-  "extends": "./node_modules/shuunen-stack/.eslintrc.json"
-}
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:unicorn/recommended",
+    "plugin:vue/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2021
+  },
+  "plugins": [
+    "unicorn",
+    "vue",
+    "html"
+  ],
+  "root": true,
+  "rules": {
+    "capitalized-comments": "off",
+    "comma-dangle": [
+      "error",
+      "always-multiline"
+    ],
+    "curly": [
+      "error",
+      "multi"
+    ],
+    "func-names": [
+      "error",
+      "always"
+    ],
+    "import/no-unassigned-import": "off",
+    "indent": [
+      "error",
+      2
+    ],
+    "lines-between-class-members": "off",
+    "max-statements-per-line": "off",
+    "no-console": "off",
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "padding-line-between-statements": "off",
+    "quote-props": [
+      "error",
+      "consistent-as-needed"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ],
+    "space-before-function-paren": [
+      "error",
+      "always"
+    ],
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-process-exit": "off",
+    "unicorn/prefer-module": "off",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-switch": "off",
+    "unicorn/prevent-abbreviations": [
+      "error",
+      {
+        "allowList": {
+          "args": true,
+          "pkg": true,
+          "str": true
+        }
+      }
+    ],
+    "vue/first-attribute-linebreak": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/html-self-closing": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/no-multiple-template-root": "off",
+    "vue/singleline-html-element-content-newline": "off"
+  }
+}

package.json

@@ -8,12 +8,15 @@
   ],
   "description": "Compare two images with a fancy slider",
   "devDependencies": {
-    "npm-run-all": "*",
-    "shuunen-stack": "^0.14.0",
-    "vite": "^2.6.13",
-    "vite-plugin-vue2": "^1.9.0",
-    "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
+    "eslint": "8.20",
+    "eslint-plugin-unicorn": "43",
+    "eslint-plugin-html": "7",
+    "eslint-plugin-vue": "9",
+    "vite": "2.9",
+    "vite-plugin-vue2": "2.0",
+    "vue": "2.7",
+    "shuutils": "5.7",
+    "vue-template-compiler": "2.7"
   },
   "displayName": "Vue Image Compare",
   "files": [
@@ -37,10 +40,10 @@
     "url": "https://github.com/Shuunen/vue-image-compare.git"
   },
   "scripts": {
-    "build": "vite build",
-    "ci": "run-s build lint",
+    "build": "vite build && unique-mark dist/assets/index.*.js",
+    "ci": "npm run build && npm run lint",
     "dev": "vite",
-    "lint": "stack lint",
+    "lint": "eslint --fix --ignore-path .gitignore --ext .js,.html,.vue .",
     "postversion": "git push && git push --tags && npm publish",
     "preversion": "npm run ci",
     "serve": "vite preview"

src/app.vue

@@ -24,7 +24,7 @@
       <div class="columns">
         <div class="column has-text-centered">
           <h1 class="title">{{ pkg.displayName }}</h1>
-          <h2 class="subtitle">version {{ pkg.version }}</h2>
+          <h2 class="subtitle">__unique-mark__</h2>
           <a target="_blank" :href="pkg.homepage">
             Project, sources & documentation on GitHub
             <i class="fab fa-github" aria-hidden="true" />

src/vue-image-compare.vue

@@ -231,11 +231,8 @@ export default {
         let posX = this.pageX - this.$el.getBoundingClientRect().left
         const pr = this.padding.right
         const pl = this.padding.left
-        if (posX < pl) {
-          posX = pl
-        } else if (posX > this.width - pr) {
-          posX = this.width - pr
-        }
+        if (posX < pl) posX = pl
+        else if (posX > this.width - pr) posX = this.width - pr
         this.posX = posX
       }
       if (this.isDraggingImage) {
@@ -252,11 +249,8 @@ export default {
       if (!this.isZoomable) return
       this.mutableZoom += -event.deltaY / 1000
       this.$nextTick(() => {
-        if (this.mutableZoom >= this.zoom.max) {
-          this.mutableZoom = this.zoom.max
-        } else if (this.mutableZoom <= this.zoom.min) {
-          this.mutableZoom = this.zoom.min
-        }
+        if (this.mutableZoom >= this.zoom.max) this.mutableZoom = this.zoom.max
+        else if (this.mutableZoom <= this.zoom.min) this.mutableZoom = this.zoom.min
       })
     },
     onWheelClick () {

vite.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const { createVuePlugin } = require('vite-plugin-vue2')
 
 module.exports = {