{"id":15392384,"url":"https://github.com/activeguild/react-component-analyzer","last_synced_at":"2026-02-24T09:32:04.412Z","repository":{"id":38823116,"uuid":"443597160","full_name":"activeguild/react-component-analyzer","owner":"activeguild","description":"It plays an auxiliary role in visualizing the component design during implementation and activating smooth discussions. It will lead to shrinking the cost of development.","archived":false,"fork":false,"pushed_at":"2023-01-13T14:14:36.000Z","size":672,"stargazers_count":24,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-13T13:43:43.739Z","etag":null,"topics":["analyze","diagram","react","typescript","visualize"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/activeguild.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-01T18:16:31.000Z","updated_at":"2025-01-16T17:43:13.000Z","dependencies_parsed_at":"2023-02-09T16:00:46.817Z","dependency_job_id":null,"html_url":"https://github.com/activeguild/react-component-analyzer","commit_stats":null,"previous_names":["activeguild/visualize-react-component"],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/activeguild/react-component-analyzer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Freact-component-analyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Freact-component-analyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Freact-component-analyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Freact-component-analyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/activeguild","download_url":"https://codeload.github.com/activeguild/react-component-analyzer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Freact-component-analyzer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29777878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T04:54:30.205Z","status":"ssl_error","status_checked_at":"2026-02-24T04:53:58.628Z","response_time":75,"last_error":"SSL_read: 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":["analyze","diagram","react","typescript","visualize"],"created_at":"2024-10-01T15:14:43.395Z","updated_at":"2026-02-24T09:32:04.393Z","avatar_url":"https://github.com/activeguild.png","language":"HTML","readme":"\u003ch1 align=\"center\"\u003ereact-component-analyzer ⚡ Welcome 😀\u003c/h1\u003e\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://github.com/actions/setup-node\"\u003e\u003cimg alt=\"GitHub Actions status\" src=\"https://github.com/activeguild/react-component-analyzer/workflows/automatic%20release/badge.svg\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAnalyze the component tree of react and displays it as a diagram in the browser.\nYou can refer to the corresponding code from the diagram.\n\n[Demo](https://hardcore-fermat-22326b.netlify.app/)\n\n## Screenshots\n\n![demo.png](https://user-images.githubusercontent.com/39351982/151507430-aa84e421-f77f-45aa-ba76-76504ebd7610.png)\n\n## Motivation\n\n- It plays an auxiliary role in visualizing the component design during implementation and activating smooth discussions.\n- It will lead to shrinking the cost of development.\n\n## Point\n\n- Using the popular library, [@typescript-eslint/typescript-estree](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/typescript-estree) AST to do the analysis.\n- By using VSCode's schema in the Browser, you can quickly check the implementation of components you are interested in.If you do not have vscode installed, you can also check the code in your browser.\n- If you are using vite without setting it in the config file, you can resolve the alias from vite.config.ts.\n- It uses [prismjs](https://github.com/PrismJS/prism/), which allows for code reading that is more like an IDE.\n\n## On Daiagram\n\n- You can check the code of the component.\n- Reference to VS Code allows code to be referenced in VS Code.\n- New nodes can be added by double-clicking on a background other than the component.\n- Links between each node can be removed by double-clicking.\n- Dragging from the top and bottom of a node to another node to link to it.\n\n## Install\n\n```bash\nnpm i -D react-component-analyzer\n```\n\n## Usage\n\nBy specifying the React root file and the component files, it will parse them and output the `stats.html` file.\n\n```\nnpx rca ./src/main.tsx\n```\n\n## Config\n\nThe following options can be set in the configuration file.\nPrepare a `rca.config.js` file with the following properties.\n\n| Property   | Type    | Description                                                              |\n| ---------- | ------- | ------------------------------------------------------------------------ |\n| vscode     | boolean | Use vscode schema to code jump to the target component. (default `true`) |\n| alias      | Array   | Specify multiple aliases for entry points.                               |\n| outputPath | string  | Specify the absolute path of the file to be output after analysis.       |\n\n`alias Property`\n| Property | Type | Description |\n| -------- | ----- | ----------- |\n| find | String | Entry point alias. |\n| replacement | String | Resolve aliases by specifying absolute paths. |\n\n#### Sample\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n  alias: [\n    {\n      find: '@',\n      replacement: path.resolve(__dirname, 'src'),\n    },\n  ],\n}\n```\n\n## Principles of conduct\n\nPlease see [the principles of conduct](https://github.com/activeguild/react-component-analyzer/blob/master/.github/CONTRIBUTING.md) when building a site.\n\n## License\n\nThis library is licensed under the [MIT license](https://github.com/activeguild/react-component-analyzer/blob/master/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Freact-component-analyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factiveguild%2Freact-component-analyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Freact-component-analyzer/lists"}