Improve UI performance by optimizing reactivity

- Replace `ref`s with `shallowRef` when deep reactivity is not needed.
- Replace `readonly`s with `shallowReadonly` where the goal is to only
  prevent `.value` mutation.
- Remove redundant `ref` in `SizeObserver.vue`.
- Remove redundant nested `ref` in `TooltipWrapper.vue`.
- Remove redundant `events` export from `UseCollectionState.ts`.
- Remove redundant `computed` from `UseCollectionState.ts`.
- Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary
  after using `shallowRef`.
- Add missing unit tests for `UseTreeViewFilterEvent`.
- Add missing stub for `FilterChangeDetails`.
This commit is contained in:
undergroundwires
2023-10-31 13:57:57 +01:00
parent 77123d8c92
commit 4995e49c46
24 changed files with 377 additions and 111 deletions

View File

@@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest';
import {
ref, defineComponent, WatchSource, nextTick,
shallowRef, defineComponent, WatchSource, nextTick,
} from 'vue';
import { shallowMount } from '@vue/test-utils';
import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
@@ -15,7 +15,7 @@ describe('useCurrentTreeNodes', () => {
it('should set nodes on immediate invocation', () => {
// arrange
const expectedNodes = new QueryableNodesStub();
const treeWatcher = ref<TreeRoot>(new TreeRootStub().withCollection(
const treeWatcher = shallowRef<TreeRoot>(new TreeRootStub().withCollection(
new TreeNodeCollectionStub().withNodes(expectedNodes),
));
// act
@@ -27,7 +27,7 @@ describe('useCurrentTreeNodes', () => {
it('should update nodes when treeWatcher changes', async () => {
// arrange
const initialNodes = new QueryableNodesStub();
const treeWatcher = ref(
const treeWatcher = shallowRef(
new TreeRootStub().withCollection(new TreeNodeCollectionStub().withNodes(initialNodes)),
);
const { returnObject } = mountWrapperComponent(treeWatcher);
@@ -45,7 +45,7 @@ describe('useCurrentTreeNodes', () => {
// arrange
const initialNodes = new QueryableNodesStub();
const treeCollectionStub = new TreeNodeCollectionStub().withNodes(initialNodes);
const treeWatcher = ref(new TreeRootStub().withCollection(treeCollectionStub));
const treeWatcher = shallowRef(new TreeRootStub().withCollection(treeCollectionStub));
const { returnObject } = mountWrapperComponent(treeWatcher);