refactor(web): remove rxjs in favor of existing tools

rxjs was used in packages/web for only three small, self-contained jobs,
but pulled in a full reactive-streams framework (BehaviorSubject, pipe,
switchMap/iif/distinctUntilChanged/share, ...) that made these one-off
use cases harder to read for contributors who never otherwise touch rxjs.

Replace each usage with the most appropriate tool already in the codebase:

- Module state observed by React -> a tiny createExternalStore helper read
  via React's built-in useSyncExternalStore. distinctUntilChanged (Object.is
  guard), skip(1) (no replay on subscribe), and share (snapshot-based
  re-render) all fall out of the store contract for free.
- Fire-and-forget event buses (domMovement, Session events) -> eventemitter2,
  already used elsewhere via @compass/core.
- Internal, non-React state (pointerdown/selectionStart, gridOrganization) ->
  plain module state with accessors.
- useMovementEvent's pause pipeline (switchMap/iif/NEVER) -> window listeners
  plus a useRef gate; pausing only ever needed to gate the live listener.
- lastValueFrom(timer(10)) -> a setTimeout promise.

Removes the rxjs dependency from packages/web/package.json. Behavior is
unchanged; all 1051 web tests, type-check, and lint pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: tyler-dane

bun.lock

@@ -33,7 +33,6 @@
     "react-toastify": "^9.1.3",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
-    "rxjs": "^7.8.0",
     "supertokens-web-js": "^0.16.0"
   },
   "devDependencies": {

packages/web/package.json

@@ -1,6 +1,5 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { useContext } from "react";
-import { Subject } from "rxjs";
 import { authSlice } from "@web/ducks/auth/slices/auth.slice";
 import { userMetadataSlice } from "@web/ducks/auth/slices/user-metadata.slice";
 import { beforeEach, describe, expect, it, mock } from "bun:test";
@@ -22,7 +21,7 @@ const shouldShowAnonymousCalendarChangeSignUpPrompt = mock(() => false);
 const subscribeToAuthState = mock();
 const updateAuthState = mock();
 const doesSessionExist = mock();
-const events$ = new Subject<{ action: string }>();
+const eventListeners = new Set<(event: { action: string }) => void>();
 const mockRecipeInit = mock(() => ({}));
 const mockSuperTokensInit = mock(() => ({}));
 
@@ -83,9 +82,15 @@ mock.module("@web/auth/compass/state/auth.state.util", () => ({
 mock.module("@web/common/classes/Session", () => ({
   session: {
     doesSessionExist,
-    events: events$,
+    onAnyEvent: (listener: (event: { action: string }) => void) => {
+      eventListeners.add(listener);
+
+      return () => eventListeners.delete(listener);
+    },
     emit: (_action: string, payload: unknown) =>
-      events$.next(payload as { action: string }),
+      eventListeners.forEach((listener) =>
+        listener(payload as { action: string }),
+      ),
     on: mock(),
     off: mock(),
     signOut: mock().mockResolvedValue(undefined),
@@ -96,7 +101,7 @@ mock.module("@web/common/classes/Session", () => ({
 const { session } = require("@web/common/classes/Session") as {
   session: {
     doesSessionExist: ReturnType<typeof mock>;
-    events: Subject<{ action: string }>;
+    onAnyEvent: (listener: (event: { action: string }) => void) => () => void;
     emit: (action: string, payload: unknown) => void;
     on: ReturnType<typeof mock>;
     off: ReturnType<typeof mock>;

packages/web/src/auth/compass/session/SessionProvider.test.tsx

@@ -1,10 +1,4 @@
-import { type PropsWithChildren, useEffect, useState } from "react";
-import { BehaviorSubject } from "rxjs";
-import {
-  distinctUntilChanged,
-  distinctUntilKeyChanged,
-  skip,
-} from "rxjs/operators";
+import { type PropsWithChildren, useEffect, useSyncExternalStore } from "react";
 import SuperTokens from "supertokens-web-js";
 import EmailPassword from "supertokens-web-js/recipe/emailpassword";
 import EmailVerification from "supertokens-web-js/recipe/emailverification";
@@ -18,6 +12,7 @@ import {
 import { session } from "@web/common/classes/Session";
 import { ENV_WEB } from "@web/common/constants/env.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
+import { createExternalStore } from "@web/common/utils/external-store.util";
 import { authSlice } from "@web/ducks/auth/slices/auth.slice";
 import { userMetadataSlice } from "@web/ducks/auth/slices/user-metadata.slice";
 import * as sse from "@web/sse/provider/SSEProvider";
@@ -47,15 +42,13 @@ SuperTokens.init({
   ],
 });
 
-const authenticated$ = new BehaviorSubject(false);
+const authStore = createExternalStore(false);
 let isCheckingSession = false;
 let isSessionInitialized = false;
 let sessionEventVersion = 0;
 
-const $authenticated = authenticated$.pipe(skip(1), distinctUntilChanged());
-
 const handleAuthenticatedSession = () => {
-  authenticated$.next(true);
+  authStore.set(true);
   markUserAsAuthenticated(getLastKnownEmail());
   void refreshUserMetadata();
 };
@@ -68,7 +61,7 @@ const handleSessionExists = () => {
 };
 
 const handleSessionMissing = () => {
-  authenticated$.next(false);
+  authStore.set(false);
   store.dispatch(authSlice.actions.resetAuth());
   store.dispatch(userMetadataSlice.actions.clear(undefined));
   clearGoogleSyncIndicatorOverride();
@@ -81,7 +74,7 @@ async function checkIfSessionExists(): Promise<boolean> {
     return false;
   }
 
-  if (isCheckingSession) return authenticated$.value;
+  if (isCheckingSession) return authStore.get();
 
   isCheckingSession = true;
   const eventVersionAtCheckStart = sessionEventVersion;
@@ -90,7 +83,7 @@ async function checkIfSessionExists(): Promise<boolean> {
     const exists = await session.doesSessionExist();
 
     if (sessionEventVersion !== eventVersionAtCheckStart) {
-      return authenticated$.value;
+      return authStore.get();
     }
 
     if (exists) {
@@ -102,7 +95,7 @@ async function checkIfSessionExists(): Promise<boolean> {
     return exists;
   } catch (error) {
     console.error("Error checking auth status:", error);
-    authenticated$.next(false);
+    authStore.set(false);
     return false;
   } finally {
     isCheckingSession = false;
@@ -117,8 +110,15 @@ export function sessionInit() {
   isSessionInitialized = true;
   void checkIfSessionExists();
 
+  // Dedupe consecutive events that share the same action (was
+  // `distinctUntilKeyChanged("action")`).
+  let lastAction: string | undefined;
+
   // No need to unsubscribe as this runs for the lifetime of the app
-  session.events.pipe(distinctUntilKeyChanged("action")).subscribe((e) => {
+  session.onAnyEvent((e) => {
+    if (e.action === lastAction) return;
+    lastAction = e.action;
+
     switch (e.action) {
       case "REFRESH_SESSION":
       case "SESSION_CREATED":
@@ -141,21 +141,16 @@ export function sessionInit() {
 }
 
 export function SessionProvider({ children }: PropsWithChildren<object>) {
-  const [authenticated, setAuthenticated] = useState(authenticated$.value);
-
-  useEffect(() => {
-    const authSub = $authenticated.subscribe(setAuthenticated);
-
-    return () => {
-      authSub.unsubscribe();
-    };
-  }, []);
+  const authenticated = useSyncExternalStore(
+    authStore.subscribe,
+    authStore.get,
+  );
 
   // Expose test hooks for e2e testing
   useEffect(() => {
     if (typeof window !== "undefined" && window.__COMPASS_E2E_TEST__) {
       window.__COMPASS_E2E_HOOKS__ = {
-        setAuthenticated: (value: boolean) => authenticated$.next(value),
+        setAuthenticated: (value: boolean) => authStore.set(value),
       };
     }
   }, []);
@@ -164,7 +159,7 @@ export function SessionProvider({ children }: PropsWithChildren<object>) {
     <SessionContext.Provider
       value={{
         authenticated,
-        setAuthenticated: (value: boolean) => authenticated$.next(value),
+        setAuthenticated: (value: boolean) => authStore.set(value),
       }}
     >
       {children}

packages/web/src/auth/compass/session/SessionProvider.tsx

@@ -1,5 +1,4 @@
 import { EventEmitter2, type ListenerFn } from "eventemitter2";
-import { fromEventPattern } from "rxjs";
 import SuperTokensSession from "supertokens-web-js/recipe/session";
 import { type Event } from "supertokens-website/lib/build/types";
 
@@ -29,19 +28,16 @@ class Session {
   getAccessTokenPayloadSecurely =
     SuperTokensSession.getAccessTokenPayloadSecurely;
 
-  #handleAllEvents(handler: ListenerFn) {
-    this.#emitter.addListener("*", handler);
-  }
+  /**
+   * Subscribe to every emitted session event (wildcard listener).
+   * Returns an unsubscribe function.
+   */
+  onAnyEvent(listener: (event: Event) => void): () => void {
+    this.#emitter.addListener("*", listener as ListenerFn);
 
-  #removeAllEventsHandler(handler: ListenerFn) {
-    this.#emitter.removeListener("*", handler);
+    return () => this.#emitter.removeListener("*", listener as ListenerFn);
   }
 
-  events = fromEventPattern<Event>(
-    this.#handleAllEvents.bind(this),
-    this.#removeAllEventsHandler.bind(this),
-  );
-
   emit(event: Event["action"], payload: Event) {
     this.#emitter.emit(event, payload);
   }

packages/web/src/common/classes/Session.ts

@@ -2,14 +2,14 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { type ReactNode } from "react";
 import { ID_GRID_MAIN, ID_ROOT } from "@web/common/constants/web.constants";
 import {
-  cursor$,
+  cursorStore,
   PointerPositionProvider,
-  pointerState$,
+  pointerStateStore,
 } from "@web/common/context/pointer-position";
 import { useSetupMovementEvents } from "@web/common/hooks/useMovementEvent";
 import {
-  pointerdown$,
-  selectionStart$,
+  setPointerDown,
+  setSelectionStart,
 } from "@web/common/utils/dom/event-emitter.util";
 import { beforeEach, describe, expect, it, mock } from "bun:test";
 
@@ -25,10 +25,10 @@ function renderWithPointerProvider(children: ReactNode) {
 
 describe("PointerPositionProvider", () => {
   beforeEach(() => {
-    pointerdown$.next(false);
-    selectionStart$.next(null);
-    cursor$.next({ x: 0, y: 0 });
-    pointerState$.next({
+    setPointerDown(false);
+    setSelectionStart(null);
+    cursorStore.set({ x: 0, y: 0 });
+    pointerStateStore.set({
       event: new PointerEvent("none", { button: 1 }) as never,
       pointerdown: false,
       selectionStart: null,
@@ -65,8 +65,8 @@ describe("PointerPositionProvider", () => {
     });
 
     await waitFor(() => {
-      expect(cursor$.getValue()).toEqual({ x: 100, y: 130 });
-      expect(pointerState$.getValue()).toEqual(
+      expect(cursorStore.get()).toEqual({ x: 100, y: 130 });
+      expect(pointerStateStore.get()).toEqual(
         expect.objectContaining({
           event: expect.objectContaining({ type: "pointermove" }),
           isOverGrid: true,

packages/web/src/common/context/pointer-position.test.tsx

@@ -4,7 +4,6 @@ import {
   type PropsWithChildren,
   useCallback,
 } from "react";
-import { BehaviorSubject } from "rxjs";
 import {
   COLUMN_MONTH,
   COLUMN_WEEK,
@@ -18,6 +17,7 @@ import {
   type DomMovement,
   getElementAtPoint,
 } from "@web/common/utils/dom/event-emitter.util";
+import { createExternalStore } from "@web/common/utils/external-store.util";
 
 export interface PointerState {
   event: PointerEvent;
@@ -35,12 +35,12 @@ interface PointerPosition {
   togglePointerMovementTracking: (pauseTracking?: boolean) => void;
 }
 
-export const cursor$ = new BehaviorSubject<Pick<DomMovement, "x" | "y">>({
+export const cursorStore = createExternalStore<Pick<DomMovement, "x" | "y">>({
   x: 0,
   y: 0,
 });
 
-export const pointerState$ = new BehaviorSubject<PointerState>({
+export const pointerStateStore = createExternalStore<PointerState>({
   event: new MouseEvent("none", { button: 1 }) as unknown as PointerEvent,
   pointerdown: false,
   selectionStart: null,
@@ -82,7 +82,7 @@ export function getPointerPosition(): Pick<
   PointerEvent,
   "clientX" | "clientY"
 > {
-  const { x: clientX, y: clientY } = cursor$.getValue();
+  const { x: clientX, y: clientY } = cursorStore.get();
 
   return { clientX, clientY };
 }
@@ -132,15 +132,15 @@ export function isOverCalendarGrid(element = getElementAtPointer()) {
 export function PointerPositionProvider({ children }: PropsWithChildren) {
   const handler = useCallback(
     ({ x, y, element, pointerdown, selectionStart, event }: DomMovement) => {
-      cursor$.next({ x, y });
+      cursorStore.set({ x, y });
       const overSidebar = isOverSidebar(element);
       const overSomedayWeek = isOverSomedayWeek(element);
       const overSomedayMonth = isOverSomedayMonth(element);
       const overAllDayRow = isOverAllDayRow(element);
       const overMainGrid = isOverMainGrid(element);
       const overCalendarGrid = isOverCalendarGrid(element);
 
-      pointerState$.next({
+      pointerStateStore.set({
         event,
         pointerdown,
         selectionStart,

packages/web/src/common/context/pointer-position.tsx

@@ -1,13 +1,13 @@
 import { renderHook } from "@testing-library/react";
 import { act } from "react";
-import { cursor$ } from "@web/common/context/pointer-position";
+import { cursorStore } from "@web/common/context/pointer-position";
 import { useCursorCoordinates } from "./useCursorCoordinates";
 
 describe("useCursorCoordinates", () => {
   beforeEach(() => {
     // Reset to a known state
     act(() => {
-      cursor$.next({ x: 0, y: 0 });
+      cursorStore.set({ x: 0, y: 0 });
     });
   });
 
@@ -16,17 +16,17 @@ describe("useCursorCoordinates", () => {
     expect(result.current).toEqual({ x: 0, y: 0 });
   });
 
-  it("should update coordinates when cursor$ emits new values", () => {
+  it("should update coordinates when the cursor store emits new values", () => {
     const { result } = renderHook(() => useCursorCoordinates());
 
     act(() => {
-      cursor$.next({ x: 100, y: 200 });
+      cursorStore.set({ x: 100, y: 200 });
     });
 
     expect(result.current).toEqual({ x: 100, y: 200 });
 
     act(() => {
-      cursor$.next({ x: 50, y: 50 });
+      cursorStore.set({ x: 50, y: 50 });
     });
 
     expect(result.current).toEqual({ x: 50, y: 50 });

packages/web/src/common/hooks/useCursorCoordinates.test.ts

@@ -1,19 +1,6 @@
-import { useEffect, useState } from "react";
-import { cursor$ } from "@web/common/context/pointer-position";
+import { useSyncExternalStore } from "react";
+import { cursorStore } from "@web/common/context/pointer-position";
 
 export function useCursorCoordinates() {
-  const cursor = cursor$.getValue();
-  const [x, setX] = useState<number>(cursor.x);
-  const [y, setY] = useState<number>(cursor.y);
-
-  useEffect(() => {
-    const subscription = cursor$.subscribe((value) => {
-      setX(value.x);
-      setY(value.y);
-    });
-
-    return () => subscription.unsubscribe();
-  }, []);
-
-  return { x, y };
+  return useSyncExternalStore(cursorStore.subscribe, cursorStore.get);
 }