refactor: update vue libs + refactor code to match updated eslint rules

.browserslistrc

@@ -1 +1 @@
-Chrome >= 76
+Chrome >= 83

.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

.gitignore

@@ -13,6 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -21,7 +22,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw?
 
 #Electron-builder output
 /dist_electron

babel.config.js

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

package.json

@@ -40,29 +40,34 @@
     "prismjs": "^1.20.0",
     "semver": "^6.3.0",
     "shuffle-array": "^1.0.1",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-electron": "^1.0.6",
     "vue-prism-editor": "^0.3.0",
-    "vue-router": "^3.1.6",
+    "vue-router": "^3.4.9",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.2.0",
+    "vuex": "^3.5.1",
     "vuex-persist": "^1.7.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
-    "@vue/eslint-config-airbnb": "^4.0.1",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-plugin-router": "^4.5.8",
+    "@vue/cli-plugin-vuex": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-airbnb": "^5.1.0",
+    "babel-eslint": "^10.1.0",
     "electron": "^9.1.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-vue": "^6.2.2",
     "semantic-release": "^17.2.2",
-    "svg-loader": "0.0.2",
     "tailwindcss": "^1.6.2",
     "vue-cli-plugin-electron-builder": "^1.4.6",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "main": "background.js",
   "gitHooks": {

src/components/NotificationsItem.vue

@@ -17,7 +17,9 @@
       />
     </div>
     <div :class="$style.header">
-      <div :class="$style.title">{{ notification.title }}</div>
+      <div :class="$style.title">
+        {{ notification.title }}
+      </div>
       <div
         :class="$style.time"
         :title="new Date(item.timestamp).toLocaleString()"
@@ -76,7 +78,6 @@ export default {
 };
 </script>
 
-
 <style lang="postcss" module>
 .root {
   grid-template-columns: min-content minmax(0, 1fr) min-content;

src/components/ReleaseNotes.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div>
     <app-content-section
       v-for="release in matchingReleases"
@@ -36,7 +37,7 @@ export default {
 
       const versionRange = `${vWithoutPatch} - ${currentVersion}`;
 
-      return this.releases.filter(release => semver.satisfies(release.name, versionRange));
+      return this.releases.filter((release) => semver.satisfies(release.name, versionRange));
     },
   },
   created() {

src/components/SettingsItem.vue

@@ -41,7 +41,7 @@ export default {
         return settings;
       }, []);
 
-      return relatedSettings.some(val => !val);
+      return relatedSettings.some((val) => !val);
     },
   },
 };

src/components/SettingsItemButton.vue

@@ -1,7 +1,11 @@
 <template>
   <settings-item :disabled-if-not-setting="disabledIfNotSetting">
-    <template slot="label"><slot name="label" /></template>
-    <template slot="descr"><slot name="descr" /></template>
+    <template slot="label">
+      <slot name="label" />
+    </template>
+    <template slot="descr">
+      <slot name="descr" />
+    </template>
     <template v-slot:control="{ disabled }">
       <app-button
         :disabled="disabled"

src/components/SettingsItemInput.vue

@@ -1,7 +1,11 @@
 <template>
   <settings-item :disabled-if-not-setting="disabledIfNotSetting">
-    <template slot="label"><slot name="label" /></template>
-    <template slot="descr"><slot name="descr" /></template>
+    <template slot="label">
+      <slot name="label" />
+    </template>
+    <template slot="descr">
+      <slot name="descr" />
+    </template>
     <template v-slot:control="{ disabled }">
       <input
         v-model.lazy="value"

src/components/SettingsItemSelect.vue

@@ -1,7 +1,11 @@
 <template>
   <settings-item :disabled-if-not-setting="disabledIfNotSetting">
-    <template slot="label"><slot name="label" /></template>
-    <template slot="descr"><slot name="descr" /></template>
+    <template slot="label">
+      <slot name="label" />
+    </template>
+    <template slot="descr">
+      <slot name="descr" />
+    </template>
     <template v-slot:control="{ disabled }">
       <select
         v-model="value"

src/components/SettingsItemToggle.vue

@@ -1,7 +1,11 @@
 <template>
   <settings-item :disabled-if-not-setting="disabledIfNotSetting">
-    <template slot="label"><slot name="label" /></template>
-    <template slot="descr"><slot name="descr" /></template>
+    <template slot="label">
+      <slot name="label" />
+    </template>
+    <template slot="descr">
+      <slot name="descr" />
+    </template>
     <template v-slot:control="{ disabled }">
       <button
         :class="$style.button"

src/components/SuggestedApps.vue

@@ -61,7 +61,7 @@ export default {
     apps() {
       const existing = this.existingTabs;
       const filtered = apps
-        .filter(app => !existing.some(e => e.url.includes(new URL(app.url).host)));
+        .filter((app) => !existing.some((e) => e.url.includes(new URL(app.url).host)));
       return shuffleArray(filtered);
     },
   },

src/components/TabItem.vue

@@ -1,11 +1,11 @@
 <template>
   <tab-item-browser-view
-    :item="item"
     #default="{
       canGoBack,
       canGoForward,
       executeMethod,
     }"
+    :item="item"
   >
     <tab-item-header
       :item="item"

src/components/WindowControls.vue

@@ -25,12 +25,10 @@
 </template>
 
 <script>
-import TitleBar from '@/components/TitleBar.vue';
 import TitleBarButton from '@/components/TitleBarButton.vue';
 
 export default {
   components: {
-    TitleBar,
     TitleBarButton,
   },
   data() {

src/components/WindowDimmer.vue

@@ -139,7 +139,7 @@ export default {
 
 .icon {
   @apply relative w-64 h-64 mx-auto border-2 border-transparent rounded-full;
-  background-image: url(@/assets/logo/logo.png);
+  background-image: url('../assets/logo/logo.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: theme('width.48');

src/main.js

@@ -37,5 +37,5 @@ Vue.component('AppTabs', AppTabs);
 new Vue({
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app');

src/store/modules/Notifications.js

@@ -26,7 +26,7 @@ export default {
       let items = db(dbUpdated).get('notifications');
 
       if (newerThanTimestamp) {
-        items = items.filter(item => item.timestamp > newerThanTimestamp);
+        items = items.filter((item) => item.timestamp > newerThanTimestamp);
       }
 
       return items.orderBy('timestamp', 'desc').value();
@@ -56,7 +56,7 @@ export default {
       state.dbUpdated = Date.now();
     },
     removeItem(state, item) {
-      db().get('notifications').remove(i => i === item).write();
+      db().get('notifications').remove((i) => i === item).write();
       state.dbUpdated = Date.now();
     },
     nextSchedule(state, schedule) {

src/store/modules/Pages.js

@@ -5,12 +5,12 @@ export default {
   },
   getters: {
     state({ pages }) {
-      return tabId => pages.find(page => page.tabId === tabId) || {};
+      return (tabId) => pages.find((page) => page.tabId === tabId) || {};
     },
   },
   mutations: {
     setState({ pages }, { tabId, data = {} }) {
-      const pageIndex = pages.findIndex(page => page.tabId === tabId);
+      const pageIndex = pages.findIndex((page) => page.tabId === tabId);
       const pageState = pages[pageIndex] || {};
 
       const newState = {

src/store/modules/Settings.js

@@ -28,10 +28,10 @@ export default {
       return db(dbUpdated).value();
     },
     byKey({ dbUpdated }) {
-      return key => db(dbUpdated).get(key).value();
+      return (key) => db(dbUpdated).get(key).value();
     },
     inGroup({ dbUpdated }) {
-      return group => db(dbUpdated)
+      return (group) => db(dbUpdated)
         .pickBy((v, k) => k.split('.')[0] === group)
         .mapKeys((v, k) => k.split('.').splice(1).join('.'))
         .value();

src/store/modules/Tabs.js

@@ -45,7 +45,7 @@ export default {
         .cloneDeep()
         .value();
 
-      return list.map(tab => deepmerge(defaultTab(), tab));
+      return list.map((tab) => deepmerge(defaultTab(), tab));
     },
     listSorted({ dbUpdated }, { list }) {
       const sorting = db(dbUpdated).get('sorting').value();
@@ -54,8 +54,8 @@ export default {
     },
     scopes(state, { list }) {
       const scopes = list
-        .filter(tab => tab.scope && tab.id !== tab.scope)
-        .map(tab => tab.scope);
+        .filter((tab) => tab.scope && tab.id !== tab.scope)
+        .map((tab) => tab.scope);
 
       const uniqueScopes = [...new Set(scopes)];
       uniqueScopes.sort();
@@ -85,7 +85,7 @@ export default {
 
       db()
         .get('sorting')
-        .remove(i => i === item.id)
+        .remove((i) => i === item.id)
         .write();
 
       state.dbUpdated = Date.now();
@@ -94,7 +94,7 @@ export default {
       state.activeTabId = id;
     },
     setSorting(state, items) {
-      db().set('sorting', items.map(item => item.id)).write();
+      db().set('sorting', items.map((item) => item.id)).write();
       state.dbUpdated = Date.now();
     },
     update(state, { id, data }) {

src/utils/mixinEvents.js

@@ -16,7 +16,7 @@ export default {
     const r = this.$router;
 
     app.on('app-router-goto-tabs-create', () => r.push({ name: 'tabs-create' }));
-    app.on('app-router-goto-tab-list-index', index => this.goToTabWithListIndex(index));
+    app.on('app-router-goto-tab-list-index', (index) => this.goToTabWithListIndex(index));
   },
   methods: {
     goToTabWithListIndex(index) {