https://github.com/monojack/immerx-devtools
DevTools middleware for Immer and Immerx
https://github.com/monojack/immerx-devtools
Last synced: about 1 year ago
JSON representation
DevTools middleware for Immer and Immerx
- Host: GitHub
- URL: https://github.com/monojack/immerx-devtools
- Owner: monojack
- Created: 2020-05-29T20:30:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:23:46.000Z (over 3 years ago)
- Last Synced: 2025-05-12T04:45:45.699Z (about 1 year ago)
- Language: JavaScript
- Size: 3.49 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**DevTools** middleware for [ImmerX](https://github.com/monojack/immerx)
### Install the Chrome DevTools Extension
From the **[Chrome Web Store](https://chrome.google.com/webstore/detail/immerx-devtools/jchcefekimgnfceonnnekpgmphepengp)**
Or **manually**:
1. Download the `devtools-extension.zip` file from the [releases page](https://github.com/monojack/immer-devtools/releases) and unzip it anywhere you like
2. Navigate to `chrome://extensions` or from the menu - `More Tools -> Extensions`
3. Enable `Developer mode` from the top-right corner
4. Click on `Load unpacked` and select the unzipped folder
**Note**: The panel will not show up in the developer tools until you've [set up](#setup) the middleware.
### Middleware setup
We just create the middleware and add it to the middleware list when creating the **immerx** state.
```js
import { create } from '@immerx/state'
import { createDevToolsMiddleware } from '@immerx/devtools'
const devToolsMiddleware = createDevToolsMiddleware()
create(
{
todos: [{ label: 'Taste JavaScript', completed: false }],
},
[devToolsMiddleware], // <-- here
)
```
### Interface
Here are the different views and elements of the **DevTools** interface.
#### `Update List`
Note that this is a list of updates, not patches. As a result of updating the state you may be replacing some value, remove other, or maybe even add some. Immer will generate a patch for each of these operations, so an update may contain 0 or more patches. If an update contains more than one patch, it will display all the performed operations and the common path for all of them.
The first entry - **`INIT`** - is not actually an update, but it represents the initial value of our state.
#### `Patches`
By switching to the **`Patches`** view we can see a list with all of the patches that were applied during the selected update.
#### `State`
This is where we have a view of the entire **`state`** tree. Whether it is the most recent value - when there's no selection _(left)_ - or the value relevant to the selected update _(right)_
#### `Diff`
Diffing is done with [@immerx/patchdiff](https://github.com/monojack/immerx-patchdiff) and it's strictly based on immer patches, meaning that we'll see exactly what and how it changed rather than a deep diff. This is a lot more relevant and helps us spot and remediate irrelevant changes to leverage [structural sharing](https://egghead.io/lessons/react-profile-react-rendering-and-optimize-with-memo-to-leverage-structural-sharing).
### Demo
[Todo MVC](https://monojack.github.io/immerx-todomvc/)