Type parameters now follow hideParameterTypesInTitle

Resolves #2226

Author: Gerrit0

CHANGELOG.md

@@ -6,8 +6,10 @@
 
 ### Bug Fixes
 
+-   Type parameter constraints now respect the `--hideParameterTypesInTitle` option, #2226.
 -   Even more contrast fixes, #2248.
 -   Fix semantic highlighting for predicate type's parameter references, #2249.
+-   Fixed inconsistent styling between type parameter lists and parameter lists.
 
 ## v0.24.4 (2023-04-16)
 

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

@@ -7,7 +7,7 @@ export const memberDeclaration = (context: DefaultThemeRenderContext, props: Dec
     <>
         <div class="tsd-signature">
             <span class={getKindClass(props)}>{wbr(props.name)}</span>
-            {renderTypeParametersSignature(props.typeParameters)}
+            {renderTypeParametersSignature(context, props.typeParameters)}
             {props.type && (
                 <>
                     <span class="tsd-signature-symbol">{!!props.flags.isOptional && "?"}:</span>{" "}

src/lib/output/themes/default/partials/member.signature.title.tsx

@@ -50,7 +50,7 @@ export function memberSignatureTitle(
                     )}
                 </>
             )}
-            {renderTypeParametersSignature(props.typeParameters)}
+            {renderTypeParametersSignature(context, props.typeParameters)}
             <span class="tsd-signature-symbol">(</span>
             {join(", ", props.parameters ?? [], renderParam)}
             <span class="tsd-signature-symbol">)</span>

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

@@ -5,9 +5,9 @@ import { JSX } from "../../../../utils";
 export function typeParameters(context: DefaultThemeRenderContext, typeParameters: TypeParameterReflection[]) {
     return (
         <>
-            <section class="tsd-panel tsd-type-parameters">
+            <section class="tsd-panel">
                 <h4>Type Parameters</h4>
-                <ul class="tsd-type-parameters">
+                <ul class="tsd-type-parameter-list">
                     {typeParameters?.map((item) => (
                         <li>
                             <h4>

src/lib/output/themes/lib.tsx

@@ -1,3 +1,4 @@
+import type { DefaultThemeRenderContext } from "..";
 import {
     Comment,
     DeclarationReflection,
@@ -112,23 +113,45 @@ export function hasTypeParameters(
 }
 
 export function renderTypeParametersSignature(
+    context: DefaultThemeRenderContext,
     typeParameters: readonly TypeParameterReflection[] | undefined
 ): JSX.Element {
+    if (!typeParameters || typeParameters.length === 0) return <></>;
+    const hideParamTypes = context.options.getValue("hideParameterTypesInTitle");
+
+    if (hideParamTypes) {
+        return (
+            <>
+                <span class="tsd-signature-symbol">{"<"}</span>
+                {join(<span class="tsd-signature-symbol">{", "}</span>, typeParameters, (item) => (
+                    <>
+                        {item.flags.isConst && "const "}
+                        {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                        <span class="tsd-signature-type tsd-kind-type-parameter">{item.name}</span>
+                    </>
+                ))}
+                <span class="tsd-signature-symbol">{">"}</span>
+            </>
+        );
+    }
+
     return (
         <>
-            {!!typeParameters && typeParameters.length > 0 && (
+            <span class="tsd-signature-symbol">{"<"}</span>
+            {join(<span class="tsd-signature-symbol">{", "}</span>, typeParameters, (item) => (
                 <>
-                    <span class="tsd-signature-symbol">{"<"}</span>
-                    {join(<span class="tsd-signature-symbol">{", "}</span>, typeParameters, (item) => (
+                    {item.flags.isConst && "const "}
+                    {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                    <span class="tsd-signature-type tsd-kind-type-parameter">{item.name}</span>
+                    {!!item.type && (
                         <>
-                            {item.flags.isConst && "const "}
-                            {item.varianceModifier ? `${item.varianceModifier} ` : ""}
-                            <span class="tsd-signature-type tsd-kind-type-parameter">{item.name}</span>
+                            <span class="tsd-signature-symbol"> extends </span>
+                            {context.type(item.type)}
                         </>
-                    ))}
-                    <span class="tsd-signature-symbol">{">"}</span>
+                    )}
                 </>
-            )}
+            ))}
+            <span class="tsd-signature-symbol">{">"}</span>
         </>
     );
 }