xref: /expo/docs/components/plugins/APISection.tsx (revision abded2bb) 
1import React, { useContext } from 'react';
2
3import DocumentationPageContext from '~/components/DocumentationPageContext';
4import { P } from '~/components/base/paragraph';
5import { GeneratedData } from '~/components/plugins/api/APIDataTypes';
6import APISectionComponents from '~/components/plugins/api/APISectionComponents';
7import APISectionConstants from '~/components/plugins/api/APISectionConstants';
8import APISectionEnums from '~/components/plugins/api/APISectionEnums';
9import APISectionInterfaces from '~/components/plugins/api/APISectionInterfaces';
10import APISectionMethods from '~/components/plugins/api/APISectionMethods';
11import APISectionProps from '~/components/plugins/api/APISectionProps';
12import APISectionTypes from '~/components/plugins/api/APISectionTypes';
13import { TypeDocKind } from '~/components/plugins/api/APISectionUtils';
14
15const LATEST_VERSION = `v${require('~/package.json').version}`;
16
17type Props = {
18  packageName: string;
19  apiName?: string;
20  forceVersion?: string;
21};
22
23const filterDataByKind = (
24  entries: GeneratedData[],
25  kind: TypeDocKind,
26  additionalCondition: (entry: GeneratedData) => boolean = () => true
27) =>
28  entries
29    ? entries.filter((entry: GeneratedData) => entry.kind === kind && additionalCondition(entry))
30    : [];
31
32const isHook = ({ name }: GeneratedData) =>
33  name.startsWith('use') &&
34  // note(simek): hardcode this exception until the method will be renamed
35  name !== 'useSystemBrightnessAsync';
36
37const isListener = ({ name }: GeneratedData) =>
38  name.endsWith('Listener') || name.endsWith('Listeners');
39
40const isProp = ({ name }: GeneratedData) => name.includes('Props') && name !== 'ErrorRecoveryProps';
41
42const renderAPI = (
43  packageName: string,
44  version: string = 'unversioned',
45  apiName?: string,
46  isTestMode: boolean = false
47): JSX.Element => {
48  try {
49    // note(simek): When the path prefix is interpolated Next or Webpack fails to locate the file
50    const { children: data } = isTestMode
51      ? require(`../../public/static/data/${version}/${packageName}.json`)
52      : require(`~/public/static/data/${version}/${packageName}.json`);
53
54    const methods = filterDataByKind(
55      data,
56      TypeDocKind.Function,
57      entry => !isListener(entry) && !isHook(entry)
58    );
59    const hooks = filterDataByKind(data, TypeDocKind.Function, isHook);
60    const eventSubscriptions = filterDataByKind(data, TypeDocKind.Function, isListener);
61
62    const types = filterDataByKind(
63      data,
64      TypeDocKind.TypeAlias,
65      entry =>
66        !isProp(entry) &&
67        !!(
68          entry.type.declaration ||
69          entry.type.types ||
70          entry.type.type ||
71          entry.type.typeArguments
72        )
73    );
74
75    const props = filterDataByKind(
76      data,
77      TypeDocKind.TypeAlias,
78      entry => isProp(entry) && !!(entry.type.types || entry.type.declaration?.children)
79    );
80    const defaultProps = filterDataByKind(
81      data
82        .filter((entry: GeneratedData) => entry.kind === TypeDocKind.Class)
83        .map((entry: GeneratedData) => entry.children)
84        .flat(),
85      TypeDocKind.Property,
86      entry => entry.name === 'defaultProps'
87    )[0];
88
89    const enums = filterDataByKind(data, TypeDocKind.Enum);
90    const interfaces = filterDataByKind(data, TypeDocKind.Interface);
91    const constants = filterDataByKind(
92      data,
93      TypeDocKind.Variable,
94      entry =>
95        (entry?.flags?.isConst || false) &&
96        entry.name !== 'default' &&
97        entry?.type?.name !== 'React.FC'
98    );
99
100    const components = filterDataByKind(
101      data,
102      TypeDocKind.Variable,
103      entry => entry?.type?.name === 'React.FC'
104    );
105    const componentsPropNames = components.map(component => `${component.name}Props`);
106    const componentsProps = filterDataByKind(props, TypeDocKind.TypeAlias, entry =>
107      componentsPropNames.includes(entry.name)
108    );
109
110    return (
111      <>
112        <APISectionComponents data={components} componentsProps={componentsProps} />
113        <APISectionConstants data={constants} apiName={apiName} />
114        <APISectionMethods data={hooks} header="Hooks" />
115        <APISectionMethods data={methods} apiName={apiName} />
116        <APISectionMethods
117          data={eventSubscriptions}
118          apiName={apiName}
119          header="Event Subscriptions"
120        />
121        {props && !componentsProps.length ? (
122          <APISectionProps data={props} defaultProps={defaultProps} />
123        ) : null}
124        <APISectionTypes data={types} />
125        <APISectionInterfaces data={interfaces} />
126        <APISectionEnums data={enums} />
127      </>
128    );
129  } catch (error) {
130    return <P>No API data file found, sorry!</P>;
131  }
132};
133
134const APISection: React.FC<Props> = ({ packageName, apiName, forceVersion }) => {
135  const { version } = useContext(DocumentationPageContext);
136  const resolvedVersion =
137    forceVersion ||
138    (version === 'unversioned' ? version : version === 'latest' ? LATEST_VERSION : version);
139  return renderAPI(packageName, resolvedVersion, apiName, !!forceVersion);
140};
141
142export default APISection;
143