0
# Component Resolution
1

2
System for finding and identifying React component definitions within source files using AST traversal.
3

4
## Capabilities
5

6
### Resolver Interface
7

8
The base interface for all component resolvers.
9

10
```typescript { .api }
11
interface ResolverClass {
12
  resolve: ResolverFunction;
13
}
14

15
type ResolverFunction = (file: FileState) => ComponentNodePath[];
16

17
type Resolver = ResolverClass | ResolverFunction;
18

19
type ComponentNodePath = NodePath<ComponentNode>;
20

21
type ComponentNode = 
22
  | CallExpression
23
  | ClassDeclaration
24
  | ClassExpression
25
  | ObjectExpression
26
  | StatelessComponentNode;
27

28
type StatelessComponentNode =
29
  | ArrowFunctionExpression
30
  | FunctionDeclaration
31
  | FunctionExpression
32
  | ObjectMethod;
33
```
34

35
### Find Exported Definitions Resolver
36

37
Finds React components that are exported from the module.
38

39
```typescript { .api }
40
class FindExportedDefinitionsResolver {
41
  constructor(options?: { limit?: number });
42
  resolve: (file: FileState) => ComponentNodePath[];
43
}
44
```
45

46
**Usage Example:**
47

48
```typescript
49
import { builtinResolvers } from "react-docgen";
50

51
const resolver = new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 });
52
const componentPaths = resolver.resolve(fileState);
53
```
54

55
### Find All Definitions Resolver
56

57
Finds all React component definitions in the file, regardless of export status.
58

59
```typescript { .api }
60
class FindAllDefinitionsResolver {
61
  resolve: (file: FileState) => ComponentNodePath[];
62
}
63
```
64

65
**Usage Example:**
66

67
```typescript
68
import { builtinResolvers } from "react-docgen";
69

70
const resolver = new builtinResolvers.FindAllDefinitionsResolver();
71
const allComponents = resolver.resolve(fileState);
72
```
73

74
### Find Annotated Definitions Resolver
75

76
Finds React components that have specific annotations or JSDoc comments.
77

78
```typescript { .api }
79
class FindAnnotatedDefinitionsResolver {
80
  resolve: (file: FileState) => ComponentNodePath[];
81
}
82
```
83

84
**Usage Example:**
85

86
```typescript
87
import { builtinResolvers } from "react-docgen";
88

89
const resolver = new builtinResolvers.FindAnnotatedDefinitionsResolver();
90
const annotatedComponents = resolver.resolve(fileState);
91
```
92

93
### Chain Resolver
94

95
Combines multiple resolvers with configurable chaining logic.
96

97
```typescript { .api }
98
class ChainResolver {
99
  static Logic: {
100
    ALL: string;
101
    FIRST_FOUND: string;
102
  };
103
  
104
  constructor(
105
    resolvers: Resolver[], 
106
    options?: { chainingLogic?: string }
107
  );
108
  
109
  resolve: (file: FileState) => ComponentNodePath[];
110
}
111
```
112

113
**Usage Example:**
114

115
```typescript
116
import { builtinResolvers } from "react-docgen";
117

118
const chainResolver = new builtinResolvers.ChainResolver([
119
  new builtinResolvers.FindExportedDefinitionsResolver({ limit: 1 }),
120
  new builtinResolvers.FindAnnotatedDefinitionsResolver()
121
], {
122
  chainingLogic: builtinResolvers.ChainResolver.Logic.ALL
123
});
124

125
const components = chainResolver.resolve(fileState);
126
```
127

128
### Default Resolver Configuration
129

130
The default resolver setup used by the parser when no custom resolver is provided.
131

132
```typescript { .api }
133
/** Default resolvers used by the parser */
134
const defaultResolvers: Resolver[];
135

136
/** Default resolver combining exported and annotated definition resolvers */
137
const defaultResolver: Resolver;
138
```
139

140
The default configuration uses:
141
1. `FindExportedDefinitionsResolver` with limit of 1
142
2. `FindAnnotatedDefinitionsResolver` as fallback
143
3. Combined using `ChainResolver` with `ALL` logic
144

145
### Component Node Types
146

147
Type definitions for different kinds of React component AST nodes that resolvers can identify.
148

149
```typescript { .api }
150
// Function-based components
151
type StatelessComponentNode =
152
  | ArrowFunctionExpression    // const Comp = () => <div />
153
  | FunctionDeclaration        // function Comp() { return <div />; }
154
  | FunctionExpression         // const Comp = function() { return <div />; }
155
  | ObjectMethod;              // { render() { return <div />; } }
156

157
// All component types
158
type ComponentNode = 
159
  | CallExpression             // React.createClass(), forwardRef(), memo()
160
  | ClassDeclaration           // class Comp extends React.Component {}
161
  | ClassExpression            // const Comp = class extends React.Component {}
162
  | ObjectExpression           // React.createClass({ render() {} })
163
  | StatelessComponentNode;
164
```
165

166
### Resolution Process
167

168
The resolution process follows these steps:
169

170
1. **AST Traversal**: Parse the source code and traverse the AST
171
2. **Pattern Matching**: Identify nodes that match React component patterns
172
3. **Validation**: Verify that identified nodes are actual React components
173
4. **Filtering**: Apply resolver-specific filtering logic
174
5. **Return**: Provide ComponentNodePath objects for further processing
175

176
**Common Component Patterns Detected:**
177

178
```typescript
179
// Export patterns
180
export default function MyComponent() {}
181
export const MyComponent = () => {};
182
export class MyComponent extends React.Component {}
183

184
// Named exports
185
export { MyComponent, AnotherComponent };
186

187
// Annotated components
188
/** @component */
189
function InternalComponent() {}
190

191
// HOC patterns
192
export default memo(MyComponent);
193
export default forwardRef(MyComponent);
194
```