@jsweb/ui 0.1.0

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

@@ -0,0 +1,21 @@
+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 --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.prettierignore

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

package/.prettierrc

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

package/HISTORY.md

@@ -0,0 +1,36 @@
+# 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`).
+- **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`).
+- **Eventos (`@event`):** Adição simples de ouvintes a qualquer evento DOM nativo.
+- **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, aqui estão os próximos passos lógicos de evolução deste framework:
+1. **Modificadores de Evento:** Adicionar suporte a sufixos como `@click.prevent` e `@click.stop`.
+2. **Sintaxe Especial para Classes e Estilos:** Suporte para dicionários lógicos no CSS como `:class="{ 'is-active': active }"`.
+3. **Eventos customizados:** Implementação de um `$emit` para comunicação de um escopo/componente interno para um mais externo.

package/LICENSE

@@ -0,0 +1,21 @@
+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/PROJECT.md

@@ -0,0 +1,86 @@
+# 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. O estado deve ser interceptado para disparar "efeitos" (side-effects) que atualizam o DOM.
+- **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()`.
+- **Estratégia de Injeção:** Para avaliar strings de atributos (ex: `ui:text="user.name"`), o motor deve:
+  1. Extrair `keys` e `values` do contexto atual.
+  2. Construir a função dinâmica: `new Function(...keys, 'return ' + expression)`.
+  3. Executar passando os valores: `fn(...values)`.
+
+### 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">` |
+| `@event`   | Shorthand para event listeners.                                   | `<button @click="count++">`       |
+| `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/README.md

@@ -0,0 +1,100 @@
+# @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 `@`, `:`).
+
+## Instalação
+
+### NPM
+
+```bash
+npm i @jsweb/ui
+```
+
+### CDN
+
+```html
+<script src="https://unpkg.com/@jsweb/ui@latest/dist/index.umd.js"></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 (Binding Condicional). | `<button :disabled="count > 10">` |
+| `@event`   | Shorthand para event listeners.                                      | `<button @click="count++">`       |
+| `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@latest/dist/ui.umd.js"></script>
+    <script>
+      const scope = {
+        count: 0,
+        inc: 'Incremento',
+        dec: 'Decremento',
+        increment() {
+          this.count++
+        },
+        decrement() {
+          this.count--
+        },
+      }
+
+      jsweb.ui.createComponent('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 { createComponent } from '@jsweb/ui'
+
+const scope = {
+  count: 0,
+  inc: 'Incremento',
+  dec: 'Decremento',
+  increment() {
+    this.count++
+  },
+  decrement() {
+    this.count--
+  },
+}
+
+createComponent('#container', { scope })
+```

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/src/evaluator.d.ts

@@ -0,0 +1,2 @@
+export declare function evaluate(expression: string, context?: Record<string, any>): any;
+export declare function evaluateEvent(expression: string, context: Record<string, any> | undefined, $event: Event): void;

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+import { reactive, effect, track, trigger } from './reactivity';
+import { evaluate, evaluateEvent } from './evaluator';
+import { createComponent, parseNode } from './parser';
+export { reactive, effect, track, trigger, evaluate, evaluateEvent, createComponent, parseNode, };

package/dist/src/parser.d.ts

@@ -0,0 +1,4 @@
+export type Context = Record<string, any>;
+export declare function createContext(scopeData: any, parentContext?: Context | null): Context;
+export declare function parseNode(node: Node, context: Context): void;
+export declare function createComponent(selectorOrElement: string | HTMLElement, rootContext?: Context): void;

package/dist/src/reactivity.d.ts

@@ -0,0 +1,4 @@
+export declare function effect(fn: () => void): void;
+export declare function track(target: object, key: string | symbol): void;
+export declare function trigger(target: object, key: string | symbol): void;
+export declare function reactive<T extends object>(target: T): T;

package/dist/ui.es.js

@@ -0,0 +1,2 @@
+var e=null,t=/* @__PURE__ */new WeakMap;function n(t){const n=()=>{e=n,t(),e=null};n()}function r(n,r){if(e){let o=t.get(n);o||(o=/* @__PURE__ */new Map,t.set(n,o));let i=o.get(r);i||(i=/* @__PURE__ */new Set,o.set(r,i)),i.add(e)}}function o(e,n){const r=t.get(e);if(!r)return;const o=r.get(n);o&&o.forEach(e=>e())}function i(e){return"object"!=typeof e||null===e||e.__isReactive?e:new Proxy(e,{get(e,t,n){if("__isReactive"===t)return!0;r(e,t);const o=Reflect.get(e,t,n);return"object"==typeof o&&null!==o?i(o):o},set(e,t,n,r){const i=Array.isArray(e),c=Reflect.get(e,t,r),s=i&&String(Number(t))===t?Number(t)<e.length:Object.prototype.hasOwnProperty.call(e,t),u=Reflect.set(e,t,n,r);return s?c!==n&&o(e,t):(o(e,t),i&&"length"!==t&&o(e,"length")),u}})}function c(e,t={}){try{return new Function(`with(this) { return ${e} }`).call(t)}catch(n){return void console.error(`[jsweb/ui] Error evaluating expression: ${e}`,n)}}function s(e,t={},n){try{const r=e.trim(),o=/^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(r);new Function("$event",`with(this) { ${o?`${r} instanceof Function ? ${r}.call(this, $event) : ${r}`:r} }`).call(t,n)}catch(r){console.error(`[jsweb/ui] Error evaluating event expression: ${e}`,r)}}function u(e,t=null){const n=e.__isReactive?e:i(e);return new Proxy(n,{get:(e,n)=>"__isContext"===n||(n in e?Reflect.get(e,n,e):t&&n in t?Reflect.get(t,n,t):Reflect.get(e,n,e)),set:(e,n,r)=>n in e?Reflect.set(e,n,r,e):t&&n in t?Reflect.set(t,n,r,t):Reflect.set(e,n,r,e),has:(e,n)=>n in e||!(!t||!(n in t))})}function l(e,t){if(e.nodeType===Node.ELEMENT_NODE){const r=e;let o=t;const a=r.getAttribute("ui:scope")||r.getAttribute(":scope");a&&(o=u(c(a,t)||{},t),r.removeAttribute("ui:scope"),r.removeAttribute(":scope"));const d=r.getAttribute("ui:for")||r.getAttribute(":for");if(d)return r.removeAttribute("ui:for"),r.removeAttribute(":for"),void function(e,t,r){const o=e.parentNode;if(!o)return;const s=t.match(/^\s*(.+)\s+(?:in|of)\s+(.+)\s*$/);if(!s)return void console.warn(`[jsweb/ui] Invalid ui:for expression: ${t}`);const[,a,f]=s,d=e.getAttribute("ui:key")||e.getAttribute(":key");e.removeAttribute("ui:key"),e.removeAttribute(":key");const p=crypto.randomUUID(),b=document.createComment(` ui:for ${p} `);o.replaceChild(b,e);let v=[];n(()=>{const t=c(f,r);if(!Array.isArray(t))return v.forEach(e=>e.el.parentNode?.removeChild(e.el)),void(v=[]);const n=[],o=/* @__PURE__ */new Map;v.forEach(e=>o.set(e.key,e)),t.forEach((t,s)=>{const f={[a]:t,$index:s};let p=s;d&&(p=c(d,u(f,r)));let b=o.get(p);if(b)b.scope[a]=t,b.scope.$index=s,o.delete(p);else{const t=e.cloneNode(!0),n=i(f);l(t,u(n,r)),b={key:p,el:t,scope:n}}n.push(b)}),o.forEach(e=>{e.el.parentNode?.removeChild(e.el)});let s=b.nextSibling;n.forEach(e=>{s===e.el?s=s.nextSibling:b.parentNode?.insertBefore(e.el,s)}),v=n})}(r,d,o);const p=r.getAttribute("ui:if")||r.getAttribute(":if");p&&(r.removeAttribute("ui:if"),r.removeAttribute(":if"),function(e,t,r){const o=e.parentNode;if(!o)return;const i=crypto.randomUUID(),s=document.createComment(` ui:if ${i} `);o.insertBefore(s,e),n(()=>{c(t,r)?e.parentNode||s.parentNode?.insertBefore(e,s.nextSibling):e.parentNode&&e.parentNode.removeChild(e)})}(r,p,o));const b=Array.from(r.attributes);for(const e of b){const{name:t,value:i}=e,u=["ui:text",":text"].includes(t),l=["ui:bind",":bind"].includes(t),a=t.startsWith("ui:")||t.startsWith(":"),d=t.startsWith("ui@")||t.startsWith("@");if(u)r.removeAttribute(t),n(()=>{const e=c(i,o);r.textContent=null!=e?String(e):""});else if(l)r.removeAttribute(t),f(r,i,o);else if(a){const e=t.split(":").pop();r.removeAttribute(t),n(()=>{const t=c(i,o);null==t||!1===t?r.removeAttribute(e):!0===t?r.setAttribute(e,""):r.setAttribute(e,String(t))})}else if(d){const e=t.split("@").pop();r.removeAttribute(t),r.addEventListener(e,e=>{s(i,o,e)})}}const v=Array.from(r.childNodes);for(const e of v)l(e,o)}}function a(e,t={}){const n="string"==typeof e?document.querySelector(e):e;n?l(n,t):console.warn(`[jsweb/ui] Element not found: ${e}`)}function f(e,t,r){const o=e instanceof HTMLInputElement&&"checkbox"===e.type,i=e instanceof HTMLInputElement&&"radio"===e.type;n(()=>{const n=c(t,r);if(o){e.checked=!!n}else if(i){const t=e;t.checked=t.value===String(n)}else{e.value=null==n?"":String(n)}});const u=o||i||e instanceof HTMLSelectElement?"change":"input";e.addEventListener(u,e=>{s(o?`${t} = $event.target.checked`:`${t} = $event.target.value`,r,e)})}if("undefined"!=typeof window){const e=window;e.jsweb=e.jsweb||{},e.jsweb.ui={createComponent:a,reactive:i,effect:n,track:r,trigger:o,evaluate:c,evaluateEvent:s,parseNode:l}}export{a as createComponent,n as effect,c as evaluate,s as evaluateEvent,l as parseNode,i as reactive,r as track,o as trigger};
+//# sourceMappingURL=ui.es.js.map

package/dist/ui.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.es.js","names":[],"sources":["../src/reactivity.ts","../src/evaluator.ts","../src/parser.ts","../src/index.ts"],"sourcesContent":["let activeEffect: (() => void) | null = null\nconst targetMap = new WeakMap<object, Map<string | symbol, Set<() => void>>>()\n\nexport function effect(fn: () => void) {\n  const effectFn = () => {\n    // cleanup old deps could be added here\n    activeEffect = effectFn\n    fn()\n    activeEffect = null\n  }\n  effectFn()\n}\n\nexport function track(target: object, key: string | symbol) {\n  if (activeEffect) {\n    let depsMap = targetMap.get(target)\n    if (!depsMap) {\n      depsMap = new Map()\n      targetMap.set(target, depsMap)\n    }\n    let dep = depsMap.get(key)\n    if (!dep) {\n      dep = new Set()\n      depsMap.set(key, dep)\n    }\n    dep.add(activeEffect)\n  }\n}\n\nexport function trigger(target: object, key: string | symbol) {\n  const depsMap = targetMap.get(target)\n  if (!depsMap) return\n  const dep = depsMap.get(key)\n  if (dep) {\n    dep.forEach((effectFn) => effectFn())\n  }\n}\n\nexport function reactive<T extends object>(target: T): T {\n  if (typeof target !== 'object' || target === null) return target\n  if ((target as any).__isReactive) return target\n\n  return new Proxy(target, {\n    get(obj, key, receiver) {\n      if (key === '__isReactive') return true\n      track(obj, key)\n      const res = Reflect.get(obj, key, receiver)\n      // deep reactivity\n      if (typeof res === 'object' && res !== null) {\n        return reactive(res)\n      }\n      return res\n    },\n    set(obj, key, value, receiver) {\n      const isArray = Array.isArray(obj)\n      const oldValue = Reflect.get(obj, key, receiver)\n      const hadKey = isArray && String(Number(key)) === key \n        ? Number(key) < obj.length \n        : Object.prototype.hasOwnProperty.call(obj, key)\n\n      const result = Reflect.set(obj, key, value, receiver)\n\n      if (!hadKey) {\n        trigger(obj, key)\n        if (isArray && key !== 'length') {\n          trigger(obj, 'length')\n        }\n      } else if (oldValue !== value) {\n        trigger(obj, key)\n      }\n      \n      return result\n    },\n  })\n}\n","export function evaluate(\n  expression: string,\n  context: Record<string, any> = {},\n) {\n  try {\n    const fn = new Function(`with(this) { return ${expression} }`)\n    return fn.call(context)\n  } catch (error) {\n    console.error(`[jsweb/ui] Error evaluating expression: ${expression}`, error)\n    return undefined\n  }\n}\n\nexport function evaluateEvent(\n  expression: string,\n  context: Record<string, any> = {},\n  $event: Event,\n) {\n  try {\n    const exp = expression.trim()\n    const isIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(exp)\n    const code = `${exp} instanceof Function ? ${exp}.call(this, $event) : ${exp}`\n    const result = isIdentifier ? code : exp\n\n    const fn = new Function('$event', `with(this) { ${result} }`)\n    fn.call(context, $event)\n  } catch (error) {\n    console.error(\n      `[jsweb/ui] Error evaluating event expression: ${expression}`,\n      error,\n    )\n  }\n}\n","import { effect, reactive } from './reactivity'\nimport { evaluate, evaluateEvent } from './evaluator'\n\nexport type Context = Record<string, any>\n\nexport function createContext(scopeData: any, parentContext: Context | null = null): Context {\n  const reactiveScope = scopeData.__isReactive ? scopeData : reactive(scopeData)\n  \n  return new Proxy(reactiveScope, {\n    get(target, prop) {\n      if (prop === '__isContext') return true\n      if (prop in target) return Reflect.get(target, prop, target)\n      if (parentContext && prop in parentContext) {\n        return Reflect.get(parentContext, prop, parentContext)\n      }\n      return Reflect.get(target, prop, target)\n    },\n    set(target, prop, value) {\n      if (prop in target) return Reflect.set(target, prop, value, target)\n      if (parentContext && prop in parentContext) {\n        return Reflect.set(parentContext, prop, value, parentContext)\n      }\n      return Reflect.set(target, prop, value, target)\n    },\n    has(target, prop) {\n      if (prop in target) return true\n      if (parentContext && prop in parentContext) return true\n      return false\n    }\n  })\n}\n\nexport function parseNode(node: Node, context: Context) {\n  if (node.nodeType === Node.ELEMENT_NODE) {\n    const el = node as HTMLElement\n\n    // 1. Check for scope\n    let currentContext = context\n    const scopeAttr = el.getAttribute('ui:scope') || el.getAttribute(':scope')\n    if (scopeAttr) {\n      const scopeData = evaluate(scopeAttr, context) || {}\n      currentContext = createContext(scopeData, context)\n      el.removeAttribute('ui:scope')\n      el.removeAttribute(':scope')\n    }\n\n    // 2. Check for ui:for (must be processed before children and other directives on same element)\n    const forAttr = el.getAttribute('ui:for') || el.getAttribute(':for')\n    if (forAttr) {\n      el.removeAttribute('ui:for')\n      el.removeAttribute(':for')\n      processFor(el, forAttr, currentContext)\n      return // Stop processing this node further, processFor handles clones\n    }\n\n    // 3. Check for ui:if\n    const ifAttr = el.getAttribute('ui:if') || el.getAttribute(':if')\n    if (ifAttr) {\n      el.removeAttribute('ui:if')\n      el.removeAttribute(':if')\n      processIf(el, ifAttr, currentContext)\n      // We continue processing children because the element might be shown\n    }\n\n    // 4. Other directives\n    const attrs = Array.from(el.attributes)\n    for (const attr of attrs) {\n      const { name, value } = attr\n      const isText = ['ui:text', ':text'].includes(name)\n      const isTwoWayBind = ['ui:bind', ':bind'].includes(name)\n      const isAttrBind = name.startsWith('ui:') || name.startsWith(':') \n      const isEvent = name.startsWith('ui@') || name.startsWith('@')\n\n      if (isText) {\n        el.removeAttribute(name)\n        effect(() => {\n          const val = evaluate(value, currentContext)\n          el.textContent = val !== undefined && val !== null ? String(val) : ''\n        })\n      } else if (isTwoWayBind) {\n        el.removeAttribute(name)\n        processTwoWayBinding(el, value, currentContext)\n      } else if (isAttrBind) {\n        const boundAttr = name.split(':').pop()! \n        el.removeAttribute(name)\n        effect(() => {\n          const val = evaluate(value, currentContext)\n          if (val === null || val === undefined || val === false) {\n            el.removeAttribute(boundAttr)\n          } else if (val === true) {\n            el.setAttribute(boundAttr, '')\n          } else {\n            el.setAttribute(boundAttr, String(val))\n          }\n        })\n      } else if (isEvent) {\n        const eventName = name.split('@').pop()!\n        el.removeAttribute(name)\n        el.addEventListener(eventName, ($event) => {\n          evaluateEvent(value, currentContext, $event)\n        })\n      }\n    }\n\n    // Process children\n    // Need to convert to array because childNodes might mutate if elements are added/removed\n    const children = Array.from(el.childNodes)\n    for (const child of children) {\n      parseNode(child, currentContext)\n    }\n  }\n}\n\nfunction processIf(el: HTMLElement, expr: string, context: Context) {\n  const parent = el.parentNode\n  if (!parent) return\n\n  const uuid = crypto.randomUUID()\n  const comment = document.createComment(` ui:if ${uuid} `)\n  parent.insertBefore(comment, el)\n\n  effect(() => {\n    const val = evaluate(expr, context)\n    if (val) {\n      if (!el.parentNode) {\n        comment.parentNode?.insertBefore(el, comment.nextSibling)\n      }\n    } else {\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n}\n\nfunction processFor(el: HTMLElement, expr: string, context: Context) {\n  const parent = el.parentNode\n  if (!parent) return\n  \n  const match = expr.match(/^\\s*(.+)\\s+(?:in|of)\\s+(.+)\\s*$/)\n  if (!match) {\n    console.warn(`[jsweb/ui] Invalid ui:for expression: ${expr}`)\n    return\n  }\n  const [, itemName, listName] = match\n  \n  const keyExpr = el.getAttribute('ui:key') || el.getAttribute(':key')\n  el.removeAttribute('ui:key')\n  el.removeAttribute(':key')\n  \n  const uuid = crypto.randomUUID()\n  const comment = document.createComment(` ui:for ${uuid} `)\n  parent.replaceChild(comment, el)\n  \n  type RenderedNode = {\n    key: any\n    el: HTMLElement\n    scope: any\n  }\n  let renderedNodes: RenderedNode[] = []\n\n  effect(() => {\n    const list = evaluate(listName, context)\n\n    if (!Array.isArray(list)) {\n      renderedNodes.forEach(node => node.el.parentNode?.removeChild(node.el))\n      renderedNodes = []\n      return\n    }\n\n    const newNodes: RenderedNode[] = []\n    const oldNodesByKey = new Map<any, RenderedNode>()\n    renderedNodes.forEach(node => oldNodesByKey.set(node.key, node))\n\n    list.forEach((item, index) => {\n      const scope = { [itemName]: item, $index: index }\n      let key: any = index\n\n      if (keyExpr) {\n        const tempContext = createContext(scope, context)\n        key = evaluate(keyExpr, tempContext)\n      }\n\n      let node = oldNodesByKey.get(key)\n      if (node) {\n        // Reuse node\n        node.scope[itemName] = item\n        node.scope.$index = index\n        oldNodesByKey.delete(key)\n      } else {\n        // Create new node\n        const clone = el.cloneNode(true) as HTMLElement\n        const reactiveScope = reactive(scope)\n        const localContext = createContext(reactiveScope, context)\n        parseNode(clone, localContext)\n        node = { key, el: clone, scope: reactiveScope }\n      }\n      \n      newNodes.push(node)\n    })\n\n    // Remove un-reused nodes\n    oldNodesByKey.forEach(node => {\n      node.el.parentNode?.removeChild(node.el)\n    })\n\n    // Reorder and insert new DOM nodes\n    let currentAnchor = comment.nextSibling\n    newNodes.forEach((node) => {\n      if (currentAnchor === node.el) {\n        currentAnchor = currentAnchor.nextSibling\n      } else {\n        comment.parentNode?.insertBefore(node.el, currentAnchor)\n      }\n    })\n\n    renderedNodes = newNodes\n  })\n}\n\nexport function createComponent(\n  selectorOrElement: string | HTMLElement,\n  rootContext: Context = {},\n) {\n  const el =\n    typeof selectorOrElement === 'string'\n      ? document.querySelector(selectorOrElement)\n      : selectorOrElement\n\n  if (el) {\n    parseNode(el, rootContext)\n  } else {\n    console.warn(`[jsweb/ui] Element not found: ${selectorOrElement}`)\n  }\n}\n\nfunction processTwoWayBinding(el: HTMLElement, expr: string, context: Context) {\n  const isCheckbox = el instanceof HTMLInputElement && el.type === 'checkbox'\n  const isRadio = el instanceof HTMLInputElement && el.type === 'radio'\n  \n  // 1. Reactive state to DOM\n  effect(() => {\n    const val = evaluate(expr, context)\n    if (isCheckbox) {\n      const target = el as HTMLInputElement\n      target.checked = !!val\n    } else if (isRadio) {\n      const target = el as HTMLInputElement\n      target.checked = target.value === String(val)\n    } else {\n      const target = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      target.value = val == null ? '' : String(val)\n    }\n  })\n\n  // 2. DOM to Reactive state\n  const isChange = isCheckbox || isRadio || el instanceof HTMLSelectElement\n  const eventName = isChange ? 'change' : 'input'\n  el.addEventListener(eventName, ($event) => {\n    if (isCheckbox) {\n      evaluateEvent(`${expr} = $event.target.checked`, context, $event)\n    } else {\n      evaluateEvent(`${expr} = $event.target.value`, context, $event)\n    }\n  })\n}\n","import { reactive, effect, track, trigger } from './reactivity'\nimport { evaluate, evaluateEvent } from './evaluator'\nimport { createComponent, parseNode } from './parser'\n\nexport {\n  reactive,\n  effect,\n  track,\n  trigger,\n  evaluate,\n  evaluateEvent,\n  createComponent,\n  parseNode,\n}\n\nif (typeof window !== 'undefined') {\n  const w = window as any\n  w.jsweb = w.jsweb || {}\n  w.jsweb.ui = {\n    createComponent,\n    reactive,\n    effect,\n    track,\n    trigger,\n    evaluate,\n    evaluateEvent,\n    parseNode,\n  }\n}\n"],"mappings":"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"}

package/dist/ui.umd.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@jsweb/ui"]={})}(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var t=null,n=new WeakMap;function o(e){const n=()=>{t=n,e(),t=null};n()}function r(e,o){if(t){let r=n.get(e);r||(r=new Map,n.set(e,r));let i=r.get(o);i||(i=new Set,r.set(o,i)),i.add(t)}}function i(e,t){const o=n.get(e);if(!o)return;const r=o.get(t);r&&r.forEach(e=>e())}function c(e){return"object"!=typeof e||null===e||e.__isReactive?e:new Proxy(e,{get(e,t,n){if("__isReactive"===t)return!0;r(e,t);const o=Reflect.get(e,t,n);return"object"==typeof o&&null!==o?c(o):o},set(e,t,n,o){const r=Array.isArray(e),c=Reflect.get(e,t,o),s=r&&String(Number(t))===t?Number(t)<e.length:Object.prototype.hasOwnProperty.call(e,t),u=Reflect.set(e,t,n,o);return s?c!==n&&i(e,t):(i(e,t),r&&"length"!==t&&i(e,"length")),u}})}function s(e,t={}){try{return new Function(`with(this) { return ${e} }`).call(t)}catch(n){return void console.error(`[jsweb/ui] Error evaluating expression: ${e}`,n)}}function u(e,t={},n){try{const o=e.trim(),r=/^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(o);new Function("$event",`with(this) { ${r?`${o} instanceof Function ? ${o}.call(this, $event) : ${o}`:o} }`).call(t,n)}catch(o){console.error(`[jsweb/ui] Error evaluating event expression: ${e}`,o)}}function l(e,t=null){const n=e.__isReactive?e:c(e);return new Proxy(n,{get:(e,n)=>"__isContext"===n||(n in e?Reflect.get(e,n,e):t&&n in t?Reflect.get(t,n,t):Reflect.get(e,n,e)),set:(e,n,o)=>n in e?Reflect.set(e,n,o,e):t&&n in t?Reflect.set(t,n,o,t):Reflect.set(e,n,o,e),has:(e,n)=>n in e||!(!t||!(n in t))})}function a(e,t){if(e.nodeType===Node.ELEMENT_NODE){const n=e;let r=t;const i=n.getAttribute("ui:scope")||n.getAttribute(":scope");i&&(r=l(s(i,t)||{},t),n.removeAttribute("ui:scope"),n.removeAttribute(":scope"));const f=n.getAttribute("ui:for")||n.getAttribute(":for");if(f)return n.removeAttribute("ui:for"),n.removeAttribute(":for"),void function(e,t,n){const r=e.parentNode;if(!r)return;const i=t.match(/^\s*(.+)\s+(?:in|of)\s+(.+)\s*$/);if(!i)return void console.warn(`[jsweb/ui] Invalid ui:for expression: ${t}`);const[,u,f]=i,d=e.getAttribute("ui:key")||e.getAttribute(":key");e.removeAttribute("ui:key"),e.removeAttribute(":key");const p=crypto.randomUUID(),b=document.createComment(` ui:for ${p} `);r.replaceChild(b,e);let v=[];o(()=>{const t=s(f,n);if(!Array.isArray(t))return v.forEach(e=>e.el.parentNode?.removeChild(e.el)),void(v=[]);const o=[],r=new Map;v.forEach(e=>r.set(e.key,e)),t.forEach((t,i)=>{const f={[u]:t,$index:i};let p=i;d&&(p=s(d,l(f,n)));let b=r.get(p);if(b)b.scope[u]=t,b.scope.$index=i,r.delete(p);else{const t=e.cloneNode(!0),o=c(f);a(t,l(o,n)),b={key:p,el:t,scope:o}}o.push(b)}),r.forEach(e=>{e.el.parentNode?.removeChild(e.el)});let i=b.nextSibling;o.forEach(e=>{i===e.el?i=i.nextSibling:b.parentNode?.insertBefore(e.el,i)}),v=o})}(n,f,r);const p=n.getAttribute("ui:if")||n.getAttribute(":if");p&&(n.removeAttribute("ui:if"),n.removeAttribute(":if"),function(e,t,n){const r=e.parentNode;if(!r)return;const i=crypto.randomUUID(),c=document.createComment(` ui:if ${i} `);r.insertBefore(c,e),o(()=>{s(t,n)?e.parentNode||c.parentNode?.insertBefore(e,c.nextSibling):e.parentNode&&e.parentNode.removeChild(e)})}(n,p,r));const b=Array.from(n.attributes);for(const e of b){const{name:t,value:i}=e,c=["ui:text",":text"].includes(t),l=["ui:bind",":bind"].includes(t),a=t.startsWith("ui:")||t.startsWith(":"),f=t.startsWith("ui@")||t.startsWith("@");if(c)n.removeAttribute(t),o(()=>{const e=s(i,r);n.textContent=null!=e?String(e):""});else if(l)n.removeAttribute(t),d(n,i,r);else if(a){const e=t.split(":").pop();n.removeAttribute(t),o(()=>{const t=s(i,r);null==t||!1===t?n.removeAttribute(e):!0===t?n.setAttribute(e,""):n.setAttribute(e,String(t))})}else if(f){const e=t.split("@").pop();n.removeAttribute(t),n.addEventListener(e,e=>{u(i,r,e)})}}const v=Array.from(n.childNodes);for(const e of v)a(e,r)}}function f(e,t={}){const n="string"==typeof e?document.querySelector(e):e;n?a(n,t):console.warn(`[jsweb/ui] Element not found: ${e}`)}function d(e,t,n){const r=e instanceof HTMLInputElement&&"checkbox"===e.type,i=e instanceof HTMLInputElement&&"radio"===e.type;o(()=>{const o=s(t,n);if(r){e.checked=!!o}else if(i){const t=e;t.checked=t.value===String(o)}else{e.value=null==o?"":String(o)}});const c=r||i||e instanceof HTMLSelectElement?"change":"input";e.addEventListener(c,e=>{u(r?`${t} = $event.target.checked`:`${t} = $event.target.value`,n,e)})}if("undefined"!=typeof window){const e=window;e.jsweb=e.jsweb||{},e.jsweb.ui={createComponent:f,reactive:c,effect:o,track:r,trigger:i,evaluate:s,evaluateEvent:u,parseNode:a}}e.createComponent=f,e.effect=o,e.evaluate=s,e.evaluateEvent=u,e.parseNode=a,e.reactive=c,e.track=r,e.trigger=i});
+//# sourceMappingURL=ui.umd.js.map

package/dist/ui.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.umd.js","names":[],"sources":["../src/reactivity.ts","../src/evaluator.ts","../src/parser.ts","../src/index.ts"],"sourcesContent":["let activeEffect: (() => void) | null = null\nconst targetMap = new WeakMap<object, Map<string | symbol, Set<() => void>>>()\n\nexport function effect(fn: () => void) {\n  const effectFn = () => {\n    // cleanup old deps could be added here\n    activeEffect = effectFn\n    fn()\n    activeEffect = null\n  }\n  effectFn()\n}\n\nexport function track(target: object, key: string | symbol) {\n  if (activeEffect) {\n    let depsMap = targetMap.get(target)\n    if (!depsMap) {\n      depsMap = new Map()\n      targetMap.set(target, depsMap)\n    }\n    let dep = depsMap.get(key)\n    if (!dep) {\n      dep = new Set()\n      depsMap.set(key, dep)\n    }\n    dep.add(activeEffect)\n  }\n}\n\nexport function trigger(target: object, key: string | symbol) {\n  const depsMap = targetMap.get(target)\n  if (!depsMap) return\n  const dep = depsMap.get(key)\n  if (dep) {\n    dep.forEach((effectFn) => effectFn())\n  }\n}\n\nexport function reactive<T extends object>(target: T): T {\n  if (typeof target !== 'object' || target === null) return target\n  if ((target as any).__isReactive) return target\n\n  return new Proxy(target, {\n    get(obj, key, receiver) {\n      if (key === '__isReactive') return true\n      track(obj, key)\n      const res = Reflect.get(obj, key, receiver)\n      // deep reactivity\n      if (typeof res === 'object' && res !== null) {\n        return reactive(res)\n      }\n      return res\n    },\n    set(obj, key, value, receiver) {\n      const isArray = Array.isArray(obj)\n      const oldValue = Reflect.get(obj, key, receiver)\n      const hadKey = isArray && String(Number(key)) === key \n        ? Number(key) < obj.length \n        : Object.prototype.hasOwnProperty.call(obj, key)\n\n      const result = Reflect.set(obj, key, value, receiver)\n\n      if (!hadKey) {\n        trigger(obj, key)\n        if (isArray && key !== 'length') {\n          trigger(obj, 'length')\n        }\n      } else if (oldValue !== value) {\n        trigger(obj, key)\n      }\n      \n      return result\n    },\n  })\n}\n","export function evaluate(\n  expression: string,\n  context: Record<string, any> = {},\n) {\n  try {\n    const fn = new Function(`with(this) { return ${expression} }`)\n    return fn.call(context)\n  } catch (error) {\n    console.error(`[jsweb/ui] Error evaluating expression: ${expression}`, error)\n    return undefined\n  }\n}\n\nexport function evaluateEvent(\n  expression: string,\n  context: Record<string, any> = {},\n  $event: Event,\n) {\n  try {\n    const exp = expression.trim()\n    const isIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(exp)\n    const code = `${exp} instanceof Function ? ${exp}.call(this, $event) : ${exp}`\n    const result = isIdentifier ? code : exp\n\n    const fn = new Function('$event', `with(this) { ${result} }`)\n    fn.call(context, $event)\n  } catch (error) {\n    console.error(\n      `[jsweb/ui] Error evaluating event expression: ${expression}`,\n      error,\n    )\n  }\n}\n","import { effect, reactive } from './reactivity'\nimport { evaluate, evaluateEvent } from './evaluator'\n\nexport type Context = Record<string, any>\n\nexport function createContext(scopeData: any, parentContext: Context | null = null): Context {\n  const reactiveScope = scopeData.__isReactive ? scopeData : reactive(scopeData)\n  \n  return new Proxy(reactiveScope, {\n    get(target, prop) {\n      if (prop === '__isContext') return true\n      if (prop in target) return Reflect.get(target, prop, target)\n      if (parentContext && prop in parentContext) {\n        return Reflect.get(parentContext, prop, parentContext)\n      }\n      return Reflect.get(target, prop, target)\n    },\n    set(target, prop, value) {\n      if (prop in target) return Reflect.set(target, prop, value, target)\n      if (parentContext && prop in parentContext) {\n        return Reflect.set(parentContext, prop, value, parentContext)\n      }\n      return Reflect.set(target, prop, value, target)\n    },\n    has(target, prop) {\n      if (prop in target) return true\n      if (parentContext && prop in parentContext) return true\n      return false\n    }\n  })\n}\n\nexport function parseNode(node: Node, context: Context) {\n  if (node.nodeType === Node.ELEMENT_NODE) {\n    const el = node as HTMLElement\n\n    // 1. Check for scope\n    let currentContext = context\n    const scopeAttr = el.getAttribute('ui:scope') || el.getAttribute(':scope')\n    if (scopeAttr) {\n      const scopeData = evaluate(scopeAttr, context) || {}\n      currentContext = createContext(scopeData, context)\n      el.removeAttribute('ui:scope')\n      el.removeAttribute(':scope')\n    }\n\n    // 2. Check for ui:for (must be processed before children and other directives on same element)\n    const forAttr = el.getAttribute('ui:for') || el.getAttribute(':for')\n    if (forAttr) {\n      el.removeAttribute('ui:for')\n      el.removeAttribute(':for')\n      processFor(el, forAttr, currentContext)\n      return // Stop processing this node further, processFor handles clones\n    }\n\n    // 3. Check for ui:if\n    const ifAttr = el.getAttribute('ui:if') || el.getAttribute(':if')\n    if (ifAttr) {\n      el.removeAttribute('ui:if')\n      el.removeAttribute(':if')\n      processIf(el, ifAttr, currentContext)\n      // We continue processing children because the element might be shown\n    }\n\n    // 4. Other directives\n    const attrs = Array.from(el.attributes)\n    for (const attr of attrs) {\n      const { name, value } = attr\n      const isText = ['ui:text', ':text'].includes(name)\n      const isTwoWayBind = ['ui:bind', ':bind'].includes(name)\n      const isAttrBind = name.startsWith('ui:') || name.startsWith(':') \n      const isEvent = name.startsWith('ui@') || name.startsWith('@')\n\n      if (isText) {\n        el.removeAttribute(name)\n        effect(() => {\n          const val = evaluate(value, currentContext)\n          el.textContent = val !== undefined && val !== null ? String(val) : ''\n        })\n      } else if (isTwoWayBind) {\n        el.removeAttribute(name)\n        processTwoWayBinding(el, value, currentContext)\n      } else if (isAttrBind) {\n        const boundAttr = name.split(':').pop()! \n        el.removeAttribute(name)\n        effect(() => {\n          const val = evaluate(value, currentContext)\n          if (val === null || val === undefined || val === false) {\n            el.removeAttribute(boundAttr)\n          } else if (val === true) {\n            el.setAttribute(boundAttr, '')\n          } else {\n            el.setAttribute(boundAttr, String(val))\n          }\n        })\n      } else if (isEvent) {\n        const eventName = name.split('@').pop()!\n        el.removeAttribute(name)\n        el.addEventListener(eventName, ($event) => {\n          evaluateEvent(value, currentContext, $event)\n        })\n      }\n    }\n\n    // Process children\n    // Need to convert to array because childNodes might mutate if elements are added/removed\n    const children = Array.from(el.childNodes)\n    for (const child of children) {\n      parseNode(child, currentContext)\n    }\n  }\n}\n\nfunction processIf(el: HTMLElement, expr: string, context: Context) {\n  const parent = el.parentNode\n  if (!parent) return\n\n  const uuid = crypto.randomUUID()\n  const comment = document.createComment(` ui:if ${uuid} `)\n  parent.insertBefore(comment, el)\n\n  effect(() => {\n    const val = evaluate(expr, context)\n    if (val) {\n      if (!el.parentNode) {\n        comment.parentNode?.insertBefore(el, comment.nextSibling)\n      }\n    } else {\n      if (el.parentNode) {\n        el.parentNode.removeChild(el)\n      }\n    }\n  })\n}\n\nfunction processFor(el: HTMLElement, expr: string, context: Context) {\n  const parent = el.parentNode\n  if (!parent) return\n  \n  const match = expr.match(/^\\s*(.+)\\s+(?:in|of)\\s+(.+)\\s*$/)\n  if (!match) {\n    console.warn(`[jsweb/ui] Invalid ui:for expression: ${expr}`)\n    return\n  }\n  const [, itemName, listName] = match\n  \n  const keyExpr = el.getAttribute('ui:key') || el.getAttribute(':key')\n  el.removeAttribute('ui:key')\n  el.removeAttribute(':key')\n  \n  const uuid = crypto.randomUUID()\n  const comment = document.createComment(` ui:for ${uuid} `)\n  parent.replaceChild(comment, el)\n  \n  type RenderedNode = {\n    key: any\n    el: HTMLElement\n    scope: any\n  }\n  let renderedNodes: RenderedNode[] = []\n\n  effect(() => {\n    const list = evaluate(listName, context)\n\n    if (!Array.isArray(list)) {\n      renderedNodes.forEach(node => node.el.parentNode?.removeChild(node.el))\n      renderedNodes = []\n      return\n    }\n\n    const newNodes: RenderedNode[] = []\n    const oldNodesByKey = new Map<any, RenderedNode>()\n    renderedNodes.forEach(node => oldNodesByKey.set(node.key, node))\n\n    list.forEach((item, index) => {\n      const scope = { [itemName]: item, $index: index }\n      let key: any = index\n\n      if (keyExpr) {\n        const tempContext = createContext(scope, context)\n        key = evaluate(keyExpr, tempContext)\n      }\n\n      let node = oldNodesByKey.get(key)\n      if (node) {\n        // Reuse node\n        node.scope[itemName] = item\n        node.scope.$index = index\n        oldNodesByKey.delete(key)\n      } else {\n        // Create new node\n        const clone = el.cloneNode(true) as HTMLElement\n        const reactiveScope = reactive(scope)\n        const localContext = createContext(reactiveScope, context)\n        parseNode(clone, localContext)\n        node = { key, el: clone, scope: reactiveScope }\n      }\n      \n      newNodes.push(node)\n    })\n\n    // Remove un-reused nodes\n    oldNodesByKey.forEach(node => {\n      node.el.parentNode?.removeChild(node.el)\n    })\n\n    // Reorder and insert new DOM nodes\n    let currentAnchor = comment.nextSibling\n    newNodes.forEach((node) => {\n      if (currentAnchor === node.el) {\n        currentAnchor = currentAnchor.nextSibling\n      } else {\n        comment.parentNode?.insertBefore(node.el, currentAnchor)\n      }\n    })\n\n    renderedNodes = newNodes\n  })\n}\n\nexport function createComponent(\n  selectorOrElement: string | HTMLElement,\n  rootContext: Context = {},\n) {\n  const el =\n    typeof selectorOrElement === 'string'\n      ? document.querySelector(selectorOrElement)\n      : selectorOrElement\n\n  if (el) {\n    parseNode(el, rootContext)\n  } else {\n    console.warn(`[jsweb/ui] Element not found: ${selectorOrElement}`)\n  }\n}\n\nfunction processTwoWayBinding(el: HTMLElement, expr: string, context: Context) {\n  const isCheckbox = el instanceof HTMLInputElement && el.type === 'checkbox'\n  const isRadio = el instanceof HTMLInputElement && el.type === 'radio'\n  \n  // 1. Reactive state to DOM\n  effect(() => {\n    const val = evaluate(expr, context)\n    if (isCheckbox) {\n      const target = el as HTMLInputElement\n      target.checked = !!val\n    } else if (isRadio) {\n      const target = el as HTMLInputElement\n      target.checked = target.value === String(val)\n    } else {\n      const target = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      target.value = val == null ? '' : String(val)\n    }\n  })\n\n  // 2. DOM to Reactive state\n  const isChange = isCheckbox || isRadio || el instanceof HTMLSelectElement\n  const eventName = isChange ? 'change' : 'input'\n  el.addEventListener(eventName, ($event) => {\n    if (isCheckbox) {\n      evaluateEvent(`${expr} = $event.target.checked`, context, $event)\n    } else {\n      evaluateEvent(`${expr} = $event.target.value`, context, $event)\n    }\n  })\n}\n","import { reactive, effect, track, trigger } from './reactivity'\nimport { evaluate, evaluateEvent } from './evaluator'\nimport { createComponent, parseNode } from './parser'\n\nexport {\n  reactive,\n  effect,\n  track,\n  trigger,\n  evaluate,\n  evaluateEvent,\n  createComponent,\n  parseNode,\n}\n\nif (typeof window !== 'undefined') {\n  const w = window as any\n  w.jsweb = w.jsweb || {}\n  w.jsweb.ui = {\n    createComponent,\n    reactive,\n    effect,\n    track,\n    trigger,\n    evaluate,\n    evaluateEvent,\n    parseNode,\n  }\n}\n"],"mappings":"mSAAA,IAAI,EAAoC,KAClC,EAAY,IAAI,QAEtB,SAAgB,EAAO,GACrB,MAAM,EAAA,KAEJ,EAAe,EACf,IACA,EAAe,MAEjB,IAGF,SAAgB,EAAM,EAAgB,GACpC,GAAI,EAAc,CAChB,IAAI,EAAU,EAAU,IAAI,GACvB,IACH,EAAU,IAAI,IACd,EAAU,IAAI,EAAQ,IAExB,IAAI,EAAM,EAAQ,IAAI,GACjB,IACH,EAAM,IAAI,IACV,EAAQ,IAAI,EAAK,IAEnB,EAAI,IAAI,IAIZ,SAAgB,EAAQ,EAAgB,GACtC,MAAM,EAAU,EAAU,IAAI,GAC9B,IAAK,EAAS,OACd,MAAM,EAAM,EAAQ,IAAI,GACpB,GACF,EAAI,QAAS,GAAa,KAI9B,SAAgB,EAA2B,GACzC,MAAsB,iBAAX,GAAkC,OAAX,GAC7B,EAAe,aADsC,EAGnD,IAAI,MAAM,EAAQ,CACvB,GAAA,CAAI,EAAK,EAAK,GACZ,GAAY,iBAAR,EAAwB,OAAO,EACnC,EAAM,EAAK,GACX,MAAM,EAAM,QAAQ,IAAI,EAAK,EAAK,GAElC,MAAmB,iBAAR,GAA4B,OAAR,EACtB,EAAS,GAEX,GAET,GAAA,CAAI,EAAK,EAAK,EAAO,GACnB,MAAM,EAAU,MAAM,QAAQ,GACxB,EAAW,QAAQ,IAAI,EAAK,EAAK,GACjC,EAAS,GAAW,OAAO,OAAO,MAAU,EAC9C,OAAO,GAAO,EAAI,OAClB,OAAO,UAAU,eAAe,KAAK,EAAK,GAExC,EAAS,QAAQ,IAAI,EAAK,EAAK,EAAO,GAW5C,OATK,EAKM,IAAa,GACtB,EAAQ,EAAK,IALb,EAAQ,EAAK,GACT,GAAmB,WAAR,GACb,EAAQ,EAAK,WAMV,KCvEb,SAAgB,EACd,EACA,EAA+B,CAAA,GAE/B,IAEE,OAAO,IADQ,SAAS,uBAAuB,OACrC,KAAK,SACR,GAEP,YADA,QAAQ,MAAM,2CAA2C,IAAc,IAK3E,SAAgB,EACd,EACA,EAA+B,CAAA,EAC/B,GAEA,IACE,MAAM,EAAM,EAAW,OACjB,EAAe,8BAA8B,KAAK,GAKxD,IADe,SAAS,SAAU,gBAFnB,EADF,GAAG,2BAA6B,0BAA4B,IACpC,OAGlC,KAAK,EAAS,SACV,GACP,QAAQ,MACN,iDAAiD,IACjD,ICxBN,SAAgB,EAAc,EAAgB,EAAgC,MAC5E,MAAM,EAAgB,EAAU,aAAe,EAAY,EAAS,GAEpE,OAAO,IAAI,MAAM,EAAe,CAC9B,IAAA,CAAI,EAAQ,IACG,gBAAT,IACA,KAAQ,EAAe,QAAQ,IAAI,EAAQ,EAAM,GACjD,GAAiB,KAAQ,EACpB,QAAQ,IAAI,EAAe,EAAM,GAEnC,QAAQ,IAAI,EAAQ,EAAM,IAEnC,IAAA,CAAI,EAAQ,EAAM,IACZ,KAAQ,EAAe,QAAQ,IAAI,EAAQ,EAAM,EAAO,GACxD,GAAiB,KAAQ,EACpB,QAAQ,IAAI,EAAe,EAAM,EAAO,GAE1C,QAAQ,IAAI,EAAQ,EAAM,EAAO,GAE1C,IAAA,CAAI,EAAQ,IACN,KAAQ,MACR,KAAiB,KAAQ,MAMnC,SAAgB,EAAU,EAAY,GACpC,GAAI,EAAK,WAAa,KAAK,aAAc,CACvC,MAAM,EAAK,EAGX,IAAI,EAAiB,EACrB,MAAM,EAAY,EAAG,aAAa,aAAe,EAAG,aAAa,UAC7D,IAEF,EAAiB,EADC,EAAS,EAAW,IAAY,CAAA,EACR,GAC1C,EAAG,gBAAgB,YACnB,EAAG,gBAAgB,WAIrB,MAAM,EAAU,EAAG,aAAa,WAAa,EAAG,aAAa,QAC7D,GAAI,EAIF,OAHA,EAAG,gBAAgB,UACnB,EAAG,gBAAgB,aAqFzB,SAAoB,EAAiB,EAAc,GACjD,MAAM,EAAS,EAAG,WAClB,IAAK,EAAQ,OAEb,MAAM,EAAQ,EAAK,MAAM,mCACzB,IAAK,EAEH,YADA,QAAQ,KAAK,yCAAyC,KAGxD,MAAM,CAAG,EAAU,GAAY,EAEzB,EAAU,EAAG,aAAa,WAAa,EAAG,aAAa,QAC7D,EAAG,gBAAgB,UACnB,EAAG,gBAAgB,QAEnB,MAAM,EAAO,OAAO,aACd,EAAU,SAAS,cAAc,WAAW,MAClD,EAAO,aAAa,EAAS,GAO7B,IAAI,EAAgC,GAEpC,EAAA,KACE,MAAM,EAAO,EAAS,EAAU,GAEhC,IAAK,MAAM,QAAQ,GAGjB,OAFA,EAAc,QAAQ,GAAQ,EAAK,GAAG,YAAY,YAAY,EAAK,UACnE,EAAgB,IAIlB,MAAM,EAA2B,GAC3B,EAAgB,IAAI,IAC1B,EAAc,QAAQ,GAAQ,EAAc,IAAI,EAAK,IAAK,IAE1D,EAAK,QAAA,CAAS,EAAM,KAClB,MAAM,EAAQ,EAAG,GAAW,EAAM,OAAQ,GAC1C,IAAI,EAAW,EAEX,IAEF,EAAM,EAAS,EADK,EAAc,EAAO,KAI3C,IAAI,EAAO,EAAc,IAAI,GAC7B,GAAI,EAEF,EAAK,MAAM,GAAY,EACvB,EAAK,MAAM,OAAS,EACpB,EAAc,OAAO,OAChB,CAEL,MAAM,EAAQ,EAAG,WAAU,GACrB,EAAgB,EAAS,GAE/B,EAAU,EADW,EAAc,EAAe,IAElD,EAAO,CAAE,MAAK,GAAI,EAAO,MAAO,GAGlC,EAAS,KAAK,KAIhB,EAAc,QAAQ,IACpB,EAAK,GAAG,YAAY,YAAY,EAAK,MAIvC,IAAI,EAAgB,EAAQ,YAC5B,EAAS,QAAS,IACZ,IAAkB,EAAK,GACzB,EAAgB,EAAc,YAE9B,EAAQ,YAAY,aAAa,EAAK,GAAI,KAI9C,EAAgB,IArKd,CAAW,EAAI,EAAS,GAK1B,MAAM,EAAS,EAAG,aAAa,UAAY,EAAG,aAAa,OACvD,IACF,EAAG,gBAAgB,SACnB,EAAG,gBAAgB,OAsDzB,SAAmB,EAAiB,EAAc,GAChD,MAAM,EAAS,EAAG,WAClB,IAAK,EAAQ,OAEb,MAAM,EAAO,OAAO,aACd,EAAU,SAAS,cAAc,UAAU,MACjD,EAAO,aAAa,EAAS,GAE7B,EAAA,KACc,EAAS,EAAM,GAEpB,EAAG,YACN,EAAQ,YAAY,aAAa,EAAI,EAAQ,aAG3C,EAAG,YACL,EAAG,WAAW,YAAY,KArE5B,CAAU,EAAI,EAAQ,IAKxB,MAAM,EAAQ,MAAM,KAAK,EAAG,YAC5B,IAAK,MAAM,KAAQ,EAAO,CACxB,MAAM,KAAE,EAAA,MAAM,GAAU,EAClB,EAAS,CAAC,UAAW,SAAS,SAAS,GACvC,EAAe,CAAC,UAAW,SAAS,SAAS,GAC7C,EAAa,EAAK,WAAW,QAAU,EAAK,WAAW,KACvD,EAAU,EAAK,WAAW,QAAU,EAAK,WAAW,KAE1D,GAAI,EACF,EAAG,gBAAgB,GACnB,EAAA,KACE,MAAM,EAAM,EAAS,EAAO,GAC5B,EAAG,YAAc,QAAoC,OAAO,GAAO,aAE5D,EACT,EAAG,gBAAgB,GACnB,EAAqB,EAAI,EAAO,WACvB,EAAY,CACrB,MAAM,EAAY,EAAK,MAAM,KAAK,MAClC,EAAG,gBAAgB,GACnB,EAAA,KACE,MAAM,EAAM,EAAS,EAAO,GACxB,UAA6C,IAAR,EACvC,EAAG,gBAAgB,IACF,IAAR,EACT,EAAG,aAAa,EAAW,IAE3B,EAAG,aAAa,EAAW,OAAO,cAG7B,EAAS,CAClB,MAAM,EAAY,EAAK,MAAM,KAAK,MAClC,EAAG,gBAAgB,GACnB,EAAG,iBAAiB,EAAY,IAC9B,EAAc,EAAO,EAAgB,MAO3C,MAAM,EAAW,MAAM,KAAK,EAAG,YAC/B,IAAK,MAAM,KAAS,EAClB,EAAU,EAAO,IAgHvB,SAAgB,EACd,EACA,EAAuB,CAAA,GAEvB,MAAM,EACyB,iBAAtB,EACH,SAAS,cAAc,GACvB,EAEF,EACF,EAAU,EAAI,GAEd,QAAQ,KAAK,iCAAiC,KAIlD,SAAS,EAAqB,EAAiB,EAAc,GAC3D,MAAM,EAAa,aAAc,kBAAgC,aAAZ,EAAG,KAClD,EAAU,aAAc,kBAAgC,UAAZ,EAAG,KAGrD,EAAA,KACE,MAAM,EAAM,EAAS,EAAM,GAC3B,GAAI,EAAY,CACC,EACR,UAAY,UACV,EAAS,CAClB,MAAM,EAAS,EACf,EAAO,QAAU,EAAO,QAAU,OAAO,OACpC,CACU,EACR,MAAe,MAAP,EAAc,GAAK,OAAO,MAM7C,MAAM,EADW,GAAc,GAAW,aAAc,kBAC3B,SAAW,QACxC,EAAG,iBAAiB,EAAY,IAE5B,EADE,EACY,GAAG,4BAEH,GAAG,0BAFgC,EAAS,KCrPhE,GAAsB,oBAAX,OAAwB,CACjC,MAAM,EAAI,OACV,EAAE,MAAQ,EAAE,OAAS,CAAA,EACrB,EAAE,MAAM,GAAK,CACX,kBACA,WACA,SACA,QACA,UACA,WACA,gBACA"}

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/index.html

@@ -0,0 +1,87 @@
+<!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>
+    <script type="module">
+      import { createComponent, reactive } from '/src/index.ts'
+
+      const scope = reactive({
+        count: 0,
+        inc: 'Incremento',
+        dec: 'Decremento',
+        model: 'Exemplo',
+        items: ['A', 'B', 'C'],
+        
+        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}`)
+        }
+      })
+
+      window.scope = scope
+
+      createComponent('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>
+    </div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@jsweb/ui",
+  "version": "0.1.0",
+  "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": "dist/ui.umd.js",
+  "module": "dist/ui.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "format": "prettier --write .",
+    "test": "echo 'test'",
+    "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/src/evaluator.ts

@@ -0,0 +1,33 @@
+export function evaluate(
+  expression: string,
+  context: Record<string, any> = {},
+) {
+  try {
+    const fn = new Function(`with(this) { return ${expression} }`)
+    return fn.call(context)
+  } catch (error) {
+    console.error(`[jsweb/ui] Error evaluating expression: ${expression}`, error)
+    return undefined
+  }
+}
+
+export function evaluateEvent(
+  expression: string,
+  context: Record<string, any> = {},
+  $event: Event,
+) {
+  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 (error) {
+    console.error(
+      `[jsweb/ui] Error evaluating event expression: ${expression}`,
+      error,
+    )
+  }
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+import { reactive, effect, track, trigger } from './reactivity'
+import { evaluate, evaluateEvent } from './evaluator'
+import { createComponent, parseNode } from './parser'
+
+export {
+  reactive,
+  effect,
+  track,
+  trigger,
+  evaluate,
+  evaluateEvent,
+  createComponent,
+  parseNode,
+}
+
+if (typeof window !== 'undefined') {
+  const w = window as any
+  w.jsweb = w.jsweb || {}
+  w.jsweb.ui = {
+    createComponent,
+    reactive,
+    effect,
+    track,
+    trigger,
+    evaluate,
+    evaluateEvent,
+    parseNode,
+  }
+}

package/src/parser.ts

@@ -0,0 +1,266 @@
+import { effect, reactive } from './reactivity'
+import { evaluate, evaluateEvent } from './evaluator'
+
+export type Context = Record<string, any>
+
+export function createContext(scopeData: any, parentContext: Context | null = null): Context {
+  const reactiveScope = scopeData.__isReactive ? scopeData : reactive(scopeData)
+  
+  return new Proxy(reactiveScope, {
+    get(target, prop) {
+      if (prop === '__isContext') return true
+      if (prop in target) return Reflect.get(target, prop, target)
+      if (parentContext && prop in parentContext) {
+        return Reflect.get(parentContext, prop, parentContext)
+      }
+      return Reflect.get(target, prop, target)
+    },
+    set(target, prop, value) {
+      if (prop in target) return Reflect.set(target, prop, value, target)
+      if (parentContext && prop in parentContext) {
+        return Reflect.set(parentContext, prop, value, parentContext)
+      }
+      return Reflect.set(target, prop, value, target)
+    },
+    has(target, prop) {
+      if (prop in target) return true
+      if (parentContext && prop in parentContext) return true
+      return false
+    }
+  })
+}
+
+export function parseNode(node: Node, context: Context) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node as HTMLElement
+
+    // 1. Check for scope
+    let currentContext = context
+    const scopeAttr = el.getAttribute('ui:scope') || el.getAttribute(':scope')
+    if (scopeAttr) {
+      const scopeData = evaluate(scopeAttr, context) || {}
+      currentContext = createContext(scopeData, context)
+      el.removeAttribute('ui:scope')
+      el.removeAttribute(':scope')
+    }
+
+    // 2. Check for ui:for (must be processed before children and other directives on same element)
+    const forAttr = el.getAttribute('ui:for') || el.getAttribute(':for')
+    if (forAttr) {
+      el.removeAttribute('ui:for')
+      el.removeAttribute(':for')
+      processFor(el, forAttr, currentContext)
+      return // Stop processing this node further, processFor handles clones
+    }
+
+    // 3. Check for ui:if
+    const ifAttr = el.getAttribute('ui:if') || el.getAttribute(':if')
+    if (ifAttr) {
+      el.removeAttribute('ui:if')
+      el.removeAttribute(':if')
+      processIf(el, ifAttr, currentContext)
+      // We continue processing children because the element might be shown
+    }
+
+    // 4. Other directives
+    const attrs = Array.from(el.attributes)
+    for (const attr of attrs) {
+      const { name, value } = attr
+      const isText = ['ui:text', ':text'].includes(name)
+      const isTwoWayBind = ['ui:bind', ':bind'].includes(name)
+      const isAttrBind = name.startsWith('ui:') || name.startsWith(':') 
+      const isEvent = name.startsWith('ui@') || name.startsWith('@')
+
+      if (isText) {
+        el.removeAttribute(name)
+        effect(() => {
+          const val = evaluate(value, currentContext)
+          el.textContent = val !== undefined && val !== null ? String(val) : ''
+        })
+      } else if (isTwoWayBind) {
+        el.removeAttribute(name)
+        processTwoWayBinding(el, value, currentContext)
+      } else if (isAttrBind) {
+        const boundAttr = name.split(':').pop()! 
+        el.removeAttribute(name)
+        effect(() => {
+          const val = evaluate(value, currentContext)
+          if (val === null || val === undefined || val === false) {
+            el.removeAttribute(boundAttr)
+          } else if (val === true) {
+            el.setAttribute(boundAttr, '')
+          } else {
+            el.setAttribute(boundAttr, String(val))
+          }
+        })
+      } else if (isEvent) {
+        const eventName = name.split('@').pop()!
+        el.removeAttribute(name)
+        el.addEventListener(eventName, ($event) => {
+          evaluateEvent(value, currentContext, $event)
+        })
+      }
+    }
+
+    // Process children
+    // Need to convert to array because childNodes might mutate if elements are added/removed
+    const children = Array.from(el.childNodes)
+    for (const child of children) {
+      parseNode(child, currentContext)
+    }
+  }
+}
+
+function processIf(el: HTMLElement, expr: string, context: Context) {
+  const parent = el.parentNode
+  if (!parent) return
+
+  const uuid = crypto.randomUUID()
+  const comment = document.createComment(` ui:if ${uuid} `)
+  parent.insertBefore(comment, el)
+
+  effect(() => {
+    const val = evaluate(expr, context)
+    if (val) {
+      if (!el.parentNode) {
+        comment.parentNode?.insertBefore(el, comment.nextSibling)
+      }
+    } else {
+      if (el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    }
+  })
+}
+
+function processFor(el: HTMLElement, expr: string, context: Context) {
+  const parent = el.parentNode
+  if (!parent) return
+  
+  const match = expr.match(/^\s*(.+)\s+(?:in|of)\s+(.+)\s*$/)
+  if (!match) {
+    console.warn(`[jsweb/ui] Invalid ui:for expression: ${expr}`)
+    return
+  }
+  const [, itemName, listName] = match
+  
+  const keyExpr = el.getAttribute('ui:key') || el.getAttribute(':key')
+  el.removeAttribute('ui:key')
+  el.removeAttribute(':key')
+  
+  const uuid = crypto.randomUUID()
+  const comment = document.createComment(` ui:for ${uuid} `)
+  parent.replaceChild(comment, el)
+  
+  type RenderedNode = {
+    key: any
+    el: HTMLElement
+    scope: any
+  }
+  let renderedNodes: RenderedNode[] = []
+
+  effect(() => {
+    const list = evaluate(listName, context)
+
+    if (!Array.isArray(list)) {
+      renderedNodes.forEach(node => node.el.parentNode?.removeChild(node.el))
+      renderedNodes = []
+      return
+    }
+
+    const newNodes: RenderedNode[] = []
+    const oldNodesByKey = new Map<any, RenderedNode>()
+    renderedNodes.forEach(node => oldNodesByKey.set(node.key, node))
+
+    list.forEach((item, index) => {
+      const scope = { [itemName]: item, $index: index }
+      let key: any = index
+
+      if (keyExpr) {
+        const tempContext = createContext(scope, context)
+        key = evaluate(keyExpr, tempContext)
+      }
+
+      let node = oldNodesByKey.get(key)
+      if (node) {
+        // Reuse node
+        node.scope[itemName] = item
+        node.scope.$index = index
+        oldNodesByKey.delete(key)
+      } else {
+        // Create new node
+        const clone = el.cloneNode(true) as HTMLElement
+        const reactiveScope = reactive(scope)
+        const localContext = createContext(reactiveScope, context)
+        parseNode(clone, localContext)
+        node = { key, el: clone, scope: reactiveScope }
+      }
+      
+      newNodes.push(node)
+    })
+
+    // Remove un-reused nodes
+    oldNodesByKey.forEach(node => {
+      node.el.parentNode?.removeChild(node.el)
+    })
+
+    // Reorder and insert new DOM nodes
+    let currentAnchor = comment.nextSibling
+    newNodes.forEach((node) => {
+      if (currentAnchor === node.el) {
+        currentAnchor = currentAnchor.nextSibling
+      } else {
+        comment.parentNode?.insertBefore(node.el, currentAnchor)
+      }
+    })
+
+    renderedNodes = newNodes
+  })
+}
+
+export function createComponent(
+  selectorOrElement: string | HTMLElement,
+  rootContext: Context = {},
+) {
+  const el =
+    typeof selectorOrElement === 'string'
+      ? document.querySelector(selectorOrElement)
+      : selectorOrElement
+
+  if (el) {
+    parseNode(el, rootContext)
+  } else {
+    console.warn(`[jsweb/ui] Element not found: ${selectorOrElement}`)
+  }
+}
+
+function processTwoWayBinding(el: HTMLElement, expr: string, context: Context) {
+  const isCheckbox = el instanceof HTMLInputElement && el.type === 'checkbox'
+  const isRadio = el instanceof HTMLInputElement && el.type === 'radio'
+  
+  // 1. Reactive state to DOM
+  effect(() => {
+    const val = evaluate(expr, context)
+    if (isCheckbox) {
+      const target = el as HTMLInputElement
+      target.checked = !!val
+    } else if (isRadio) {
+      const target = el as HTMLInputElement
+      target.checked = target.value === String(val)
+    } else {
+      const target = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      target.value = val == null ? '' : String(val)
+    }
+  })
+
+  // 2. DOM to Reactive state
+  const isChange = isCheckbox || isRadio || el instanceof HTMLSelectElement
+  const eventName = isChange ? 'change' : 'input'
+  el.addEventListener(eventName, ($event) => {
+    if (isCheckbox) {
+      evaluateEvent(`${expr} = $event.target.checked`, context, $event)
+    } else {
+      evaluateEvent(`${expr} = $event.target.value`, context, $event)
+    }
+  })
+}

package/src/reactivity.ts

@@ -0,0 +1,75 @@
+let activeEffect: (() => void) | null = null
+const targetMap = new WeakMap<object, Map<string | symbol, Set<() => void>>>()
+
+export function effect(fn: () => void) {
+  const effectFn = () => {
+    // cleanup old deps could be added here
+    activeEffect = effectFn
+    fn()
+    activeEffect = null
+  }
+  effectFn()
+}
+
+export function track(target: object, key: string | symbol) {
+  if (activeEffect) {
+    let depsMap = targetMap.get(target)
+    if (!depsMap) {
+      depsMap = new Map()
+      targetMap.set(target, depsMap)
+    }
+    let dep = depsMap.get(key)
+    if (!dep) {
+      dep = new Set()
+      depsMap.set(key, dep)
+    }
+    dep.add(activeEffect)
+  }
+}
+
+export function trigger(target: object, key: string | symbol) {
+  const depsMap = targetMap.get(target)
+  if (!depsMap) return
+  const dep = depsMap.get(key)
+  if (dep) {
+    dep.forEach((effectFn) => effectFn())
+  }
+}
+
+export function reactive<T extends object>(target: T): T {
+  if (typeof target !== 'object' || target === null) return target
+  if ((target as any).__isReactive) return target
+
+  return new Proxy(target, {
+    get(obj, key, receiver) {
+      if (key === '__isReactive') return true
+      track(obj, key)
+      const res = Reflect.get(obj, key, receiver)
+      // deep reactivity
+      if (typeof res === 'object' && res !== null) {
+        return reactive(res)
+      }
+      return res
+    },
+    set(obj, key, value, receiver) {
+      const isArray = Array.isArray(obj)
+      const oldValue = Reflect.get(obj, key, receiver)
+      const hadKey = isArray && String(Number(key)) === key 
+        ? Number(key) < obj.length 
+        : Object.prototype.hasOwnProperty.call(obj, key)
+
+      const result = Reflect.set(obj, key, value, receiver)
+
+      if (!hadKey) {
+        trigger(obj, key)
+        if (isArray && key !== 'length') {
+          trigger(obj, 'length')
+        }
+      } else if (oldValue !== value) {
+        trigger(obj, key)
+      }
+      
+      return result
+    },
+  })
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  build: {
+    lib: {
+      name: '@jsweb/ui',
+      formats: ['es', 'umd'],
+      entry: './src/index.ts',
+      fileName: (format: string) => `ui.${format}.js`,
+    },
+    sourcemap: true,
+    minify: 'terser',
+  },
+  plugins: [dts({ insertTypesEntry: true })],
+})