@furystack/shades 14.0.0 → 15.0.1

package/src/services/screen-service.ts

@@ -1,4 +1,5 @@
-import { Injectable } from '@furystack/inject'
+import type { Token } from '@furystack/inject'
+import { defineService } from '@furystack/inject'
 import { ObservableValue } from '@furystack/utils'
 
 /**
@@ -19,134 +20,88 @@ export type Breakpoint = { name: ScreenSize; minSize: number; maxSize?: number }
 /**
  * Service for detecting and subscribing to screen size and orientation changes.
  *
- * This service provides reactive observables for responsive design decisions.
  * Use `screenSize.atLeast[size]` to check if the viewport is at least a certain size.
  *
  * **Breakpoint Thresholds:**
- * - `xs`: 0px+ (all sizes)
- * - `sm`: 600px+ (small tablets and up)
- * - `md`: 960px+ (tablets and up)
- * - `lg`: 1280px+ (desktops and up)
- * - `xl`: 1920px+ (large desktops)
+ * - `xs`: 0px+
+ * - `sm`: 600px+
+ * - `md`: 960px+
+ * - `lg`: 1280px+
+ * - `xl`: 1920px+
  *
  * @example
  * ```typescript
- * const screenService = injector.getInstance(ScreenService);
+ * const screenService = injector.get(ScreenService)
  *
- * // Check if screen is at least medium size
  * if (screenService.screenSize.atLeast.md.getValue()) {
- *   // Show desktop layout
+ *   // Desktop layout
  * }
  *
- * // Subscribe to size changes for responsive behavior
  * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
- *   if (isAtLeastMd) {
- *     console.log('Desktop or tablet view');
- *   } else {
- *     console.log('Mobile view');
- *   }
- * });
- *
- * // Get current breakpoint by checking from largest to smallest
- * const getCurrentBreakpoint = (): ScreenSize => {
- *   if (screenService.screenSize.atLeast.xl.getValue()) return 'xl';
- *   if (screenService.screenSize.atLeast.lg.getValue()) return 'lg';
- *   if (screenService.screenSize.atLeast.md.getValue()) return 'md';
- *   if (screenService.screenSize.atLeast.sm.getValue()) return 'sm';
- *   return 'xs';
- * };
- *
- * // Subscribe to orientation changes
- * screenService.orientation.subscribe((orientation) => {
- *   console.log(`Screen is now in ${orientation} mode`);
- * });
+ *   // react to breakpoint changes
+ * })
  * ```
  */
-@Injectable({ lifetime: 'singleton' })
-export class ScreenService implements Disposable {
-  private getOrientation = () => (window.matchMedia?.('(orientation:landscape').matches ? 'landscape' : 'portrait')
-
-  /**
-   * The definitions of the breakpoint thresholds in pixels.
-   * Each breakpoint represents the minimum width for that size category.
-   */
-  public readonly breakpoints: { [K in ScreenSize]: { minSize: number } } = {
-    xl: { minSize: 1920 },
-    lg: { minSize: 1280 },
-    md: { minSize: 960 },
-    sm: { minSize: 600 },
-    xs: { minSize: 0 },
+export interface ScreenService {
+  readonly breakpoints: { [K in ScreenSize]: { minSize: number } }
+  readonly screenSize: {
+    atLeast: { [K in ScreenSize]: ObservableValue<boolean> }
   }
+  readonly orientation: ObservableValue<'landscape' | 'portrait'>
+}
 
-  /**
-   * Cleans up event listeners when the service is disposed.
-   */
-  public [Symbol.dispose]() {
-    window.removeEventListener('resize', this.onResizeListener)
-    this.orientation[Symbol.dispose]()
-    Object.values(this.screenSize.atLeast).forEach((observable) => {
-      observable[Symbol.dispose]()
-    })
-  }
+export const ScreenService: Token<ScreenService, 'singleton'> = defineService({
+  name: '@furystack/shades/ScreenService',
+  lifetime: 'singleton',
+  factory: ({ onDispose }) => {
+    const getOrientation = (): 'landscape' | 'portrait' =>
+      window.matchMedia?.('(orientation:landscape').matches ? 'landscape' : 'portrait'
 
-  /**
-   * Observable values for checking if the screen is at least a certain size.
-   *
-   * Each observable emits `true` when the viewport width is >= the breakpoint threshold,
-   * and `false` otherwise. Values update automatically on window resize.
-   *
-   * @example
-   * ```typescript
-   * // Hide sidebar on small screens
-   * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
-   *   sidebarVisible.setValue(isAtLeastMd);
-   * });
-   * ```
-   */
-  public readonly screenSize: {
-    atLeast: { [K in ScreenSize]: ObservableValue<boolean> }
-  } = {
-    atLeast: {
-      xs: new ObservableValue<boolean>(this.screenSizeAtLeast('xs')),
-      sm: new ObservableValue<boolean>(this.screenSizeAtLeast('sm')),
-      md: new ObservableValue<boolean>(this.screenSizeAtLeast('md')),
-      lg: new ObservableValue<boolean>(this.screenSizeAtLeast('lg')),
-      xl: new ObservableValue<boolean>(this.screenSizeAtLeast('xl')),
-    },
-  }
+    const breakpoints: { [K in ScreenSize]: { minSize: number } } = {
+      xl: { minSize: 1920 },
+      lg: { minSize: 1280 },
+      md: { minSize: 960 },
+      sm: { minSize: 600 },
+      xs: { minSize: 0 },
+    }
 
-  private screenSizeAtLeast(size: ScreenSize) {
-    return window.innerWidth >= this.breakpoints[size].minSize
-  }
+    const screenSizeAtLeast = (size: ScreenSize): boolean => window.innerWidth >= breakpoints[size].minSize
 
-  /**
-   * Observable value for tracking the screen orientation.
-   * Emits 'landscape' or 'portrait' based on the current viewport dimensions.
-   *
-   * @example
-   * ```typescript
-   * screenService.orientation.subscribe((orientation) => {
-   *   if (orientation === 'landscape') {
-   *     // Adjust layout for landscape mode
-   *   }
-   * });
-   * ```
-   */
-  public orientation = new ObservableValue<'landscape' | 'portrait'>(this.getOrientation())
+    const atLeast: { [K in ScreenSize]: ObservableValue<boolean> } = {
+      xs: new ObservableValue<boolean>(screenSizeAtLeast('xs')),
+      sm: new ObservableValue<boolean>(screenSizeAtLeast('sm')),
+      md: new ObservableValue<boolean>(screenSizeAtLeast('md')),
+      lg: new ObservableValue<boolean>(screenSizeAtLeast('lg')),
+      xl: new ObservableValue<boolean>(screenSizeAtLeast('xl')),
+    }
 
-  private onResizeListener = () => {
-    this.refreshValues()
-  }
+    const orientation = new ObservableValue<'landscape' | 'portrait'>(getOrientation())
+
+    const refreshValues = (): void => {
+      orientation.setValue(getOrientation())
+      for (const size of ScreenSizes) {
+        atLeast[size].setValue(screenSizeAtLeast(size))
+      }
+    }
+
+    const onResizeListener = (): void => {
+      refreshValues()
+    }
 
-  private refreshValues() {
-    this.orientation.setValue(this.getOrientation())
-    ScreenSizes.forEach((size) => {
-      this.screenSize.atLeast[size].setValue(this.screenSizeAtLeast(size))
+    window.addEventListener('resize', onResizeListener)
+    refreshValues()
+
+    onDispose(() => {
+      window.removeEventListener('resize', onResizeListener)
+      // eslint-disable-next-line furystack/prefer-using-wrapper -- Disposal is deferred to the injector's onDispose hook.
+      orientation[Symbol.dispose]()
+      Object.values(atLeast).forEach((observable) => observable[Symbol.dispose]())
     })
-  }
 
-  constructor() {
-    window.addEventListener('resize', this.onResizeListener)
-    this.refreshValues()
-  }
-}
+    return {
+      breakpoints,
+      screenSize: { atLeast },
+      orientation,
+    }
+  },
+})