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/ScriptNodeParser.spec.ts

@@ -4,7 +4,7 @@ import {
   getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId, parseSingleCategory,
   parseAllCategories,
 } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
-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 { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
 import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
@@ -87,7 +87,7 @@ function isReversible(category: ICategory): boolean {
   return category.subCategories.every((c) => isReversible(c));
 }
 
-function expectSameCategory(node: INode, category: ICategory): void {
+function expectSameCategory(node: INodeContent, category: ICategory): void {
   expect(node.type).to.equal(NodeType.Category, getErrorMessage('type'));
   expect(node.id).to.equal(getCategoryNodeId(category), getErrorMessage('id'));
   expect(node.docs).to.equal(category.docs, getErrorMessage('docs'));
@@ -107,7 +107,7 @@ function expectSameCategory(node: INode, category: ICategory): void {
   }
 }
 
-function expectSameScript(node: INode, script: IScript): void {
+function expectSameScript(node: INodeContent, script: IScript): void {
   expect(node.type).to.equal(NodeType.Script, getErrorMessage('type'));
   expect(node.id).to.equal(getScriptNodeId(script), getErrorMessage('id'));
   expect(node.docs).to.equal(script.docs, getErrorMessage('docs'));

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',

tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts

@@ -0,0 +1,31 @@
+import 'mocha';
+import { expect } from 'chai';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import { ApplicationStub } from '@tests/unit/shared/Stubs/ApplicationStub';
+import { ProjectInformationStub } from '@tests/unit/shared/Stubs/ProjectInformationStub';
+
+describe('UseApplication', () => {
+  it('should return expected info', () => {
+    // arrange
+    const expectedInfo = new ProjectInformationStub()
+      .withName('expected-project-information');
+    const application = new ApplicationStub()
+      .withProjectInformation(expectedInfo);
+    // act
+    const { info } = useApplication(application);
+    // assert
+    expect(info).to.equal(expectedInfo);
+  });
+
+  it('should return expected application', () => {
+    // arrange
+    const expectedApp = new ApplicationStub()
+      .withProjectInformation(
+        new ProjectInformationStub().withName('expected-application'),
+      );
+    // act
+    const { application } = useApplication(expectedApp);
+    // assert
+    expect(application).to.equal(expectedApp);
+  });
+});

tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts

@@ -0,0 +1,238 @@
+import 'mocha';
+import { expect } from 'chai';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
+import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
+import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { ApplicationContextChangedEventStub } from '@tests/unit/shared/Stubs/ApplicationContextChangedEventStub';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
+
+describe('UseCollectionState', () => {
+  describe('currentContext', () => {
+    it('returns current context', () => {
+      // arrange
+      const expected = new ApplicationContextStub();
+
+      // act
+      const { currentContext } = useCollectionState(expected);
+
+      // assert
+      expect(currentContext).to.equal(expected);
+    });
+  });
+
+  describe('currentState', () => {
+    it('returns current collection state', () => {
+      // arrange
+      const expected = new CategoryCollectionStateStub();
+      const context = new ApplicationContextStub()
+        .withState(expected);
+
+      // act
+      const { currentState } = useCollectionState(context);
+
+      // assert
+      expect(currentState.value).to.equal(expected);
+    });
+    it('returns changed collection state', () => {
+      // arrange
+      const newState = new CategoryCollectionStateStub();
+      const context = new ApplicationContextStub();
+      const { currentState } = useCollectionState(context);
+
+      // act
+      context.dispatchContextChange(
+        new ApplicationContextChangedEventStub().withNewState(newState),
+      );
+
+      // assert
+      expect(currentState.value).to.equal(newState);
+    });
+  });
+
+  describe('onStateChange', () => {
+    describe('throws when callback is absent', () => {
+      itEachAbsentObjectValue((absentValue) => {
+        // arrange
+        const expectedError = 'missing state handler';
+        const context = new ApplicationContextStub();
+        const { onStateChange } = useCollectionState(context);
+        // act
+        const act = () => onStateChange(absentValue);
+        // assert
+        expect(act).to.throw(expectedError);
+      });
+    });
+    it('call handler when context state changes', () => {
+      // arrange
+      const expected = true;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+      let wasCalled = false;
+
+      // act
+      onStateChange(() => {
+        wasCalled = true;
+      });
+      context.dispatchContextChange();
+
+      // assert
+      expect(wasCalled).to.equal(expected);
+    });
+    it('call handler immediately when immediate is true', () => {
+      // arrange
+      const expected = true;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+      let wasCalled = false;
+
+      // act
+      onStateChange(() => {
+        wasCalled = true;
+      }, { immediate: true });
+
+      // assert
+      expect(wasCalled).to.equal(expected);
+    });
+    it('does not call handler immediately when immediate is false', () => {
+      // arrange
+      const expected = false;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+      let wasCalled = false;
+
+      // act
+      onStateChange(() => {
+        wasCalled = true;
+      }, { immediate: false });
+
+      // assert
+      expect(wasCalled).to.equal(expected);
+    });
+    it('call multiple handlers when context state changes', () => {
+      // arrange
+      const expected = 5;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+      let totalCalled = 0;
+
+      // act
+      onStateChange(() => {
+        totalCalled++;
+      }, { immediate: false });
+      for (let i = 0; i < expected; i++) {
+        context.dispatchContextChange();
+      }
+
+      // assert
+      expect(totalCalled).to.equal(expected);
+    });
+    it('call handler with new state after state changes', () => {
+      // arrange
+      const expected = new CategoryCollectionStateStub();
+      let actual: IReadOnlyCategoryCollectionState;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+
+      // act
+      onStateChange((newState) => {
+        actual = newState;
+      });
+      context.dispatchContextChange(
+        new ApplicationContextChangedEventStub().withNewState(expected),
+      );
+
+      // assert
+      expect(actual).to.equal(expected);
+    });
+    it('call handler with old state after state changes', () => {
+      // arrange
+      const expected = new CategoryCollectionStateStub();
+      let actual: IReadOnlyCategoryCollectionState;
+      const context = new ApplicationContextStub();
+      const { onStateChange } = useCollectionState(context);
+
+      // act
+      onStateChange((_, oldState) => {
+        actual = oldState;
+      });
+      context.dispatchContextChange(
+        new ApplicationContextChangedEventStub().withOldState(expected),
+      );
+
+      // assert
+      expect(actual).to.equal(expected);
+    });
+  });
+
+  describe('modifyCurrentState', () => {
+    describe('throws when callback is absent', () => {
+      itEachAbsentObjectValue((absentValue) => {
+        // arrange
+        const expectedError = 'missing state mutator';
+        const context = new ApplicationContextStub();
+        const { modifyCurrentState } = useCollectionState(context);
+        // act
+        const act = () => modifyCurrentState(absentValue);
+        // assert
+        expect(act).to.throw(expectedError);
+      });
+    });
+    it('modifies current collection state', () => {
+      // arrange
+      const oldOs = OperatingSystem.Windows;
+      const newOs = OperatingSystem.Linux;
+      const state = new CategoryCollectionStateStub()
+        .withOs(oldOs);
+      const context = new ApplicationContextStub()
+        .withState(state);
+      const { modifyCurrentState } = useCollectionState(context);
+
+      // act
+      modifyCurrentState((mutableState) => {
+        const stubState = (mutableState as CategoryCollectionStateStub);
+        stubState.withOs(newOs);
+      });
+      const actualOs = context.state.collection.os;
+
+      // assert
+      expect(actualOs).to.equal(newOs);
+    });
+  });
+
+  describe('modifyCurrentContext', () => {
+    describe('throws when callback is absent', () => {
+      itEachAbsentObjectValue((absentValue) => {
+        // arrange
+        const expectedError = 'missing context mutator';
+        const context = new ApplicationContextStub();
+        const { modifyCurrentContext } = useCollectionState(context);
+        // act
+        const act = () => modifyCurrentContext(absentValue);
+        // assert
+        expect(act).to.throw(expectedError);
+      });
+    });
+    it('modifies the current context', () => {
+      // arrange
+      const oldState = new CategoryCollectionStateStub()
+        .withOs(OperatingSystem.Linux);
+      const newState = new CategoryCollectionStateStub()
+        .withOs(OperatingSystem.macOS);
+      const context = new ApplicationContextStub()
+        .withState(oldState);
+      const { modifyCurrentContext } = useCollectionState(context);
+
+      // act
+      modifyCurrentContext((mutableContext) => {
+        const contextStub = mutableContext as ApplicationContextStub;
+        contextStub.withState(newState);
+      });
+      const actualState = context.state;
+
+      // assert
+      expect(actualState).to.equal(newState);
+    });
+  });
+});

tests/unit/shared/Stubs/ApplicationContextChangedEventStub.ts

@@ -0,0 +1,19 @@
+import { IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
+import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { CategoryCollectionStateStub } from './CategoryCollectionStateStub';
+
+export class ApplicationContextChangedEventStub implements IApplicationContextChangedEvent {
+  newState: ICategoryCollectionState = new CategoryCollectionStateStub();
+
+  oldState: ICategoryCollectionState = new CategoryCollectionStateStub();
+
+  withNewState(newState: ICategoryCollectionState) {
+    this.newState = newState;
+    return this;
+  }
+
+  withOldState(oldState: ICategoryCollectionState) {
+    this.oldState = oldState;
+    return this;
+  }
+}

tests/unit/shared/Stubs/ApplicationContextStub.ts

@@ -0,0 +1,38 @@
+import { IApplicationContext, IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
+import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { IApplication } from '@/domain/IApplication';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+import { CategoryCollectionStateStub } from './CategoryCollectionStateStub';
+import { ApplicationStub } from './ApplicationStub';
+import { EventSourceStub } from './EventSourceStub';
+import { ApplicationContextChangedEventStub } from './ApplicationContextChangedEventStub';
+
+export class ApplicationContextStub implements IApplicationContext {
+  public state: ICategoryCollectionState = new CategoryCollectionStateStub();
+
+  public changeContext(os: OperatingSystem): void {
+    const oldState = this.state;
+    const newState = new CategoryCollectionStateStub()
+      .withOs(os);
+    this.state = newState;
+    const event = new ApplicationContextChangedEventStub()
+      .withOldState(oldState)
+      .withNewState(newState);
+    this.dispatchContextChange(event);
+  }
+
+  public app: IApplication = new ApplicationStub();
+
+  public contextChanged = new EventSourceStub<IApplicationContextChangedEvent>();
+
+  public withState(state: ICategoryCollectionState) {
+    this.state = state;
+    return this;
+  }
+
+  public dispatchContextChange(
+    event: IApplicationContextChangedEvent = new ApplicationContextChangedEventStub(),
+  ) {
+    this.contextChanged.notify(event);
+  }
+}

tests/unit/shared/Stubs/CategoryCollectionStateStub.ts

@@ -4,6 +4,8 @@ import { ICategoryCollectionState } from '@/application/Context/State/ICategoryC
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { IScript } from '@/domain/IScript';
+import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { CategoryCollectionStub } from './CategoryCollectionStub';
 import { UserSelectionStub } from './UserSelectionStub';
 import { UserFilterStub } from './UserFilterStub';
@@ -11,24 +13,35 @@ import { ApplicationCodeStub } from './ApplicationCodeStub';
 import { CategoryStub } from './CategoryStub';
 
 export class CategoryCollectionStateStub implements ICategoryCollectionState {
+  private collectionStub = new CategoryCollectionStub();
+
   public readonly code: IApplicationCode = new ApplicationCodeStub();
 
   public readonly filter: IUserFilter = new UserFilterStub();
 
-  public readonly os = OperatingSystem.Windows;
+  public get os(): OperatingSystem {
+    return this.collectionStub.os;
+  }
 
-  public readonly collection: CategoryCollectionStub;
+  public get collection(): ICategoryCollection {
+    return this.collectionStub;
+  }
 
   public readonly selection: UserSelectionStub;
 
-  constructor(readonly allScripts: IScript[]) {
+  constructor(readonly allScripts: IScript[] = [new ScriptStub('script-id')]) {
     this.selection = new UserSelectionStub(allScripts);
-    this.collection = new CategoryCollectionStub()
+    this.collectionStub = new CategoryCollectionStub()
       .withOs(this.os)
       .withTotalScripts(this.allScripts.length)
       .withAction(new CategoryStub(0).withScripts(...allScripts));
   }
 
+  public withOs(os: OperatingSystem) {
+    this.collectionStub = this.collectionStub.withOs(os);
+    return this;
+  }
+
   public withSelectedScripts(initialScripts: readonly SelectedScript[]) {
     this.selection.withSelectedScripts(initialScripts);
     return this;

tests/unit/shared/Stubs/EventSourceStub.ts

@@ -0,0 +1,22 @@
+import { EventHandler, IEventSource, IEventSubscription } from '@/infrastructure/Events/IEventSource';
+import { EventSubscriptionStub } from './EventSubscriptionStub';
+
+export class EventSourceStub<T> implements IEventSource<T> {
+  private readonly handlers = new Array<EventHandler<T>>();
+
+  public on(handler: EventHandler<T>): IEventSubscription {
+    this.handlers.push(handler);
+    return new EventSubscriptionStub(() => {
+      const index = this.handlers.indexOf(handler);
+      if (index !== -1) {
+        this.handlers.splice(index, 1);
+      }
+    });
+  }
+
+  public notify(data: T) {
+    for (const handler of this.handlers) {
+      handler(data);
+    }
+  }
+}

tests/unit/shared/Stubs/EventSubscriptionStub.ts

@@ -0,0 +1,19 @@
+import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
+
+type UnsubscribeCallback = () => void;
+
+export class EventSubscriptionStub implements IEventSubscription {
+  private readonly onUnsubscribe = new Array<UnsubscribeCallback>();
+
+  constructor(unsubscribeCallback?: UnsubscribeCallback) {
+    if (unsubscribeCallback) {
+      this.onUnsubscribe.push(unsubscribeCallback);
+    }
+  }
+
+  unsubscribe(): void {
+    for (const callback of this.onUnsubscribe) {
+      callback();
+    }
+  }
+}