Optimize HTML output

See #2287

Author: Gerrit0

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Unreleased
 
+### Features
+
+-   TypeDoc's `--pretty` option now also controls whether generated HTML contains line breaks, #2287.
+-   Optimized icon caching to reduce file size in generated HTML documentation, #2287.
+
 ## v0.24.7 (2023-05-08)
 
 ### Features

src/lib/output/renderer.ts

@@ -201,6 +201,10 @@ export class Renderer extends ChildableComponent<
     @BindOption("darkHighlightTheme")
     darkTheme!: ShikiTheme;
 
+    /** @internal */
+    @BindOption("pretty")
+    pretty!: boolean;
+
     renderStartTime = -1;
 
     /**
@@ -227,6 +231,8 @@ export class Renderer extends ChildableComponent<
         project: ProjectReflection,
         outputDirectory: string
     ): Promise<void> {
+        setRenderSettings({ pretty: this.pretty });
+
         const momento = this.hooks.saveMomento();
         this.renderStartTime = Date.now();
         await loadHighlighter(this.lightTheme, this.darkTheme);
@@ -399,3 +405,4 @@ export class Renderer extends ChildableComponent<
 // HACK: THIS HAS TO STAY DOWN HERE
 // if you try to move it up to the top of the file, then you'll run into stuff being used before it has been defined.
 import "./plugins";
+import { setRenderSettings } from "../utils/jsx";

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

@@ -23,21 +23,23 @@ function cachedPart(key: string, svgPart: JSX.Element) {
 }
 
 const kindIcon = (kind: ReflectionKind, letterPath: JSX.Element, color: string, circular = false) => (
-    <svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+    <svg class="tsd-kind-icon" viewBox="0 0 24 24">
         {cachedPart(
-            `${kind}-path`,
-            <rect
-                fill="var(--color-icon-background)"
-                stroke={color}
-                stroke-width="1.5"
-                x="1"
-                y="1"
-                width="22"
-                height="22"
-                rx={circular ? "12" : "6"}
-            />
+            `${kind}`,
+            <g>
+                <rect
+                    fill="var(--color-icon-background)"
+                    stroke={color}
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx={circular ? "12" : "6"}
+                />
+                {letterPath}
+            </g>
         )}
-        {cachedPart(`${kind}-text`, letterPath)}
     </svg>
 );
 
@@ -191,10 +193,13 @@ export const icons: Record<
         ),
     chevronDown: () => (
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-            <path
-                d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
-                fill="var(--color-text)"
-            />
+            {cachedPart(
+                "chevronDown",
+                <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                />
+            )}
         </svg>
     ),
     chevronSmall: () => (
@@ -234,18 +239,15 @@ export const icons: Record<
         </svg>
     ),
     anchor: () => (
-        <svg
-            class="icon icon-tabler icon-tabler-link"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-            {cachedPart("anchor-a", <path stroke="none" d="M0 0h24v24H0z" fill="none" />)}
-            {cachedPart("anchor-b", <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />)}
-            {cachedPart("anchor-c", <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />)}
+        <svg viewBox="0 0 24 24">
+            {cachedPart(
+                "anchor",
+                <g stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                    <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                </g>
+            )}
         </svg>
     ),
 };

src/lib/utils/jsx.ts

@@ -101,6 +101,11 @@ export function createElement(
     return { tag, props, children };
 }
 
+let renderPretty = true;
+export function setRenderSettings(options: { pretty: boolean }) {
+    renderPretty = options.pretty;
+}
+
 export function renderElement(element: JsxElement | null | undefined): string {
     if (!element) {
         return "";
@@ -118,7 +123,7 @@ export function renderElement(element: JsxElement | null | undefined): string {
     const html: string[] = [];
 
     if (tag !== Fragment) {
-        if (blockElements.has(tag)) {
+        if (blockElements.has(tag) && renderPretty) {
             html.push("\n");
         }
         html.push("<", tag);