9 releases
0.5.1 | Feb 3, 2025 |
---|---|
0.2.8 | Jan 18, 2025 |
0.2.0 | Nov 10, 2024 |
0.1.0 | Aug 15, 2024 |
#131 in Command line utilities
643 downloads per month
135KB
3K
SLoC
Spinne
Spins a web of component relationships for react projects
Spinne is a CLI Tool, that analyzes react projects, and creates a component graph from all components that are used. This allows you to make some educated guesses about:
- component usage
- component relationships
Example
{
"nodes": [
{
"name": "ButtonGroup",
"file_path": "my-project/src/components/Button/ButtonGroup.tsx",
"prop_usage": {}
},
{
"name": "MyComponent",
"file_path": "my-project/src/components/MyComponent.tsx",
"prop_usage": {}
}
],
"edges": [
[
0,
1
]
]
}
For the graph, we are using a directed adjacency graph, which means relationships between components are representated by edges, or weights. A '0' to '1' edge, would mean, that the first node, "ButtonGroup", uses the second node, "MyComponent", in the code of our project.
Installation
Spinne is a command line tool written in rust, so the easiest way to install it is via cargo:
cargo install spinne
Usage
To scan for components in your current directory:
spinne
This command will output the results in a file 'spinne-report.json' by default.
If you want to output it directly to the console you can use -o console
:
spinne -o console
To output the results in a html format with a visualization of the component graph:
spinne -f html
Options
Option | Description | Options | Default |
---|---|---|---|
-e, --entry <path> |
entry point directory | Path | current directory (./) |
-f, --format <format> |
define the output format | file , console , html |
file |
-i, --ignore <path> |
define ignored folders | comma separated glob patterns | **/node_modules/**,**/dist/**,**/build/** |
-l, --log-level <log-level> |
define the log level | the amount of -l used will define the log level | 0 |
--include <include> |
define a glob pattern to include | comma separated glob patterns | **/*.tsx |
--exclude <exclude> |
define a glob pattern to exclude | comma separated glob patterns | **/node_modules/**,**/dist/**,**/build/**,**/*.stories.tsx,**/*.test.tsx |
Configuration File
You can also configure Spinne using a spinne.json
file in your project root. This file allows you to define persistent configuration options that will be used every time you run Spinne.
Example spinne.json
:
{
"include": ["**/*.tsx", "**/*.ts"],
"exclude": ["**/node_modules/**", "**/dist/**", "**/*.test.tsx"]
}
Configuration Options
Option | Description | Type |
---|---|---|
include |
Array of glob patterns for files to include in the analysis | string[] |
exclude |
Array of glob patterns for files to exclude from the analysis | string[] |
The configuration file options will be merged with any command line arguments you provide. For example, if you specify both exclude patterns in your spinne.json
and via the --exclude
flag, both sets of patterns will be used.
Dependencies
~18–28MB
~409K SLoC