How detection works
How Omlet detects components and their usage
Omlet detects and tracks only the components that are defined and exported from JS/TS modules. Local components, which are components used within the same module that are not exported, are not surfaced in Omlet.
In the provided example, only ExportedButton will be tracked and reported in Omlet because it is defined and exported. Button is a local component used only within the button.tsx module, so it is excluded from the scanned results.
// file: button.tsx
function Button() {
...
}
export function ExportedButton() {
...
return <Button/>;
}
Omlet detects and counts the unique usage of each component. If a component is used multiple times within the same component, Omlet considers it as a single usage.
In the given example, there are multiple instances of
ListItem within ListView but Omlet will count this as a single usage of ListItem.Using the same example below, Omlet will also recognize that
ListView is using Button indirectly through a local component ListButton. However, ListButton will not appear in the results.// file: Listview.tsx
import Button from "./Button";
import ListItem from "./ListItem";
function ListButton() {
...
return <Button/>;
}
export function ListView() {
...
return (
<div>
<div><ListItem/></div>
...
<div><ListItem/></div>
<div><ListButton/></div>
</div>
);
}