@noya-app/noya-multiplayer-react 0.1.23 → 0.1.25

package/src/hooks.ts

@@ -6,16 +6,18 @@ import {
   EphemeralUserData,
   Get,
   MultiplayerStateManager,
+  MultiplayerStateManagerError,
   MultiplayerStateManagerOptions,
   MultiplayerUser,
   StateManager,
   StateManagerOptions,
+  stubSync,
   SyncAdapter,
   SyncAdapterOptions,
   Task,
-  stubSync,
 } from "@noya-app/state-manager";
 import {
+  createElement,
   SetStateAction,
   useCallback,
   useEffect,
@@ -24,19 +26,19 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
+import { createRoot } from "react-dom/client";
+import { ErrorOverlay } from "./components/ErrorOverlay";
 import { shouldTrackEvents$, shouldTrackTasks$ } from "./globals";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
 import { useObservable } from "./useObservable";
 
-export function useSyncStateManager<S extends object, M>(
-  stateManager: StateManager<S, M>
-): S;
-export function useSyncStateManager<S extends object, M, P extends string>(
+export function useSyncStateManager<S, M>(stateManager: StateManager<S, M>): S;
+export function useSyncStateManager<S, M, P extends string>(
   stateManager: StateManager<S, M>,
   path: P
 ): Get<S, P, unknown>;
-export function useSyncStateManager<S extends object, M>(
+export function useSyncStateManager<S, M>(
   stateManager: StateManager<S, M>,
   path?: string
 ) {
@@ -55,7 +57,7 @@ export function useSyncStateManager<S extends object, M>(
   );
 }
 
-export function useManagedState<S extends object, M = void>(
+export function useManagedState<S, M = void>(
   createInitialState: () => S,
   options?: StateManagerOptions<S, M>
 ) {
@@ -79,7 +81,7 @@ export function useManagedState<S extends object, M = void>(
           handler: ActionHandler<S>
         ) => void;
 
-        if (typeof action === "function") {
+        if (action instanceof Function) {
           performActionNoMetadata({
             run: action,
             undo: () => state,
@@ -96,7 +98,7 @@ export function useManagedState<S extends object, M = void>(
           handler: ActionHandler<S>
         ) => void;
 
-        if (typeof action === "function") {
+        if (action instanceof Function) {
           performActionWithMetadata(metadata, {
             run: action,
             undo: () => state,
@@ -115,7 +117,7 @@ export function useManagedState<S extends object, M = void>(
   return [state, setState, stateManager] as const;
 }
 
-export function useManagedHistory<S extends object, M = void>(
+export function useManagedHistory<S, M = void>(
   stateManager: StateManager<S, M>
 ) {
   return useSyncExternalStore(
@@ -125,7 +127,7 @@ export function useManagedHistory<S extends object, M = void>(
   );
 }
 
-export function useSyncMultiplayerStateManager<S extends object, M = void>(
+export function useSyncMultiplayerStateManager<S, M = void>(
   multiplayerStateManager: MultiplayerStateManager<S, M>
 ) {
   return useSyncExternalStore(
@@ -135,11 +137,52 @@ export function useSyncMultiplayerStateManager<S extends object, M = void>(
   );
 }
 
+function throttle<F extends (...args: any[]) => any>(fn: F, ms: number) {
+  let lastCall = 0;
+  let timeoutId: number | null = null;
+  return (...args: Parameters<F>) => {
+    const now = Date.now();
+    if (now - lastCall < ms) {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(
+        () => {
+          lastCall = now;
+          fn(...args);
+        },
+        ms - (now - lastCall)
+      ) as unknown as number;
+      return;
+    }
+    lastCall = now;
+    return fn(...args);
+  };
+}
+
 export function useEphemeralUserData<E>(
-  ephemeralUserData: EphemeralUserData<E>
+  ephemeralUserData: EphemeralUserData<E>,
+  options?: {
+    throttle?: number;
+  }
 ) {
+  const throttledAddListener = useMemo(() => {
+    const throttleMs = options?.throttle ?? 0;
+
+    if (throttleMs > 0) {
+      const addListener = (
+        fn: Parameters<typeof ephemeralUserData.addListener>[0]
+      ) => {
+        const throttledFn = throttle(fn, throttleMs);
+        return ephemeralUserData.addListener(throttledFn);
+      };
+
+      return addListener;
+    }
+
+    return ephemeralUserData.addListener;
+  }, [ephemeralUserData, options?.throttle]);
+
   return useSyncExternalStore(
-    ephemeralUserData.addListener,
+    throttledAddListener,
     ephemeralUserData.getSnapshot,
     ephemeralUserData.getSnapshot
   );
@@ -148,7 +191,7 @@ export function useEphemeralUserData<E>(
 const defaultStubSync = stubSync();
 
 export type UseMultiplayerStateOptions<
-  S extends object,
+  S,
   M = void,
   E = void,
 > = MultiplayerStateManagerOptions<S, M> & {
@@ -160,7 +203,7 @@ export type UseMultiplayerStateOptions<
   inspector?: boolean | StateInspectorOptions;
 };
 
-export function useMultiplayerState<S extends object, M = void, E = void>(
+export function useMultiplayerState<S, M = void, E = void>(
   initialState: S | (() => S),
   options?: UseMultiplayerStateOptions<S, M, E>
 ) {
@@ -271,12 +314,35 @@ export function useMultiplayerState<S extends object, M = void, E = void>(
 
   const forceInit = useCallback(() => {
     const state =
-      typeof initialState === "function" ? initialState() : initialState;
+      initialState instanceof Function ? initialState() : initialState;
     const schema = options?.schema;
     multiplayerStateManager.sm.clearHistory();
     multiplayerStateManager.sendInit({ force: true, state, schema });
   }, [initialState, multiplayerStateManager, options?.schema]);
 
+  const [unrecoverableError, setUnrecoverableError] = useState<
+    MultiplayerStateManagerError | undefined
+  >();
+
+  useEffect(() => {
+    return multiplayerStateManager.errorEmitter.addListener((error) => {
+      setUnrecoverableError(error);
+    });
+  }, [multiplayerStateManager]);
+
+  useEffect(() => {
+    if (!unrecoverableError) return;
+    const el = document.createElement("div");
+    el.id = "noya-multiplayer-react-error-overlay";
+    document.body.appendChild(el);
+    const root = createRoot(el);
+    root.render(createElement(ErrorOverlay, { error: unrecoverableError }));
+    return () => {
+      root.unmount();
+      el.remove();
+    };
+  });
+
   useStateInspector({
     ephemeralUserData,
     multiplayerStateManager,

package/src/index.ts

@@ -4,3 +4,4 @@ export * from "./components/UserPointersOverlay";
 export * from "./hooks";
 export * from "./inspector/StateInspector";
 export * from "./noyaApp";
+export * from "./useObservable";

package/src/inspector/StateInspector.tsx

@@ -249,11 +249,7 @@ export type StateInspectorOptions = {
   anchor?: StateInspectorAnchor;
 };
 
-export const StateInspector = memo(function StateInspector<
-  S extends object,
-  M,
-  E,
->({
+export const StateInspector = memo(function StateInspector<S, M, E>({
   state,
   connectionEvents,
   connectedUsers,
@@ -757,7 +753,7 @@ export const StateInspector = memo(function StateInspector<
                 }}
               >
                 <ObjectInspector
-                  data={event.message}
+                  data={event.type === "error" ? event.error : event.message}
                   theme={theme}
                   nodeRenderer={({
                     depth,

package/src/inspector/useStateInspector.tsx

@@ -19,7 +19,7 @@ function createPortalElement() {
   return el;
 }
 
-export function useStateInspector<S extends object, M, E>({
+export function useStateInspector<S, M, E>({
   state,
   connectionEvents,
   connectedUsers,

package/src/noyaApp.ts

@@ -63,13 +63,13 @@ type AppDataOptions = {
 /**
  * Get data from host app. Fall back to default data.
  */
-export function useAppData<S extends object>(
+export function useAppData<S>(
   initialState: S,
   { schema }: AppDataOptions = {}
 ) {
   const appData = useMemo(() => {
     return getAppData(
-      schema ? createValue(schema, initialState) : initialState
+      schema ? (createValue(schema, initialState) as S) : initialState
     );
   }, [initialState, schema]);
 
@@ -142,7 +142,7 @@ export function isEmbeddedApp() {
   return window.self !== window.top;
 }
 
-export function useNoyaAppState<S extends object, M = void, E = void>(
+export function useNoyaAppState<S, M = void, E = void>(
   initialState: S | (() => S),
   options: UseMultiplayerStateOptions<S, M, E> & {
     localStorageKey?: string;