fix(gatsby): Allow script in Gatsby Head (#36136)

(cherry picked from commit cc65f34)
gatsbyjs · Jul 15, 2022 · 3b554b2 · 3b554b2
1 parent 41f88f1
commit 3b554b2
Show file tree

Hide file tree

Showing 18 changed files with 45 additions and 25 deletions.
diff --git a/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -15,6 +15,7 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
   })
 
   it(`should work with data from a page query`, () => {
@@ -47,6 +48,7 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
   })
 
   it(`should work when an imported Head component with queried data is used`, () => {

diff --git a/e2e-tests/development-runtime/cypress/integration/head-function-export/navigation.js b/e2e-tests/development-runtime/cypress/integration/head-function-export/navigation.js
@@ -42,6 +42,7 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
 
     cy.getTestElement(`navigate-to-page-without-head-export`)
       .click()
@@ -53,6 +54,7 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
     cy.getTestElement(`noscript`).should(`not.exist`)
     cy.getTestElement(`style`).should(`not.exist`)
     cy.getTestElement(`link`).should(`not.exist`)
+    cy.getTestElement(`jsonLD`).should(`not.exist`)
   })
 
   /**

diff --git a/e2e-tests/development-runtime/cypress/integration/head-function-export/warnings.js b/e2e-tests/development-runtime/cypress/integration/head-function-export/warnings.js
@@ -18,11 +18,4 @@ describe(`Head function export should warn`, () => {
       )}`
     )
   })
-
-  it(`for scripts that could use the script component`, () => {
-    cy.get(`@consoleWarn`).should(
-      `be.calledWith`,
-      `Do not add scripts here. Please use the <Script> component in your page template instead. For more info see: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/`
-    )
-  })
 })
diff --git a/e2e-tests/development-runtime/shared-data/head-function-export.js b/e2e-tests/development-runtime/shared-data/head-function-export.js
@@ -22,6 +22,7 @@ const data = {
     style: `rebeccapurple`,
     link: `/used-by-head-function-export-basic.css`,
     extraMeta: `Extra meta tag that should be removed during navigation`,
+    jsonLD: `{"@context":"https://schema.org","@type":"Organization","url":"https://www.spookytech.com","name":"Spookytechnologies","contactPoint":{"@type":"ContactPoint","telephone":"+5-601-785-8543","contactType":"CustomerSupport"}}`
   },
   queried: {
     base: `http://localhost:8000`,

diff --git a/e2e-tests/development-runtime/src/components/head-function-export.js b/e2e-tests/development-runtime/src/components/head-function-export.js
@@ -43,7 +43,7 @@ function HeadComponent({ children }) {
 }
 
 function Head() {
-  const { base, title, meta, noscript, style, link } = data.static
+  const { base, title, meta, noscript, style, link, jsonLD } = data.static
 
   return (
     <>
@@ -59,6 +59,9 @@ function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }

diff --git a/e2e-tests/development-runtime/src/pages/head-function-export/basic.js b/e2e-tests/development-runtime/src/pages/head-function-export/basic.js
@@ -28,6 +28,7 @@ export function Head() {
     style,
     link,
     extraMeta,
+    jsonLD
   } = data.static
 
   return (
@@ -50,6 +51,9 @@ export function Head() {
         name="extra-meta-for-hot-reloading"
         content="%SOME_EXTRA_META%"
       />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }
diff --git a/e2e-tests/development-runtime/src/pages/head-function-export/warnings.js b/e2e-tests/development-runtime/src/pages/head-function-export/warnings.js
@@ -14,7 +14,6 @@ export function Head() {
   return (
     <>
       <h1 data-testid="h1">hello</h1>
-      <script data-testid="script">{`console.log('hello')`}</script>
     </>
   )
 }
diff --git a/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -15,6 +15,7 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
   })
 
   it(`should work with data from a page query`, () => {
@@ -47,6 +48,7 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
   })
 
   it(`should work when an imported Head component with queried data is used`, () => {

diff --git a/e2e-tests/production-runtime/cypress/integration/head-function-export/navigation.js b/e2e-tests/production-runtime/cypress/integration/head-function-export/navigation.js
@@ -42,6 +42,7 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.static.link)
+    cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
 
     cy.getTestElement(`navigate-to-page-without-head-export`)
       .click()
@@ -53,6 +54,7 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
       cy.getTestElement(`noscript`).should(`not.exist`)
       cy.getTestElement(`style`).should(`not.exist`)
       cy.getTestElement(`link`).should(`not.exist`)
+      cy.getTestElement(`jsonLD`).should(`not.exist`)
   })
 
   /**

diff --git a/e2e-tests/production-runtime/shared-data/head-function-export.js b/e2e-tests/production-runtime/shared-data/head-function-export.js
@@ -22,6 +22,7 @@ const data = {
     style: `rebeccapurple`,
     link: `/used-by-head-function-export-basic.css`,
     extraMeta: `Extra meta tag that should be removed during navigation`,
+    jsonLD: `{"@context":"https://schema.org","@type":"Organization","url":"https://www.spookytech.com","name":"Spookytechnologies","contactPoint":{"@type":"ContactPoint","telephone":"+5-601-785-8543","contactType":"CustomerSupport"}}`
   },
   queried: {
     base: `http://localhost:9000`,

diff --git a/e2e-tests/production-runtime/src/components/head-function-export.js b/e2e-tests/production-runtime/src/components/head-function-export.js
@@ -43,7 +43,7 @@ function HeadComponent({ children }) {
 }
 
 function Head() {
-  const { base, title, meta, noscript, style, link } = data.static
+  const { base, title, meta, noscript, style, link, jsonLD } = data.static
 
   return (
     <>
@@ -59,6 +59,9 @@ function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }

diff --git a/e2e-tests/production-runtime/src/pages/head-function-export/basic.js b/e2e-tests/production-runtime/src/pages/head-function-export/basic.js
@@ -18,7 +18,7 @@ export default function HeadFunctionExportBasic() {
 }
 
 export function Head() {
-  const { base, title, meta, noscript, style, link, extraMeta } = data.static
+  const { base, title, meta, noscript, style, link, extraMeta, jsonLD } = data.static
 
   return (
     <>
@@ -34,8 +34,10 @@ export function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
-
       <meta data-testid="extra-meta" name="extra-meta" content={extraMeta} />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }
diff --git a/integration-tests/head-function-export/__tests__/ssr-html-output.js b/integration-tests/head-function-export/__tests__/ssr-html-output.js
@@ -18,21 +18,23 @@ function getNodes(dom) {
   const noscript = dom.querySelector(`[data-testid=noscript]`)
   const style = dom.querySelector(`[data-testid=style]`)
   const link = dom.querySelector(`[data-testid=link]`)
-  return { base, title, meta, noscript, style, link }
+  const jsonLD = dom.querySelector(`[data-testid=jsonLD]`)
+  return { base, title, meta, noscript, style, link, jsonLD }
 }
 
 describe(`Head function export SSR'ed HTML output`, () => {
   it(`should work with static data`, () => {
     const html = readFileSync(`${publicDir}${page.basic}/index.html`)
     const dom = parse(html)
-    const { base, title, meta, noscript, style, link } = getNodes(dom)
+    const { base, title, meta, noscript, style, link, jsonLD } = getNodes(dom)
 
     expect(base.attributes.href).toEqual(data.static.base)
     expect(title.text).toEqual(data.static.title)
     expect(meta.attributes.content).toEqual(data.static.meta)
     expect(noscript.text).toEqual(data.static.noscript)
     expect(style.text).toContain(data.static.style)
     expect(link.attributes.href).toEqual(data.static.link)
+    expect(jsonLD.text).toEqual(data.static.jsonLD)
   })
 
   it(`should work with data from a page query`, () => {
@@ -51,14 +53,15 @@ describe(`Head function export SSR'ed HTML output`, () => {
   it(`should work when a Head function with static data is re-exported from the page`, () => {
     const html = readFileSync(`${publicDir}${page.reExport}/index.html`)
     const dom = parse(html)
-    const { base, title, meta, noscript, style, link } = getNodes(dom)
+    const { base, title, meta, noscript, style, link, jsonLD } = getNodes(dom)
 
     expect(base.attributes.href).toEqual(data.static.base)
     expect(title.text).toEqual(data.static.title)
     expect(meta.attributes.content).toEqual(data.static.meta)
     expect(noscript.text).toEqual(data.static.noscript)
     expect(style.text).toContain(data.static.style)
     expect(link.attributes.href).toEqual(data.static.link)
+    expect(jsonLD.text).toEqual(data.static.jsonLD)
   })
 
   it(`should work when an imported Head component with queried data is used`, () => {

diff --git a/integration-tests/head-function-export/shared-data/head-function-export.js b/integration-tests/head-function-export/shared-data/head-function-export.js
@@ -17,6 +17,7 @@ const data = {
     noscript: `You take romance - I will take Jell-O!`,
     style: `rebeccapurple`,
     link: `/used-by-head-function-export-basic.css`,
+    jsonLD: `{"@context":"https://schema.org","@type":"Organization","url":"https://www.spookytech.com","name":"Spookytechnologies","contactPoint":{"@type":"ContactPoint","telephone":"+5-601-785-8543","contactType":"CustomerSupport"}}`
   },
   queried: {
     base: `http://localhost:8000`,

diff --git a/integration-tests/head-function-export/src/components/head-function-export.js b/integration-tests/head-function-export/src/components/head-function-export.js
@@ -43,7 +43,7 @@ function HeadComponent({ children }) {
 }
 
 function Head() {
-  const { base, title, meta, noscript, style, link } = data.static
+  const { base, title, meta, noscript, style, link, jsonLD } = data.static
 
   return (
     <>
@@ -59,6 +59,9 @@ function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }

diff --git a/integration-tests/head-function-export/src/pages/head-function-export/basic.js b/integration-tests/head-function-export/src/pages/head-function-export/basic.js
@@ -15,7 +15,7 @@ export default function HeadFunctionExportBasic() {
 }
 
 export function Head() {
-  const { base, title, meta, noscript, style, link } = data.static
+  const { base, title, meta, noscript, style, link, jsonLD } = data.static
 
   return (
     <>
@@ -31,6 +31,9 @@ export function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <script data-testid="jsonLD" type="application/ld+json">
+        {jsonLD}
+      </script>
     </>
   )
 }
diff --git a/packages/gatsby/cache-dir/head/constants.js b/packages/gatsby/cache-dir/head/constants.js
@@ -5,4 +5,5 @@ export const VALID_NODE_NAMES = [
   `title`,
   `base`,
   `noscript`,
+  `script`,
 ]
diff --git a/packages/gatsby/cache-dir/head/utils.js b/packages/gatsby/cache-dir/head/utils.js
@@ -39,20 +39,15 @@ if (process.env.NODE_ENV !== `production`) {
   }
 }
 
-export { warnOnce }
-
 /**
  * Warn for invalid tags in head.
  * @param {string} tagName
  */
 export function warnForInvalidTags(tagName) {
   if (process.env.NODE_ENV !== `production`) {
-    const warning =
-      tagName !== `script`
-        ? `<${tagName}> is not a valid head element. Please use one of the following: ${VALID_NODE_NAMES.join(
-            `, `
-          )}`
-        : `Do not add scripts here. Please use the <Script> component in your page template instead. For more info see: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/`
+    const warning = `<${tagName}> is not a valid head element. Please use one of the following: ${VALID_NODE_NAMES.join(
+      `, `
+    )}`
 
     warnOnce(warning)
   }