Allow manually setting amphtml (vercel#9098)

* allow to remove amphtml from desktop page * only 1 link with amphtml rel * clean up * remove checkup for amphtml link * Dedupe looping
dmouse · Oct 18, 2019 · b7efb3f · b7efb3f
1 parent 499808f
commit b7efb3f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -273,49 +273,53 @@ export class Head extends Component<
     let hasCanonicalRel = false
 
     // show warning and remove conflicting amp head tags
-    head = !inAmpMode
-      ? head
-      : React.Children.map(head || [], child => {
-          if (!child) return child
-          const { type, props } = child
-          let badProp: string = ''
-
-          if (type === 'meta' && props.name === 'viewport') {
-            badProp = 'name="viewport"'
-          } else if (type === 'link' && props.rel === 'canonical') {
-            hasCanonicalRel = true
-          } else if (type === 'link' && props.rel === 'amphtml') {
-            hasAmphtmlRel = true
-          } else if (type === 'script') {
-            // only block if
-            // 1. it has a src and isn't pointing to ampproject's CDN
-            // 2. it is using dangerouslySetInnerHTML without a type or
-            // a type of text/javascript
-            if (
-              (props.src && props.src.indexOf('ampproject') < -1) ||
-              (props.dangerouslySetInnerHTML &&
-                (!props.type || props.type === 'text/javascript'))
-            ) {
-              badProp = '<script'
-              Object.keys(props).forEach(prop => {
-                badProp += ` ${prop}="${props[prop]}"`
-              })
-              badProp += '/>'
-            }
+    head = React.Children.map(head || [], child => {
+      if (!child) return child
+      const { type, props } = child
+
+      if (inAmpMode) {
+        let badProp: string = ''
+
+        if (type === 'meta' && props.name === 'viewport') {
+          badProp = 'name="viewport"'
+        } else if (type === 'link' && props.rel === 'canonical') {
+          hasCanonicalRel = true
+        } else if (type === 'script') {
+          // only block if
+          // 1. it has a src and isn't pointing to ampproject's CDN
+          // 2. it is using dangerouslySetInnerHTML without a type or
+          // a type of text/javascript
+          if (
+            (props.src && props.src.indexOf('ampproject') < -1) ||
+            (props.dangerouslySetInnerHTML &&
+              (!props.type || props.type === 'text/javascript'))
+          ) {
+            badProp = '<script'
+            Object.keys(props).forEach(prop => {
+              badProp += ` ${prop}="${props[prop]}"`
+            })
+            badProp += '/>'
           }
+        }
 
-          if (badProp) {
-            console.warn(
-              `Found conflicting amp tag "${
-                child.type
-              }" with conflicting prop ${badProp} in ${
-                __NEXT_DATA__.page
-              }. https://err.sh/next.js/conflicting-amp-tag`
-            )
-            return null
-          }
-          return child
-        })
+        if (badProp) {
+          console.warn(
+            `Found conflicting amp tag "${
+              child.type
+            }" with conflicting prop ${badProp} in ${
+              __NEXT_DATA__.page
+            }. https://err.sh/next.js/conflicting-amp-tag`
+          )
+          return null
+        }
+      } else {
+        // non-amp mode
+        if (type === 'link' && props.rel === 'amphtml') {
+          hasAmphtmlRel = true
+        }
+      }
+      return child
+    })
 
     // try to parse styles from fragment for backwards compat
     const curStyles: React.ReactElement[] = Array.isArray(styles)

diff --git a/test/integration/amphtml/test/index.test.js b/test/integration/amphtml/test/index.test.js
@@ -200,6 +200,7 @@ describe('AMP Usage', () => {
       const html = await renderViaHTTP(appPort, '/manual-rels')
       const $ = cheerio.load(html)
       expect($('link[rel=amphtml]').attr('href')).toBe('/my-custom-amphtml')
+      expect($('link[rel=amphtml]')).toHaveLength(1)
     })
   })