Custom component properties
Learn using the CLI hooks to add custom component properties to your scan data.
Omlet's CLI hooks allow you to run custom scripts on Omlet CLI scans before the final result is sent to the Omlet backend. This offers an interface to process the component data and add custom properties.
Once those custom properties are added to components, you and your teammates can create tags based on them. Here are some use cases that you can achieve by utilizing the CLI hooks to create tags with custom properties:
Automatically tag components based on their category, such as Icons or Pages
Identify the product team or user who created a component
Find components that have missing documentation or tests
Differentiate visual vs. non-visual components
Custom properties
The custom properties can be string
, number
, date
or boolean
values. For example, you can add additional information such as:
owner
: The code owner information in the CODEOWNERS file or any custom source. i.e.@acme/design-system
,@acme/backoffice
,@acme/marketplace
hasStories
: True or false depending on whether Storybook stories exist for a given componenthasTests
: True or false depending on test specs that exist for a given component
Components can be tagged accordingly by applying the following filters:
team-ds:
metadata.owner
equals "@acme/design-system"team-marketplace:
metadata.owner
equals "@acme/marketplace"storybook:
metadata.hasStories
equals truehas-test:
metadata.hasTests
equals trueno-tests:
metadata.hasTests
equals false
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.
afterScan
hook
afterScan
hookCurrently, afterScan
is the only hook supported by Omlet CLI. This hook is executed after a scan is completed successfully.
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.
Here are the properties of the Component
object provided with the afterScan
hook:
Property | Type | Description |
---|---|---|
id |
| Unique identifier for the component. |
name |
| Name of the component as exported in the source code. |
createdAt |
| Creation date of the component, extracted from the git history. Optional. |
updatedAt |
| Last updated date of the component, extracted from the git history. Optional. |
packageName |
| Package name the component belongs to. |
filePath |
| File path to the component within the repository. |
props |
| List of props of the component, including name and optional default value. |
htmlElementsUsed |
| List of HTML elements used within the component. |
children |
| Child components detected in the scan. |
parents |
| Parent components detected in the scan. |
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.
Sample hook scripts
Code owners
You can add codeowners package as a dependency to your repository and use the following code example to add the code owner information to each component's metadata.
Test and Storybook coverage
The following hook function marks add hasTests
and hasStories
properties to each component's metadata to mark the components in terms of their test and Storybook coverages.
Visual components
The following hook function marks components as visual if they render a visual HTML element (e.g. <div>
, <img />
) or another component marked as visual. Here you can find this snippet with a full list of html tags.
Last updated