feat: display platforms and compatibility on the package page

Author: Simek

src/extension.ts

@@ -1,14 +1,18 @@
 import { exec } from 'node:child_process';
-import { workspace, commands, window, type ExtensionContext, QuickPickItemKind, env, Uri } from 'vscode';
+import { commands, env, type ExtensionContext, QuickPickItemKind, Uri, window, workspace } from 'vscode';
 
 import { detectPackageManager } from './detectPackageManager';
 import { DirectoryEntry } from './types';
 import {
+  deduplicateSearchTokens,
   ENTRY_OPTION,
   fetchData,
   getCommandToRun,
+  getCompatibilityList,
+  getPlatformsList,
   KEYWORD_REGEX,
   numberFormatter,
+  openListWithSearch,
   STRINGS,
   VALID_KEYWORDS_MAP,
   ValidKeyword
@@ -77,6 +81,9 @@ export async function activate(context: ExtensionContext) {
             ]
           : [];
 
+      const platformsList = getPlatformsList(selectedEntry);
+      const compatibilityList = getCompatibilityList(selectedEntry);
+
       const possibleActions = [
         workspacePath && {
           label: ENTRY_OPTION.INSTALL,
@@ -106,6 +113,15 @@ export async function activate(context: ExtensionContext) {
           description: selectedEntry.github.license.name
         },
         { label: ENTRY_OPTION.VIEW_BUNDLEPHOBIA },
+        { label: 'details', kind: QuickPickItemKind.Separator },
+        {
+          label: ENTRY_OPTION.PLATFORMS,
+          description: platformsList.join(', ')
+        },
+        compatibilityList.length > 0 && {
+          label: ENTRY_OPTION.COMPATIBILITY,
+          description: compatibilityList.join(', ')
+        },
         ...examplesActions,
         { label: 'copy data', kind: QuickPickItemKind.Separator },
         { label: ENTRY_OPTION.COPY_NAME },
@@ -141,7 +157,9 @@ export async function activate(context: ExtensionContext) {
             break;
           }
           case ENTRY_OPTION.VISIT_HOMEPAGE: {
-            env.openExternal(Uri.parse(selectedEntry.github.urls.homepage!));
+            if (selectedEntry.github.urls.homepage) {
+              env.openExternal(Uri.parse(selectedEntry.github.urls.homepage));
+            }
             break;
           }
           case ENTRY_OPTION.VISIT_REPO: {
@@ -152,12 +170,22 @@ export async function activate(context: ExtensionContext) {
             env.openExternal(Uri.parse(`https://www.npmjs.com/package/${selectedEntry.npmPkg}`));
             break;
           }
+          case ENTRY_OPTION.VIEW_LICENSE: {
+            env.openExternal(Uri.parse(selectedEntry.github.license.url));
+            break;
+          }
           case ENTRY_OPTION.VIEW_BUNDLEPHOBIA: {
             env.openExternal(Uri.parse(`https://bundlephobia.com/package/${selectedEntry.npmPkg}`));
             break;
           }
-          case ENTRY_OPTION.VIEW_LICENSE: {
-            env.openExternal(Uri.parse(selectedEntry.github.license.url));
+          case ENTRY_OPTION.PLATFORMS: {
+            const searchValue = deduplicateSearchTokens(packagesPick.value, platformsList);
+            await openListWithSearch(packagesPick, searchValue);
+            break;
+          }
+          case ENTRY_OPTION.COMPATIBILITY: {
+            const searchValue = deduplicateSearchTokens(packagesPick.value, compatibilityList);
+            await openListWithSearch(packagesPick, searchValue);
             break;
           }
           case ENTRY_OPTION.COPY_NAME: {
@@ -176,14 +204,7 @@ export async function activate(context: ExtensionContext) {
             break;
           }
           case ENTRY_OPTION.GO_BACK: {
-            packagesPick.placeholder = STRINGS.PLACEHOLDER_BUSY;
-            packagesPick.busy = true;
-
-            packagesPick.show();
-            packagesPick.items = await fetchData(packagesPick.value);
-
-            packagesPick.placeholder = STRINGS.PLACEHOLDER;
-            packagesPick.busy = false;
+            await openListWithSearch(packagesPick);
             break;
           }
         }

src/utils.ts

@@ -1,4 +1,4 @@
-import { window } from 'vscode';
+import { QuickPick, window } from 'vscode';
 
 import { DirectoryEntry, PackageData } from './types';
 
@@ -17,7 +17,9 @@ export enum ENTRY_OPTION {
   COPY_NAME = 'Copy package name',
   COPY_REPO_URL = 'Copy GitHub repository URL',
   COPY_NPM_URL = 'Copy npm registry URL',
-  GO_BACK = '$(newline) Go back to search'
+  GO_BACK = '$(newline) Go back to search',
+  PLATFORMS = 'Platforms',
+  COMPATIBILITY = 'Compatibility'
 }
 
 export enum STRINGS {
@@ -51,22 +53,12 @@ export const VALID_KEYWORDS_MAP = {
 export type ValidKeyword = keyof typeof VALID_KEYWORDS_MAP;
 
 function getDetailLabel(item: PackageData) {
-  const platforms = [
-    item.android ? 'Android' : null,
-    item.ios ? 'iOS' : null,
-    item.macos ? 'macOS' : null,
-    item.tvos ? 'tvOS' : null,
-    item.visionos ? 'visionOS' : null,
-    item.web ? 'Web' : null,
-    item.windows ? 'Windows' : null
-  ].filter(Boolean);
-
   return [
     `$(star) ${numberFormatter.format(item.github.stats.stars)}`,
     `$(gist-fork) ${numberFormatter.format(item.github.stats.forks)}`,
     item.npm?.downloads && `$(arrow-circle-down) ${numberFormatter.format(item.npm.downloads)}`,
     '•',
-    platforms.join(', '),
+    getPlatformsList(item).join(', '),
     (item.newArchitecture || item.expoGo || item.github.hasTypes) && '•',
     (item.newArchitecture || item.expoGo) && `$(verified) New Architecture`,
     item.github.hasTypes && `$(symbol-type-parameter) Types`
@@ -124,3 +116,40 @@ export async function fetchData(query?: string, keywords?: ValidKeyword[]): Prom
     return [];
   }
 }
+
+export function getPlatformsList(item: PackageData): string[] {
+  return [
+    item.android ? 'Android' : null,
+    item.ios ? 'iOS' : null,
+    item.macos ? 'macOS' : null,
+    item.tvos ? 'tvOS' : null,
+    item.visionos ? 'visionOS' : null,
+    item.web ? 'Web' : null,
+    item.windows ? 'Windows' : null
+  ].filter((platform) => platform !== null);
+}
+
+export function getCompatibilityList(item: PackageData): string[] {
+  return [item.expoGo ? 'Expo Go' : null, item.fireos ? 'FireOS' : null].filter((entry) => entry !== null);
+}
+
+export function formatAsSearchParams(list: string[]) {
+  return list.map((entry) => `:${entry.replace(' ', '')}`);
+}
+
+export function deduplicateSearchTokens(query: string, tokens: string[]) {
+  return Array.from(new Set([...query.split(' '), ...formatAsSearchParams(tokens)])).join(' ');
+}
+
+export async function openListWithSearch(packagesPick: QuickPick<DirectoryEntry>, query: string = packagesPick.value) {
+  packagesPick.placeholder = STRINGS.PLACEHOLDER_BUSY;
+  packagesPick.busy = true;
+
+  packagesPick.value = query;
+
+  packagesPick.show();
+  packagesPick.items = await fetchData(query);
+
+  packagesPick.placeholder = STRINGS.PLACEHOLDER;
+  packagesPick.busy = false;
+}