Omlet Docs
BlogChangelogAsk the CommunityContact Sales
  • Get started
    • What is Omlet?
    • CLI & Dashboard
  • Omlet for VS Code
  • CLI & Dashboard
    • CLI
      • Your first scan
      • Set up your dashbard
      • Future scans
      • Ensure data accuracy
      • Config file
        • Exports configuration
        • Mapping aliases
        • Excluding certain components & files
        • Tutorial: Config file
      • Custom component properties
        • CLI hooks
        • Tutorial 1: Team/code owner usage
        • Tutorial 2: Package version tracking
        • Other example scripts
      • Set up regular scans
      • CLI commands
        • init
        • analyze
        • login
    • Analytics
      • Popular charts
      • Create custom charts
      • Save charts to dashboard
      • Share charts and dashboards with your team
      • Download chart data
    • Components
      • Search and filter components
      • Component tags
      • Dependency Tree
      • Props tracking
    • Workspace & Account
      • Invite team members
      • Renaming projects
      • Update your email address
      • Access your billing details & invoices
  • Security
    • Security in Omlet
    • Data collection
  • Help
    • Pricing
    • FAQs
      • How detection works?
      • Monorepo support
      • How to delete scans?
      • Omlet vs. React Scanner
      • Working with multiple workspaces
    • Troubleshooting
      • Debugging CLI issues
      • Some components aren't detected
      • API failed or timeout
      • Are you behind a proxy?
      • Troubleshooting Git errors
Powered by GitBook
On this page
  • Component detection
  • In React Scanner, components with zero usages and Components used out of JSX expressions are not detected
  • Dependencies among components defined in the same module are not detected
  • Usages are reported at the file level, so dependencies of components defined in the same module are not visible
  • Import resolution
  • react-scanner does not follow exports to find the source component for imports.
  • Alias resolution
  • Missing in Omlet
  1. Help
  2. FAQs

Omlet vs. React Scanner

Before Omlet was around, the most common way developers would analyze component usage was to use React Scanner. Let's look at how is Omlet different.

Component detection

In React Scanner, components with zero usages and Components used out of JSX expressions are not detected

For example, the usage of UserProfile and CompanyProfile components in the Profile are not detected by react-scanner. Instead, it reports the usage of a component called Component, which is the intermediary variable used for selecting the right profile component in this component.

function Profile({ accountType }) {
  const components = {
    userProfile: UserProfile,
    companyProfile: CompanyProfile
  };

  const Component = components[accountType]

  return (
    <>
      ...
      <Component>...</Component>
    </>
  );
}

Dependencies among components defined in the same module are not detected

Dependency between NamedComponentWrapped and ComponentUsingNamedWrappedComponent is missing in react-scanner results.

export function ComponentUsingNamedWrappedComponent() {
    return <NamedComponentWrapped/>;
}
export function NamedComponentWrapped() {
    return <div></div>;
}

Usages are reported at the file level, so dependencies of components defined in the same module are not visible

If you use use the below code as an example:

navigation.jsx
import { Button, Input } from "./components";

export function Footer() {
    return <div>
        <Button/>
    </div>;
}

export function Header() {
    return <div>
        <h1>Hello</h1>
        <Input/>
    </div>;
}

react-scanner's usage detection result will be:

  • Button in components/navigation.jsx

  • Input in components/navigation.jsx

whereas Omlet will report the following:

  • Footer uses Button

  • Header uses Input

Import resolution

react-scanner does not follow exports to find the source component for imports.

Instead, it detects names imported from modules. This causes duplicate components and incorrect usage numbers. For example if we use the below example…This results in 4 separate button components in react-scanner data since each of them has distinct import name and import path combinations:

  • Button from components/Button

  • Button from components/Button/Button

  • SameButton from components/Button

  • TheButton from components/Button

In react-scanners report, each combination has their separate usage counts where Omlet detects that they’re actually the same component and gives the total (correct) number of usages.

// file: components/Button/Button.jsx
export function Button() { .. }

// file: components/Button/index.jsx
import { Button } from "./Button";
export { Button };
export default Button;

// file app/pageA.jsx
import { Button } from "../components/Button";

// file app/pageB.jsx
import { Button } from "../components/Button/Button";

// file app/pageC.jsx
import SameButton from "../components/Button";

// file app/pageC.jsx
import TheButton from "../components/Button";

Alias resolution

Aliased imports appear as separate components in react-scanner reports. Similar to the case mentioned under the Import resolution section, this causes fragmented usage counts and duplicate entries.

// file: frontend/src/layout/navigation/TopBar/SitePopover.tsx
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'

// file: frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
import { ProfilePicture } from '../ProfilePicture'

Missing in Omlet

  • HTML tags in JSX are not detected: Omlet doesn’t detect React element equivalent of HTML tags such as div, img, etc.

  • Instance counts: Omlet doesn't count component instances. Instead, it reports unique parent components for each component. react-scanner reports each instance separately.

PreviousHow to delete scans?NextWorking with multiple workspaces

Last updated 1 year ago