refactor node help watch source (#7660)

Extract the node help watch source into a computed value.

## What changed
- Move the watch predicate in `NodeHelpPage.vue` into a named
`activeHelpDef` computed and pass it to `whenever`
- Keep behavior identical while making the watch source easier to read
and reference

## Why
- Motivation: a review comment requested separating the predicate from
the watcher for readability and idiomatic usage
- Why this approach: a local computed is the smallest change that
preserves behavior and matches the requested structure
- Tradeoffs / limitations: adds a couple of lines and a computed without
changing runtime behavior

## Evidence
- Tests: Not run (existing unit tests for help sync live in
`tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts`)

## References
- Review comment:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7105#discussion_r2636631268
(request to extract the watcher predicate into a computed)
- Related PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7105
(original help sync change)

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
This commit is contained in:
Benjamin Lu
2025-12-22 02:12:11 -08:00
committed by GitHub
parent 082426f084
commit d253f67919

View File

@@ -21,6 +21,7 @@
<script setup lang="ts">
import { whenever } from '@vueuse/core'
import Button from 'primevue/button'
import { computed } from 'vue'
import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
import { useSelectionState } from '@/composables/graph/useSelectionState'
@@ -36,14 +37,14 @@ defineEmits<{
const nodeHelpStore = useNodeHelpStore()
const { nodeDef } = useSelectionState()
// Keep the open help page synced with the current selection while help is open.
whenever(
() => (nodeHelpStore.isHelpOpen ? nodeDef.value : null),
(def) => {
if (!def) return
const currentHelpNode = nodeHelpStore.currentHelpNode
if (currentHelpNode?.nodePath === def.nodePath) return
nodeHelpStore.openHelp(def)
}
const activeHelpDef = computed(() =>
nodeHelpStore.isHelpOpen ? nodeDef.value : null
)
// Keep the open help page synced with the current selection while help is open.
whenever(activeHelpDef, (def) => {
const currentHelpNode = nodeHelpStore.currentHelpNode
if (currentHelpNode?.nodePath === def.nodePath) return
nodeHelpStore.openHelp(def)
})
</script>