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

@@ -1,7 +1,7 @@
 <template>
   <MenuOptionList>
     <MenuOptionListItem
-      v-for="os in this.allOses"
+      v-for="os in allOses"
       :key="os.name"
       :enabled="currentOs !== os.os"
       @click="changeOs(os.os)"
@@ -11,41 +11,55 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
+import {
+  defineComponent, computed,
+} from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
-import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { ApplicationFactory } from '@/application/ApplicationFactory';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import MenuOptionList from './MenuOptionList.vue';
 import MenuOptionListItem from './MenuOptionListItem.vue';
 
-@Component({
+interface IOsViewModel {
+  readonly name: string;
+  readonly os: OperatingSystem;
+}
+
+export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
   },
-})
-export default class TheOsChanger extends StatefulVue {
-  public allOses: Array<{ name: string, os: OperatingSystem }> = [];
+  setup() {
+    const { modifyCurrentContext, currentState } = useCollectionState();
+    const { application } = useApplication();
 
-  public currentOs?: OperatingSystem = null;
+    const allOses = computed<ReadonlyArray<IOsViewModel>>(() => (
+      application.getSupportedOsList() ?? [])
+      .map((os) : IOsViewModel => (
+        {
+          os,
+          name: renderOsName(os),
+        }
+      )));
 
-  public async created() {
-    const app = await ApplicationFactory.Current.getApp();
-    this.allOses = app.getSupportedOsList()
-      .map((os) => ({ os, name: renderOsName(os) }));
-  }
+    const currentOs = computed<OperatingSystem>(() => {
+      return currentState.value.os;
+    });
 
-  public async changeOs(newOs: OperatingSystem) {
-    const context = await this.getCurrentContext();
-    context.changeContext(newOs);
-  }
+    function changeOs(newOs: OperatingSystem) {
+      modifyCurrentContext((context) => {
+        context.changeContext(newOs);
+      });
+    }
 
-  protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
-    this.currentOs = newState.os;
-    this.$forceUpdate(); // v-bind:class is not updated otherwise
-  }
-}
+    return {
+      allOses,
+      currentOs,
+      changeOs,
+    };
+  },
+});
 
 function renderOsName(os: OperatingSystem): string {
   switch (os) {
@@ -56,7 +70,3 @@ function renderOsName(os: OperatingSystem): string {
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>