npm package: @simon320/breakpoint-watcher
Description: Bus de eventos de breakpoints por viewport (phone/tablet/desktop).
Author: Simon Juarez
Latest version: 0.1.0

# 📦 @simon320/breakpoint-watcher

Librería ligera en TypeScript para detectar cambios de **breakpoints de viewport** y emitir **eventos globales** que pueden ser consumidos desde cualquier microfrontend o aplicación (Angular, React, vanilla JS, etc.).

Ideal para ecosistemas con **Single-spa + Microfrontends** o aplicaciones monolíticas que necesiten centralizar la lógica de breakpoints.

---

## Instalación

```bash
npm install @simon320/breakpoint-watcher
```

> También podés probarla en local con `npm pack` o `npm link`.

---

## Configuración básica

En tu **entrypoint** (ej: `main.ts` en Angular, o la shell de Single-spa):

```ts
import { init } from '@simon320/breakpoint-watcher';

init(); // inicializa el watcher con los breakpoints por defecto
```

---

## Breakpoints por defecto

- **phone**: `<= 374px`
- **tablet**: `375px – 1023px`
- **desktop**: `>= 1024px` (umbral de referencia 1439px)

Estos valores pueden sobreescribirse en `init()`.

---

## Eventos emitidos

Cada vez que cambia el breakpoint, la librería emite un `CustomEvent` en `window`:

```ts
window.addEventListener('viewport:breakpoint', (e: Event) => {
  const { prev, next, width, height } =
    (e as CustomEvent<{
      prev: string | null;
      next: string;
      width: number;
      height: number;
    }>).detail;

  console.log(`Cambio de ${prev} → ${next} (${width}x${height})`);
});
```

---

## API

### `init(options?: InitOptions): void`

Inicializa el watcher.  
**Opciones:**
- `breakpoints?: Partial<Breakpoints>` → sobreescribir valores.
- `throttleMs?: number` → intervalo mínimo entre eventos (default: `100`).
- `eventName?: string` → nombre del evento (default: `viewport:breakpoint`).

---

### `destroy(): void`

Detiene el watcher y limpia los listeners.

---

### `getCurrent(): BreakpointName`

Devuelve el breakpoint actual (`'phone' | 'tablet' | 'desktop'`).

---

### `getSize(): { width: number; height: number }`

Devuelve el tamaño actual del viewport.

---

## Ejemplo en Angular 20 (con Signals)

```ts
import { Injectable, signal } from '@angular/core';

type BP = 'phone' | 'tablet' | 'desktop';

@Injectable({ providedIn: 'root' })
export class BreakpointService {
  private _current = signal<BP>('desktop');
  current = this._current.asReadonly();

  constructor() {
    window.addEventListener('viewport:breakpoint', (e: Event) => {
      const { next } = (e as CustomEvent<{ next: BP }>).detail;
      this._current.set(next);
    });
  }
}
```

En el componente:

```ts
@Component({
  selector: 'app-header',
  template: `
    @if (bp() === 'phone') { <div>PHONE</div> }
    @else if (bp() === 'tablet') { <div>TABLET</div> }
    @else { <div>DESKTOP</div> }
  `
})
export class HeaderComponent {
  bp = inject(BreakpointService).current;
}
```

---

## Desarrollo local

Clonar y compilar:

```bash
git clone https://github.com/simon320/breakpoint-watcher
cd breakpoint-watcher
npm install
npm run build
```

Probar en otra app:

```bash
npm pack
cd ../mi-angular-app
npm install ../breakpoint-watcher/simon320-breakpoint-watcher-0.1.0.tgz
```

---

## Licencia

MIT © [Simon Juarez](https://github.com/simon320)