Revert "Revert "Replace Generics in PropertySignatureTable (#11527)" (#11549)"

This reverts commit f688036.

Author: phryneas

docs/shared/ApiDoc/EnumDetails.js

@@ -47,7 +47,6 @@ export function EnumDetails({
               mr="1"
               as={Text}
               since
-              link
               id={`${item.displayName.toLowerCase()}-member-${member.displayName.toLowerCase()}`}
             />
             <DocBlock

docs/shared/ApiDoc/Function.js

@@ -10,7 +10,6 @@ import {
   PropertySignatureTable,
   SourceLink,
   Example,
-  getInterfaceReference,
 } from ".";
 import { GridItem } from "@chakra-ui/react";
 export function FunctionSignature({
@@ -22,7 +21,8 @@ export function FunctionSignature({
 }) {
   const MDX = useMDXComponents();
   const getItem = useApiDocContext();
-  const { displayName, parameters, returnType } = getItem(canonicalReference);
+  const { displayName, parameters, returnType, typeParameters } =
+    getItem(canonicalReference);
 
   let paramSignature = parameters
     .map((p) => {
@@ -41,9 +41,16 @@ export function FunctionSignature({
     paramSignature = "\n  " + paramSignature + "\n";
   }
 
+  const genericSignature =
+    typeParameters?.length ?
+      `<${typeParameters.map((p) => p.name).join(", ")}>`
+    : "";
+
   const signature = `${arrow ? "" : "function "}${
     name ? displayName : ""
-  }(${paramSignature})${arrow ? " =>" : ":"} ${returnType}`;
+  }${genericSignature}(${paramSignature})${arrow ? " =>" : ":"} ${
+    returnType.type
+  }`;
 
   return highlight ?
       <MDX.pre language="ts">
@@ -65,24 +72,20 @@ export function ReturnType({ canonicalReference }) {
   const getItem = useApiDocContext();
   const item = getItem(canonicalReference);
 
-  const interfaceReference = getInterfaceReference(
-    item.returnType,
-    item,
-    getItem
-  );
   return (
     <>
       {item.comment?.returns}
       <MDX.pre language="ts">
-        <code className="language-ts">{item.returnType}</code>
+        <code className="language-ts">{item.returnType.type}</code>
       </MDX.pre>
-      {interfaceReference ?
+      {item.returnType.primaryCanonicalReference?.endsWith(":interface") ?
         <details>
           <GridItem as="summary" className="row">
             Show/hide child attributes
           </GridItem>
           <PropertySignatureTable
-            canonicalReference={interfaceReference.canonicalReference}
+            canonicalReference={item.returnType.primaryCanonicalReference}
+            genericNames={item.returnType.primaryGenericArguments}
             idPrefix={`${item.displayName.toLowerCase()}-result`}
           />
         </details>
@@ -153,7 +156,8 @@ export function FunctionDetails({
         </>
       )}
       {(
-        result === false || (result === undefined && item.returnType === "void")
+        result === false ||
+        (result === undefined && item.returnType.type === "void")
       ) ?
         null
       : <>

docs/shared/ApiDoc/ParameterTable.js

@@ -3,12 +3,7 @@ import { useMDXComponents } from "@mdx-js/react";
 import PropTypes from "prop-types";
 import React from "react";
 import { GridItem, Text } from "@chakra-ui/react";
-import {
-  PropertySignatureTable,
-  SectionHeading,
-  getInterfaceReference,
-  useApiDocContext,
-} from ".";
+import { PropertySignatureTable, useApiDocContext } from ".";
 import { ResponsiveGrid } from "./ResponsiveGrid";
 
 export function ParameterTable({ canonicalReference }) {
@@ -25,11 +20,10 @@ export function ParameterTable({ canonicalReference }) {
         <GridItem className="cell heading">Description</GridItem>
 
         {item.parameters.map((parameter) => {
-          const interfaceReference = getInterfaceReference(
-            parameter.type,
-            item,
-            getItem
-          );
+          const interfaceReference =
+            parameter.primaryCanonicalReference?.endsWith(":interface") ?
+              parameter.primaryCanonicalReference
+            : undefined;
           const id = `${item.displayName.toLowerCase()}-parameters-${parameter.name.toLowerCase()}`;
 
           return (
@@ -68,7 +62,8 @@ export function ParameterTable({ canonicalReference }) {
                     Show/hide child attributes
                   </GridItem>
                   <PropertySignatureTable
-                    canonicalReference={interfaceReference.canonicalReference}
+                    canonicalReference={interfaceReference}
+                    genericNames={parameter.primaryGenericArguments}
                     display="child"
                     idPrefix={id}
                   />

docs/shared/ApiDoc/PropertySignatureTable.js

@@ -19,6 +19,7 @@ export function PropertySignatureTable({
   display = "parent",
   customOrder = [],
   idPrefix = "",
+  genericNames,
 }) {
   const MDX = useMDXComponents();
   const getItem = useApiDocContext();
@@ -36,6 +37,29 @@ export function PropertySignatureTable({
     );
   }
 
+  const replaceGenericNames = React.useMemo(() => {
+    if (!genericNames) return (str) => str;
+
+    const replacements = {};
+    item.typeParameters.forEach((p, i) => {
+      if (genericNames[i] === p.name) return;
+      replacements[p.name] = genericNames[i];
+    });
+    if (!Object.values(replacements).length) return (str) => str;
+
+    const genericReplacementRegex = new RegExp(
+      `\\b(${Object.keys(replacements).join("|")})\\b`,
+      "g"
+    );
+    function replace(match) {
+      console.log({ match, replacement: replacements[match] });
+      return replacements[match] || match;
+    }
+    return function replaceGenericNames(str) {
+      return str.replace(genericReplacementRegex, replace);
+    };
+  });
+
   return (
     <>
       {item.childrenIncomplete ?
@@ -55,7 +79,7 @@ export function PropertySignatureTable({
         : null}
         {Object.entries(groupedProperties).map(
           ([groupName, sortedProperties]) => (
-            <>
+            <React.Fragment key={groupName}>
               {groupName ?
                 <GridItem className="row heading">{groupName}</GridItem>
               : null}
@@ -79,7 +103,6 @@ export function PropertySignatureTable({
                         : null
                       }
                       suffix={property.optional ? <em> (optional)</em> : null}
-                      link={!!idPrefix}
                       id={
                         idPrefix ?
                           `${idPrefix}-${property.displayName.toLowerCase()}`
@@ -94,7 +117,7 @@ export function PropertySignatureTable({
                           parameterTypes
                           arrow
                         />
-                      : property.type}
+                      : replaceGenericNames(property.type)}
                     </MDX.inlineCode>
                   </GridItem>
                   <GridItem className="cell" fontSize="md" lineHeight="base">
@@ -109,7 +132,7 @@ export function PropertySignatureTable({
                   </GridItem>
                 </React.Fragment>
               ))}
-            </>
+            </React.Fragment>
           )
         )}
       </Wrapper>
@@ -124,4 +147,5 @@ PropertySignatureTable.propTypes = {
   display: PropTypes.oneOf(["parent", "child"]),
   customOrder: PropTypes.arrayOf(PropTypes.string),
   idPrefix: PropTypes.string,
+  genericNames: PropTypes.arrayOf(PropTypes.string),
 };

docs/shared/ApiDoc/getInterfaceReference.js

@@ -15,5 +15,4 @@ export { ParameterTable } from "./ParameterTable";
 export { PropertyDetails } from "./PropertyDetails";
 export { EnumDetails } from "./EnumDetails";
 export { ManualTuple } from "./Tuple";
-export { getInterfaceReference } from "./getInterfaceReference";
 export { SourceLink } from "./SourceLink";

docs/shared/ApiDoc/index.js

@@ -13,7 +13,7 @@
   npm run docmodel
   cd ../
   rm -rf monodocs
-  git clone https://github.com/apollographql/docs --branch main --single-branch monodocs
+  git clone https://github.com/apollographql/docs --branch pr/parse-ts --single-branch monodocs
   cd monodocs
   npm i
   cp -r ../docs local