{"id":18652724,"url":"https://github.com/meowtec/relyzer","last_synced_at":"2025-08-20T12:32:22.365Z","repository":{"id":73762932,"uuid":"333014711","full_name":"meowtec/relyzer","owner":"meowtec","description":"Debugger for React functional components. Online demo: https://meowtec.github.io/relyzer/examples/todomvc/build/","archived":false,"fork":false,"pushed_at":"2021-11-10T03:15:46.000Z","size":3404,"stargazers_count":153,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"dev","last_synced_at":"2025-06-29T23:02:04.889Z","etag":null,"topics":["babel-plugin","react","react-hook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/meowtec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2021-01-26T08:08:55.000Z","updated_at":"2025-04-01T14:48:04.000Z","dependencies_parsed_at":"2023-07-21T16:47:03.232Z","dependency_job_id":null,"html_url":"https://github.com/meowtec/relyzer","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"d8004c4370283f64c8f9f4f2e580539761b4217e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meowtec/relyzer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meowtec%2Frelyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meowtec%2Frelyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meowtec%2Frelyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meowtec%2Frelyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meowtec","download_url":"https://codeload.github.com/meowtec/relyzer/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meowtec%2Frelyzer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267875747,"owners_count":24158781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["babel-plugin","react","react-hook"],"created_at":"2024-11-07T07:08:12.784Z","updated_at":"2025-08-20T12:32:21.815Z","avatar_url":"https://github.com/meowtec.png","language":"TypeScript","readme":"# Relyzer\n\nReact functional component debugger.\n\n## Screenshot\n\n\u003cimg width=\"1336\" alt=\"screenshot\" src=\"https://user-images.githubusercontent.com/4006436/137918770-35c4741c-a970-43ab-aba3-f1fff8cb2339.png\"\u003e\n\n## 中文说明\n\nhttps://zhuanlan.zhihu.com/p/391734514\n\n## Usage\n\n### Install packages\n\n```bash\nnpm i relyzer -D\n```\n\n### Add babel config\n\n```diff\n{\n  plugins: [\n    // enable only for development\n+    isDevelopment ? 'module:@relyzer/babel' : null,\n  ].filter(Boolean),\n}\n```\n\n**Notice that `@relyzer/babel` will do nothing when `process.env.NODE_ENV === 'production'`**\n\nBefore the use, you probably need to know how **Relyzer** works:\n\nIn order to collect the runtime information, **Relyzer** uses babel to transform the functional component code, adding some hooks code into the body.\n\n```diff\nfunction MyComponent() {\n  // relyzer will auto add some code\n+  const r = useRelyzer()\n  const a = useCallback()\n+  r(a)\n  ...\n+  r()\n}\n```\n\nReact hooks could only properly run inside functional components or other hooks. So it is important to ensure that the additional code only be added and runs in real functional components.\n\nThere are two way for that purpose:\n\n### (1) Add jsdoc\n\nUse `@component` or `'use relyzer'` for explicitly marking the function as a component:\n\nAdd `@component` tag in jsdoc of your react component\n\n```diff\n/**\n * my component\n+ * @component\n */\nfunction MyComponent() {\n  const [val, setVal] = useState();\n\n  return (\n    \u003cdiv /\u003e\n  )\n}\n\n/**\n * my component\n */\nfunction MyComponent() {\n+ 'use relyzer'\n  const [val, setVal] = useState();\n\n  return (\n    \u003cdiv /\u003e\n  )\n}\n```\n\n### (2) Use the `autoDetect` option\n\nTell Relyzer to auto detect the components.\n\nRelyzer will inject `useRelyzer` to all the functions with uppercase first letter.\nWhen `useRelyzer` called, it will try to check whether the function is called in the React render call stack\n\n```diff\n{\n  plugins: [\n    // enable only for development\n+    isDevelopment ? ['module:@relyzer/babel', { autoDetect: true }] : null,\n  ].filter(Boolean),\n}\n```\n\n### Install React Devtool\nMake sure you have installed the latest **React Devtool** in Chrome or Firefox.\n\n### Start App\n\n1. Start the dev server and open browser page\n2. Open React Devtool\n3. Select component in the components tree viewer\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeowtec%2Frelyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeowtec%2Frelyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeowtec%2Frelyzer/lists"}