Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

lit-store

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lit-store - npm Package Compare versions

Comparing version
1.2.2
 to
1.2.3
+2
-2
demo/stores.ts

@@ -1,2 +0,2 @@

import { BaseStore, IStore } from '../src/store';
import { BaseStore } from '../src/store';

@@ -35,3 +35,3 @@

updateLvlStatus(lvl: number){
this.data.lvlStatus = `Текущий уровень равен: ${lvl}`;
this.data.lvlStatus = `Current level: ${lvl}`;
}

@@ -38,0 +38,0 @@ };

+1
-1
package.json
{
"name": "lit-store",
"version": "1.2.2",
"version": "1.2.3",
"description": "Extry tiny state manager for LitElement",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

+59
-21
readme.md

@@ -6,13 +6,7 @@ # LitStore

### Simple shared app state management for LitElement.
### Simple shared app state management for Lit components.
LitStore automatically re-renders your LitElement components, when a shared app
state variable they use changes. It's like LitElement's
[properties](https://lit-element.polymer-project.org/guide/properties), but
then shared over multiple components.
LitStore automatically re-renders your Lit components, when a shared app
state variable they use changes.
It's tiny, simple but still powerful, just like
[LitElement](https://lit-element.polymer-project.org/) and
[lit-html](https://lit-html.polymer-project.org/).
## Installation

@@ -32,3 +26,5 @@

You can subscribe/unsibscribe to store variable from another store uses `on/off` methods.
## Usage

@@ -39,5 +35,6 @@

```javascript
import { createStore, createLitStore } from './src'
import { html, customElement, LitElement } from 'lit-element';
class myStore {
import { BaseStore } from '../src/store';
class RootStore extends BaseStore{
data = {

@@ -48,2 +45,6 @@ lvl: 1,

}
constructor(){
super();
this.initState();
}
increment(){

@@ -55,5 +56,28 @@ this.data.lvl++;

}
}
const store = new (createStore(myStore));
const state = store.data;
};
class LVLMonitor extends BaseStore {
data = {
lvlStatus: ""
}
constructor(root: typeof rootStore){
super();
this.initState();
this.updateLvlStatus(root.data.lvl)
root.on("lvl", lvl => {
this.updateLvlStatus(lvl as number);
})
}
updateLvlStatus(lvl: number){
this.data.lvlStatus = `Current level: ${lvl}`;
}
};
export const rootStore = new RootStore;
export const rootState = rootStore.data;
export const lvlMonitorStore = new LVLMonitor(rootStore);
export const lvlMonitorState = lvlMonitorStore.data;
```

@@ -67,3 +91,8 @@

```javascript
import { rootState, rootStore, lvlMonitorState } from './stores';
import { observeLitElement } from '../src'
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators'
@customElement("demo-comp")

@@ -73,15 +102,24 @@ class DemoComponent extends observeLitElement(LitElement) {

return html`
<h2>${state.userName}</h2>
<div>
<button @click=${() => rootStore.toggle()}>toggle</button>
${
state.isHidden
rootState.isHidden
? ""
: html`<div>Current level: ${state.lvl}</div>`
: html`<button @click=${() => rootStore.increment()}>LVL UP</button>`
}
</div>
<button @click=${() => store.increment()}>LVL UP</button>
<button @click=${() => store.toggle()}>toggle</button>
`;
}
}
@customElement("user-component")
class MyComponent extends observeLitElement(LitElement) {
render() {
return html`
<div>
<h2>${rootState.userName}</h2>
<h3>${lvlMonitorState.lvlStatus}</h3>
</div>
`;
}
}
```

@@ -94,2 +132,2 @@

A component using the `observeLitElement()` mixin will re-render when any variabale in `data` - which it read in the last render cycle - changes.
A component using the `observeLitElement()` mixin will re-render (call `requestUpdate()`) when any variabale in `data` - which it read in the last render cycle - changes.