fix: improve @since tag rendering (#80)

Author: barjin

playground/js/src/bar.ts

@@ -13,18 +13,21 @@ export interface BarOptions<NameType extends string> {
 	 * The age of the `Bar` instance.
 	 *
 	 * @default 0
+	 * @since Added in 1.2.3
 	 */
 	age: number;
 	/**
 	 * Favourite numbers of the `Bar` instance.
 	 *
 	 * @default [1, 2, Infinity]
+	 * @since Added in 1.2.0
 	 */
 	numbers: number[];
 	/**
 	 * Favourite words of the `Bar` instance.
 	 *
 	 * @default ['foo', 'bar', 'jabberwocky']
+	 * @since Added in 1.1.0
 	 */
 	strings: string[];
 }

playground/js/src/foo.ts

@@ -3,6 +3,12 @@
  */
 export class Foo {
 	private name: string;
+	/**
+	 * This is the description of the Foo class.
+	 *
+	 * @since Added in 1.3.0
+	 */
+	public description: string;
 	/**
 	 * Constructor of the `Foo` class.
 	 */
@@ -21,6 +27,8 @@ export class Foo {
 	/**
 	 * Set the name of the class.
 	 * @param {string} name
+	 *
+	 * @since Added in 1.2.0
 	 */
 	setName(name: string | Foo): void {
 		this.name = typeof name === 'string' ? name : name.getName();

src/components/Comment.tsx

@@ -72,14 +72,6 @@ export function Comment({ comment, root, hideTags = [] }: CommentProps) {
 					))}
 				</dl>
 			)}
-
-			{
-				comment.blockTags?.some((tag) => tag.tag === '@since') && (
-					<div className="tsd-comment-since">
-						<Markdown content={displayPartsToMarkdown(comment.blockTags?.find((tag) => tag.tag === '@since')?.content)} />
-					</div>
-				)
-			}
 		</div>
 	);
 }

src/components/MemberDeclaration.tsx

@@ -3,9 +3,10 @@
 import { useMinimalLayout } from '../hooks/useMinimalLayout';
 import { useRequiredReflection } from '../hooks/useReflection';
 import { escapeMdx } from '../utils/helpers';
-import { Comment, hasComment } from './Comment';
+import { Comment, displayPartsToMarkdown, hasComment } from './Comment';
 import { DefaultValue } from './DefaultValue';
 import { Icon } from './Icon';
+import { Markdown } from './Markdown';
 import { MemberSources } from './MemberSources';
 import { Parameter } from './Parameter';
 import { extractDeclarationFromType, Type } from './Type';
@@ -21,6 +22,7 @@ export function MemberDeclaration({ id }: MemberDeclarationProps) {
 	const minimal = useMinimalLayout();
 	const showTypes = reflection.typeParameters && reflection.typeParameters.length > 0;
 	const showDeclaration = !minimal && extractDeclarationFromType(reflection.type);
+	const showSince = reflection.comment?.blockTags?.some((tag) => tag.tag === '@since');
 
 	return (
 		<>
@@ -61,6 +63,12 @@ export function MemberDeclaration({ id }: MemberDeclarationProps) {
 						<Parameter param={extractDeclarationFromType(reflection.type)} />
 					</div>
 				)}
+
+				{showSince && (
+						<div className="tsd-comment-since">
+						<Markdown content={displayPartsToMarkdown(reflection.comment?.blockTags?.find((tag) => tag.tag === '@since')?.content)} />
+					</div>
+				)}
 			</div>
 		</>
 	);

src/components/MemberSignatureBody.tsx

@@ -7,14 +7,15 @@ import { usePluginData } from '@docusaurus/useGlobalData';
 import { useMinimalLayout } from '../hooks/useMinimalLayout';
 import type { TSDSignatureReflection } from '../types';
 import { ApiDataContext } from './ApiDataContext';
-import { Comment, hasComment } from './Comment';
+import { Comment, displayPartsToMarkdown, hasComment } from './Comment';
 import { CommentBadges, isCommentWithModifiers } from './CommentBadges';
 import { DefaultValue } from './DefaultValue';
 import { Flags } from './Flags';
 import { hasSources, MemberSources } from './MemberSources';
 import { Parameter } from './Parameter';
 import { extractDeclarationFromType, Type } from './Type';
 import { TypeParameters } from './TypeParameters';
+import { Markdown } from './Markdown';
 
 export function hasSigBody(
 	sig: TSDSignatureReflection | undefined,
@@ -62,6 +63,7 @@ export function MemberSignatureBody({ hideSources, sig }: MemberSignatureBodyPro
 	const showTypes = sig.typeParameter && sig.typeParameter.length > 0;
 	const showParams = !minimal && sig.parameters && sig.parameters.length > 0;
 	const showReturn = !minimal && sig.type;
+	const showSince = sig.comment?.blockTags?.some((tag) => tag.tag === '@since');
 
 	const { reflections } = useContext(ApiDataContext);
 	const { isPython } = usePluginData('docusaurus-plugin-typedoc-api') as GlobalData;
@@ -214,6 +216,16 @@ export function MemberSignatureBody({ hideSources, sig }: MemberSignatureBodyPro
 					<Parameter param={extractDeclarationFromType(sig.type)} />
 				</>
 			)}
+
+			{
+				showSince && (
+					<>
+						<div className="tsd-comment-since">
+							<Markdown content={displayPartsToMarkdown(sig.comment.blockTags?.find((tag) => tag.tag === '@since')?.content)} />
+						</div>
+					</>
+				)
+			}
 		</>
 	);
 }

src/components/styles.css

@@ -194,7 +194,9 @@ html[data-theme='light'] .tsd-panel-content {
 .tsd-comment-since {
 	font-style: italic;
 	font-size: 90%;
-	margin-top: 1em;
+	margin-top: 0.5em;
+	padding-top: 0.5em;
+	border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .tsd-comment-root {