Add interactive-widget optional property to Viewport type (#46506)

## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [x] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) Co-authored-by: Jiachi Liu <[email protected]>
vercel · Feb 27, 2023 · 9ad1f32 · 9ad1f32
1 parent aa61463
commit 9ad1f32
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 33 deletions.
diff --git a/packages/next/src/lib/metadata/resolve-metadata.test.ts b/packages/next/src/lib/metadata/resolve-metadata.test.ts
@@ -169,4 +169,42 @@ describe('accumulateMetadata', () => {
       })
     })
   })
+
+  describe('viewport', () => {
+    it('should support string viewport', async () => {
+      const metadataItems: MetadataItems = [
+        [
+          { viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
+          null,
+        ],
+      ]
+      const metadata = await accumulateMetadata(metadataItems)
+      expect(metadata).toMatchObject({
+        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
+      })
+    })
+
+    it('should support viewport descriptors', async () => {
+      const metadataItems: MetadataItems = [
+        [
+          {
+            viewport: {
+              width: 'device-width',
+              height: 'device-height',
+              initialScale: 1,
+              minimumScale: 1,
+              maximumScale: 1,
+              interactiveWidget: 'overlays-content',
+            },
+          },
+          null,
+        ],
+      ]
+      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',
+      })
+    })
+  })
 })
diff --git a/packages/next/src/lib/metadata/resolvers/resolve-basics.ts b/packages/next/src/lib/metadata/resolvers/resolve-basics.ts
@@ -15,6 +15,7 @@ const viewPortKeys = {
   initialScale: 'initial-scale',
   minimumScale: 'minimum-scale',
   maximumScale: 'maximum-scale',
+  interactiveWidget: 'interactive-widget',
   viewportFit: 'viewport-fit',
 } as const
 

diff --git a/packages/next/src/lib/metadata/types/extra-types.ts b/packages/next/src/lib/metadata/types/extra-types.ts
@@ -59,6 +59,7 @@ export type Viewport = {
   initialScale?: number
   minimumScale?: number
   maximumScale?: number
+  interactiveWidget?: 'resizes-visual' | 'resizes-content' | 'overlays-content'
 }
 
 // Apple Web App

diff --git a/test/e2e/app-dir/metadata/app/basic/page.tsx b/test/e2e/app-dir/metadata/app/basic/page.tsx
@@ -24,7 +24,12 @@ export const metadata: Metadata = {
   themeColor: { color: 'cyan', media: '(prefers-color-scheme: dark)' },
   colorScheme: 'dark',
   manifest: 'https://github.com/manifest.json',
-  viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    interactiveWidget: 'resizes-visual',
+  },
   creator: 'shu',
   publisher: 'vercel',
   robots: 'index, follow',

diff --git a/test/e2e/app-dir/metadata/app/viewport/object/page.tsx b/test/e2e/app-dir/metadata/app/viewport/object/page.tsx
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -141,7 +141,7 @@ createNextDescribe(
         await checkMetaNameContentPair(
           browser,
           'viewport',
-          'width=device-width, initial-scale=1, shrink-to-fit=no'
+          'width=device-width, initial-scale=1, maximum-scale=1, interactive-widget=resizes-visual'
         )
         await checkMetaNameContentPair(browser, 'creator', 'shu')
         await checkMetaNameContentPair(browser, 'publisher', 'vercel')
@@ -154,15 +154,6 @@ createNextDescribe(
         )
       })
 
-      it('should support object viewport', async () => {
-        const browser = await next.browser('/viewport/object')
-        await checkMetaNameContentPair(
-          browser,
-          'viewport',
-          'width=device-width, initial-scale=1, maximum-scale=1'
-        )
-      })
-
       it('should support apple related tags `itunes` and `appWebApp`', async () => {
         const browser = await next.browser('/apple')
         await checkMetaNameContentPair(
@@ -365,20 +356,23 @@ createNextDescribe(
               ...parentMetadata,
             }
           }`
-          await next.patchFile(pagePath, content)
 
-          const browser = await next.browser('/mutate')
-          await check(
-            async () => ((await hasRedbox(browser, true)) ? 'success' : 'fail'),
-            /success/
-          )
-          const error = await getRedboxDescription(browser)
+          try {
+            await next.patchFile(pagePath, content)
 
-          await next.deleteFile(pagePath)
+            const browser = await next.browser('/mutate')
+            await check(
+              async () =>
+                (await hasRedbox(browser, true)) ? 'success' : 'fail',
+              /success/
+            )
 
-          expect(error).toContain(
-            'Cannot add property x, object is not extensible'
-          )
+            expect(await getRedboxDescription(browser)).toContain(
+              'Cannot add property x, object is not extensible'
+            )
+          } finally {
+            await next.deleteFile(pagePath)
+          }
         })
       }