@noya-app/noya-multiplayer-react 0.1.45 → 0.1.46

package/src/NoyaStateContext.tsx

@@ -5,43 +5,41 @@ import {
   PathKey,
 } from "@noya-app/observable";
 import {
-  AIManager,
-  AssetManager,
   ConnectedUsersManager,
   EphemeralUserDataManager,
   MultiplayerStateManager,
-  SecretManager,
+  NoyaManager,
   StateManagerOptions,
   Static,
   TSchema,
-  WorkflowManager,
 } from "@noya-app/state-manager";
 import React, {
   createContext,
   SetStateAction,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
 } from "react";
 import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
 import { useObservable } from "./useObservable";
 
-interface NoyaStateProviderProps<S, M, E extends object>
-  extends Omit<UseNoyaStateOptions<S, M, E>, "schema" | "mergeHistoryEntries"> {
+interface NoyaStateProviderProps<
+  S,
+  M extends object,
+  E extends object,
+  MenuT extends string,
+> extends Omit<
+    UseNoyaStateOptions<S, M, E, MenuT>,
+    "schema" | "mergeHistoryEntries"
+  > {
   children: React.ReactNode;
   initialState?: S;
   fallback?: React.ReactNode;
 }
 
 const AnyNoyaStateContext = createContext<
-  | {
-      ms: MultiplayerStateManager<any, any>;
-      assetManager: AssetManager;
-      workflowManager: WorkflowManager;
-      secretManager: SecretManager;
-      aiManager: AIManager;
-    }
-  | undefined
+  NoyaManager<any, any, any, any> | undefined
 >(undefined);
 
 function useAnyNoyaStateContext() {
@@ -106,7 +104,12 @@ export function useSecret(name: string) {
 }
 
 export function useIsInitialized() {
-  const { ms, secretManager, assetManager } = useAnyNoyaStateContext();
+  const {
+    multiplayerStateManager: ms,
+    secretManager,
+    assetManager,
+  } = useAnyNoyaStateContext();
+
   const isInitializedObservable = useMemo(
     () =>
       Observable.combine(
@@ -163,8 +166,9 @@ export const FallbackUntilInitialized = ({
 
 export function createNoyaContext<
   Schema extends TSchema,
-  M = void,
+  M extends object = object,
   E extends object = object,
+  MenuT extends string = string,
 >({
   schema,
   mergeHistoryEntries,
@@ -178,12 +182,7 @@ export function createNoyaContext<
   type S = Static<Schema>;
 
   const NoyaStateContext = AnyNoyaStateContext as React.Context<
-    | {
-        ms: MultiplayerStateManager<S, M>;
-        assetManager: AssetManager;
-        secretManager: SecretManager;
-      }
-    | undefined
+    NoyaManager<S, M, E> | undefined
   >;
 
   const EphemeralUserDataManagerContext =
@@ -195,47 +194,20 @@ export function createNoyaContext<
     children,
     initialState,
     ...options
-  }: NoyaStateProviderProps<S, M, E>) {
-    const [
-      ,
-      ,
-      {
-        multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager,
-        ephemeralUserDataManager,
-        connectedUsersManager,
-      },
-    ] = useNoyaState<S, M, E>(initialState, {
+  }: NoyaStateProviderProps<S, M, E, MenuT>) {
+    const [, , { noyaManager }] = useNoyaState<S, M, E, MenuT>(initialState, {
       ...(options as any),
       schema,
       mergeHistoryEntries,
     });
 
-    const value = useMemo(
-      () => ({
-        ms: multiplayerStateManager as MultiplayerStateManager<any, any>,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager,
-      }),
-      [
-        multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        aiManager,
-      ]
-    );
-
     return (
-      <AnyNoyaStateContext.Provider value={value}>
-        <ConnectedUsersContext.Provider value={connectedUsersManager}>
+      <AnyNoyaStateContext.Provider value={noyaManager}>
+        <ConnectedUsersContext.Provider
+          value={noyaManager.connectedUsersManager}
+        >
           <EphemeralUserDataManagerContext.Provider
-            value={ephemeralUserDataManager}
+            value={noyaManager.ephemeralUserDataManager}
           >
             {options.fallback !== undefined ? (
               <FallbackUntilInitialized fallback={options.fallback}>
@@ -260,7 +232,7 @@ export function createNoyaContext<
     path?: PathKey[] | string | ((value: S) => any),
     options?: Pick<ObservableOptions, "isEqual">
   ) {
-    const { ms } = useAnyNoyaStateContext();
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
 
     let actualPath: PathKey[] | string =
       typeof path === "function" || !path ? "" : path;
@@ -277,64 +249,65 @@ export function createNoyaContext<
     return value;
   }
 
-  function useSetValue(): M extends {}
-    ? (metadata: M, value: SetStateAction<S>) => void
-    : (value: SetStateAction<S>) => void;
+  function useSetValue(): (
+    ...args:
+      | [metadata: M, value: SetStateAction<S>]
+      | [value: SetStateAction<S>]
+  ) => void;
   function useSetValue<P extends PathKey[] | string>(
     path: P
-  ): M extends {}
-    ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
-    : (value: SetStateAction<GetAtPath<S, P>>) => void;
+  ): (
+    ...args:
+      | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+      | [value: SetStateAction<GetAtPath<S, P>>]
+  ) => void;
   function useSetValue<P extends PathKey[] | string>(path?: P) {
-    const { ms } = useAnyNoyaStateContext();
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
 
     const setValue = useCallback(
       (
-        ...args: M extends {}
-          ? [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
-          : [value: SetStateAction<GetAtPath<S, P>>]
+        ...args:
+          | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+          | [value: SetStateAction<GetAtPath<S, P>>]
       ): void => {
-        const [metadata, value] =
-          args.length === 2 ? args : [undefined as M, args[0]];
-
-        const setStateAtPath = ms.setStateAtPath as (
-          metadata: M,
-          path: P,
-          value: GetAtPath<S, P>
-        ) => void;
+        const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
 
-        setStateAtPath(metadata, (path ?? "") as P, value as never);
+        ms.setStateAtPath(metadata, (path ?? "") as P, value as never);
       },
       [ms, path]
     );
 
-    return setValue as M extends {}
-      ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
-      : (value: SetStateAction<GetAtPath<S, P>>) => void;
+    return setValue;
   }
 
   function useValueState(): [
     S,
-    M extends {}
-      ? (metadata: M, value: SetStateAction<S>) => void
-      : (value: SetStateAction<S>) => void,
+    (
+      ...args:
+        | [metadata: M, value: SetStateAction<S>]
+        | [value: SetStateAction<S>]
+    ) => void,
   ];
   function useValueState<A>(
     selector: (value: S) => A,
     options?: ObservableOptions
   ): [
     A,
-    M extends {}
-      ? (metadata: M, value: SetStateAction<S>) => void
-      : (value: SetStateAction<S>) => void,
+    (
+      ...args:
+        | [metadata: M, value: SetStateAction<S>]
+        | [value: SetStateAction<S>]
+    ) => void,
   ];
   function useValueState<P extends PathKey[] | string>(
     path?: P
   ): [
     GetAtPath<S, P>,
-    M extends {}
-      ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
-      : (value: SetStateAction<GetAtPath<S, P>>) => void,
+    (
+      ...args:
+        | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+        | [value: SetStateAction<GetAtPath<S, P>>]
+    ) => void,
   ];
   function useValueState<P extends PathKey[] | string>(
     ...args: [P?] | [selector: (value: S) => any, options?: ObservableOptions]
@@ -350,11 +323,9 @@ export function createNoyaContext<
   }
 
   function useStateManager() {
-    const { ms } = useAnyNoyaStateContext() as {
-      ms: MultiplayerStateManager<S, M>;
-    };
+    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
 
-    return ms;
+    return ms as MultiplayerStateManager<S, M>;
   }
 
   function useEphemeralUserDataManager() {
@@ -369,6 +340,34 @@ export function createNoyaContext<
     return ephemeralUserData;
   }
 
+  function useNoyaManager() {
+    return useAnyNoyaStateContext() as NoyaManager<S, M, E, MenuT>;
+  }
+
+  function useLeftMenuItems() {
+    const { menuManager } = useNoyaManager();
+    return useObservable(menuManager.leftMenuItems$);
+  }
+
+  function useRightMenuItems() {
+    const { menuManager } = useNoyaManager();
+    return useObservable(menuManager.rightMenuItems$);
+  }
+
+  function useHandleMenuItem(callback: (type: MenuT) => void) {
+    const { menuManager } = useNoyaManager();
+
+    useEffect(() => {
+      return menuManager.addListener(callback);
+    }, [menuManager, callback]);
+  }
+
+  function useOnSelectMenuItemCallback(): (type: MenuT) => void {
+    const { menuManager } = useNoyaManager();
+
+    return useCallback((type: MenuT) => menuManager.emit(type), [menuManager]);
+  }
+
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
@@ -377,8 +376,10 @@ export function createNoyaContext<
     useValueState,
     useStateManager,
     useEphemeralUserDataManager,
-    // useAssets,
-    // useAssetManager,
-    // useAsset,
+    useLeftMenuItems,
+    useRightMenuItems,
+    useHandleMenuItem,
+    useOnSelectMenuItemCallback,
+    useNoyaManager,
   };
 }

package/src/WebSocketConnection.ts

@@ -0,0 +1,153 @@
+import {
+  ClientToServerMessage,
+  MultiplayerStateManagerError,
+  ReconnectingWebSocket,
+  ReconnectingWebSocketState,
+  ServerToClientMessage,
+  UserActivityDetector,
+} from "@noya-app/state-manager";
+
+export type ConnectionEvent<State> =
+  | {
+      type: "stateChange";
+      state: ReconnectingWebSocketState;
+    }
+  | {
+      type: "send";
+      message: ClientToServerMessage<State>;
+    }
+  | {
+      type: "receive";
+      message: ServerToClientMessage<State>;
+    }
+  | {
+      type: "error";
+      error: MultiplayerStateManagerError;
+    };
+
+export type ConnectionOptions<State> = {
+  debug?: boolean;
+  onConnectionEvent?: (event: ConnectionEvent<State>) => void;
+};
+
+export class WebSocketConnection<State> {
+  private ws: ReconnectingWebSocket;
+  private pingCount = 0;
+  private pendingPingId?: string;
+  private intervalId?: NodeJS.Timer;
+
+  constructor(
+    private url: URL,
+    private options: ConnectionOptions<State> = {}
+  ) {
+    this.ws = new ReconnectingWebSocket({
+      debug: options.debug,
+      onopen: this.handleOpen,
+      onmessage: this.handleMessage,
+      onclose: this.handleClose,
+      activityDetector: new UserActivityDetector(),
+    });
+  }
+
+  async connect() {
+    this.ws.connect(this.url.toString());
+
+    // Start ping interval
+    this.intervalId = setInterval(() => {
+      if (this.ws.state !== "OPEN") return;
+
+      // A response to a previous ping hasn't been received, so we'll reset the connection
+      if (this.pendingPingId) {
+        this.ws.close();
+        return;
+      }
+
+      const pingId = (this.pingCount++).toString();
+
+      const message: ClientToServerMessage<State> = {
+        type: "ping",
+        id: pingId,
+      };
+
+      this.pendingPingId = message.id;
+
+      this.options.onConnectionEvent?.({
+        type: "send",
+        message,
+      });
+
+      this.ws.send(JSON.stringify(message));
+    }, 10000);
+  }
+
+  private handleOpen = () => {
+    this.pendingPingId = undefined;
+
+    if (this.options.debug) {
+      console.info("ws connected");
+    }
+
+    this.options.onConnectionEvent?.({
+      type: "stateChange",
+      state: "OPEN",
+    });
+  };
+
+  private handleMessage = (event: MessageEvent) => {
+    if (this.options.debug) {
+      console.info("ws receiving message ", event.data);
+    }
+
+    const parsed = JSON.parse(event.data) as ServerToClientMessage<State>;
+
+    this.options.onConnectionEvent?.({
+      type: "receive",
+      message: parsed,
+    });
+
+    if (parsed.type === "pong" && parsed.id === this.pendingPingId) {
+      this.pendingPingId = undefined;
+    }
+  };
+
+  private handleClose = () => {
+    this.pendingPingId = undefined;
+
+    if (this.options.debug) {
+      console.info("ws disconnected");
+    }
+
+    this.options.onConnectionEvent?.({
+      type: "stateChange",
+      state: "CLOSED",
+    });
+  };
+
+  send(message: ClientToServerMessage<State>) {
+    if (this.options.debug) {
+      console.info("ws sending message", message);
+    }
+
+    this.options.onConnectionEvent?.({
+      type: "send",
+      message,
+    });
+
+    this.ws.send(JSON.stringify(message));
+  }
+
+  close() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    this.ws.shutdown();
+  }
+
+  addListener(listener: (state: ReconnectingWebSocketState) => void) {
+    return this.ws.addListener(listener);
+  }
+
+  removeListener(listener: (state: ReconnectingWebSocketState) => void) {
+    return this.ws.removeListener(listener);
+  }
+}

package/src/components/ErrorOverlay.tsx

@@ -1,7 +1,7 @@
 import { MultiplayerStateManagerError } from "@noya-app/state-manager";
-import React from "react";
+import * as React from "react";
 
-export function ErrorOverlay({
+export const ErrorOverlay = React.memo(function ErrorOverlay({
   error,
 }: {
   error: MultiplayerStateManagerError;
@@ -86,4 +86,4 @@ export function ErrorOverlay({
       </button>
     </div>
   );
-}
+});