{"id":26258771,"url":"https://github.com/tim-richter/spinne","last_synced_at":"2026-03-10T18:08:45.242Z","repository":{"id":262135577,"uuid":"843117360","full_name":"tim-richter/spinne","owner":"tim-richter","description":"Spins a web of component relationships for react projects ","archived":false,"fork":false,"pushed_at":"2025-06-08T16:55:54.000Z","size":283,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-01T21:12:18.440Z","etag":null,"topics":["abstract-syntax-tree","components","data-visualization","design-system","jsx","react","stats","tsx","usage"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tim-richter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-15T20:21:33.000Z","updated_at":"2025-06-08T16:55:56.000Z","dependencies_parsed_at":"2024-11-10T19:22:29.992Z","dependency_job_id":"2229abd0-7468-46a7-9636-18a4e0d8ee7c","html_url":"https://github.com/tim-richter/spinne","commit_stats":null,"previous_names":["tim-richter/spinne"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/tim-richter/spinne","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-richter%2Fspinne","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-richter%2Fspinne/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-richter%2Fspinne/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-richter%2Fspinne/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tim-richter","download_url":"https://codeload.github.com/tim-richter/spinne/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-richter%2Fspinne/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30346591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T15:55:29.454Z","status":"ssl_error","status_checked_at":"2026-03-10T15:54:58.440Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abstract-syntax-tree","components","data-visualization","design-system","jsx","react","stats","tsx","usage"],"created_at":"2025-03-13T22:14:04.722Z","updated_at":"2026-03-10T18:08:45.210Z","avatar_url":"https://github.com/tim-richter.png","language":"Rust","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.imghippo.com/files/wZYd5959gc.png\" height=\"200\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Spinne\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nSpins a web of component relationships for React projects\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://crates.io/crates/spinne\"\u003e\u003cimg alt=\"Crates.io Version\" src=\"https://img.shields.io/crates/v/spinne?style=for-the-badge\u0026label=%20\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003e WIP: Spinne is in early development and report structure and cli options are subject to change.\n\n---\n\nSpinne 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:\n- component usage\n- component relationships\n\n## Example\n\nSpinne can analyze both single React projects and workspaces containing multiple projects. Here's an example output showing component relationships across multiple projects:\n\n```json\n[\n  {\n    \"name\": \"source-lib\",\n    \"graph\": {\n      \"components\": [\n        {\n          \"id\": \"dea225e218217fa98620aeb7242b3851655e96258942a1fe00ed793a2c92f82a\",\n          \"name\": \"Button\",\n          \"path\": \"source-lib/src/components/Button.tsx\",\n          \"props\": {\n            \"label\": 1,\n            \"onClick\": 1\n          }\n        }\n      ],\n      \"edges\": []\n    }\n  },\n  {\n    \"name\": \"consumer-app\",\n    \"graph\": {\n      \"components\": [\n        {\n          \"id\": \"fa6edff46e48143e680c8f708e071a97bbc34cdf985073be887ea0731c1232ea\",\n          \"name\": \"App\",\n          \"path\": \"consumer-app/src/App.tsx\",\n          \"props\": {}\n        }\n      ],\n      \"edges\": [\n        {\n          \"from\": \"fa6edff46e48143e680c8f708e071a97bbc34cdf985073be887ea0731c1232ea\",\n          \"to\": \"dea225e218217fa98620aeb7242b3851655e96258942a1fe00ed793a2c92f82a\",\n          \"project_context\": \"source-lib\"\n        }\n      ]\n    }\n  }\n]\n```\n\nFor the graph, we use a directed graph where relationships between components are represented by edges. Each component has a unique hash ID and belongs to a project (indicated by the outer `name` field). Edges can be within the same project or across projects, with the `project_context` field indicating when a component depends on a component from another project.\n\nIn this example:\n- The `Button` component is defined in the `source-lib` project\n- The `App` component in `consumer-app` uses the `Button` component\n- The edge from `App` to `Button` includes `project_context: \"source-lib\"` to indicate it's a cross-project dependency\n- Component props are tracked with usage counts (e.g., `\"label\": 1` means the prop is used once)\n\n## Installation\n\nSpinne is a command line tool written in rust, so the easiest way to install it is via cargo:\n\n```bash\ncargo install spinne\n```\n\n## Usage\n\nTo scan for components in your current directory:\n\n```bash\nspinne\n```\n\nThis command will output the results in a file named 'spinne-report.json' by default.\nIf you want to output it directly to the console you can use `-f console`:\n\n```bash\nspinne -f console\n```\n\nTo generate an interactive HTML visualization of the component graph:\n\n```bash\nspinne -f html\n```\nThis will create 'spinne-report.html' and automatically open it in your default browser.\n\nIf you need the raw JSON without any log output (for example to send it to a server) you can use `-f json` and pipe it directly to `curl` or `wget`:\n\n```bash\nspinne -f json | curl -X POST -H \"Content-Type: application/json\" -d @- https://example.com/api/store\n```\n\n## Options\n\n| Option | Description | Options | Default |\n| --- | --- | --- | --- |\n| `-e, --entry \u003cpath\u003e` | Entry point directory | Path | current directory (./) |\n| `-f, --format \u003cformat\u003e` | Output format | `file`, `console`, `html`, `json` | `file` |\n| `--exclude \u003cpatterns\u003e` | Glob patterns to exclude | comma separated patterns | `**/node_modules/**,**/dist/**,**/build/**,**/*.stories.tsx,**/*.test.tsx` |\n| `--include \u003cpatterns\u003e` | Glob patterns to include | comma separated patterns | `**/*.tsx` |\n| `-l` | Verbosity level | Use multiple times (-l, -ll, etc.) | 0 |\n\n## Configuration File\n\nYou 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.\n\nExample `spinne.json`:\n```json\n{\n  \"include\": [\"**/*.tsx\", \"**/*.ts\"],\n  \"exclude\": [\"**/node_modules/**\", \"**/dist/**\", \"**/*.test.tsx\"],\n  \"entry_points\": [\"src/index.tsx\", \"src/components/index.ts\"]\n}\n```\n\n### Configuration Options\n\n| Option | Description | Type |\n| --- | --- | --- |\n| `include` | Array of glob patterns for files to include in the analysis | `string[]` |\n| `exclude` | Array of glob patterns for files to exclude from the analysis | `string[]` |\n| `entry_points` | Array of file paths to analyze for exports | `string[]` |\n\nThe 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.\n\n## Workspace Support\n\nSpinne automatically detects and analyzes all React projects within a workspace. A project is identified by the presence of both a `package.json` file and a `.git` directory. This means Spinne can:\n\n- Handle projects in subdirectories\n- Process multiple independent projects in a directory structure\n\nWhen analyzing a workspace:\n1. Spinne first discovers all valid React projects in the directory tree\n2. Each project is analyzed independently\n3. Component relationships are tracked per project\n4. Results are aggregated in the final output\n\nYou can run Spinne at any level of your directory structure:\n- Run it in a specific project directory to analyze just that project\n- Run it in a workspace root to analyze all contained projects\n- Run it in any parent directory to discover and analyze all projects beneath it\n\n```bash\n# Analyze a specific project\ncd my-project \u0026\u0026 spinne\n\n# Analyze multiple projects from a parent directory\ncd dev/projects \u0026\u0026 spinne\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-richter%2Fspinne","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftim-richter%2Fspinne","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-richter%2Fspinne/lists"}