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

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.

How are components counted?

Components are counted against your workspace's component limit following the below criteria:

• Components scanned from your internal repositories are counted.

• 3rd-party library components used in your projects are counted. If a component from a 3rd-party library is not used in your projects, it'll not be detected and counted.

• Omlet counts each unique component only once, regardless of how often they're used within your repositories.

• Scanning a repository only affects if a component is added or removed. Existing components are not double-counted.

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.