build: update dependency marked to v13 (#2109)

Closes #2108 as a pr takeover

PR Close #2109

bazel/api-gen/rendering/marked/renderer.ts

@@ -7,7 +7,7 @@
  */
 
 import highlightJs, {HighlightResult} from 'highlight.js';
-import {Renderer as MarkedRenderer} from 'marked';
+import {Renderer as MarkedRenderer, Tokens} from 'marked';
 import {AIO_URL} from '../backwards-compatibility/domains';
 import {splitLines} from '../transforms/code-transforms';
 
@@ -16,18 +16,18 @@ import {splitLines} from '../transforms/code-transforms';
  * files that can be used in the Angular docs.
  */
 export const renderer: Partial<MarkedRenderer> = {
-  code(code: string, language: string, isEscaped: boolean): string {
+  code({text, lang, escaped}): string {
     let highlightResult: HighlightResult;
     // Use try catch because there are existing content issues when there is provided nonexistent
     // language, like `typescript=` etc. In that case when there will be an error thrown `Could not
     // find the language 'typescript=', did you forget to load/include a language module?`
     // Let's try to use `highlightAuto`.
     try {
-      highlightResult = language
-        ? highlightJs.highlight(code, {language})
-        : highlightJs.highlightAuto(code);
+      highlightResult = lang
+        ? highlightJs.highlight(text, {language: lang})
+        : highlightJs.highlightAuto(text);
     } catch {
-      highlightResult = highlightJs.highlightAuto(code);
+      highlightResult = highlightJs.highlightAuto(text);
     }
 
     const lines = splitLines(highlightResult.value);
@@ -42,16 +42,16 @@ export const renderer: Partial<MarkedRenderer> = {
       </div>
     `;
   },
-  image(href: string | null, title: string | null, text: string): string {
+  image({href, title, text}): string {
     return `
     <img src="${href}" alt="${text}" title="${title}" class="docs-image">
     `;
   },
-  link(href: string, title: string, text: string): string {
-    text = text.startsWith(AIO_URL) ? 'our guides' : text;
-    return `<a href="${href}">${text}</a>`;
+  link({href, title}): string {
+    title = title?.startsWith(AIO_URL) ? 'our guides' : title;
+    return `<a href="${href}">${title}</a>`;
   },
-  list(body: string, ordered: boolean, start: number) {
+  list({raw: body, ordered}: Tokens.List) {
     if (ordered) {
       return `
       <ol class="docs-ordered-list">
@@ -65,7 +65,7 @@ export const renderer: Partial<MarkedRenderer> = {
     </ul>
     `;
   },
-  table(header: string, body: string): string {
+  table({header, raw: body}): string {
     return `
       <div class="docs-table docs-scroll-track-transparent">
         <table>

docs/package.json

@@ -21,7 +21,7 @@
     "html-entities": "~2.5.2",
     "jsdom": "~24.1.0",
     "jszip": "~3.10.1",
-    "marked": "~12.0.2",
+    "marked": "~13.0.0",
     "mermaid": "^10.8.0"
   },
   "exports": {

docs/pipeline/guides/extensions/docs-workflow/docs-step.ts

@@ -51,7 +51,13 @@ export const docsStepExtension = {
     return `
     <li>
       <span class="docs-step-number" aria-hidden="true"></span>
-      ${headingRender(token.title, 3, token.title)}
+      ${headingRender({
+        depth: 3,
+        raw: token.title,
+        text: token.title,
+        tokens: [token],
+        type: 'heading',
+      })}
       ${this.parser.parse(token.tokens)}
     </li>
     `;

docs/pipeline/guides/parse.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {marked} from 'marked';
+import {RendererObject, marked} from 'marked';
 import {hooks} from './hooks';
-import {renderer} from './renderer';
+import {Renderer} from './renderer';
 import {docsAlertExtension} from './extensions/docs-alert';
 import {docsCalloutExtension} from './extensions/docs-callout';
 import {docsPillExtension} from './extensions/docs-pill/docs-pill';
@@ -32,8 +32,10 @@ export async function parseMarkdown(
   setContext(context);
 
   marked.use({
+    useNewRenderer: true,
+    // TODO: Remove unnecessary casting once `useNewRenderer` is the only renderer in marked v14.
+    renderer: new Renderer() as unknown as RendererObject,
     hooks,
-    renderer,
     extensions: [
       docsAlertExtension,
       docsCalloutExtension,

docs/pipeline/guides/renderer.ts

@@ -1,4 +1,4 @@
-import {RendererObject} from 'marked';
+import {Renderer as _Renderer} from 'marked';
 import {linkRender} from './tranformations/link';
 import {tableRender} from './tranformations/table';
 import {listRender} from './tranformations/list';
@@ -10,11 +10,11 @@ import {headingRender} from './tranformations/heading';
  * Custom renderer for marked that will be used to transform markdown files to HTML
  * files that can be used in the Angular docs.
  */
-export const renderer: RendererObject = {
-  link: linkRender,
-  table: tableRender,
-  list: listRender,
-  image: imageRender,
-  text: textRender,
-  heading: headingRender,
-};
+export class Renderer extends _Renderer {
+  override link = linkRender;
+  override table = tableRender;
+  override list = listRender;
+  override image = imageRender;
+  override text = textRender;
+  override heading = headingRender;
+}

docs/pipeline/guides/testing/table/table.md

@@ -1,4 +1,4 @@
-| Sports           | Season |
+| **Sports**           | *Season* |
 | ---------------- | ------ |
 | Skiing           | Winter |
 | Baseball | Summer |

docs/pipeline/guides/testing/table/table.spec.ts

@@ -16,8 +16,8 @@ describe('markdown to html', () => {
   });
 
   it('should place the initial row as table header cells', () => {
-    expect(parsedMarkdown).toContain('<th>Sports</th>');
-    expect(parsedMarkdown).toContain('<th>Season</th>');
+    expect(parsedMarkdown).toContain('<th><strong>Sports</strong></th>');
+    expect(parsedMarkdown).toContain('<th><em>Season</em></th>');
   });
 
   it('should place the subsequent rows as regular table cells', () => {

docs/pipeline/guides/tranformations/heading.ts

@@ -6,13 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {RendererApi} from 'marked';
+import {Renderer, Tokens} from 'marked';
 
 import {getHeaderId} from '../state';
 import {getPageTitle} from '../utils';
 
-export const headingRender: RendererApi['heading'] = (text, level, raw) => {
-  if (level === 1) {
+export function headingRender({text, depth}: Tokens.Heading): string;
+export function headingRender(this: Renderer, {text, depth}: Tokens.Heading): string {
+  if (depth === 1) {
     return `
     <header class="docs-header">
       <docs-breadcrumb></docs-breadcrumb>
@@ -32,8 +33,8 @@ export const headingRender: RendererApi['heading'] = (text, level, raw) => {
   const label = anchorLessText.replaceAll(/`(.*?)`/g, '<code>$1</code>');
 
   return `
-  <h${level} id="${link}">
+  <h${depth} id="${link}">
     <a href="#${link}" class="docs-anchor" tabindex="-1" aria-label="Link to ${label}">${label}</a>
-  </h${level}>
+  </h${depth}>
   `;
-};
+}

docs/pipeline/guides/tranformations/image.ts

@@ -7,15 +7,15 @@
  */
 
 import {normalize} from 'path';
-import {RendererApi} from 'marked';
+import {Renderer, Tokens} from 'marked';
 
 // TODO(josephperrott): Determine how we can define/know the image content base path.
 const imageContentBasePath = 'unknown';
 
-export const imageRender: RendererApi['image'] = (href, title, text) => {
+export function imageRender(this: Renderer, {href, title, text}: Tokens.Image) {
   const isRelativeSrc = href?.startsWith('./');
   const src = isRelativeSrc ? `${imageContentBasePath}/${normalize(href)}` : href;
   return `
   <img src="${src}" alt="${text}" title="${title}" class="docs-image">
   `;
-};
+}

docs/pipeline/guides/tranformations/link.ts

@@ -7,9 +7,9 @@
  */
 
 import {anchorTarget} from '../helpers';
-import {RendererApi} from 'marked';
+import {Renderer, Tokens} from 'marked';
 
-export const linkRender: RendererApi['link'] = (href, title, text) => {
+export function linkRender(this: Renderer, {href, title, text}: Tokens.Link) {
   const titleAttribute = title ? ` title=${title}` : '';
   return `<a href="${href}"${titleAttribute}${anchorTarget(href)}>${text}</a>`;
-};
+}

docs/pipeline/guides/tranformations/list.ts

@@ -6,19 +6,19 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {RendererApi} from 'marked';
+import {Renderer, Tokens} from 'marked';
 
-export const listRender: RendererApi['list'] = (body, ordered, start) => {
+export function listRender(this: Renderer, {items, ordered}: Tokens.List) {
   if (ordered) {
     return `
     <ol class="docs-ordered-list">
-      ${body}
+      ${items.map((item) => this.listitem(item)).join('')}
     </ol>
     `;
   }
   return `
   <ul class="docs-list">
-    ${body}
+    ${items.map((item) => this.listitem(item)).join('')}
   </ul>
   `;
-};
+}

docs/pipeline/guides/tranformations/table.ts

@@ -6,19 +6,27 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {RendererApi} from 'marked';
+import {Tokens, Renderer} from 'marked';
 
-export const tableRender: RendererApi['table'] = (header, body) => {
+export function tableRender(this: Renderer, {header, rows}: Tokens.Table) {
   return `
   <div class="docs-table docs-scroll-track-transparent">
     <table>
       <thead>
-        ${header}
+        ${this.tablerow({
+          text: header.map((cell) => this.tablecell(cell)).join(''),
+        })}
       </thead>
       <tbody>
-        ${body}
+        ${rows
+          .map((row) =>
+            this.tablerow({
+              text: row.map((cell) => this.tablecell(cell)).join(''),
+            }),
+          )
+          .join('')}
       </tbody>
     </table>
   </div>
   `;
-};
+}

docs/pipeline/guides/tranformations/text.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {RendererApi} from 'marked';
+import {Renderer, Tokens} from 'marked';
 import emojiRegex from 'emoji-regex';
 
 /** Regex to find unicode emojis. */
@@ -15,8 +15,8 @@ const UNICODE_EMOJI_REGEX = /&#x[\dA-Fa-f]+;/g;
 /** Regex to find emojis. */
 const regex = emojiRegex();
 
-export const textRender: RendererApi['text'] = (text) => {
+export function textRender(this: Renderer, {text}: Tokens.Text) {
   return regex.test(text) || UNICODE_EMOJI_REGEX.test(text)
     ? `<span class="docs-emoji">${text}</span>`
     : text;
-};
+}

package.json

@@ -42,7 +42,7 @@
     "browser-sync": "^3.0.0",
     "highlight.js": "^11.8.0",
     "html-entities": "^2.4.0",
-    "marked": "^12.0.0",
+    "marked": "^13.0.0",
     "marked-mangle": "^1.1.4",
     "preact": "^10.17.1",
     "preact-render-to-string": "^6.2.1",

yarn.lock

@@ -489,7 +489,7 @@ __metadata:
     karma-requirejs: "npm:^1.1.0"
     karma-sourcemap-loader: "npm:^0.4.0"
     license-checker: "npm:^25.0.1"
-    marked: "npm:^12.0.0"
+    marked: "npm:^13.0.0"
     marked-mangle: "npm:^1.1.4"
     mermaid: "npm:^10.8.0"
     minimatch: "npm:^9.0.0"
@@ -11578,12 +11578,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:^12.0.0":
-  version: 12.0.2
-  resolution: "marked@npm:12.0.2"
+"marked@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "marked@npm:13.0.0"
   bin:
     marked: bin/marked.js
-  checksum: 10c0/45ae2e1e3f06b30a5b5f64efc6cde9830c81d1d024fd7668772a3217f1bc0f326e66a6b8970482d9783edf1f581fecac7023a7fa160f2c14dbcc16e064b4eafb
+  checksum: 10c0/ddae525b0f4ad3805b6bce5e12a65d6286ca557e4357006aedd92494e9613113b4773a8821894d63947818686853e40177d654e53a85cb4999de4003adf1472d
   languageName: node
   linkType: hard