v0.3.0 · MIT

Sincronizatuspestañas en tiempo real

Conecta el estado entre pestañas al instante. Sin servidor, sin WebSockets, sin configuración extra.

pnpm add tabus-js

925 B

Min + gzip

0

Dependencias

0

Servidores

app.mi-proyecto.dev
Tienda3
Checkout
Perfil

Carrito compartido

Zapatillas Tabus

Estado sincronizadoActivo
bus.emit('cart:add')
Pestaña B recibió el evento

Pestaña A → B

Evento en ~0ms

Míralo en vivo

shop.tabus.devPestaña A

Carrito compartido

Zapatillas Tabus

0
Estado sincronizadoActivo
Esperando eventos de la otra pestaña…
shop.tabus.devPestaña B

Carrito compartido

Zapatillas Tabus

0
Estado sincronizadoActivo
Esperando eventos de la otra pestaña…

Poco, pero lo justo

Sin runtime pesado ni conceptos nuevos. Una clase, dos métodos, y el navegador hace el resto.

01

BroadcastChannel nativo

Sincroniza el estado entre pestañas con la API nativa del navegador. Sin WebSockets, sin polling, sin servidor intermedio.

02

Fallback en memoria

¿Entorno sin BroadcastChannel? Cae a un bus en memoria automáticamente, misma API.

03

Eventos tipados

Define tu mapa de eventos con genéricos. emit y on con autocompletado y checks reales.

04

Throttle incluido

Limita eventos de alta frecuencia con una opción, ideal para scroll o resize compartidos.

05

Cero dependencias

Nada que auditar, nada que actualizar. No arrastra un árbol a tu bundle.

06

Diminuto

925 B min+gzip, CJS + ESM y tipos incluidos. Se instala y se olvida.

cart.ts
import { Tabus } from 'tabus-js'

type Events = {
  'cart:add': { id: string }
  'cart:reset': void
}

const bus = new Tabus<Events>('shop')

// escucha en las otras pestañas
bus.on('cart:add', ({ id }) => {
  addToCart(id)
})

// emite desde esta
bus.emit('cart:add', { id: 'sku_42' })

// la API completa

Esto es todo lo que escribes

Creas un canal tipado, escuchas en las demás pestañas, emites desde la tuya. No hay paso cuatro.

  • Creás el canal
  • Escuchás en las otras pestañas
  • Emitís desde la tuya

// funciona donde ya trabajas

Sin framework preferido

Es una clase de JS sobre una API estándar. Envuélvela en un hook, un composable, o úsala directamente.

useTabSync.ts
import { useEffect } from 'react'
import { Tabus } from 'tabus-js'

export const useTabSync = (onAdd: (id: string) => void) => {
  useEffect(() => {
    const bus = new Tabus<{ 'cart:add': { id: string } }>('shop')
    bus.on('cart:add', ({ id }) => onAdd(id))
    return () => bus.destroy()
  }, [])
}

Deja de pelear con localStorage.

Sincroniza tus pestañas en el tiempo que tardas en leer los docs.

~/mi-proyecto
$pnpm add tabus-js
Leer los docs