Fix viewport typing and refactor constants

packages/next/src/lib/metadata/constants.ts

@@ -0,0 +1,14 @@
+import type { Viewport } from './types/extra-types'
+import type { Icons } from './types/metadata-types'
+
+export const ViewPortKeys: { [k in keyof Viewport]: string } = {
+  width: 'width',
+  height: 'height',
+  initialScale: 'initial-scale',
+  minimumScale: 'minimum-scale',
+  maximumScale: 'maximum-scale',
+  viewportFit: 'viewport-fit',
+  interactiveWidget: 'interactive-widget',
+} as const
+
+export const IconKeys: (keyof Icons)[] = ['icon', 'shortcut', 'apple', 'other']

packages/next/src/lib/metadata/resolve-metadata.test.ts

@@ -194,6 +194,7 @@ describe('accumulateMetadata', () => {
               initialScale: 1,
               minimumScale: 1,
               maximumScale: 1,
+              viewportFit: 'cover',
               interactiveWidget: 'overlays-content',
             },
           },
@@ -203,7 +204,7 @@ describe('accumulateMetadata', () => {
       const metadata = await accumulateMetadata(metadataItems)
       expect(metadata).toMatchObject({
         viewport:
-          'width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, interactive-widget=overlays-content',
+          'width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=overlays-content',
       })
     })
   })

packages/next/src/lib/metadata/resolvers/resolve-basics.ts

@@ -8,16 +8,7 @@ import type {
 import type { Viewport } from '../types/extra-types'
 import { resolveAsArrayOrUndefined } from '../generate/utils'
 import { resolveUrl, resolveUrlValuesOfObject } from './resolve-url'
-
-const viewPortKeys = {
-  width: 'width',
-  height: 'height',
-  initialScale: 'initial-scale',
-  minimumScale: 'minimum-scale',
-  maximumScale: 'maximum-scale',
-  interactiveWidget: 'interactive-widget',
-  viewportFit: 'viewport-fit',
-} as const
+import { ViewPortKeys } from '../constants'
 
 export const resolveThemeColor: FieldResolver<'themeColor'> = (themeColor) => {
   if (!themeColor) return null
@@ -43,11 +34,11 @@ export const resolveViewport: FieldResolver<'viewport'> = (viewport) => {
     resolved = viewport
   } else if (viewport) {
     resolved = ''
-    for (const viewportKey_ in viewPortKeys) {
+    for (const viewportKey_ in ViewPortKeys) {
       const viewportKey = viewportKey_ as keyof Viewport
       if (viewport[viewportKey]) {
         if (resolved) resolved += ', '
-        resolved += `${viewPortKeys[viewportKey]}=${viewport[viewportKey]}`
+        resolved += `${ViewPortKeys[viewportKey]}=${viewport[viewportKey]}`
       }
     }
   }

packages/next/src/lib/metadata/resolvers/resolve-icons.ts

@@ -1,17 +1,16 @@
 import type { ResolvedMetadata } from '../types/metadata-interface'
-import type { Icon, IconDescriptor, Icons } from '../types/metadata-types'
+import type { Icon, IconDescriptor } from '../types/metadata-types'
 import type { FieldResolver } from '../types/resolvers'
 import { resolveAsArrayOrUndefined } from '../generate/utils'
 import { isStringOrURL } from './resolve-url'
+import { IconKeys } from '../constants'
 
 export function resolveIcon(icon: Icon): IconDescriptor {
   if (isStringOrURL(icon)) return { url: icon }
   else if (Array.isArray(icon)) return icon
   return icon
 }
 
-const IconKeys = ['icon', 'shortcut', 'apple', 'other'] as (keyof Icons)[]
-
 export const resolveIcons: FieldResolver<'icons'> = (icons) => {
   if (!icons) {
     return null

packages/next/src/lib/metadata/types/extra-types.ts

@@ -59,6 +59,7 @@ export type Viewport = {
   initialScale?: number
   minimumScale?: number
   maximumScale?: number
+  viewportFit?: 'auto' | 'cover' | 'contain'
   interactiveWidget?: 'resizes-visual' | 'resizes-content' | 'overlays-content'
 }