Refactor: Composable disentangling (#5695)

## Summary

Prerequisite refactor/cleanup to use a global store instead of having
nodes throw up events to a parent component that stores a reference to a
singleton service that itself bootstraps and synchronizes with a
separate service to maintain a partially reactive but not fully reactive
set of states that describe some but not all aspects of the nodes on
either the litegraph, the vue side, or both.

## Changes

- **What**: Refactoring, the behavior should not change.
- **Dependencies**: A type utility to help with Vue component props

## Review Focus

Is there something about the current structure that this could affect
that would not be caught by our tests or using the application?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5695-Refactor-Composable-disentangling-2746d73d365081e6938ce656932f3e36)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2025-09-20 13:06:42 -07:00
committed by GitHub
parent fd12591756
commit 8133bd4b7b
21 changed files with 339 additions and 400 deletions

View File

@@ -2,16 +2,17 @@
* Vue-related feature flags composable
* Manages local settings-driven flags and LiteGraph integration
*/
import { createSharedComposable } from '@vueuse/core'
import { computed, watch } from 'vue'
import { useSettingStore } from '@/platform/settings/settingStore'
import { LiteGraph } from '../lib/litegraph/src/litegraph'
export const useVueFeatureFlags = () => {
function useVueFeatureFlagsIndividual() {
const settingStore = useSettingStore()
const isVueNodesEnabled = computed(() => {
const shouldRenderVueNodes = computed(() => {
try {
return settingStore.get('Comfy.VueNodes.Enabled') ?? false
} catch {
@@ -19,20 +20,20 @@ export const useVueFeatureFlags = () => {
}
})
// Whether Vue nodes should render
const shouldRenderVueNodes = computed(() => isVueNodesEnabled.value)
// Sync the Vue nodes flag with LiteGraph global settings
const syncVueNodesFlag = () => {
LiteGraph.vueNodesMode = isVueNodesEnabled.value
}
// Watch for changes and update LiteGraph immediately
watch(isVueNodesEnabled, syncVueNodesFlag, { immediate: true })
watch(
shouldRenderVueNodes,
() => {
LiteGraph.vueNodesMode = shouldRenderVueNodes.value
},
{ immediate: true }
)
return {
isVueNodesEnabled,
shouldRenderVueNodes,
syncVueNodesFlag
shouldRenderVueNodes
}
}
export const useVueFeatureFlags = createSharedComposable(
useVueFeatureFlagsIndividual
)