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
  • Scanning with a hook script
  • afterScan hook
  • Component object properties
  • Analyzing custom component properties
  • Next up
  1. CLI & Dashboard
  2. CLI
  3. Custom component properties

CLI hooks

Learn more about CLI hooks to add custom component properties.

CLI hooks allow you to run custom scripts on scans before the final result is sent to the backend. This offers an interface to process the component data and add custom component properties.

Scanning with a hook script

You can place your hook script in a preferred directory/folder. Once your script is ready, you scan your repository using the --hook-script command line argument.

npx @omlet/cli analyze --hook-script ./path/to/hook-script.js
yarn dlx @omlet/cli analyze --hook-script ./path/to/hook-script.js
pnpm dlx @omlet/cli analyze --hook-script ./path/to/hook-script.js

afterScan hook

Currently, afterScan is the only hook supported by Omlet CLI. This hook is executed after a scan is completed successfully.

Here is a sample hook script uses the afterScan hook:

hook-script.js
module.exports = {
    async afterScan(components) {
        for (const component of components) {
            component.setMetadata("hasStories", await hasStories(component.filePath));
            component.setMetadata("hasTests", await hasTests(component.filePath));
        }
    }
}

If you have the @omlet/cli package installed as a dependency, the @type annotation will enable auto-complete features and inline documentation for functions and components.

The setMetadata function can add properties to components with string, number, date or boolean values, such as:

  • Owner: The code owner information in the CODEOWNERS file or any custom source. i.e. @acme/design-system, @acme/backoffice, @acme/marketplace

  • Has stories: True or false depending on whether Storybook stories exist for a given component

  • # of props: Number of props of each individual component

Here are a few things to know about the afterScan hook:

  • afterScan hook can be defined both as an async or sync function.

  • The data passed to the hook is read-only, except the metadata that is editable with the setMetadata function.

  • You can use npm packages as long as they're available in the Node.js runtime.

Component object properties

Here are the properties of the Componentobject provided by the afterScan hook:

Property
Type
Description

id

String

Unique identifier for the component.

name

String

Name of the component as exported in the source code.

createdAt

Date

Creation date of the component, extracted from the git history. Optional.

updatedAt

Date

Last updated date of the component, extracted from the git history. Optional.

packageName

String

Package name the component belongs to.

filePath

String

File path to the component within the repository.

props

Array of objects

List of props of the component, including name and optional default value.

htmlElementsUsed

String[]

List of HTML elements used within the component.

children

Component[]

Child components detected in the scan.

parents

Component[]

Parent components detected in the scan.

Analyzing custom component properties

For string-based custom properties, such as Team or Codeowner, you can directly analyze them in the charts—no need to create individual tags for their values.

Next up

Check these tutorials for popular use cases CLI hooks:

Here are some other examples scripts to identify components based on Test and Storybook coverage, visual elements and @deprecated comments:

Last updated 1 month ago

Once you have your custom properties on Omlet, you can create tags based on them to analyze the component usage. To learn more, check out and take a look at documentations.

[{
    name: String,
    defaultValue: String
}, ...]
Component tags
Create custom charts
Tutorial 1: Team/code owner usage
Tutorial 2: Package version tracking
Other example scripts