Types from external dependencies

[flugg]

Hi! First of all, really great project!

I got things running using the ExportedTypes component like this:

<ExportedTypes source="./src/button.tsx" workingDirectory="../../packages/components/button" />

However, the output only includes local types defined in the button.tsx file and not any types that's extended. The button file looks like this:

import type { ReactNode, RefObject } from 'react';
import type { ButtonProps as ReactAriaButtonProps } from 'react-aria-components';

export interface ButtonProps extends ReactAriaButtonProps {
  children?: ReactNode;
  isLoading?: boolean;
  ref?: RefObject<HTMLButtonElement>;
}

And I would like to get access to all props including those from within the React Aria Components library. How would I do it?

Thanks!

[souporserious]

Hey, thank you!

Hm, I think this is an issue with node_modules specifically since currently any types outside of the project are skipped over. There could be an additional option to process them though so something like <ExportTypes includeNodeModules /> or maybe a filterType prop might be better.

[flugg]

An option to delicately pick which props to include sounds very reasonable to me, and is similar to how react-docgen-typescript does it with the propFilter prop. I've previously utilized this prop in my Storybook configuration to include metadata for props from node_modules for my controls.

[souporserious]

This is now configurable through the filter option for APIReference which is the successor to ExportedTypes:

import { APIReference } from "renoun/file-system";

export default function App() {
  return (
    <APIReference
      source="src/button.tsx"
      filter={(symbolMetadata) => {
        if (symbolMetadata.filePath?.includes("styled-system")) {
          return false;
        }

        return !symbolMetadata.isPrivate && !symbolMetadata.isInNodeModules;
      }}
    />
  );
}

The filter function argument includes the following metadata for each resolved type:

/** The name of the symbol if it exists. */
name?: string

/** Whether or not the symbol is exported. */
isExported: boolean

/** Whether or not the symbol is external to the current source file. */
isExternal: boolean

/** Whether or not the symbol is located in node_modules. */
isInNodeModules: boolean

/** Whether or not the symbol is global. */
isGlobal: boolean

/** Whether or not the node is generated by the compiler. */
isVirtual: boolean

/** Whether or not the symbol is private. */
isPrivate: boolean

/** The file path for the symbol declaration. */
filePath?: string

Make sure to always include return !symbolMetadata.isPrivate && !symbolMetadata.isInNodeModules; otherwise every single type will be resolved, which in the case of including something like HTML props, will be a lot 😄.