Реализация аналогов useLocalStorage, useMouse и useEventListener на чистом JavaScript — чтобы понять, что делает VueUse под капотом

// ============================================
// Аналог useLocalStorage — реактивное хранилище
// ============================================

// В Vue это был бы ref, здесь используем паттерн Observable
function useLocalStorage(key, defaultValue) {
  // Пытаемся загрузить сохранённое значение
  let stored
  try {
    const raw = localStorage.getItem(key)
    stored = raw !== null ? JSON.parse(raw) : defaultValue
  } catch {
    stored = defaultValue
  }

  let _value = stored
  const subscribers = []

  const storage = {
    get value() {
      return _value
    },
    set value(newVal) {
      _value = newVal
      // Синхронизируем с localStorage
      try {
        localStorage.setItem(key, JSON.stringify(newVal))
      } catch (e) {
        console.warn('localStorage недоступен:', e.message)
      }
      // Уведомляем подписчиков (аналог реактивности Vue)
      for (const fn of subscribers) fn(newVal)
    },
    onChange(fn) {
      subscribers.push(fn)
      return () => {
        const idx = subscribers.indexOf(fn)
        if (idx !== -1) subscribers.splice(idx, 1)
      }
    },
  }

  return storage
}

// Демонстрация useLocalStorage
console.log('=== useLocalStorage ===')
const theme = useLocalStorage('app-theme', 'light')
console.log('Начальное значение:', theme.value)  // 'light' (или из localStorage)

const unsubscribe = theme.onChange((val) => {
  console.log('Тема изменилась на:', val)
})

theme.value = 'dark'   // сохраняется в localStorage + уведомляет подписчиков
theme.value = 'light'

unsubscribe()  // отписываемся
theme.value = 'system'  // подписчик не вызовется

console.log('Итоговое значение:', theme.value)

// ============================================
// Аналог useEventListener — с auto-cleanup
// ============================================

console.log('\n=== useEventListener ===')

// В браузере это был бы настоящий addEventListener.
// Здесь симулируем EventEmitter.
class EventBus {
  constructor() { this._handlers = {} }

  addEventListener(event, handler) {
    if (!this._handlers[event]) this._handlers[event] = []
    this._handlers[event].push(handler)
    console.log(`  [addEventListener] "${event}" зарегистрирован`)
  }

  removeEventListener(event, handler) {
    if (!this._handlers[event]) return
    this._handlers[event] = this._handlers[event].filter(h => h !== handler)
    console.log(`  [removeEventListener] "${event}" удалён`)
  }

  emit(event, payload) {
    for (const h of (this._handlers[event] || [])) h(payload)
  }
}

const fakeWindow = new EventBus()

function useEventListener(target, event, handler) {
  target.addEventListener(event, handler)

  // Возвращаем функцию очистки (аналог onUnmounted в Vue)
  return function cleanup() {
    target.removeEventListener(event, handler)
  }
}

const onResize = useEventListener(fakeWindow, 'resize', (e) => {
  console.log('  Событие resize:', e)
})

const onKeydown = useEventListener(fakeWindow, 'keydown', (e) => {
  console.log('  Событие keydown:', e.key)
})

// Симулируем события
fakeWindow.emit('resize', { width: 1200, height: 800 })
fakeWindow.emit('keydown', { key: 'Escape' })

// Симулируем unmount — очищаем слушатели
console.log('\n  [component unmount] — очищаем слушатели...')
onResize()
onKeydown()

// После cleanup — события игнорируются
fakeWindow.emit('resize', { width: 800, height: 600 })
console.log('  (resize событие не обработано — слушатель удалён)')

// ============================================
// Аналог useDark — тёмная тема
// ============================================

console.log('\n=== useDark ===')

function useDark(storageKey = 'color-scheme') {
  // Определяем начальное значение
  // В браузере: window.matchMedia('(prefers-color-scheme: dark)').matches
  const systemPrefersDark = false  // симуляция
  const stored = (() => {
    try { return localStorage.getItem(storageKey) } catch { return null }
  })()

  let isDark = stored !== null ? stored === 'dark' : systemPrefersDark

  const state = {
    get value() { return isDark },
    set value(val) {
      isDark = val
      // В реальном VueUse: document.documentElement.classList.toggle('dark', val)
      console.log(`  document.documentElement.classList: ${val ? 'добавлен' : 'удалён'} класс "dark"`)
      try { localStorage.setItem(storageKey, val ? 'dark' : 'light') } catch {}
    },
    toggle() {
      this.value = !this.value
    }
  }

  return state
}

const isDark = useDark()
console.log('Текущая тема тёмная?', isDark.value)
isDark.value = true
isDark.toggle()
console.log('После двух переключений:', isDark.value)