Onlook uses an AST (Abstract Syntax Tree) manager to map component usages by combining the DOM tree with an AST tree. This overcomes the limitations of both: the DOM tree lacks instance information (e.g., props or specific component call sites), and the AST lacks tree structure/hierarchy information.
The Mapping Algorithm
To find where a specific component instance is used, the system follows these steps:
- AST Parsing: Parse the source files and build a map that links
data-oid values to their code location (file, start/end position) and component name (the JSX tag name or the containing function name). - DOM Walking: Walk the DOM tree and inspect the parent of each node. If the component name of the current node differs from its parent's component name, the node is identified as a component instance.
- Verification: For identified instances, look up the parent's source code. Find the child at the same index with the same component name. If they match, the exact instance location in the source code is confirmed.
// Example of the internal mapping generated during AST parsing
{
"parent": ["parent.jsx", "start and end location", "Parent"],
"instance": ["parent.jsx", "start and end location", "Child"],
"child": ["child.jsx", "start and end location", "Child"]
}
