@noya-app/noya-multiplayer-react 0.1.24 → 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(
@@ -189,7 +191,7 @@ export function useEphemeralUserData<E>(
 const defaultStubSync = stubSync();
 
 export type UseMultiplayerStateOptions<
-  S extends object,
+  S,
   M = void,
   E = void,
 > = MultiplayerStateManagerOptions<S, M> & {
@@ -201,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>
 ) {
@@ -312,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/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;