O @jsweb/ui é um micro-framework frontend escrito em TypeScript, projetado para ser uma ferramenta leve, rápida e flexível para o desenvolvimento de interfaces de usuário. Ele combina a reatividade moderna de frameworks como Vue 3 (Composition API) com a simplicidade de uso direto no HTML, semelhante ao Alpine.js.
- Sem Virtual DOM: Utiliza reatividade de grão fino (Fine-grained reactivity) via
Proxypara atualizações diretas no DOM real. - Distribuição Dupla:
- Standalone: Arquivo único (IIFE/UMD) para inclusão via
<script src="...">. - Module: Pacote ESM com exports nomeados para suporte a Tree-Shaking.
- Standalone: Arquivo único (IIFE/UMD) para inclusão via
- Contexto Híbrido: Suporta definição de estado via Objetos Literais (POJOs) ou Classes TypeScript.
- Template Engine: Baseado em atributos customizados no HTML (
ui:*para diretivas eui@*para eventos, com shorthands@,:).- Suporte completo a modificadores de eventos encadeados (
.prevent,.stop,.self,.outside).
- Suporte completo a modificadores de eventos encadeados (
npm i @jsweb/ui<scriptsrc="https://unpkg.com/@jsweb/ui"></script>O framework utiliza um sistema de atributos customizados para declaratividade no HTML.
| Diretiva | Descrição | Exemplo |
|---|---|---|
ui:scope / :scope | Define o objeto de estado para o elemento e seus filhos. | <div :scope="{ count: 0 }"> |
ui:text / :text | Sincroniza o textContent com uma variável. | <span :text="count"></span> |
:attr | Shorthand para bind de atributos HTML nativos. | <button :disabled="count > 10"> |
:class / :style | Bind dinâmico avançado para classes CSS e Estilos Inline (dicionários, arrays). | <div :class="{ active: isActive }"> |
@event | Shorthand para event listeners (com suporte a modificadores). | <button @click.prevent="save"> |
$emit | Despacha CustomEvents a partir do escopo atual. (Exposto no contexto) | <button @click="$emit('custom')"> |
:bind | Two-way data binding para inputs, checkboxes, radios e selects. | <input :bind="name"> |
ui:if / :if | Adiciona/Remove o elemento do DOM (via Comment Node placeholder). | <div :if="count > 0"> |
ui:for / :for | Renderiza uma lista de elementos a partir de um array. | <li :for="item in items"> |
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport" content="width=device-width, initial-scale=1.0" /><title>JS Web UI</title><scriptsrc="https://unpkg.com/@jsweb/ui"></script><script>constscope={count: 0,inc: 'Incremento',dec: 'Decremento',increment(){this.count++},decrement(){this.count--},}jsweb.ui.createScope('body',{ scope })</script></head><body><divui:scope="scope"><h1>JS Web UI</h1><p>Contador: <spanui:text="count"></span></p><buttonui:text="inc" @click="increment()"></button><buttonui:text="dec" @click="decrement()"></button></div></body></html>import{createScope,reactive,watch}from'@jsweb/ui'constscope=reactive({count: 0,inc: 'Incremento',dec: 'Decremento',increment(){this.count++},decrement(){this.count--},})watch(()=>scope.count,(newVal,oldVal)=>{console.log(`Contador mudou de ${oldVal} para ${newVal}`)})createScope('#container',{ scope })