@jsweb/ui
v1.2.8
Published
JS Web Microframework
Readme
@jsweb/ui
Introdução
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.
Pilares Arquiteturais
- 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 (
Instalação
NPM
npm i @jsweb/uiCDN
<script src="https://unpkg.com/@jsweb/ui"></script>Diretivas Disponíveis (v0.1.0)
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"> |
Exemplo de Uso
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Web UI</title>
<script src="https://unpkg.com/@jsweb/ui"></script>
<script>
const scope = {
count: 0,
inc: 'Incremento',
dec: 'Decremento',
increment() {
this.count++
},
decrement() {
this.count--
},
}
jsweb.ui.createScope('body', { scope })
</script>
</head>
<body>
<div ui:scope="scope">
<h1>JS Web UI</h1>
<p>Contador: <span ui:text="count"></span></p>
<button ui:text="inc" @click="increment()"></button>
<button ui:text="dec" @click="decrement()"></button>
</div>
</body>
</html>TypeScript / ESM
import { createScope, reactive, watch } from '@jsweb/ui'
const scope = 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 })