Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thepassle/atom
A flexible state manager
https://github.com/thepassle/atom
lit-element lit-html state state-management webcomponents
Last synced: 28 days ago
JSON representation
A flexible state manager
- Host: GitHub
- URL: https://github.com/thepassle/atom
- Owner: thepassle
- Created: 2020-12-13T18:11:41.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-28T13:00:02.000Z (almost 4 years ago)
- Last Synced: 2024-10-05T07:42:05.662Z (about 1 month ago)
- Topics: lit-element, lit-html, state, state-management, webcomponents
- Language: JavaScript
- Homepage: https://klaxon-atom.netlify.app/
- Size: 1.25 MB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Atom
A flexible state manager
## Quickstart 👇
### Install
Install with npm:
```bash
npm i -S @klaxon/atom
```
### Atoms
Atoms represent small pieces of reusable state, and maintain their own internal store. Whenever an update is triggered (by calling the setter function of that Atom), the Atom store dispatches an event. All components that are subscribed to that Atom will get the event, trigger an update, and cause only the relevant components to update and rerender.
```js
import { atom } from '@klaxon/atom';
const [count, setCount] = atom({
key: 'count',
default: 1
});
console.log(count.getState()); // 1
setCount(2);
setCount(old => old + 1);
console.log(count.getState()); // 3
```
### Selectors
Selectors _don't_ maintain their own internal store, instead they are dependent on Atoms. Whenever an Atom changes, any Selector that depends on that Atom will be notified, and execute the Selectors `get` function to return a new value. Selectors can be thought of as pieces of _derived_ state, or _computed_ state.
```js
import { atom, selector } from '@klaxon/atom';
const [count, setCount] = atom({
key: 'count',
default: 1
});
const doubleCount = selector({
key: 'doubleCount',
get: ({getAtom}) => {
const originalCount = getAtom(count);
return originalCount * 2;
}
});
```
### Basic usage with LitElement
You can use Atoms by registering them to a component in the static `atoms` getter, this will subscribe the component to updates for that Atom. Whenever an update for the Atom has occured, your component will set the new value of the Atom on the component, and cause the element to update.
```js
import { LitElement, html } from "lit-element";
import { LitAtom, atom } from "@klaxon/atom";
const [count, setCount] = atom({
key: 'count',
default: 0
});
export class MyCounter extends LitAtom(LitElement) {
static atoms = [count];
render() {
return html`
setCount(old => old - 1)}">-
${this.count}
setCount(old => old + 1)}">+
`;
}
}
customElements.define("my-counter", MyCounter);
```
### Todo app demo
```js
import { LitElement, html } from 'lit-element';
import { LitAtom, atom, selector } from '@klaxon/atom';
export const [todoListFilter, setTodoListFilter] = atom({
key: 'todoListFilter',
default: 'Show All',
});
export const [todoList, setTodoList] = atom({
key: 'todoList',
default: [
{text: 'not done', isComplete: false, id: 0},
{text: 'done', isComplete: true, id: 1},
]
});
const filteredTodoList = selector({
key: 'filteredTodoList',
get: ({getAtom}) => {
const filter = getAtom(todoListFilter);
const list = getAtom(todoList);
switch (filter) {
case 'Show Completed':
return list.filter((item) => item.isComplete);
case 'Show Uncompleted':
return list.filter((item) => !item.isComplete);
default:
return list;
}
},
});
class TodoList extends LitAtom(LitElement) {
static atoms = [todoListFilter];
static selectors = [filteredTodoList];
render() {
return html`
${this.todoListFilter}
setTodoListFilter("Show All")}>show all
setTodoListFilter("Show Completed")}>show completed
setTodoListFilter("Show Uncompleted")}>show uncompleted
setTodoList((oldTodoList) => [...oldTodoList, {text: 'New todo', isComplete: false, id: 1}])}>add
${this.filteredTodoList?.map(todo => html`- ${todo.text}
`)}
`;
}
}
customElements.define('todo-app', TodoList);
```