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

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

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.