Move depth to type.tsx, fix some bugs

Closes #1793

Author: Gerrit0

CHANGELOG.md

@@ -3,12 +3,17 @@
 ### Features
 
 -   Added support for specifying the tsconfig.json file in packages mode with `{ "typedoc": { "tsconfig": "tsconfig.lib.json" }}` in package.json, #2061.
+-   Object types will now be pretty printed, #1793.
 -   Added support for specifying the base file url for links to source code, #2068.
 
 ### Bug Fixes
 
 -   Private parameter properties will no longer be ignored, #2064.
 
+### Thanks!
+
+-   @captainTorch
+
 ## v0.23.15 (2022-09-18)
 
 ### Features

src/lib/output/renderer.ts

@@ -25,6 +25,7 @@ import { Reflection } from "../models";
 import type { JsxElement } from "../utils/jsx.elements";
 import type { DefaultThemeRenderContext } from "./themes/default/DefaultThemeRenderContext";
 import { clearSeenIconCache } from "./themes/default/partials/icon";
+import { validateStateIsClean } from "./themes/default/partials/type";
 
 /**
  * Describes the hooks available to inject output in the default theme.
@@ -241,6 +242,7 @@ export class Renderer extends ChildableComponent<
             output.urls.forEach((mapping: UrlMapping) => {
                 clearSeenIconCache();
                 this.renderDocument(output.createPageEvent(mapping));
+                validateStateIsClean(mapping.url);
             });
 
             this.trigger(RendererEvent.END, output);

src/lib/output/themes/default/DefaultThemeRenderContext.ts

@@ -46,26 +46,13 @@ function bind<F, L extends any[], R>(fn: (f: F, ...a: L) => R, first: F) {
 
 export class DefaultThemeRenderContext {
     options: Options;
-    private currentDepth = 0;
 
     constructor(private theme: DefaultTheme, options: Options) {
         this.options = options;
     }
 
     icons = icons;
 
-    getCurrentDepth(): number {
-        return this.currentDepth;
-    }
-
-    incrementCurrentDepth(): void {
-        this.currentDepth++;
-    }
-
-    decrementCurrentDepth(): void {
-        this.currentDepth--;
-    }
-
     hook = (name: keyof RendererHooks) =>
         this.theme.owner.hooks.emit(name, this);
 

src/lib/output/themes/default/partials/type.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../../../models";
 import { JSX } from "../../../../utils";
 import { join, stringify } from "../../lib";
+import { ok } from "assert";
 
 const EXPORTABLE: ReflectionKind =
     ReflectionKind.Class |
@@ -67,11 +68,16 @@ function renderUniquePath(context: DefaultThemeRenderContext, reflection: Reflec
         </a>
     ));
 }
-function includeIndentation(context: DefaultThemeRenderContext): JSX.Element {
-    return context.getCurrentDepth() > 0 ? (
-        <span>{new Array(context.getCurrentDepth() * 4).fill("\u00A0").join("")}</span>
-    ) : (
-        <></>
+
+let indentationDepth = 0;
+function includeIndentation(): JSX.Element {
+    return indentationDepth > 0 ? <span>{"\u00A0".repeat(indentationDepth * 4)}</span> : <></>;
+}
+
+export function validateStateIsClean(page: string) {
+    ok(
+        indentationDepth === 0,
+        `Rendering ${page}: Indentation depth increment/decrement not matched: ${indentationDepth}`
     );
 }
 
@@ -287,7 +293,7 @@ const typeRenderers: {
         const members: JSX.Element[] = [];
         const children: DeclarationReflection[] = type.declaration.children || [];
 
-        if (children.length) context.incrementCurrentDepth();
+        indentationDepth++;
 
         for (const item of children) {
             if (item.getSignature && item.setSignature) {
@@ -353,6 +359,8 @@ const typeRenderers: {
         }
 
         if (!members.length && type.declaration.signatures?.length === 1) {
+            indentationDepth--;
+
             return (
                 <>
                     <span class="tsd-signature-symbol">(</span>
@@ -371,27 +379,27 @@ const typeRenderers: {
 
         if (members.length) {
             const membersWithSeparators = members.flatMap((m) => [
-                includeIndentation(context),
+                includeIndentation(),
                 m,
                 <span class="tsd-signature-symbol">; </span>,
                 <br></br>,
             ]);
             membersWithSeparators.pop();
 
-            context.decrementCurrentDepth();
-
+            indentationDepth--;
             return (
                 <>
                     <span class="tsd-signature-symbol">{"{"} </span>
                     <br></br>
                     {membersWithSeparators}
                     <br></br>
-                    {includeIndentation(context)}
+                    {includeIndentation()}
                     <span class="tsd-signature-symbol">{"}"}</span>
                 </>
             );
         }
 
+        indentationDepth--;
         return <span class="tsd-signature-symbol">{"{}"}</span>;
     },
     rest(context, type) {