@apify/docusaurus-plugin-typedoc-api 3.0.0

package/src/components/MemberSignatures.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/member.signatures.hbs
+
+import React, { useState } from 'react';
+import type { JSONOutput } from 'typedoc';
+import { useMinimalLayout } from '../hooks/useMinimalLayout';
+import { Icon } from './Icon';
+import { hasSigBody, MemberSignatureBody } from './MemberSignatureBody';
+import { MemberSignatureTitle } from './MemberSignatureTitle';
+
+export interface MemberSignaturesProps {
+	inPanel?: boolean;
+	sigs: JSONOutput.SignatureReflection[];
+}
+
+export function MemberSignatures({ inPanel, sigs }: MemberSignaturesProps) {
+	const [activeIndex, setActiveIndex] = useState(0);
+	const minimal = useMinimalLayout();
+	const hasMultiple = sigs.length > 1;
+	const body = sigs[activeIndex];
+
+	return (
+		<>
+			<div className={inPanel ? 'tsd-panel-content' : ''}>
+				<ul className="tsd-signatures">
+					{sigs.map((sig, i) => (
+						<li
+							key={sig.id}
+							className={`tsd-signature tsd-kind-icon ${
+								i === activeIndex ? '' : 'tsd-signature-inactive'
+							} ${hasMultiple ? 'tsd-pressable' : ''}`}
+							onClick={
+								hasMultiple
+									? // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+									  () => {
+											setActiveIndex(i);
+									  }
+									: undefined
+							}
+						>
+							<Icon reflection={sig} />
+							<MemberSignatureTitle sig={sig} />
+						</li>
+					))}
+				</ul>
+			</div>
+
+			{hasSigBody(body, minimal) && (
+				<>
+					{!inPanel && <hr className="tsd-divider" />}
+
+					<div className={inPanel ? 'tsd-panel-content' : ''}>
+						<ul className="tsd-descriptions">
+							<li key={body.id} className="tsd-description">
+								<MemberSignatureBody sig={body} />
+							</li>
+						</ul>
+					</div>
+				</>
+			)}
+		</>
+	);
+}

package/src/components/MemberSources.tsx

@@ -0,0 +1,42 @@
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/member.sources.hbs
+
+import React from 'react';
+import type { JSONOutput } from 'typedoc';
+import { TypeAndParent } from './TypeAndParent';
+
+export function hasSources(reflection: JSONOutput.DeclarationReflection) {
+	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+	return Boolean(reflection.implementationOf || reflection.inheritedFrom || reflection.overwrites);
+}
+
+export interface MemberSourcesProps {
+	reflection: JSONOutput.DeclarationReflection;
+}
+
+export function MemberSources({ reflection }: MemberSourcesProps) {
+	if (!hasSources(reflection)) {
+		return null;
+	}
+
+	return (
+		<aside className="tsd-sources">
+			{reflection.implementationOf && (
+				<p>
+					Implementation of <TypeAndParent type={reflection.implementationOf} />
+				</p>
+			)}
+
+			{reflection.inheritedFrom && (
+				<p>
+					Inherited from <TypeAndParent type={reflection.inheritedFrom} />
+				</p>
+			)}
+
+			{reflection.overwrites && (
+				<p>
+					Overrides <TypeAndParent type={reflection.overwrites} />
+				</p>
+			)}
+		</aside>
+	);
+}

package/src/components/Members.tsx

@@ -0,0 +1,62 @@
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/members.hbs
+
+import React from 'react';
+import type { JSONOutput } from 'typedoc';
+import { useReflectionMap } from '../hooks/useReflectionMap';
+import {
+	allCategoryChildrenHaveOwnDocument,
+	allGroupChildrenHaveOwnDocument,
+	hasOwnDocument,
+} from '../utils/visibility';
+import { AnchorLink } from './AnchorLink';
+import { Member } from './Member';
+import { MembersGroup } from './MembersGroup';
+
+export interface MembersProps {
+	reflection: JSONOutput.DeclarationReflection;
+}
+
+export function Members({ reflection }: MembersProps) {
+	const reflections = useReflectionMap();
+
+	if (reflection.categories && reflection.categories.length > 0) {
+		return (
+			<>
+				{reflection.categories.map((category) => {
+					if (allCategoryChildrenHaveOwnDocument(category, reflections)) {
+						return null;
+					}
+
+					return (
+						<section key={category.title} className="tsd-panel-group tsd-member-group">
+							<h2>
+								{category.title === 'CATEGORY' ? 'Other' : category.title}{' '}
+								<AnchorLink id={category.title} />
+							</h2>
+
+							{category.children?.map((child) => {
+								if (hasOwnDocument(child, reflections)) {
+									return null;
+								}
+
+								return <Member key={child} id={child} />;
+							})}
+						</section>
+					);
+				})}
+			</>
+		);
+	}
+
+	return (
+		<>
+			{reflection.groups?.map((group) => {
+				if (allGroupChildrenHaveOwnDocument(group, reflections)) {
+					return null;
+				}
+
+				return <MembersGroup key={group.title} group={group} />;
+			})}
+		</>
+	);
+}

package/src/components/MembersGroup.tsx

@@ -0,0 +1,47 @@
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/members.group.hbs
+
+import React from 'react';
+import type { JSONOutput } from 'typedoc';
+import { useReflectionMap } from '../hooks/useReflectionMap';
+import { hasOwnDocument } from '../utils/visibility';
+import { AnchorLink } from './AnchorLink';
+import { Member } from './Member';
+
+export interface MembersGroupProps {
+	group: JSONOutput.ReflectionGroup;
+}
+
+export function MembersGroup({ group }: MembersGroupProps) {
+	const reflections = useReflectionMap();
+
+	if (group.categories && group.categories.length > 0) {
+		return (
+			<>
+				{group.categories.map((category) => (
+					<section key={category.title} className="tsd-panel-group tsd-member-group">
+						<h2>
+							{category.title === 'CATEGORY' ? 'Other' : category.title}{' '}
+							<AnchorLink id={category.title} />
+						</h2>
+
+						{category.children?.map((child) =>
+							hasOwnDocument(child, reflections) ? null : <Member key={child} id={child} />,
+						)}
+					</section>
+				))}
+			</>
+		);
+	}
+
+	return (
+		<section className="tsd-panel-group tsd-member-group">
+			<h2>
+				{group.title} <AnchorLink id={group.title} />
+			</h2>
+
+			{group.children?.map((child) =>
+				hasOwnDocument(child, reflections) ? null : <Member key={child} id={child} />,
+			)}
+		</section>
+	);
+}

package/src/components/Parameter.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/Parameter.hbs
+
+import React from 'react';
+import type { JSONOutput } from 'typedoc';
+import { useMinimalLayout } from '../hooks/useMinimalLayout';
+import { Comment } from './Comment';
+import { Flags } from './Flags';
+import { Icon } from './Icon';
+import { hasSigBody, MemberSignatureBody } from './MemberSignatureBody';
+import { MemberSignatures } from './MemberSignatures';
+import { MemberSignatureTitle } from './MemberSignatureTitle';
+import { Type } from './Type';
+
+export interface ParameterProps {
+	param?: JSONOutput.DeclarationReflection;
+}
+
+function ParameterChild({ param }: ParameterProps) {
+	if (!param) {
+		return null;
+	}
+
+	if (param.signatures && param.signatures.length > 0) {
+		return (
+			<li className="tsd-parameter">
+				<h5>
+					{param.flags?.isRest && <span className="tsd-signature-symbol">...</span>}
+					{param.name}
+					<span className="tsd-signature-symbol">{param.flags?.isOptional && '?'}: </span>
+					function
+				</h5>
+
+				<MemberSignatures sigs={param.signatures} />
+			</li>
+		);
+	}
+
+	if (param.type) {
+		return (
+			<li className="tsd-parameter">
+				<h5>
+					<Flags flags={param.flags} />
+					{param.flags?.isRest && <span className="tsd-signature-symbol">...</span>}
+					{param.name}
+					<span className="tsd-signature-symbol">{param.flags?.isOptional && '?'}: </span>
+					<Type type={param.type} />
+				</h5>
+
+				<Comment comment={param.comment} />
+
+				{param.children?.map((child) => (
+					<Parameter key={child.id} param={child} />
+				))}
+
+				<Parameter param={param.type.declaration} />
+			</li>
+		);
+	}
+
+	const getter = param.getSignature;
+	const setter = param.setSignature;
+
+	return (
+		<>
+			{getter && (
+				<li className="tsd-parameter">
+					<h5>
+						<Flags flags={getter.flags} />
+						<span className="tsd-signature-symbol">get </span>
+						{getter.name}
+						<span className="tsd-signature-symbol">(): </span>
+						<Type type={getter.type} />
+					</h5>
+
+					<Comment comment={getter.comment} />
+				</li>
+			)}
+
+			{setter && (
+				<li className="tsd-parameter">
+					<h5>
+						<Flags flags={setter.flags} />
+						<span className="tsd-signature-symbol">set </span>
+						{setter.name}
+						<span className="tsd-signature-symbol">(</span>
+						{setter.parameters?.map((p, i) => (
+							<span key={p.id}>
+								{i > 0 && ', '}
+								{p.name}
+								<span className="tsd-signature-symbol">: </span>
+								{p.type ? <Type type={p.type} /> : 'any'}
+							</span>
+						))}
+						<span className="tsd-signature-symbol">): </span>
+						<Type type={setter.type} />
+					</h5>
+
+					<Comment comment={setter.comment} />
+				</li>
+			)}
+		</>
+	);
+}
+
+export function Parameter({ param }: ParameterProps) {
+	const minimal = useMinimalLayout();
+
+	if (!param || minimal) {
+		return null;
+	}
+
+	const hasSomeBody = param.signatures?.some((sig) => hasSigBody(sig, minimal, true));
+
+	return (
+		<ul className="tsd-parameters">
+			{param.signatures && param.signatures.length > 0 && (
+				<li className="tsd-parameter-signature">
+					<ul className="tsd-signatures">
+						{param.signatures.map((sig) => (
+							<li key={sig.id} className="tsd-signature tsd-kind-icon">
+								<Icon reflection={sig} />
+								<MemberSignatureTitle hideName sig={sig} />
+							</li>
+						))}
+					</ul>
+
+					{hasSomeBody && (
+						<ul className="tsd-descriptions">
+							{param.signatures.map((sig) => (
+								<li key={sig.id} className="tsd-description">
+									<MemberSignatureBody hideSources sig={sig} />
+								</li>
+							))}
+						</ul>
+					)}
+				</li>
+			)}
+
+			{param.indexSignature && (
+				<li className="tsd-parameter-index-signature">
+					<h5>
+						<span className="tsd-signature-symbol">[</span>
+						{param.indexSignature.parameters?.map((p) => (
+							<span key={p.id}>
+								{p.flags?.isRest && <span className="tsd-signature-symbol">...</span>}
+								{p.name} <Type type={p.type} />
+							</span>
+						))}
+						<span className="tsd-signature-symbol">]: </span>
+						<Type type={param.indexSignature.type} />
+					</h5>
+
+					<Comment comment={param.indexSignature.comment} />
+
+					<Parameter param={param.indexSignature.declaration} />
+				</li>
+			)}
+
+			{param.children?.map((child) => (
+				<ParameterChild key={child.id} param={child} />
+			))}
+		</ul>
+	);
+}

package/src/components/README.md

@@ -0,0 +1,9 @@
+The `ApiPage` and `ApiItem` components are based on Docusaurus' built-in `DocPage` and `DocItem`. We
+wanted to reuse as much code as possible, so we try and extend or duplicate when necessary. Please
+reference the classic them when making changes:
+https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-classic/src/theme
+
+The remaining components are React based copies of the TypeDoc handlebar templates. We wanted the UI
+to feel as similar as possible, so we align our markup as closely as possible to TypeDoc. Please
+reference the default theme when making changes:
+https://github.com/TypeStrong/typedoc-default-themes/tree/master/src/default

package/src/components/Reflection.tsx

@@ -0,0 +1,136 @@
+// https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/templates/reflection.hbs
+
+import React, { useMemo } from 'react';
+import type { JSONOutput } from 'typedoc';
+import { createHierarchy } from '../utils/hierarchy';
+import { Comment, hasComment } from './Comment';
+import { CommentBadges, isCommentWithModifiers } from './CommentBadges';
+import { Hierarchy } from './Hierarchy';
+import { Icon } from './Icon';
+import { Index } from './Index';
+import { Members } from './Members';
+import { MemberSignatures } from './MemberSignatures';
+import { Parameter } from './Parameter';
+import { Type } from './Type';
+import { TypeParameters } from './TypeParameters';
+
+export interface ReflectionProps {
+	reflection:
+		| JSONOutput.DeclarationReflection
+		| JSONOutput.Reflection
+		| JSONOutput.SignatureReflection;
+}
+// eslint-disable-next-line complexity
+export function Reflection({ reflection }: ReflectionProps) {
+	const hierarchy = useMemo(() => createHierarchy(reflection), [reflection]);
+
+	return (
+		<>
+			{isCommentWithModifiers(reflection.comment) && <CommentBadges comment={reflection.comment} />}
+			{hasComment(reflection.comment) && <Comment root comment={reflection.comment} />}
+
+			{'typeParameter' in reflection &&
+				reflection.typeParameter &&
+				reflection.typeParameter.length > 0 &&
+				// Class
+				reflection.kind !== 128 && (
+					<section className="tsd-panel">
+						<h3 className="tsd-panel-header">Type parameters</h3>
+
+						<div className="tsd-panel-content">
+							<TypeParameters params={reflection.typeParameter} />
+						</div>
+					</section>
+				)}
+
+			{(('extendedBy' in reflection && reflection.extendedBy && reflection.extendedBy.length > 0) ||
+				('extendedTypes' in reflection &&
+					reflection.extendedTypes &&
+					reflection.extendedTypes.length > 0)) && (
+				<section className="tsd-panel">
+					<h3 className="tsd-panel-header">Hierarchy</h3>
+
+					<div className="tsd-panel-content">
+						<Hierarchy tree={hierarchy} />
+					</div>
+				</section>
+			)}
+
+			{'implementedTypes' in reflection &&
+				reflection.implementedTypes &&
+				reflection.implementedTypes.length > 0 && (
+					<section className="tsd-panel">
+						<h3 className="tsd-panel-header">Implements</h3>
+
+						<div className="tsd-panel-content">
+							<ul className="tsd-hierarchy">
+								{reflection.implementedTypes.map((type, i) => (
+									<li key={type.type + String(i)}>
+										<Type type={type} />
+									</li>
+								))}
+							</ul>
+						</div>
+					</section>
+				)}
+
+			{'implementedBy' in reflection &&
+				reflection.implementedBy &&
+				reflection.implementedBy.length > 0 && (
+					<section className="tsd-panel">
+						<h3 className="tsd-panel-header">Implemented by</h3>
+
+						<div className="tsd-panel-content">
+							<ul className="tsd-hierarchy">
+								{reflection.implementedBy.map((type, i) => (
+									<li key={type.name + String(i)}>
+										<Type type={type} />
+									</li>
+								))}
+							</ul>
+						</div>
+					</section>
+				)}
+
+			{'signatures' in reflection && reflection.signatures && reflection.signatures.length > 0 && (
+				<section className="tsd-panel">
+					<h3 className="tsd-panel-header tsd-before-signature">Callable</h3>
+
+					<div className="tsd-panel-content">
+						<MemberSignatures sigs={reflection.signatures} />
+					</div>
+				</section>
+			)}
+
+			{'indexSignature' in reflection && reflection.indexSignature && (
+				<section className="tsd-panel">
+					<h3 className="tsd-panel-header tsd-before-signature">Indexable</h3>
+
+					<div className="tsd-panel-content">
+						<div className="tsd-signature tsd-kind-icon">
+							<Icon reflection={reflection.indexSignature} />
+							<span className="tsd-signature-symbol">[</span>
+							{reflection.indexSignature.parameters?.map((param) => (
+								<span key={param.id}>
+									{param.name}
+									{': '}
+									<Type type={param.type} />
+								</span>
+							))}
+							<span className="tsd-signature-symbol">]: </span>
+							<Type type={reflection.indexSignature.type} />
+						</div>
+
+						<Comment comment={reflection.indexSignature.comment} />
+
+						<Parameter param={reflection.indexSignature.type?.declaration} />
+					</div>
+				</section>
+			)}
+
+			<Index reflection={reflection} />
+
+			<Members reflection={reflection} />
+		</>
+	);
+}

package/src/components/SourceLink.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { JSONOutput } from 'typedoc';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useGitRefName } from '../hooks/useGitRefName';
+
+function replaceWithSrc(url: string): string {
+	// Always link the source file
+	return url.replace(/\/(dts|dist|lib|build|es|esm|cjs|mjs)\//, '/src/');
+}
+
+export interface SourceLinkProps {
+	sources?: JSONOutput.SourceReference[];
+}
+
+export function SourceLink({ sources = [] }: SourceLinkProps) {
+	const { siteConfig } = useDocusaurusContext();
+	const gitRefName = useGitRefName();
+
+	if (sources.length === 0) {
+		return null;
+	}
+
+	return (
+		<>
+			{sources.map((source) => (
+				<a
+					key={source.fileName}
+					className="tsd-anchor"
+					href={
+						// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+						source.url ||
+						`https://${siteConfig.githubHost}${
+							siteConfig.githubPort ? `:${siteConfig.githubPort}` : ''
+						}/${siteConfig.organizationName}/${
+							siteConfig.projectName
+						}/blob/${gitRefName}/${replaceWithSrc(source.fileName)}#L${source.line}`
+					}
+					rel="noreferrer"
+					target="_blank"
+				>
+					<i className="codicon codicon-file-code" />
+				</a>
+			))}
+		</>
+	);
+}