fix: package name not detected in code view (#1711)

Co-authored-by: Philippe Serhal <philippe.serhal@gmail.com>

Author: jhroemer

server/utils/code-highlight.ts

@@ -167,7 +167,7 @@ interface LinkifyOptions {
  * @param html - The HTML to process
  * @param options - Dependencies map and optional relative import resolver
  */
-function linkifyImports(html: string, options?: LinkifyOptions): string {
+export function linkifyModuleSpecifiers(html: string, options?: LinkifyOptions): string {
   const { dependencies, resolveRelative } = options ?? {}
 
   const getHref = (moduleSpecifier: string): string | null => {
@@ -196,7 +196,7 @@ function linkifyImports(html: string, options?: LinkifyOptions): string {
   // Match: from keyword span followed by string span containing module specifier
   // Pattern: <span style="...">from</span><span style="..."> 'module'</span>
   let result = html.replace(
-    /(<span[^>]*>from<\/span>)(<span[^>]*>) (['"][^'"]+['"])<\/span>/g,
+    /(<span[^>]*> ?from<\/span>)(<span[^>]*>) (['"][^'"]+['"])<\/span>/g,
     (match, fromSpan, stringSpanOpen, moduleSpecifier) => {
       const href = getHref(moduleSpecifier)
       if (!href) return match
@@ -285,7 +285,7 @@ export async function highlightCode(
 
       // Make import statements clickable for JS/TS languages
       if (IMPORT_LANGUAGES.has(language)) {
-        html = linkifyImports(html, {
+        html = linkifyModuleSpecifiers(html, {
           dependencies: options?.dependencies,
           resolveRelative: options?.resolveRelative,
         })

test/unit/server/utils/code-highlight.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { linkifyModuleSpecifiers } from '../../../../server/utils/code-highlight'
+
+describe('linkifyModuleSpecifiers', () => {
+  const dependencies = {
+    'vue': { version: '3.4.0' },
+    '@unocss/webpack': { version: '0.65.3' },
+  }
+
+  it('should linkify import ... from "package"', () => {
+    // Shiki output for: import { ref } from "vue"
+    const html =
+      '<span class="line">' +
+      '<span style="color:#F97583">import</span>' +
+      '<span style="color:#E1E4E8"> { ref }</span>' +
+      '<span style="color:#F97583">from</span>' +
+      '<span style="color:#9ECBFF"> "vue"</span>' +
+      '</span>'
+
+    const result = linkifyModuleSpecifiers(html, { dependencies })
+    expect(result).toContain('<a href="/package-code/vue/v/3.4.0" class="import-link">')
+  })
+
+  it('should linkify export * from "package"', () => {
+    // Shiki output for: export * from "@unocss/webpack"
+    // Note: Shiki puts a leading space before "from" in the same span
+    const html =
+      '<span class="line">' +
+      '<span style="color:#F97583">export</span>' +
+      '<span style="color:#E1E4E8"> *</span>' +
+      '<span style="color:#F97583"> from</span>' +
+      '<span style="color:#9ECBFF"> "@unocss/webpack"</span>' +
+      '<span style="color:#E1E4E8">;</span>' +
+      '</span>'
+
+    const result = linkifyModuleSpecifiers(html, { dependencies })
+    expect(result).toContain(
+      '<a href="/package-code/@unocss/webpack/v/0.65.3" class="import-link">',
+    )
+  })
+})