This commit addresses failures in end-to-end tests that occurred due to
`ResizeObserver` loop limit exceptions.
These errors were triggered by Vue dependency upgrades in the commit
aae5434451.
The errors had the following message:
> `ResizeObserver loop completed with undelivered notifications`
This error happens when there are too many observations and the observer
is not able to deliver all observations within a single animation frame.
See: WICG/resize-observer#38
his commit resolves the issue by controlling how many observations are
delivered per animation frame and limiting it to only one.
It improves performance by reducing layout trashing, improving frame
rates, and managing resources more effectively.
Changes:
- Introduce an animation frame control to manage observations more
efficiently.
- Centralized `ResizeObserver` management within the `UseResizeObserver`
hook to improve consistency and reuse across the application.
This commit fixes a bug that causes tooltips to be slightly misaligned.
Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.
One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.
This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.
Key changes:
- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.
Other supporting changes:
- Improve throttle function to support efficient recalculations of
positions:
- Add ability to optionally exclude the first execution (leading
call).
- Refactor to simplify it make it easier to follow and read.
- Fix a bug where initial calls were incorrectly throttled if
`dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
This greatily introduce safety, reuse and testability of event
listening.
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
