Refactor code to comply with ESLint rules

Major refactoring using ESLint with rules from AirBnb and Vue. Enable most of the ESLint rules and do necessary linting in the code. Also add more information for rules that are disabled to describe what they are and why they are disabled. Allow logging (`console.log`) in test files, and in development mode (e.g. when working with `npm run serve`), but disable it when environment is production (as pre-configured by Vue). Also add flag (`--mode production`) in `lint:eslint` command so production linting is executed earlier in lifecycle. Disable rules that requires a separate work. Such as ESLint rules that are broken in TypeScript: no-useless-constructor (eslint/eslint#14118) and no-shadow (eslint/eslint#13014).
2022-01-02 18:20:14 +01:00
parent 96265b75de
commit 5b1fbe1e2f
341 changed files with 16126 additions and 15101 deletions
--- a/src/presentation/components/Scripts/Menu/MenuOptionList.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="list">
-        <div v-if="label">{{ label }}:</div>
-        <div class="items">
-            <slot />
-        </div>
+  <div class="list">
+    <div v-if="label">{{ label }}:</div>
+    <div class="items">
+      <slot />
    </div>
+  </div>
 </template>

 <script lang="ts">
@@ -26,13 +26,13 @@ $gap: 0.25rem;
  align-items: center;
  .items {
    * + *::before {
-        content: '|';
-        padding-right: $gap;
-        padding-left: $gap;
+      content: '|';
+      padding-right: $gap;
+      padding-left: $gap;
    }
  }
  > *:not(:last-child) {
    margin-right: $gap;
  }
 }
-</style>
+</style>
--- a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
@@ -1,23 +1,27 @@
 <template>
-    <span> <!-- Parent wrapper allows adding content inside with CSS without making it clickable -->
-        <span
-            v-bind:class="{ 'disabled': !enabled, 'enabled': enabled}"
-            v-non-collapsing
-            @click="enabled && onClicked()">{{label}}</span>
-    </span>
+  <span> <!-- Parent wrapper allows adding content inside with CSS without making it clickable -->
+    <span
+      v-bind:class="{ 'disabled': !enabled, 'enabled': enabled}"
+      v-non-collapsing
+      @click="enabled && onClicked()">{{label}}</span>
+  </span>
 </template>

 <script lang="ts">
-import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
+import {
+  Component, Prop, Emit, Vue,
+} from 'vue-property-decorator';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';

@Component({
-    directives: { NonCollapsing },
+  directives: { NonCollapsing },
 })
 export default class MenuOptionListItem extends Vue {
  @Prop() public enabled: boolean;
+
  @Prop() public label: string;
-  @Emit('click') public onClicked() { return; }
+
+  @Emit('click') public onClicked() { /* do nothing except firing event */ }
 }
 </script>

@@ -27,11 +31,11 @@ export default class MenuOptionListItem extends Vue {
 .enabled {
    cursor: pointer;
    &:hover {
-        font-weight:bold;
-        text-decoration:underline;
-    }
+    font-weight:bold;
+    text-decoration:underline;
+  }
 }
 .disabled {
-    color: $color-primary-light;
+  color: $color-primary-light;
 }
-</style>
+</style>
--- a/src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts
+++ b/src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts
@@ -5,82 +5,85 @@ import { scrambledEqual } from '@/application/Common/Array';
 import { ICategoryCollectionState, IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';

 export enum SelectionType {
-    Standard,
-    Strict,
-    All,
-    None,
-    Custom,
+  Standard,
+  Strict,
+  All,
+  None,
+  Custom,
 }

 export class SelectionTypeHandler {
-    constructor(private readonly state: ICategoryCollectionState) {
-        if (!state) { throw new Error('undefined state'); }
+  constructor(private readonly state: ICategoryCollectionState) {
+    if (!state) { throw new Error('undefined state'); }
+  }
+
+  public selectType(type: SelectionType) {
+    if (type === SelectionType.Custom) {
+      throw new Error('cannot select custom type');
    }
-    public selectType(type: SelectionType) {
-        if (type === SelectionType.Custom) {
-            throw new Error('cannot select custom type');
-        }
-        const selector = selectors.get(type);
-        selector.select(this.state);
-    }
-    public getCurrentSelectionType(): SelectionType {
-        for (const [type, selector] of Array.from(selectors.entries())) {
-            if (selector.isSelected(this.state)) {
-                return type;
-            }
-        }
-        return SelectionType.Custom;
+    const selector = selectors.get(type);
+    selector.select(this.state);
+  }
+
+  public getCurrentSelectionType(): SelectionType {
+    for (const [type, selector] of Array.from(selectors.entries())) {
+      if (selector.isSelected(this.state)) {
+        return type;
+      }
    }
+    return SelectionType.Custom;
+  }
 }

 interface ISingleTypeHandler {
-    isSelected: (state: IReadOnlyCategoryCollectionState) => boolean;
-    select: (state: ICategoryCollectionState) => void;
+  isSelected: (state: IReadOnlyCategoryCollectionState) => boolean;
+  select: (state: ICategoryCollectionState) => void;
 }

 const selectors = new Map<SelectionType, ISingleTypeHandler>([
-    [SelectionType.None, {
-        select: (state) =>
-            state.selection.deselectAll(),
-        isSelected: (state) =>
-            state.selection.selectedScripts.length === 0,
-    }],
-    [SelectionType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
-    [SelectionType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
-    [SelectionType.All, {
-        select: (state) =>
-            state.selection.selectAll(),
-        isSelected: (state) =>
-            state.selection.selectedScripts.length === state.collection.totalScripts,
-    }],
+  [SelectionType.None, {
+    select: (state) => state.selection.deselectAll(),
+    isSelected: (state) => state.selection.selectedScripts.length === 0,
+  }],
+  [SelectionType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
+  [SelectionType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
+  [SelectionType.All, {
+    select: (state) => state.selection.selectAll(),
+    isSelected: (state) => state.selection.selectedScripts.length === state.collection.totalScripts,
+  }],
 ]);

 function getRecommendationLevelSelector(level: RecommendationLevel): ISingleTypeHandler {
-    return {
-        select: (state) => selectOnly(level, state),
-        isSelected: (state) => hasAllSelectedLevelOf(level, state),
-    };
+  return {
+    select: (state) => selectOnly(level, state),
+    isSelected: (state) => hasAllSelectedLevelOf(level, state),
+  };
 }

-function hasAllSelectedLevelOf(level: RecommendationLevel, state: IReadOnlyCategoryCollectionState) {
-    const scripts = state.collection.getScriptsByLevel(level);
-    const selectedScripts = state.selection.selectedScripts;
-    return areAllSelected(scripts, selectedScripts);
+function hasAllSelectedLevelOf(
+  level: RecommendationLevel,
+  state: IReadOnlyCategoryCollectionState,
+) {
+  const scripts = state.collection.getScriptsByLevel(level);
+  const { selectedScripts } = state.selection;
+  return areAllSelected(scripts, selectedScripts);
 }

 function selectOnly(level: RecommendationLevel, state: ICategoryCollectionState) {
-    const scripts = state.collection.getScriptsByLevel(level);
-    state.selection.selectOnly(scripts);
+  const scripts = state.collection.getScriptsByLevel(level);
+  state.selection.selectOnly(scripts);
 }

 function areAllSelected(
-    expectedScripts: ReadonlyArray<IScript>,
-    selection: ReadonlyArray<SelectedScript>): boolean {
-    selection = selection.filter((selected) => !selected.revert);
-    if (expectedScripts.length < selection.length) {
-        return false;
-    }
-    const selectedScriptIds = selection.map((script) => script.id);
-    const expectedScriptIds = expectedScripts.map((script) => script.id);
-    return scrambledEqual(selectedScriptIds, expectedScriptIds);
+  expectedScripts: ReadonlyArray<IScript>,
+  selection: ReadonlyArray<SelectedScript>,
+): boolean {
+  const selectedScriptIds = selection
+    .filter((selected) => !selected.revert)
+    .map((script) => script.id);
+  if (expectedScripts.length < selectedScriptIds.length) {
+    return false;
+  }
+  const expectedScriptIds = expectedScripts.map((script) => script.id);
+  return scrambledEqual(selectedScriptIds, expectedScriptIds);
 }
--- a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
@@ -1,46 +1,46 @@
 <template>
-    <MenuOptionList label="Select">
-        <MenuOptionListItem
-            label="None"
-            :enabled="this.currentSelection !== SelectionType.None"
-            @click="selectType(SelectionType.None)"
-            v-tooltip=" 'Deselect all selected scripts.<br/>' +
-                        '💡 Good start to dive deeper into tweaks and select only what you want.'"
-            />
-        <MenuOptionListItem
-            label="Standard"
-            :enabled="this.currentSelection !== SelectionType.Standard"
-            @click="selectType(SelectionType.Standard)"
-            v-tooltip=" '🛡️ Balanced for privacy and functionality.<br/>' +
-                        'OS and applications will function normally.<br/>' +
-                        '💡 Recommended for everyone'"
-            />
-        <MenuOptionListItem
-            label="Strict"
-            :enabled="this.currentSelection !== SelectionType.Strict"
-            @click="selectType(SelectionType.Strict)"
-            v-tooltip=" '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>' +
-                        '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>' +
-                        '💡 Recommended for daily users that prefers more privacy over non-essential functions'"
-            />
-        <MenuOptionListItem
-            label="All"
-            :enabled="this.currentSelection !== SelectionType.All"
-            @click="selectType(SelectionType.All)"
-            v-tooltip=" '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>' +
-                        '🛑 Not designed for daily users, it will break important functionalities.<br/>' +
-                        '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'"
-        />
-    </MenuOptionList>
+  <MenuOptionList label="Select">
+    <MenuOptionListItem
+      label="None"
+      :enabled="this.currentSelection !== SelectionType.None"
+      @click="selectType(SelectionType.None)"
+      v-tooltip=" 'Deselect all selected scripts.<br/>' +
+                  '💡 Good start to dive deeper into tweaks and select only what you want.'"
+      />
+    <MenuOptionListItem
+      label="Standard"
+      :enabled="this.currentSelection !== SelectionType.Standard"
+      @click="selectType(SelectionType.Standard)"
+      v-tooltip=" '🛡️ Balanced for privacy and functionality.<br/>' +
+                  'OS and applications will function normally.<br/>' +
+                  '💡 Recommended for everyone'"
+      />
+    <MenuOptionListItem
+      label="Strict"
+      :enabled="this.currentSelection !== SelectionType.Strict"
+      @click="selectType(SelectionType.Strict)"
+      v-tooltip=" '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>' +
+        + '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
+        + '💡 Recommended for daily users that prefers more privacy over non-essential functions'"
+      />
+    <MenuOptionListItem
+        label="All"
+        :enabled="this.currentSelection !== SelectionType.All"
+        @click="selectType(SelectionType.All)"
+        v-tooltip=" '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
+          + '🛑 Not designed for daily users, it will break important functionalities.<br/>'
+          + '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'"
+    />
+  </MenuOptionList>
 </template>

 <script lang="ts">
 import { Component } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';
-import MenuOptionList from './../MenuOptionList.vue';
+import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
+import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';

@Component({
  components: {
@@ -49,27 +49,29 @@ import MenuOptionListItem from '../MenuOptionListItem.vue';
  },
 })
 export default class TheSelector extends StatefulVue {
-    public SelectionType = SelectionType;
-    public currentSelection = SelectionType.None;
-    private selectionTypeHandler: SelectionTypeHandler;
+  public SelectionType = SelectionType;

-    public async selectType(type: SelectionType) {
-        if (this.currentSelection === type) {
-            return;
-        }
-        this.selectionTypeHandler.selectType(type);
-    }
+  public currentSelection = SelectionType.None;

-    protected handleCollectionState(newState: ICategoryCollectionState): void {
-        this.events.unsubscribeAll();
-        this.selectionTypeHandler = new SelectionTypeHandler(newState);
-        this.updateSelections();
-        this.events.register(newState.selection.changed.on(() => this.updateSelections()));
-    }
+  private selectionTypeHandler: SelectionTypeHandler;

-    private updateSelections() {
-       this.currentSelection = this.selectionTypeHandler.getCurrentSelectionType();
+  public async selectType(type: SelectionType) {
+    if (this.currentSelection === type) {
+      return;
    }
+    this.selectionTypeHandler.selectType(type);
+  }
+
+  protected handleCollectionState(newState: ICategoryCollectionState): void {
+    this.events.unsubscribeAll();
+    this.selectionTypeHandler = new SelectionTypeHandler(newState);
+    this.updateSelections();
+    this.events.register(newState.selection.changed.on(() => this.updateSelections()));
+  }
+
+  private updateSelections() {
+    this.currentSelection = this.selectionTypeHandler.getCurrentSelectionType();
+  }
 }

 </script>
--- a/src/presentation/components/Scripts/Menu/TheOsChanger.vue
+++ b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
@@ -1,11 +1,11 @@
 <template>
  <MenuOptionList>
-      <MenuOptionListItem
-        v-for="os in this.allOses" :key="os.name"
-        :enabled="currentOs !== os.os"
-        @click="changeOs(os.os)"
-        :label="os.name"
-        />
+    <MenuOptionListItem
+      v-for="os in this.allOses" :key="os.name"
+      :enabled="currentOs !== os.os"
+      @click="changeOs(os.os)"
+      :label="os.name"
+      />
  </MenuOptionList>
 </template>

@@ -26,6 +26,7 @@ import MenuOptionListItem from './MenuOptionListItem.vue';
 })
 export default class TheOsChanger extends StatefulVue {
  public allOses: Array<{ name: string, os: OperatingSystem }> = [];
+
  public currentOs?: OperatingSystem = null;

  public async created() {
@@ -33,6 +34,7 @@ export default class TheOsChanger extends StatefulVue {
    this.allOses = app.getSupportedOsList()
      .map((os) => ({ os, name: renderOsName(os) }));
  }
+
  public async changeOs(newOs: OperatingSystem) {
    const context = await this.getCurrentContext();
    context.changeContext(newOs);
@@ -45,11 +47,11 @@ export default class TheOsChanger extends StatefulVue {
 }

 function renderOsName(os: OperatingSystem): string {
-    switch (os) {
-      case OperatingSystem.Windows: return 'Windows';
-      case OperatingSystem.macOS: return 'macOS';
-      default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
-    }
+  switch (os) {
+    case OperatingSystem.Windows: return 'Windows';
+    case OperatingSystem.macOS: return 'macOS';
+    default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
+  }
 }
 </script>

--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -1,22 +1,22 @@
 <template>
-    <div id="container">
-        <TheSelector class="item" />
-        <TheOsChanger class="item"  />
-        <TheViewChanger
-            class="item"
-            v-on:viewChanged="$emit('viewChanged', $event)"
-            v-if="!this.isSearching" />
-    </div>
+  <div id="container">
+    <TheSelector class="item" />
+    <TheOsChanger class="item"  />
+    <TheViewChanger
+      class="item"
+      v-on:viewChanged="$emit('viewChanged', $event)"
+      v-if="!this.isSearching" />
+  </div>
 </template>

 <script lang="ts">
 import { Component } from 'vue-property-decorator';
-import TheOsChanger from './TheOsChanger.vue';
-import TheSelector from './Selector/TheSelector.vue';
-import TheViewChanger from './View/TheViewChanger.vue';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
+import TheOsChanger from './TheOsChanger.vue';
+import TheSelector from './Selector/TheSelector.vue';
+import TheViewChanger from './View/TheViewChanger.vue';

@Component({
  components: {
@@ -34,24 +34,22 @@ export default class TheScriptsMenu extends StatefulVue {
    this.unsubscribeAll();
  }

-  protected initialize(): void {
-    return;
-  }
  protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
    this.subscribe(newState);
  }

  private subscribe(state: IReadOnlyCategoryCollectionState) {
-      this.listeners.push(state.filter.filterRemoved.on(() => {
-          this.isSearching = false;
-      }));
-      state.filter.filtered.on(() => {
-          this.isSearching = true;
-      });
+    this.listeners.push(state.filter.filterRemoved.on(() => {
+      this.isSearching = false;
+    }));
+    state.filter.filtered.on(() => {
+      this.isSearching = true;
+    });
  }
+
  private unsubscribeAll() {
-      this.listeners.forEach((listener) => listener.unsubscribe());
-      this.listeners.splice(0, this.listeners.length);
+    this.listeners.forEach((listener) => listener.unsubscribe());
+    this.listeners.splice(0, this.listeners.length);
  }
 }
 </script>
@@ -63,18 +61,18 @@ $margin-between-lines: 7px;
  flex-wrap: wrap;
  margin-top: -$margin-between-lines;
  .item {
-      flex: 1;
-      white-space: nowrap;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: $margin-between-lines 5px 0 5px;
-      &:first-child {
-          justify-content: flex-start;
-      }
-      &:last-child {
-          justify-content: flex-end;
-      }
+    flex: 1;
+    white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: $margin-between-lines 5px 0 5px;
+    &:first-child {
+      justify-content: flex-start;
+    }
+    &:last-child {
+      justify-content: flex-end;
+    }
  }
 }
 </style>
--- a/src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
+++ b/src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
@@ -1,21 +1,21 @@
 <template>
-    <MenuOptionList
-        label="View"
-        class="part">
-        <MenuOptionListItem
-            v-for="view in this.viewOptions" :key="view.type"
-            :label="view.displayName"
-            :enabled="currentView !== view.type"
-            @click="setView(view.type)"
-        />
-    </MenuOptionList>
+  <MenuOptionList
+    label="View"
+    class="part">
+    <MenuOptionListItem
+      v-for="view in this.viewOptions" :key="view.type"
+      :label="view.displayName"
+      :enabled="currentView !== view.type"
+      @click="setView(view.type)"
+    />
+  </MenuOptionList>
 </template>

 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import MenuOptionList from '../MenuOptionList.vue';
+import MenuOptionListItem from '../MenuOptionListItem.vue';
 import { ViewType } from './ViewType';
-import MenuOptionList from './../MenuOptionList.vue';
-import MenuOptionListItem from './../MenuOptionListItem.vue';

 const DefaultView = ViewType.Cards;

@@ -26,32 +26,35 @@ const DefaultView = ViewType.Cards;
  },
 })
 export default class TheViewChanger extends Vue {
-    public readonly viewOptions: IViewOption[] = [
-        { type: ViewType.Cards, displayName: 'Cards' },
-        { type: ViewType.Tree, displayName: 'Tree' },
-    ];
-    public ViewType = ViewType;
-    public currentView?: ViewType = null;
+  public readonly viewOptions: IViewOption[] = [
+    { type: ViewType.Cards, displayName: 'Cards' },
+    { type: ViewType.Tree, displayName: 'Tree' },
+  ];

-    public mounted() {
-        this.setView(DefaultView);
-    }
-    public groupBy(type: ViewType) {
-        this.setView(type);
-    }
+  public ViewType = ViewType;

-    private setView(view: ViewType) {
-        if (this.currentView === view) {
-            throw new Error(`View is already "${ViewType[view]}"`);
-        }
-        this.currentView = view;
-        this.$emit('viewChanged', this.currentView);
+  public currentView?: ViewType = null;
+
+  public mounted() {
+    this.setView(DefaultView);
+  }
+
+  public groupBy(type: ViewType) {
+    this.setView(type);
+  }
+
+  private setView(view: ViewType) {
+    if (this.currentView === view) {
+      throw new Error(`View is already "${ViewType[view]}"`);
    }
+    this.currentView = view;
+    this.$emit('viewChanged', this.currentView);
+  }
 }

 interface IViewOption {
-    readonly type: ViewType;
-    readonly displayName: string;
+  readonly type: ViewType;
+  readonly displayName: string;
 }

 </script>
--- a/src/presentation/components/Scripts/Menu/View/ViewType.ts
+++ b/src/presentation/components/Scripts/Menu/View/ViewType.ts
@@ -1,4 +1,4 @@
 export enum ViewType {
-    Cards = 1,
-    Tree = 0,
+  Cards = 1,
+  Tree = 0,
 }