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

@@ -33,57 +33,58 @@
         </div>
         <div class="footer__section__item">
           <font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
-          <a @click="$refs.privacyDialog.show()">Privacy</a>
+          <a @click="privacyDialog.show()">Privacy</a>
         </div>
       </div>
     </div>
-    <Dialog ref="privacyDialog">
+    <ModalDialog ref="privacyDialog">
       <PrivacyPolicy />
-    </Dialog>
+    </ModalDialog>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { defineComponent, ref, computed } from 'vue';
 import { Environment } from '@/application/Environment/Environment';
-import Dialog from '@/presentation/components/Shared/Dialog.vue';
-import { IApplication } from '@/domain/IApplication';
-import { ApplicationFactory } from '@/application/ApplicationFactory';
+import ModalDialog from '@/presentation/components/Shared/ModalDialog.vue';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
 
-@Component({
+const { isDesktop } = Environment.CurrentEnvironment;
+
+export default defineComponent({
   components: {
-    Dialog, PrivacyPolicy, DownloadUrlList,
+    ModalDialog,
+    PrivacyPolicy,
+    DownloadUrlList,
   },
-})
-export default class TheFooter extends Vue {
-  public readonly isDesktop = Environment.CurrentEnvironment.isDesktop;
+  setup() {
+    const { info } = useApplication();
 
-  public version = '';
+    const privacyDialog = ref<typeof ModalDialog>();
 
-  public repositoryUrl = '';
+    const version = computed<string>(() => info.version.toString());
 
-  public releaseUrl = '';
+    const homepageUrl = computed<string>(() => info.homepage);
 
-  public feedbackUrl = '';
+    const repositoryUrl = computed<string>(() => info.repositoryWebUrl);
 
-  public homepageUrl = '';
+    const releaseUrl = computed<string>(() => info.releaseUrl);
 
-  public async created() {
-    const app = await ApplicationFactory.Current.getApp();
-    this.initialize(app);
-  }
+    const feedbackUrl = computed<string>(() => info.feedbackUrl);
 
-  private initialize(app: IApplication) {
-    const { info } = app;
-    this.version = info.version.toString();
-    this.homepageUrl = info.homepage;
-    this.repositoryUrl = info.repositoryWebUrl;
-    this.releaseUrl = info.releaseUrl;
-    this.feedbackUrl = info.feedbackUrl;
-  }
-}
+    return {
+      isDesktop,
+      privacyDialog,
+      version,
+      homepageUrl,
+      repositoryUrl,
+      releaseUrl,
+      feedbackUrl,
+    };
+  },
+});
 </script>
 
 <style scoped lang="scss">