Об этом проекте

Jetz — это компонуемый JavaScript-фреймворк для создания реактивных веб-интерфейсов с использованием декларативного JavaScript, вдохновлённый Jetpack Compose. Он позволяет разработчикам строить деревья DOM с помощью простых вызовов функций (например, div, button, p), не полагаясь на JSX, компиляцию во время сборки или шаблонные языки. Ключевые возможности: - Декларативная композиция UI: HTML-элементы экспортируются как компонуемые JavaScript-функции. Элементы принимают строки, числа, дочерние элементы, объекты (для атрибутов/свойств), CSS-хелперы и реактивные состояния в качестве аргументов. - Управление реактивным состоянием: stateOf для тонкого управления состоянием одного значения, rememberOf для состояния, синхронизированного с localStorage, и computed для автоматически отслеживаемых производных значений. - Система компонентов: Компоненты могут быть определены как функции или классы, расширяющие Component, с хуками жизненного цикла (onCreate, onMount, onUpdate, onDestroy). - Реактивные коллекции: listOf и sequenceOf для наблюдаемых массивов, с loop для согласования списков по ключам и переиспользованием DOM-элементов за O(1). - Условный рендеринг: _if, _elseif, _else и ifElse для декларативного переключения ветвей. - Двусторонняя привязка данных: свойство bind для синхронизации элементов ввода с состоянием. - Маршрутизация и навигация: Клиентская SPA-маршрутизация с Router, route, link и промежуточными обработчиками/защитниками маршрутов. - Состояние сессии: JetzSession и sessionOf для реактивных хранилищ ключ-значение на основе sessionStorage. - Утилиты DOM: Fluent-хелперы, такие как find, findAll, attr, addClass на элементах. - Побочные эффекты: effect для автоматически отслеживаемых эффектов с очисткой. Фреймворк собирается с помощью Rspack и распространяется как npm-пакет (@daevoft/jetz).