jetz

Jetz é uma estrutura JavaScript componível para criar interfaces web reativas usando JavaScript declarativo, inspirada no Jetpack Compose. Permite aos desenvolvedores construir árvores DOM com chamadas de funções simples (por exemplo, div, button, p) sem depender de JSX, compilação em tempo de build ou linguagens de template. As principais capacidades incluem: - Composição Declarativa de UI: Elementos HTML são exportados como funções JavaScript componíveis. Os elementos aceitam strings, números, elementos filhos, objetos (para atributos/propriedades), auxiliares CSS e estados reativos como argumentos. - Gestão de Estado Reativo: stateOf para estado de valor único refinado, rememberOf para estado sincronizado com localStorage, e computed para valores derivados com rastreamento automático. - Sistema de Componentes: Componentes podem ser definidos como funções ou classes que estendem Component, com hooks de ciclo de vida (onCreate, onMount, onUpdate, onDestroy). - Coleções Reativas: listOf e sequenceOf para arrays observáveis, com loop para reconciliação de listas com chaves e reciclagem de elementos DOM em O(1). - Renderização Condicional: _if, _elseif, _else e ifElse para alternância declarativa de ramos. - Vinculação de Dados Bidirecional: propriedade bind para sincronizar elementos de entrada com o estado. - Roteamento e Navegação: Roteamento SPA do lado do cliente com Router, route, link e middlewares/guardas de rota. - Estado de Sessão: JetzSession e sessionOf para armazenamentos reativos de chave-valor suportados por sessionStorage. - Utilitários DOM: Métodos auxiliares fluentes como find, findAll, attr, addClass em elementos. - Efeitos Colaterais: effect para efeitos com rastreamento automático e limpeza. A estrutura é empacotada com Rspack e distribuída como um pacote npm (@daevoft/jetz).