preact-missing-hooks 3.0.0 → 4.0.0

package/src/useNetworkState.ts

@@ -1,122 +1,124 @@
-import { useEffect, useState } from 'preact/hooks';
-
-/** Network Information API (not in all browsers) */
-interface NetworkInformation extends EventTarget {
-  effectiveType?: string;
-  downlink?: number;
-  rtt?: number;
-  saveData?: boolean;
-  type?: string;
-}
-
-/** Effective connection type from Network Information API */
-export type EffectiveConnectionType = 'slow-2g' | '2g' | '3g' | '4g';
-
-/** Network connection type (e.g., wifi, cellular) */
-export type ConnectionType =
-  | 'bluetooth'
-  | 'cellular'
-  | 'ethernet'
-  | 'mixed'
-  | 'none'
-  | 'other'
-  | 'unknown'
-  | 'wifi';
-
-export interface NetworkState {
-  /** Whether the browser is online */
-  online: boolean;
-  /** Effective connection type (when supported) */
-  effectiveType?: EffectiveConnectionType;
-  /** Estimated downlink speed in Mbps (when supported) */
-  downlink?: number;
-  /** Estimated round-trip time in ms (when supported) */
-  rtt?: number;
-  /** Whether the user has requested reduced data usage (when supported) */
-  saveData?: boolean;
-  /** Connection type (when supported) */
-  connectionType?: ConnectionType;
-}
-
-function getNetworkState(): NetworkState {
-  if (typeof navigator === 'undefined') {
-    return { online: true };
-  }
-
-  const state: NetworkState = {
-    online: navigator.onLine,
-  };
-
-  const connection =
-    (navigator as Navigator & { connection?: NetworkInformation }).connection;
-
-  if (connection) {
-    if (connection.effectiveType !== undefined) {
-      state.effectiveType = connection.effectiveType as EffectiveConnectionType;
-    }
-    if (connection.downlink !== undefined) {
-      state.downlink = connection.downlink;
-    }
-    if (connection.rtt !== undefined) {
-      state.rtt = connection.rtt;
-    }
-    if (connection.saveData !== undefined) {
-      state.saveData = connection.saveData;
-    }
-    if (connection.type !== undefined) {
-      state.connectionType = connection.type as ConnectionType;
-    }
-  }
-
-  return state;
-}
-
-/**
- * A Preact hook that returns the current network state, including online/offline
- * status and (when supported) connection type, downlink, RTT, and save-data preference.
- * Updates reactively when the network state changes.
- *
- * @returns The current network state object
- *
- * @example
- * ```tsx
- * function NetworkStatus() {
- *   const { online, effectiveType, saveData } = useNetworkState();
- *   return (
- *     <div>
- *       Status: {online ? 'Online' : 'Offline'}
- *       {effectiveType && ` (${effectiveType})`}
- *       {saveData && ' - Reduced data mode'}
- *     </div>
-   * );
- * }
- * ```
- */
-export function useNetworkState(): NetworkState {
-  const [state, setState] = useState<NetworkState>(getNetworkState);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const updateState = () => setState(getNetworkState());
-
-    window.addEventListener('online', updateState);
-    window.addEventListener('offline', updateState);
-
-    const connection = (navigator as Navigator & { connection?: NetworkInformation })
-      .connection;
-    if (connection?.addEventListener) {
-      connection.addEventListener('change', updateState);
-    }
-
-    return () => {
-      window.removeEventListener('online', updateState);
-      window.removeEventListener('offline', updateState);
-      if (connection?.removeEventListener) {
-        connection.removeEventListener('change', updateState);
-      }
-    };
-  }, []);
-
-  return state;
-}
+import { useEffect, useState } from "preact/hooks";
+
+/** Network Information API (not in all browsers) */
+interface NetworkInformation extends EventTarget {
+  effectiveType?: string;
+  downlink?: number;
+  rtt?: number;
+  saveData?: boolean;
+  type?: string;
+}
+
+/** Effective connection type from Network Information API */
+export type EffectiveConnectionType = "slow-2g" | "2g" | "3g" | "4g";
+
+/** Network connection type (e.g., wifi, cellular) */
+export type ConnectionType =
+  | "bluetooth"
+  | "cellular"
+  | "ethernet"
+  | "mixed"
+  | "none"
+  | "other"
+  | "unknown"
+  | "wifi";
+
+export interface NetworkState {
+  /** Whether the browser is online */
+  online: boolean;
+  /** Effective connection type (when supported) */
+  effectiveType?: EffectiveConnectionType;
+  /** Estimated downlink speed in Mbps (when supported) */
+  downlink?: number;
+  /** Estimated round-trip time in ms (when supported) */
+  rtt?: number;
+  /** Whether the user has requested reduced data usage (when supported) */
+  saveData?: boolean;
+  /** Connection type (when supported) */
+  connectionType?: ConnectionType;
+}
+
+function getNetworkState(): NetworkState {
+  if (typeof navigator === "undefined") {
+    return { online: true };
+  }
+
+  const state: NetworkState = {
+    online: navigator.onLine,
+  };
+
+  const connection = (
+    navigator as Navigator & { connection?: NetworkInformation }
+  ).connection;
+
+  if (connection) {
+    if (connection.effectiveType !== undefined) {
+      state.effectiveType = connection.effectiveType as EffectiveConnectionType;
+    }
+    if (connection.downlink !== undefined) {
+      state.downlink = connection.downlink;
+    }
+    if (connection.rtt !== undefined) {
+      state.rtt = connection.rtt;
+    }
+    if (connection.saveData !== undefined) {
+      state.saveData = connection.saveData;
+    }
+    if (connection.type !== undefined) {
+      state.connectionType = connection.type as ConnectionType;
+    }
+  }
+
+  return state;
+}
+
+/**
+ * A Preact hook that returns the current network state, including online/offline
+ * status and (when supported) connection type, downlink, RTT, and save-data preference.
+ * Updates reactively when the network state changes.
+ *
+ * @returns The current network state object
+ *
+ * @example
+ * ```tsx
+ * function NetworkStatus() {
+ *   const { online, effectiveType, saveData } = useNetworkState();
+ *   return (
+ *     <div>
+ *       Status: {online ? 'Online' : 'Offline'}
+ *       {effectiveType && ` (${effectiveType})`}
+ *       {saveData && ' - Reduced data mode'}
+ *     </div>
+ * );
+ * }
+ * ```
+ */
+export function useNetworkState(): NetworkState {
+  const [state, setState] = useState<NetworkState>(getNetworkState);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const updateState = () => setState(getNetworkState());
+
+    window.addEventListener("online", updateState);
+    window.addEventListener("offline", updateState);
+
+    const connection = (
+      navigator as Navigator & { connection?: NetworkInformation }
+    ).connection;
+    if (connection?.addEventListener) {
+      connection.addEventListener("change", updateState);
+    }
+
+    return () => {
+      window.removeEventListener("online", updateState);
+      window.removeEventListener("offline", updateState);
+      if (connection?.removeEventListener) {
+        connection.removeEventListener("change", updateState);
+      }
+    };
+  }, []);
+
+  return state;
+}

package/src/usePreferredTheme.ts

@@ -1,68 +1,68 @@
-import { useEffect, useState } from 'preact/hooks';
-
-export type PreferredTheme = 'light' | 'dark' | 'no-preference';
-
-/**
- * A Preact hook that returns the user's preferred color scheme based on the
- * `prefers-color-scheme` media query. Updates reactively when the user changes
- * their system or browser theme preference.
- *
- * @returns The preferred theme: 'light', 'dark', or 'no-preference'
- *
- * @example
- * ```tsx
- * function ThemeAwareComponent() {
- *   const theme = usePreferredTheme();
- *   return (
- *     <div data-theme={theme}>
- *       Current preference: {theme}
- *     </div>
- *   );
- * }
- * ```
- */
-export function usePreferredTheme(): PreferredTheme {
-  const [theme, setTheme] = useState<PreferredTheme>(() => {
-    if (typeof window === 'undefined') return 'no-preference';
-
-    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const lightQuery = window.matchMedia('(prefers-color-scheme: light)');
-
-    if (darkQuery.matches) return 'dark';
-    if (lightQuery.matches) return 'light';
-    return 'no-preference';
-  });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setTheme(e.matches ? 'dark' : 'light');
-    };
-
-    // Re-check in case of no-preference (some browsers don't support light query)
-    const updateTheme = () => {
-      const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      const lightQuery = window.matchMedia('(prefers-color-scheme: light)');
-
-      if (darkQuery.matches) setTheme('dark');
-      else if (lightQuery.matches) setTheme('light');
-      else setTheme('no-preference');
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-
-    // Fallback: some environments may not fire change, so we also listen for light
-    const lightQuery = window.matchMedia('(prefers-color-scheme: light)');
-    lightQuery.addEventListener('change', updateTheme);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-      lightQuery.removeEventListener('change', updateTheme);
-    };
-  }, []);
-
-  return theme;
-}
+import { useEffect, useState } from "preact/hooks";
+
+export type PreferredTheme = "light" | "dark" | "no-preference";
+
+/**
+ * A Preact hook that returns the user's preferred color scheme based on the
+ * `prefers-color-scheme` media query. Updates reactively when the user changes
+ * their system or browser theme preference.
+ *
+ * @returns The preferred theme: 'light', 'dark', or 'no-preference'
+ *
+ * @example
+ * ```tsx
+ * function ThemeAwareComponent() {
+ *   const theme = usePreferredTheme();
+ *   return (
+ *     <div data-theme={theme}>
+ *       Current preference: {theme}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function usePreferredTheme(): PreferredTheme {
+  const [theme, setTheme] = useState<PreferredTheme>(() => {
+    if (typeof window === "undefined") return "no-preference";
+
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+
+    if (darkQuery.matches) return "dark";
+    if (lightQuery.matches) return "light";
+    return "no-preference";
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? "dark" : "light");
+    };
+
+    // Re-check in case of no-preference (some browsers don't support light query)
+    const updateTheme = () => {
+      const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+
+      if (darkQuery.matches) setTheme("dark");
+      else if (lightQuery.matches) setTheme("light");
+      else setTheme("no-preference");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    // Fallback: some environments may not fire change, so we also listen for light
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    lightQuery.addEventListener("change", updateTheme);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+      lightQuery.removeEventListener("change", updateTheme);
+    };
+  }, []);
+
+  return theme;
+}

package/src/useRageClick.ts

@@ -1,103 +1,103 @@
-import type { RefObject } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
-
-export interface RageClickPayload {
-  /** Number of clicks that triggered the rage click */
-  count: number
-  /** Last click event (e.g. for Sentry context) */
-  event: MouseEvent
-}
-
-export interface UseRageClickOptions {
-  /** Called when a rage click is detected. Use this to report to Sentry or your error tracker. */
-  onRageClick: (payload: RageClickPayload) => void
-  /** Minimum number of clicks in the time window to count as rage click. Default: 5 (Sentry-style). */
-  threshold?: number
-  /** Time window in ms. Default: 1000. */
-  timeWindow?: number
-  /** Max distance in px between clicks to count as same spot. Default: 30. Set to Infinity to ignore distance. */
-  distanceThreshold?: number
-}
-
-interface ClickRecord {
-  time: number
-  x: number
-  y: number
-}
-
-function distance(a: ClickRecord, b: ClickRecord): number {
-  return Math.hypot(b.x - a.x, b.y - a.y)
-}
-
-/**
- * Detects "rage clicks" (repeated rapid clicks in the same area), e.g. when the UI
- * is unresponsive. Use the callback to report to Sentry or similar tools to surface
- * rage click issues and lower rage-click-related support.
- *
- * @param targetRef - Ref of the element to monitor (e.g. a button or card).
- * @param options - onRageClick callback and optional threshold, timeWindow, distanceThreshold.
- *
- * @example
- * ```tsx
- * const ref = useRef<HTMLButtonElement>(null)
- * useRageClick(ref, {
- *   onRageClick: ({ count, event }) => {
- *     Sentry.captureMessage('Rage click detected', { extra: { count, target: event.target } })
- *   },
- * })
- * return <button ref={ref}>Submit</button>
- * ```
- */
-export function useRageClick(
-  targetRef: RefObject<HTMLElement | null>,
-  options: UseRageClickOptions
-) {
-  const {
-    onRageClick,
-    threshold = 5,
-    timeWindow = 1000,
-    distanceThreshold = 30,
-  } = options
-
-  const onRageClickRef = useRef(onRageClick)
-  onRageClickRef.current = onRageClick
-
-  const clicksRef = useRef<ClickRecord[]>([])
-
-  useEffect(() => {
-    const node = targetRef.current
-    if (!node) return
-
-    const handleClick = (e: MouseEvent) => {
-      const now = Date.now()
-      const record: ClickRecord = { time: now, x: e.clientX, y: e.clientY }
-
-      const clicks = clicksRef.current
-      const cutoff = now - timeWindow
-      const recent = clicks.filter((c) => c.time >= cutoff)
-      recent.push(record)
-
-      if (distanceThreshold !== Infinity) {
-        const inRange = recent.filter(
-          (c) => distance(c, record) <= distanceThreshold
-        )
-        if (inRange.length >= threshold) {
-          onRageClickRef.current({ count: inRange.length, event: e })
-          clicksRef.current = []
-          return
-        }
-      } else {
-        if (recent.length >= threshold) {
-          onRageClickRef.current({ count: recent.length, event: e })
-          clicksRef.current = []
-          return
-        }
-      }
-
-      clicksRef.current = recent
-    }
-
-    node.addEventListener('click', handleClick)
-    return () => node.removeEventListener('click', handleClick)
-  }, [targetRef, threshold, timeWindow, distanceThreshold])
-}
+import type { RefObject } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+
+export interface RageClickPayload {
+  /** Number of clicks that triggered the rage click */
+  count: number;
+  /** Last click event (e.g. for Sentry context) */
+  event: MouseEvent;
+}
+
+export interface UseRageClickOptions {
+  /** Called when a rage click is detected. Use this to report to Sentry or your error tracker. */
+  onRageClick: (payload: RageClickPayload) => void;
+  /** Minimum number of clicks in the time window to count as rage click. Default: 5 (Sentry-style). */
+  threshold?: number;
+  /** Time window in ms. Default: 1000. */
+  timeWindow?: number;
+  /** Max distance in px between clicks to count as same spot. Default: 30. Set to Infinity to ignore distance. */
+  distanceThreshold?: number;
+}
+
+interface ClickRecord {
+  time: number;
+  x: number;
+  y: number;
+}
+
+function distance(a: ClickRecord, b: ClickRecord): number {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+
+/**
+ * Detects "rage clicks" (repeated rapid clicks in the same area), e.g. when the UI
+ * is unresponsive. Use the callback to report to Sentry or similar tools to surface
+ * rage click issues and lower rage-click-related support.
+ *
+ * @param targetRef - Ref of the element to monitor (e.g. a button or card).
+ * @param options - onRageClick callback and optional threshold, timeWindow, distanceThreshold.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLButtonElement>(null)
+ * useRageClick(ref, {
+ *   onRageClick: ({ count, event }) => {
+ *     Sentry.captureMessage('Rage click detected', { extra: { count, target: event.target } })
+ *   },
+ * })
+ * return <button ref={ref}>Submit</button>
+ * ```
+ */
+export function useRageClick(
+  targetRef: RefObject<HTMLElement | null>,
+  options: UseRageClickOptions
+) {
+  const {
+    onRageClick,
+    threshold = 5,
+    timeWindow = 1000,
+    distanceThreshold = 30,
+  } = options;
+
+  const onRageClickRef = useRef(onRageClick);
+  onRageClickRef.current = onRageClick;
+
+  const clicksRef = useRef<ClickRecord[]>([]);
+
+  useEffect(() => {
+    const node = targetRef.current;
+    if (!node) return;
+
+    const handleClick = (e: MouseEvent) => {
+      const now = Date.now();
+      const record: ClickRecord = { time: now, x: e.clientX, y: e.clientY };
+
+      const clicks = clicksRef.current;
+      const cutoff = now - timeWindow;
+      const recent = clicks.filter((c) => c.time >= cutoff);
+      recent.push(record);
+
+      if (distanceThreshold !== Infinity) {
+        const inRange = recent.filter(
+          (c) => distance(c, record) <= distanceThreshold
+        );
+        if (inRange.length >= threshold) {
+          onRageClickRef.current({ count: inRange.length, event: e });
+          clicksRef.current = [];
+          return;
+        }
+      } else {
+        if (recent.length >= threshold) {
+          onRageClickRef.current({ count: recent.length, event: e });
+          clicksRef.current = [];
+          return;
+        }
+      }
+
+      clicksRef.current = recent;
+    };
+
+    node.addEventListener("click", handleClick);
+    return () => node.removeEventListener("click", handleClick);
+  }, [targetRef, threshold, timeWindow, distanceThreshold]);
+}