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/TheScriptsMenu.vue

@@ -5,53 +5,55 @@
     <TheViewChanger
       class="item"
       v-on:viewChanged="$emit('viewChanged', $event)"
-      v-if="!this.isSearching" />
+      v-if="!isSearching" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
+import { defineComponent, ref, onUnmounted } from 'vue';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 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({
+export default defineComponent({
   components: {
     TheSelector,
     TheOsChanger,
     TheViewChanger,
   },
-})
-export default class TheScriptsMenu extends StatefulVue {
-  public isSearching = false;
+  setup() {
+    const { onStateChange, events } = useCollectionState();
 
-  private listeners = new Array<IEventSubscription>();
+    const isSearching = ref(false);
 
-  public destroyed() {
-    this.unsubscribeAll();
-  }
+    onStateChange((state) => {
+      subscribe(state);
+    }, { immediate: true });
 
-  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;
+    onUnmounted(() => {
+      unsubscribeAll();
     });
-  }
 
-  private unsubscribeAll() {
-    this.listeners.forEach((listener) => listener.unsubscribe());
-    this.listeners.splice(0, this.listeners.length);
-  }
-}
+    function subscribe(state: IReadOnlyCategoryCollectionState) {
+      events.register(state.filter.filterRemoved.on(() => {
+        isSearching.value = false;
+      }));
+      events.register(state.filter.filtered.on(() => {
+        isSearching.value = true;
+      }));
+    }
+
+    function unsubscribeAll() {
+      events.unsubscribeAll();
+    }
+
+    return {
+      isSearching,
+    };
+  },
+});
 </script>
 
 <style scoped lang="scss">