mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 09:00:05 +00:00
df2fda6077
## Summary - Replace custom `compareVersions()` with `semver.compare()` - Replace custom `isSemVer()` with `semver.valid()` - Remove deprecated version comparison functions from `formatUtil.ts` - Update all version comparison logic across components and stores - Fix tests to use semver mocking instead of formatUtil mocking ## Benefits - **Industry standard**: Uses well-maintained, battle-tested `semver` package - **Better reliability**: Handles edge cases more robustly than custom implementation - **Consistent behavior**: All version comparisons now use the same underlying logic - **Type safety**: Better TypeScript support with proper semver types Fixes #4787 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5653-refactor-Replace-manual-semantic-version-utilities-functions-with-semver-package-2736d73d365081fb8498ee11cbcc10e2) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<Message
|
|
v-if="hasMissingCoreNodes"
|
|
severity="info"
|
|
icon="pi pi-info-circle"
|
|
class="my-2 mx-2"
|
|
:pt="{
|
|
root: { class: 'flex-col' },
|
|
text: { class: 'flex-1' }
|
|
}"
|
|
>
|
|
<div class="flex flex-col gap-2">
|
|
<div>
|
|
{{
|
|
currentComfyUIVersion
|
|
? $t('loadWorkflowWarning.outdatedVersion', {
|
|
version: currentComfyUIVersion
|
|
})
|
|
: $t('loadWorkflowWarning.outdatedVersionGeneric')
|
|
}}
|
|
</div>
|
|
<div
|
|
v-for="[version, nodes] in sortedMissingCoreNodes"
|
|
:key="version"
|
|
class="ml-4"
|
|
>
|
|
<div
|
|
class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
|
|
>
|
|
{{
|
|
$t('loadWorkflowWarning.coreNodesFromVersion', {
|
|
version: version || 'unknown'
|
|
})
|
|
}}
|
|
</div>
|
|
<div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
|
|
{{ getUniqueNodeNames(nodes).join(', ') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Message>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Message from 'primevue/message'
|
|
import { compare } from 'semver'
|
|
import { computed } from 'vue'
|
|
|
|
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
|
import { useSystemStatsStore } from '@/stores/systemStatsStore'
|
|
|
|
const props = defineProps<{
|
|
missingCoreNodes: Record<string, LGraphNode[]>
|
|
}>()
|
|
|
|
const systemStatsStore = useSystemStatsStore()
|
|
|
|
const hasMissingCoreNodes = computed(() => {
|
|
return Object.keys(props.missingCoreNodes).length > 0
|
|
})
|
|
|
|
// Use computed for reactive version tracking
|
|
const currentComfyUIVersion = computed<string | null>(() => {
|
|
if (!hasMissingCoreNodes.value) return null
|
|
return systemStatsStore.systemStats?.system?.comfyui_version ?? null
|
|
})
|
|
|
|
const sortedMissingCoreNodes = computed(() => {
|
|
return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
|
|
// Sort by version in descending order (newest first)
|
|
return compare(b, a) // Reversed for descending order
|
|
})
|
|
})
|
|
|
|
const getUniqueNodeNames = (nodes: LGraphNode[]): string[] => {
|
|
return nodes
|
|
.reduce<string[]>((acc, node) => {
|
|
if (node.type && !acc.includes(node.type)) {
|
|
acc.push(node.type)
|
|
}
|
|
return acc
|
|
}, [])
|
|
.sort()
|
|
}
|
|
</script>
|