Add question mark when rendering optional property name

Resolves #2023

Author: Gerrit0

.config/typedoc.json

@@ -10,6 +10,7 @@
         "EventHooksMomento",
         "MarkedPlugin"
     ],
+    "sort": ["kind", "instance-first", "required-first", "alphabetical"],
     "entryPoints": ["../src"],
     "entryPointStrategy": "resolve",
     "excludeExternals": true,

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 -   Added support for detecting comments directly before parameters as the parameter comment, #2019.
 -   Added support for using the comment directly before a constructor parameter that declares a property as the property comment, #2019.
+-   Improved schema generation to give better autocomplete for the `sort` option.
+-   Optional properties are now visually distinguished in the index/sidebar by rendering `prop` as `prop?`, #2023.
 
 ### Bug Fixes
 

scripts/generate_options_schema.js

@@ -153,6 +153,10 @@ schema.properties.extends = {
     items: { type: "string" },
 };
 
+delete schema.properties.sort.items.type;
+schema.properties.sort.items.enum =
+    require("../dist/lib/utils/sort").SORT_STRATEGIES;
+
 const output = JSON.stringify(schema, null, "\t");
 
 if (process.argv.length > 2) {

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

@@ -1,4 +1,4 @@
-import { classNames, displayPartsToMarkdown, wbr } from "../../lib";
+import { classNames, displayPartsToMarkdown, renderName } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import { JSX, Raw } from "../../../../utils";
 import { ContainerReflection, DeclarationReflection, ReflectionCategory, ReflectionKind } from "../../../../models";
@@ -18,7 +18,7 @@ function renderCategory({ urlTo, icons }: DefaultThemeRenderContext, item: Refle
                             )}
                         >
                             {icons[item.kind]()}
-                            <span>{item.name ? wbr(item.name) : <em>{wbr(item.kindString!)}</em>}</span>
+                            <span>{renderName(item)}</span>
                         </a>
                         {"\n"}
                     </>

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

@@ -1,7 +1,7 @@
 import { ContainerReflection, DeclarationReflection, Reflection, ReflectionKind } from "../../../../models";
 import { JSX, partition } from "../../../../utils";
 import type { PageEvent } from "../../../events";
-import { camelToTitleCase, classNames, wbr } from "../../lib";
+import { camelToTitleCase, classNames, renderName, wbr } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 
 export function navigation(context: DefaultThemeRenderContext, props: PageEvent<Reflection>) {
@@ -155,7 +155,7 @@ export function secondaryNavigation(context: DefaultThemeRenderContext, props: P
                 >
                     <a href={context.urlTo(child)} class="tsd-index-link">
                         {context.icons[child.kind]()}
-                        {wbr(child.name)}
+                        {renderName(child)}
                     </a>
                 </li>
             );
@@ -183,7 +183,7 @@ export function secondaryNavigation(context: DefaultThemeRenderContext, props: P
                 >
                     <a href={context.urlTo(effectivePageParent)} class="tsd-index-link">
                         {context.icons[effectivePageParent.kind]()}
-                        <span>{wbr(effectivePageParent.name)}</span>
+                        <span>{renderName(effectivePageParent)}</span>
                     </a>
                     {!!pageNavigation.length && <ul>{pageNavigation}</ul>}
                 </li>

src/lib/output/themes/lib.tsx

@@ -157,3 +157,18 @@ export function displayPartsToMarkdown(parts: CommentDisplayPart[], urlTo: Defau
 
     return result.join("");
 }
+
+/**
+ * Renders the reflection name with an additional `?` if optional.
+ */
+export function renderName(refl: Reflection) {
+    if (!refl.name) {
+        return <em>{wbr(refl.kindString!)}</em>;
+    }
+
+    if (refl.flags.isOptional) {
+        return <>{wbr(refl.name)}?</>;
+    }
+
+    return wbr(refl.name);
+}