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.

tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts

@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
 import { ILiquorTreeExistingNode } from 'liquor-tree';
-import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { NodeType, INodeContent } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
 import { NodePredicateFilter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
 
 describe('NodePredicateFilter', () => {
@@ -18,7 +18,7 @@ describe('NodePredicateFilter', () => {
       states: undefined,
       children: [],
     };
-    const expected: INode = {
+    const expected: INodeContent = {
       id: 'script',
       text: 'script-text',
       isReversible: false,
@@ -26,8 +26,8 @@ describe('NodePredicateFilter', () => {
       children: [],
       type: NodeType.Script,
     };
-    let actual: INode;
-    const predicate = (node: INode) => { actual = node; return true; };
+    let actual: INodeContent;
+    const predicate = (node: INodeContent) => { actual = node; return true; };
     const sut = new NodePredicateFilter(predicate);
     // act
     sut.matcher('nop query', object);

tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts

@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
 import { ILiquorTreeNode } from 'liquor-tree';
-import { NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
 import { getNewState } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';
 
 describe('NodeStateUpdater', () => {

tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import {
   ILiquorTreeExistingNode, ILiquorTreeNewNode, ILiquorTreeNodeData, ICustomLiquorTreeData,
 } from 'liquor-tree';
-import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { NodeType, INodeContent } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
 import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';
 
 describe('NodeTranslator', () => {
@@ -27,7 +27,7 @@ describe('NodeTranslator', () => {
   });
 });
 
-function getNode(): INode {
+function getNode(): INodeContent {
   return {
     id: '1',
     text: 'parentcategory',
@@ -62,7 +62,7 @@ function getNode(): INode {
   };
 }
 
-function getExpectedExistingNodeData(node: INode): ILiquorTreeNodeData {
+function getExpectedExistingNodeData(node: INodeContent): ILiquorTreeNodeData {
   return {
     text: node.text,
     type: node.type,
@@ -71,7 +71,7 @@ function getExpectedExistingNodeData(node: INode): ILiquorTreeNodeData {
   };
 }
 
-function getExpectedNewNodeData(node: INode): ICustomLiquorTreeData {
+function getExpectedNewNodeData(node: INodeContent): ICustomLiquorTreeData {
   return {
     type: node.type,
     docs: node.docs,

tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts

@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { INode, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { INodeContent, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
 import { getReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
 import { ScriptReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
 import { CategoryReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
@@ -14,7 +14,7 @@ describe('ReverterFactory', () => {
     it('gets CategoryReverter for category node', () => {
       // arrange
       const category = new CategoryStub(0).withScriptIds('55');
-      const node = getNodeStub(getCategoryNodeId(category), NodeType.Category);
+      const node = getNodeContentStub(getCategoryNodeId(category), NodeType.Category);
       const collection = new CategoryCollectionStub()
         .withAction(category);
       // act
@@ -25,7 +25,7 @@ describe('ReverterFactory', () => {
     it('gets ScriptReverter for script node', () => {
       // arrange
       const script = new ScriptStub('test');
-      const node = getNodeStub(getScriptNodeId(script), NodeType.Script);
+      const node = getNodeContentStub(getScriptNodeId(script), NodeType.Script);
       const collection = new CategoryCollectionStub()
         .withAction(new CategoryStub(0).withScript(script));
       // act
@@ -34,7 +34,7 @@ describe('ReverterFactory', () => {
       expect(result instanceof ScriptReverter).to.equal(true);
     });
   });
-  function getNodeStub(nodeId: string, type: NodeType): INode {
+  function getNodeContentStub(nodeId: string, type: NodeType): INodeContent {
     return {
       id: nodeId,
       text: 'text',