Process signatures and have links between types in modules.

Author: nojaf

docs/components/record.astro

@@ -1,5 +1,6 @@
 ---
 import { micromark } from "micromark";
+import Signature from "./signature.astro";
 const { name, items, typesInOwnModule } = Astro.props;
 ---
 
@@ -13,11 +14,10 @@ const { name, items, typesInOwnModule } = Astro.props;
       <div class="record_field">
         <h5 id={`${name}_${item.name}`}>{item.name}</h5>
         <div class="type">
-          {typesInOwnModule.has(item.signature) ? (
-            <a href={`#${item.signature}`}>{item.signature}</a>
-          ) : (
-            item.signature
-          )}
+          <Signature
+            signature={item.signature}
+            typesInOwnModule={typesInOwnModule}
+          />
         </div>
         {documentation && <div class="doc" set:html={documentation} />}
       </div>
@@ -37,6 +37,7 @@ const { name, items, typesInOwnModule } = Astro.props;
     & .type {
       justify-self: end;
       color: var(--sl-color-accent-low);
+      margin-top: 0;
     }
 
     & .doc {

docs/components/signature.astro

@@ -0,0 +1,49 @@
+---
+import SignatureItem from "./signatureItem.astro";
+
+
+function tokenize(input) {
+  // Split by special characters while keeping them
+  const regex = /([<>,])/g;
+  return input
+    .split(regex)
+    .map((token) => token.trim())
+    .filter(Boolean);
+}
+
+function parseTokens(tokens) {
+  let index = 0;
+
+  const parseNode = () => {
+    const ident = tokens[index++]; // Read the current token and increment index
+    let genericArguments = [];
+
+    if (tokens[index] === "<") {
+      // Check for generics
+      index++; // Consume "<"
+      while (tokens[index] !== ">") {
+        genericArguments.push(parseNode());
+        if (tokens[index] === ",") index++; // Consume ","
+      }
+      index++; // Consume ">"
+    }
+
+    return { ident, genericArguments };
+  };
+
+  return parseNode();
+}
+
+function parse(input) {
+  const tokens = tokenize(input);
+  return parseTokens(tokens);
+}
+
+
+const { signature, typesInOwnModule } = Astro.props;
+const tree = parse(signature);
+---
+
+<div class="signature">
+  {(<SignatureItem typesInOwnModule={typesInOwnModule} item={tree} />)}
+</div>

docs/components/signatureItem.astro

@@ -0,0 +1,29 @@
+---
+import { createModuleLink } from "../pages/apidocs/utils.js";
+const { item, typesInOwnModule } = Astro.props;
+
+let link;
+if (typesInOwnModule.has(item.ident)) {
+  link = `#${item.ident}`;
+}
+
+if (item.ident.startsWith("WebAPI.")) {
+  const idents = item.ident.split(".");
+  if (idents.length === 3){
+    link = `${createModuleLink(idents[1])}#${idents[2]}`;
+  }
+}
+---
+
+{link ? <a href={link}>{item.ident}</a> : item.ident}
+{
+  item.genericArguments.length > 0 && (
+    <>
+      {"<"}
+      {item.genericArguments.map((subItem) => (
+        <Astro.self typesInOwnModule={typesInOwnModule} item={subItem} />
+      ))}
+      {">"}
+    </>
+  )
+}

docs/pages/apidocs/[API].astro

@@ -79,9 +79,6 @@ const headings = [
         </div>
       ))
     }
-    <code>
-      <pre>{JSON.stringify(docInfo, null, 4)}</pre>
-    </code>
   </div>
 </StarlightPage>
 <style>

docs/pages/apidocs/utils.js

@@ -11,12 +11,16 @@ function toKebabCase(input) {
     .toLowerCase(); // Convert to lowercase
 }
 
+export function createModuleLink(moduleName) {
+  return `/apidocs/${toKebabCase(moduleName)}`;
+}
+
 function mapRescriptFile(file) {
   const moduleName = path
     .basename(file, ".res")
     .replace("$", "")
     .replace("API", " API");
-  const link = `apidocs/${toKebabCase(moduleName)}`;
+  const link = createModuleLink(moduleName);
   return {
     filePath: path.join(import.meta.dirname, file),
     moduleName,