Веселый стейт менеджмент фреймворк Huex

Введение

Меня всегда удивляло, как много действий надо делать для стейт менеджмент фреймворков — сразу описывать схему, писать мутации, комитать их… Почему бы не сделать всё минимально просто?)
Зачем писать код, когда его можно не писать?
Представляю вашему вниманию мою получасовую поделку — Huex!
Пока что решение доступно только на платформе NodeJS, но для презентации думаю будет достаточно.
Дисклеймер: Huex написан мной всего лишь в развлекательно-образовательных целях и не претендует на место полноценного фреймворка. А теперь поехали.

Для чего он нужен?

Иметь единое удобное хранилище данных. Иметь возможность следить за их изменениями. Избавится он непонятных слов вроде «getters», «mutators», «actions», «commit», etc.

Как его установить?

Пока только скопировав этот репозиторий. Я не хотел засорять npm полубессмысленными пакетами.
После того, как репозиторий скопирован, его нужно подключить через package.json вашего проекта где-то в таком виде:

"dependencies": {     "huex": "file:../huex/"   }

После этого он будет доступен как модуль «huex».

Как им пользоваться?

Максимально естественно и просто. Начнем сразу с кода:

// Подключаем huex. const Huex = require('huex');  // Создаем хранилище. const storage = Huex();  // Добавляем обработчики на изменение какой-либо переменной. storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`));  // Меняем значение переменной самым натуральным образом. storage.a = 5; 

И это всё. При любом изменении\установки поля нашего хранилища будут создаваться два события: change с данными { key, value } и change:key с данными { value }. Достаточно для создания проектов любой сложности.

Может что-то еще?

Конечно: вы можете прямо на ходу создавать глубоко вложенные поля, и никаких исключений не будет создано.

const Huex = require('huex');  const storage = Huex();  storage.a.b.c.d.e = 5; 

И разумеется на все вложенные объекты так же можно навесить обработчики событий.

А в чем подвох?

Вся эта магия реализована посредством Proxy. А это не самое быстрое решение, и в целом не рекомендуют использовать класс Proxy в продакшене.

Вот и всё, надеюсь, вас это развеселило.