fix: include storybook data in slim packument

Author: danielroe

app/composables/npm/usePackage.ts

@@ -120,6 +120,14 @@ export function transformPackument(
     license = license.type
   }
 
+  // Extract storybook field from the requested version (custom package.json field)
+  const requestedPkgVersion = requestedVersion ? pkg.versions[requestedVersion] : null
+  const rawStorybook = requestedPkgVersion?.storybook
+  const storybook =
+    rawStorybook && typeof rawStorybook === 'object' && 'url' in rawStorybook
+      ? (rawStorybook as { title?: string; url: string })
+      : undefined
+
   return {
     '_id': pkg._id,
     '_rev': pkg._rev,
@@ -134,6 +142,7 @@ export function transformPackument(
     'keywords': pkg.keywords,
     'repository': pkg.repository,
     'bugs': pkg.bugs,
+    ...(storybook && { storybook }),
     'requestedVersion': versionData,
     'versions': filteredVersions,
     'securityVersions': securityVersions,

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

@@ -109,18 +109,13 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   { default: () => ({ html: '', mdExists: false, playgroundLinks: [], toc: [] }) },
 )
 
-const { data: packageJson } = useLazyFetch<{ storybook?: { title: string; url: string } }>(() => {
-  const version = requestedVersion.value ?? 'latest'
-  return `https://cdn.jsdelivr.net/npm/${packageName.value}@${version}/package.json`
-})
-
 const playgroundLinks = computed(() => [
   ...readmeData.value.playgroundLinks,
   // Libraries with a storybook field in package.json contain a link to their deployed playground
-  ...(packageJson.value?.storybook
+  ...(pkg.value?.storybook
     ? [
         {
-          url: packageJson.value.storybook.url,
+          url: pkg.value.storybook.url,
           provider: 'storybook',
           providerName: 'Storybook',
           label: 'Storybook',

shared/types/npm-registry.ts

@@ -83,6 +83,7 @@ export interface SlimPackument {
   'keywords'?: string[]
   'repository'?: { type?: string; url?: string; directory?: string }
   'bugs'?: { url?: string; email?: string }
+  'storybook'?: { title?: string; url: string }
   /** current version */
   'requestedVersion': SlimPackumentVersion | null
   /** Only includes dist-tag versions (with installScripts info added per version) */