@jsweb/ui 1.2.6 → 1.2.7

package/README.md

@@ -32,17 +32,17 @@ npm i @jsweb/ui
 
 O framework utiliza um sistema de atributos customizados para declaratividade no HTML.
 
-| Diretiva            | Descrição                                                                       | Exemplo                               |
-| :------------------ | :------------------------------------------------------------------------------ | :------------------------------------ |
-| `ui:scope`          | Define o objeto de estado para o elemento e seus filhos.                        | `<div ui:scope="{ count: 0 }">`       |
-| `ui:text`           | Sincroniza o `textContent` com uma variável.                                    | `<span ui: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`             | Adiciona/Remove o elemento do DOM (via Comment Node placeholder).               | `<div ui:if="count > 0">`             |
-| `ui:for`            | Renderiza uma lista de elementos a partir de um array.                          | `<li ui:for="item in items">`         |
+| 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
 
@@ -86,9 +86,9 @@ O framework utiliza um sistema de atributos customizados para declaratividade no
 ### TypeScript / ESM
 
 ```typescript
-import { createScope } from '@jsweb/ui'
+import { createScope, reactive, watch } from '@jsweb/ui'
 
-const scope = {
+const scope = reactive({
   count: 0,
   inc: 'Incremento',
   dec: 'Decremento',
@@ -98,7 +98,11 @@ const scope = {
   decrement() {
     this.count--
   },
-}
+})
+
+watch(() => scope.count, (newVal, oldVal) => {
+  console.log(`Contador mudou de ${oldVal} para ${newVal}`)
+})
 
 createScope('#container', { scope })
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsweb/ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "JS Web Microframework",
   "keywords": [
     "js",
@@ -21,30 +21,14 @@
   "license": "MIT",
   "author": "Alex Bruno Cáceres <email@alexbruno.dev>",
   "type": "module",
-  "main": "dist/ui.umd.js",
-  "module": "dist/ui.es.js",
-  "types": "dist/index.d.ts",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "types": "index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/ui.es.js",
-      "require": "./dist/ui.umd.js",
-      "types": "./dist/index.d.ts"
+      "import": "./index.es.js",
+      "require": "./index.umd.js",
+      "types": "./index.d.ts"
     }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build && node publish.js",
-    "preview": "vite preview",
-    "format": "prettier --write .",
-    "test": "echo 'test'",
-    "preversion": "npm run build",
-    "postversion": "git push && git push --tags"
-  },
-  "devDependencies": {
-    "prettier": "^3.8.3",
-    "terser": "^5.46.2",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.10",
-    "vite-plugin-dts": "^5.0.0"
   }
-}
+}

package/.github/workflows/npm-publish.yml

@@ -1,21 +0,0 @@
-name: NPM Publish
-
-on:
-  push:
-    tags:
-      - v*
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          registry-url: https://registry.npmjs.org/
-      - run: npm i
-      - run: npm run build
-      - run: npm publish ./dist --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.prettierignore

@@ -1,3 +0,0 @@
-node_modules
-dist
-.gemini

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 80,
-  "overrides": [{ "files": "*.md", "options": { "parser": "markdown" } }]
-}

package/HISTORY.md

@@ -1,36 +0,0 @@
-# JS Web UI - Histórico de Desenvolvimento
-
-Este documento serve como contexto histórico de todas as funcionalidades implementadas até o momento no **@jsweb/ui**, um micro-framework reativo, livre de dependências, de alta performance e sem Virtual DOM.
-
-## 🧠 1. Core de Reatividade (`src/reactivity.ts`)
-Construímos um motor baseado em **Signals** usando `Proxy` para interceptar leituras (`track`) e escritas (`trigger`).
-- **Arquitetura `ReactiveEffect`:** A reatividade é gerenciada pela classe `ReactiveEffect`, permitindo controle refinado sobre o ciclo de vida dos efeitos (`stop`, `cleanup`) e garantindo limpeza eficiente de dependências para evitar vazamentos de memória. Também inclui micro-otimizações no rastreamento do Proxy para evitar buscas redundantes.
-- **Deep Reactivity:** A reatividade funciona recursivamente em objetos profundamente aninhados.
-- **Arrays e Mutabilidade:** Tratamento especial para arrays, onde a adição ou remoção de itens notifica dependências sobre a propriedade `length`, o que garante que loops reajam adequadamente a `.push`, `.pop`, etc.
-- **Transparência:** O usuário final trabalha com dados mutáveis puros sem a necessidade de getters/setters explícitos (ex: `state.count++` em vez de `state.count.value++`).
-
-## ⚙️ 2. Motor de Avaliação (`src/evaluator.ts`)
-As expressões declaradas no HTML (ex: `:text="count + 1"`) são avaliadas de forma dinâmica.
-- **Execução Sandboxed Contextual:** Utilização do bloco `with(this)` dentro de `new Function` para permitir que expressões acessem propriedades do contexto diretamente, sem poluir o escopo global.
-- **Passagem Implícita e Explícita de Eventos:** O método `evaluateEvent` permite o uso de `$event` explícito (ex: `@click="log($event)"`) e também mapeia automaticamente a injeção do evento caso o usuário declare apenas o nome da função (ex: `@click="log"`).
-
-## 🔤 3. Parser de Diretivas e DOM (`src/parser.ts`)
-Em vez de Virtual DOM, manipulamos o DOM real empacotando atualizações através da função `effect`. O Parser lê o HTML e amarra os `effects`.
-
-- **`:scope` (ou `ui:scope`):** Criação de escopos aninhados utilizando um esquema de herança de contextos (`createContext`) suportado por Proxies, permitindo "sombreamento" de propriedades corretas.
-- **`:text`:** Renderização de conteúdo reativo como `textContent`.
-- **`:if`:** Renderização condicional. O framework usa "âncoras" (`Comment Nodes`) para substituir dinamicamente o elemento no DOM quando a condição é falsa e restaurá-lo na posição exata quando for verdadeira.
-- **`:for` e Reconciliação:** Renderização de listas utilizando algoritmo de *diffing*. O motor rastreia chaves (`:key` ou fallback para índice) de cada elemento gerado e reutiliza os mesmos nós DOM (`RenderedNode`). Isso traz performance massiva e garante que atributos nativos do navegador (ex: foco de um input) não se percam em mudanças reativas do array.
-- **Atributos Genéricos (`:attr`):** Transformação dinâmica de qualquer atributo. Valores booleanos injetam/removem o atributo (ex: `disabled`).
-- **Classes e Estilos Dinâmicos (`:class`, `:style`):** Suporte nativo a dicionários, arrays e strings lógicas para manipulação avançada de classes e estilos (ex: `:class="{ 'is-active': active }"`).
-- **Eventos (`@event` e Modificadores):** Adição simples de ouvintes a qualquer evento DOM nativo. Inclui suporte nativo a **modificadores encadeados** com sintaxe de ponto (ex: `@submit.prevent`, `@click.stop`, `@click.self`, `@click.outside`) para um controle declarativo do comportamento do evento.
-- **Eventos Customizados (`$emit`):** Injeção automática da função `$emit` em todos os escopos criados. Permite que componentes despachem `CustomEvents` nativos na árvore do DOM, facilitando a comunicação entre escopos (`@custom-event`).
-- **Two-way Data Binding (`:bind`):** Suporte total a reatividade bidirecional (Tela <-> Estado) para `input[text]`, `input[checkbox]`, `input[radio]`, `<select>` e `<textarea>`. Sincroniza em tempo real tanto via evento `input` quanto `change`.
-
-## 📦 4. Build e Bundling (`vite.config.ts`)
-- O framework está formatado como uma biblioteca agnóstica para ser consumida como script direto ou módulo ESM via NPM.
-- **Vite + Terser:** Optamos explicitamente por usar o *terser* em vez do *oxc* na etapa de minificação para atingir o nível máximo de compressão (cerca de ~1.8kB gzipped no estágio atual).
-- Geração automática de pacotes de tipagem (`dts`).
-
-## 🎯 Próximos Passos (Backlog Futuro Sugerido)
-Para outros agentes, o framework atingiu um nível excepcional de maturidade (versão 0.2.0-ready). Os próximos passos lógicos envolvem a criação de testes unitários extensivos e a refatoração ou criação de um sistema robusto de roteamento e componentização via Web Components nativos, integrando esta sintaxe ao shadow DOM.

package/PROJECT.md

@@ -1,90 +0,0 @@
-# Especificação Técnica: Micro-Framework JS/TS (Codinome: @jsweb/ui)
-
-## 1. Visão Geral
-
-**@jsweb/ui** é um micro-framework frontend focado em _Progressive Enhancement_ e DX (Developer Experience). Ele deve oferecer a reatividade moderna de frameworks como Vue 3 (Composition API) e a simplicidade de uso direto no HTML do Alpine.js, sem a necessidade obrigatória de um build step, mas totalmente otimizado para árvores de dependência (tree-shaking) quando usado em ambientes build-tooling.
-
-## 2. Pilares Arquiteturais
-
-- **No Virtual DOM:** Utilização de reatividade de grão fino (Fine-grained reactivity) via `Proxy` ou `Signals`. Atualizações diretas no DOM real.
-- **Dual Distribution:**
-  - **Standalone:** Arquivo único (IIFE/UMD) para inclusão via `<script src="...">`.
-  - **Module:** Pacote ESM com exports nomeados para suporte a Tree-Shaking.
-- **Hybrid Context:** Suporte a definição de estado via Objetos Literais (POJOs) ou Classes TypeScript.
-- **Template Engine:** Baseado em atributos customizados no HTML (`ui:*` para diretivas e `ui@*` para eventos, com shorthands `@`, `:`).
-
-## 3. Especificações do Motor (Core)
-
-### A. Sistema de Reatividade
-
-- **Mecanismo:** Proxy-based em conjunto com a classe `ReactiveEffect`. O estado é interceptado para disparar "efeitos" com gerenciamento preciso de dependências, controle de ciclo de vida (`stop`, `cleanup`) e otimizado contra vazamento de memória.
-- **Global State:** Deve ser possível exportar um objeto reativo de um arquivo e importá-lo em múltiplos componentes/contextos, tornando-o um estado compartilhado.
-- **Global Effect:** Deve ser possível criar efeitos globais que reajam a mudanças em qualquer estado compartilhado.
-- **Local State:** Deve ser possível criar estados locais que reajam a mudanças apenas dentro do escopo do componente.
-- **Local Effect:** Deve ser possível criar efeitos locais que reajam a mudanças apenas dentro do escopo do componente.
-- **Lifecycle:** Deve ser possível criar efeitos que reajam a mudanças no ciclo de vida do componente.
-- **Cleanup:** Deve ser possível limpar os efeitos quando os componentes forem removidos do DOM.
-- **Watchers:** Deve ser possível criar watchers que reajam a mudanças em propriedades específicas do estado.
-- **Computed:** Deve ser possível criar propriedades computadas que reajam a mudanças em propriedades específicas do estado.
-- **Composition API:** Deve ser possível usar a Composition API para criar efeitos e reatividade e aninhar efeitos e reatividade em outros efeitos e reatividade.
-
-### B. Avaliador de Expressões (The Evaluator)
-
-- **Implementação:** Uso de `new Function()` com `with(this)`.
-- **Estratégia de Execução:** Para avaliar expressões declaradas no HTML de forma encapsulada (sandboxed):
-  1. O motor encapsula o objeto/escopo em um Proxy de Contexto para resolução de dependências.
-  2. Constrói a função dinâmica: `new Function('with(this) { ... }')`.
-  3. Executa a função passando o escopo reativo atrelado ao `this`.
-  4. Para eventos, também expõe a variável nativa `$event`.
-
-### C. Parser de Template
-
-- **Traversal:** Utilizar `TreeWalker` ou recursão otimizada para identificar diretivas.
-- **Limpeza:** Atributos `ui:*`, `ui:@*`, `@*` e `:*` devem ser removidos do DOM após a inicialização para manter o HTML limpo.
-
-## 4. Sintaxe e Diretivas (v0.1.0)
-
-| Diretiva             | Descrição                                                                      | Exemplo                               |
-| :------------------- | :----------------------------------------------------------------------------- | :------------------------------------ |
-| `ui:scope`           | Define o objeto de estado para o elemento e seus filhos.                       | `<div ui:scope="{ count: 0 }">`       |
-| `ui:text`            | Sincroniza o `textContent` com uma variável.                                   | `<span ui: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`              | Adiciona/Remove o elemento do DOM (via Comment Node placeholder).              | `<div ui:if="count > 0">`             |
-| `ui:for`             | Renderiza uma lista de elementos a partir de um array.                         | `<li ui:for="item in items">`         |
-
-## 5. Requisitos de Engenharia (Instruções para a IA)
-
-- **Linguagem:** TypeScript Estrito.
-- **Bundle Tool:** Vite (configurado para `build.lib` com formatos `es` e `umd`).
-- **Memory Management:** Garantir o `cleanup` de event listeners e observadores quando elementos `ui:if` ou `ui:for` forem removidos.
-- **Zero Dependencies:** O core não deve ter dependências externas de runtime.
-- **Estilo de Código:** Funcional, modular, com comentários JSDoc claros para explicar o funcionamento interno do Proxy, do Parser e das diretivas.
-
----
-
-### Stack de Build (Vite)
-
-Para o `vite.config.ts`, utilize esta abordagem para satisfazer os requisitos de "Standalone" e "Module":
-
-```typescript
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: './src/index.ts',
-      name: 'jswebui',
-      fileName: (format) => `ui.${format}.js`,
-      formats: ['es', 'umd'],
-    },
-    sourcemap: true,
-    minify: 'terser',
-  },
-  plugins: [dts()], // Gera os tipos .d.ts automaticamente
-})
-```

package/dist/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 jsweb
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/README.md

@@ -1,104 +0,0 @@
-# @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 `Proxy` para 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.
-- **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 e `ui@*` para eventos, com shorthands `@`, `:`).
-  - Suporte completo a **modificadores de eventos** encadeados (`.prevent`, `.stop`, `.self`, `.outside`).
-
-## Instalação
-
-### NPM
-
-```bash
-npm i @jsweb/ui
-```
-
-### CDN
-
-```html
-<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`          | Define o objeto de estado para o elemento e seus filhos.                        | `<div ui:scope="{ count: 0 }">`       |
-| `ui:text`           | Sincroniza o `textContent` com uma variável.                                    | `<span ui: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`             | Adiciona/Remove o elemento do DOM (via Comment Node placeholder).               | `<div ui:if="count > 0">`             |
-| `ui:for`            | Renderiza uma lista de elementos a partir de um array.                          | `<li ui:for="item in items">`         |
-
-## Exemplo de Uso
-
-### HTML
-
-```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
-
-```typescript
-import { createScope } from '@jsweb/ui'
-
-const scope = {
-  count: 0,
-  inc: 'Incremento',
-  dec: 'Decremento',
-  increment() {
-    this.count++
-  },
-  decrement() {
-    this.count--
-  },
-}
-
-createScope('#container', { scope })
-```

package/dist/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "@jsweb/ui",
-  "version": "1.2.5",
-  "description": "JS Web Microframework",
-  "keywords": [
-    "js",
-    "ts",
-    "web",
-    "ui",
-    "micro",
-    "framework"
-  ],
-  "homepage": "https://github.com/jsweb/ui#readme",
-  "bugs": {
-    "url": "https://github.com/jsweb/ui/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jsweb/ui.git"
-  },
-  "license": "MIT",
-  "author": "Alex Bruno Cáceres <email@alexbruno.dev>",
-  "type": "module",
-  "main": "index.umd.js",
-  "module": "index.es.js",
-  "types": "index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./index.es.js",
-      "require": "./index.umd.js",
-      "types": "./index.d.ts"
-    }
-  }
-}

package/index.html

@@ -1,162 +0,0 @@
-<!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 Test</title>
-    <style>
-      .box {
-        padding: 20px;
-        border-radius: 8px;
-        transition: all 0.3s ease;
-        margin-bottom: 10px;
-        color: white;
-      }
-      .active {
-        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-        transform: scale(1.02);
-      }
-    </style>
-    <script type="module">
-      import { createScope, reactive } from '/src/index.ts'
-
-      const scope = reactive({
-        count: 0,
-        inc: 'Incremento',
-        dec: 'Decremento',
-        model: 'Exemplo',
-        items: ['A', 'B', 'C'],
-        active: false,
-        color: '#42b883',
-
-        get computedItems() {
-          return this.items.map((value, index) => {
-            return { value, index }
-          })
-        },
-
-        increment() {
-          this.count++
-        },
-        decrement() {
-          this.count--
-        },
-        zero() {
-          this.count = 0
-        },
-        addItem() {
-          const value = Date.now()
-          this.items.push(value)
-        },
-        removeItem() {
-          this.items.pop()
-        },
-        logEvent(e, ...args) {
-          console.log('Evento recebido:', e, args)
-          this.items.push(`Evento ${e.type}`)
-        },
-        toggleActive() {
-          this.active = !this.active
-        },
-        handleCustomEvent(e) {
-          alert(`Custom event received: ${e.detail.message}`)
-          this.items.push(`Custom Event: ${e.detail.message}`)
-        },
-      })
-
-      window.scope = scope
-
-      createScope('body', { scope })
-    </script>
-  </head>
-  <body>
-    <div :scope="scope">
-      <h1>JS Web UI</h1>
-      <p>Contador: <span :text="count"></span></p>
-      <button :text="inc" @click="increment">+</button>
-      <button :text="dec" @click="decrement">-</button>
-
-      <div style="margin-top: 20px">
-        <button @click="zero" :disabled="!count">Zerar</button>
-      </div>
-
-      <div
-        :if="count > 0"
-        style="margin-top: 20px; padding: 10px; border: 1px solid green"
-      >
-        O contador é maior que zero!
-      </div>
-
-      <div style="margin-top: 20px">
-        <h3>Lista:</h3>
-        <div style="margin-bottom: 10px">
-          <input type="text" :bind="model" placeholder="Digite algo..." />
-          <p>Você vai adicionar: <strong :text="model"></strong></p>
-          <button @click="addItem">Adicionar Item</button>
-          <button @click="removeItem">Remover Item</button>
-          <button @click="logEvent">Testar Evento (Sem Parênteses)</button>
-          <button @click="logEvent($event, 'A', 'B', 'C')">
-            Testar Evento (Com Parênteses)
-          </button>
-        </div>
-        <ul>
-          <li :for="item of computedItems">
-            <span :text="item.index"></span>
-            <input type="text" :value="item.value" />
-          </li>
-        </ul>
-      </div>
-
-      <hr />
-
-      <div style="margin-top: 20px">
-        <h3>Testes de :class e :style</h3>
-        <div
-          class="box"
-          :class="{ active }"
-          :style="{ backgroundColor: color, opacity: count ? 1 : 0.5 }"
-        >
-          Caixa de teste! Ativa: <strong :text="active"></strong>
-        </div>
-
-        <div style="margin-top: 10px">
-          <button @click="toggleActive">Alternar Classe 'active'</button>
-
-          <label style="margin-left: 10px">
-            Cor de Fundo:
-            <input type="color" :bind="color" />
-          </label>
-        </div>
-      </div>
-
-      <hr />
-
-      <div style="margin-top: 20px" @custom-event="handleCustomEvent">
-        <h3>Teste de $emit (Comunicação de Eventos)</h3>
-        <p>A div pai está escutando <code>@custom-event</code>.</p>
-
-        <!-- Escopo Filho Simulado -->
-        <div
-          :scope="{ component: 'Componente Interno' }"
-          style="
-            padding: 0 15px 15px 15px;
-            border: 2px dashed silver;
-            margin-top: 10px;
-          "
-        >
-          <p>Nome interno: <strong :text="component"></strong></p>
-          <button
-            @click="
-              $emit(
-                'custom-event',
-                { message: `Mensagem enviada do ${component}` },
-              )
-            "
-          >
-            Disparar evento para o pai
-          </button>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

package/publish.js

@@ -1,34 +0,0 @@
-import { resolve } from 'node:path'
-import { copyFileSync, readFileSync, writeFileSync } from 'node:fs'
-
-const root = process.cwd()
-const source = resolve(root, 'package.json')
-const target = resolve(root, 'dist/package.json')
-const pkgInfo = JSON.parse(readFileSync(source, 'utf8'))
-
-// 1. Remove campos que não são necessários no pacote publicado
-delete pkgInfo.scripts
-delete pkgInfo.devDependencies
-
-// 2. Ajusta os caminhos dos arquivos, pois o root do pacote agora será a pasta dist/
-pkgInfo.main = 'index.umd.js'
-pkgInfo.module = 'index.es.js'
-pkgInfo.types = 'index.d.ts'
-pkgInfo.exports = {
-  '.': {
-    import: './index.es.js',
-    require: './index.umd.js',
-    types: './index.d.ts',
-  },
-}
-
-// 3. Salva o package.json modificado dentro da pasta dist/
-writeFileSync(target, JSON.stringify(pkgInfo, null, 2))
-
-// 4. Copia arquivos de metadados importantes para o NPM
-copyFileSync(resolve(root, 'README.md'), resolve(root, 'dist/README.md'))
-copyFileSync(resolve(root, 'LICENSE'), resolve(root, 'dist/LICENSE'))
-
-console.log(
-  '✅ Arquivo package.json mínimo e metadados preparados na pasta dist/',
-)

package/src/evaluator.ts

@@ -1,29 +0,0 @@
-export function evaluate(
-  expression: string,
-  context: Record<string, any> = {},
-) {
-  try {
-    const fn = new Function(`with(this) { return ${expression} }`)
-    return fn.call(context)
-  } catch {
-    return undefined
-  }
-}
-
-export function evaluateEvent(
-  $event: Event,
-  expression: string,
-  context: Record<string, any> = {},
-) {
-  try {
-    const exp = expression.trim()
-    const isIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(exp)
-    const code = `${exp} instanceof Function ? ${exp}.call(this, $event) : ${exp}`
-    const result = isIdentifier ? code : exp
-    const fn = new Function('$event', `with(this) { ${result} }`)
-
-    fn.call(context, $event)
-  } catch {
-    console.warn(`[jsweb/ui] Error evaluating event: ${expression}`)
-  }
-}