Make it possible to link to a signature

Resolves #1326.

Author: Gerrit0

.vscode/settings.json

@@ -10,5 +10,6 @@
     "prettier.configPath": ".config/.prettierrc.json",
     "prettier.ignorePath": ".config/.prettierignore",
     "eslint.workingDirectories": [".", "./example"],
-    "mochaExplorer.configFile": ".config/mocha.test-explorer.json"
+    "mochaExplorer.configFile": ".config/mocha.test-explorer.json",
+    "cSpell.words": ["tsbuildinfo"]
 }

CHANGELOG.md

@@ -39,6 +39,7 @@ These TODOs will be resolved before a full release. ([GitHub project](https://gi
 -   TypeDoc will now render members marked with `@deprecated` with a line through their name, #1381.
 -   TypeDoc will now warn if part of a comment will be overwritten due to use of `@inheritDoc` instead of silently dropping part of the comment.
 -   Added support for inline `@inheritDoc` tags, #1480.
+-   It is now possible to link directly to a specific overload, #1326.
 
 ### Bug Fixes
 

src/lib/models/comments/index.ts

@@ -1,2 +1,2 @@
 export { Comment, CommentTag } from "./comment";
-export type { CommentDisplayPart } from "./comment";
+export type { CommentDisplayPart, InlineTagDisplayPart } from "./comment";

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

@@ -7,6 +7,7 @@ import {
     ProjectReflection,
     ContainerReflection,
     DeclarationReflection,
+    SignatureReflection,
 } from "../../../models";
 import { RenderTemplate, UrlMapping } from "../../models/UrlMapping";
 import { PageEvent, RendererEvent } from "../../events";
@@ -211,9 +212,14 @@ export class DefaultTheme extends Theme {
                 reflection.hasOwnDocument = true;
             }
 
-            for (const child of reflection.children || []) {
-                this.buildUrls(child, urls);
-            }
+            reflection.traverse((child) => {
+                if (child instanceof DeclarationReflection) {
+                    this.buildUrls(child, urls);
+                } else {
+                    DefaultTheme.applyAnchorUrl(child, reflection);
+                }
+                return true;
+            });
         } else if (reflection.parent) {
             DefaultTheme.applyAnchorUrl(reflection, reflection.parent);
         }
@@ -233,6 +239,10 @@ export class DefaultTheme extends Theme {
      * @param container   The nearest reflection having an own document.
      */
     static applyAnchorUrl(reflection: Reflection, container: Reflection) {
+        if (!(reflection instanceof DeclarationReflection) && !(reflection instanceof SignatureReflection)) {
+            return;
+        }
+
         if (!reflection.url || !DefaultTheme.URL_PREFIX.test(reflection.url)) {
             const anchor = DefaultTheme.getUrl(reflection, container, ".");
 
@@ -242,9 +252,7 @@ export class DefaultTheme extends Theme {
         }
 
         reflection.traverse((child) => {
-            if (child instanceof DeclarationReflection) {
-                DefaultTheme.applyAnchorUrl(child, container);
-            }
+            DefaultTheme.applyAnchorUrl(child, container);
             return true;
         });
     }

src/lib/output/themes/default/assets/typedoc/components/Signature.ts

@@ -31,26 +31,24 @@ class SignatureGroup {
      *
      * @param className  The class name to add.
      */
-    addClass(className: string): SignatureGroup {
+    addClass(className: string) {
         this.signature.classList.add(className);
         this.description.classList.add(className);
-        return this;
     }
 
     /**
      * Remove the given class from all elements of the group.
      *
      * @param className  The class name to remove.
      */
-    removeClass(className: string): SignatureGroup {
+    removeClass(className: string) {
         this.signature.classList.remove(className);
         this.description.classList.remove(className);
-        return this;
     }
 }
 
 /**
- * Controls the tab like behaviour of methods and functions with multiple signatures.
+ * Controls the tab like behavior of methods and functions with multiple signatures.
  */
 export class Signature extends Component {
     /**
@@ -89,7 +87,7 @@ export class Signature extends Component {
                 );
             });
             this.container.classList.add("active");
-            this.setIndex(0);
+            this.setIndex(this.inferIndexFromHash());
         }
     }
 
@@ -107,9 +105,17 @@ export class Signature extends Component {
         if (this.index > -1) {
             const from = this.groups[this.index];
 
-            from.removeClass("current").addClass("fade-out");
+            from.removeClass("current");
+            from.addClass("fade-out");
             to.addClass("current");
             to.addClass("fade-in");
+
+            if (to.signature.id) {
+                const target = new URL(location.href);
+                target.hash = to.signature.id;
+                history.replaceState({}, "", target);
+            }
+
             Viewport.instance.triggerResize();
 
             setTimeout(() => {
@@ -154,4 +160,10 @@ export class Signature extends Component {
             }
         });
     }
+
+    private inferIndexFromHash() {
+        const hash = location.hash.substring(1);
+        const index = this.groups.findIndex((s) => s.signature.id === hash);
+        return Math.max(0, index);
+    }
 }

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

@@ -6,15 +6,15 @@ export const memberGetterSetter = (context: DefaultThemeRenderContext, props: De
     <>
         <ul class={"tsd-signatures " + props.cssClasses}>
             {!!props.getSignature && (
-                <li class="tsd-signature">
+                <li class="tsd-signature" id={props.getSignature.anchor}>
                     <span class="tsd-signature-symbol">get</span> {props.name}
                     {context.memberSignatureTitle(props.getSignature, {
                         hideName: true,
                     })}
                 </li>
             )}
             {!!props.setSignature && (
-                <li class="tsd-signature">
+                <li class="tsd-signature" id={props.setSignature.anchor}>
                     <span class="tsd-signature-symbol">set</span> {props.name}
                     {context.memberSignatureTitle(props.setSignature, {
                         hideName: true,

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

@@ -6,7 +6,9 @@ export const memberSignatures = (context: DefaultThemeRenderContext, props: Decl
     <>
         <ul class={"tsd-signatures " + props.cssClasses}>
             {props.signatures?.map((item) => (
-                <li class="tsd-signature">{context.memberSignatureTitle(item)}</li>
+                <li class="tsd-signature" id={item.anchor}>
+                    {context.memberSignatureTitle(item)}
+                </li>
             ))}
         </ul>
 

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

@@ -10,7 +10,7 @@ export const parameter = (context: DefaultThemeRenderContext, props: Declaration
                 <li class="tsd-parameter-signature">
                     <ul class={"tsd-signatures " + props.cssClasses}>
                         {props.signatures.map((item) => (
-                            <li class="tsd-signature">
+                            <li class="tsd-signature" id={item.anchor}>
                                 {context.memberSignatureTitle(item, {
                                     hideName: true,
                                 })}

static/style.css

@@ -137,7 +137,6 @@ h4,
 h5,
 h6 {
     line-height: 1.2;
-
 }
 
 h1 {

tsconfig.json

@@ -53,8 +53,7 @@
         "src/test/module",
         "src/test/packages",
         "src/test/slow/entry-points",
-        "src/test/renderer/testProject",
-        "src/codegen"
+        "src/test/renderer/testProject"
     ],
     // We use ts-node to support mocha runner directly on files
     "ts-node": {