Refactor watch sources for reliability

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).

src/presentation/components/Scripts/View/Tree/ScriptsTree.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, toRef } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TreeView from './TreeView/TreeView.vue';
 import NodeContent from './NodeContent/NodeContent.vue';
@@ -42,7 +42,7 @@ export default defineComponent({
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
     const { selectedScriptNodeIds } = useSelectedScriptNodeIds(useUserCollectionStateHook);
     const { latestFilterEvent } = useTreeViewFilterEvent();
-    const { treeViewInputNodes } = useTreeViewNodeInput(() => props.categoryId);
+    const { treeViewInputNodes } = useTreeViewNodeInput(toRef(props, 'categoryId'));
     const { updateNodeSelection } = useCollectionSelectionStateUpdater(useUserCollectionStateHook);
 
     function handleNodeChangedEvent(event: TreeNodeStateChangedEmittedEvent) {

src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper" v-if="currentNode">
+  <div class="wrapper">
     <div
       class="expansible-node"
       @click="toggleCheck"
@@ -46,15 +46,14 @@
 </template>
 
 <script lang="ts">
-import {
+import { defineComponent, computed, toRef } from 'vue';
-  defineComponent, computed, PropType,
-} from 'vue';
 import { TreeRoot } from '../TreeRoot/TreeRoot';
 import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
 import { NodeRenderingStrategy } from '../Rendering/Scheduling/NodeRenderingStrategy';
 import { useNodeState } from './UseNodeState';
 import { TreeNode } from './TreeNode';
 import LeafTreeNode from './LeafTreeNode.vue';
+import type { PropType } from 'vue';
 
 export default defineComponent({
   name: 'HierarchicalTreeNode', // Needed due to recursion
@@ -76,33 +75,32 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { nodes } = useCurrentTreeNodes(() => props.treeRoot);
+    const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot'));
-    const currentNode = computed<TreeNode | undefined>(
+    const currentNode = computed<TreeNode>(
-      () => nodes.value?.getNodeById(props.nodeId),
+      () => nodes.value.getNodeById(props.nodeId),
     );
 
-    const { state } = useNodeState(() => currentNode.value);
+    const { state } = useNodeState(currentNode);
-    const expanded = computed<boolean>(() => state.value?.isExpanded ?? false);
+    const expanded = computed<boolean>(() => state.value.isExpanded);
 
     const renderedNodeIds = computed<readonly string[]>(
       () => currentNode.value
-        ?.hierarchy
+        .hierarchy
         .children
         .filter((child) => props.renderingStrategy.shouldRender(child))
-        .map((child) => child.id)
+        .map((child) => child.id),
-        ?? [],
     );
 
     function toggleExpand() {
-      currentNode.value?.state.toggleExpand();
+      currentNode.value.state.toggleExpand();
     }
 
     function toggleCheck() {
-      currentNode.value?.state.toggleCheck();
+      currentNode.value.state.toggleCheck();
     }
 
     const hasChildren = computed<boolean>(
-      () => currentNode.value?.hierarchy.isBranchNode,
+      () => currentNode.value.hierarchy.isBranchNode,
     );
 
     return {

src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue

@@ -1,6 +1,5 @@
 <template>
   <li
-    v-if="currentNode"
     class="wrapper"
     @click.stop="toggleCheckState"
   >
@@ -31,15 +30,14 @@
 </template>
 
 <script lang="ts">
-import {
+import { defineComponent, computed, toRef } from 'vue';
-  defineComponent, computed, PropType,
-} from 'vue';
 import { TreeRoot } from '../TreeRoot/TreeRoot';
 import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
 import { useNodeState } from './UseNodeState';
 import { useKeyboardInteractionState } from './UseKeyboardInteractionState';
 import { TreeNode } from './TreeNode';
 import { TreeNodeCheckState } from './State/CheckState';
+import type { PropType } from 'vue';
 
 export default defineComponent({
   props: {
@@ -54,16 +52,16 @@ export default defineComponent({
   },
   setup(props) {
     const { isKeyboardBeingUsed } = useKeyboardInteractionState();
-    const { nodes } = useCurrentTreeNodes(() => props.treeRoot);
+    const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot'));
-    const currentNode = computed<TreeNode | undefined>(
+    const currentNode = computed<TreeNode>(
-      () => nodes.value?.getNodeById(props.nodeId),
+      () => nodes.value.getNodeById(props.nodeId),
     );
-    const { state } = useNodeState(() => currentNode.value);
+    const { state } = useNodeState(currentNode);
 
-    const hasFocus = computed<boolean>(() => state.value?.isFocused ?? false);
+    const hasFocus = computed<boolean>(() => state.value.isFocused);
-    const checked = computed<boolean>(() => state.value?.checkState === TreeNodeCheckState.Checked);
+    const checked = computed<boolean>(() => state.value.checkState === TreeNodeCheckState.Checked);
     const indeterminate = computed<boolean>(
-      () => state.value?.checkState === TreeNodeCheckState.Indeterminate,
+      () => state.value.checkState === TreeNodeCheckState.Indeterminate,
     );
 
     const hasKeyboardFocus = computed<boolean>(() => {
@@ -74,14 +72,11 @@ export default defineComponent({
     });
 
     const onNodeFocus = () => {
-      if (!currentNode.value) {
-        return;
-      }
       props.treeRoot.focus.setSingleFocus(currentNode.value);
     };
 
     function toggleCheckState() {
-      currentNode.value?.state.toggleCheck();
+      currentNode.value.state.toggleCheck();
     }
 
     return {

src/presentation/components/Scripts/View/Tree/TreeView/Node/UseNodeState.ts

@@ -1,21 +1,18 @@
 import {
-  WatchSource, shallowRef, watch,
+  type Ref, shallowRef, watch, shallowReadonly,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { ReadOnlyTreeNode } from './TreeNode';
 import { TreeNodeStateDescriptor } from './State/StateDescriptor';
 
 export function useNodeState(
-  nodeWatcher: WatchSource<ReadOnlyTreeNode | undefined>,
+  nodeRef: Readonly<Ref<ReadOnlyTreeNode>>,
 ) {
   const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
-  const state = shallowRef<TreeNodeStateDescriptor>();
+  const state = shallowRef<TreeNodeStateDescriptor>(nodeRef.value.state.current);
 
-  watch(nodeWatcher, (node: ReadOnlyTreeNode) => {
+  watch(nodeRef, (node: ReadOnlyTreeNode) => {
-    if (!node) {
-      return;
-    }
     state.value = node.state.current;
     events.unsubscribeAllAndRegister([
       node.state.changed.on((change) => {
@@ -25,6 +22,6 @@ export function useNodeState(
   }, { immediate: true });
 
   return {
-    state,
+    state: shallowReadonly(state),
   };
 }

src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, shallowRef, triggerRef, watch,
+  type Ref, shallowRef, triggerRef, watch,
 } from 'vue';
 import { ReadOnlyTreeNode } from '../Node/TreeNode';
 import { useNodeStateChangeAggregator } from '../UseNodeStateChangeAggregator';
@@ -15,7 +15,7 @@ import { CollapsedParentOrderer } from './Ordering/CollapsedParentOrderer';
  * Renders tree nodes gradually to prevent UI freeze when loading large amounts of nodes.
  */
 export function useGradualNodeRendering(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
   useChangeAggregator = useNodeStateChangeAggregator,
   useTreeNodes = useCurrentTreeNodes,
   scheduler: DelayScheduler = new TimeoutDelayScheduler(),
@@ -28,8 +28,8 @@ export function useGradualNodeRendering(
   let isRenderingInProgress = false;
   const renderingDelayInMs = 50;
 
-  const { onNodeStateChange } = useChangeAggregator(treeWatcher);
+  const { onNodeStateChange } = useChangeAggregator(treeRootRef);
-  const { nodes } = useTreeNodes(treeWatcher);
+  const { nodes } = useTreeNodes(treeRootRef);
 
   function updateNodeRenderQueue(node: ReadOnlyTreeNode, isVisible: boolean) {
     if (isVisible
@@ -48,7 +48,7 @@ export function useGradualNodeRendering(
     }
   }
 
-  watch(() => nodes.value, (newNodes) => {
+  watch(nodes, (newNodes) => {
     nodesToRender.clear();
     nodesBeingRendered.value.clear();
     if (!newNodes || newNodes.flattenedNodes.length === 0) {

src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue

@@ -18,12 +18,13 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed, PropType,
+  defineComponent, computed, toRef,
 } from 'vue';
 import HierarchicalTreeNode from '../Node/HierarchicalTreeNode.vue';
 import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
 import { NodeRenderingStrategy } from '../Rendering/Scheduling/NodeRenderingStrategy';
 import { TreeRoot } from './TreeRoot';
+import type { PropType } from 'vue';
 
 export default defineComponent({
   components: {
@@ -40,7 +41,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { nodes } = useCurrentTreeNodes(() => props.treeRoot);
+    const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot'));
 
     const renderedNodeIds = computed<string[]>(() => {
       return nodes

src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import {
   defineComponent, onMounted, watch,
-  shallowRef, PropType,
+  shallowRef, toRef, shallowReadonly,
 } from 'vue';
 import { TreeRootManager } from './TreeRoot/TreeRootManager';
 import TreeRoot from './TreeRoot/TreeRoot.vue';
@@ -28,6 +28,7 @@ import { TreeNodeStateChangedEmittedEvent } from './Bindings/TreeNodeStateChange
 import { useAutoUpdateParentCheckState } from './UseAutoUpdateParentCheckState';
 import { useAutoUpdateChildrenCheckState } from './UseAutoUpdateChildrenCheckState';
 import { useGradualNodeRendering } from './Rendering/UseGradualNodeRendering';
+import type { PropType } from 'vue';
 
 export default defineComponent({
   components: {
@@ -57,17 +58,16 @@ export default defineComponent({
 
     const tree = new TreeRootManager();
 
-    useTreeKeyboardNavigation(tree, treeContainerElement);
+    const treeRef = shallowReadonly(shallowRef(tree));
-    useTreeQueryFilter(
-      () => props.latestFilterEvent,
-      () => tree,
-    );
-    useLeafNodeCheckedStateUpdater(() => tree, () => props.selectedLeafNodeIds);
-    useAutoUpdateParentCheckState(() => tree);
-    useAutoUpdateChildrenCheckState(() => tree);
-    const nodeRenderingScheduler = useGradualNodeRendering(() => tree);
 
-    const { onNodeStateChange } = useNodeStateChangeAggregator(() => tree);
+    useTreeKeyboardNavigation(treeRef, treeContainerElement);
+    useTreeQueryFilter(toRef(props, 'latestFilterEvent'), treeRef);
+    useLeafNodeCheckedStateUpdater(treeRef, toRef(props, 'selectedLeafNodeIds'));
+    useAutoUpdateParentCheckState(treeRef);
+    useAutoUpdateChildrenCheckState(treeRef);
+    const nodeRenderingScheduler = useGradualNodeRendering(treeRef);
+
+    const { onNodeStateChange } = useNodeStateChangeAggregator(treeRef);
 
     onNodeStateChange((change) => {
       emit('nodeStateChanged', {

src/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateChildrenCheckState.ts

@@ -1,14 +1,14 @@
-import { WatchSource } from 'vue';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { useNodeStateChangeAggregator } from './UseNodeStateChangeAggregator';
 import { HierarchyAccess } from './Node/Hierarchy/HierarchyAccess';
 import { TreeNodeCheckState } from './Node/State/CheckState';
+import type { Ref } from 'vue';
 
 export function useAutoUpdateChildrenCheckState(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
   useChangeAggregator = useNodeStateChangeAggregator,
 ) {
-  const { onNodeStateChange } = useChangeAggregator(treeWatcher);
+  const { onNodeStateChange } = useChangeAggregator(treeRootRef);
 
   onNodeStateChange((change) => {
     if (change.newState.checkState === change.oldState?.checkState) {

src/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateParentCheckState.ts

@@ -1,15 +1,15 @@
-import { WatchSource } from 'vue';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { useNodeStateChangeAggregator } from './UseNodeStateChangeAggregator';
 import { HierarchyAccess } from './Node/Hierarchy/HierarchyAccess';
 import { TreeNodeCheckState } from './Node/State/CheckState';
 import { ReadOnlyTreeNode } from './Node/TreeNode';
+import type { Ref } from 'vue';
 
 export function useAutoUpdateParentCheckState(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRef: Readonly<Ref<TreeRoot>>,
   useChangeAggregator = useNodeStateChangeAggregator,
 ) {
-  const { onNodeStateChange } = useChangeAggregator(treeWatcher);
+  const { onNodeStateChange } = useChangeAggregator(treeRef);
 
   onNodeStateChange((change) => {
     if (change.newState.checkState === change.oldState?.checkState) {

src/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes.ts

@@ -1,18 +1,16 @@
 import {
-  WatchSource, watch, shallowReadonly, shallowRef,
+  watch, shallowReadonly, shallowRef, type Ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { QueryableNodes } from './TreeRoot/NodeCollection/Query/QueryableNodes';
 
-export function useCurrentTreeNodes(treeWatcher: WatchSource<TreeRoot>) {
+export function useCurrentTreeNodes(treeRef: Readonly<Ref<TreeRoot>>) {
   const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
-  const tree = shallowRef<TreeRoot | undefined>();
+  const nodes = shallowRef<QueryableNodes>(treeRef.value.collection.nodes);
-  const nodes = shallowRef<QueryableNodes | undefined>();
 
-  watch(treeWatcher, (newTree) => {
+  watch(treeRef, (newTree) => {
-    tree.value = newTree;
     nodes.value = newTree.collection.nodes;
     events.unsubscribeAllAndRegister([
       newTree.collection.nodesUpdated.on((newNodes) => {

src/presentation/components/Scripts/View/Tree/TreeView/UseLeafNodeCheckedStateUpdater.ts

@@ -1,4 +1,4 @@
-import { WatchSource, watch } from 'vue';
+import { type Ref, watch } from 'vue';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { TreeNode } from './Node/TreeNode';
 import { QueryableNodes } from './TreeRoot/NodeCollection/Query/QueryableNodes';
@@ -6,13 +6,13 @@ import { useCurrentTreeNodes } from './UseCurrentTreeNodes';
 import { TreeNodeCheckState } from './Node/State/CheckState';
 
 export function useLeafNodeCheckedStateUpdater(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
-  leafNodeIdsWatcher: WatchSource<readonly string[]>,
+  leafNodeIdsRef: Readonly<Ref<readonly string[]>>,
 ) {
-  const { nodes } = useCurrentTreeNodes(treeWatcher);
+  const { nodes } = useCurrentTreeNodes(treeRootRef);
 
   watch(
-    [leafNodeIdsWatcher, () => nodes.value],
+    [leafNodeIdsRef, nodes],
     ([nodeIds, actualNodes]) => {
       updateNodeSelections(actualNodes, nodeIds);
     },

src/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, watch, shallowRef,
+  watch, shallowRef, type Ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
@@ -11,31 +11,31 @@ import { TreeNodeStateDescriptor } from './Node/State/StateDescriptor';
 export type NodeStateChangeEventCallback = (args: NodeStateChangeEventArgs) => void;
 
 export function useNodeStateChangeAggregator(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
   useTreeNodes = useCurrentTreeNodes,
 ) {
-  const { nodes } = useTreeNodes(treeWatcher);
+  const { nodes } = useTreeNodes(treeRootRef);
   const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
   const onNodeChangeCallback = shallowRef<NodeStateChangeEventCallback>();
 
-  watch([
+  watch(
-    () => nodes.value,
+    [nodes, onNodeChangeCallback],
-    () => onNodeChangeCallback.value,
+    ([newNodes, callback]) => {
-  ], ([newNodes, callback]) => {
+      if (!callback) { // may not be registered yet
-    if (!callback) { // might not be registered yet
+        return;
-      return;
+      }
-    }
+      if (!newNodes || newNodes.flattenedNodes.length === 0) {
-    if (!newNodes || newNodes.flattenedNodes.length === 0) {
+        events.unsubscribeAll();
-      events.unsubscribeAll();
+        return;
-      return;
+      }
-    }
+      const allNodes = newNodes.flattenedNodes;
-    const allNodes = newNodes.flattenedNodes;
+      events.unsubscribeAllAndRegister(
-    events.unsubscribeAllAndRegister(
+        subscribeToNotifyOnFutureNodeChanges(allNodes, callback),
-      subscribeToNotifyOnFutureNodeChanges(allNodes, callback),
+      );
-    );
+      notifyCurrentNodeState(allNodes, callback);
-    notifyCurrentNodeState(allNodes, callback);
+    },
-  });
+  );
 
   function onNodeStateChange(
     callback: NodeStateChangeEventCallback,

src/presentation/components/Scripts/View/Tree/TreeView/UseTreeKeyboardNavigation.ts

@@ -8,14 +8,16 @@ import { TreeNode } from './Node/TreeNode';
 type TreeNavigationKeyCodes = 'ArrowLeft' | 'ArrowUp' | 'ArrowRight' | 'ArrowDown' | ' ' | 'Enter';
 
 export function useTreeKeyboardNavigation(
-  treeRoot: TreeRoot,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
-  treeElementRef: Ref<HTMLElement | undefined>,
+  treeElementRef: Readonly<Ref<HTMLElement | undefined>>,
 ) {
   useKeyboardListener(treeElementRef, (event) => {
     if (!treeElementRef.value) {
       return; // Not yet initialized?
     }
 
+    const treeRoot = treeRootRef.value;
+
     const keyCode = event.key as TreeNavigationKeyCodes;
 
     if (!treeRoot.focus.currentSingleFocusedNode) {
@@ -39,7 +41,7 @@ export function useTreeKeyboardNavigation(
 }
 
 function useKeyboardListener(
-  elementRef: Ref<HTMLElement | undefined>,
+  elementRef: Readonly<Ref<HTMLElement | undefined>>,
   handleKeyboardEvent: (event: KeyboardEvent) => void,
 ) {
   onMounted(() => {

src/presentation/components/Scripts/View/Tree/TreeView/UseTreeQueryFilter.ts

@@ -1,4 +1,4 @@
-import { WatchSource, watch } from 'vue';
+import { type Ref, watch } from 'vue';
 import { TreeViewFilterAction, TreeViewFilterEvent, TreeViewFilterPredicate } from './Bindings/TreeInputFilterEvent';
 import { ReadOnlyTreeNode, TreeNode } from './Node/TreeNode';
 import { TreeRoot } from './TreeRoot/TreeRoot';
@@ -8,18 +8,18 @@ import { TreeNodeStateTransaction } from './Node/State/StateAccess';
 import { TreeNodeStateDescriptor } from './Node/State/StateDescriptor';
 
 export function useTreeQueryFilter(
-  latestFilterEventWatcher: WatchSource<TreeViewFilterEvent | undefined>,
+  latestFilterEventRef: Readonly<Ref<TreeViewFilterEvent | undefined>>,
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
 ) {
-  const { nodes } = useCurrentTreeNodes(treeWatcher);
+  const { nodes } = useCurrentTreeNodes(treeRootRef);
 
   let isFiltering = false;
   const statesBeforeFiltering = new NodeStateRestorer();
   statesBeforeFiltering.saveStateBeforeFilter(nodes.value);
 
   setupWatchers({
-    filterEventWatcher: latestFilterEventWatcher,
+    filterEventRef: latestFilterEventRef,
-    nodesWatcher: () => nodes.value,
+    nodesRef: nodes,
     onFilterTrigger: (predicate, newNodes) => runFilter(
       newNodes,
       predicate,
@@ -171,18 +171,18 @@ class NodeStateRestorer {
 }
 
 function setupWatchers(options: {
-  filterEventWatcher: WatchSource<TreeViewFilterEvent | undefined>,
+  readonly filterEventRef: Readonly<Ref<TreeViewFilterEvent | undefined>>,
-  nodesWatcher: WatchSource<QueryableNodes>,
+  readonly nodesRef: Readonly<Ref<QueryableNodes>>,
-  onFilterReset: () => void,
+  readonly onFilterReset: () => void,
-  onFilterTrigger: (
+  readonly onFilterTrigger: (
     predicate: TreeViewFilterPredicate,
     nodes: QueryableNodes,
   ) => void,
 }) {
   watch(
     [
-      options.filterEventWatcher,
+      options.filterEventRef,
-      options.nodesWatcher,
+      options.nodesRef,
     ],
     ([filterEvent, nodes]) => {
       if (!filterEvent) {

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput.ts

@@ -1,6 +1,5 @@
 import {
-  WatchSource, computed,
+  type Ref, computed, shallowReadonly,
-  ref, watch,
 } from 'vue';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { injectKey } from '@/presentation/injectionSymbols';
@@ -10,7 +9,7 @@ import { convertToNodeInput } from './TreeNodeMetadataConverter';
 import { parseSingleCategory, parseAllCategories } from './CategoryNodeMetadataConverter';
 
 export function useTreeViewNodeInput(
-  categoryIdWatcher: WatchSource<number | undefined>,
+  categoryIdRef: Readonly<Ref<number | undefined>>,
   parser: CategoryNodeParser = {
     parseSingle: parseSingleCategory,
     parseAll: parseAllCategories,
@@ -19,20 +18,14 @@ export function useTreeViewNodeInput(
 ) {
   const { currentState } = injectKey((keys) => keys.useCollectionState);
 
-  const categoryId = ref<number | undefined>();
-
-  watch(categoryIdWatcher, (newCategoryId) => {
-    categoryId.value = newCategoryId;
-  }, { immediate: true });
-
   const nodes = computed<readonly TreeInputNodeData[]>(() => {
-    const nodeMetadataList = parseNodes(categoryId.value, currentState.value.collection, parser);
+    const nodeMetadataList = parseNodes(categoryIdRef.value, currentState.value.collection, parser);
     const nodeInputs = nodeMetadataList.map((node) => nodeConverter(node));
     return nodeInputs;
   });
 
   return {
-    treeViewInputNodes: nodes,
+    treeViewInputNodes: shallowReadonly(nodes),
   };
 }
 

tests/shared/WaitForValueChange.ts

@@ -1,6 +1,9 @@
 import { WatchSource, watch } from 'vue';
 
-export function waitForValueChange<T>(valueWatcher: WatchSource<T>, timeoutMs = 2000): Promise<T> {
+export function waitForValueChange<T>(
+  valueWatcher: WatchSource<T>,
+  timeoutMs = 2000,
+): Promise<T> {
   return new Promise<T>((resolve, reject) => {
     const unwatch = watch(valueWatcher, (newValue, oldValue) => {
       if (newValue !== oldValue) {

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Node/UseNodeState.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
-  shallowRef, defineComponent, WatchSource, nextTick,
+  shallowRef, defineComponent, nextTick, type Ref,
 } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { ReadOnlyTreeNode } from '@/presentation/components/Scripts/View/Tree/TreeView/Node/TreeNode';
@@ -16,31 +16,22 @@ describe('useNodeState', () => {
   it('should set state on immediate invocation if node exists', () => {
     // arrange
     const expectedState = new TreeNodeStateDescriptorStub();
-    const nodeWatcher = shallowRef<ReadOnlyTreeNode | undefined>(undefined);
+    const nodeRef = shallowRef<ReadOnlyTreeNode>(
-    nodeWatcher.value = new TreeNodeStub()
+      new TreeNodeStub().withState(new TreeNodeStateAccessStub().withCurrent(expectedState)),
-      .withState(new TreeNodeStateAccessStub().withCurrent(expectedState));
+    );
     // act
-    const { returnObject } = mountWrapperComponent(nodeWatcher);
+    const { returnObject } = mountWrapperComponent(nodeRef);
     // assert
     expect(returnObject.state.value).to.equal(expectedState);
   });
 
-  it('should not set state on immediate invocation if node is undefined', () => {
+  it('should update state when node changes', async () => {
-    // arrange
-    const nodeWatcher = shallowRef<ReadOnlyTreeNode | undefined>(undefined);
-    // act
-    const { returnObject } = mountWrapperComponent(nodeWatcher);
-    // assert
-    expect(returnObject.state.value).toBeUndefined();
-  });
-
-  it('should update state when nodeWatcher changes', async () => {
     // arrange
     const expectedNewState = new TreeNodeStateDescriptorStub();
-    const nodeWatcher = shallowRef<ReadOnlyTreeNode | undefined>(undefined);
+    const nodeRef = shallowRef<ReadOnlyTreeNode>(new TreeNodeStub());
-    const { returnObject } = mountWrapperComponent(nodeWatcher);
+    const { returnObject } = mountWrapperComponent(nodeRef);
     // act
-    nodeWatcher.value = new TreeNodeStub()
+    nodeRef.value = new TreeNodeStub()
       .withState(new TreeNodeStateAccessStub().withCurrent(expectedNewState));
     await nextTick();
     // assert
@@ -49,30 +40,28 @@ describe('useNodeState', () => {
 
   it('should update state when node state changes', () => {
     // arrange
-    const nodeWatcher = shallowRef<ReadOnlyTreeNode | undefined>(undefined);
     const stateAccessStub = new TreeNodeStateAccessStub();
+    const nodeRef = shallowRef<ReadOnlyTreeNode>(
+      new TreeNodeStub().withState(stateAccessStub),
+    );
     const expectedChangedState = new TreeNodeStateDescriptorStub();
-    nodeWatcher.value = new TreeNodeStub()
-      .withState(stateAccessStub);
-
     // act
-    const { returnObject } = mountWrapperComponent(nodeWatcher);
+    const { returnObject } = mountWrapperComponent(nodeRef);
     stateAccessStub.triggerStateChangedEvent(
       new NodeStateChangedEventStub()
         .withNewState(expectedChangedState),
     );
-
     // assert
     expect(returnObject.state.value).to.equal(expectedChangedState);
   });
 });
 
-function mountWrapperComponent(nodeWatcher: WatchSource<ReadOnlyTreeNode | undefined>) {
+function mountWrapperComponent(nodeRef: Readonly<Ref<ReadOnlyTreeNode>>) {
   let returnObject: ReturnType<typeof useNodeState>;
   const wrapper = shallowMount(
     defineComponent({
       setup() {
-        returnObject = useNodeState(nodeWatcher);
+        returnObject = useNodeState(nodeRef);
       },
       template: '<div></div>',
     }),

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { WatchSource } from 'vue';
+import { type Ref, shallowRef } from 'vue';
 import { useGradualNodeRendering } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import { TreeRootStub } from '@tests/unit/shared/Stubs/TreeRootStub';
@@ -17,18 +17,18 @@ import { RenderQueueOrdererStub } from '@tests/unit/shared/Stubs/RenderQueueOrde
 import { RenderQueueOrderer } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/Ordering/RenderQueueOrderer';
 
 describe('useGradualNodeRendering', () => {
-  it('watches nodes on specified tree', () => {
+  it('tracks nodes on specified tree', () => {
     // arrange
-    const expectedWatcher = () => new TreeRootStub();
+    const expectedTreeRootRef = shallowRef(new TreeRootStub());
     const currentTreeNodesStub = new UseCurrentTreeNodesStub();
     const builder = new UseGradualNodeRenderingBuilder()
       .withCurrentTreeNodes(currentTreeNodesStub)
-      .withTreeWatcher(expectedWatcher);
+      .withTreeRootRef(expectedTreeRootRef);
     // act
     builder.call();
     // assert
-    const actualWatcher = currentTreeNodesStub.treeWatcher;
+    const actualTreeRootRef = currentTreeNodesStub.treeRootRef;
-    expect(actualWatcher).to.equal(expectedWatcher);
+    expect(actualTreeRootRef).to.equal(expectedTreeRootRef);
   });
   describe('shouldRender', () => {
     describe('on visibility toggle', () => {
@@ -269,7 +269,7 @@ function createNodeWithVisibility(
 class UseGradualNodeRenderingBuilder {
   private changeAggregator = new UseNodeStateChangeAggregatorStub();
 
-  private treeWatcher: WatchSource<TreeRoot | undefined> = () => new TreeRootStub();
+  private treeRootRef: Readonly<Ref<TreeRoot>> = shallowRef(new TreeRootStub());
 
   private currentTreeNodes = new UseCurrentTreeNodesStub();
 
@@ -291,8 +291,8 @@ class UseGradualNodeRenderingBuilder {
     return this;
   }
 
-  public withTreeWatcher(treeWatcher: WatchSource<TreeRoot | undefined>): this {
+  public withTreeRootRef(treeRootRef: Readonly<Ref<TreeRoot>>): this {
-    this.treeWatcher = treeWatcher;
+    this.treeRootRef = treeRootRef;
     return this;
   }
 
@@ -318,7 +318,7 @@ class UseGradualNodeRenderingBuilder {
 
   public call(): ReturnType<typeof useGradualNodeRendering> {
     return useGradualNodeRendering(
-      this.treeWatcher,
+      this.treeRootRef,
       this.changeAggregator.get(),
       this.currentTreeNodes.get(),
       this.delayScheduler,

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateChildrenCheckState.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { WatchSource } from 'vue';
+import { type Ref, shallowRef } from 'vue';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import { useAutoUpdateChildrenCheckState } from '@/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateChildrenCheckState';
 import { TreeNodeCheckState } from '@/presentation/components/Scripts/View/Tree/TreeView/Node/State/CheckState';
@@ -25,16 +25,16 @@ describe('useAutoUpdateChildrenCheckState', () => {
   });
   it('aggregate changes on specified tree', () => {
     // arrange
-    const expectedWatcher = () => new TreeRootStub();
+    const expectedTreeRoot = shallowRef(new TreeRootStub());
     const aggregatorStub = new UseNodeStateChangeAggregatorStub();
     const builder = new UseAutoUpdateChildrenCheckStateBuilder()
       .withChangeAggregator(aggregatorStub)
-      .withTreeWatcher(expectedWatcher);
+      .withTreeRoot(expectedTreeRoot);
     // act
     builder.call();
     // assert
-    const actualWatcher = aggregatorStub.treeWatcher;
+    const actualTreeRoot = aggregatorStub.treeRootRef;
-    expect(actualWatcher).to.equal(expectedWatcher);
+    expect(actualTreeRoot).to.equal(expectedTreeRoot);
   });
   describe('skips event handling', () => {
     const scenarios: ReadonlyArray<{
@@ -197,21 +197,21 @@ function getAllPossibleCheckStates() {
 class UseAutoUpdateChildrenCheckStateBuilder {
   private changeAggregator = new UseNodeStateChangeAggregatorStub();
 
-  private treeWatcher: WatchSource<TreeRoot | undefined> = () => new TreeRootStub();
+  private treeRoot: Readonly<Ref<TreeRoot>> = shallowRef(new TreeRootStub());
 
   public withChangeAggregator(changeAggregator: UseNodeStateChangeAggregatorStub): this {
     this.changeAggregator = changeAggregator;
     return this;
   }
 
-  public withTreeWatcher(treeWatcher: WatchSource<TreeRoot | undefined>): this {
+  public withTreeRoot(treeRoot: Readonly<Ref<TreeRoot>>): this {
-    this.treeWatcher = treeWatcher;
+    this.treeRoot = treeRoot;
     return this;
   }
 
   public call(): ReturnType<typeof useAutoUpdateChildrenCheckState> {
     return useAutoUpdateChildrenCheckState(
-      this.treeWatcher,
+      this.treeRoot,
       this.changeAggregator.get(),
     );
   }

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateParentCheckState.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { WatchSource } from 'vue';
+import { type Ref, shallowRef } from 'vue';
 import { UseNodeStateChangeAggregatorStub } from '@tests/unit/shared/Stubs/UseNodeStateChangeAggregatorStub';
 import { TreeRootStub } from '@tests/unit/shared/Stubs/TreeRootStub';
 import { useAutoUpdateParentCheckState } from '@/presentation/components/Scripts/View/Tree/TreeView/UseAutoUpdateParentCheckState';
@@ -24,16 +24,16 @@ describe('useAutoUpdateParentCheckState', () => {
   });
   it('aggregate changes on specified tree', () => {
     // arrange
-    const expectedWatcher = () => new TreeRootStub();
+    const expectedTreeRootRef = shallowRef(new TreeRootStub());
     const aggregatorStub = new UseNodeStateChangeAggregatorStub();
     const builder = new UseAutoUpdateParentCheckStateBuilder()
       .withChangeAggregator(aggregatorStub)
-      .withTreeWatcher(expectedWatcher);
+      .withTreeRootRef(expectedTreeRootRef);
     // act
     builder.call();
     // assert
-    const actualWatcher = aggregatorStub.treeWatcher;
+    const actualTreeRootRef = aggregatorStub.treeRootRef;
-    expect(actualWatcher).to.equal(expectedWatcher);
+    expect(actualTreeRootRef).to.equal(expectedTreeRootRef);
   });
   it('does not throw if node has no parent', () => {
     // arrange
@@ -185,21 +185,21 @@ describe('useAutoUpdateParentCheckState', () => {
 class UseAutoUpdateParentCheckStateBuilder {
   private changeAggregator = new UseNodeStateChangeAggregatorStub();
 
-  private treeWatcher: WatchSource<TreeRoot | undefined> = () => new TreeRootStub();
+  private treeRootRef: Readonly<Ref<TreeRoot>> = shallowRef(new TreeRootStub());
 
   public withChangeAggregator(changeAggregator: UseNodeStateChangeAggregatorStub): this {
     this.changeAggregator = changeAggregator;
     return this;
   }
 
-  public withTreeWatcher(treeWatcher: WatchSource<TreeRoot | undefined>): this {
+  public withTreeRootRef(treeRootRef: Readonly<Ref<TreeRoot>>): this {
-    this.treeWatcher = treeWatcher;
+    this.treeRootRef = treeRootRef;
     return this;
   }
 
   public call(): ReturnType<typeof useAutoUpdateParentCheckState> {
     return useAutoUpdateParentCheckState(
-      this.treeWatcher,
+      this.treeRootRef,
       this.changeAggregator.get(),
     );
   }

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
-  shallowRef, defineComponent, WatchSource, nextTick,
+  shallowRef, defineComponent, nextTick, type Ref,
 } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
@@ -15,25 +15,25 @@ describe('useCurrentTreeNodes', () => {
   it('should set nodes on immediate invocation', () => {
     // arrange
     const expectedNodes = new QueryableNodesStub();
-    const treeWatcher = shallowRef<TreeRoot>(new TreeRootStub().withCollection(
+    const treeRootRef = shallowRef(new TreeRootStub().withCollection(
       new TreeNodeCollectionStub().withNodes(expectedNodes),
     ));
     // act
-    const { returnObject } = mountWrapperComponent(treeWatcher);
+    const { returnObject } = mountWrapperComponent(treeRootRef);
     // assert
     expect(returnObject.nodes.value).to.deep.equal(expectedNodes);
   });
 
-  it('should update nodes when treeWatcher changes', async () => {
+  it('should update nodes when tree root changes', async () => {
     // arrange
     const initialNodes = new QueryableNodesStub();
-    const treeWatcher = shallowRef(
+    const treeRootRef = shallowRef(
       new TreeRootStub().withCollection(new TreeNodeCollectionStub().withNodes(initialNodes)),
     );
-    const { returnObject } = mountWrapperComponent(treeWatcher);
+    const { returnObject } = mountWrapperComponent(treeRootRef);
     const newExpectedNodes = new QueryableNodesStub();
     // act
-    treeWatcher.value = new TreeRootStub().withCollection(
+    treeRootRef.value = new TreeRootStub().withCollection(
       new TreeNodeCollectionStub().withNodes(newExpectedNodes),
     );
     await nextTick();
@@ -45,9 +45,9 @@ describe('useCurrentTreeNodes', () => {
     // arrange
     const initialNodes = new QueryableNodesStub();
     const treeCollectionStub = new TreeNodeCollectionStub().withNodes(initialNodes);
-    const treeWatcher = shallowRef(new TreeRootStub().withCollection(treeCollectionStub));
+    const treeRootRef = shallowRef(new TreeRootStub().withCollection(treeCollectionStub));
 
-    const { returnObject } = mountWrapperComponent(treeWatcher);
+    const { returnObject } = mountWrapperComponent(treeRootRef);
 
     const newExpectedNodes = new QueryableNodesStub();
     // act
@@ -58,12 +58,12 @@ describe('useCurrentTreeNodes', () => {
   });
 });
 
-function mountWrapperComponent(treeWatcher: WatchSource<TreeRoot | undefined>) {
+function mountWrapperComponent(treeRootRef: Ref<TreeRoot>) {
   let returnObject: ReturnType<typeof useCurrentTreeNodes>;
   const wrapper = shallowMount(
     defineComponent({
       setup() {
-        returnObject = useCurrentTreeNodes(treeWatcher);
+        returnObject = useCurrentTreeNodes(treeRootRef);
       },
       template: '<div></div>',
     }),

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { WatchSource, defineComponent, nextTick } from 'vue';
+import { defineComponent, nextTick, shallowRef } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import { useCurrentTreeNodes } from '@/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes';
@@ -17,20 +17,21 @@ import { TreeNodeStateDescriptorStub } from '@tests/unit/shared/Stubs/TreeNodeSt
 import { TreeNodeStateAccessStub } from '@tests/unit/shared/Stubs/TreeNodeStateAccessStub';
 import { IEventSubscriptionCollection } from '@/infrastructure/Events/IEventSubscriptionCollection';
 import { FunctionKeys } from '@/TypeHelpers';
+import type { Ref } from 'vue';
 
 describe('useNodeStateChangeAggregator', () => {
-  it('watches nodes on specified tree', () => {
+  it('tracks nodes on specified tree', () => {
     // arrange
-    const expectedWatcher = () => new TreeRootStub();
+    const expectedTreeRootRef = shallowRef(new TreeRootStub());
     const currentTreeNodesStub = new UseCurrentTreeNodesStub();
     const builder = new UseNodeStateChangeAggregatorBuilder()
       .withCurrentTreeNodes(currentTreeNodesStub.get())
-      .withTreeWatcher(expectedWatcher);
+      .withTreeRootRef(expectedTreeRootRef);
     // act
     builder.mountWrapperComponent();
     // assert
-    const actualWatcher = currentTreeNodesStub.treeWatcher;
+    const actualTreeRootRef = currentTreeNodesStub.treeRootRef;
-    expect(actualWatcher).to.equal(expectedWatcher);
+    expect(actualTreeRootRef).to.equal(expectedTreeRootRef);
   });
   describe('onNodeStateChange', () => {
     describe('throws if callback is absent', () => {
@@ -302,14 +303,14 @@ function createFlatCollection(nodes: readonly TreeNode[]): QueryableNodesStub {
 }
 
 class UseNodeStateChangeAggregatorBuilder {
-  private treeWatcher: WatchSource<TreeRoot | undefined> = () => new TreeRootStub();
+  private treeRootRef: Readonly<Ref<TreeRoot>> = shallowRef(new TreeRootStub());
 
   private currentTreeNodes: typeof useCurrentTreeNodes = new UseCurrentTreeNodesStub().get();
 
   private events: UseAutoUnsubscribedEventsStub = new UseAutoUnsubscribedEventsStub();
 
-  public withTreeWatcher(treeWatcher: WatchSource<TreeRoot | undefined>): this {
+  public withTreeRootRef(treeRootRef: Readonly<Ref<TreeRoot>>): this {
-    this.treeWatcher = treeWatcher;
+    this.treeRootRef = treeRootRef;
     return this;
   }
 
@@ -325,11 +326,11 @@ class UseNodeStateChangeAggregatorBuilder {
 
   public mountWrapperComponent() {
     let returnObject: ReturnType<typeof useNodeStateChangeAggregator>;
-    const { treeWatcher, currentTreeNodes } = this;
+    const { treeRootRef, currentTreeNodes } = this;
     const wrapper = shallowMount(
       defineComponent({
         setup() {
-          returnObject = useNodeStateChangeAggregator(treeWatcher, currentTreeNodes);
+          returnObject = useNodeStateChangeAggregator(treeRootRef, currentTreeNodes);
         },
         template: '<div></div>',
       }),

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput.spec.ts

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import { WatchSource, ref, nextTick } from 'vue';
+import { ref, nextTick, type Ref } from 'vue';
 import { CategoryNodeParser, useTreeViewNodeInput } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
@@ -17,12 +17,10 @@ describe('useTreeViewNodeInput', () => {
   describe('when given categoryId', () => {
     it('sets input nodes correctly', async () => {
       // arrange
-      const testCategoryId = ref<number | undefined>();
+      const testCategoryIdRef = ref<number | undefined>();
       const {
         useStateStub, returnObject, parserMock, converterMock,
-      } = mountWrapperComponent(
+      } = mountWrapperComponent(testCategoryIdRef);
-        () => testCategoryId.value,
-      );
       const expectedCategoryId = 123;
       const expectedCategoryCollection = new CategoryCollectionStub().withAction(
         new CategoryStub(expectedCategoryId),
@@ -45,7 +43,7 @@ describe('useTreeViewNodeInput', () => {
       );
       // act
       const { treeViewInputNodes } = returnObject;
-      testCategoryId.value = expectedCategoryId;
+      testCategoryIdRef.value = expectedCategoryId;
       await nextTick();
       // assert
       const actualInputNodes = treeViewInputNodes.value;
@@ -60,9 +58,7 @@ describe('useTreeViewNodeInput', () => {
       const testCategoryId = ref<number | undefined>();
       const {
         useStateStub, returnObject, parserMock, converterMock,
-      } = mountWrapperComponent(
+      } = mountWrapperComponent(testCategoryId);
-        () => testCategoryId.value,
-      );
       const expectedCategoryCollection = new CategoryCollectionStub().withAction(
         new CategoryStub(123),
       );
@@ -92,7 +88,7 @@ describe('useTreeViewNodeInput', () => {
   });
 });
 
-function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined>) {
+function mountWrapperComponent(categoryIdRef: Ref<number | undefined>) {
   const useStateStub = new UseCollectionStateStub();
   const parserMock = mockCategoryNodeParser();
   const converterMock = mockConverter();
@@ -100,7 +96,7 @@ function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined
 
   shallowMount({
     setup() {
-      returnObject = useTreeViewNodeInput(categoryIdWatcher, parserMock.mock, converterMock.mock);
+      returnObject = useTreeViewNodeInput(categoryIdRef, parserMock.mock, converterMock.mock);
     },
     template: '<div></div>',
   }, {

tests/unit/shared/Stubs/UseCurrentTreeNodesStub.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, shallowReadonly, shallowRef, triggerRef,
+  type Ref, shallowReadonly, shallowRef, triggerRef,
 } from 'vue';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import { useCurrentTreeNodes } from '@/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes';
@@ -7,7 +7,7 @@ import { QueryableNodes } from '@/presentation/components/Scripts/View/Tree/Tree
 import { QueryableNodesStub } from './QueryableNodesStub';
 
 export class UseCurrentTreeNodesStub {
-  public treeWatcher: WatchSource<TreeRoot> | undefined;
+  public treeRootRef: Readonly<Ref<TreeRoot>> | undefined;
 
   private nodes = shallowRef<QueryableNodes>(new QueryableNodesStub());
 
@@ -22,8 +22,8 @@ export class UseCurrentTreeNodesStub {
   }
 
   public get(): typeof useCurrentTreeNodes {
-    return (treeWatcher: WatchSource<TreeRoot>) => {
+    return (treeRootRef: Readonly<Ref<TreeRoot>>) => {
-      this.treeWatcher = treeWatcher;
+      this.treeRootRef = treeRootRef;
       return {
         nodes: shallowReadonly(this.nodes),
       };

tests/unit/shared/Stubs/UseNodeStateChangeAggregatorStub.ts

@@ -1,15 +1,15 @@
-import { WatchSource } from 'vue';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import {
   NodeStateChangeEventArgs,
   NodeStateChangeEventCallback,
   useNodeStateChangeAggregator,
 } from '@/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator';
+import type { Ref } from 'vue';
 
 export class UseNodeStateChangeAggregatorStub {
   public callback: NodeStateChangeEventCallback | undefined;
 
-  public treeWatcher: WatchSource<TreeRoot> | undefined;
+  public treeRootRef: Readonly<Ref<TreeRoot>> | undefined;
 
   public onNodeStateChange(callback: NodeStateChangeEventCallback) {
     this.callback = callback;
@@ -23,8 +23,8 @@ export class UseNodeStateChangeAggregatorStub {
   }
 
   public get(): typeof useNodeStateChangeAggregator {
-    return (treeWatcher: WatchSource<TreeRoot>) => {
+    return (treeRootRef: Readonly<Ref<TreeRoot>>) => {
-      this.treeWatcher = treeWatcher;
+      this.treeRootRef = treeRootRef;
       return {
         onNodeStateChange: this.onNodeStateChange.bind(this),
       };