feat: add @types/ packages in install command

Author: danielroe

app/components/PackageMetricsBadges.vue

@@ -1,30 +1,14 @@
 <script setup lang="ts">
-import type { ModuleFormat, TypesStatus } from '#shared/utils/package-analysis'
+import { NuxtLink } from '#components'
 
 const props = defineProps<{
   packageName: string
   version?: string
 }>()
 
-interface PackageAnalysisResponse {
-  package: string
-  version: string
-  moduleFormat: ModuleFormat
-  types: TypesStatus
-  engines?: {
-    node?: string
-    npm?: string
-  }
-}
-
-const { data: analysis, status } = useLazyFetch<PackageAnalysisResponse>(
-  () => {
-    const base = `/api/registry/analysis/${props.packageName}`
-    return props.version ? `${base}/v/${props.version}` : base
-  },
-  {
-    server: false, // Client-side only to avoid blocking initial render
-  },
+const { data: analysis } = usePackageAnalysis(
+  () => props.packageName,
+  () => props.version,
 )
 
 const moduleFormatLabel = computed(() => {
@@ -86,10 +70,14 @@ const typesHref = computed(() => {
     <!-- TypeScript types -->
     <li v-if="hasTypes">
       <component
-        :is="typesHref ? 'NuxtLink' : 'span'"
+        :is="typesHref ? NuxtLink : 'span'"
         :to="typesHref"
         class="inline-flex items-center px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
-        :class="typesHref ? 'hover:text-fg hover:border-border-hover' : ''"
+        :class="
+          typesHref
+            ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
+            : ''
+        "
         :title="typesTooltip"
       >
         TS

app/components/SettingsMenu.vue

@@ -43,7 +43,7 @@ onKeyStroke(',', e => {
     <button
       ref="triggerRef"
       type="button"
-      class="link-subtle font-mono text-sm inline-flex items-center justify-center gap-2"
+      class="link-subtle font-mono text-sm inline-flex items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
       :aria-expanded="isOpen"
       aria-haspopup="menu"
       aria-label="Settings"
@@ -81,34 +81,52 @@ onKeyStroke(',', e => {
 
         <div class="p-2 space-y-1">
           <!-- Relative dates toggle -->
-          <div
-            class="flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer"
+          <button
+            type="button"
+            class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            role="menuitemcheckbox"
+            :aria-checked="settings.relativeDates"
             @click="settings.relativeDates = !settings.relativeDates"
           >
-            <label
-              :id="`settings-relative-dates-label`"
-              class="text-sm text-fg cursor-pointer select-none"
-            >
-              Relative dates
-            </label>
-            <button
-              type="button"
-              role="switch"
-              :aria-checked="settings.relativeDates"
-              aria-labelledby="settings-relative-dates-label"
-              class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+            <span class="text-sm text-fg select-none">Relative dates</span>
+            <span
+              class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
               :class="settings.relativeDates ? 'bg-fg' : 'bg-bg-subtle'"
-              @click.stop="settings.relativeDates = !settings.relativeDates"
+              aria-hidden="true"
             >
               <span
-                aria-hidden="true"
                 class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
                 :class="
                   settings.relativeDates ? 'translate-x-4 bg-bg' : 'translate-x-0 bg-fg-muted'
                 "
               />
-            </button>
-          </div>
+            </span>
+          </button>
+
+          <!-- Include @types in install toggle -->
+          <button
+            type="button"
+            class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            role="menuitemcheckbox"
+            :aria-checked="settings.includeTypesInInstall"
+            @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
+          >
+            <span class="text-sm text-fg select-none">Include @types in install</span>
+            <span
+              class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
+              :class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg-subtle'"
+              aria-hidden="true"
+            >
+              <span
+                class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
+                :class="
+                  settings.includeTypesInInstall
+                    ? 'translate-x-4 bg-bg'
+                    : 'translate-x-0 bg-fg-muted'
+                "
+              />
+            </span>
+          </button>
         </div>
       </div>
     </Transition>

app/composables/usePackageAnalysis.ts

@@ -0,0 +1,27 @@
+import type { ModuleFormat, TypesStatus } from '#shared/utils/package-analysis'
+
+export interface PackageAnalysisResponse {
+  package: string
+  version: string
+  moduleFormat: ModuleFormat
+  types: TypesStatus
+  engines?: {
+    node?: string
+    npm?: string
+  }
+}
+
+/**
+ * Composable for fetching package analysis data (module format, types info, etc.)
+ */
+export function usePackageAnalysis(
+  packageName: MaybeRefOrGetter<string>,
+  version?: MaybeRefOrGetter<string | null | undefined>,
+) {
+  return useLazyFetch<PackageAnalysisResponse>(() => {
+    const name = toValue(packageName)
+    const ver = toValue(version)
+    const base = `/api/registry/analysis/${name}`
+    return ver ? `${base}/v/${ver}` : base
+  })
+}

app/composables/useSettings.ts

@@ -7,10 +7,13 @@ import { useLocalStorage } from '@vueuse/core'
 export interface AppSettings {
   /** Display dates as relative (e.g., "3 days ago") instead of absolute */
   relativeDates: boolean
+  /** Include @types/* package in install command for packages without built-in types */
+  includeTypesInInstall: boolean
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
+  includeTypesInInstall: true,
 }
 
 const STORAGE_KEY = 'npmx-settings'

app/pages/[...package].vue

@@ -250,6 +250,23 @@ function hasProvenance(version: PackumentVersion | null): boolean {
 }
 
 const selectedPM = useSelectedPackageManager()
+const { settings } = useSettings()
+
+// Fetch package analysis for @types info
+const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
+
+// Get @types package name if available (non-deprecated)
+const typesPackageName = computed(() => {
+  if (!packageAnalysis.value) return null
+  if (packageAnalysis.value.types.kind !== '@types') return null
+  if (packageAnalysis.value.types.deprecated) return null
+  return packageAnalysis.value.types.packageName
+})
+
+// Check if we should show @types in install command
+const showTypesInInstall = computed(() => {
+  return settings.value.includeTypesInInstall && typesPackageName.value
+})
 
 const installCommandParts = computed(() => {
   if (!pkg.value) return []
@@ -271,11 +288,48 @@ const installCommand = computed(() => {
   })
 })
 
+// Get the dev dependency flag for the selected package manager
+function getDevFlag(pmId: string): string {
+  // bun uses lowercase -d, all others use -D
+  return pmId === 'bun' ? '-d' : '-D'
+}
+
+// @types install command parts (for display)
+const typesInstallCommandParts = computed(() => {
+  if (!typesPackageName.value) return []
+  const pm = packageManagers.find(p => p.id === selectedPM.value)
+  if (!pm) return []
+
+  const devFlag = getDevFlag(selectedPM.value)
+  const pkgSpec =
+    selectedPM.value === 'deno' ? `npm:${typesPackageName.value}` : typesPackageName.value
+
+  return [pm.label, pm.action, devFlag, pkgSpec]
+})
+
+// Full install command including @types (for copying)
+const fullInstallCommand = computed(() => {
+  if (!installCommand.value) return ''
+  if (!showTypesInInstall.value || !typesPackageName.value) {
+    return installCommand.value
+  }
+
+  const pm = packageManagers.find(p => p.id === selectedPM.value)
+  if (!pm) return installCommand.value
+
+  const devFlag = getDevFlag(selectedPM.value)
+  const pkgSpec =
+    selectedPM.value === 'deno' ? `npm:${typesPackageName.value}` : typesPackageName.value
+
+  // Use semicolon to separate commands
+  return `${installCommand.value}; ${pm.label} ${pm.action} ${devFlag} ${pkgSpec}`
+})
+
 // Copy install command
 const copied = ref(false)
 async function copyInstallCommand() {
-  if (!installCommand.value) return
-  await navigator.clipboard.writeText(installCommand.value)
+  if (!fullInstallCommand.value) return
+  await navigator.clipboard.writeText(fullInstallCommand.value)
   copied.value = true
   setTimeout(() => (copied.value = false), 2000)
 }
@@ -453,6 +507,7 @@ defineOgImageComponent('Package', {
               <button
                 type="button"
                 class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                aria-label="Show full description"
                 @click="descriptionExpanded = true"
               >
                 show more
@@ -719,7 +774,7 @@ defineOgImageComponent('Package', {
                 :key="pm.id"
                 role="tab"
                 :aria-selected="selectedPM === pm.id"
-                class="px-2 py-1 font-mono text-xs rounded transition-all duration-150"
+                class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 :class="
                   selectedPM === pm.id
                     ? 'bg-bg-elevated text-fg'
@@ -750,29 +805,54 @@ defineOgImageComponent('Package', {
               <span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
               <span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
             </div>
-            <div class="flex items-center gap-2 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
-              <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-              <code class="font-mono text-sm"
-                ><ClientOnly
+            <div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
+              <!-- Main package install -->
+              <div class="flex items-center gap-2">
+                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
+                <code class="font-mono text-sm"
+                  ><ClientOnly
+                    ><span
+                      v-for="(part, i) in installCommandParts"
+                      :key="i"
+                      :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+                      >{{ i > 0 ? ' ' : '' }}{{ part }}</span
+                    ><template #fallback
+                      ><span class="text-fg">npm</span
+                      ><span class="text-fg-muted"> install {{ pkg.name }}</span></template
+                    ></ClientOnly
+                  ></code
+                >
+              </div>
+              <!-- @types package install (when enabled) -->
+              <div v-if="showTypesInInstall" class="flex items-center gap-2">
+                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
+                <code class="font-mono text-sm"
                   ><span
-                    v-for="(part, i) in installCommandParts"
+                    v-for="(part, i) in typesInstallCommandParts"
                     :key="i"
                     :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
                     >{{ i > 0 ? ' ' : '' }}{{ part }}</span
-                  ><template #fallback
-                    ><span class="text-fg">npm</span
-                    ><span class="text-fg-muted"> install {{ pkg.name }}</span></template
-                  ></ClientOnly
-                ></code
-              >
+                  ></code
+                >
+                <NuxtLink
+                  v-if="typesPackageName"
+                  :to="`/${typesPackageName}`"
+                  class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  title="View @types package"
+                >
+                  <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                  <span class="sr-only">View {{ typesPackageName }}</span>
+                </NuxtLink>
+              </div>
             </div>
           </div>
           <button
             type="button"
             class="absolute top-3 right-3 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            aria-label="Copy install command"
             @click="copyInstallCommand"
           >
-            {{ copied ? 'copied!' : 'copy' }}
+            <span aria-live="polite">{{ copied ? 'copied!' : 'copy' }}</span>
           </button>
         </div>
       </section>