feat: better rendering of the @since TypeDoc block tag

playground/js/src/bar.ts

@@ -1,8 +1,12 @@
+/**
+ * @since Added in 1.2.0
+ */
 export interface BarOptions<NameType extends string> {
 	/**
 	 * The name of the `Bar` instance.
 	 *
 	 * @default 'Karl'
+	 * @since Added in 1.0.0
 	 */
 	name: NameType;
 	/**
@@ -27,6 +31,8 @@ export interface BarOptions<NameType extends string> {
 
 /**
  * This is a simple class called `Bar`
+ *
+ * @since Added in 1.1.0-beta.23
  */
 export class Bar {
 	private constructor() {
@@ -38,6 +44,7 @@ export class Bar {
 	 *
 	 * @param {BarOptions} options
 	 * @returns {Bar}
+	 * @since Added in 1.0.0, 1.1.0-beta.23
 	 */
 	static create<TypeParamName extends string = 'Karl'>(options: BarOptions<TypeParamName> = {} as BarOptions<TypeParamName>): Bar {
 		return new Bar();

playground/js/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@docusaurus/tsconfig",
+  "include": [
+    "src/**/*"
+  ],
+  "compilerOptions": {
+    "lib": [
+      "es2021"
+    ],
+    "target": "ES2015",
+    "esModuleInterop": true
+  }
+}

playground/website/docusaurus.config.ts

@@ -48,12 +48,8 @@ const config: Config = {
 		(context, options) =>
 			typedocApiPlugin(context, {
 				...(options as any),
-				projectRoot: '.',
+				projectRoot: '../js',
 				packages: [{ path: '.' }],
-				pythonOptions: {
-					moduleShortcutsPath: __dirname + '/../python/module_shortcuts.json',
-					pythonModulePath: __dirname + '/../python/src',
-				},
                 reexports: [
                     {
                         url: 'https://crawlee.dev/python/api/class/Dataset',

src/components/Comment.tsx

@@ -32,43 +32,26 @@ export function displayPartsToMarkdown(parts: JSONOutput.CommentDisplayPart[]):
 		.join('');
 }
 
-const ADDED_IN_TAG = '@added_in';
-
-function getAddedInVersion(comment: JSONOutput.Comment): string | null {
-	const tag = comment.blockTags?.find((blockTag) => blockTag.tag === ADDED_IN_TAG);
-
-	if (!tag) {
-		return null;
-	}
-
-	return displayPartsToMarkdown(tag.content).trim() || null;
-}
-
 export function Comment({ comment, root, hideTags = [] }: CommentProps) {
 	if (!comment || !hasComment(comment)) {
 		return null;
 	}
 
 	// Hide custom tags.
 	hideTags.push('@reference');
-
-	const addedIn = getAddedInVersion(comment);
+	hideTags.push('@since');
 
 	const blockTags =
 		comment.blockTags?.filter((tag) => {
 			if (hideTags.includes(tag.tag)) {
 				return false;
 			}
 
-			return tag.tag !== '@default' && tag.tag !== ADDED_IN_TAG;
+			return tag.tag !== '@default';
 		}) ?? [];
 
 	return (
 		<div className={`tsd-comment tsd-typography ${root ? 'tsd-comment-root' : ''}`}>
-			{addedIn && (
-				<span className="badge badge--secondary tsd-added-in">Added in: {addedIn}</span>
-			)}
-
 			{!!comment.summary && (
 				<div className="lead">
 					<Markdown content={displayPartsToMarkdown(comment.summary)} />
@@ -89,6 +72,14 @@ 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/styles.css

@@ -191,16 +191,17 @@ html[data-theme='light'] .tsd-panel-content {
 	margin-bottom: 0;
 }
 
+.tsd-comment-since {
+	font-style: italic;
+	font-size: 90%;
+	margin-top: 1em;
+}
+
 .tsd-comment-root {
 	margin-top: 0;
 	margin-bottom: var(--tsd-spacing-vertical-full);
 }
 
-.tsd-added-in {
-	display: inline-block;
-	margin-bottom: var(--tsd-spacing-vertical);
-}
-
 /* SOURCES */
 
 .tsd-sources,

src/plugin/data.ts

@@ -120,8 +120,6 @@ export async function generateJson(
 					'@apilink',
 					'@doclink',
 				] as `@${string}`[],
-				// Recognize the @added_in tag (rendered as a pill) on top of the defaults.
-				blockTags: [...TypeDoc.OptionDefaults.blockTags, '@added_in'] as `@${string}`[],
 				...options.typedocOptions,
 				// Control how config and packages are detected
 				tsconfig,

yarn.lock

@@ -9773,9 +9773,9 @@ __metadata:
   linkType: hard
 
 "lodash@npm:^4.17.20, lodash@npm:^4.17.21":
-  version: 4.18.0
-  resolution: "lodash@npm:4.18.0"
-  checksum: 10/8f7f3c2013026623feb0950c2a3310427a7f3a978daedac5b9b2fb52044bb2fe38cb31e08484017f20c2297199a1ddce5c7accf8ebd108956876ce9162dedfff
+  version: 4.18.1
+  resolution: "lodash@npm:4.18.1"
+  checksum: 10/306fea53dfd39dad1f03d45ba654a2405aebd35797b673077f401edb7df2543623dc44b9effbb98f69b32152295fff725a4cec99c684098947430600c6af0c3f
   languageName: node
   linkType: hard