build: update dependency marked to v14 (angular#57319)

See associated pull request for more information. Closes angular#57283 as a pr takeover PR Close angular#57319

Author: angular-robot

adev/shared-docs/package.json

@@ -20,7 +20,7 @@
  "fflate": "^0.8.2",
  "html-entities": "~2.5.2",
  "jsdom": "~24.1.0",
- "marked": "~12.0.2",
+ "marked": "~14.0.0",
  "mermaid": "^10.8.0",
  "shiki": "^1.10.3"
  },

adev/shared-docs/pipeline/api-gen/rendering/marked/renderer.ts

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Renderer as MarkedRenderer} from 'marked';
+import {Renderer as MarkedRenderer, Tokens} from 'marked';
 import {codeToHtml} from '../shiki/shiki';
 
 /**
  * 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: Partial<MarkedRenderer> = {
- code(code: string, language: string, isEscaped: boolean): string {
- const highlightResult = codeToHtml(code, language).replace(/>\s+</g, '><');
+ code({lang, raw}): string {
+ const highlightResult = codeToHtml(raw, lang).replace(/>\s+</g, '><');
 
  return `
  <div class="docs-code" role="group">
@@ -25,37 +25,46 @@ 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 {
+ link({href, text}): string {
  return `<a href="${href}">${text}</a>`;
  },
- list(body: string, ordered: boolean, start: number) {
+ list({items, ordered, start}) {
  if (ordered) {
  return `
  <ol class="docs-ordered-list">
- ${body}
+ ${items}
  </ol>
  `;
  }
  return `
  <ul class="docs-list">
- ${body}
+ ${items}
  </ul>
  `;
  },
- table(header: string, body: string): string {
+
+ table(this: MarkedRenderer, {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>

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

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

adev/shared-docs/pipeline/guides/parse.ts

@@ -8,7 +8,7 @@
 
 import {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';
@@ -33,7 +33,6 @@ export async function parseMarkdown(
 
  marked.use({
  hooks,
- renderer,
  extensions: [
  docsAlertExtension,
  docsCalloutExtension,
@@ -55,5 +54,5 @@ export async function parseMarkdown(
  async: true,
  });
 
- return marked.parse(markdownContent);
+ return marked.parse(markdownContent, {renderer: new Renderer()});
 }

adev/shared-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;
+}

adev/shared-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>
@@ -36,8 +37,8 @@ export const headingRender: RendererApi['heading'] = (text, level, raw) => {
  const label = anchorLessText.replace(/`(.*?)`/g, '<code>$1</code>').replace(customIdRegex, '');
 
  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}>
  `;
-};
+}

adev/shared-docs/pipeline/guides/tranformations/image.ts

@@ -7,15 +7,16 @@
  */
 
 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">
  `;
-};
+}

adev/shared-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>`;
-};
+}

adev/shared-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>
  `;
-};
+}

adev/shared-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 {Renderer, Tokens} 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>
  `;
-};
+}