feat: version upgrade diagnostics and quick fix (#36)

9romise · web-flow · commit 663203b5f5b2 · 2026-02-10T14:08:58.000+08:00
* wip

* wip

* wip: simplify upgrade

* fix: correct target string

* feat: add upgrade diagnostic for prerelease and outdated versions

* refactor: remove `semver`, use custom version parse, compare

* test: add basic test cases

* chore: revert playground

* refactor: reduce type assertion

* chore: improve readability of pre-release comparison logic

* chore: remove unused inlineOnly
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@
 | `npmx.hover.enabled`                | Enable hover information for packages                                                   | `boolean` | `true`              |
 | `npmx.completion.version`           | Version completion behavior                                                             | `string`  | `"provenance-only"` |
 | `npmx.completion.excludePrerelease` | Exclude prerelease versions (alpha, beta, rc, canary, etc.) from completion suggestions | `boolean` | `true`              |
+| `npmx.diagnostics.upgrade`          | Show hints when a newer version of a package is available                               | `boolean` | `true`              |
 | `npmx.diagnostics.deprecation`      | Show warnings for deprecated packages                                                   | `boolean` | `true`              |
 | `npmx.diagnostics.replacement`      | Show suggestions for package replacements                                               | `boolean` | `true`              |
 | `npmx.diagnostics.vulnerability`    | Show warnings for packages with known vulnerabilities                                   | `boolean` | `true`              |
diff --git a/package.json b/package.json
@@ -69,6 +69,11 @@
           "default": true,
           "description": "Exclude prerelease versions (alpha, beta, rc, canary, etc.) from completion suggestions"
         },
+        "npmx.diagnostics.upgrade": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show hints when a newer version of a package is available"
+        },
         "npmx.diagnostics.deprecation": {
           "type": "boolean",
           "default": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/constants.ts b/src/constants.ts
@@ -13,3 +13,5 @@ export const NPMX_DEV = 'https://npmx.dev'
 export const NPMX_DEV_API = `${NPMX_DEV}/api`
 
 export const SPACER = '&nbsp;'
+
+export const UPGRADE_MESSAGE_PREFIX = 'New version available: '
diff --git a/src/index.ts b/src/index.ts
@@ -6,12 +6,13 @@ import {
   VERSION_TRIGGER_CHARACTERS,
 } from '#constants'
 import { defineExtension, useCommands, watchEffect } from 'reactive-vscode'
-import { Disposable, languages } from 'vscode'
+import { CodeActionKind, Disposable, languages } from 'vscode'
 import { openFileInNpmx } from './commands/open-file-in-npmx'
 import { openInBrowser } from './commands/open-in-browser'
 import { PackageJsonExtractor } from './extractors/package-json'
 import { PnpmWorkspaceYamlExtractor } from './extractors/pnpm-workspace-yaml'
 import { commands, displayName, version } from './generated-meta'
+import { UpgradeProvider } from './providers/code-actions/upgrade'
 import { VersionCompletionItemProvider } from './providers/completion-item/version'
 import { registerDiagnosticCollection } from './providers/diagnostics'
 import { NpmxHoverProvider } from './providers/hover/npmx'
@@ -61,6 +62,20 @@ export const { activate, deactivate } = defineExtension(() => {
     onCleanup(() => Disposable.from(...disposables).dispose())
   })
 
+  watchEffect((onCleanup) => {
+    if (!config.diagnostics.upgrade)
+      return
+
+    const provider = new UpgradeProvider()
+    const options = { providedCodeActionKinds: [CodeActionKind.QuickFix] }
+    const disposable = Disposable.from(
+      languages.registerCodeActionsProvider({ pattern: PACKAGE_JSON_PATTERN }, provider, options),
+      languages.registerCodeActionsProvider({ pattern: PNPM_WORKSPACE_PATTERN }, provider, options),
+    )
+
+    onCleanup(() => disposable.dispose())
+  })
+
   registerDiagnosticCollection({
     [PACKAGE_JSON_BASENAME]: packageJsonExtractor,
     [PNPM_WORKSPACE_BASENAME]: pnpmWorkspaceYamlExtractor,
diff --git a/src/providers/code-actions/upgrade.ts b/src/providers/code-actions/upgrade.ts
@@ -0,0 +1,19 @@
+import type { CodeActionContext, CodeActionProvider, Command, ProviderResult, Range, Selection, TextDocument } from 'vscode'
+import { UPGRADE_MESSAGE_PREFIX } from '#constants'
+import { CodeAction, CodeActionKind, WorkspaceEdit } from 'vscode'
+
+export class UpgradeProvider implements CodeActionProvider {
+  provideCodeActions(document: TextDocument, _range: Range | Selection, context: CodeActionContext): ProviderResult<(CodeAction | Command)[]> {
+    return context.diagnostics.flatMap((d) => {
+      if (!d.message.startsWith(UPGRADE_MESSAGE_PREFIX))
+        return []
+
+      const target = d.message.slice(UPGRADE_MESSAGE_PREFIX.length)
+      const fix = new CodeAction(`Update to ${target}`, CodeActionKind.QuickFix)
+      fix.edit = new WorkspaceEdit()
+      fix.edit.replace(document.uri, d.range, `${target}`)
+      fix.diagnostics = [d]
+      return [fix]
+    })
+  }
+}
diff --git a/src/providers/completion-item/version.ts b/src/providers/completion-item/version.ts
@@ -3,7 +3,7 @@ import type { CompletionItemProvider, Position, TextDocument } from 'vscode'
 import { PRERELEASE_PATTERN } from '#constants'
 import { config } from '#state'
 import { getPackageInfo } from '#utils/api/package'
-import { formatVersion, isSupportedProtocol, parseVersion } from '#utils/package'
+import { formatVersion, isSupportedProtocol, parseVersion } from '#utils/version'
 import { CompletionItem, CompletionItemKind } from 'vscode'
 
 export class VersionCompletionItemProvider<T extends Extractor> implements CompletionItemProvider {
diff --git a/src/providers/diagnostics/index.ts b/src/providers/diagnostics/index.ts
@@ -11,6 +11,7 @@ import { languages } from 'vscode'
 import { displayName } from '../../generated-meta'
 import { checkDeprecation } from './rules/deprecation'
 import { checkReplacement } from './rules/replacement'
+import { checkUpgrade } from './rules/upgrade'
 import { checkVulnerability } from './rules/vulnerability'
 
 export interface NodeDiagnosticInfo extends Omit<Diagnostic, 'range' | 'source'> {
@@ -20,6 +21,8 @@ export type DiagnosticRule = (dep: DependencyInfo, pkg: PackageInfo) => Awaitabl
 
 const enabledRules = computed<DiagnosticRule[]>(() => {
   const rules: DiagnosticRule[] = []
+  if (config.diagnostics.upgrade)
+    rules.push(checkUpgrade)
   if (config.diagnostics.deprecation)
     rules.push(checkDeprecation)
   if (config.diagnostics.replacement)
diff --git a/src/providers/diagnostics/rules/deprecation.ts b/src/providers/diagnostics/rules/deprecation.ts
@@ -1,6 +1,6 @@
 import type { DiagnosticRule } from '..'
 import { npmxPackageUrl } from '#utils/links'
-import { isSupportedProtocol, parseVersion } from '#utils/package'
+import { isSupportedProtocol, parseVersion } from '#utils/version'
 import { DiagnosticSeverity, DiagnosticTag, Uri } from 'vscode'
 
 export const checkDeprecation: DiagnosticRule = (dep, pkg) => {
diff --git a/src/providers/diagnostics/rules/upgrade.ts b/src/providers/diagnostics/rules/upgrade.ts
@@ -0,0 +1,42 @@
+import type { DependencyInfo } from '#types/extractor'
+import type { ParsedVersion } from '#utils/version'
+import type { DiagnosticRule, NodeDiagnosticInfo } from '..'
+import { UPGRADE_MESSAGE_PREFIX } from '#constants'
+import { formatVersion, getPrereleaseId, isSupportedProtocol, lt, parseVersion } from '#utils/version'
+import { DiagnosticSeverity } from 'vscode'
+
+function createUpgradeDiagnostic(dep: DependencyInfo, parsed: ParsedVersion, upgradeVersion: string): NodeDiagnosticInfo {
+  const target = formatVersion({ ...parsed, semver: upgradeVersion })
+  return {
+    node: dep.versionNode,
+    severity: DiagnosticSeverity.Hint,
+    message: `${UPGRADE_MESSAGE_PREFIX}${target}`,
+  }
+}
+
+export const checkUpgrade: DiagnosticRule = (dep, pkg) => {
+  const parsed = parseVersion(dep.version)
+  if (!parsed || !isSupportedProtocol(parsed.protocol))
+    return
+
+  const { semver } = parsed
+  const latest = pkg.distTags.latest
+
+  if (latest && lt(semver, latest))
+    return createUpgradeDiagnostic(dep, parsed, latest)
+
+  const currentPreId = getPrereleaseId(semver)
+  if (!currentPreId)
+    return
+
+  for (const [tag, tagVersion] of Object.entries(pkg.distTags)) {
+    if (tag === 'latest')
+      continue
+    if (getPrereleaseId(tagVersion) !== currentPreId)
+      continue
+    if (!lt(semver, tagVersion))
+      continue
+
+    return createUpgradeDiagnostic(dep, parsed, tagVersion)
+  }
+}
diff --git a/src/providers/diagnostics/rules/vulnerability.ts b/src/providers/diagnostics/rules/vulnerability.ts
@@ -2,7 +2,7 @@ import type { OsvSeverityLevel } from '#utils/api/vulnerability'
 import type { DiagnosticRule } from '..'
 import { getVulnerability, SEVERITY_LEVELS } from '#utils/api/vulnerability'
 import { npmxPackageUrl } from '#utils/links'
-import { isSupportedProtocol, parseVersion } from '#utils/package'
+import { isSupportedProtocol, parseVersion } from '#utils/version'
 import { DiagnosticSeverity, Uri } from 'vscode'
 
 const DIAGNOSTIC_MAPPING: Record<Exclude<OsvSeverityLevel, 'unknown'>, DiagnosticSeverity> = {
diff --git a/src/providers/hover/npmx.ts b/src/providers/hover/npmx.ts
@@ -3,7 +3,7 @@ import type { HoverProvider, Position, TextDocument } from 'vscode'
 import { SPACER } from '#constants'
 import { getPackageInfo } from '#utils/api/package'
 import { jsrPackageUrl, npmxDocsUrl, npmxPackageUrl } from '#utils/links'
-import { isSupportedProtocol, parseVersion } from '#utils/package'
+import { isSupportedProtocol, parseVersion } from '#utils/version'
 import { Hover, MarkdownString } from 'vscode'
 
 export class NpmxHoverProvider<T extends Extractor> implements HoverProvider {
diff --git a/src/utils/package.ts b/src/utils/package.ts
@@ -8,52 +8,3 @@ export function encodePackageName(name: string): string {
   }
   return encodeURIComponent(name)
 }
-
-export type VersionProtocol = 'workspace' | 'catalog' | 'npm' | 'jsr' | null
-
-const KNOWN_PROTOCOLS = new Set<VersionProtocol>(['workspace', 'catalog', 'npm', 'jsr'])
-const URL_PREFIXES = ['http://', 'https://', 'git://', 'git+']
-const UNSUPPORTED_PROTOCOLS = new Set<VersionProtocol>(['workspace', 'catalog', 'jsr'])
-
-export interface ParsedVersion {
-  protocol: VersionProtocol
-  prefix: '' | '^' | '~'
-  semver: string
-}
-
-export function isSupportedProtocol(protocol: VersionProtocol): boolean {
-  return !UNSUPPORTED_PROTOCOLS.has(protocol)
-}
-
-export function formatVersion(parsed: ParsedVersion): string {
-  const protocol = parsed.protocol ? `${parsed.protocol}:` : ''
-  return `${protocol}${parsed.prefix}${parsed.semver}`
-}
-
-export function parseVersion(rawVersion: string): ParsedVersion | null {
-  rawVersion = rawVersion.trim()
-  // Skip URL-based versions
-  if (URL_PREFIXES.some((p) => rawVersion.startsWith(p)))
-    return null
-
-  let protocol: VersionProtocol = null
-  let versionStr = rawVersion
-
-  // Parse protocol if present (e.g., npm:^1.0.0 -> protocol: 'npm')
-  const colonIndex = rawVersion.indexOf(':')
-  if (colonIndex !== -1) {
-    protocol = rawVersion.slice(0, colonIndex) as VersionProtocol
-
-    if (!KNOWN_PROTOCOLS.has(protocol))
-      return null
-
-    versionStr = rawVersion.slice(colonIndex + 1)
-  }
-
-  const firstChar = versionStr[0]
-  const hasPrefix = firstChar === '^' || firstChar === '~'
-  const prefix = hasPrefix ? firstChar : ''
-  const semver = hasPrefix ? versionStr.slice(1) : versionStr
-
-  return { protocol, prefix, semver }
-}
diff --git a/src/utils/version.ts b/src/utils/version.ts
diff --git a/tests/package.test.ts b/tests/package.test.ts
diff --git a/tests/version.test.ts b/tests/version.test.ts
