diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/class-member.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/class-member.tsx index 684b34025af0..5ba9a99b88ad 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/templates/class-member.tsx +++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/class-member.tsx @@ -59,10 +59,16 @@ export function ClassMember(props: {member: MemberEntryRenderable}) { const memberName = member.name; const displayName = member.displayName; const returnType = getMemberType(member); + const label = displayName ?? memberName; + return (
-

{displayName ?? memberName}

+

+ + {label} + +

{isClassMethodEntry(member) && member.signatures.length > 1 ? ( {member.signatures.length} overloads ) : returnType ? ( diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/renderable.spec.mts b/adev/shared-docs/pipeline/api-gen/rendering/test/renderable.spec.mts index b869906e5c0d..5329c8666111 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/test/renderable.spec.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/test/renderable.spec.mts @@ -7,8 +7,10 @@ */ import {readFile} from 'fs/promises'; +import {JSDOM} from 'jsdom'; import {DocEntryRenderable} from '../entities/renderables.mjs'; import {getRenderable} from '../processing.mjs'; +import {renderEntry} from '../rendering.mjs'; import {setSymbols} from '../symbol-context.mjs'; import {resolve} from 'path'; import {initHighlighter} from '../../../shared/shiki.mjs'; @@ -60,4 +62,21 @@ describe('renderable', () => { expect(linkedSignal!.experimental).toBe(undefined); expect(linkedSignal!.stable).toBe(undefined); }); + + it('should render docs-anchor links in class member card headers', () => { + const viewRef = entries.get('ViewRef')!; + expect(viewRef).toBeDefined(); + + const html = renderEntry(viewRef); + const fragment = JSDOM.fragment(html); + + const memberCards = fragment.querySelectorAll('.docs-reference-member-card'); + expect(memberCards.length).toBeGreaterThan(0); + + for (const card of Array.from(memberCards)) { + const id = card.getAttribute('id')!; + const anchor = card.querySelector('h3 a.docs-anchor') as HTMLAnchorElement; + expect(anchor.getAttribute('href')).toBe(`#${id}`); + } + }); }); diff --git a/adev/shared-docs/pipeline/api-gen/rendering/transforms/code-transforms.mts b/adev/shared-docs/pipeline/api-gen/rendering/transforms/code-transforms.mts index cfb15a34338d..eec73cdccd2b 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/transforms/code-transforms.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/transforms/code-transforms.mts @@ -95,6 +95,7 @@ export async function addRenderableCodeToc( { language: 'typescript', apiEntries: getSymbolsAsApiEntries(), + removeWhitespace: false, }, ); diff --git a/adev/shared-docs/pipeline/shared/shiki.mts b/adev/shared-docs/pipeline/shared/shiki.mts index 1a55ebc776cf..3cc8b7a0def9 100644 --- a/adev/shared-docs/pipeline/shared/shiki.mts +++ b/adev/shared-docs/pipeline/shared/shiki.mts @@ -42,6 +42,7 @@ export function codeToHtml( apiEntries?: ApiEntries; language?: string; highlight?: Set; + removeWhitespace?: boolean; }, ): string { const html = highlighter.codeToHtml(code, { @@ -53,7 +54,7 @@ export function codeToHtml( cssVariablePrefix: '--shiki-', defaultColor: false, transformers: [ - removeWhitespaceTransformer(), + ...(config.removeWhitespace ? [removeWhitespaceTransformer()] : []), highlightTransformer(config.highlight), linkApiEntriesTransformer(config.apiEntries), ],