Implemented client side hierarchy & expandable hierarchy section, #2744

example/src/classes/Customer.ts

@@ -79,6 +79,8 @@ export abstract class Customer {
 
 /**
  * A class that extends {@link Customer | `Customer`}.
+ *
+ * Notice how TypeDoc shows the inheritance hierarchy for our class.
  */
 export class DeliveryCustomer extends Customer {
     /** A property defined on the subclass. */
@@ -118,3 +120,31 @@ export class DeliveryCustomer extends Customer {
         return typeof this.preferredCourierId === "undefined";
     }
 }
+
+/**
+ * A class that extends {@link Customer | `Customer`}.
+ *
+ * Notice how TypeDoc shows the inheritance hierarchy for our class.
+ */
+export class WalkInCustomer extends Customer {
+    /** A property defined on the subclass. */
+    trustedCustomer?: boolean;
+
+    /** A private property defined on the subclass. */
+    private _ordersPlacedCount: number = 0;
+
+    /**
+     * An example of overriding a public method.
+     */
+    onOrderPlaced(): void {
+        super.onOrderPlaced();
+
+        this._ordersPlacedCount++;
+
+        if (
+            this._ordersPlacedCount > 10 &&
+            typeof this.trustedCustomer === "undefined"
+        )
+            this.trustedCustomer = true;
+    }
+}

src/lib/internationalization/locales/jp.cts

@@ -458,7 +458,6 @@ export = buildIncompleteTranslation({
     theme_type_declaration: "型宣言",
     theme_index: "インデックス",
     theme_hierarchy: "階層",
-    theme_hierarchy_view_full: "完全な階層を表示",
     theme_implemented_by: "実装者",
     theme_defined_in: "定義",
     theme_implementation_of: "の実装",
@@ -487,6 +486,5 @@ export = buildIncompleteTranslation({
     theme_copied: "コピー完了！",
     theme_normally_hidden:
         "このメンバーは、フィルター設定のため、通常は非表示になっています。",
-    theme_class_hierarchy_title: "クラス継承図",
     theme_loading: "読み込み中...",
 });

src/lib/internationalization/locales/ko.cts

@@ -314,7 +314,6 @@ export = buildIncompleteTranslation({
     theme_type_declaration: "타입 선언",
     theme_index: "둘러보기",
     theme_hierarchy: "계층",
-    theme_hierarchy_view_full: "전체 보기",
     theme_implemented_by: "구현",
     theme_defined_in: "정의 위치:",
     theme_implementation_of: "구현하는 타입:",

src/lib/internationalization/locales/zh.cts

@@ -426,7 +426,6 @@ export = buildIncompleteTranslation({
     theme_type_declaration: "类型声明",
     theme_index: "索引",
     theme_hierarchy: "层级",
-    theme_hierarchy_view_full: "查看完整内容",
     theme_implemented_by: "实现于",
     theme_defined_in: "定义于",
     theme_implementation_of: "实现了",
@@ -451,7 +450,6 @@ export = buildIncompleteTranslation({
     theme_copy: "复制",
     theme_copied: "已复制！",
     theme_normally_hidden: "由于您的过滤器设置，该成员已被隐藏。",
-    theme_class_hierarchy_title: "类继承图表",
     theme_loading: "加载中……",
 
     tag_defaultValue: "默认值",

src/lib/internationalization/translatable.ts

@@ -301,6 +301,8 @@ export const translatable = {
         "Branches of the navigation tree which should not be expanded",
     help_navigation: "Determines how the navigation sidebar is organized",
     help_headings: "Determines which optional headings are rendered",
+    help_includeHierarchySummary:
+        "If set, a reflections hierarchy summary will be rendered to a summary page. Defaults to `true`",
     help_visibilityFilters:
         "Specify the default visibility for builtin filters and additional filters according to modifier tags",
     help_searchCategoryBoosts:
@@ -466,7 +468,10 @@ export const translatable = {
     theme_type_declaration: "Type declaration",
     theme_index: "Index",
     theme_hierarchy: "Hierarchy",
-    theme_hierarchy_view_full: "view full",
+    theme_hierarchy_summary: "Hierarchy Summary",
+    theme_hierarchy_view_summary: "View Summary",
+    theme_hierarchy_expand: "Expand",
+    theme_hierarchy_collapse: "Collapse",
     theme_implemented_by: "Implemented by",
     theme_defined_in: "Defined in",
     theme_implementation_of: "Implementation of",
@@ -476,7 +481,6 @@ export const translatable = {
     theme_re_exports: "Re-exports",
     theme_renames_and_re_exports: "Renames and re-exports",
     theme_generated_using_typedoc: "Generated using TypeDoc", // If this includes "TypeDoc", theme will insert a link at that location.
-    theme_class_hierarchy_title: "Class Hierarchy",
     // Search
     theme_preparing_search_index: "Preparing search index...",
     theme_search_index_not_available: "The search index is not available",

src/lib/output/plugins/HierarchyPlugin.ts

@@ -0,0 +1,111 @@
+import * as Path from "path";
+import { Component, RendererComponent } from "../components";
+import { PageEvent, RendererEvent } from "../events";
+import { JSX, writeFile } from "../../utils";
+import { DefaultTheme } from "../themes/default/DefaultTheme";
+import { gzip } from "zlib";
+import { promisify } from "util";
+import {
+    DeclarationReflection,
+    ReferenceType,
+    ReflectionKind,
+} from "../../models";
+
+const gzipP = promisify(gzip);
+
+export interface HierarchyElement {
+    html: string;
+    text: string;
+    path: string;
+    parents?: ({ path: string } | { html: string; text: string })[];
+    children?: ({ path: string } | { html: string; text: string })[];
+}
+
+@Component({ name: "hierarchy" })
+export class HierarchyPlugin extends RendererComponent {
+    override initialize() {
+        this.owner.on(RendererEvent.BEGIN, this.onRendererBegin.bind(this));
+    }
+
+    private onRendererBegin(_event: RendererEvent) {
+        if (!(this.owner.theme instanceof DefaultTheme)) {
+            return;
+        }
+
+        this.owner.preRenderAsyncJobs.push((event) =>
+            this.buildHierarchy(event),
+        );
+    }
+
+    private async buildHierarchy(event: RendererEvent) {
+        const theme = this.owner.theme as DefaultTheme;
+
+        const context = theme.getRenderContext(new PageEvent(event.project));
+
+        const hierarchy = (
+            event.project.getReflectionsByKind(
+                ReflectionKind.ClassOrInterface,
+            ) as DeclarationReflection[]
+        )
+            .filter(
+                (reflection) =>
+                    reflection.extendedTypes?.length ||
+                    reflection.extendedBy?.length,
+            )
+            .map((reflection) => ({
+                html: JSX.renderElement(
+                    context.type(
+                        ReferenceType.createResolvedReference(
+                            reflection.name,
+                            reflection,
+                            reflection.project,
+                        ),
+                    ),
+                ),
+                // Full name should be safe here, since this list only includes classes/interfaces.
+                text: reflection.getFullName(),
+                path: reflection.url!,
+                parents: reflection.extendedTypes?.map((type) =>
+                    !(type instanceof ReferenceType) ||
+                    !(type.reflection instanceof DeclarationReflection)
+                        ? {
+                              html: JSX.renderElement(context.type(type)),
+                              text: type.toString(),
+                          }
+                        : { path: type.reflection.url! },
+                ),
+                children: reflection.extendedBy?.map((type) =>
+                    !(type instanceof ReferenceType) ||
+                    !(type.reflection instanceof DeclarationReflection)
+                        ? {
+                              html: JSX.renderElement(context.type(type)),
+                              text: type.toString(),
+                          }
+                        : { path: type.reflection.url! },
+                ),
+            }));
+
+        if (!hierarchy.length) return;
+
+        hierarchy.forEach((element) => {
+            if (!element.parents?.length) delete element.parents;
+
+            if (!element.children?.length) delete element.children;
+        });
+
+        const hierarchyJs = Path.join(
+            event.outputDirectory,
+            "assets",
+            "hierarchy.js",
+        );
+
+        const gz = await gzipP(Buffer.from(JSON.stringify(hierarchy)));
+
+        await writeFile(
+            hierarchyJs,
+            `window.hierarchyData = "data:application/octet-stream;base64,${gz.toString(
+                "base64",
+            )}"`,
+        );
+    }
+}

src/lib/output/plugins/index.ts

@@ -3,4 +3,5 @@ export { AssetsPlugin } from "./AssetsPlugin";
 export { IconsPlugin } from "./IconsPlugin";
 export { JavascriptIndexPlugin } from "./JavascriptIndexPlugin";
 export { NavigationPlugin } from "./NavigationPlugin";
+export { HierarchyPlugin } from "./HierarchyPlugin";
 export { SitemapPlugin } from "./SitemapPlugin";

src/lib/output/themes/default/DefaultTheme.tsx

@@ -214,7 +214,7 @@ export class DefaultTheme extends Theme {
             urls.push(new UrlMapping("index.html", project, this.indexTemplate));
         }
 
-        if (getHierarchyRoots(project).length) {
+        if (this.application.options.getValue("includeHierarchySummary") && getHierarchyRoots(project).length) {
             urls.push(new UrlMapping("hierarchy.html", project, this.hierarchyTemplate));
         }
 

src/lib/output/themes/default/assets/bootstrap.ts

@@ -5,6 +5,7 @@ import { Filter } from "./typedoc/components/Filter";
 import { Accordion } from "./typedoc/components/Accordion";
 import { initTheme } from "./typedoc/Theme";
 import { initNav } from "./typedoc/Navigation";
+import { initHierarchy } from "./typedoc/Hierarchy";
 
 registerComponent(Toggle, "a[data-toggle]");
 registerComponent(Accordion, ".tsd-accordion");
@@ -24,3 +25,4 @@ Object.defineProperty(window, "app", { value: app });
 
 initSearch();
 initNav();
+initHierarchy();