feat: add packages annotations in package.json

Author: Simek

.oxfmtrc.json

@@ -6,5 +6,6 @@
   "bracketSameLine": true,
   "trailingComma": "es5",
   "arrowParens": "avoid",
-  "ignorePatterns": ["**/build", "**/node_modules", "package.json", "CHANGELOG.md"]
+  "experimentalSortPackageJson": false,
+  "ignorePatterns": ["**/build", "**/node_modules", "CHANGELOG.md"]
 }

bun.lock

@@ -20,7 +20,10 @@
   },
   "icon": "./assets/icon.png",
   "activationEvents": [
-    "onCommand:extension.showQuickPick"
+    "onCommand:extension.showQuickPick",
+    "onCommand:extension.annotatePackageJsonDependencies",
+    "onCommand:extension.clearPackageJsonDependencyAnnotations",
+    "workspaceContains:package.json"
   ],
   "main": "./build/index.js",
   "contributes": {
@@ -51,8 +54,8 @@
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild": "^0.27.2",
     "ovsx": "^0.10.8",
-    "oxfmt": "^0.24.0",
-    "oxlint": "^1.39.0",
+    "oxfmt": "^0.26.0",
+    "oxlint": "^1.41.0",
     "oxlint-tsgolint": "^0.11.1",
     "rimraf": "6.1.2",
     "semantic-release": "^25.0.2",

package.json

@@ -0,0 +1,240 @@
+import {
+  type DecorationOptions,
+  ThemeColor,
+  Range,
+  type TextEditor,
+  window,
+  workspace,
+  type Disposable,
+  MarkdownString,
+} from 'vscode';
+
+import { CHECK_API_URL } from './constants';
+import { type PackageJSONDeps, type APICheckResponseData, type DependencyRef } from './types';
+import { getCompatibilityList, getDetailLabel, getPlatformsList, numberFormatter } from './utils';
+
+function tryParsePackageJson(text: string): PackageJSONDeps | null {
+  try {
+    return JSON.parse(text) as PackageJSONDeps;
+  } catch {
+    return null;
+  }
+}
+
+function isPackageJsonEditor(editor?: TextEditor): editor is TextEditor {
+  if (!editor) {
+    return false;
+  }
+
+  const doc = editor.document;
+
+  if (!/package\.json$/i.test(doc.fileName)) {
+    return false;
+  }
+
+  return doc.languageId === 'json' || doc.languageId === 'jsonc';
+}
+
+const ENTRY_REGEXP = /^\s*"(?<name>[^"]+)"\s*:\s*"(?<version>(?:\\\\"|[^"])*)"/;
+
+function getDependencyRefsFromPackageJsonText(text: string, editor: TextEditor): DependencyRef[] {
+  const parsed = tryParsePackageJson(text);
+  if (!parsed) {
+    return [];
+  }
+
+  const wantedNames = new Set<string>([
+    ...Object.keys(parsed.dependencies ?? {}),
+    ...Object.keys(parsed.peerDependencies ?? {}),
+  ]);
+
+  if (wantedNames.size === 0) {
+    return [];
+  }
+
+  const refs: DependencyRef[] = [];
+  const lines = text.split(/\r?\n/);
+
+  for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+    const lineText = lines[lineNumber];
+    const entryMatch = ENTRY_REGEXP.exec(lineText);
+    const pkgName = entryMatch?.groups?.name;
+
+    if (!pkgName || !wantedNames.has(pkgName)) {
+      continue;
+    }
+
+    let endChar = lineText.length;
+    while (endChar > 0 && /\s/.test(lineText[endChar - 1])) {
+      endChar--;
+    }
+
+    const anchorPos = editor.document.lineAt(lineNumber).range.start.translate(0, endChar);
+
+    refs.push({ name: pkgName, anchor: new Range(anchorPos, anchorPos) });
+  }
+
+  return refs;
+}
+
+async function fetchDirectoryInfo(packagesList: string, signal: AbortSignal): Promise<APICheckResponseData | null> {
+  const response = await fetch(`${CHECK_API_URL}?name=${encodeURIComponent(packagesList)}`, { signal });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  return (await response.json()) as APICheckResponseData;
+}
+
+export function createPackageJsonDependencyAnnotator(): {
+  refreshActiveEditor: () => Promise<void>;
+  clearActiveEditor: () => void;
+  dispose: () => void;
+} {
+  const decorationType = window.createTextEditorDecorationType({
+    after: {
+      margin: '0 0 0 1rem',
+    },
+  });
+
+  let abortController = new AbortController();
+  let refreshTimer: NodeJS.Timeout | undefined;
+
+  function clearActiveEditor() {
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+    editor.setDecorations(decorationType, []);
+  }
+
+  function scheduleRefresh(delayMs = 500) {
+    if (refreshTimer) {
+      clearTimeout(refreshTimer);
+    }
+    refreshTimer = setTimeout(() => {
+      void refreshActiveEditor();
+    }, delayMs);
+  }
+
+  async function refreshActiveEditor() {
+    const editor = window.activeTextEditor;
+
+    if (!isPackageJsonEditor(editor)) {
+      return;
+    }
+
+    abortController.abort();
+    abortController = new AbortController();
+
+    const doc = editor.document;
+    const localAbort = abortController;
+    const refs = getDependencyRefsFromPackageJsonText(doc.getText(), editor);
+
+    if (refs.length === 0) {
+      clearActiveEditor();
+      return;
+    }
+
+    window.setStatusBarMessage(`React Native Directory: annotating ${refs.length} dependencies…`, 2500);
+
+    const decorations: DecorationOptions[] = [];
+    const depsList = refs.map(({ name }) => name).join(',');
+    const result = await fetchDirectoryInfo(depsList, localAbort.signal).catch(() => null);
+
+    if (!result) {
+      window.setStatusBarMessage('React Native Directory: failed to load annotations', 2500);
+      return;
+    }
+
+    for (const lib of Object.values(result)) {
+      const anchor = refs.find(({ name }) => name === lib.npmPkg)?.anchor;
+
+      if (!anchor) {
+        continue;
+      }
+
+      const parts = [
+        `★ ${numberFormatter.format(lib.github.stats.stars)}`,
+        lib.npm?.downloads ? `⧨ ${numberFormatter.format(lib.npm.downloads)}` : undefined,
+        lib.unmaintained ? ` • Unmaintained` : undefined,
+        lib.newArchitecture || lib.expoGo
+          ? ` • New Architecture${lib.newArchitecture === 'new-arch-only' ? ' only' : ''}`
+          : undefined,
+      ].filter(Boolean);
+
+      const tooltip = new MarkdownString(undefined, true);
+      tooltip.appendMarkdown(`$(package) **${lib.npmPkg}**${lib.unmaintained ? ' $(warning) Unmaintained' : ''}\n\n`);
+
+      if (lib.github.description) {
+        tooltip.appendMarkdown(`${lib.github.description}\n\n`);
+      }
+
+      tooltip.appendMarkdown(`- **Platforms:** ${getPlatformsList(lib).join(', ')}\n`);
+
+      const compatibility = getCompatibilityList(lib);
+      if (compatibility.length > 0) {
+        tooltip.appendMarkdown(`- **Compatibility:** ${compatibility.join(', ')}\n`);
+      }
+
+      if (lib.unmaintained && lib.alternatives && lib.alternatives.length > 0) {
+        tooltip.appendMarkdown(`- **Alternatives:** \`${lib.alternatives.join(', ')}\`\n`);
+      }
+
+      tooltip.appendMarkdown(`- **Directory score:** ${lib.score}/100\n\n`);
+      tooltip.appendMarkdown(getDetailLabel(lib, true));
+      tooltip.appendMarkdown(`\n\n---\n`);
+      tooltip.appendMarkdown(`[React Native Directory](https://reactnative.directory/package/${lib.npmPkg}) 🞄 `);
+      tooltip.appendMarkdown(`[GitHub](${lib.githubUrl}) 🞄 `);
+      tooltip.appendMarkdown(`[npm](https://www.npmjs.com/package/${lib.npmPkg}) 🞄 `);
+      tooltip.appendMarkdown(`[Bundlephobia](https://bundlephobia.com/package/${lib.npmPkg})`);
+
+      decorations.push({
+        range: anchor,
+        hoverMessage: tooltip,
+        renderOptions: {
+          after: {
+            contentText: `${parts.join(' ')}`,
+            color: lib.unmaintained
+              ? new ThemeColor('statusBarItem.warningBackground')
+              : new ThemeColor('editorLineNumber.foreground'),
+          },
+        },
+      });
+    }
+
+    if (localAbort.signal.aborted) {
+      return;
+    }
+
+    editor.setDecorations(decorationType, decorations);
+  }
+
+  const disposables: Disposable[] = [
+    decorationType,
+    window.onDidChangeActiveTextEditor(() => scheduleRefresh()),
+    workspace.onDidOpenTextDocument(() => scheduleRefresh()),
+    workspace.onDidChangeTextDocument(event => {
+      const active = window.activeTextEditor;
+      if (!isPackageJsonEditor(active) || event.document.uri.toString() !== active.document.uri.toString()) {
+        return;
+      }
+      scheduleRefresh();
+    }),
+  ];
+
+  function dispose() {
+    abortController.abort();
+    if (refreshTimer) {
+      clearTimeout(refreshTimer);
+    }
+    for (const disposable of disposables) {
+      disposable.dispose();
+    }
+  }
+
+  scheduleRefresh(0);
+
+  return { refreshActiveEditor, clearActiveEditor, dispose };
+}

src/annotatePackageJson.ts

@@ -1,4 +1,5 @@
 export const BASE_API_URL = 'https://reactnative.directory/api/libraries';
+export const CHECK_API_URL = 'https://reactnative.directory/api/library';
 export const KEYWORD_REGEX = /:\w+/g;
 
 export enum ENTRY_OPTION {