Merge pull request #2846 from XeroAlpha/feat-signature-filter

Default theme: Tag-based visibilityFilter supports signatures

Author: Gerrit0

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

@@ -99,7 +99,7 @@ export class DefaultTheme extends Theme {
         return this.getRenderContext(pageEvent).defaultLayout(template, pageEvent);
     };
 
-    getReflectionClasses(reflection: DeclarationReflection | DocumentReflection) {
+    getReflectionClasses(reflection: Reflection) {
         const filters = this.application.options.getValue("visibilityFilters") as Record<string, boolean>;
         return getReflectionClasses(reflection, filters);
     }
@@ -502,46 +502,55 @@ export class DefaultTheme extends Theme {
     }
 }
 
-function getReflectionClasses(
-    reflection: DeclarationReflection | DocumentReflection,
-    filters: Record<string, boolean>,
-) {
-    const classes: string[] = [];
+function getReflectionClasses(reflection: Reflection, filters: Record<string, boolean>) {
+    const classes = new Set<string>();
 
     // Filter classes should match up with the settings function in
     // partials/navigation.tsx.
     for (const key of Object.keys(filters)) {
         if (key === "inherited") {
             if (reflection.flags.isInherited) {
-                classes.push("tsd-is-inherited");
+                classes.add("tsd-is-inherited");
             }
         } else if (key === "protected") {
             if (reflection.flags.isProtected) {
-                classes.push("tsd-is-protected");
+                classes.add("tsd-is-protected");
             }
         } else if (key === "private") {
             if (reflection.flags.isPrivate) {
-                classes.push("tsd-is-private");
+                classes.add("tsd-is-private");
             }
         } else if (key === "external") {
             if (reflection.flags.isExternal) {
-                classes.push("tsd-is-external");
+                classes.add("tsd-is-external");
             }
         } else if (key.startsWith("@")) {
             if (key === "@deprecated") {
                 if (reflection.isDeprecated()) {
-                    classes.push(toStyleClass(`tsd-is-${key.substring(1)}`));
+                    classes.add(toStyleClass(`tsd-is-${key.substring(1)}`));
                 }
             } else if (
                 reflection.comment?.hasModifier(key as `@${string}`) ||
                 reflection.comment?.getTag(key as `@${string}`)
             ) {
-                classes.push(toStyleClass(`tsd-is-${key.substring(1)}`));
+                classes.add(toStyleClass(`tsd-is-${key.substring(1)}`));
+            } else if (reflection.isDeclaration()) {
+                const ownSignatures = reflection.getNonIndexSignatures();
+                // Check methods and accessors, find common tags, elevate
+                if (
+                    ownSignatures.length &&
+                    ownSignatures.every(
+                        (refl) =>
+                            refl.comment?.hasModifier(key as `@${string}`) || refl.comment?.getTag(key as `@${string}`),
+                    )
+                ) {
+                    classes.add(toStyleClass(`tsd-is-${key.substring(1)}`));
+                }
             }
         }
     }
 
-    return classes.join(" ");
+    return Array.from(classes).join(" ");
 }
 
 function shouldShowCategories(reflection: Reflection, opts: { includeCategories: boolean; includeGroups: boolean }) {

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

@@ -3,12 +3,7 @@ import type {
     Internationalization,
     TranslationProxy,
 } from "../../../internationalization/internationalization.js";
-import type {
-    DocumentReflection,
-    CommentDisplayPart,
-    DeclarationReflection,
-    Reflection,
-} from "../../../models/index.js";
+import type { CommentDisplayPart, Reflection } from "../../../models/index.js";
 import { type NeverIfInternal, type Options } from "../../../utils/index.js";
 import type { DefaultTheme } from "./DefaultTheme.js";
 import { defaultLayout } from "./layouts/default.js";
@@ -123,7 +118,7 @@ export class DefaultThemeRenderContext {
 
     getNavigation = () => this.theme.getNavigation(this.page.project);
 
-    getReflectionClasses = (refl: DeclarationReflection | DocumentReflection) =>
+    getReflectionClasses = (refl: Reflection) =>
         this.theme.getReflectionClasses(refl);
 
     documentTemplate = bind(documentTemplate, this);

src/lib/output/themes/default/partials/member.getterSetter.tsx

@@ -14,20 +14,20 @@ export const memberGetterSetter = (context: DefaultThemeRenderContext, props: De
             )}
         >
             {!!props.getSignature && (
-                <>
-                    <li class="tsd-signature" id={props.getSignature.anchor}>
+                <li class={context.getReflectionClasses(props.getSignature)}>
+                    <div class="tsd-signature" id={props.getSignature.anchor}>
                         {context.memberSignatureTitle(props.getSignature)}
-                    </li>
-                    <li class="tsd-description">{context.memberSignatureBody(props.getSignature)}</li>
-                </>
+                    </div>
+                    <div class="tsd-description">{context.memberSignatureBody(props.getSignature)}</div>
+                </li>
             )}
             {!!props.setSignature && (
-                <>
-                    <li class="tsd-signature" id={props.setSignature.anchor}>
+                <li class={context.getReflectionClasses(props.setSignature)}>
+                    <div class="tsd-signature" id={props.setSignature.anchor}>
                         {context.memberSignatureTitle(props.setSignature)}
-                    </li>
-                    <li class="tsd-description">{context.memberSignatureBody(props.setSignature)}</li>
-                </>
+                    </div>
+                    <div class="tsd-description">{context.memberSignatureBody(props.setSignature)}</div>
+                </li>
             )}
         </ul>
     </>

src/lib/output/themes/default/partials/member.signatures.tsx

@@ -8,14 +8,14 @@ export const memberSignatures = (context: DefaultThemeRenderContext, props: Decl
     <>
         <ul class={classNames({ "tsd-signatures": true }, context.getReflectionClasses(props))}>
             {props.signatures?.map((item) => (
-                <>
-                    <li class="tsd-signature tsd-anchor-link">
+                <li class={context.getReflectionClasses(item)}>
+                    <div class="tsd-signature tsd-anchor-link">
                         {item.anchor && <a id={item.anchor} class="tsd-anchor"></a>}
                         {context.memberSignatureTitle(item)}
                         {anchorIcon(context, item.anchor)}
-                    </li>
-                    <li class="tsd-description">{context.memberSignatureBody(item)}</li>
-                </>
+                    </div>
+                    <div class="tsd-description">{context.memberSignatureBody(item)}</div>
+                </li>
             ))}
         </ul>
     </>

src/lib/output/themes/default/templates/reflection.tsx

@@ -64,7 +64,7 @@ export function reflectionTemplate(context: DefaultThemeRenderContext, props: Pa
                         <section class="tsd-panel">{context.memberSignatures(props.model)}</section>
                     )}
                     {!!props.model.indexSignatures?.length && (
-                        <section class={classNames({ "tsd-panel": true }, context.getReflectionClasses(props.model))}>
+                        <section class="tsd-panel">
                             <h4 class="tsd-before-signature">{context.i18n.theme_indexable()}</h4>
                             <ul class="tsd-signatures">
                                 {props.model.indexSignatures.map((index) => renderIndexSignature(context, index))}
@@ -82,7 +82,7 @@ export function reflectionTemplate(context: DefaultThemeRenderContext, props: Pa
 
 function renderIndexSignature(context: DefaultThemeRenderContext, index: SignatureReflection) {
     return (
-        <li class="tsd-index-signature">
+        <li class={classNames({ "tsd-index-signature": true }, context.getReflectionClasses(index))}>
             <div class="tsd-signature">
                 {index.flags.isReadonly && <span class="tsd-signature-keyword">readonly </span>}
                 <span class="tsd-signature-symbol">[</span>