TypeScript: Fix @remarks used for full instead of simplified type form

Author: fuma-nama

.changeset/large-ducks-itch.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-typescript': patch
+---
+
+Fix `@remarks` used for full instead of simplified type form

apps/docs/content/docs/ui/(ui)/components/files.mdx

@@ -59,8 +59,8 @@ project
 
 ### File
 
-<AutoTypeTable path="./content/docs/ui/props.ts" name="FileProps" />
+<auto-type-table path="../../props.ts" name="FileProps" />
 
 ### Folder
 
-<AutoTypeTable path="./content/docs/ui/props.ts" name="FolderProps" />
+<auto-type-table path="../../props.ts" name="FolderProps" />

packages/typescript/src/lib/base.ts

@@ -86,7 +86,8 @@ export function createGenerator(config?: GeneratorOptions | Project) {
           project: config,
         }
       : config;
-  const cacheType = options?.cache ?? 'fs';
+  const cacheType =
+    options?.cache ?? (process.env.NODE_ENV !== 'development' ? 'fs' : false);
   const cache = cacheType === 'fs' ? createCache() : null;
   let instance: Project | undefined;
 
@@ -214,13 +215,18 @@ function getDocEntry(
       }) satisfies RawTag,
   );
 
-  let type = getFullType(subType);
+  let simplifiedType = getSimpleForm(
+    subType,
+    program.getTypeChecker(),
+    isOptional,
+  );
 
-  for (const tag of tags) {
-    if (tag.name !== 'remarks') continue;
+  const remarksTag = tags.find((tag) => tag.name === 'remarks');
+  if (remarksTag) {
+    const match = /^`(?<name>.+)`/.exec(remarksTag.text)?.[1];
 
     // replace type with @remarks
-    type = /^`(?<name>.+)`/.exec(tag.text)?.[1] ?? type;
+    if (match) simplifiedType = match;
   }
 
   const entry: DocEntry = {
@@ -231,12 +237,8 @@ function getDocEntry(
       ),
     ),
     tags,
-    type,
-    simplifiedType: getSimpleForm(
-      subType,
-      program.getTypeChecker(),
-      isOptional,
-    ),
+    type: getFullType(subType),
+    simplifiedType,
     required: !isOptional,
     deprecated: tags.some((tag) => tag.name === 'deprecated'),
   };
@@ -247,16 +249,18 @@ function getDocEntry(
 }
 
 function getFullType(type: Type): string {
-  let typeName = type.getText(
+  const alias = type.getAliasSymbol();
+  if (alias) {
+    return alias
+      .getDeclaredType()
+      .getText(undefined, ts.TypeFormatFlags.NoTruncation);
+  }
+
+  return type.getText(
     undefined,
     ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope |
       ts.TypeFormatFlags.NoTruncation |
+      // we use `InTypeAlias` to force TypeScript to extend generic types like `ExtractParams<T>` into more detailed forms like `T extends string? ExtractParamsFromString<T> : never`.
       ts.TypeFormatFlags.InTypeAlias,
   );
-
-  if (type.getAliasSymbol() && type.getAliasTypeArguments().length === 0) {
-    typeName = type.getAliasSymbol()?.getEscapedName() ?? typeName;
-  }
-
-  return typeName;
 }

packages/typescript/src/lib/get-simple-form.ts

@@ -8,8 +8,13 @@ export function getSimpleForm(
   if (type.isUndefined() && noUndefined) return '';
 
   const alias = type.getAliasSymbol();
-  if (alias && type.getAliasTypeArguments().length === 0) {
-    return alias.getEscapedName();
+  if (alias) {
+    return alias
+      .getDeclaredType()
+      .getText(
+        undefined,
+        ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope,
+      );
   }
 
   if (type.isUnion()) {
@@ -58,7 +63,6 @@ export function getSimpleForm(
 
   return type.getText(
     undefined,
-    ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope |
-      ts.TypeFormatFlags.InTypeAlias,
+    ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope,
   );
 }

packages/typescript/src/lib/mdx.ts

@@ -34,9 +34,11 @@ ${doc.description}
 
 <div className="flex flex-row items-center gap-4">
   <code className="text-sm">${c.name}</code>
-  <code className="text-fd-muted-foreground">{${JSON.stringify(c.type)}}</code>
+  <code className="text-fd-muted-foreground">{${JSON.stringify(c.simplifiedType)}}</code>
 </div>
 
+Full Type: <code className="text-fd-muted-foreground">{${JSON.stringify(c.type)}}</code>
+
 ${c.description || 'No Description'}
 
 ${c.tags

packages/typescript/test/fixtures/test.output.js

@@ -64,7 +64,7 @@ function _createMdxContent(props) {
                     "--shiki-light": "#24292E",
                     "--shiki-dark": "#E1E4E8"
                   },
-                  children: "number"
+                  children: "timestamp"
                 })
               })
             }),
@@ -76,7 +76,7 @@ function _createMdxContent(props) {
                     "--shiki-light": "#24292E",
                     "--shiki-dark": "#E1E4E8"
                   },
-                  children: "timestamp"
+                  children: "number"
                 })
               })
             }),

packages/typescript/test/fixtures/test.output.json

@@ -101,8 +101,8 @@
             "text": "`timestamp`\nReturned by API"
           }
         ],
-        "type": "timestamp",
-        "simplifiedType": "number",
+        "type": "number",
+        "simplifiedType": "timestamp",
         "required": true,
         "deprecated": false
       },
@@ -121,5 +121,20 @@
         "deprecated": false
       }
     ]
+  },
+  {
+    "name": "Test4",
+    "description": "",
+    "entries": [
+      {
+        "name": "prop",
+        "description": "",
+        "tags": [],
+        "type": "Complicated<T>",
+        "simplifiedType": "Complicated<T>",
+        "required": true,
+        "deprecated": false
+      }
+    ]
   }
 ]

packages/typescript/test/fixtures/test.ts

@@ -17,3 +17,13 @@ interface GenericType<A, B, C> {
   B: B;
   C: C;
 }
+
+export type Test4<T> = {
+  get prop(): Complicated<T>;
+};
+
+type Complicated<T> = T extends { [K in keyof T]: T[K] }
+  ? {
+      [K in keyof T as Lowercase<string & K>]: T[K];
+    }
+  : never;

packages/typescript/test/type-gen.test.ts

@@ -24,7 +24,7 @@ const generator = createGenerator(tsconfig);
 test('Run', async () => {
   const file = relative('./fixtures/test.ts');
 
-  const result = ['Test1', 'Test2', 'Test3'].flatMap((name) =>
+  const result = ['Test1', 'Test2', 'Test3', 'Test4'].flatMap((name) =>
     generator.generateDocumentation({ path: file }, name),
   );