# @plusnew/state

> library for doing complex statemanagement in plusnew

Latest version **0.17.6** (published 2024-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @plusnew/state
pnpm add @plusnew/state
yarn add @plusnew/state
bun add @plusnew/state
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.17.6 |
| Published | 2024-07-12 |
| First published | 2020-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 146.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Carlo Jeske |
| Maintainers | plusgut |
| Keywords | plusnew |

## Links

- npm: https://www.npmjs.com/package/@plusnew/state
- Repository: https://github.com/plusnew/state
- Homepage: https://github.com/plusnew/state#readme
- Issues: https://github.com/plusnew/state/issues
- npm.io page: https://npm.io/package/@plusnew/state

## Recent versions

- 0.17.6 (latest) — 2024-07-12
- 0.17.5 — 2022-01-12
- 0.17.4 — 2022-01-12
- 0.17.3 — 2021-11-16
- 0.17.2 — 2021-11-16
- 0.17.1 — 2021-11-16
- 0.17.0 — 2021-10-18
- 0.16.1 — 2021-10-06
- 0.16.0 — 2021-10-06
- 0.15.2 — 2021-07-15
- 0.15.1 — 2021-06-21
- 0.15.0 — 2021-06-08
- 0.14.0 — 2021-03-05
- 0.13.1 — 2021-02-04
- 0.13.0 — 2021-01-28
- … 21 more at https://npm.io/package/@plusnew/state/versions

## README

# state

````jsx
import { component } from "@plusnew/core";
import factory from "@plusnew/state";

const { Repository, Branch, Item, List } = factory<{
  blogPost: {
    listParameter: { sort: "asc", "desc"},
    item: {
      id: string,
      model: "blogPost",
      attributes: {
        title: string
      },
      relationships: {
        author: {
          id: string,
          model: 'user',
        }
      }
    }
  },
  user: {
    listParameter: {},
    item: {
      id: string,
      model: "user",
      attributes: {
        name: string
      },
      relationships: {}
    }
  }
}>();

export default component(
  "Example"
  () =>
    <Repository
      requests={{
        blogPost: {
          readList: ({ sort }) => fetch(`/api/blogPost?sort=${sort}`).then((res) => res.json()),
          readItem: (id) => fetch(`/api/blogPost/${id}`).then((res) => res.json())
        },
        user: {
          readList: () => fetch(`/api/user`).then((res) => res.json()),
          readItem: (id) => fetch(`/api/user/${id}`).then((res) => res.json())
        },
      }}
    >
      <Branch>
        <List model="blogPost" parameter={{ sort: 'asc' }}>{({isLoading, items: blogPosts}) =>
          blogPosts.map(blogPost =>
            <Item model="blogPost" id={blogPost.id}>{(blogPostItemView) =>
              blogPostItemView.isLoading
                ? 'loading'
                :
                  <>
                    {blogPostItemView.item.attributes.title}
                    <Item model="user" id={blogPostItemView.item.relationships.author.id}>{({isLoading, item: author, commitAttributes}) =>
                      <input
                        value={author?.attributes.name ?? ""}
                        onchange={(evt) => commitAttributes({'name': evt.currentTarget.value})}
                      />
                    }</Item>
                    <Merge>{({ merge, changes }) =>
                      <button
                        onclick={() => merge(changes)}
                      />
                    }</Merge>
                  </>
            }<Item>
          )
        }</List>
      </Branch>
    </Repository>
);
````

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