How it works ​

Discover how Berryjam works in more detail. In this guide, you will get to understand that Berryjam tool has 3 parts, namely Berryjam CLI, Raw Result and Web Analytics Dashboard.

Berryjam CLI ​

Berryjam CLI identify components, their props and usage in your project. It provides built-in rules for identifying components. Here are some examples:

• Scan for components on files with certain file extensions or prefixes such as .tsx or ts.config respectively
• Identify where components are based on a set of specific directory structures.
• Look for standard export patterns within files to identify components. For instance, it would search for functions or classes with targeted annotations or decorators that indicate they are components.
• Analyze how components are used within the project by inspecting import statements, JSX/HTML templates, or other relevant code patterns.

If creating custom rules is something you are interested in, please submit your request here

When running Berryjam CLI at the top level, there are two options, namely –V and -h.

-V, --version

This option is to get the current version of your Berryjam CLI in your local machine.

npx berryjam-cli@latest -V

-h, --help

This option provides possible commands in Berryjam CLI. Under the list, there is an explanation for each command.

npx berryjam-cli@latest -h

For more information on how to use Berryjam CLI, please refer to the CLI section

Raw Result ​

After the scan is complete, the data is stored in the Berryjam application folder in JSON format. The file name is components.json. You can get to the JSON file by running two consecutive commands in your preferred terminal.

Find the Berryjam application folder and open the file:

open $HOME/.berryjam/components.json

Note: For Windows users, please replace open $HOME with start %userprofile%.

Web Analytics Dashboard ​

Using the result from the JSON file, you can scan to your workspace on Berryjam Cloud. With the Web Analytics Dashboard, you can leverage on the summary data and insights of your project’s components and their usage. The website consists of Main Dashboard and Component Gallery sections.

Main Dashboard ​

The Main Dashboard section provides a quick summary of the components and their usages in your project. Components that are developed internally, whether in whole or in part, and components that are developed from a third-party library. The page also informs you of most used components and potentially similar components by built-in rules of HTML tag.

Component Gallery ​

The Component Gallery section acts as a component database for you to drill down on each component. If you need to investigate a particular component your team has developed, you can quickly search and get to its Individual Component page to understand its relationship to other components and its props (if any).