refactor: extract JSON parsing logic into reusable extractor classes

Author: 9romise

src/constants.ts

@@ -1,10 +1,3 @@
 export const PACKAGE_JSON_PATTERN = '**/package.json'
 
 export const NPM_REGISTRY = 'https://registry.npmjs.org'
-
-export const DEP_SECTIONS = [
-  'dependencies',
-  'devDependencies',
-  'peerDependencies',
-  'optionalDependencies',
-]

src/extractors/json.ts

@@ -0,0 +1,74 @@
+import type { DependencyInfo, Extractor } from '#types/extractor'
+import type { Node } from 'jsonc-parser'
+import type { TextDocument } from 'vscode'
+import { createCachedParse } from '#utils/data'
+import { findNodeAtLocation, findNodeAtOffset, parseTree } from 'jsonc-parser'
+import { Range } from 'vscode'
+
+const DEP_SECTIONS = [
+  'dependencies',
+  'devDependencies',
+  'peerDependencies',
+  'optionalDependencies',
+]
+
+export class JsonExtractor implements Extractor<Node> {
+  parse = createCachedParse(parseTree)
+
+  getNodeRange(doc: TextDocument, node: Node) {
+    const start = doc.positionAt(node.offset + 1)
+    const end = doc.positionAt(
+      node.offset + node.length - 1,
+    )
+
+    return new Range(start, end)
+  }
+
+  inDependencySection(root: Node, node: Node) {
+    return DEP_SECTIONS.some((section) => {
+      const dep = findNodeAtLocation(root, [section])
+      if (!dep || !dep.parent)
+        return false
+
+      const { offset, length } = dep.parent.children![1]
+
+      return node.offset > offset && node.offset < offset + length
+    })
+  }
+
+  getDependenciesInfo(root: Node) {
+    const info: DependencyInfo<Node>[] = []
+
+    DEP_SECTIONS.forEach((section) => {
+      const node = findNodeAtLocation(root, [section])
+      if (!node || !node.children)
+        return
+
+      for (const dep of node.children) {
+        const keyNode = dep.children?.[0]
+        if (!keyNode || typeof keyNode.value !== 'string')
+          continue
+
+        info.push({
+          node: keyNode,
+          name: keyNode.value,
+          version: '',
+        })
+      }
+    })
+
+    return info
+  }
+
+  getDependencyInfoByOffset(root: Node, offset: number) {
+    const node = findNodeAtOffset(root, offset)
+    if (!node || node.type !== 'string' || !this.inDependencySection(root, node))
+      return
+
+    return {
+      node,
+      name: node.parent!.children![0].value as string,
+      version: node.value as string,
+    }
+  }
+}

src/index.ts

@@ -1,19 +1,31 @@
+import { PACKAGE_JSON_PATTERN } from '#constants'
 import { defineExtension } from 'reactive-vscode'
+import { languages } from 'vscode'
+import { JsonExtractor } from './extractors/json'
 import { displayName, version } from './generated-meta'
-import { registerJsonCompletionItemProvider } from './providers/completion-item/json'
-import { registerJsonDocumentLinkProvider } from './providers/document-link/json'
+import { triggerChars, VersionCompletionItemProvider } from './providers/completion-item/version'
+import { NpmxDocumentLinkProvider } from './providers/document-link/npmx'
 import { config, logger } from './state'
 
 export const { activate, deactivate } = defineExtension((ctx) => {
   logger.info(`${displayName} Activated, v${version}`)
 
+  const jsonExtractor = new JsonExtractor()
+
   ctx.subscriptions.push(
-    registerJsonDocumentLinkProvider(),
+    languages.registerDocumentLinkProvider(
+      { pattern: PACKAGE_JSON_PATTERN },
+      new NpmxDocumentLinkProvider(jsonExtractor),
+    ),
   )
 
   if (config.versionCompletion !== 'off') {
     ctx.subscriptions.push(
-      registerJsonCompletionItemProvider(),
+      languages.registerCompletionItemProvider(
+        { pattern: PACKAGE_JSON_PATTERN },
+        new VersionCompletionItemProvider(jsonExtractor),
+        ...triggerChars,
+      ),
     )
   }
 })

src/providers/completion-item/json.ts

@@ -1,4 +1,5 @@
-import type { CompletionItemProvider, Position, Range, TextDocument } from 'vscode'
+import type { Extractor } from '#types/extractor'
+import type { CompletionItemProvider, Position, TextDocument } from 'vscode'
 import { config } from '#state'
 import { getPackageInfo } from '#utils/npm'
 import { CompletionItem, CompletionItemKind } from 'vscode'
@@ -16,12 +17,20 @@ function getPrefix(v: string) {
 
 export const triggerChars = ['.', '^', '~', ...Array.from({ length: 10 }).map((_, i) => `${i}`)]
 
-export abstract class BaseCompletionItemProvider<T> implements CompletionItemProvider {
-  abstract getDepInfo(document: TextDocument, position: Position): { node: T, name: string, version: string } | undefined
-  abstract getReplacingRange(document: TextDocument, node: T): Range
+export class VersionCompletionItemProvider<T extends Extractor<any>> implements CompletionItemProvider {
+  extractor: T
+
+  constructor(extractor: T) {
+    this.extractor = extractor
+  }
 
   async provideCompletionItems(document: TextDocument, position: Position) {
-    const info = this.getDepInfo(document, position)
+    const root = this.extractor.parse(document)
+    if (!root)
+      return
+
+    const offset = document.offsetAt(position)
+    const info = this.extractor.getDependencyInfoByOffset(root, offset)
     if (!info)
       return
 
@@ -44,7 +53,7 @@ export abstract class BaseCompletionItemProvider<T> implements CompletionItemPro
       const text = `${prefix}${version}`
       const item = new CompletionItem(text, CompletionItemKind.Value)
 
-      item.range = this.getReplacingRange(document, node)
+      item.range = this.extractor.getNodeRange(document, node)
       item.insertText = text
       if (tag)
         item.detail = tag

src/providers/completion-item/base.ts src/providers/completion-item/version.tssrc/providers/completion-item/base.ts renamed to src/providers/completion-item/version.ts

@@ -0,0 +1,25 @@
+import type { Extractor } from '#types/extractor'
+import type { DocumentLinkProvider, TextDocument } from 'vscode'
+import { DocumentLink, Uri } from 'vscode'
+
+export class NpmxDocumentLinkProvider<T extends Extractor<any>> implements DocumentLinkProvider {
+  extractor: T
+
+  constructor(extractor: T) {
+    this.extractor = extractor
+  }
+
+  provideDocumentLinks(document: TextDocument) {
+    const root = this.extractor.parse(document)
+    if (!root)
+      return
+
+    return this.extractor.getDependenciesInfo(root).map(({ node, name }) => {
+      const range = this.extractor.getNodeRange(document, node)
+
+      const uri = Uri.parse(`https://npmx.dev/package/${name}`)
+
+      return new DocumentLink(range, uri)
+    })
+  }
+}

src/providers/document-link/base.ts

@@ -0,0 +1,17 @@
+import type { Range, TextDocument } from 'vscode'
+
+export interface DependencyInfo<T> {
+  node: T
+  name: string
+  version: string
+}
+
+export interface Extractor<T> {
+  parse: (document: TextDocument) => T | undefined
+
+  getNodeRange: (document: TextDocument, node: T) => Range
+
+  getDependenciesInfo: (root: T) => DependencyInfo<T>[]
+
+  getDependencyInfoByOffset: (root: T, offset: number) => DependencyInfo<T> | undefined
+}