Symbol Outline
A file's symbols as a tree, in file order rather than alphabetical. An outline is a map of the document you are reading; re-sorting it makes the outline and the editor disagree about where things are.
src/components/ui/symbol-outline.tsxAbout
From the component's own source, where it was written.
A file's symbols as a tree.
Filtering keeps ancestors of a match. Flattening to matched leaves loses the class a method belongs to, and render on its own is useless when six components define one.
Order is the order in the file, not alphabetical. An outline is a map of the document you are reading; re-sorting it means the outline and the editor disagree about where things are.
Exported symbols are marked. "Is this part of the public surface" is the question an outline gets used for most, and it cannot be answered from the name.
Install
npx astralyx-ui add symbol-outline
Usage
import { SymbolOutline } from '@/components/ui/symbol-outline'
<SymbolOutline symbols={symbols} onSelect={goTo} />Composer
Change the props and the source below follows.
<SymbolOutline symbols={symbols} onSelect={goTo} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
SymbolOutline
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| symbols | CodeSymbol[] | required | { id, name, kind, line?, exported?, children? }. |
| onSelect | (id: string) => void | — | — |
| selected | string | — | — |
| searchable | boolean | true | — |
| searchPlaceholder | string | 'Filter symbols' | — |
| searchLabel | string | 'Filter symbols' | — |
| emptyMessage | ReactNode | 'No symbols match.' | — |
| exportedLabel | string | 'exported' | Accessible name for the export marker. |
| order | file order | — | Never alphabetical. |
Functions
| Function | Signature | Description |
|---|---|---|
| filterSymbols | (nodes: CodeSymbol[], needle: string) => CodeSymbol[] | Keeps a node when it matches, or when any descendant does. |
Types
CodeSymbol
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| kind | SymbolKind | — |
| line? | number | — |
| exported? | boolean | Draws a dot. "Is this part of the public surface" is what an outline gets used for, and the name cannot answer it. |
| children? | CodeSymbol[] | — |
| Type | Definition | Description |
|---|---|---|
SymbolKind | | 'function' | 'class' | 'interface' | 'type' | 'constant' | 'variable' | 'property' | A file's symbols as a tree. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| filtering | keeps ancestors | Flattening to matched leaves loses the class a method belongs to, and render alone is useless when six components define one. |