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:
@@ -26,7 +26,7 @@
|
||||
import {
|
||||
useFloating, arrow, shift, flip, Placement, offset, Side, Coords, autoUpdate,
|
||||
} from '@floating-ui/vue';
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { defineComponent, shallowRef, computed } from 'vue';
|
||||
import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
|
||||
import type { CSSProperties } from 'vue/types/jsx'; // In Vue 3.0 import from 'vue'
|
||||
|
||||
@@ -36,10 +36,10 @@ const MARGIN_FROM_DOCUMENT_EDGE_IN_PX = 2;
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const tooltipDisplayElement = ref<HTMLElement | undefined>();
|
||||
const triggeringElement = ref<HTMLElement | undefined>();
|
||||
const arrowElement = ref<HTMLElement | undefined>();
|
||||
const placement = ref<Placement>('top');
|
||||
const tooltipDisplayElement = shallowRef<HTMLElement | undefined>();
|
||||
const triggeringElement = shallowRef<HTMLElement | undefined>();
|
||||
const arrowElement = shallowRef<HTMLElement | undefined>();
|
||||
const placement = shallowRef<Placement>('top');
|
||||
|
||||
useResizeObserverPolyfill();
|
||||
|
||||
@@ -47,7 +47,7 @@ export default defineComponent({
|
||||
triggeringElement,
|
||||
tooltipDisplayElement,
|
||||
{
|
||||
placement: ref(placement),
|
||||
placement,
|
||||
middleware: [
|
||||
offset(ARROW_SIZE_IN_PX + GAP_BETWEEN_TOOLTIP_AND_TRIGGER_IN_PX),
|
||||
/* Shifts the element along the specified axes in order to keep it in view. */
|
||||
|
||||
Reference in New Issue
Block a user