https://github.com/acryps/page-observable

Renderable observables for @acryps/page
https://github.com/acryps/page-observable

Last synced: 5 days 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-13T09:55:07.000Z (11 months ago)
• Last Synced: 2023-12-13T10:50:08.154Z (11 months ago)
• Language: TypeScript
• Size: 21.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.acryps.com/npm/@acryps%2Fpage-observable)](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);

			}}>

		;

	}

}

```