open-index/open-npm huggingface dataset:
npm package: @plusnew/simulate-dom-events
Description: Simulates browser behaviour of dom event groups
Author: Carlo Jeske
Latest version: 0.1.5

# domevents
Simulates browser behaviour of dom event groups 

## Goal
To have an abstraction layer for testing applications with dom events.

## API
```ts

  import { click } from '@plusnew/simulate-dom-events';

  const checkboxElement = <input type="checkbox" onclick={() => console.log('click fired')} onchange={() => console.log('change fired!')}/> as HTMLInputElement;

  click(checkboxElement);
  // The mousedown, mouseup, click, input and change event will dispatch synchronously with the correct values
  // In case in the click event a prevendDefault() is called, the input and change event will not occur
```
npm package: @plusnew/state
Description: library for doing complex statemanagement in plusnew
Author: Carlo Jeske
Latest version: 0.17.6

# 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>
);
````