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/Code/CodeButtons/Instructions/InstructionList.vue

@@ -6,8 +6,8 @@
     <hr />
     <p>
       <strong>1. The easy alternative</strong>. Run your script without any manual steps by
-      <a :href="this.macOsDownloadUrl">downloading desktop version</a> of {{ this.appName }} on the
-      {{ this.osName }} system you wish to configure, and then click on the Run button. This is
+      <a :href="macOsDownloadUrl">downloading desktop version</a> of {{ appName }} on the
+      {{ osName }} system you wish to configure, and then click on the Run button. This is
       recommended for most users.
     </p>
     <hr />
@@ -20,7 +20,7 @@
     <p>
       <ol>
         <li
-          v-for='(step, index) in this.data.steps'
+          v-for='(step, index) in data.steps'
           v-bind:key="index"
           class="step"
         >
@@ -34,7 +34,7 @@
             />
           </div>
           <div v-if="step.code" class="step__code">
-            <Code>{{ step.code.instruction }}</Code>
+            <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
             <font-awesome-icon
               v-if="step.code.details"
               class="explanation"
@@ -49,36 +49,47 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import {
+  defineComponent, PropType, computed,
+} from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { ApplicationFactory } from '@/application/ApplicationFactory';
-import Code from './Code.vue';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
 
-@Component({
+export default defineComponent({
   components: {
-    Code,
+    CodeInstruction,
   },
-})
-export default class InstructionList extends Vue {
-  public appName = '';
+  props: {
+    data: {
+      type: Object as PropType<IInstructionListData>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { info } = useApplication();
 
-  public macOsDownloadUrl = '';
+    const appName = computed<string>(() => info.name);
 
-  public osName = '';
+    const macOsDownloadUrl = computed<string>(
+      () => info.getDownloadUrl(OperatingSystem.macOS),
+    );
 
-  @Prop() public data: IInstructionListData;
+    const osName = computed<string>(() => {
+      if (!props.data) {
+        throw new Error('missing data');
+      }
+      return renderOsName(props.data.operatingSystem);
+    });
 
-  public async created() {
-    if (!this.data) {
-      throw new Error('missing data');
-    }
-    const app = await ApplicationFactory.Current.getApp();
-    this.appName = app.info.name;
-    this.macOsDownloadUrl = app.info.getDownloadUrl(OperatingSystem.macOS);
-    this.osName = renderOsName(this.data.operatingSystem);
-  }
-}
+    return {
+      appName,
+      macOsDownloadUrl,
+      osName,
+    };
+  },
+});
 
 function renderOsName(os: OperatingSystem): string {
   switch (os) {