How detection works?

Component detection

Omlet detects and tracks 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.

button.tsx
function Button() {
  ...
}

export function ExportedButton() {
  ...

  return <Button/>;
}

Usage detection

Omlet detects and counts the unique usage of each component. If a component is used multiple times within the same component, Omlet will consider this 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.

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>
  );
}

Props detection

Omlet detects and identifies the props defined in each component and tracks the usage of those props in the component instances. You can learn more about the Props in Omlet here.

Component libraries published to NPM

If you own and manage a published component library, you can scan it with Omlet CLI like any other repository. Omlet will automatically detect dependencies and usage relationships between repositories.

3rd-party libraries

Omlet will detect the usage of components from 3rd-party libraries like MUI or Ant and tag them as "external" automatically. However, Omlet will only detect components used inside your project rather than all the components defined in the external library.

Last updated