An open API service indexing awesome lists of open source software.

https://github.com/sveiljs/sveil

Sveil core (svelte additional features)
https://github.com/sveiljs/sveil

library state-management stores svelte typescript utils

Last synced: about 2 months ago
JSON representation

Sveil core (svelte additional features)

Awesome Lists containing this project

README

          

# sveil (alpha version)
Sveil core.

- Allow to subscribe for svelte stores (with unsubscribeAll option)
- Allow to get current value of store with $ sign (emulate svelte store auto subscription behaiour)

## Instalation
```
npm i @sveil/core
```

## Basic example
```
/* eslint-disable @typescript-eslint/no-empty-interface */
import { type SubscribitionsBase, Subscribitions } from '@sveil/core';
import type { SvelteComponentState, SvelteStore, SvelteStoreFn } from '@sveil/core';

export interface State extends SvelteComponentState {
counter: SvelteStore;
counterIncrement: SvelteStoreFn;
counterSet: SvelteStoreFn;
}

// Add properties in type
export interface ComponentService extends SubscribitionsBase {}

// Add properties in runtime
export class ComponentService extends Subscribitions {
constructor(state: State) {
super(state);
// after call super - value of counter should be accessable in class with this.$counter
// in component you just need to call this.unsubscribeAll() in onDestroy
this.addSubscription(this.addSubscriptionLog()); //subscription option 1
this.subscribeStore(this.counter, this.subscribeStoreLog); //subscription option 2
}

logCounter() {
console.log('this.$counter', this.$counter); //current value of counter store
}

addSubscriptionLog() {
return this.counter.subscribe((n) => {
console.log('addSubscription callback', n);
});
}

subscribeStoreLog(n: number) {
console.log('subscribeStore callback', n);
}
}
```