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/TheFooter/DownloadUrlListItem.vue

@@ -11,42 +11,48 @@
 
 <script lang="ts">
 import {
-  Component, Prop, Watch, Vue,
-} from 'vue-property-decorator';
+  defineComponent, PropType, computed,
+} from 'vue';
 import { Environment } from '@/application/Environment/Environment';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { ApplicationFactory } from '@/application/ApplicationFactory';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 
-@Component
-export default class DownloadUrlListItem extends Vue {
-  @Prop() public operatingSystem!: OperatingSystem;
+const currentOs = Environment.CurrentEnvironment.os;
 
-  public downloadUrl = '';
+export default defineComponent({
+  props: {
+    operatingSystem: {
+      type: Number as PropType<OperatingSystem>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { info } = useApplication();
 
-  public operatingSystemName = '';
+    const isCurrentOs = computed<boolean>(() => {
+      return currentOs === props.operatingSystem;
+    });
 
-  public isCurrentOs = false;
+    const operatingSystemName = computed<string>(() => {
+      return getOperatingSystemName(props.operatingSystem);
+    });
 
-  public hasCurrentOsDesktopVersion = false;
+    const hasCurrentOsDesktopVersion = computed<boolean>(() => {
+      return hasDesktopVersion(props.operatingSystem);
+    });
 
-  public async mounted() {
-    await this.onOperatingSystemChanged(this.operatingSystem);
-  }
+    const downloadUrl = computed<string | undefined>(() => {
+      return info.getDownloadUrl(props.operatingSystem);
+    });
 
-  @Watch('operatingSystem')
-  public async onOperatingSystemChanged(os: OperatingSystem) {
-    const currentOs = Environment.CurrentEnvironment.os;
-    this.isCurrentOs = os === currentOs;
-    this.downloadUrl = await getDownloadUrl(os);
-    this.operatingSystemName = getOperatingSystemName(os);
-    this.hasCurrentOsDesktopVersion = hasDesktopVersion(currentOs);
-  }
-}
-
-async function getDownloadUrl(os: OperatingSystem): Promise<string> {
-  const context = await ApplicationFactory.Current.getApp();
-  return context.info.getDownloadUrl(os);
-}
+    return {
+      downloadUrl,
+      operatingSystemName,
+      isCurrentOs,
+      hasCurrentOsDesktopVersion,
+    };
+  },
+});
 
 function hasDesktopVersion(os: OperatingSystem): boolean {
   return os === OperatingSystem.Windows