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/integration/presentation/components/Shared/Hooks/UseApplication.spec.ts

@@ -0,0 +1,29 @@
+import 'mocha';
+import { expect } from 'chai';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import { ApplicationFactory } from '@/application/ApplicationFactory';
+
+describe('UseApplication', () => {
+  it('should return the actual application from factory', async () => {
+    // arrange
+    const expected = await ApplicationFactory.Current.getApp();
+
+    // act
+    const { application } = useApplication(expected);
+
+    // assert
+    expect(application).to.equal(expected);
+  });
+
+  it('should return the actual info from the application', async () => {
+    // arrange
+    const app = await ApplicationFactory.Current.getApp();
+    const expected = app.info;
+
+    // act
+    const { info } = useApplication();
+
+    // assert
+    expect(info).to.equal(expected);
+  });
+});

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

@@ -0,0 +1,83 @@
+import 'mocha';
+import { expect } from 'chai';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
+
+describe('UseCollectionState', () => {
+  describe('currentContext', () => {
+    it('multiple calls get the same instance', () => {
+      // act
+      const firstContext = useCollectionState().currentContext;
+      const secondContext = useCollectionState().currentContext;
+      // assert
+      expect(firstContext).to.equal(secondContext);
+    });
+  });
+
+  describe('currentState', () => {
+    it('returns current collection state', () => {
+      // arrange
+      const { currentContext } = useCollectionState();
+      const expectedState = currentContext.state;
+
+      // act
+      const { currentState } = useCollectionState();
+      const actualState = currentState.value;
+
+      // assert
+      expect(expectedState).to.equal(actualState);
+    });
+    it('returns changed collection state', () => {
+      // arrange
+      const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
+      const newOs = pickNonCurrentOs(currentContext);
+
+      // act
+      modifyCurrentContext((context) => {
+        context.changeContext(newOs);
+      });
+      const expectedState = currentContext.state;
+
+      // assert
+      expect(currentState.value).to.equal(expectedState);
+    });
+  });
+
+  describe('modifyCurrentContext', () => {
+    it('modifies the current context', () => {
+      // arrange
+      const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
+      const expectedOs = pickNonCurrentOs(currentContext);
+
+      // act
+      modifyCurrentContext((context) => {
+        context.changeContext(expectedOs);
+      });
+
+      // assert
+      expect(currentContext.state.os).to.equal(expectedOs);
+      expect(currentState.value.os).to.equal(expectedOs);
+    });
+  });
+
+  describe('modifyCurrentState', () => {
+    it('modifies the current state', () => {
+      // arrange
+      const { currentState, modifyCurrentState } = useCollectionState();
+      const expectedFilter = 'expected-filter';
+
+      // act
+      modifyCurrentState((state) => {
+        state.filter.setFilter(expectedFilter);
+      });
+
+      // assert
+      const actualFilter = currentState.value.filter.currentFilter.query;
+      expect(actualFilter).to.equal(expectedFilter);
+    });
+  });
+});
+
+function pickNonCurrentOs(context: IReadOnlyApplicationContext) {
+  return context.app.getSupportedOsList().find((os) => os !== context.state.os);
+}