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,4 +1,4 @@
import { ref } from 'vue';
import { shallowRef } from 'vue';
import {
ContextModifier, IStateCallbackSettings, NewStateEventHandler,
StateModifier, useCollectionState,
@@ -8,7 +8,6 @@ import { IUserFilter } from '@/application/Context/State/Filter/IUserFilter';
import { IApplicationContext } from '@/application/Context/IApplicationContext';
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
import { CategoryCollectionStateStub } from './CategoryCollectionStateStub';
import { EventSubscriptionCollectionStub } from './EventSubscriptionCollectionStub';
import { ApplicationContextStub } from './ApplicationContextStub';
import { UserFilterStub } from './UserFilterStub';
import { StubWithObservableMethodCalls } from './StubWithObservableMethodCalls';
@@ -17,7 +16,9 @@ export class UseCollectionStateStub
extends StubWithObservableMethodCalls<ReturnType<typeof useCollectionState>> {
private currentContext: IApplicationContext = new ApplicationContextStub();
private readonly currentState = ref<ICategoryCollectionState>(new CategoryCollectionStateStub());
private readonly currentState = shallowRef<ICategoryCollectionState>(
new CategoryCollectionStateStub(),
);
public withFilter(filter: IUserFilter) {
const state = new CategoryCollectionStateStub()
@@ -100,7 +101,6 @@ export class UseCollectionStateStub
onStateChange: this.onStateChange.bind(this),
currentContext: this.currentContext,
currentState: this.currentState,
events: new EventSubscriptionCollectionStub(),
};
}
}