tieder v1.0.4

Tieder

A simple store manager library that is useful for managing a global state (store) of your application.

npm i tieder

import { sub } from 'tieder'

const header = document.querySelector('header .hello-container');
this.subscription = sub('username', (previous, current) => {
  header.innerHTML = `Hello, ${current}!`;
});

As you can see here we save our subscription to the variable. This will be used in the future. Subscription - a simple object that contains subject name and a function we just used to subscribe.

import { mut } from 'tieder'

const usernameField = document.getElementById('usernameField');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', () => {
  mut('username', usernameField.value);
});

Note! To handle subscription events properly you should set your subscritions first and then mutate the correspondend states. Basically it means that you should call sub() before mut(). Otherwise it will not work and it will act like a functionless subject.

import { unsub } from 'tieder'

const closeBtn = document.getElementById('closeBtnId')
closeBtn.addEventListener('click', () => {
  unsub(this.subscription);
});

As you can see, here we use our saved subscription object. This is needed for store engine to know what function must be removed from the subject.

import { destroy } from 'tieder'

const closeBtn = document.getElementById('closeBtnId')
closeBtn.addEventListener('click', () => {
  destroy('username');
});

import { subject } from 'tieder'

const username = subject('username')?.cur
if (username) { ... }

import { stop } from 'tieder'