Refactor to Vue 3 recommended ESLint rules

These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.

- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
  `--max-warnings=0` flag. This enforces stricter code quality controls
  provided by Vue 3 rules.

.eslintrc.cjs

@@ -10,7 +10,7 @@ module.exports = {
   },
   extends: [
     // Vue specific rules, eslint-plugin-vue
-    'plugin:vue/essential',
+    'plugin:vue/vue3-recommended',
 
     // Extends eslint-config-airbnb
     '@vue/eslint-config-airbnb-with-typescript',

package.json

@@ -24,7 +24,7 @@
     "electron:preview": "electron-vite preview",
     "electron:prebuild": "electron-vite build",
     "electron:build": "electron-builder",
-    "lint:eslint": "eslint . --ignore-path .gitignore",
+    "lint:eslint": "eslint . --max-warnings=0 --ignore-path .gitignore",
     "lint:md": "markdownlint **/*.md --ignore node_modules",
     "lint:md:consistency": "remark . --frail --use remark-preset-lint-consistent",
     "lint:md:relative-urls": "remark . --frail --use remark-validate-links",

src/presentation/components/App.vue

@@ -7,7 +7,10 @@
       <TheCodeButtons class="app__row app__code-buttons" />
       <TheFooter />
     </div>
-    <component v-if="devToolkitComponent" :is="devToolkitComponent" />
+    <component
+      :is="devToolkitComponent"
+      v-if="devToolkitComponent"
+    />
   </div>
 </template>
 

src/presentation/components/Code/CodeButtons/CodeCopyButton.vue

@@ -1,8 +1,8 @@
 <template>
   <IconButton
     text="Copy"
-    @click="copyCode"
     icon-name="copy"
+    @click="copyCode"
   />
 </template>
 

src/presentation/components/Code/CodeButtons/CodeRunButton.vue

@@ -2,8 +2,8 @@
   <IconButton
     v-if="canRun"
     text="Run"
-    @click="executeCode"
     icon-name="play"
+    @click="executeCode"
   />
 </template>
 

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -9,7 +9,9 @@
         class="button__icon"
         :icon="iconName"
       />
-      <div class="button__text">{{text}}</div>
+      <div class="button__text">
+        {{ text }}
+      </div>
     </button>
   </div>
 </template>

src/presentation/components/Code/CodeButtons/Save/CodeSaveButton.vue

@@ -2,8 +2,8 @@
   <div>
     <IconButton
       :text="isDesktopVersion ? 'Save' : 'Download'"
-      @click="saveCode"
       :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
+      @click="saveCode"
     />
     <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
       <InstructionList :data="instructions" />

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -9,7 +9,7 @@
           class="copy-button"
           @click="copyCode"
         />
-        <template v-slot:tooltip>
+        <template #tooltip>
           Copy
         </template>
       </TooltipWrapper>

src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <TooltipWrapper>
     <AppIcon icon="circle-info" />
-    <template v-slot:tooltip>
+    <template #tooltip>
       <slot />
     </template>
   </TooltipWrapper>

src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue

@@ -20,19 +20,21 @@
     <p>
       <ol>
         <li
-          v-for='(step, index) in data.steps'
-          v-bind:key="index"
+          v-for="(step, index) in data.steps"
+          :key="index"
           class="step"
         >
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
-            <div class="details-container" v-if="step.action.details">
+            <div v-if="step.action.details" class="details-container">
+              <!-- eslint-disable vue/no-v-html -->
               <InfoTooltip><div v-html="step.action.details" /></InfoTooltip>
             </div>
           </div>
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
-            <div class="details-container" v-if="step.code.details">
+            <div v-if="step.code.details" class="details-container">
+              <!-- eslint-disable vue/no-v-html -->
               <InfoTooltip><div v-html="step.code.details" /></InfoTooltip>
             </div>
           </div>

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-if="hasCode">
+  <div v-if="hasCode" class="container">
     <CodeRunButton class="code-button" />
     <CodeSaveButton class="code-button" />
     <CodeCopyButton class="code-button" />

src/presentation/components/Code/TheCodeArea.vue

@@ -1,7 +1,8 @@
 <template>
   <SizeObserver
-    v-on:sizeChanged="sizeChanged()"
-    v-non-collapsing>
+    v-non-collapsing
+    @size-changed="sizeChanged()"
+  >
     <div
       :id="editorId"
       class="code-area"
@@ -24,18 +25,18 @@ import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonC
 import ace from './ace-importer';
 
 export default defineComponent({
-  props: {
-    theme: {
-      type: String,
-      default: undefined,
-    },
-  },
   components: {
     SizeObserver,
   },
   directives: {
     NonCollapsing,
   },
+  props: {
+    theme: {
+      type: String,
+      default: undefined,
+    },
+  },
   setup(props) {
     const { onStateChange, currentState } = injectKey((keys) => keys.useCollectionState);
     const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);

src/presentation/components/DevToolkit/DevToolkit.vue

@@ -6,9 +6,10 @@
     <hr />
     <button
       v-for="action in devActions"
-      @click="action.handler"
       :key="action.name"
-      type="button">
+      type="button"
+      @click="action.handler"
+    >
       {{ action.name }}
     </button>
   </div>

src/presentation/components/Scripts/Menu/MenuOptionList.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="list">
-    <div v-if="label">{{ label }}:</div>
+    <div v-if="label">
+      {{ label }}:
+    </div>
     <div class="items">
       <slot />
     </div>

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -5,12 +5,13 @@
       such as adding content in `::before` block without making it clickable.
     -->
     <span
-      v-bind:class="{
+      v-non-collapsing
+      :class="{
         disabled: !enabled,
         enabled: enabled,
       }"
-      v-non-collapsing
-      @click="onClicked()">{{label}}</span>
+      @click="onClicked()"
+    >{{ label }}</span>
   </span>
 </template>
 

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -7,7 +7,7 @@
         :enabled="currentSelection !== SelectionType.None"
         @click="selectType(SelectionType.None)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         Deselect all selected scripts.
         <br />
         💡 Good start to dive deeper into tweaks and select only what you want.
@@ -21,7 +21,7 @@
         :enabled="currentSelection !== SelectionType.Standard"
         @click="selectType(SelectionType.Standard)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🛡️ Balanced for privacy and functionality.
         <br />
         OS and applications will function normally.
@@ -37,7 +37,7 @@
         :enabled="currentSelection !== SelectionType.Strict"
         @click="selectType(SelectionType.Strict)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🚫 Stronger privacy, disables risky functions that may leak your data.
         <br />
         ⚠️ Double check to remove scripts where you would trade functionality for privacy
@@ -53,7 +53,7 @@
         :enabled="currentSelection !== SelectionType.All"
         @click="selectType(SelectionType.All)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🔒 Strongest privacy, disabling any functionality that may leak your data.
         <br />
         🛑 Not designed for daily users, it will break important functionalities.

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -4,8 +4,8 @@
       v-for="os in allOses"
       :key="os.name"
       :enabled="currentOs !== os.os"
-      @click="changeOs(os.os)"
       :label="os.name"
+      @click="changeOs(os.os)"
     />
   </MenuOptionList>
 </template>

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -3,9 +3,10 @@
     <TheSelector class="item" />
     <TheOsChanger class="item" />
     <TheViewChanger
+      v-if="!isSearching"
       class="item"
-      v-on:viewChanged="$emit('viewChanged', $event)"
-      v-if="!isSearching" />
+      @view-changed="$emit('viewChanged', $event)"
+    />
   </div>
 </template>
 
@@ -17,13 +18,19 @@ import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import TheOsChanger from './TheOsChanger.vue';
 import TheSelector from './Selector/TheSelector.vue';
 import TheViewChanger from './View/TheViewChanger.vue';
+import { ViewType } from './View/ViewType';
 
 export default defineComponent({
   components: {
     TheSelector,
     TheOsChanger,
     TheViewChanger,
   },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    viewChanged: (viewType: ViewType) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
   setup() {
     const { onStateChange } = injectKey((keys) => keys.useCollectionState);
     const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);

src/presentation/components/Scripts/Menu/View/TheViewChanger.vue

@@ -1,7 +1,8 @@
 <template>
   <MenuOptionList
     label="View"
-    class="part">
+    class="part"
+  >
     <MenuOptionListItem
       v-for="view in viewOptions"
       :key="view.type"

src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     class="slider"
-    v-bind:style="{
+    :style="{
       '--vertical-margin': verticalMargin,
       '--first-min-width': firstMinWidth,
       '--first-initial-width': firstInitialWidth,
       '--second-min-width': secondMinWidth,
     }"
   >
-    <div class="first" ref="firstElement">
+    <div ref="firstElement" class="first">
       <slot name="first" />
     </div>
     <SliderHandle class="handle" @resized="onResize($event)" />

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -2,7 +2,8 @@
   <div
     class="handle"
     :style="{ cursor: cursorCssValue }"
-    @mousedown="startResize">
+    @mousedown="startResize"
+  >
     <div class="line" />
     <AppIcon
       class="icon"

src/presentation/components/Scripts/TheScriptArea.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="scripts">
-    <TheScriptsMenu v-on:viewChanged="currentView = $event" />
+    <TheScriptsMenu @view-changed="currentView = $event" />
     <HorizontalResizeSlider
       class="row"
-      verticalMargin="15px"
-      firstInitialWidth="55%"
-      firstMinWidth="20%"
-      secondMinWidth="20%"
+      vertical-margin="15px"
+      first-initial-width="55%"
+      first-min-width="20%"
+      second-min-width="20%"
     >
-      <template v-slot:first>
-        <TheScriptsView :currentView="currentView" />
+      <template #first>
+        <TheScriptsView :current-view="currentView" />
       </template>
-      <template v-slot:second>
+      <template #second>
         <TheCodeArea theme="xcode" />
       </template>
     </HorizontalResizeSlider>

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -1,5 +1,7 @@
 <template>
-  <SizeObserver v-on:widthChanged="width = $event">
+  <SizeObserver
+    @width-changed="width = $event"
+  >
     <transition name="fade-transition">
       <div v-if="width">
         <!-- <div id="responsivity-debug">
@@ -14,21 +16,23 @@
           class="cards"
         >
           <CardListItem
+            v-for="categoryId of categoryIds"
+            :key="categoryId"
             class="card"
-            v-bind:class="{
+            :class="{
               'small-screen': width <= 500,
               'medium-screen': width > 500 && width < 750,
               'big-screen': width >= 750,
             }"
-            v-for="categoryId of categoryIds"
             :data-category="categoryId"
-            v-bind:key="categoryId"
-            :categoryId="categoryId"
-            :activeCategoryId="activeCategoryId"
-            v-on:cardExpansionChanged="onSelected(categoryId, $event)"
+            :category-id="categoryId"
+            :active-category-id="activeCategoryId"
+            @card-expansion-changed="onSelected(categoryId, $event)"
           />
         </div>
-        <div v-else class="error">Something went bad 😢</div>
+        <div v-else class="error">
+          Something went bad 😢
+        </div>
       </div>
     </transition>
   </SizeObserver>