[refactor] replace manual semver operations with semver package

Replace custom compareVersions and isSemVer functions with the robust semver package to handle version comparisons more reliably. This addresses edge cases and follows industry standards for semantic version handling.

Author: christian-byrne

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -44,11 +44,11 @@
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
+import * as semver from 'semver'
 import { computed, ref } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { compareVersions } from '@/utils/formatUtil'
 
 const props = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
@@ -78,7 +78,10 @@ whenever(
 const sortedMissingCoreNodes = computed(() => {
   return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
     // Sort by version in descending order (newest first)
-    return compareVersions(b, a) // Reversed for descending order
+    const versionA = semver.coerce(a)
+    const versionB = semver.coerce(b)
+    if (!versionA || !versionB) return 0
+    return semver.rcompare(versionA, versionB)
   })
 })
 

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -37,14 +37,14 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
+import * as semver from 'semver'
 import { computed, ref, watch } from 'vue'
 
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
-import { isSemVer } from '@/utils/formatUtil'
 
 const TRUNCATED_HASH_LENGTH = 7
 
@@ -71,7 +71,9 @@ const installedVersion = computed(() => {
     SelectedVersion.NIGHTLY
 
   // If Git hash, truncate to 7 characters
-  return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
+  return semver.valid(version)
+    ? version
+    : version.slice(0, TRUNCATED_HASH_LENGTH)
 })
 
 const toggleVersionSelector = (event: Event) => {

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -62,6 +62,7 @@ import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
+import * as semver from 'semver'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -75,7 +76,6 @@ import {
   SelectedVersion
 } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
-import { isSemVer } from '@/utils/formatUtil'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -97,7 +97,7 @@ onMounted(() => {
   const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
   selectedVersion.value =
     // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
+    semver.valid(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
 })
 
 const getInitialSelectedVersion = () => {

src/composables/nodePack/usePackUpdateStatus.ts

@@ -1,8 +1,8 @@
+import * as semver from 'semver'
 import { computed } from 'vue'
 
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 export const usePackUpdateStatus = (
   nodePack: components['schemas']['Node']
@@ -16,14 +16,17 @@ export const usePackUpdateStatus = (
   const latestVersion = computed(() => nodePack.latest_version?.version)
 
   const isNightlyPack = computed(
-    () => !!installedVersion.value && !isSemVer(installedVersion.value)
+    () => !!installedVersion.value && !semver.valid(installedVersion.value)
   )
 
   const isUpdateAvailable = computed(() => {
     if (!isInstalled.value || isNightlyPack.value || !latestVersion.value) {
       return false
     }
-    return compareVersions(latestVersion.value, installedVersion.value) > 0
+    const installedSemver = semver.coerce(installedVersion.value)
+    const latestSemver = semver.coerce(latestVersion.value)
+    if (!installedSemver || !latestSemver) return false
+    return semver.gt(latestSemver, installedSemver)
   })
 
   return {

src/stores/releaseStore.ts

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
+import * as semver from 'semver'
 import { computed, ref } from 'vue'
 
 import { type ReleaseNote, useReleaseService } from '@/services/releaseService'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { isElectron } from '@/utils/envUtil'
-import { compareVersions, stringToLocale } from '@/utils/formatUtil'
+import { stringToLocale } from '@/utils/formatUtil'
 
 // Store for managing release notes
 export const useReleaseStore = defineStore('release', () => {
@@ -54,16 +55,19 @@ export const useReleaseStore = defineStore('release', () => {
   const isNewVersionAvailable = computed(
     () =>
       !!recentRelease.value &&
-      compareVersions(
-        recentRelease.value.version,
-        currentComfyUIVersion.value
-      ) > 0
+      semver.gt(
+        semver.coerce(recentRelease.value.version) || '0.0.0',
+        semver.coerce(currentComfyUIVersion.value) || '0.0.0'
+      )
   )
 
   const isLatestVersion = computed(
     () =>
       !!recentRelease.value &&
-      !compareVersions(recentRelease.value.version, currentComfyUIVersion.value)
+      semver.eq(
+        semver.coerce(recentRelease.value.version) || '0.0.0',
+        semver.coerce(currentComfyUIVersion.value) || '0.0.0'
+      )
   )
 
   const hasMediumOrHighAttention = computed(() =>

src/stores/settingStore.ts

@@ -1,13 +1,13 @@
 import _ from 'lodash'
 import { defineStore } from 'pinia'
+import * as semver from 'semver'
 import { ref } from 'vue'
 
 import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { SettingParams } from '@/types/settingTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 export const getSettingInfo = (setting: SettingParams) => {
   const parts = setting.category || setting.id.split('.')
@@ -132,17 +132,30 @@ export const useSettingStore = defineStore('setting', () => {
 
       if (installedVersion) {
         const sortedVersions = Object.keys(defaultsByInstallVersion).sort(
-          (a, b) => compareVersions(b, a)
+          (a, b) => {
+            const versionA = semver.coerce(a)
+            const versionB = semver.coerce(b)
+            if (!versionA || !versionB) return 0
+            return semver.rcompare(versionA, versionB)
+          }
         )
 
         for (const version of sortedVersions) {
-          // Ensure the version is in a valid format before comparing
-          if (!isSemVer(version)) {
+          if (!semver.valid(version)) {
             continue
           }
 
-          if (compareVersions(installedVersion, version) >= 0) {
-            const versionedDefault = defaultsByInstallVersion[version]
+          const installedSemver = semver.coerce(installedVersion)
+          const targetSemver = semver.coerce(version)
+          if (
+            installedSemver &&
+            targetSemver &&
+            semver.gte(installedSemver, targetSemver)
+          ) {
+            const versionedDefault =
+              defaultsByInstallVersion[
+                version as `${number}.${number}.${number}`
+              ]
             return typeof versionedDefault === 'function'
               ? versionedDefault()
               : versionedDefault

src/utils/formatUtil.ts

@@ -390,39 +390,6 @@ export const downloadUrlToHfRepoUrl = (url: string): string => {
   }
 }
 
-export const isSemVer = (
-  version: string
-): version is `${number}.${number}.${number}` => {
-  const regex = /^\d+\.\d+\.\d+$/
-  return regex.test(version)
-}
-
-const normalizeVersion = (version: string) =>
-  version
-    .split(/[+.-]/)
-    .map(Number)
-    .filter((part) => !Number.isNaN(part))
-
-export function compareVersions(
-  versionA: string | undefined,
-  versionB: string | undefined
-): number {
-  versionA ??= '0.0.0'
-  versionB ??= '0.0.0'
-
-  const aParts = normalizeVersion(versionA)
-  const bParts = normalizeVersion(versionB)
-
-  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-    const aPart = aParts[i] ?? 0
-    const bPart = bParts[i] ?? 0
-    if (aPart < bPart) return -1
-    if (aPart > bPart) return 1
-  }
-
-  return 0
-}
-
 /**
  * Converts a currency amount to Metronome's integer representation.
  * For USD, converts to cents (multiplied by 100).