link install scripts into code tab

Author: bcye

app/components/PackageInstallScripts.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+import { getInstallScriptFilePath } from '~/utils/install-scripts'
+
 const props = defineProps<{
   packageName: string
+  version: string
   installScripts: {
     scripts: ('preinstall' | 'install' | 'postinstall')[]
     content?: Record<string, string>
     npxDependencies: Record<string, string>
   }
 }>()
 
+function getCodeLink(scriptContent: string): string {
+  const filePath = getInstallScriptFilePath(scriptContent)
+  return `/code/${props.packageName}/v/${props.version}/${filePath}`
+}
+
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
@@ -32,11 +40,17 @@ const isExpanded = shallowRef(false)
       <div v-for="scriptName in installScripts.scripts" :key="scriptName">
         <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
         <dd
-          tabindex="0"
-          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="font-mono text-sm text-fg-subtle m-0 truncate rounded"
           :title="installScripts.content?.[scriptName]"
         >
-          {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
+          <NuxtLink
+            v-if="installScripts.content?.[scriptName]"
+            :to="getCodeLink(installScripts.content[scriptName])"
+            class="hover:text-fg transition-colors duration-200 focus:whitespace-normal focus:overflow-visible focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          >
+            {{ installScripts.content[scriptName] }}
+          </NuxtLink>
+          <span v-else>{{ $t('package.install_scripts.script_label') }}</span>
         </dd>
       </div>
     </dl>

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

@@ -1047,6 +1047,7 @@ function handleClick(event: MouseEvent) {
           <PackageInstallScripts
             v-if="displayVersion?.installScripts"
             :package-name="pkg.name"
+            :version="displayVersion.version"
             :install-scripts="displayVersion.installScripts"
           />
 

app/utils/install-scripts.ts

@@ -114,3 +114,37 @@ export function extractInstallScriptsInfo(
     npxDependencies: extractNpxDependencies(scripts),
   }
 }
+
+/**
+ * Pattern to match scripts that are just `node <file-path>`
+ * Captures the file path (relative paths with alphanumeric chars, dots, hyphens, underscores, and slashes)
+ */
+const NODE_SCRIPT_PATTERN = /^node\s+([\w./-]+)$/
+
+/**
+ * Get the file path for an install script link.
+ * - If the script is `node <file-path>`, returns that file path
+ * - Otherwise, returns 'package.json'
+ *
+ * @param scriptContent - The content of the script
+ * @returns The file path to link to in the code tab
+ */
+export function getInstallScriptFilePath(scriptContent: string): string {
+  const match = NODE_SCRIPT_PATTERN.exec(scriptContent)
+
+  if (match?.[1]) {
+    // Script is `node <file-path>`, link to that file
+    // Normalize path: strip leading ./
+    const filePath = match[1].replace(/^\.\//, '')
+
+    // Fall back to package.json if path contains navigational elements (the client-side routing can't handle these well)
+    if (filePath.includes('../') || filePath.includes('./')) {
+      return 'package.json'
+    }
+
+    return filePath
+  }
+
+  // Default: link to package.json
+  return 'package.json'
+}

test/unit/app/utils/install-scripts.spec.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import { extractInstallScriptsInfo } from '../../../../app/utils/install-scripts'
+import {
+  extractInstallScriptsInfo,
+  getInstallScriptFilePath,
+} from '../../../../app/utils/install-scripts'
 
 describe('extractInstallScriptsInfo', () => {
   it('returns null when no install scripts exist', () => {
@@ -75,3 +78,22 @@ describe('extractInstallScriptsInfo', () => {
     })
   })
 })
+
+describe('getInstallScriptFilePath', () => {
+  it('returns file path when script is `node <file-path>`', () => {
+    expect(getInstallScriptFilePath('node scripts/postinstall.js')).toBe('scripts/postinstall.js')
+  })
+
+  it('returns package.json when script is not a simple node command', () => {
+    expect(getInstallScriptFilePath('npx prisma generate')).toBe('package.json')
+  })
+
+  it('strips leading ./ from relative paths', () => {
+    expect(getInstallScriptFilePath('node ./scripts/setup.js')).toBe('scripts/setup.js')
+  })
+
+  it('falls back to package.json for parent directory references', () => {
+    expect(getInstallScriptFilePath('node ../scripts/setup.js')).toBe('package.json')
+    expect(getInstallScriptFilePath('node ./scripts/../lib/setup.js')).toBe('package.json')
+  })
+})