Sistema de estado reactivo construido con Proxy nativo de JavaScript. Sin frameworks, sin dependencias externas. Vanilla JS puro.

Este proyecto está hecho para reforzar el contenido del post: Patrones de Diseño en JavaScript — Parte de la Serie JavaScript de FemCoders Club.

reactive-store-js es una librería de gestión de estado que intercepta cada cambio mediante Proxy y notifica automáticamente a los suscriptores. La demo incluida es un dashboard de métricas de comunidad que demuestra la librería en acción.

Características:

• Suscripciones a claves concretas con notación de puntos ('user.profile.name')
• Suscripción wildcard ('*') para observar cualquier cambio
• Computed properties (valores derivados del estado)
• Historial de cambios con undo / redo (hasta 50 snapshots)
• Snapshots inmutables del estado
• DevTools integradas para debugging
• 23 tests con el módulo assert nativo de Node.js

reactive-store-js/
├── src/
│   └── store.js          # Librería — el Proxy, el Observer, la API pública
├── demo/
│   ├── index.html        # Dashboard de métricas de comunidad
│   ├── dashboard.js      # UI conectada al store
│   └── css/
│       └── dashboard.css
├── tests/
│   └── store.test.js     # 23 tests con assert nativo
├── examples/
│   └── ejemplo-basico.js # Uso en Node.js
├── assets/
│   └── img/              # Capturas de pantalla
├── index.html            # Redirección a /demo/ para GitHub Pages
├── .nojekyll             # Desactiva Jekyll en GitHub Pages
└── package.json

Tests:

npm test

Ejemplo en Node.js:

npm run example

Dashboard (requiere un servidor local):

npm run demo
# Abre http://localhost:3000/demo/

O con cualquier servidor estático apuntando a la raíz del proyecto.

// Crear un store
const store = createStore({ count: 0, user: { name: 'Ana' } });

// Leer y escribir estado
store.state.count = 5;
store.state.user.name = 'Lucía';

// Suscribirse a cambios
const unsubscribe = store.subscribe('user.name', (newVal, oldVal) => {
  console.log(`Cambio: ${oldVal} → ${newVal}`);
});

// Cancelar suscripción
unsubscribe();

// Computed property
const greeting = store.compute('greeting', (s) => `Hola, ${s.user.name}`);
console.log(greeting()); // "Hola, Lucía"

// Undo / Redo
store.undo();
store.redo();

// Snapshot inmutable
const snap = store.snapshot(); // copia profunda, no reactiva

// Reset al estado inicial
store.reset();

// DevTools
console.log(store.devtools());

1. Estado básico         4 tests
2. Suscripciones         7 tests
3. Computed properties   2 tests
4. Undo / Redo           5 tests
5. Snapshot y Reset      2 tests
6. DevTools              3 tests

Total: 23 passed · 0 failed

Proyecto de FemCoders Club · Serie JavaScript · Post 06