TypeScript Type Table Extraction

Copyexport async function createProject(options: TypescriptConfig = {}): Promise<Project> {
  const { Project } = await import('ts-morph');
  return new Project({
    tsConfigFilePath: options.tsconfigPath ?? './tsconfig.json',
    skipAddingFilesFromTsConfig: true,
  });
}
 
export function createGenerator(options: GeneratorOptions = {}) {
  const cache = options?.cache ? options.cache : null;
  let instance: Project | Promise<Project> | undefined = options?.project;
 
  function getProject() {
    if (instance) return instance;
    return (instance = createProject(options));
  }

Copyexport interface BaseTypeTableProps {
  /**
   * The path to source TypeScript file.
   */
  path?: string;
 
  /**
   * Exported type name to generate from.
   */
  name?: string;
 
  /**
   * Set the type to generate from.
   *
   * When used with `name`, it generates the type with `name` as export name.
   *
   * ```ts
   * export const myName = MyType;
   * ```
   *
   * When `type` contains multiple lines, `export const` is not added.
   * You need to export it manually, and specify the type name with `name`.
   *
   * ```tsx
   * <AutoTypeTable
   *   path="./file.ts"
   *   type={`import { ReactNode } from "react"
   *   export const MyName = ReactNode`}
   *   name="MyName"
   * />
   * ```
   */
  type?: string;
}
 
export interface GenerateTypeTableOptions extends GenerateOptions {
  /**
   * base path to resolve `path` prop
   */
  basePath?: string;
}

Copyif (type && type.split('\n').length > 1) {
  content += `\n${type}`;
} else if (type) {
  typeName ??= '$Fumadocs';
  content += `\nexport type ${typeName} = ${type}`;
}

Copyconst comment = declaration
  .getSymbol()
  ?.compilerSymbol.getDocumentationComment(program.getTypeChecker().compilerObject);

Copytype: subType.getText(
  context.declaration,
  ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope | ts.TypeFormatFlags.NoTruncation,
),

Copyfor (const { name: key, text } of tags) {
  if (key === 'default' || key === 'defaultValue') {
    typed.default = text;
    continue;
  }

Copyif (key === 'param') {
  const sepIdx = text.indexOf('-');
  const param = sepIdx === -1 ? text.trim() : text.slice(0, sepIdx).trim();
  const description = sepIdx === -1 ? '' : text.slice(sepIdx + 1).trim();
 
  typed.params ??= [];
  typed.params.push({
    name: param,
    description,
  });
  continue;
}

Copyexport function remarkAutoTypeTable(
  config: RemarkAutoTypeTableOptions = {},
): Transformer<Root, Root> {
  const {
    name = 'auto-type-table',
    outputName = 'TypeTable',
    options: generateOptions = {},
    remarkStringify = true,
    generator = createGenerator(),
    renderMarkdown,
    renderType,
    shiki,
  } = config;
  let renderer: MarkdownRenderer;
 
  if (renderMarkdown && renderType) {
    renderer = { renderMarkdownToHast: renderMarkdown, renderTypeToHast: renderType };
  } else {
    renderer = markdownRenderer(shiki);
    if (renderMarkdown) renderer.renderMarkdownToHast = renderMarkdown;
    if (renderType) renderer.renderTypeToHast = renderType;
  }
 

Copyasync function buildTypeProp(
  entries: DocEntry[],
  renderer: MarkdownRenderer,
): Promise<ObjectExpression> {
  async function onItem(entry: DocEntry) {
    const node = objectBuilder();
    const tags = parseTags(entry.tags);
    node.addJsxProperty('type', await renderer.renderTypeToHast(entry.simplifiedType));
    node.addJsxProperty('typeDescription', await renderer.renderTypeToHast(entry.type));
    node.addExpressionNode('required', valueToEstree(entry.required));
 
    if (entry.typeHref)
      node.addExpressionNode('typeDescriptionLink', valueToEstree(entry.typeHref));
 
    if (tags.default) node.addJsxProperty('default', await renderer.renderTypeToHast(tags.default));
 
    if (tags.returns)
      node.addJsxProperty('returns', await renderer.renderMarkdownToHast(tags.returns));
 
    if (tags.params) {
      node.addExpressionNode('parameters', {
        type: 'ArrayExpression',
        elements: await Promise.all(tags.params.map(onParam)),
      });
    }
 
    if (entry.description) {
      node.addJsxProperty('description', await renderer.renderMarkdownToHast(entry.description));
    }
 
    if (entry.deprecated) {
      node.addExpressionNode('deprecated', valueToEstree(true));
    }
 
    return node.build();
  }

Copyconst rendered: MdxJsxFlowElement[] = [];
 
for (const doc of output) {
  rendered.push({
    type: 'mdxJsxFlowElement',
    name: outputName,
    attributes: [
      {
        type: 'mdxJsxAttribute',
        name: 'id',
        value: `type-table-${doc.id}`,
      },
      {
        type: 'mdxJsxAttribute',
        name: 'type',
        value: {
          type: 'mdxJsxAttributeValueExpression',
          value: remarkStringify ? JSON.stringify(doc, null, 2) : '',
          data: {
            estree: {
              type: 'Program',
              sourceType: 'module',
              body: [
                {
                  type: 'ExpressionStatement',
                  expression: await buildTypeProp(doc.entries, renderer),
                },
              ],
            },
          },
        },
      },
      ...attributes,
    ],
    children: [],
  });
}

Copyexport async function AutoTypeTable({
  generator,
  options,
  renderType,
  renderMarkdown,
  shiki,
  name,
  path,
  type,
  ...props
}: AutoTypeTableProps) {
  if (!renderType || !renderMarkdown) {
    const renderer = markdownRenderer(shiki);
    renderType ??= async (v) => toJsx(await renderer.renderTypeToHast(v));
    renderMarkdown ??= async (v) => toJsx(await renderer.renderMarkdownToHast(v));
  }

Copyfunction toJsx(hast: Nodes) {
  return toJsxRuntime(hast, {
    ...JsxRuntime,
    components: { ...defaultMdxComponents, img: undefined },
  });
}

Copyexport function TypeTable({
  id,
  type,
  className,
  ...props
}: { type: Record<string, TypeNode> } & ComponentProps<'div'>) {
  const t = useTranslations({ note: 'type table' });
 
  return (
    <div
      id={id}
      className={cn(
        '@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden',
        className,
      )}
      {...props}
    >
      <div className="flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground">
        <p className="w-1/4">{t('Prop')}</p>
        <p className="@max-xl:hidden">{t('Type')}</p>
      </div>
      {Object.entries(type).map(([key, value]) => (
        <Item key={key} parentId={id} name={key} item={value} />
      ))}
    </div>
  );
}

Copyfunction Item({
  parentId,
  name,
  item: {
    parameters = [],
    description,
    required = false,
    deprecated,
    typeDescription,
    default: defaultValue,
    type,
    typeDescriptionLink,
    returns,
  },
}: {
  parentId?: string;
  name: string;
  item: TypeNode;
}) {
  const t = useTranslations({ note: 'type table' });
  const [open, setOpen] = useState(false);
  const id = parentId ? `${parentId}-${name}` : undefined;
 
  useEffect(() => {
    const hash = window.location.hash;
    if (!id || !hash) return;
    if (`#${id}` === hash) setOpen(true);
  }, [id]);
 
  return (
    <Collapsible
      id={id}
      open={open}
      onOpenChange={(v) => {
        if (v && id) {
          window.history.replaceState(null, '', `#${id}`);
        }
        setOpen(v);
      }}
      className={cn(
        'rounded-xl border overflow-hidden scroll-m-20 transition-all',
        open ? 'shadow-sm bg-fd-background not-last:mb-2' : 'border-transparent',
      )}
    >