@wular/pnext 0.0.19 → 0.0.20

package/src/render/metadata.ts

@@ -60,12 +60,23 @@ export function metadataContext(page: MetadataRenderPage): MetadataContext {
   }
 }
 
-export function headLinks(page: MetadataRenderPage, context: MetadataContext) {
-  const canonical = coerceCanonical(page.metadata.alternates, context)
-  const links: (MetadataLink | ResourceHint)[] = [
-    ...page.fontPreloads,
-    ...(page.resourceHints ?? []),
-    ...stylesheetLinks(page.stylesheets),
+// Links describing the render's own bytes, not metadata - so they stay in the
+// head even when metadata streams into the body.
+export function assetLinks(page: MetadataRenderPage) {
+  return assetLinkGroups(page).filter(Boolean).join('\n')
+}
+
+export function assetLinkGroups(page: MetadataRenderPage) {
+  const connects: ResourceHint[] = []
+  const preloads: ResourceHint[] = []
+  const lateHints: ResourceHint[] = []
+  for (const hint of page.resourceHints ?? []) {
+    if (hint.rel === 'preconnect' || hint.rel === 'dns-prefetch') connects.push(hint)
+    else if (hint.rel === 'preload' && (hint.as === 'font' || hint.as === 'image'))
+      preloads.push(hint)
+    else lateHints.push(hint)
+  }
+  const bulk: (MetadataLink | ResourceHint)[] = [
     ...(page.modulePreloads ?? []).map(url => ({ rel: 'modulepreload', url })),
     ...(page.dynamicScriptPreloads ?? []).map(url => ({
       rel: 'preload',
@@ -76,6 +87,20 @@ export function headLinks(page: MetadataRenderPage, context: MetadataContext) {
       crossOrigin: 'anonymous' as const,
       fetchPriority: 'low' as const,
     })),
+  ]
+  return [
+    renderLinks(connects),
+    renderLinks([...page.fontPreloads, ...preloads]),
+    renderLinks(stylesheetLinks(page.stylesheets)),
+    renderLinks(bulk),
+    renderLinks(lateHints),
+  ]
+}
+
+// Links derived from `metadata` - these travel with it into the body.
+export function metadataOnlyLinks(page: MetadataRenderPage, context: MetadataContext) {
+  const canonical = coerceCanonical(page.metadata.alternates, context)
+  const links: (MetadataLink | ResourceHint)[] = [
     ...(canonical ? [{ rel: 'canonical', url: canonical }] : []),
     ...staticMetadataLinks(page),
     ...authorLinks(page.metadata.authors, context),
@@ -86,6 +111,14 @@ export function headLinks(page: MetadataRenderPage, context: MetadataContext) {
     ...coerceIcons(page.metadata.icons, context),
     ...(page.metadata.links ?? []),
   ]
+  return renderLinks(links)
+}
+
+export function headLinks(page: MetadataRenderPage, context: MetadataContext) {
+  return [assetLinks(page), metadataOnlyLinks(page, context)].filter(Boolean).join('\n')
+}
+
+function renderLinks(links: (MetadataLink | ResourceHint)[]) {
   return links.map(link => `    <link ${linkAttrs(link)}/>`).join('\n')
 }
 
@@ -122,11 +155,13 @@ function staticMetadataLinks(page: MetadataRenderPage): MetadataLink[] {
     ...(!hasExplicitManifest && metadata.manifest ? [staticMetadataLink(metadata.manifest)] : []),
     ...metadata.icons.map(staticMetadataLink),
     ...(metadata.dynamicIcons ?? []),
-    ...metadata.appleIcons.map(staticMetadataLink),
-    ...(metadata.dynamicAppleIcons ?? []),
+    // Root icons share the icon bucket. Keeping them after apple icons made
+    // the link order differ from Next whenever both conventions were present.
     ...(!hasExplicitIcons && metadata.icons.length === 0
       ? metadata.rootIcons.map(staticMetadataLink)
       : []),
+    ...metadata.appleIcons.map(staticMetadataLink),
+    ...(metadata.dynamicAppleIcons ?? []),
   ])
 }
 
@@ -233,8 +268,9 @@ export function metadataTags(metadata: Metadata, context: MetadataContext): stri
   }
   for (const [property, value] of appLinkTags(meta.appLinks)) pushProperty(property, value)
 
-  tags.push(...openGraphTags(meta.openGraph, context))
-  tags.push(...twitterTags(meta.twitter ?? twitterFromOpenGraph(meta.openGraph), context))
+  const social = resolveSocialMetadata(meta)
+  tags.push(...openGraphTags(social.openGraph, context))
+  tags.push(...twitterTags(social.twitter, context))
 
   return tags.join('\n    ')
 }
@@ -831,17 +867,53 @@ function twitterCard(twitter: MetadataTwitter) {
   return twitter.images === undefined ? 'summary' : 'summary_large_image'
 }
 
-function twitterFromOpenGraph(
-  openGraph: MetadataOpenGraph | undefined,
-): MetadataTwitter | undefined {
-  if (!openGraph) return undefined
+// og/twitter resolve in one final pass over the merged chain: twitter auto-fills
+// from openGraph, then whichever of the two exists inherits the page
+// title/description it still lacks. Emission is that pass - nothing between the
+// merge and here reads these fields, and the parent handed to generateMetadata
+// is pre-merge by design.
+function resolveSocialMetadata(meta: Metadata): {
+  openGraph?: MetadataOpenGraph
+  twitter?: MetadataTwitter
+} {
+  const og = meta.openGraph
+  let twitter = meta.twitter
+  if (og) {
+    const ownImages = twitter && 'images' in twitter && twitter.images
+    twitter = {
+      ...twitter,
+      // card follows twitter's OWN images: an og image inherited below never
+      // upgrades a declared twitter block to summary_large_image.
+      card: twitterCard(twitter ?? { images: og.images }),
+      title: titleText(twitter?.title) === undefined ? og.title : twitter?.title,
+      description: twitter?.description || og.description,
+      images: ownImages ? twitter?.images : og.images,
+    }
+  }
+  return { openGraph: og && inherited(og, meta), twitter: twitter && inherited(twitter, meta) }
+}
+
+// A block that renders no title/description of its own falls back to the page's.
+function inherited<T extends { title?: Metadata['title']; description?: string }>(
+  block: T,
+  meta: Metadata,
+): T {
+  const own = titleText(block.title)
+  if (own !== undefined && block.description) return block
   return {
-    title: openGraph.title,
-    description: openGraph.description,
-    images: openGraph.images,
+    ...block,
+    title: own === undefined ? titleText(meta.title) : block.title,
+    description: block.description || meta.description,
   }
 }
 
+// The title a chain entry actually renders, or undefined when it renders none
+// (a bare `template`, an empty string) and so counts as missing for inheritance.
+function titleText(title: Metadata['title']): string | undefined {
+  if (title === undefined) return undefined
+  return resolveTitleChain([{ title }]) || undefined
+}
+
 export function mergeViewport(...items: Viewport[]) {
   return items.reduce<Viewport>(
     (viewport, item) => ({