Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/effector/inspector
Inspector for effector stores
https://github.com/effector/inspector
effector
Last synced: 3 months ago
JSON representation
Inspector for effector stores
- Host: GitHub
- URL: https://github.com/effector/inspector
- Owner: effector
- Created: 2020-02-16T12:30:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:22:27.000Z (over 1 year ago)
- Last Synced: 2024-10-29T18:57:18.330Z (3 months ago)
- Topics: effector
- Language: TypeScript
- Homepage: https://npmjs.com/effector-inspector
- Size: 1.32 MB
- Stars: 26
- Watchers: 14
- Forks: 6
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Effector Inspector
| Dark theme and unit tracing | Units in files |
| ----------------------------------------------- | ----------------------------------------- |
|  |  |
## Installation
## Standalone
1. Install **effector-inspector**
```bash
npm install --dev effector-inspector
```
or
```bash
yarn add -D effector-inspector
```
2. Make sure, that you have either [`effector/babel-plugin`](https://effector.dev/docs/api/effector/babel-plugin/) or [`@effector/swc-plugin`](https://github.com/effector/swc-plugin) set up in your project. These plugins add metadata to all effector's units, which is then used by effector-inspector.
Check out the documentation of [`effector/babel-plugin`](https://effector.dev/docs/api/effector/babel-plugin/) or [`@effector/swc-plugin`](https://github.com/effector/swc-plugin).
3. Initialize `inspector` in your application's entrypoint (something like `index.ts` or `client.tsx`).
```ts
import {createInspector} from 'effector-inspector';
createInspector();
```
4. After that inspector is ready to work, but it does not know about any units yet. You also need to attach inspector to units.
One way to do it is to attach inspector to units manually:
```ts
import {attachInspector} from 'effector-inspector';
// single units
attachInspector($store);
attachInspector(event);
attachInspector(effectFx);
// or list of them
attachInspector([
$store,
event,
effectFx,
// any number of units in the list
]);
// or by domain
attachInspector(someDomain);
```
### effector-root
The `effector-root` library can be used for convenience, as it provides common root domain for all units.
```ts
// index.ts
import {attachInspector, createInspector} from 'effector-inspector';
import {root} from 'effector-root';
createInspector();
attachInspector(root);
```
Check out `effector-root` [documentation here](https://github.com/effector/root#how-to-auto-replace-all-imports-of-effector-to-effector-root-using-babel-plugin).
## As a part of effector-logger
1. Install effector, logger and **inspector**
```bash
npm install effector
npm install --dev effector-logger effector-inspector
```
or yarn
```bash
yarn add effector
yarn add -D effector-logger effector-inspector
```
2. Follow instructions for [effector-logger](https://github.com/sergeysova/effector-logger#installation)
- Setup babel plugin
- Replace `effector` to `effector-logger`
3. Open your root application file (something like `client.tsx` or `index.tsx`)
Initialize effector logger in it first lines.
```ts
import {createInspector} from 'effector-inspector';
createInspector();
```
4. Press hot keys to open inspector
By default: `CTRL+B` in your application
5. Watch your stores and its values
## Release process
1. Check out the [draft release](https://github.com/effector/inspector/releases).
1. All PRs should have correct labels and useful titles. You can [review available labels here](https://github.com/effector/inspector/blob/master/.github/release-drafter.yml).
1. Update labels for PRs and titles, next [manually run the release drafter action](https://github.com/effector/inspector/actions/workflows/release-drafter.yml) to regenerate the draft release.
1. Review the new version and press "Publish"
1. If required check "Create discussion for this release"