feat: allow clicking to dependencies/relative paths in file tree

Author: danielroe

app/components/CodeViewer.vue

@@ -125,10 +125,24 @@ watch(
   transition: background-color 0.1s;
 }
 
-/* Highlighted lines in code content */
+/* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   background: rgb(234 179 8 / 0.2); /* yellow-500/20 */
   margin: 0 -1rem;
   padding: 0 1rem;
 }
+
+/* Clickable import links */
+.code-content :deep(.import-link) {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color 0.15s;
+  cursor: pointer;
+}
+
+.code-content :deep(.import-link:hover) {
+  text-decoration-color: currentColor;
+}
 </style>

package.json

@@ -38,6 +38,7 @@
     "nuxt-og-image": "^5.1.13",
     "perfect-debounce": "^2.1.0",
     "sanitize-html": "^2.17.0",
+    "semver": "^7.7.3",
     "shiki": "^3.21.0",
     "ufo": "^1.6.3",
     "unplugin-vue-router": "^0.19.2",
@@ -50,6 +51,7 @@
     "@nuxt/test-utils": "3.23.0",
     "@playwright/test": "1.57.0",
     "@types/sanitize-html": "^2.16.0",
+    "@types/semver": "^7.7.1",
     "@unocss/nuxt": "^66.6.0",
     "@unocss/preset-wind4": "^66.6.0",
     "@vite-pwa/assets-generator": "^1.0.2",

pnpm-lock.yaml

@@ -1,6 +1,36 @@
+const CACHE_VERSION = 2
+
 // Maximum file size to fetch and highlight (500KB)
 const MAX_FILE_SIZE = 500 * 1024
 
+// Languages that benefit from import linking
+const IMPORT_LANGUAGES = new Set([
+  'javascript', 'typescript', 'jsx', 'tsx',
+  'vue', 'svelte', 'astro',
+])
+
+interface PackageJson {
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+  optionalDependencies?: Record<string, string>
+}
+
+/**
+ * Fetch package.json from jsDelivr to get dependency info
+ */
+async function fetchPackageJson(packageName: string, version: string): Promise<PackageJson | null> {
+  try {
+    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
+    const response = await fetch(url)
+    if (!response.ok) return null
+    return await response.json() as PackageJson
+  }
+  catch {
+    return null
+  }
+}
+
 /**
  * Fetch file content from jsDelivr CDN.
  */
@@ -73,7 +103,45 @@ export default defineCachedEventHandler(
     try {
       const content = await fetchFileContent(packageName, version, filePath)
       const language = getLanguageFromPath(filePath)
-      const html = await highlightCode(content, language)
+
+      // For JS/TS files, resolve dependency versions and relative imports for linking
+      let dependencies: Record<string, { version: string }> | undefined
+      let resolveRelative: ((specifier: string) => string | null) | undefined
+
+      if (IMPORT_LANGUAGES.has(language)) {
+        // Fetch package.json and file tree in parallel
+        const [pkgJson, fileTreeResponse] = await Promise.all([
+          fetchPackageJson(packageName, version),
+          getPackageFileTree(packageName, version).catch(() => null),
+        ])
+
+        // Resolve npm dependency versions
+        if (pkgJson) {
+          // Merge all dependency types
+          const allDeps: Record<string, string> = {
+            ...pkgJson.dependencies,
+            ...pkgJson.peerDependencies,
+            ...pkgJson.optionalDependencies,
+            // Note: excluding devDependencies as they're less likely to be imported in dist files
+          }
+
+          if (Object.keys(allDeps).length > 0) {
+            const resolved: Record<string, string> = await resolveDependencyVersions(allDeps)
+            dependencies = {}
+            for (const [name, ver] of Object.entries(resolved)) {
+              dependencies[name] = { version: ver }
+            }
+          }
+        }
+
+        // Create resolver for relative imports
+        if (fileTreeResponse) {
+          const files = flattenFileTree(fileTreeResponse.tree)
+          resolveRelative = createImportResolver(files, filePath, packageName, version)
+        }
+      }
+
+      const html = await highlightCode(content, language, { dependencies, resolveRelative })
 
       return {
         package: packageName,
@@ -96,7 +164,7 @@ export default defineCachedEventHandler(
     maxAge: 60 * 60, // Cache for 1 hour (files don't change for a given version)
     getKey: (event) => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
-      return `file:${pkg}`
+      return `file:v${CACHE_VERSION}:${pkg}`
     },
   },
 )

server/api/registry/file/[...pkg].get.ts

@@ -1,60 +1,4 @@
-import type { JsDelivrPackageResponse, JsDelivrFileNode, PackageFileTree, PackageFileTreeResponse } from '#shared/types'
-
-/**
- * Fetch the file tree from jsDelivr API.
- * Returns a nested tree structure of all files in the package.
- */
-async function fetchFileTree(packageName: string, version: string): Promise<JsDelivrPackageResponse> {
-  const url = `https://data.jsdelivr.com/v1/packages/npm/${packageName}@${version}`
-  const response = await fetch(url)
-
-  if (!response.ok) {
-    if (response.status === 404) {
-      throw createError({ statusCode: 404, message: 'Package or version not found' })
-    }
-    throw createError({ statusCode: 502, message: 'Failed to fetch file list from jsDelivr' })
-  }
-
-  return response.json()
-}
-
-/**
- * Convert jsDelivr nested structure to our PackageFileTree format
- */
-function convertToFileTree(nodes: JsDelivrFileNode[], parentPath: string = ''): PackageFileTree[] {
-  const result: PackageFileTree[] = []
-
-  for (const node of nodes) {
-    const path = parentPath ? `${parentPath}/${node.name}` : node.name
-
-    if (node.type === 'directory') {
-      result.push({
-        name: node.name,
-        path,
-        type: 'directory',
-        children: node.files ? convertToFileTree(node.files, path) : [],
-      })
-    }
-    else {
-      result.push({
-        name: node.name,
-        path,
-        type: 'file',
-        size: node.size,
-      })
-    }
-  }
-
-  // Sort: directories first, then files, alphabetically within each group
-  result.sort((a, b) => {
-    if (a.type !== b.type) {
-      return a.type === 'directory' ? -1 : 1
-    }
-    return a.name.localeCompare(b.name)
-  })
-
-  return result
-}
+import type { PackageFileTreeResponse } from '#shared/types'
 
 /**
  * Returns the file tree for a package version.