// 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 () => {};
});

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️⃣

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️⃣

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();