This commit increases strictnes of tests by failing on tests (even
though they pass) if `console.warn` or `console.error` is used. This is
used to fix warning outputs from Vue, cleaning up test output and
preventing potential issues with tests.
This commit fixes all of the failing tests, including refactoring in
code to make them more testable through injecting Vue lifecycle
hook function stubs. This removes `shallowMount`ing done on places,
improving the speed of executing unit tests. It also reduces complexity
and increases maintainability by removing `@vue/test-utils` dependency
for these tests.
Changes:
- Register global hook for all tests to fail if console.error or
console.warn is being used.
- Fix all issues with failing tests.
- Create test helper function for running code in a wrapper component to
run code in reliable/unified way to surpress Vue warnings about code
not running inside `setup`.
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 updates the project's npm dependencies to their
latest versions.
Updates to the following dependencies are on hold due to compatibility
issues:
- `@typescript-eslint/eslint-plugin`:
- Blocked by `@vue/eslint-config-airbnb-with-typescript`
(vuejs/eslint-config-airbnb#63).
- `@typescript-eslint/parser`:
- Blocked by `@vue/eslint-config-airbnb-with-typescript`
(vuejs/eslint-config-airbnb#63).
- `@vue/eslint-config-typescript`:
- Blocked by `@vue/eslint-config-airbnb-with-typescript`
(vuejs/eslint-config-airbnb#63).
- `eslint`:
- Blocked by `@vue/eslint-config-airbnb-with-typescript`
(vuejs/eslint-config-airbnb#65).
- Blocked by `@typescript-eslint/eslint-plugin` and
`@typescript-eslint/parser`
(typescript-eslint/typescript-eslint#8211).
These dependencies remain at their current major versions, and
their status is documented in the `package.json` to inform future
updates.
Other supporting changes:
- Moves `@types/markdown-it` to `devDependencies` which was incorrectly
included in `dependencies`.
- Fix error in `TreeView.spec` tests, revealed by the version bump.
- Update `markdown-it` import to match the new file.
This commit upgrades TypeScript to the latest version 5.3 and introduces
`verbatimModuleSyntax` in line with the official Vue guide
recommendatinos (vuejs/docs#2592).
By enforcing `import type` for type-only imports, this commit improves
code clarity and supports tooling optimization, ensuring imports are
only bundled when necessary for runtime.
Changes:
- Bump TypeScript to 5.3.3 across the project.
- Adjust import statements to utilize `import type` where applicable,
promoting cleaner and more efficient code.
This commit resolves a rendering bug in the tree view component.
Previously, updating the tree collection prior to node updates led to
rendering errors due to the presence of non-existent nodes in the new
collection.
Changes:
- Implement manual control over the rendering process in tree view. This
includes clearing the rendering queue and currently rendered nodes
before updates, aligning the rendering process with the updated
collection.
- Add Cypress E2E tests to test switching between all operating systems
and script views, ensuring no uncaught errors and preventing
regression.
- Replace hardcoded operating system lists in the download URL list view
with a unified `getSupportedOsList()` method from the application,
reducing duplication and simplifying future updates.
- Rename `initial-nodes` to `nodes` in `TreeView.vue` to reflect their
mutable nature.
- Centralize the function for getting operating system names into
`OperatingSystemNames.ts`, improving reusability in E2E tests.
- 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`.
Key highlights:
- Written from scratch to cater specifically to privacy.sexy's
needs and requirements.
- The visual look mimics the previous component with minimal changes,
but its internal code is completely rewritten.
- Lays groundwork for future functionalities like the "expand all"
button a flat view mode as discussed in #158.
- Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent
`liquour-tree` as part of #230.
Improvements and features:
- Caching for quicker node queries.
- Gradual rendering of nodes that introduces a noticable boost in
performance, particularly during search/filtering.
- `TreeView` solely governs the check states of branch nodes.
Changes:
- Keyboard interactions now alter the background color to highlight the
focused item. Previously, it was changing the color of the text.
- Better state management with clear separation of concerns:
- `TreeView` exclusively manages indeterminate states.
- `TreeView` solely governs the check states of branch nodes.
- Introduce transaction pattern to update state in batches to minimize
amount of events handled.
- Improve keyboard focus, style background instead of foreground. Use
hover/touch color on keyboard focus.
- `SelectableTree` has been removed. Instead, `TreeView` is now directly
integrated with `ScriptsTree`.
- `ScriptsTree` has been refactored to incorporate hooks for clearer
code and separation of duties.
- Adopt Vue-idiomatic bindings instead of keeping a reference of the
tree component.
- Simplify and change filter event management.
- Abandon global styles in favor of class-scoped styles.
- Use global mixins with descriptive names to clarify indended
functionality.
