Upgrade cheerio from 1.0.0-rc.12 to 1.2.0 (#59784)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Evan Bonsignori <ebonsignori@github.com>

Author: 4 people

package-lock.json

@@ -179,8 +179,7 @@
     "azure-kusto-data": "^7.0.0",
     "bottleneck": "2.19.5",
     "boxen": "8.0.1",
-    "cheerio": "^1.0.0-rc.12",
-    "cheerio-to-text": "0.2.4",
+    "cheerio": "^1.2.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "connect-timeout": "1.9.1",
@@ -267,7 +266,6 @@
     "@octokit/rest": "22.0.0",
     "@playwright/test": "^1.56",
     "@types/accept-language-parser": "1.5.7",
-    "@types/cheerio": "^0.22.35",
     "@types/connect-timeout": "1.9.0",
     "@types/cookie": "0.6.0",
     "@types/cookie-parser": "1.4.8",

package.json

@@ -16,7 +16,7 @@ import path from 'path'
 
 import { program } from 'commander'
 import chalk from 'chalk'
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 import { fileTypeFromFile } from 'file-type'
 import walk from 'walk-sync'
 import isSVG from 'is-svg'
@@ -138,14 +138,16 @@ async function checkFile(filePath: string) {
 }
 
 function checkSVGContent(content: string) {
-  const $ = cheerio.load(content)
+  const $ = load(content)
   const disallowedTagNames = new Set(['script', 'object', 'iframe', 'embed'])
   $('*').each((i, element) => {
-    const { tagName } = $(element).get(0)
+    const el = $(element).get(0)
+    if (!el || !('tagName' in el)) return
+    const { tagName } = el
     if (disallowedTagNames.has(tagName)) {
       throw new Error(`contains a <${tagName}> tag`)
     }
-    for (const key in $(element).get(0).attribs) {
+    for (const key in 'attribs' in el ? el.attribs : {}) {
       // Looks for suspicious event handlers on tags.
       // For example `<path oNload="alert(1)"" d="M28 0l4.59 4.59-9.76`
       // We don't need to do a case-sensitive regex here because cheerio

src/assets/scripts/validate-asset-images.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from 'fs'
 
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 import { describe, expect, test, vi } from 'vitest'
 
 import { loadPages } from '@/frame/lib/page-data'
@@ -39,7 +39,7 @@ describe('autogenerated docs render', () => {
             return `${res.statusCode} status error on ${url}`
           }
           // Using `xmlMode: true` is marginally faster
-          const $ = cheerio.load(res.body, { xmlMode: true })
+          const $ = load(res.body, { xmlMode: true })
           const headingIDs = $('body')
             .find('h2, h3, h4, h5, h6')
             .map((_, el) => $(el).attr('id'))

src/automated-pipelines/tests/rendering.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 
 import { renderContent } from '@/content-render/index'
 import type { Context } from '@/types'
@@ -20,7 +20,7 @@ on:
 describe('annotate', () => {
   test('renders annotations', async () => {
     const res = await renderContent(example)
-    const $ = cheerio.load(res)
+    const $ = load(res)
 
     // Check that the annotation structure is rendered correctly
     const annotation = $('.annotate')
@@ -76,7 +76,7 @@ echo "Hello, world!"
 \`\`\`
 `.trim()
     const res = await renderContent(bashExample)
-    const $ = cheerio.load(res)
+    const $ = load(res)
 
     const headerCode = $('header pre').text()
     expect(headerCode).toMatch(bashExample.split('\n').slice(1, -1).join('\n'))
@@ -104,7 +104,7 @@ on:
 `.trim()
 
     const res = await renderContent(emptyCommentExample)
-    const $ = cheerio.load(res)
+    const $ = load(res)
 
     const headerCode = $('header pre').text()
     expect(headerCode).toMatch(emptyCommentExample.split('\n').slice(1, -1).join('\n'))
@@ -152,7 +152,7 @@ on: [push]
     } as unknown as Context
 
     const res = await renderContent(autotitleExample, mockContext)
-    const $ = cheerio.load(res)
+    const $ = load(res)
 
     const rows = $('.annotate-row')
     const notes = $('.annotate-note', rows)

src/content-render/tests/annotate.ts

@@ -1,4 +1,4 @@
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 import { describe, expect, test } from 'vitest'
 
 import { renderContent } from '@/content-render/index'
@@ -32,7 +32,7 @@ describe('renderContent', () => {
 1. item three`)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect($('ol').length).toBe(1)
     expect($('ol > li').length).toBe(3)
   })
@@ -43,7 +43,7 @@ describe('renderContent', () => {
 - <a>item</a>`)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect($('ul p').length).toBe(0)
   })
 
@@ -69,7 +69,7 @@ describe('renderContent', () => {
 |<kbd>g</kbd> <kbd>i</kbd> | Go to the **Issues** tab. For more information, see "[About issues](/articles/about-issues)."
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect(
       $.html().includes('&quot;<a href="/articles/about-issues">About issues</a>.&quot;'),
     ).toBeTruthy()
@@ -82,7 +82,7 @@ describe('renderContent', () => {
 | Python | \`requirements.txt\`, \`pipfile.lock\`
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect(
       $.html().includes('<code>requirements.txt</code>, <code>pipfile.lock</code>'),
     ).toBeTruthy()
@@ -95,7 +95,7 @@ describe('renderContent', () => {
 | <code>user:<em>USERNAME</em></code> | [**user:defunkt ubuntu**](https://github.com/search?q=user%3Adefunkt+ubuntu&type=Issues) matches issues with the word "ubuntu" from repositories owned by @defunkt.
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect($.html().includes('<code>user:<em>USERNAME</em></code>')).toBeTruthy()
   })
 
@@ -110,7 +110,7 @@ describe('renderContent', () => {
 1. This is another list item.
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect($('ol').length).toBe(1)
     expect($.html().includes('<span class="hljs-meta prompt_"># </span')).toBeTruthy()
     expect($.html().includes('some comment here')).toBeTruthy()
@@ -131,7 +131,7 @@ describe('renderContent', () => {
 ##### This is a level 5
 `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
 
     for (const level of [1, 2, 3, 4, 5]) {
       expect(
@@ -147,7 +147,7 @@ const example = true
 \`\`\`\`
     `)
     let html = await renderContent(template)
-    let $ = cheerio.load(html, { xmlMode: true })
+    let $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-js">')).toBeTruthy()
     expect($.html().includes('<span class="hljs-keyword">const</span>')).toBeTruthy()
 
@@ -157,7 +157,7 @@ const example = true
 \`\`\`\`
     `)
     html = await renderContent(template)
-    $ = cheerio.load(html, { xmlMode: true })
+    $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-erb">')).toBeTruthy()
     expect($.html().includes('<span class="hljs-variable">@articles</span>')).toBeTruthy()
 
@@ -167,7 +167,7 @@ POST / HTTP/2
 \`\`\`\`
     `)
     html = await renderContent(template)
-    $ = cheerio.load(html, { xmlMode: true })
+    $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-http">')).toBeTruthy()
     expect($.html().includes('<span class="hljs-keyword">POST</span>')).toBeTruthy()
 
@@ -180,7 +180,7 @@ plugins {
 \`\`\`\`
     `)
     html = await renderContent(template)
-    $ = cheerio.load(html, { xmlMode: true })
+    $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-groovy">')).toBeTruthy()
     expect(
       $.html().includes('<span class="hljs-string">&apos;maven-publish&apos;</span>'),
@@ -192,7 +192,7 @@ FROM alpine:3.10
 \`\`\`\`
     `)
     html = await renderContent(template)
-    $ = cheerio.load(html, { xmlMode: true })
+    $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-Dockerfile">')).toBeTruthy()
     expect($.html().includes('<span class="hljs-keyword">FROM</span>')).toBeTruthy()
 
@@ -202,7 +202,7 @@ $resourceGroupName = "octocat-testgroup"
 \`\`\`\`
     `)
     html = await renderContent(template)
-    $ = cheerio.load(html, { xmlMode: true })
+    $ = load(html, { xmlMode: true })
     expect($.html().includes('<pre><code class="hljs language-Powershell">')).toBeTruthy()
     expect(
       $.html().includes('<span class="hljs-variable">&#x24;resourceGroupName</span>'),
@@ -216,7 +216,7 @@ var a = 1
 \`\`\`
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html, { xmlMode: true })
+    const $ = load(html, { xmlMode: true })
     expect($.html().includes('var a = 1')).toBeTruthy()
   })
 
@@ -238,7 +238,7 @@ var a = 1
 \`\`\`
     `)
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
     const el = $('button.js-btn-copy')
     expect(el.data('clipboard')).toBe(2967273189)
     // Generates a murmurhash based ID that matches a <pre>
@@ -250,7 +250,7 @@ var a = 1
 > This is a note with a [link](https://example.com)
     `)
     const html = await renderContent(template, { alertTitles: { NOTE: 'Note' } })
-    const $ = cheerio.load(html)
+    const $ = load(html)
     const alertEl = $('.ghd-alert')
     expect(alertEl.length).toBe(1)
     expect(alertEl.attr('data-container')).toBe('alert')

src/content-render/tests/render-content.ts

@@ -1,4 +1,4 @@
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 import { describe, expect, test } from 'vitest'
 
 import { renderContent } from '@/content-render/index'
@@ -20,7 +20,7 @@ describe('table accessibility labels', () => {
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.length).toBe(1)
@@ -42,7 +42,7 @@ describe('table accessibility labels', () => {
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.attr('aria-labelledby')).toBe('configuration-options')
@@ -59,7 +59,7 @@ describe('table accessibility labels', () => {
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.attr('aria-label')).toBe('Pre-labeled table')
@@ -78,7 +78,7 @@ describe('table accessibility labels', () => {
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.find('caption').text()).toBe('Existing caption')
@@ -101,7 +101,7 @@ describe('table accessibility labels', () => {
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const tables = $('table')
     expect(tables.length).toBe(2)
@@ -123,7 +123,7 @@ Some text here.
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const tables = $('table')
     expect(tables.length).toBe(2)
@@ -145,7 +145,7 @@ Some additional context here.
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.attr('aria-labelledby')).toBe('data-table')
@@ -165,7 +165,7 @@ Some additional context here.
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const tables = $('table')
     expect(tables.length).toBe(2)
@@ -185,7 +185,7 @@ Some additional context here.
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.attr('aria-labelledby')).toBe('supported-github-actions-features')
@@ -201,7 +201,7 @@ Some additional context here.
 `)
 
     const html = await renderContent(template)
-    const $ = cheerio.load(html)
+    const $ = load(html)
 
     const table = $('table')
     expect(table.find('thead th').length).toBe(2)

src/content-render/tests/table-accessibility-labels.ts

@@ -1,4 +1,4 @@
-import cheerio from 'cheerio'
+import { load } from 'cheerio'
 import { decode } from 'html-entities'
 
 // Given a piece of HTML return it without HTML. E.g.
@@ -13,6 +13,6 @@ export function fastTextOnly(html: string): string {
     const middle = html.slice(3, -4)
     if (!middle.includes('<')) return decode(middle.trim())
   }
-  const $ = cheerio.load(html, { xmlMode: true })
+  const $ = load(html, { xmlMode: true })
   return $.root().text().trim()
 }

src/content-render/unified/text-only.ts

@@ -1,11 +1,11 @@
 import { describe, expect, test } from 'vitest'
-import cheerio from 'cheerio'
+import type { CheerioAPI } from 'cheerio'
 
 import { getDOM } from '@/tests/helpers/e2etest'
 
 describe('annotations', () => {
   test('code-snippet-with-hashbang', async () => {
-    const $: cheerio.Root = await getDOM('/get-started/foo/code-snippet-with-hashbang')
+    const $: CheerioAPI = await getDOM('/get-started/foo/code-snippet-with-hashbang')
     const annotations = $('#article-contents .annotate')
 
     // Check http://localhost:4000/en/get-started/foo/code-snippet-with-hashbang

src/fixtures/tests/annotations.ts

@@ -1,5 +1,7 @@
 import { describe, expect, test } from 'vitest'
 
+import type { Element } from 'domhandler'
+
 import { getDOM } from '@/tests/helpers/e2etest'
 
 describe('breadcrumbs', () => {
@@ -68,7 +70,7 @@ describe('breadcrumbs', () => {
 
     expect($breadcrumbTitles.length).toBe(0)
     expect($breadcrumbLinks.length).toBe(2)
-    expect(($breadcrumbLinks[0] as cheerio.TagElement).attribs.title).toBe('Deeper secrets')
-    expect(($breadcrumbLinks[1] as cheerio.TagElement).attribs.title).toBe('Mariana Trench')
+    expect(($breadcrumbLinks[0] as Element).attribs.title).toBe('Deeper secrets')
+    expect(($breadcrumbLinks[1] as Element).attribs.title).toBe('Mariana Trench')
   })
 })