Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(gatsby): allow deduplicating head elements on id #36138

Merged
merged 9 commits into from
Jul 18, 2022
Merged

feat(gatsby): allow deduplicating head elements on id #36138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5770973
feat: deduplicate head elements on id attrbibute in browser
pieh Jul 14, 2022
1a327d5
feat: deduplicate head elements on id attrbibute in html gen
pieh Jul 14, 2022
a8c015a
page with head deduplication
pieh Jul 15, 2022
2963da8
add test
pieh Jul 15, 2022
3157d10
update comments to match current code
pieh Jul 15, 2022
1a6c5c5
Update e2e-tests/development-runtime/cypress/integration/head-functio…
pieh Jul 15, 2022
83ec61d
Update e2e-tests/development-runtime/cypress/integration/head-functio…
marvinjude Jul 15, 2022
a6a7820
add test case to e2e-production
pieh Jul 15, 2022
35f358d
add test case to head integration tests
pieh Jul 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions e2e-tests/development-runtime/cypress/integration/head-function-export/deduplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import headFunctionExportSharedData from "../../../shared-data/head-function-export.js"

it(`Deduplicates multiple tags with same id`, () => {
cy.visit(headFunctionExportSharedData.page.deduplication).waitForRouteChange()
pieh marked this conversation as resolved.
Show resolved Hide resolved

// deduplication link has id and should be deduplicated
cy.get(`link[rel=deduplication]`).should("have.length", 1)
// last deduplication link should win
cy.get(`link[rel=deduplication]`).should("have.attr", "href", "/bar")
// we should preserve id
cy.get(`link[rel=deduplication]`).should(
"have.attr",
"id",
"deduplication-test"
)

// alternate links are not using id, so should have multiple instances
cy.get(`link[rel=alternate]`).should("have.length", 2)
})
1 change: 1 addition & 0 deletions e2e-tests/development-runtime/shared-data/head-function-export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const page = {
ssr: `${path}/ssr/`,
invalidElements: `${path}/invalid-elements/`,
fsRouteApi: `${path}/fs-route-api/`,
deduplication: `${path}/deduplication/`,
}

const data = {
Expand Down
35 changes: 35 additions & 0 deletions e2e-tests/development-runtime/src/pages/head-function-export/deduplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as React from "react"

export default function HeadFunctionDeduplication() {
return (
<>
<h1>
I deduplicated Head elements by their <code>id</code>
</h1>
</>
)
}

function SEO({ children }) {
return (
<>
<link rel="deduplication" id="deduplication-test" href="/foo" />
<link
rel="alternate"
type="application/atom+xml"
title="RSS Feed"
href="/blog/news/atom"
/>
{children}
</>
)
}

export function Head() {
return (
<SEO>
<link rel="deduplication" id="deduplication-test" href="/bar" />
<link rel="alternate" hrefLang="de-DE" href="/de/" />
</SEO>
)
}
19 changes: 19 additions & 0 deletions e2e-tests/production-runtime/cypress/integration/head-function-export/deduplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import headFunctionExportSharedData from "../../../shared-data/head-function-export.js"

it(`Deduplicates multiple tags with same id`, () => {
cy.visit(headFunctionExportSharedData.page.deduplication).waitForRouteChange()

// deduplication link has id and should be deduplicated
cy.get(`link[rel=deduplication]`).should("have.length", 1)
// last deduplication link should win
cy.get(`link[rel=deduplication]`).should("have.attr", "href", "/bar")
// we should preserve id
cy.get(`link[rel=deduplication]`).should(
"have.attr",
"id",
"deduplication-test"
)

// alternate links are not using id, so should have multiple instances
cy.get(`link[rel=alternate]`).should("have.length", 2)
})
1 change: 1 addition & 0 deletions e2e-tests/production-runtime/shared-data/head-function-export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const page = {
ssr: `${path}/ssr/`,
invalidElements: `${path}/invalid-elements/`,
fsRouteApi: `${path}/fs-route-api/`,
deduplication: `${path}/deduplication/`,
}

const data = {
Expand Down
35 changes: 35 additions & 0 deletions e2e-tests/production-runtime/src/pages/head-function-export/deduplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as React from "react"

export default function HeadFunctionDeduplication() {
return (
<>
<h1>
I deduplicated Head elements by their <code>id</code>
</h1>
</>
)
}

function SEO({ children }) {
return (
<>
<link rel="deduplication" id="deduplication-test" href="/foo" />
<link
rel="alternate"
type="application/atom+xml"
title="RSS Feed"
href="/blog/news/atom"
/>
{children}
</>
)
}

export function Head() {
return (
<SEO>
<link rel="deduplication" id="deduplication-test" href="/bar" />
<link rel="alternate" hrefLang="de-DE" href="/de/" />
</SEO>
)
}
19 changes: 19 additions & 0 deletions integration-tests/head-function-export/__tests__/ssr-html-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,23 @@ describe(`Head function export SSR'ed HTML output`, () => {
expect(style.text).toContain(data.queried.style)
expect(link.attributes.href).toEqual(data.queried.link)
})

it(`deduplicates multiple tags with same id`, () => {
const html = readFileSync(`${publicDir}${page.deduplication}/index.html`)
const dom = parse(html)

// deduplication link has id and should be deduplicated
expect(dom.querySelectorAll(`link[rel=deduplication]`)?.length).toEqual(1)
// last deduplication link should win
expect(
dom.querySelector(`link[rel=deduplication]`)?.attributes?.href
).toEqual("/bar")
// we should preserve id
expect(
dom.querySelector(`link[rel=deduplication]`)?.attributes?.id
).toEqual("deduplication-test")

// alternate links are not using id, so should have multiple instances
expect(dom.querySelectorAll(`link[rel=alternate]`)?.length).toEqual(2)
})
})
1 change: 1 addition & 0 deletions integration-tests/head-function-export/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"babel-preset-gatsby-package": "^2.4.0",
"fs-extra": "^10.0.0",
"jest": "^27.2.1",
"node-html-parser": "^5.3.3",
"npm-run-all": "4.1.5"
},
"dependencies": {
Expand Down
1 change: 1 addition & 0 deletions integration-tests/head-function-export/shared-data/head-function-export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const page = {
staticQuery: `${path}/static-query-component/`,
warnings: `${path}/warnings/`,
allProps: `${path}/all-props/`,
deduplication: `${path}/deduplication/`,
}

const data = {
Expand Down
35 changes: 35 additions & 0 deletions integration-tests/head-function-export/src/pages/head-function-export/deduplication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as React from "react"

export default function HeadFunctionDeduplication() {
return (
<>
<h1>
I deduplicated Head elements by their <code>id</code>
</h1>
</>
)
}

function SEO({ children }) {
return (
<>
<link rel="deduplication" id="deduplication-test" href="/foo" />
<link
rel="alternate"
type="application/atom+xml"
title="RSS Feed"
href="/blog/news/atom"
/>
{children}
</>
)
}

export function Head() {
return (
<SEO>
<link rel="deduplication" id="deduplication-test" href="/bar" />
<link rel="alternate" hrefLang="de-DE" href="/de/" />
</SEO>
)
}
15 changes: 14 additions & 1 deletion packages/gatsby/cache-dir/head/head-export-handler-for-browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,28 @@ const onHeadRendered = () => {

removePrevHeadElements()

const seenIds = new Map()
for (const node of hiddenRoot.childNodes) {
const nodeName = node.nodeName.toLowerCase()
const id = node.attributes.id?.value

if (!VALID_NODE_NAMES.includes(nodeName)) {
warnForInvalidTags(nodeName)
} else {
const clonedNode = node.cloneNode(true)
clonedNode.setAttribute(`data-gatsby-head`, true)
validHeadNodes.push(clonedNode)
if (id) {
if (!seenIds.has(id)) {
validHeadNodes.push(clonedNode)
seenIds.set(id, validHeadNodes.length - 1)
} else {
const indexOfPreviouslyInsertedNode = seenIds.get(id)
validHeadNodes[indexOfPreviouslyInsertedNode].remove()
validHeadNodes[indexOfPreviouslyInsertedNode] = clonedNode
}
} else {
validHeadNodes.push(clonedNode)
}
}
}

Expand Down
15 changes: 13 additions & 2 deletions packages/gatsby/cache-dir/head/head-export-handler-for-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,10 @@ export function headHandlerForSSR({

const validHeadNodes = []

const seenIds = new Map()
for (const node of headNodes) {
const { rawTagName, attributes } = node
const id = attributes.id

if (!VALID_NODE_NAMES.includes(rawTagName)) {
warnForInvalidTags(rawTagName)
Expand All @@ -68,8 +70,17 @@ export function headHandlerForSSR({
},
node.childNodes[0]?.textContent
)

validHeadNodes.push(element)
if (id) {
if (!seenIds.has(id)) {
validHeadNodes.push(element)
seenIds.set(id, validHeadNodes.length - 1)
} else {
const indexOfPreviouslyInsertedNode = seenIds.get(id)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does the browser version include validHeadNodes[indexOfPreviouslyInsertedNode].remove() but SSR doesn't?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.remove in browser is "just in case", we likely can drop it. SSR version is not rendering elements, it's rendering html strings, so it doesn't have potential DOM element to clean up - at most some no longere referenced strings/objects that can be GCed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah that makes sense, saw all the other lines seemed duplicated 1 for 1 so wanted to double check. Thanks!

validHeadNodes[indexOfPreviouslyInsertedNode] = element
}
} else {
validHeadNodes.push(element)
}
}
}

Expand Down