sebnitu / vrembem / 11371011935

94%

main: 100%

push

github

Create new propStore plugin (#2081)

## What changed?

This PR creates the `propStore` plugin which allows the creation of a reactive property on entry objects that can also be stored in local storage. This allows for creating reactive functionality based on the state of an entry as well as persisting the state across sessions. The local storage object can be a accessed through the plugin instance (`plugin.store.[get||set]`) or the entry object (`entry.store`).

With this update, all plugins now get processed through `createPluginObject` which allows subscribing to component lifecycle hooks as well as setting a custom plugin name value for multiple uses in the same component.

### Use cases

This plugin can be used in many ways, but here are some practical use cases in the context of drawer and modal components. 

**Persisting Drawer State**

In this example we want to persist the open state of an inline drawer across sessions. To do this, we setup a watch on the `inlineState` property of entries with the default value of the local storage. We update the value of local storage using the `condition` function which only stores the value if the drawer is opened or closed. We use the `onChange` method to apply the new state whenever it changes.

```js
import Drawer from "@vrembem/drawer";
import { propStore } from "@vrembem/core";

const drawer = new Drawer({
  plugins: [
    propStore({
      prop: "inlineState",
      value: (entry) => entry.store,
      condition: (entry) => ["opened", "closed"].includes(entry.state),
      onChange: (entry) => entry.applyState()
    })
  ]
});
```

**Persisting Modal State**

In this example we want to persist the open state of modals across sessions. To do this, we watch the `state` (by default) property on entry objects. We use the `onChange` callback to store the stack array in local storage. We then setup a `afterMount` lifecycle hook to open all modals in the stack array after the ... (continued)

669 of 669 branches covered (100.0%)

Branch coverage included in aggregate %.

183 of 183 new or added lines in 14 files covered. (100.0%)

2410 of 2410 relevant lines covered (100.0%)

137.4 hits per line