0.1.2 • Published 4 years ago
iaktta.preact v0.1.2
iaktta
A small observable state container.
I would recommend you stick to the more popular state management libraries.
Installing
npm install iaktta.preact
Example
import { observable, observer } from 'iaktta.preact';
import { h } from 'preact';
const model = observable({ counter: 0 });
const increment = () => model.counter ++;
const decrement = () => model.counter --;
const Counter = observer(() => (
<div>
<button onClick={decrement}>-</button>
<strong>{model.counter}</strong>
<button onClick={increment}>+</button>
</div>
));
render(<Counter />, document.body);
Size
§ sh scripts/get-size
"version": "0.0.18",
preact build:
2.03 kb minified
0.92 kb gzipped
Public functions
observable
The observable
function creates a new observable object.
When a property of this object is accessed or modified, its observers are notified.
import { observable } from 'iaktta.preact';
const model = observable({ counter: 0 });
const inc = () => model.counter ++;
// also works with decorator syntax for class properties
class Model {
@observable counter = 0;
inc: () => { this.counter++; }
}
observer
observer
will automatically rerender a component when an observable changes.
import { observable, observer } from 'iaktta.preact';
import { render, h, Component } from 'preact';
const model = observable({ counter: 0 });
const inc = () => model.counter ++;
const Example = observer(() => <div onClick={inc}>{model.counter}</div>);
render(<Example />, document.body);
import { observer } from 'iaktta.preact';
import { render, h, Component } from 'preact';
// Also works with class Components
@observer
class Example extends Component {
render() { return <div onClick={inc}>{model.counter}</div>; }
}
computed
A computed value caches the result of a potentially heavy operation, only re-running it if the underlying values have changed.
import { observable, computed } from 'iaktta.preact';
const model = observable({ value: 100 });
const randomValue = computed(() => (Math.random() * model.value) | 0);
console.log(randomValue()); // 13
console.log(randomValue()); // 13
console.log(randomValue()); // 13
model.value = 200;
console.log(randomValue()); // 163
// also works with decorator syntax for class properties
class Model {
@observable value = 100;
@computed get randomValue() {
return (Math.random() * this.value) | 0;
}
}