https://github.com/meowtec/relyzer
Debugger for React functional components. Online demo: https://meowtec.github.io/relyzer/examples/todomvc/build/
https://github.com/meowtec/relyzer
babel-plugin react react-hook
Last synced: about 2 months ago
JSON representation
Debugger for React functional components. Online demo: https://meowtec.github.io/relyzer/examples/todomvc/build/
- Host: GitHub
- URL: https://github.com/meowtec/relyzer
- Owner: meowtec
- License: mit
- Created: 2021-01-26T08:08:55.000Z (over 4 years ago)
- Default Branch: dev
- Last Pushed: 2021-11-10T03:15:46.000Z (almost 4 years ago)
- Last Synced: 2025-06-29T23:02:04.889Z (3 months ago)
- Topics: babel-plugin, react, react-hook
- Language: TypeScript
- Homepage:
- Size: 3.25 MB
- Stars: 153
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Relyzer
React functional component debugger.
## Screenshot
## 中文说明
https://zhuanlan.zhihu.com/p/391734514
## Usage
### Install packages
```bash
npm i relyzer -D
```
### Add babel config
```diff
{
plugins: [
// enable only for development
+ isDevelopment ? 'module:@relyzer/babel' : null,
].filter(Boolean),
}
```
**Notice that `@relyzer/babel` will do nothing when `process.env.NODE_ENV === 'production'`**
Before the use, you probably need to know how **Relyzer** works:
In order to collect the runtime information, **Relyzer** uses babel to transform the functional component code, adding some hooks code into the body.
```diff
function MyComponent() {
// relyzer will auto add some code
+ const r = useRelyzer()
const a = useCallback()
+ r(a)
...
+ r()
}
```
React 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.
There are two way for that purpose:
### (1) Add jsdoc
Use `@component` or `'use relyzer'` for explicitly marking the function as a component:
Add `@component` tag in jsdoc of your react component
```diff
/**
* my component
+ * @component
*/
function MyComponent() {
const [val, setVal] = useState();
return (
)
}
/**
* my component
*/
function MyComponent() {
+ 'use relyzer'
const [val, setVal] = useState();
return (
)
}
```
### (2) Use the `autoDetect` option
Tell Relyzer to auto detect the components.
Relyzer will inject `useRelyzer` to all the functions with uppercase first letter.
When `useRelyzer` called, it will try to check whether the function is called in the React render call stack
```diff
{
plugins: [
// enable only for development
+ isDevelopment ? ['module:@relyzer/babel', { autoDetect: true }] : null,
].filter(Boolean),
}
```
### Install React Devtool
Make sure you have installed the latest **React Devtool** in Chrome or Firefox.
### Start App
1. Start the dev server and open browser page
2. Open React Devtool
3. Select component in the components tree viewer