# immer-path

> ## Why

Latest version **0.1.1** (published 2022-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install immer-path
pnpm add immer-path
yarn add immer-path
bun add immer-path
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-08-09 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xcodebuild |
| Maintainers | xcodebuild |

## Links

- npm: https://www.npmjs.com/package/immer-path
- npm.io page: https://npm.io/package/immer-path

## Recent versions

- 0.1.1 (latest) — 2022-08-09
- 0.1.0 — 2022-08-09

## README

# immer-path

## Why

Manipulate JavaScript Object with `immer` is very easy, but it's hard to manipulate a deep-nested Object.

For example, a `<Component />` may handle a state object in the tree.

```
   root
    / \
   /   \
  2     \
 / \     3
4   5   / \
       9   \
           obj  <--- `<Component />` render and update this
           / \
          6   7
```

The problem is:

- How to update `obj` in `root`?
- How to get next state of `obj`?

If `<Component />` hold the `obj` object, we can find it in `root` tree and update it, but can not get next `obj` in next `root`.

So the solution is give every object a `$$path`, `<Component />` hold `$$path` of `obj`, and update & get next value with `$$path`.

## Usage

```tsx
import {
  initPath,
  producePath,
  findByPath,
} from 'immer-path';

const target = {
  hey: {
    yes: 'hello',
  },
};

// init
const targetPath = initPath(target);

// get path, <Component /> hold this
const nodePath = targetPath.hey.$$path;

const nextData = producePath(targetPath, (draft) => {
  // find obj with path
  const node = findByPath(draft, nodePath) as any;

  // update it
  node.yes = 'yes';
});
```

---
_Source: https://npm.io/package/immer-path · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._