Refactor Vue components using Composition API #230

- Migrate `StatefulVue`:
  - Introduce `UseCollectionState` that replaces its behavior and acts
    as a shared state store.
  - Add more encapsulated, granular functions based on read or write
    access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
  modern parses, fix linting errors.
  - Rename Dialog to ModalDialog as after refactoring,
    eslintvue/no-reserved-component-names does not allow name Dialog.
  - To comply with `vue/multi-word-component-names`, rename:
    - `Code`          -> `CodeInstruction`
    - `Handle`        -> `SliderHandle`
    - `Documentable`  -> `DocumentableNode`
    - `Node`          -> `NodeContent`
    - `INode`         -> `INodeContent`
    - `Responsive`    -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
  dependencies.
- Refactor `watch` with computed properties when possible for cleaner
  code.
  - Introduce `UseApplication` to reduce repeated code in new components
    that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
  for getting application context/state/instance to simplify the code by
  removing async calls. However, mocha (unit and integration) tests do
  not run with top level awaits, so a workaround is used.

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

@@ -2,7 +2,7 @@
   <MenuOptionList label="Select">
     <MenuOptionListItem
       label="None"
-      :enabled="this.currentSelection !== SelectionType.None"
+      :enabled="currentSelection !== SelectionType.None"
       @click="selectType(SelectionType.None)"
       v-tooltip="
         'Deselect all selected scripts.<br/>'
@@ -11,7 +11,7 @@
     />
     <MenuOptionListItem
       label="Standard"
-      :enabled="this.currentSelection !== SelectionType.Standard"
+      :enabled="currentSelection !== SelectionType.Standard"
       @click="selectType(SelectionType.Standard)"
       v-tooltip="
         '🛡️ Balanced for privacy and functionality.<br/>'
@@ -20,7 +20,7 @@
     />
     <MenuOptionListItem
       label="Strict"
-      :enabled="this.currentSelection !== SelectionType.Strict"
+      :enabled="currentSelection !== SelectionType.Strict"
       @click="selectType(SelectionType.Strict)"
       v-tooltip="
         '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
@@ -30,7 +30,7 @@
     />
     <MenuOptionListItem
       label="All"
-      :enabled="this.currentSelection !== SelectionType.All"
+      :enabled="currentSelection !== SelectionType.All"
       @click="selectType(SelectionType.All)"
       v-tooltip="
         '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
@@ -42,47 +42,59 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
+import { defineComponent, ref } from 'vue';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
 import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';
 
-@Component({
+export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
   },
-})
-export default class TheSelector extends StatefulVue {
-  public SelectionType = SelectionType;
+  setup() {
+    const { modifyCurrentState, onStateChange, events } = useCollectionState();
 
-  public currentSelection = SelectionType.None;
+    const currentSelection = ref(SelectionType.None);
 
-  private selectionTypeHandler: SelectionTypeHandler;
+    let selectionTypeHandler: SelectionTypeHandler;
 
-  public async selectType(type: SelectionType) {
-    if (this.currentSelection === type) {
-      return;
+    onStateChange(() => {
+      unregisterMutators();
+
+      modifyCurrentState((state) => {
+        registerStateMutator(state);
+      });
+    }, { immediate: true });
+
+    function unregisterMutators() {
+      events.unsubscribeAll();
     }
-    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()));
-  }
+    function registerStateMutator(state: ICategoryCollectionState) {
+      selectionTypeHandler = new SelectionTypeHandler(state);
+      updateSelections();
+      events.register(state.selection.changed.on(() => updateSelections()));
+    }
 
-  private updateSelections() {
-    this.currentSelection = this.selectionTypeHandler.getCurrentSelectionType();
-  }
-}
+    function selectType(type: SelectionType) {
+      if (currentSelection.value === type) {
+        return;
+      }
+      selectionTypeHandler.selectType(type);
+    }
 
+    function updateSelections() {
+      currentSelection.value = selectionTypeHandler.getCurrentSelectionType();
+    }
+
+    return {
+      SelectionType,
+      currentSelection,
+      selectType,
+    };
+  },
+});
 </script>
-
-<style scoped lang="scss">
-
-</style>