subscription-stack


📬 Register a subscription in LIFO stack

Installation

``bash
npm i subscription-stack
`

Usage

`js
// 0. Import factory
import { createSubscriptionStack } from 'subscription-stack';
// 1️. Create scoped stack
const stack = createSubscriptionStack();
// 2️. Pass subscribe function
stack(() => {
// 3️. Return unsubscribe function
return () => {};
});
`

$3

`js
import { createSubscriptionStack } from 'subscription-stack';

const stack = createSubscriptionStack();

stack(() => {
const handle = () => console.log('1️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});

stack(() => {
const handle = () => console.log('2️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});

// Console:
// 2️⃣
// 1️⃣
`

$3

`js
import { createSubscriptionStackHook } from 'subscription-stack/react';

const useStack = createSubscriptionStackHook();

useStack(() => {
const handle = () => console.log('1️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});

useStack(() => {
const handle = () => console.log('2️⃣');
window.addEventListener('click', handle);
return () => window.removeEventListener('click', handle);
});

// Console:
// 2️⃣
// 1️⃣
`

How does it work

`js
const queue = new Set(); // []

// Add 1 -> [1]
stack(() => {
queue.add(1);
return () => queue.delete(1);
});

// Delete 1 -> []
// Add 2 -> [2]
// Add 1 -> [2, 1]
const unsubscribe = stack(() => {
queue.add(2);
return () => queue.delete(2);
});

// Delete 2 -> [1]
// Delete 1 -> []
// Add 3 -> [3]
// Add 2 -> [3, 2]
// Add 1 -> [3, 2, 1]
stack(() => {
queue.add(3);
return () => queue.delete(3);
});

// Delete 2 -> [3, 1]
unsubscribe();
``