feat(ui): improve compare types in FacetRow for CLI package (npmx-dev#690)

Co-authored-by: Yevhen Husak <gusa4grr@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

app/components/compare/FacetRow.vue

@@ -48,6 +48,8 @@ function getStatusClass(status?: FacetValue['status']): string {
       return 'text-amber-400'
     case 'bad':
       return 'text-red-400'
+    case 'muted':
+      return 'text-fg-subtle'
     default:
       return 'text-fg'
   }
@@ -62,16 +64,11 @@ function isCellLoading(index: number): boolean {
 <template>
   <div class="contents">
     <!-- Label cell -->
-    <div
-      class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border"
-      :title="description"
-    >
+    <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
-      <span
-        v-if="description"
-        class="i-carbon:information w-3 h-3 text-fg-subtle"
-        aria-hidden="true"
-      />
+      <TooltipApp v-if="description" :text="description" position="top">
+        <span class="i-carbon:information w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+      </TooltipApp>
     </div>
 
     <!-- Value cells -->
@@ -103,7 +100,18 @@ function isCellLoading(index: number): boolean {
 
       <!-- Value display -->
       <template v-else>
+        <TooltipApp v-if="value.tooltip" :text="value.tooltip" position="top">
+          <span
+            class="relative font-mono text-sm text-center tabular-nums cursor-help"
+            :class="getStatusClass(value.status)"
+          >
+            <!-- Date values use DateTime component for i18n and user settings -->
+            <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
+            <template v-else>{{ value.display }}</template>
+          </span>
+        </TooltipApp>
         <span
+          v-else
           class="relative font-mono text-sm text-center tabular-nums"
           :class="getStatusClass(value.status)"
         >

app/composables/usePackageComparison.ts

@@ -1,6 +1,7 @@
-import type { FacetValue, ComparisonFacet, ComparisonPackage } from '#shared/types'
+import type { FacetValue, ComparisonFacet, ComparisonPackage, Packument } from '#shared/types'
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
+import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
 
 export interface PackageComparisonData {
   package: ComparisonPackage
@@ -24,13 +25,16 @@ export interface PackageComparisonData {
     engines?: { node?: string; npm?: string }
     deprecated?: string
   }
+  /** Whether this is a binary-only package (CLI without library entry points) */
+  isBinaryOnly?: boolean
 }
 
 /**
  * Composable for fetching and comparing multiple packages.
  *
  */
 export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
+  const { t } = useI18n()
   const packages = computed(() => toValue(packageNames))
 
   // Cache of fetched data by package name (source of truth)
@@ -75,13 +79,9 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
         namesToFetch.map(async (name): Promise<PackageComparisonData | null> => {
           try {
             // Fetch basic package info first (required)
-            const pkgData = await $fetch<{
-              'name': string
-              'dist-tags': Record<string, string>
-              'time': Record<string, string>
-              'license'?: string
-              'versions': Record<string, { dist?: { unpackedSize?: number }; deprecated?: string }>
-            }>(`https://registry.npmjs.org/${encodePackageName(name)}`)
+            const pkgData = await $fetch<Packument>(
+              `https://registry.npmjs.org/${encodePackageName(name)}`,
+            )
 
             const latestVersion = pkgData['dist-tags']?.latest
             if (!latestVersion) return null
@@ -100,6 +100,15 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
             const versionData = pkgData.versions[latestVersion]
             const packageSize = versionData?.dist?.unpackedSize
 
+            // Detect if package is binary-only
+            const isBinary = isBinaryOnlyPackage({
+              name: pkgData.name,
+              bin: versionData?.bin,
+              main: versionData?.main,
+              module: versionData?.module,
+              exports: versionData?.exports,
+            })
+
             // Count vulnerabilities by severity
             const vulnCounts = { critical: 0, high: 0, medium: 0, low: 0 }
             const vulnList = vulns?.vulnerabilities ?? []
@@ -128,6 +137,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
                 engines: analysis?.engines,
                 deprecated: versionData?.deprecated,
               },
+              isBinaryOnly: isBinary,
             }
           } catch {
             return null
@@ -196,7 +206,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
-      return computeFacetValue(facet, pkg)
+      return computeFacetValue(facet, pkg, t)
     })
   }
 
@@ -223,7 +233,11 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   }
 }
 
-function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData): FacetValue | null {
+function computeFacetValue(
+  facet: ComparisonFacet,
+  data: PackageComparisonData,
+  t: (key: string) => string,
+): FacetValue | null {
   switch (facet) {
     case 'downloads':
       if (data.downloads === undefined) return null
@@ -259,6 +273,14 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
       }
 
     case 'types':
+      if (data.isBinaryOnly) {
+        return {
+          raw: 'binary',
+          display: 'N/A',
+          status: 'muted',
+          tooltip: t('compare.facets.binary_only_tooltip'),
+        }
+      }
       if (!data.analysis) return null
       const types = data.analysis.types
       return {

app/utils/run-command.ts

@@ -2,48 +2,6 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
 import { getPackageSpecifier, packageManagers } from './install-command'
 import type { PackageManagerId } from './install-command'
 
-/**
- * Metadata needed to determine if a package is binary-only.
- */
-export interface PackageMetadata {
-  name: string
-  bin?: string | Record<string, string>
-  main?: string
-  module?: unknown
-  exports?: unknown
-}
-
-/**
- * Determine if a package is "binary-only" (executable without library entry points).
- * Binary-only packages should show execute commands without install commands.
- *
- * A package is binary-only if:
- * - Name starts with "create-" (e.g., create-vite)
- * - Scoped name contains "/create-" (e.g., @vue/create-app)
- * - Has bin field but no main, module, or exports fields
- */
-export function isBinaryOnlyPackage(pkg: PackageMetadata): boolean {
-  // Check create-* patterns
-  if (isCreatePackage(pkg.name)) {
-    return true
-  }
-
-  // Has bin but no entry points
-  const hasBin =
-    pkg.bin !== undefined && (typeof pkg.bin === 'string' || Object.keys(pkg.bin).length > 0)
-  const hasEntryPoint = !!pkg.main || !!pkg.module || !!pkg.exports
-
-  return hasBin && !hasEntryPoint
-}
-
-/**
- * Check if a package uses the create-* naming convention.
- */
-export function isCreatePackage(packageName: string): boolean {
-  const baseName = packageName.startsWith('@') ? packageName.split('/')[1] : packageName
-  return baseName?.startsWith('create-') || packageName.includes('/create-') || false
-}
-
 /**
  * Information about executable commands provided by a package.
  */

i18n/locales/en.json

@@ -852,6 +852,7 @@
       "deselect_all": "Deselect all facets",
       "select_category": "Select all {category} facets",
       "deselect_category": "Deselect all {category} facets",
+      "binary_only_tooltip": "This package exposes binaries and no exports",
       "categories": {
         "performance": "Performance",
         "health": "Health",

lunaria/files/en-US.json

@@ -852,6 +852,7 @@
       "deselect_all": "Deselect all facets",
       "select_category": "Select all {category} facets",
       "deselect_category": "Deselect all {category} facets",
+      "binary_only_tooltip": "This package exposes binaries and no exports",
       "categories": {
         "performance": "Performance",
         "health": "Health",

shared/types/comparison.ts

@@ -124,9 +124,11 @@ export interface FacetValue<T = unknown> {
   /** Formatted display string (or ISO date string if type is 'date') */
   display: string
   /** Optional status indicator */
-  status?: 'good' | 'info' | 'warning' | 'bad' | 'neutral'
+  status?: 'good' | 'info' | 'warning' | 'bad' | 'neutral' | 'muted'
   /** Value type for special rendering (e.g., dates use DateTime component) */
   type?: 'date'
+  /** Optional tooltip text to explain the value */
+  tooltip?: string
 }
 
 /** Package data for comparison */

shared/utils/binary-detection.ts

@@ -0,0 +1,41 @@
+/**
+ * Metadata needed to determine if a package is binary-only.
+ */
+export interface PackageMetadata {
+  name: string
+  bin?: string | Record<string, string>
+  main?: string
+  module?: unknown
+  exports?: unknown
+}
+
+/**
+ * Determine if a package is "binary-only" (executable without library entry points).
+ * Binary-only packages should show execute commands without install commands.
+ *
+ * A package is binary-only if:
+ * - Name starts with "create-" (e.g., create-vite)
+ * - Scoped name contains "/create-" (e.g., @vue/create-app)
+ * - Has bin field but no main, module, or exports fields
+ */
+export function isBinaryOnlyPackage(pkg: PackageMetadata): boolean {
+  // Check create-* patterns
+  if (isCreatePackage(pkg.name)) {
+    return true
+  }
+
+  // Has bin but no entry points
+  const hasBin =
+    pkg.bin !== undefined && (typeof pkg.bin === 'string' || Object.keys(pkg.bin).length > 0)
+  const hasEntryPoint = !!pkg.main || !!pkg.module || !!pkg.exports
+
+  return hasBin && !hasEntryPoint
+}
+
+/**
+ * Check if a package uses the create-* naming convention.
+ */
+export function isCreatePackage(packageName: string): boolean {
+  const baseName = packageName.startsWith('@') ? packageName.split('/')[1] : packageName
+  return baseName?.startsWith('create-') || packageName.includes('/create-') || false
+}

test/unit/app/utils/run-command.spec.ts

@@ -3,9 +3,8 @@ import {
   getExecutableInfo,
   getRunCommand,
   getRunCommandParts,
-  isBinaryOnlyPackage,
-  isCreatePackage,
 } from '../../../../app/utils/run-command'
+import { isBinaryOnlyPackage, isCreatePackage } from '../../../../shared/utils/binary-detection'
 import type { JsrPackageInfo } from '../../../../shared/types/jsr'
 
 describe('executable detection and run commands', () => {