🧠 ReactiveObserver — Observa, intercepta y traza cambios en JS

Observa variables, objetos, estructuras anidadas y árboles completos.
Ejecuta acciones, genera historial, diffs y se integra con sistemas reactivamente trazables.

🔧 API principal

| Método | Descripción | |---------------------|--------------------------------------------------------------| | watchVar() | Observa una sola variable reactiva | | watchObject() | Observa propiedades planas de un objeto | | watchDeep() | Observa propiedades anidadas (user.name, settings.theme) | | watchTree() | Observa estructuras completas y genera diffs |

🧩 Métodos disponibles por utilidad

| Método | watchVar | watchObject | watchDeep | watchTree | |------------------|:----------:|:-------------:|:-----------:|:-----------:| | .get() | ✅ | ✅ | ✅ | ✅ | | .set() | ✅ | ✅ | ✅ | ✅ | | .update() | ✅ | ✅ | ✅ | ✅ | | .subscribe() | ✅ | ✅ | ✅ | ✅ | | .getHistory() | ✅ | ✅ | ✅ | ✅ | | .snapshot() | ❌ | ✅ | ✅ | ✅ | | .reset() | ✅ | ❌ | ❌ | ❌ | | .clone() | ✅ | ❌ | ❌ | ❌ | | .bindTo() | ✅ | ❌ | ❌ | ❌ | | .debug() | ✅ | ✅ | ✅ | ✅ | | .toReactv() | ✅ | ✅ | ✅ | ✅ | | .diff() | ❌ | ❌ | ❌ | ✅ |

📦 Changelog — ReactiveObserver

Todas las modificaciones importantes documentadas por versión.

[1.0.0] — 2025-10-06

✨ Features

• watchVar() — Observación de variables con .set(), .get(), .subscribe(), .bindTo(), .reset()
• watchObject() — Observación de propiedades planas con configuración por clave (validate, beforeChange, trackHistory)
• watchDeep() — Observación de propiedades anidadas con trazabilidad por path (user.name, settings.theme)
• watchTree() — Observación estructural completa con generación de diffs entre snapshots

🧠 Extensibilidad

• Middleware por clave o path: validate, beforeChange
• Historial por propiedad: .getHistory()
• Depuración avanzada: .debug() con listeners y estado
• Integración con sistemas reactivos: .toReactv()
• Sincronización entre observadores: .bindTo() en watchVar

📚 API interna

• .update(fn) — Actualización funcional
• .snapshot() — Clonación del estado actual
• .diff(next) — Comparación estructural en watchTree

🧩 Arquitectura

• Clase autoejecutable ReactiveObserver con las 4 utilidades encapsuladas
• Zero-dependencies, compatible con bundlers y tree-shaking
• Preparado para integración con plugin systems y trazabilidad cruzada

🧪 Ejemplos de uso por utilidad

🔹 watchVar() — Variable reactiva trazable

const count = ReactiveObserver.watchVar(0, (val, prev) => {
  console.log(`Contador: ${prev} → ${val}`);
});

count.set(5);
count.update(v => v + 1);
count.subscribe((val, prev) => console.log('Suscripción:', val));

🔹 watchObject() — Observación de propiedades planas

const user = ReactiveObserver.watchObject(
  { name: 'Arturo', age: 30 },
  {
    name: { trackHistory: true },
    age: {
      beforeChange: v => Math.floor(v),
      validate: v => typeof v === 'number'
    }
  }
);

user.set('name', 'Arturito');
user.update('age', a => a + 1.7); // Cambia a 31
console.log(user.getHistory('name')); // ['Arturo', 'Arturito']

🔹 watchDeep() — Observación de propiedades anidadas

const profile = ReactiveObserver.watchDeep(
  { user: { name: 'Arturo', age: 30 } },
  (val, prev, ctx) => console.log(`Cambio en ${ctx.path}: ${prev} → ${val}`),
  { trackHistory: true }
);

profile.set('user.name', 'Arturito');
profile.update('user.age', a => a + 1);
console.log(profile.getHistory('user.age')); // [30, 31]

🔹 watchTree() — Observación estructural con diffs

const tree = ReactiveObserver.watchTree(
  { user: { name: 'Arturo', age: 30 }, settings: { theme: 'dark' } },
  (val, prev, ctx) => console.log(`Cambio en ${ctx.path}: ${prev} → ${val}`),
  { trackHistory: true }
);

tree.set('settings.theme', 'light');

const changes = tree.diff({
  user: { name: 'Arturo', age: 32 },
  settings: { theme: 'light' }
});

console.table(changes);
/*
[
  { path: 'user.age', type: 'changed', from: 30, to: 32 }
]
*/

🚀 Instalación

npm install reactive-observer
# o simplemente copia la clase:
import { ReactiveObserver } from './ReactiveObserver.js';