refactor: use event-target-bus/react

Author: SukkaW

packages/foxact/src/use-is-online/index.ts

@@ -1,24 +1,12 @@
 'use client';
 
 import { useSyncExternalStore } from 'react';
-import { createEventTargetBus } from 'event-target-bus';
-import type { EventTargetBus } from 'event-target-bus';
+import { createSyncExternalStoreSubscribe } from 'event-target-bus/react';
 
-let onlineBus: EventTargetBus<Window, 'online'> | null = null;
-let offlineBus: EventTargetBus<Window, 'offline'> | null = null;
-
-function subscribe(onStoreChange: () => void): () => void {
-  onlineBus ??= createEventTargetBus(window, 'online');
-  offlineBus ??= createEventTargetBus(window, 'offline');
-
-  const onlineUnsub = onlineBus.on(onStoreChange);
-  const offlineUnsub = offlineBus.on(onStoreChange);
-
-  return () => {
-    onlineUnsub();
-    offlineUnsub();
-  };
-}
+const subscribe = createSyncExternalStoreSubscribe(
+  () => window,
+  ['online', 'offline']
+);
 
 function getSnapshot() {
   if (typeof window === 'undefined') {

packages/foxact/src/use-media-query/index.ts

@@ -2,26 +2,14 @@
 'use client';
 
 import { noSSRError } from '../no-ssr';
-import { noop } from '../noop';
 
-import { useCallback, useSyncExternalStore } from 'react';
-import { createEventTargetBus } from 'event-target-bus';
-import type { EventTargetBus } from 'event-target-bus';
+import { useMemo, useSyncExternalStore } from 'react';
+import { createKeyedSyncExternalStoreSubscribe } from 'event-target-bus/react';
 
-const mediaQueryProxies = new Map<string, EventTargetBus<MediaQueryList, 'change'>>();
-
-function subscribeToMediaQuery(mq: string, callback: VoidFunction) {
-  /* istanbul ignore if -- SSR-only guard, unreachable when Happy DOM registers window globally in tests */
-  if (typeof window === 'undefined') return noop;
-
-  let bus = mediaQueryProxies.get(mq);
-  if (!bus) {
-    bus = createEventTargetBus(window.matchMedia(mq), 'change');
-    mediaQueryProxies.set(mq, bus);
-  }
-
-  return bus.on(callback);
-}
+const getMediaQuerySubscribe = createKeyedSyncExternalStoreSubscribe(
+  (mq: string) => window.matchMedia(mq),
+  'change'
+);
 
 function getServerSnapshotWithoutServerValue(): never {
   throw noSSRError('useMediaQuery cannot be used on the server without a serverValue');
@@ -30,9 +18,6 @@ function getServerSnapshotWithoutServerValue(): never {
 /** @see https://foxact.skk.moe/use-media-query */
 // eslint-disable-next-line sukka/bool-param-default -- serveValue is intentionally optional
 export function useMediaQuery(mq: string, serverValue?: boolean): boolean {
-  // subscribe once per hook per media query
-  const subscribe = useCallback((callback: VoidFunction) => subscribeToMediaQuery(mq, callback), [mq]);
-
   const getSnapshot = () => {
     /* istanbul ignore if -- SSR-only guard, unreachable when Happy DOM registers window globally in tests */
     if (typeof window === 'undefined') {
@@ -48,5 +33,8 @@ export function useMediaQuery(mq: string, serverValue?: boolean): boolean {
     ? getServerSnapshotWithoutServerValue
     : () => serverValue;
 
+  // ensure stableness per mq
+  const subscribe = useMemo(() => getMediaQuerySubscribe(mq), [mq]);
+
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); // Use useSyncExternalStore to manage the subscription and state
 }

packages/foxact/src/use-page-visibility/index.ts

@@ -1,20 +1,12 @@
 'use client';
 
 import { useSyncExternalStore } from 'react';
-import { createEventTargetBus } from 'event-target-bus';
-import type { EventTargetBus } from 'event-target-bus';
-import { noop } from '../noop';
+import { createSyncExternalStoreSubscribe } from 'event-target-bus/react';
 
-let visibilityChangeBus: EventTargetBus<Document, 'visibilitychange'> | null = null;
-
-const handlePageVisibilityChange: Parameters<typeof useSyncExternalStore>[0] = (onChange) => {
-  /* istanbul ignore if -- SSR-only guard, unreachable when Happy DOM registers window globally in tests */
-  if (typeof window === 'undefined') return noop;
-
-  visibilityChangeBus ??= createEventTargetBus(document, 'visibilitychange');
-
-  return visibilityChangeBus.on(onChange);
-};
+const subscribe = createSyncExternalStoreSubscribe(
+  () => document,
+  'visibilitychange'
+);
 
 const getSnapshot: Parameters<typeof useSyncExternalStore>[1] = () => {
   /* istanbul ignore if -- SSR-only guard, unreachable when Happy DOM registers document globally in tests */
@@ -28,7 +20,7 @@ const getSnapshot: Parameters<typeof useSyncExternalStore>[1] = () => {
 /** @see https://foxact.skk.moe/use-page-visibility */
 export function usePageVisibility() {
   return useSyncExternalStore(
-    handlePageVisibilityChange,
+    subscribe,
     getSnapshot,
     getSnapshot
   );

packages/foxact/src/use-readonly-search-params/index.ts

@@ -1,7 +1,5 @@
-import { createEventTargetBus } from 'event-target-bus';
-import type { EventTargetBus } from 'event-target-bus';
+import { createSyncExternalStoreSubscribe } from 'event-target-bus/react';
 import { noSSRError } from '../no-ssr';
-import { noop } from '../noop';
 import { useSyncExternalStore } from 'react';
 
 class ReadonlyURLSearchParamsError extends Error {
@@ -39,16 +37,7 @@ export class ReadonlyURLSearchParams extends URLSearchParams {
   }
 }
 
-let popStateBus: EventTargetBus<Window, 'popstate'> | null = null;
-
-function subscribe(onStoreChange: () => void) {
-  /* istanbul ignore if -- SSR-only guard, unreachable when Happy DOM registers window globally in tests */
-  if (typeof window === 'undefined') return noop;
-
-  popStateBus ??= createEventTargetBus(window, 'popstate');
-
-  return popStateBus.on(onStoreChange);
-}
+const subscribe = createSyncExternalStoreSubscribe(() => window, 'popstate');
 
 let lastSearch: string | null = null;
 let lastUrlSearchParams: ReadonlyURLSearchParams | null = null;

packages/foxact/src/use-url-hash-state/index.ts

@@ -1,28 +1,16 @@
 import 'client-only';
 
 import { useCallback, useMemo, useSyncExternalStore } from 'react';
-import { noop } from '../noop';
 import { noSSRError } from '../no-ssr';
 
 import { identity } from 'foxts/identity';
 import { isFunction } from 'foxts/is-function';
-import { createEventTargetBus } from 'event-target-bus';
-import type { EventTargetBus } from 'event-target-bus';
+import { createSyncExternalStoreSubscribe } from 'event-target-bus/react';
 
-let hashChangeEventBus: EventTargetBus<Window, 'hashchange'> | null = null;
+const subscribe = createSyncExternalStoreSubscribe(() => window, 'hashchange');
 
 type NotUndefined<T> = T extends undefined ? never : T;
 
-const subscribe: Parameters<typeof useSyncExternalStore>[0] = (onStoreChange) => {
-  if (typeof window === 'undefined') {
-    return noop;
-  }
-
-  hashChangeEventBus ??= createEventTargetBus(window, 'hashchange');
-
-  return hashChangeEventBus.on(onStoreChange);
-};
-
 export type Serializer<T> = (value: T) => string;
 export type Deserializer<T> = (value: string) => T;