@apify/docusaurus-plugin-typedoc-api 3.0.0 → 4.2.0

package/src/components/ApiItem.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import type { JSONOutput } from 'typedoc';
+import { useMemo } from 'react';
 import { PageMetadata } from '@docusaurus/theme-common';
 import type { Props as DocItemProps } from '@theme/DocItem';
-import { useReflection } from '../hooks/useReflection';
+import { useReflection, useRequiredReflection } from '../hooks/useReflection';
 import { useReflectionMap } from '../hooks/useReflectionMap';
-import type { DeclarationReflectionMap, TOCItem } from '../types';
+import type { TOCItem, TSDDeclarationReflection, TSDDeclarationReflectionMap } from '../types';
+import { escapeMdx } from '../utils/helpers';
 import { getKindIconHtml } from '../utils/icons';
 import ApiItemLayout from './ApiItemLayout';
 import { displayPartsToMarkdown } from './Comment';
@@ -12,29 +12,27 @@ import { Flags } from './Flags';
 import { Reflection } from './Reflection';
 import { TypeParametersGeneric } from './TypeParametersGeneric';
 
-function extractTOC(
-	item: JSONOutput.DeclarationReflection,
-	map: DeclarationReflectionMap,
-): TOCItem[] {
+function extractTOC(item: TSDDeclarationReflection, map: TSDDeclarationReflectionMap): TOCItem[] {
 	const toc: TOCItem[] = [];
 	const mapped = new Set<string>();
 
 	item.groups?.forEach((group) => {
 		group.children?.forEach((childId) => {
-			const child = map[childId]!;
+			const child = map[childId];
 
 			if (mapped.has(child.name)) {
 				return;
 			}
 
-			const iconHtml = getKindIconHtml(child.kind, child.name);
-
 			if (!child.permalink || child.permalink.includes('#')) {
+				const iconHtml = getKindIconHtml(child.kind, child.name);
+				const value = escapeMdx(child.name) ?? '';
+
 				toc.push({
 					// @ts-expect-error Not typed upstream
 					children: [],
 					id: child.name,
-					value: iconHtml ? `${iconHtml} ${child.name}` : child.name,
+					value: iconHtml ? `${iconHtml} ${value}` : value,
 					level: 1,
 				});
 
@@ -51,7 +49,7 @@ export interface ApiItemProps extends Pick<DocItemProps, 'route'> {
 }
 
 export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
-	const item = useReflection((route as unknown as { id: number }).id)!;
+	const item = useRequiredReflection((route as unknown as { id: number }).id);
 	const reflections = useReflectionMap();
 	const toc = useMemo(() => extractTOC(item, reflections), [item, reflections]);
 
@@ -63,14 +61,14 @@ export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
 			next: nextItem
 				? {
 						permalink: nextItem.permalink,
-						title: nextItem.name,
-				  }
+						title: escapeMdx(nextItem.name) ?? '',
+					}
 				: undefined,
 			previous: prevItem
 				? {
 						permalink: prevItem.permalink,
-						title: prevItem.name,
-				  }
+						title: escapeMdx(prevItem.name) ?? '',
+					}
 				: undefined,
 		}),
 		[nextItem, prevItem],
@@ -83,15 +81,15 @@ export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
 					<span className="tsd-header-flags">
 						<Flags flags={item.flags} />
 					</span>
-					{item.name} <TypeParametersGeneric params={item.typeParameters} />
+					{escapeMdx(item.name)} <TypeParametersGeneric params={item.typeParameters} />
 				</>
 			}
 			module={(item as unknown as { module: string }).module}
 			name={item.name}
 			pageMetadata={
 				<PageMetadata
-					description={item.comment?.summary ? displayPartsToMarkdown(item.comment.summary) : ''}
-					title={`${item.name} | API`}
+					description={item?.comment?.summary ? displayPartsToMarkdown(item.comment.summary) : ''}
+					title={`${item?.name ? `${item.name} | ` : ''}API`}
 				/>
 			}
 			pagingMetadata={pagingMetadata}

package/src/components/ApiItemLayout.tsx

@@ -2,7 +2,6 @@
 // we had to duplicate it. Keep this file in sync as much as possible!
 // https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
 
-import React from 'react';
 import type { PropNavigation } from '@docusaurus/plugin-content-docs';
 import { ThemeClassNames, useWindowSize } from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
@@ -23,7 +22,7 @@ export interface ApiItemLayoutProps extends Pick<DocItemProps, 'route'> {
 	toc: readonly TOCItem[];
 	pageMetadata?: React.ReactNode;
 	pagingMetadata?: PropNavigation;
-	name: string;
+	name?: string;
 	module?: string;
 }
 

package/src/components/ApiPage.tsx

@@ -2,20 +2,25 @@
 
 import '@vscode/codicons/dist/codicon.css';
 import './styles.css';
-import React, { useMemo } from 'react';
-import type { JSONOutput } from 'typedoc';
-import DocPage, { type Props as DocPageProps } from '@theme/DocPage';
-import type { ApiOptions, DeclarationReflectionMap, PackageReflectionGroup } from '../types';
+import { useMemo } from 'react';
+import DocRoot, { type Props as DocRootProps } from '@theme/DocRoot';
+import type {
+	ApiOptions,
+	PackageReflectionGroup,
+	TSDDeclarationReflection,
+	TSDDeclarationReflectionMap,
+	TSDReflection,
+} from '../types';
 import { ApiDataContext } from './ApiDataContext';
 
-function isObject(value: unknown): value is JSONOutput.Reflection {
+function isObject(value: unknown): value is TSDReflection {
 	return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
 function deepMapReflections(
-	data: JSONOutput.Reflection,
-	map: DeclarationReflectionMap,
-	parent?: JSONOutput.Reflection,
+	data: TSDReflection,
+	map: TSDDeclarationReflectionMap,
+	parent?: TSDReflection,
 ) {
 	Object.entries(data).forEach(([key, value]) => {
 		if (key === 'id') {
@@ -23,7 +28,7 @@ function deepMapReflections(
 
 			// Dont overwrite with reference nodes
 			if (!hasType || (hasType && (data as unknown as { type: string }).type !== 'reference')) {
-				map[Number(value)] = data;
+				map[Number(value)] = data as TSDDeclarationReflection;
 
 				if (parent) {
 					data.parentId = parent.id;
@@ -43,8 +48,8 @@ function deepMapReflections(
 	return map;
 }
 
-function mapPackagesToReflection(packages: PackageReflectionGroup[]): DeclarationReflectionMap {
-	const map: DeclarationReflectionMap = {};
+function mapPackagesToReflection(packages: PackageReflectionGroup[]): TSDDeclarationReflectionMap {
+	const map: TSDDeclarationReflectionMap = {};
 
 	packages.forEach((pkg) => {
 		pkg.entryPoints.forEach((entry) => {
@@ -55,7 +60,7 @@ function mapPackagesToReflection(packages: PackageReflectionGroup[]): Declaratio
 	return map;
 }
 
-export interface ApiPageProps extends DocPageProps {
+export interface ApiPageProps extends DocRootProps {
 	options: ApiOptions;
 	packages: PackageReflectionGroup[];
 }
@@ -69,7 +74,7 @@ function ApiPage({ options, packages, ...props }: ApiPageProps) {
 	return (
 		<ApiDataContext.Provider value={value}>
 			<div className="apiPage">
-				<DocPage {...props} />
+				<DocRoot {...props} />
 			</div>
 		</ApiDataContext.Provider>
 	);

package/src/components/Breadcrumb.tsx

@@ -1,12 +1,11 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/breadcrumb.hbs
 
-import React from 'react';
-import type { JSONOutput } from 'typedoc';
 import Link from '@docusaurus/Link';
 import { useReflection } from '../hooks/useReflection';
+import type { TSDReflection } from '../types';
 
 export interface BreadcrumbProps {
-	reflection: JSONOutput.Reflection;
+	reflection: TSDReflection;
 	root?: boolean;
 }
 

package/src/components/Comment.tsx

@@ -1,6 +1,5 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/comment.hbs
-
-import React from 'react';
+import { Fragment } from 'react';
 import type { JSONOutput } from 'typedoc';
 import { Markdown } from './Markdown';
 
@@ -58,14 +57,14 @@ export function Comment({ comment, root, hideTags = [] }: CommentProps) {
 			{blockTags.length > 0 && (
 				<dl className="tsd-comment-tags">
 					{blockTags.map((tag) => (
-						<React.Fragment key={tag.tag}>
+						<Fragment key={tag.tag}>
 							<dt>
 								<strong>{tag.tag}</strong>
 							</dt>
 							<dd>
 								<Markdown content={displayPartsToMarkdown(tag.content)} />
 							</dd>
-						</React.Fragment>
+						</Fragment>
 					))}
 				</dl>
 			)}

package/src/components/CommentBadges.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { JSONOutput } from 'typedoc';
 
 function getModifierClassName(tag: string) {

package/src/components/DefaultValue.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-perf/jsx-no-new-object-as-prop */
 
-import React from 'react';
 import type { JSONOutput } from 'typedoc';
 import { displayPartsToMarkdown } from './Comment';
 import { Type } from './Type';

package/src/components/Flags.tsx

@@ -1,5 +1,5 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/comment.hbs
-import React from 'react';
+
 import type { JSONOutput } from 'typedoc';
 
 function removePrefix(value: string) {

package/src/components/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function Footer() {
 	return (
 		<footer className="tsd-footer">

package/src/components/Hierarchy.tsx

@@ -1,6 +1,5 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/hierarchy.hbs
 
-import React from 'react';
 import type { HierarchyNode } from '../utils/hierarchy';
 import { Type } from './Type';
 

package/src/components/Icon.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import type { JSONOutput } from 'typedoc';
+import type { TSDDeclarationReflection, TSDSignatureReflection } from '../types';
 import { getKindIcon, getKindIconColor } from '../utils/icons';
 
 export interface IconProps {
-	reflection: JSONOutput.DeclarationReflection;
+	reflection: TSDDeclarationReflection | TSDSignatureReflection;
 }
 
 export function Icon({ reflection }: IconProps) {

package/src/components/Index.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import type { JSONOutput } from 'typedoc';
+import { Fragment } from 'react';
 import Link from '@docusaurus/Link';
-import { useReflection } from '../hooks/useReflection';
+import { useRequiredReflection } from '../hooks/useReflection';
+import type { TSDDeclarationReflection } from '../types';
+import { escapeMdx } from '../utils/helpers';
 import { AnchorLink } from './AnchorLink';
 import { Icon } from './Icon';
 
@@ -10,20 +11,20 @@ export interface IndexChildProps {
 }
 
 function IndexChild({ id }: IndexChildProps) {
-	const reflection = useReflection(id)!;
+	const reflection = useRequiredReflection(id);
 
 	return (
 		<li>
 			<Link className="tsd-kind-icon" to={reflection.permalink ?? `#${reflection.name}`}>
 				<Icon reflection={reflection} />
-				{reflection.name ?? <em>{reflection.kindString}</em>}
+				{escapeMdx(reflection.name)}
 			</Link>
 		</li>
 	);
 }
 
 export interface IndexProps {
-	reflection: JSONOutput.DeclarationReflection;
+	reflection: TSDDeclarationReflection;
 }
 
 export function Index({ reflection }: IndexProps) {
@@ -39,14 +40,12 @@ export function Index({ reflection }: IndexProps) {
 						{reflection.categories.map((category) => (
 							<section key={category.title} className="tsd-index-section">
 								<h3 className="tsd-panel-header">
-									{category.title === 'CATEGORY' ? 'Other' : category.title}
+									{category.title === '__CATEGORY__' ? 'Other' : category.title}
 								</h3>
 
 								<div className="tsd-panel-content">
 									<ul className="tsd-index-list">
-										{category.children?.map((child) => (
-											<IndexChild key={child} id={child} />
-										))}
+										{category.children?.map((child) => <IndexChild key={child} id={child} />)}
 									</ul>
 								</div>
 							</section>
@@ -70,19 +69,17 @@ export function Index({ reflection }: IndexProps) {
 							<section key={group.title} className="tsd-index-section">
 								{group.categories && group.categories.length > 0 ? (
 									group.categories.map((category) => (
-										<React.Fragment key={category.title}>
+										<Fragment key={category.title}>
 											<h3 className="tsd-panel-header">
-												{category.title === 'CATEGORY' ? group.title : category.title}
+												{category.title === '__CATEGORY__' ? group.title : category.title}
 											</h3>
 
 											<div className="tsd-panel-content">
 												<ul className="tsd-index-list">
-													{category.children?.map((child) => (
-														<IndexChild key={child} id={child} />
-													))}
+													{category.children?.map((child) => <IndexChild key={child} id={child} />)}
 												</ul>
 											</div>
-										</React.Fragment>
+										</Fragment>
 									))
 								) : (
 									<>
@@ -90,9 +87,7 @@ export function Index({ reflection }: IndexProps) {
 
 										<div className="tsd-panel-content">
 											<ul className="tsd-index-list">
-												{group.children?.map((child) => (
-													<IndexChild key={child} id={child} />
-												))}
+												{group.children?.map((child) => <IndexChild key={child} id={child} />)}
 											</ul>
 										</div>
 									</>

package/src/components/Markdown.tsx

@@ -1,9 +1,11 @@
-/* eslint-disable unicorn/no-unsafe-regex */
 /* eslint-disable react/no-array-index-key */
 
-import React, { useState } from 'react';
-import { marked } from 'marked';
+import { Fragment, useState } from 'react';
+import { marked, type Tokens } from 'marked';
+import { markedSmartypants } from 'marked-smartypants';
+import { useDocsData } from '@docusaurus/plugin-content-docs/client';
 import { useDocsVersion } from '@docusaurus/theme-common/internal';
+import CodeBlock from '@theme/CodeBlock';
 import MDX from '@theme/MDXComponents';
 import { useReflectionMap } from '../hooks/useReflectionMap';
 import { replaceLinkTokens } from '../utils/markdown';
@@ -14,30 +16,48 @@ interface Admonition {
 	title?: string;
 	keyword?: string;
 	text: string;
-	tokens: marked.Token[];
+	tokens: Token[];
 }
 
-type TokensList = (Admonition | marked.Token)[];
-
-marked.setOptions({
-	gfm: true,
-	headerIds: false,
-	mangle: false,
-	smartLists: true,
-	smartypants: true,
-});
+type Token =
+	| Admonition
+	| Tokens.Blockquote
+	| Tokens.Br
+	| Tokens.Code
+	| Tokens.Codespan
+	| Tokens.Def
+	| Tokens.Del
+	| Tokens.Em
+	| Tokens.Escape
+	| Tokens.Heading
+	| Tokens.Hr
+	| Tokens.HTML
+	| Tokens.Image
+	| Tokens.Link
+	| Tokens.List
+	| Tokens.ListItem
+	| Tokens.Paragraph
+	| Tokens.Space
+	| Tokens.Strong
+	| Tokens.Table
+	| Tokens.Tag
+	| Tokens.Text;
+type TokensList = Token[];
 
 const ADMONITION_START = /^:{3}([a-z]+)? *(.*)\n/;
 const ADMONITION_END = '\n:::';
 
+marked.setOptions({
+	gfm: true,
+});
+marked.use(markedSmartypants());
 marked.use({
 	extensions: [
 		{
 			name: 'admonition',
 			level: 'block',
 			start(src) {
-				// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-				return src.match(ADMONITION_START)?.index!;
+				return src.match(ADMONITION_START)?.index;
 			},
 			tokenizer(src, tokens) {
 				const match = ADMONITION_START.exec(src);
@@ -100,9 +120,12 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 		switch (token.type) {
 			case 'code':
 				elements.push(
-					<MDX.pre key={counter} className={token.lang && `language-${token.lang}`}>
+					/* <MDX.pre key={counter} className={token.lang && `language-${token.lang}`}>
+						{token.text}
+					</MDX.pre>, */
+					<CodeBlock key={counter} language={token.lang}>
 						{token.text}
-					</MDX.pre>,
+					</CodeBlock>,
 				);
 				break;
 
@@ -119,12 +142,12 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 			}
 
 			case 'image':
-				elements.push(<MDX.img key={counter} alt={token.title} src={token.href} />);
+				elements.push(<MDX.img key={counter} alt={token.title ?? ''} src={token.href} />);
 				break;
 
 			case 'link':
 				elements.push(
-					<MDX.a key={counter} href={token.href} title={token.title}>
+					<MDX.a key={counter} href={token.href} title={token.title ?? ''}>
 						{convertAstToElements(children) ?? token.text}
 					</MDX.a>,
 				);
@@ -163,7 +186,7 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 						<thead>
 							<tr>
 								{token.header.map((h, i) => (
-									<th key={i} align={token.align[i]!}>
+									<th key={i} align={token.align[i] ?? 'left'}>
 										{convertAstToElements(h.tokens as TokensList)}
 									</th>
 								))}
@@ -173,7 +196,7 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 							{token.rows.map((cells, i) => (
 								<tr key={i}>
 									{cells.map((c, i2) => (
-										<td key={i2} align={token.align[i]!}>
+										<td key={i2} align={token.align[i] ?? 'left'}>
 											{convertAstToElements(c.tokens as TokensList)}
 										</td>
 									))}
@@ -189,7 +212,7 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 					children.length === 0 ? (
 						token.text
 					) : (
-						<React.Fragment key={counter}>{convertAstToElements(children)}</React.Fragment>
+						<Fragment key={counter}>{convertAstToElements(children)}</Fragment>
 					),
 				);
 				break;
@@ -203,7 +226,9 @@ function convertAstToElements(ast: TokensList): React.ReactNode[] | undefined {
 				break;
 
 			default: {
-				const Comp = TOKEN_TO_TAG[token.type] || token.type;
+				const Comp = (TOKEN_TO_TAG[token.type] || token.type) as unknown as React.ComponentType<{
+					children: React.ReactNode;
+				}>;
 				const innerText = 'text' in token ? token.text : '';
 
 				elements.push(<Comp key={counter}>{convertAstToElements(children) ?? innerText}</Comp>);
@@ -229,8 +254,12 @@ export interface MarkdownProps {
 export function Markdown({ content }: MarkdownProps) {
 	const reflections = useReflectionMap();
 	const version = useDocsVersion();
-	const [ast] = useState<TokensList>(() =>
-		marked.lexer(replaceLinkTokens(content, reflections, version)),
+	const docsData = useDocsData(version.pluginId);
+	const [ast] = useState<TokensList>(
+		() =>
+			marked.lexer(
+				replaceLinkTokens(content, reflections, version, docsData.path),
+			) as unknown as TokensList,
 	);
 
 	if (!content) {

package/src/components/Member.tsx

@@ -1,9 +1,10 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/members.hbs
 
-import React from 'react';
+import { Fragment } from 'react';
 import type { JSONOutput } from 'typedoc';
-import { useReflection } from '../hooks/useReflection';
+import { useRequiredReflection } from '../hooks/useReflection';
 import { useReflectionMap } from '../hooks/useReflectionMap';
+import { escapeMdx } from '../utils/helpers';
 import { hasOwnDocument } from '../utils/visibility';
 import { AnchorLink } from './AnchorLink';
 import { CommentBadges, isCommentWithModifiers } from './CommentBadges';
@@ -20,7 +21,7 @@ export interface MemberProps {
 
 export function Member({ id }: MemberProps) {
 	const reflections = useReflectionMap();
-	const reflection = useReflection(id)!;
+	const reflection = useRequiredReflection(id);
 	const { comment } = reflection;
 	let content: React.ReactNode = null;
 
@@ -46,18 +47,18 @@ export function Member({ id }: MemberProps) {
 				<AnchorLink id={reflection.name} />
 				<SourceLink sources={reflection.sources} />
 				<Flags flags={reflection.flags} />
-				{reflection.name}
+				{escapeMdx(reflection.name)}
 				{isCommentWithModifiers(comment) && <CommentBadges comment={comment} />}
 			</h3>
 
 			{content}
 
 			{reflection.groups?.map((group) => (
-				<React.Fragment key={group.title}>
+				<Fragment key={group.title}>
 					{group.children?.map((child) =>
 						hasOwnDocument(child, reflections) ? null : <Member key={child} id={child} />,
 					)}
-				</React.Fragment>
+				</Fragment>
 			))}
 		</section>
 	);

package/src/components/MemberDeclaration.tsx

@@ -1,14 +1,14 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/member.declaration.hbs
 
-import React from 'react';
 import { useMinimalLayout } from '../hooks/useMinimalLayout';
-import { useReflection } from '../hooks/useReflection';
+import { useRequiredReflection } from '../hooks/useReflection';
+import { escapeMdx } from '../utils/helpers';
 import { Comment, hasComment } from './Comment';
 import { DefaultValue } from './DefaultValue';
 import { Icon } from './Icon';
 import { MemberSources } from './MemberSources';
 import { Parameter } from './Parameter';
-import { Type } from './Type';
+import { extractDeclarationFromType, Type } from './Type';
 import { TypeParameters } from './TypeParameters';
 import { TypeParametersGeneric } from './TypeParametersGeneric';
 
@@ -17,17 +17,17 @@ export interface MemberDeclarationProps {
 }
 
 export function MemberDeclaration({ id }: MemberDeclarationProps) {
-	const reflection = useReflection(id)!;
+	const reflection = useRequiredReflection(id);
 	const minimal = useMinimalLayout();
 	const showTypes = reflection.typeParameters && reflection.typeParameters.length > 0;
-	const showDeclaration = !minimal && reflection.type?.declaration;
+	const showDeclaration = !minimal && extractDeclarationFromType(reflection.type);
 
 	return (
 		<>
 			<div className="tsd-panel-content">
 				<div className="tsd-signature tsd-kind-icon">
 					<Icon reflection={reflection} />
-					{reflection.name}
+					{escapeMdx(reflection.name)}
 					<TypeParametersGeneric params={reflection.typeParameters} />
 					<span className="tsd-signature-symbol">{reflection.flags?.isOptional && '?'}: </span>{' '}
 					<Type type={reflection.type} />
@@ -58,7 +58,7 @@ export function MemberDeclaration({ id }: MemberDeclarationProps) {
 				{showDeclaration && (
 					<div className="tsd-type-declaration">
 						<h4>Type declaration</h4>
-						<Parameter param={reflection.type?.declaration} />
+						<Parameter param={extractDeclarationFromType(reflection.type)} />
 					</div>
 				)}
 			</div>

package/src/components/MemberGetterSetter.tsx

@@ -1,16 +1,16 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/member.getterSetter.hbs
 
-import React from 'react';
-import type { JSONOutput } from 'typedoc';
 import { useMinimalLayout } from '../hooks/useMinimalLayout';
+import type { TSDDeclarationReflection } from '../types';
+import { escapeMdx } from '../utils/helpers';
 import { Icon } from './Icon';
 import { hasSigBody, MemberSignatureBody } from './MemberSignatureBody';
 import { MemberSignatureTitle } from './MemberSignatureTitle';
 
 export interface MemberGetterSetterProps {
 	inPanel?: boolean;
-	getter?: JSONOutput.DeclarationReflection['getSignature'];
-	setter?: JSONOutput.DeclarationReflection['setSignature'];
+	getter?: TSDDeclarationReflection['getSignature'];
+	setter?: TSDDeclarationReflection['setSignature'];
 }
 
 // eslint-disable-next-line complexity
@@ -30,7 +30,7 @@ export function MemberGetterSetter({ inPanel, getter, setter }: MemberGetterSett
 							<li className="tsd-signature tsd-kind-icon">
 								<Icon reflection={getter} />
 								<span className="tsd-signature-symbol">get </span>
-								{getter.name}
+								{escapeMdx(getter.name)}
 								<MemberSignatureTitle hideName sig={getter} />
 							</li>
 						)}
@@ -39,7 +39,7 @@ export function MemberGetterSetter({ inPanel, getter, setter }: MemberGetterSett
 							<li className="tsd-signature tsd-kind-icon">
 								<Icon reflection={setter} />
 								<span className="tsd-signature-symbol">set </span>
-								{setter.name}
+								{escapeMdx(setter.name)}
 								<MemberSignatureTitle hideName sig={setter} />
 							</li>
 						)}