🧠 @stadojs/core

@stadojs/core es una librería minimalista, agnóstica a frameworks, para manejar estado global en aplicaciones modernas. Soporta sincronización entre pestañas (BroadcastChannel), persistencia (localStorage o sessionStorage), eventos locales (CustomEvent), y ahora también interceptores (middlewares) para monitorear cambios de estado.

🚀 Instalación

npm install @stadojs/core

🧰 API

defineGlobalStore<T>(name, initialState, options?): Store<T>

Crea un store global reactivo y configurable.

• name: string – Nombre único del store.
• initialState: T – Estado inicial.
• options: StoreOptions – Opciones de configuración.

interface StoreOptions {
  broadcast?: BroadcastStrategy;
  persist?: boolean;
  storageType?: StorageType;
}

useGlobalStore<T>(name: string): Store<T>

Obtiene una instancia del store registrado por nombre.

emitGlobalStoreEvent<T>(name, data, target?): void

Emite un evento manual de estado a otras pestañas o la pestaña actual.

useStoreMiddleware<T>(middleware: (payload: { name: string, state: T }) => void): void

Registra una función global que se ejecutará cada vez que el estado de cualquier store cambie.

📦 Enumeraciones

BroadcastStrategy

• None: No emite eventos.
• Local: Usa CustomEvent para listeners en la pestaña actual.
• CrossTab: Usa BroadcastChannel para comunicación entre pestañas.
• All: Ambos métodos.

StorageType

• Local: Almacena en localStorage.
• Session: Almacena en sessionStorage.

🧪 Ejemplos de uso

1. Crear un store global con persistencia y comunicación entre pestañas

defineGlobalStore('auth', { token: '', user: null }, {
  broadcast: BroadcastStrategy.CrossTab,
  persist: true,
  storageType: StorageType.Local,
});

2. Usar un store en un microfrontend

const authStore = useGlobalStore<{ token: string; user: any }>('auth');

authStore.on((state) => {
  console.log('Auth actualizado:', state);
});

authStore.set({ token: 'abc123' });

3. Escuchar eventos manuales (otra pestaña)

window.addEventListener('store:auth', (e) => {
  console.log('Evento local recibido:', e.detail);
});

4. Emitir eventos entre pestañas manualmente

emitGlobalStoreEvent('auth', { token: 'externo', user: null }, BroadcastStrategy.All);

5. Registrar un middleware global para auditar todos los stores

useStoreMiddleware(({ name, state }) => {
  console.log(`[AUDIT] Store "${name}" cambió a:`, state);
});

Esto es ideal para:

• Herramientas de monitoreo.
• Logs de auditoría.
• Debug en tiempo real.
• Consolas de administración.

🗃️ Persistencia

• Si persist está activado, el estado se guarda automáticamente en el tipo de almacenamiento elegido (localStorage o sessionStorage).
• Se restaura automáticamente al volver a cargar la página.

🧩 Ideal para...

• Microfrontends
• Aplicaciones que abren múltiples pestañas
• Sincronización de sesión
• Aplicaciones offline
• Herramientas administrativas

📜 Licencia

MIT