📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados no Módulo 05: JavaScript Fundamentos e DOM. Recomendado revisar antes de iniciar a execução.

🟨 Mini-Framework Reativo com Proxies & Virtual DOM

v1.0 — Implementação profunda dos princípios internos do Vue 3 e React: Proxy traps, rastreamento de dependências com WeakMap, árvore de Virtual DOM e algoritmo de reconciliação (diffing).

Trilha de Especialização Pedagógica — Série Front-End Moderno (Projeto 4 de 10)

• Design System & Tokens
• Manipulação Avançada de DOM & Storage
• SPA com Vanilla Router & History API
• Mini-Framework Reativo (este): Proxies JS, Dependency Tracking e Virtual DOM

🎓 Nível Profissional Simulado: Arquiteto de Software Frontend / Desenvolvedor Sênior. Desenvolvedores seniores não apenas usam bibliotecas: entendem como elas funcionam por baixo dos panos. Construir um motor reativo completo com a Proxy API e uma árvore de nós virtuais com algoritmo de diffing atômico consolida a maestria sobre os custos computacionais de renderização na web.

🏛️ Galeria Arquitetural & Diagramas de Engenharia

Arquitetura do Sistema Reativo e Pipeline de Reconciliação

📁 Estrutura Canônica de Pastas Anti-Colisão

O projeto adota a convenção padronizada de subpastas por camada e tecnologia <camada>-<tecnologia>:

catalogo_projetos/js_04_mini_reactive_framework/
├── web-vanilla/                # Motor reativo nativo
│   └── reactive.js             # Classes Dep, reactive(), watchEffect() e renderizador VNode
├── assets/                     # Galeria de diagramas vetoriais SVG autorais
└── README.md                   # Explicação dos algoritmos e benchmarks

🧑‍💼 Especificação Formal de Engenharia de Software

1. Histórias de Usuário (User Stories)

• US-RF01: Como desenvolvedor de aplicações, quero encapsular um objeto literal na função reactive(state) para que qualquer alteração em suas propriedades notifique automaticamente os observadores.
• US-RF02: Como desenvolvedor, quero registrar uma função através de watchEffect(fn) para que ela reexecute automaticamente sempre que qualquer propriedade acessada sofrer mutação.
• US-RF03: Como desenvolvedor, quero instanciar nós virtuais através da função h(tag, props, children) para representar a interface em memória antes de tocar no DOM real.
• US-RF04: Como engenheiro de performance, quero que o algoritmo de reconciliação (diffing) compare a árvore anterior e a nova, gerando patches apenas para nós efetivamente alterados.
• US-RF05: Como desenvolvedor, quero que a estrutura de rastreamento de dependências utilize referências fracas (WeakMap) para prevenir vazamentos de memória (memory leaks) quando objetos forem destruídos.

2. Requisitos Funcionais (RF)

• RF-RF01: A função reactive() deve utilizar new Proxy() interceptando as operações get (para registrar dependências com dep.depend()) e set (para notificar alterações com dep.notify()).
• RF-RF02: O gerenciador de dependências deve estruturar as dependências em 3 níveis hierárquicos: WeakMap<Target, Map<Key, Set<Effect>>>.
• RF-RF03: O interceptor set deve utilizar Reflect.set() e disparar notificações apenas quando o novo valor for diferente do anterior (oldValue !== newValue).
• RF-RF04: A função watchEffect(effect) deve associar a função ativa na variável global activeEffect antes de sua primeira execução para captura das dependências.
• RF-RF05: O montador deve suportar nós de texto e elementos estruturados com atributos dinâmicos e eventos (onClick).

3. Requisitos Não-Funcionais (RNF)

• RNF-RF01 (Tempo de Notificação): A propagação de uma mutação reativa e disparo do efeito correspondente deve ocorrer em menos de 1 milissegundo.
• RNF-RF02 (Zero Dependências Externas): O framework deve ser construído exclusivamente com JavaScript padrão ECMAScript 2020+.
• RNF-RF03 (Isolamento de Memória): Objetos reativos desvinculados do escopo global devem ser elegíveis para coleta imediata pelo Garbage Collector via WeakMap.
• RNF-RF04 (Idempotência de Efeitos): A coleção de inscritos de cada chave deve ser um Set, impedindo que o mesmo efeito seja duplicado na lista de assinantes.
• RNF-RF05 (Manutenibilidade): O código do motor não deve exceder 150 linhas mantendo extrema clareza didática.

📐 Diagrama de Casos de Uso (Mermaid)

flowchart LR
    subgraph Atores
        Dev["💻 Engenheiro de Software"]
        Engine["⚙️ Motor Reativo (Proxies)"]
    end

    subgraph "Mini-Framework Reativo"
        UC01["UC01: Declarar Estado Reativo com reactive()"]
        UC02["UC02: Registrar Efeito com watchEffect()"]
        UC03["UC03: Rastrear Dependências via Proxy GET"]
        UC04["UC04: Disparar Reconciliação via Proxy SET"]
        UC05["UC05: Aplicar Patch no DOM Real"]
    end

    Dev --> UC01
    Dev --> UC02
    UC01 --> UC03
    Dev --> UC04
    UC04 --> Engine
    Engine --> UC05

📊 Matriz de Rastreabilidade de Requisitos (RTM)

🚀 Roteiro de Execução & Homologação no Laboratório

1. Teste Rápido no Node.js ou Navegador

ℹ️ O trecho de código que ficava aqui não correspondia ao código do projeto e foi retirado. Consulte os arquivos em web-vanilla.

2. Execução no Terminal

cd catalogo_projetos/js_04_mini_reactive_framework
node -e "
const { reactive, watchEffect } = require('./web-vanilla/reactive.js');
const s = reactive({ valor: 10 });
watchEffect(() => console.log('Valor:', s.valor));
s.valor = 42;
"

🧪 Matriz de Checkpoints de Homologação (CP-01 a CP-05)