feat: allow to use signals to get breakpoints (#2)

Author: tutkli

libs/ngx-breakpoint-observer/src/index.ts

@@ -5,3 +5,4 @@
 export * from './lib/breakpoints';
 export * from './lib/observe-breakpoints';
 export * from './lib/observe-media-query';
+export * from './lib/types';

libs/ngx-breakpoint-observer/src/lib/observe-breakpoints.ts

@@ -1,7 +1,9 @@
 import { computed, type Signal } from '@angular/core';
 import { Breakpoints } from './breakpoints';
-import { increaseWithUnit } from './increase-with-unit';
+import { increaseWithUnit } from './utils/increase-with-unit';
 import { observeMediaQuery } from './observe-media-query';
+import { toValue } from './utils/to-value';
+import { MaybeSignalOrGetter } from './types';
 
 /**
  * Reactive viewport breakpoints
@@ -11,8 +13,8 @@ import { observeMediaQuery } from './observe-media-query';
 export function observeBreakpoints<K extends string>(
   breakpoints: Breakpoints<K>
 ) {
-  function getValue(k: K, delta?: number): string {
-    let v = breakpoints[k];
+  function getValue(k: MaybeSignalOrGetter<K>, delta?: number): string {
+    let v = breakpoints[toValue(k)];
 
     if (delta !== null && delta !== undefined) {
       v = increaseWithUnit(v, delta);
@@ -31,8 +33,8 @@ export function observeBreakpoints<K extends string>(
     return window.matchMedia(query).matches;
   }
 
-  const greaterOrEqual = (k: K): Signal<boolean> => {
-    return observeMediaQuery(`(min-width: ${getValue(k)})`);
+  const greaterOrEqual = (k: MaybeSignalOrGetter<K>): Signal<boolean> => {
+    return observeMediaQuery(() => `(min-width: ${getValue(k)})`);
   };
 
   const shortcutMethods = Object.keys(breakpoints).reduce((shortcuts, k) => {
@@ -45,34 +47,35 @@ export function observeBreakpoints<K extends string>(
   }, {} as Record<K, Signal<boolean>>);
 
   return Object.assign(shortcutMethods, {
-    greater(k: K) {
-      return observeMediaQuery(`(min-width: ${getValue(k, 0.1)})`);
+    greater(k: MaybeSignalOrGetter<K>) {
+      return observeMediaQuery(() => `(min-width: ${getValue(k, 0.1)})`);
     },
     greaterOrEqual,
-    smaller(k: K) {
-      return observeMediaQuery(`(max-width: ${getValue(k, -0.1)})`);
+    smaller(k: MaybeSignalOrGetter<K>) {
+      return observeMediaQuery(() => `(max-width: ${getValue(k, -0.1)})`);
     },
-    smallerOrEqual(k: K) {
-      return observeMediaQuery(`(max-width: ${getValue(k)})`);
+    smallerOrEqual(k: MaybeSignalOrGetter<K>) {
+      return observeMediaQuery(() => `(max-width: ${getValue(k)})`);
     },
-    between(a: K, b: K) {
+    between(a: MaybeSignalOrGetter<K>, b: MaybeSignalOrGetter<K>) {
       return observeMediaQuery(
-        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+        () =>
+          `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
       );
     },
-    isGreater(k: K) {
+    isGreater(k: MaybeSignalOrGetter<K>) {
       return match(`(min-width: ${getValue(k, 0.1)})`);
     },
-    isGreaterOrEqual(k: K) {
+    isGreaterOrEqual(k: MaybeSignalOrGetter<K>) {
       return match(`(min-width: ${getValue(k)})`);
     },
-    isSmaller(k: K) {
+    isSmaller(k: MaybeSignalOrGetter<K>) {
       return match(`(max-width: ${getValue(k, -0.1)})`);
     },
-    isSmallerOrEqual(k: K) {
+    isSmallerOrEqual(k: MaybeSignalOrGetter<K>) {
       return match(`(max-width: ${getValue(k)})`);
     },
-    isInBetween(a: K, b: K) {
+    isInBetween(a: MaybeSignalOrGetter<K>, b: MaybeSignalOrGetter<K>) {
       return match(
         `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
       );

libs/ngx-breakpoint-observer/src/lib/observe-media-query.ts

@@ -1,33 +1,46 @@
 import { effect, type Signal, signal, untracked } from '@angular/core';
+import { toValue } from './utils/to-value';
+import { MaybeSignalOrGetter } from './types';
 
 /**
  * Reactive Media Query.
  *
  * @param query
  */
-export function observeMediaQuery(query: string): Signal<boolean> {
+export function observeMediaQuery(
+  query: MaybeSignalOrGetter<string>
+): Signal<boolean> {
   const isSupported =
     window && 'matchMedia' in window && typeof window.matchMedia === 'function';
 
   let mediaQuery: MediaQueryList | undefined;
   const matches = signal(false);
 
+  const handler = (event: MediaQueryListEvent) => {
+    matches.set(event.matches);
+  };
+
   const cleanup = () => {
     if (!mediaQuery) return;
-    mediaQuery.removeEventListener('change', update);
+
+    if ('removeEventListener' in mediaQuery)
+      mediaQuery.removeEventListener('change', handler);
+    // @ts-expect-error deprecated API
+    else mediaQuery.removeListener(handler);
   };
 
-  const update = () => {
+  effect(onCleanup => {
     if (!isSupported) return;
-    mediaQuery = window.matchMedia(query);
-    untracked(() => matches.set(!!mediaQuery?.matches));
 
-    if (!mediaQuery) return;
-    mediaQuery.addEventListener('change', update);
-  };
+    mediaQuery = window.matchMedia(toValue(query));
+
+    if ('addEventListener' in mediaQuery)
+      mediaQuery.addEventListener('change', handler);
+    // @ts-expect-error deprecated API
+    else mediaQuery.addListener(handler);
+
+    untracked(() => matches.set(!!mediaQuery?.matches));
 
-  effect(onCleanup => {
-    update();
     onCleanup(cleanup);
   });
 

libs/ngx-breakpoint-observer/src/lib/types.ts

@@ -0,0 +1,3 @@
+import { Signal } from '@angular/core';
+
+export type MaybeSignalOrGetter<T> = T | Signal<T> | (() => T);

libs/ngx-breakpoint-observer/src/lib/increase-with-unit.ts renamed to libs/ngx-breakpoint-observer/src/lib/utils/increase-with-unit.ts

@@ -0,0 +1,9 @@
+import { Signal } from '@angular/core';
+import { MaybeSignalOrGetter } from '../types';
+
+/**
+ * Get the value of value/signal/getter.
+ */
+export function toValue<T>(r: MaybeSignalOrGetter<T>): T {
+  return typeof r === 'function' ? (r as any)() : r;
+}