feat: version lens

Author: 9romise

README.md

@@ -46,6 +46,7 @@
 | `npmx.diagnostics.replacement`      | Show suggestions for package replacements                                               | `boolean` | `true`              |
 | `npmx.diagnostics.vulnerability`    | Show warnings for packages with known vulnerabilities                                   | `boolean` | `true`              |
 | `npmx.diagnostics.distTag`          | Show warnings when a dependency uses a dist tag                                         | `boolean` | `true`              |
+| `npmx.versionLens.enabled`          | Show version lens (CodeLens) for package dependencies                                   | `boolean` | `false`             |
 
 <!-- configs -->
 

eslint.config.ts

@@ -7,10 +7,13 @@ export default defineConfig(
   },
   {
     files: ['src/commands/**'],
+    ignores: ['**/index.ts'],
     rules: {
       'no-restricted-imports': ['error', {
         paths: [{
           name: 'reactive-vscode',
+          allowImportNames: ['useCommand', 'useCommands', 'useTextEditorCommand', 'useTextEditorCommands'],
+          allowTypeImports: true,
           message: 'Do not use reactive-vscode composables in command handlers. Use vscode API directly.',
         }],
       }],

package.json

@@ -93,6 +93,11 @@
           "type": "boolean",
           "default": true,
           "description": "Show warnings when a dependency uses a dist tag"
+        },
+        "npmx.versionLens.enabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Show version lens (CodeLens) for package dependencies"
         }
       }
     },

playground/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "eslint.enable": false,
-  "knip.enabled": false
+  "knip.enabled": false,
+  "npmx.versionLens.enabled": true
 }

src/commands/internal/index.ts

@@ -0,0 +1,9 @@
+import { internalCommands } from '#state'
+import { useTextEditorCommands } from 'reactive-vscode'
+import { replaceText } from './replace-text'
+
+export function useInternalCommands() {
+  useTextEditorCommands({
+    [internalCommands.replaceText]: replaceText,
+  })
+}

src/commands/internal/replace-text.ts

@@ -0,0 +1,9 @@
+import type { TextEditorCommandCallback } from 'reactive-vscode'
+import type { Range, TextEditor, TextEditorEdit } from 'vscode'
+
+export const replaceText: TextEditorCommandCallback = (_: TextEditor, edit: TextEditorEdit, range?: Range, text?: string) => {
+  if (!range || !text)
+    return
+
+  edit.replace(range, text)
+}

src/index.ts

@@ -1,11 +1,13 @@
 import { VERSION_TRIGGER_CHARACTERS } from '#constants'
 import { defineExtension, useCommands, watchEffect } from 'reactive-vscode'
 import { Disposable, languages } from 'vscode'
+import { useInternalCommands } from './commands/internal'
 import { openFileInNpmx } from './commands/open-file-in-npmx'
 import { openInBrowser } from './commands/open-in-browser'
 import { extractorEntries } from './extractors'
 import { commands, displayName, version } from './generated-meta'
 import { useCodeActions } from './providers/code-actions'
+import { useCodeLens } from './providers/code-lens'
 import { VersionCompletionItemProvider } from './providers/completion-item/version'
 import { useDiagnostics } from './providers/diagnostics'
 import { NpmxHoverProvider } from './providers/hover/npmx'
@@ -40,9 +42,10 @@ export const { activate, deactivate } = defineExtension(() => {
     onCleanup(() => Disposable.from(...disposables).dispose())
   })
 
+  useInternalCommands()
   useDiagnostics()
-
   useCodeActions()
+  useCodeLens()
 
   useCommands({
     [commands.openInBrowser]: openInBrowser,

src/providers/code-lens/index.ts

@@ -0,0 +1,18 @@
+import { extractorEntries } from '#extractors'
+import { config } from '#state'
+import { watchEffect } from 'reactive-vscode'
+import { Disposable, languages } from 'vscode'
+import { VersionCodeLensProvider } from './version'
+
+export function useCodeLens() {
+  watchEffect((onCleanup) => {
+    if (!config.versionLens.enabled)
+      return
+
+    const disposables = extractorEntries.map(({ pattern, extractor }) =>
+      languages.registerCodeLensProvider({ pattern }, new VersionCodeLensProvider(extractor)),
+    )
+
+    onCleanup(() => Disposable.from(...disposables).dispose())
+  })
+}

src/providers/code-lens/version.ts

@@ -0,0 +1,91 @@
+import type { DependencyInfo, Extractor } from '#types/extractor'
+import type { CodeLensProvider, TextDocument } from 'vscode'
+import { internalCommands } from '#state'
+import { getPackageInfo } from '#utils/api/package'
+import { resolveExactVersion } from '#utils/package'
+import { resolveUpgradeTargetVersion } from '#utils/upgrade'
+import { formatUpgradeVersion, isSupportedProtocol, parseVersion } from '#utils/version'
+import { debounce } from 'perfect-debounce'
+import diff from 'semver/functions/diff'
+import { CodeLens, EventEmitter } from 'vscode'
+
+const dataMap = new WeakMap<CodeLens, DependencyInfo>()
+
+export class VersionCodeLensProvider<T extends Extractor> implements CodeLensProvider {
+  extractor: T
+  private readonly onDidChangeCodeLensesEmitter = new EventEmitter<void>()
+  readonly onDidChangeCodeLenses = this.onDidChangeCodeLensesEmitter.event
+  private readonly scheduleRefresh = debounce(() => {
+    this.onDidChangeCodeLensesEmitter.fire()
+  }, 100, { leading: false, trailing: true })
+
+  constructor(extractor: T) {
+    this.extractor = extractor
+  }
+
+  provideCodeLenses(document: TextDocument): CodeLens[] {
+    const root = this.extractor.parse(document)
+    if (!root)
+      return []
+
+    const deps = this.extractor.getDependenciesInfo(root)
+    const lenses: CodeLens[] = []
+
+    for (const dep of deps) {
+      const versionRange = this.extractor.getNodeRange(document, dep.versionNode)
+      const lens = new CodeLens(versionRange)
+      dataMap.set(lens, dep)
+      lenses.push(lens)
+    }
+
+    return lenses
+  }
+
+  resolveCodeLens(lens: CodeLens) {
+    const dep = dataMap.get(lens)
+    if (!dep)
+      return lens
+
+    const parsed = parseVersion(dep.version)
+    if (!parsed || !isSupportedProtocol(parsed.protocol)) {
+      lens.command = { title: '$(question) unknown', command: '' }
+      return lens
+    }
+
+    const pkg = getPackageInfo(dep.name)
+    if (pkg instanceof Promise) {
+      lens.command = { title: '$(sync~spin) checking...', command: '' }
+      pkg.finally(() => this.scheduleRefresh())
+      return lens
+    }
+
+    if (!pkg) {
+      lens.command = { title: '$(question) unknown', command: '' }
+      return lens
+    }
+
+    const exactVersion = resolveExactVersion(pkg, parsed.version)
+    if (!exactVersion) {
+      lens.command = { title: '$(question) unknown', command: '' }
+      return lens
+    }
+
+    const targetVersion = resolveUpgradeTargetVersion(pkg, exactVersion)
+    if (!targetVersion) {
+      lens.command = { title: '$(check) latest', command: '' }
+      return lens
+    }
+
+    const newVersion = formatUpgradeVersion(parsed, targetVersion)
+    const updateType = diff(exactVersion, targetVersion)
+    lens.command = {
+      title: updateType
+        ? `$(arrow-up) ${newVersion} (${updateType})`
+        : `$(arrow-up) ${newVersion}`,
+      command: internalCommands.replaceText,
+      arguments: [lens.range, newVersion],
+    }
+
+    return lens
+  }
+}

src/state.ts

@@ -5,3 +5,7 @@ import { displayName, scopedConfigs } from './generated-meta'
 export const config = defineConfig<NestedScopedConfigs>(scopedConfigs.scope)
 
 export const logger = defineLogger(displayName)
+
+export const internalCommands = {
+  replaceText: 'npmx.internal.replaceText',
+} as const