fix: update to use new LinkBase, linkify only file path + update tests

Author: danielroe

app/components/Package/InstallScripts.vue

@@ -11,11 +11,29 @@ const props = defineProps<{
   }
 }>()
 
-function getCodeLink(scriptContent: string): string {
-  const filePath = getInstallScriptFilePath(scriptContent)
+function getCodeLink(filePath: string): string {
   return `/code/${props.packageName}/v/${props.version}/${filePath}`
 }
 
+const scriptParts = computed(() => {
+  const parts: Record<string, { prefix: string | null; filePath: string | null; link: string }> = {}
+  for (const scriptName of props.installScripts.scripts) {
+    const content = props.installScripts.content?.[scriptName]
+    if (!content) continue
+    const parsed = parseNodeScript(content)
+    if (parsed) {
+      parts[scriptName] = {
+        prefix: parsed.prefix,
+        filePath: parsed.filePath,
+        link: getCodeLink(parsed.filePath),
+      }
+    } else {
+      parts[scriptName] = { prefix: null, filePath: null, link: getCodeLink('package.json') }
+    }
+  }
+  return parts
+})
+
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
@@ -36,18 +54,23 @@ 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-2 outline-accent outline-offset-2)"
+          class="font-mono text-sm text-fg-subtle m-0 truncate"
           :title="installScripts.content?.[scriptName]"
         >
-          <NuxtLink
-            v-if="installScripts.content?.[scriptName]"
-            :to="getCodeLink(installScripts.content[scriptName])"
-            class="hover:text-fg transition-colors duration-200"
-          >
-            {{ installScripts.content[scriptName] }}
-          </NuxtLink>
-          <span v-else>{{ $t('package.install_scripts.script_label') }}</span>
+          <template v-if="installScripts.content?.[scriptName] && scriptParts[scriptName]">
+            <template v-if="scriptParts[scriptName].prefix">
+              {{ scriptParts[scriptName].prefix
+              }}<LinkBase :to="scriptParts[scriptName].link">{{
+                scriptParts[scriptName].filePath
+              }}</LinkBase>
+            </template>
+            <LinkBase v-else :to="scriptParts[scriptName].link">
+              {{ installScripts.content[scriptName] }}
+            </LinkBase>
+          </template>
+          <span v-else tabindex="0" class="cursor-help">
+            {{ $t('package.install_scripts.script_label') }}
+          </span>
         </dd>
       </div>
     </dl>

app/utils/install-scripts.ts

@@ -148,3 +148,33 @@ export function getInstallScriptFilePath(scriptContent: string): string {
   // Default: link to package.json
   return 'package.json'
 }
+
+/**
+ * Parse an install script into a prefix and a linkable file path.
+ * - If the script is `node <file-path>`, returns { prefix: 'node ', filePath: '<file-path>' }
+ *   so only the file path portion can be rendered as a link.
+ * - Otherwise, returns null (the entire script content should link to package.json).
+ *
+ * @param scriptContent - The content of the script
+ * @returns Parsed parts, or null if no node file path was extracted
+ */
+export function parseNodeScript(
+  scriptContent: string,
+): { prefix: string; filePath: string } | null {
+  const match = NODE_SCRIPT_PATTERN.exec(scriptContent)
+
+  if (match?.[1]) {
+    const filePath = match[1].replace(/^\.\//, '')
+
+    // Fall back if path contains navigational elements
+    if (filePath.includes('../') || filePath.includes('./')) {
+      return null
+    }
+
+    // Reconstruct the prefix (everything before the captured file path)
+    const prefix = scriptContent.slice(0, match.index + match[0].indexOf(match[1]))
+    return { prefix, filePath }
+  }
+
+  return null
+}

test/nuxt/a11y.spec.ts

@@ -1993,6 +1993,7 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
           packageName: 'esbuild',
+          version: '0.25.0',
           installScripts: {
             scripts: ['postinstall'],
             content: { postinstall: 'node install.js' },
@@ -2008,6 +2009,7 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(PackageInstallScripts, {
         props: {
           packageName: 'husky',
+          version: '9.1.0',
           installScripts: {
             scripts: ['postinstall'],
             content: { postinstall: 'husky install' },

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   extractInstallScriptsInfo,
   getInstallScriptFilePath,
+  parseNodeScript,
 } from '../../../../app/utils/install-scripts'
 
 describe('extractInstallScriptsInfo', () => {
@@ -96,4 +97,38 @@ describe('getInstallScriptFilePath', () => {
     expect(getInstallScriptFilePath('node ../scripts/setup.js')).toBe('package.json')
     expect(getInstallScriptFilePath('node ./scripts/../lib/setup.js')).toBe('package.json')
   })
+
+  it('returns package.json for bare node command without arguments', () => {
+    expect(getInstallScriptFilePath('node')).toBe('package.json')
+    expect(getInstallScriptFilePath('node ')).toBe('package.json')
+  })
+})
+
+describe('parseNodeScript', () => {
+  it('returns prefix and filePath for node scripts', () => {
+    expect(parseNodeScript('node scripts/postinstall.js')).toEqual({
+      prefix: 'node ',
+      filePath: 'scripts/postinstall.js',
+    })
+  })
+
+  it('strips leading ./ from file path', () => {
+    expect(parseNodeScript('node ./scripts/setup.js')).toEqual({
+      prefix: 'node ',
+      filePath: 'scripts/setup.js',
+    })
+  })
+
+  it('returns null for non-node scripts', () => {
+    expect(parseNodeScript('npx prisma generate')).toBeNull()
+  })
+
+  it('returns null for bare node command', () => {
+    expect(parseNodeScript('node')).toBeNull()
+    expect(parseNodeScript('node ')).toBeNull()
+  })
+
+  it('returns null for parent directory references', () => {
+    expect(parseNodeScript('node ../scripts/setup.js')).toBeNull()
+  })
 })