https://github.com/acryps/page-observable
Renderable observables for @acryps/page
https://github.com/acryps/page-observable
Last synced: 4 months ago
JSON representation
Renderable observables for @acryps/page
- Host: GitHub
- URL: https://github.com/acryps/page-observable
- Owner: acryps
- Created: 2023-08-14T07:37:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-13T09:55:07.000Z (over 1 year ago)
- Last Synced: 2025-01-08T10:14:35.704Z (6 months ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
[](http://badge.acryps.com/go/npm/@acryps%2Fpage-observable)
# @acryps/page observables
Adds observables to page!
Creating an observable
```
const magicNumber = new Observable();
```
Listening for changes
```
magicNumber.subscribe(value => console.log(value));
```
Pushing new changes
```
magicNumber.emit(1);
```
Embedding value into component
```
class ItemsComponent extends Component {
render() {
return
Mapped to a string: {magicNumber.map(value => value.toFixed(3))}
Mapped to an element: {magicNumber.map(value =>
{value}
)}
Automatically mapped: {magicNumber} (only recommended for strings & numbers)
;
}
}
```
## Example
```
class PageComponent {
render(child) {
return
Shop
Cart ({CartComponent.items.map(items => items.length)})
{child}
;
}
}
class CartComponent {
static items = new Observable();
items = [
'carrots',
'apples'
];
render() {
return
{
items.push('bananas');
CartComponent.items.emit(items);
}}>
;
}
}
```