These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.
- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
`--max-warnings=0` flag. This enforces stricter code quality controls
provided by Vue 3 rules.
This commit changes `WatchSource` signatures into `Readonly<Ref>`s.
It provides two important benefits:
1. Eliminates the possibility of `undefined` states, that's result of
using `WatchSource`s. This previously required additional null checks.
By using `Readonly<Ref>`, the state handling becomes simpler and less
susceptible to null errors.
2. Optimizes performance by using references:
- Avoids the reactive layer of `computed` references when not needed.
- The `watch` syntax, such as `watch(() => ref.value)`, can introduce
side effects. For example, it does not account for `triggerRef` in
scenarios where the value remains unchanged, preventing the watcher
from running (vuejs/core#9579).
- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"
Changes in detail:
- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
- Move `provide`s for global dependencies to a bootsrapper from
`App.vue`.
- Remove `productionTip` setting (not in Vue 3).
- Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
- Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
- Remove unused `shims-tsx.d.ts`.
- Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
- Remove old typing workaround for mounting components.
- Rename `propsData` to `props`.
- Remove unneeded `any` cast workarounds.
- Move stubs and `provide`s under `global` object.
Other changes:
- Add `dmg-license` dependency explicitly due to failing electron builds
on macOS (electron-userland/electron-builder#6520,
electron-userland/electron-builder#6489). This was a side-effect of
updating dependencies for this commit.
The tree view rendering performance is optimized by improving the node
render queue ordering. The node rendering order is modified based on the
expansion state and the depth in the hierarchy, leading to faster
rendering of visible nodes. This optimization is applied when the tree
nodes are not expanded to improve the rendering speed.
This new ordering ensures that nodes are rendered more efficiently,
prioritizing nodes that are collapsed and are at a higher level in the
hierarchy.
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.
