ts info extract support render callSignatures and constructSignatures… (#143)

Author: csr632

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+auto-install-peers=false

packages/playground/use-theme-doc/pages/components/button/types.ts

@@ -41,6 +41,12 @@ export interface ButtonProps<TestGenerics extends string> extends Base {
   myExportedInterface: MyExportedInterface
   myInterface: MyInterface
   myImportedTypeAlias: MyImportedTypeAlias
+  /** test call signatures */
+  (options?: { ignorePending?: true }): Array<string | Promise<string>>
+  (options: { ignorePending: false }): string[]
+  /** test construct signatures */
+  new (options: string): MyInterface
+  new (): MyInterface
 }
 
 interface Base {
@@ -79,6 +85,12 @@ export type SomeObjectLiteralType<TestGenerics> = {
   myExportedInterface: MyExportedInterface
   myInterface: MyInterface
   myImportedTypeAlias: MyImportedTypeAlias
+  /** test call signatures */
+  (options?: { ignorePending?: true }): Array<string | Promise<string>>
+  (options: { ignorePending: false }): string[]
+  /** test construct signatures */
+  new (options: string): MyInterface
+  new (): MyInterface
 }
 
 /**

packages/react-pages/clientTypes.d.ts

@@ -18,13 +18,17 @@ export type TsInfo =
       name: string
       description: string
       properties: TsPropertyOrMethodInfo[]
+      callSignatures: CallSignatureInfo[]
+      constructSignatures: CallSignatureInfo[]
     }
   | {
       // example: interface MyInterface { k: v }
       type: 'interface'
       name: string
       description: string
       properties: TsPropertyOrMethodInfo[]
+      callSignatures: CallSignatureInfo[]
+      constructSignatures: CallSignatureInfo[]
     }
   | {
       // complex type literal
@@ -41,6 +45,10 @@ export interface TsPropertyOrMethodInfo {
   defaultValue: string | undefined
   optional: boolean
 }
+export interface CallSignatureInfo {
+  type: string
+  description: string
+}
 
 export type UseAllPagesOutlines = (timeout: number) => any
 

packages/react-pages/src/node/virtual-module-plugins/ts-info-module/extract.ts

@@ -6,37 +6,11 @@ import {
   ts,
 } from 'ts-morph'
 
-export type TsInfo =
-  | {
-      // example: type A = { k: v }
-      type: 'object-literal'
-      name: string
-      description: string
-      properties: TsPropertyOrMethodInfo[]
-    }
-  | {
-      // example: interface MyInterface { k: v }
-      type: 'interface'
-      name: string
-      description: string
-      properties: TsPropertyOrMethodInfo[]
-    }
-  | {
-      // complex type literal
-      // example: type A = 'asd' | 123
-      type: 'other'
-      name: string
-      description: string
-      text: string
-    }
-
-export interface TsPropertyOrMethodInfo {
-  name: string
-  type: string
-  description: string
-  defaultValue: string | undefined
-  optional: boolean
-}
+import type {
+  TsInfo,
+  TsPropertyOrMethodInfo,
+  CallSignatureInfo,
+} from '../../../../clientTypes'
 
 const defaultTsConfig: ts.CompilerOptions = {
   target: ts.ScriptTarget.ESNext,
@@ -92,12 +66,15 @@ export function collectInterfaceInfo(
 
     if (Node.isTypeLiteral(typeNode)) {
       // example: type A = { k: v }
-      const members = handleTypeElementMembered(typeNode, typeChecker)
+      const { members, callSignatures, constructSignatures } =
+        handleTypeElementMembered(typeNode, typeChecker)
       return {
         type: 'object-literal',
         name,
         description,
         properties: members,
+        callSignatures,
+        constructSignatures,
       }
     } else {
       // example: type A = 'asd' | 123
@@ -122,8 +99,16 @@ export function collectInterfaceInfo(
         return jsDoc.getDescription().trim()
       })
       .join('\n\n')
-    const members = handleTypeElementMembered(node, typeChecker)
-    return { type: 'interface', name, description, properties: members }
+    const { members, callSignatures, constructSignatures } =
+      handleTypeElementMembered(node, typeChecker)
+    return {
+      type: 'interface',
+      name,
+      description,
+      properties: members,
+      callSignatures,
+      constructSignatures,
+    }
   }
 
   throw new Error('unexpected node type: ' + node.getKindName())
@@ -136,12 +121,16 @@ export function collectInterfaceInfo(
 function handleTypeElementMembered(
   node: TypeElementMemberedNode & Node,
   typeChecker: TypeChecker
-): TsPropertyOrMethodInfo[] {
-  const result: TsPropertyOrMethodInfo[] = []
+): {
+  members: TsPropertyOrMethodInfo[]
+  callSignatures: CallSignatureInfo[]
+  constructSignatures: CallSignatureInfo[]
+} {
+  const members: TsPropertyOrMethodInfo[] = []
   // or use node.getSymbol()?.getMembers() ?
   const nodeType = node.getType()
-  const properties = nodeType.getProperties()
-  for (const prop of properties) {
+  // https://stackoverflow.com/a/68623960
+  for (const prop of nodeType.getProperties()) {
     const name = prop.getName()
     const description = ts.displayPartsToString(
       prop.compilerSymbol.getDocumentationComment(typeChecker.compilerObject)
@@ -165,15 +154,40 @@ function handleTypeElementMembered(
       return res
     })()
     const optional = prop.isOptional()
-    result.push({
+    members.push({
       name,
       description,
       type,
       defaultValue,
       optional,
     })
   }
-  return result
+
+  const callSignatures: CallSignatureInfo[] = []
+  for (const sig of nodeType.getCallSignatures()) {
+    const description = ts.displayPartsToString(
+      sig.compilerSignature.getDocumentationComment(typeChecker.compilerObject)
+    )
+    const type = sig.getDeclaration().getText()
+    callSignatures.push({
+      description,
+      type,
+    })
+  }
+
+  const constructSignatures: CallSignatureInfo[] = []
+  for (const sig of nodeType.getConstructSignatures()) {
+    const description = ts.displayPartsToString(
+      sig.compilerSignature.getDocumentationComment(typeChecker.compilerObject)
+    )
+    const type = sig.getDeclaration().getText()
+    constructSignatures.push({
+      description,
+      type,
+    })
+  }
+
+  return { members, callSignatures, constructSignatures }
 }
 
 // an alternative way to implement handleTypeElementMembered

packages/theme-doc/package.json

@@ -49,7 +49,7 @@
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
     "@types/mdx": "^2.0.4",
-    "antd": "^5.4.0",
+    "antd": "^5.6.1",
     "chokidar": "^3.5.1",
     "concurrently": "^7.6.0",
     "copy-to-clipboard": "^3.3.3",

packages/theme-doc/src/Layout/MDX/index.tsx

@@ -40,7 +40,7 @@ const components: MDXComponents = {
   }),
   CodeBlock,
   Demo,
-  TsInfo: withMdClassName(TsInfo),
+  TsInfo,
   FileText: withMdClassName(FileText),
   a: (props: React.HTMLProps<HTMLAnchorElement>) => {
     const { href, ...rest } = props
@@ -123,7 +123,7 @@ export default MDX
  * Ref: "FlowContent" are the top-level block elements in mdast
  * https://github.com/syntax-tree/mdast#flowcontent
  */
-function withMdClassName(Component: React.FC<any> | string) {
+export function withMdClassName(Component: React.FC<any> | string) {
   return function (props: any) {
     const { className } = props
     const newClassName = className ? `${className} markdown-el` : 'markdown-el'

packages/theme-doc/src/Layout/TsInfo/index.module.css

@@ -0,0 +1,3 @@
+.ctn {
+  margin-bottom: 16px;
+}