#component #react #projects #relationships #tool #cli #command-line-tool

app spinne

spinne is a cli tool that analyzes design system usage for react projects

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

Download history 85/week @ 2024-11-05 23/week @ 2024-11-12 6/week @ 2024-11-19 1/week @ 2024-11-26 9/week @ 2024-12-03 3/week @ 2024-12-10 257/week @ 2025-01-07 469/week @ 2025-01-14 35/week @ 2025-01-21 42/week @ 2025-01-28 77/week @ 2025-02-04

643 downloads per month

MIT license

135KB
3K SLoC

Spinne

Spins a web of component relationships for react projects

Crates.io Version


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