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

package/src/hooks.ts

@@ -3,24 +3,12 @@
 import { GetAtPath } from "@noya-app/observable";
 import {
   ActionHandler,
-  AIManager,
-  AssetManager,
-  ConnectedUsersManager,
-  ConnectionEvent,
-  EphemeralUserDataManager,
-  MultiplayerStateManager,
-  MultiplayerStateManagerError,
   MultiplayerStateManagerOptions,
-  RPCManager,
-  StandardRPCRequestPayload,
-  StandardRPCResponsePayload,
+  NoyaManager,
   StateManager,
   StateManagerOptions,
   stubSync,
   SyncAdapter,
-  SyncAdapterOptions,
-  Task,
-  WorkflowManager,
 } from "@noya-app/state-manager";
 import {
   createElement,
@@ -33,9 +21,7 @@ import {
   useSyncExternalStore,
 } from "react";
 import { createRoot } from "react-dom/client";
-import { SecretManager } from "../../noya-state-manager/src/SecretManager";
 import { ErrorOverlay } from "./components/ErrorOverlay";
-import { shouldTrackEvents$, shouldTrackTasks$ } from "./globals";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
 import { useObservable } from "./useObservable";
@@ -134,190 +120,103 @@ export function useManagedHistory<S, M = void>(
   );
 }
 
-export function useSyncMultiplayerStateManager<S, M = void>(
-  multiplayerStateManager: MultiplayerStateManager<S, M>
-) {
-  return useSyncExternalStore(
-    multiplayerStateManager.addListener,
-    multiplayerStateManager.getOptimisticState,
-    multiplayerStateManager.getOptimisticState
-  );
-}
-
-const defaultStubSync = stubSync();
-
 export type UseMultiplayerStateOptions<
   S,
-  M = void,
+  M extends object = object,
   E extends object = object,
+  MenuT extends string = string,
 > = MultiplayerStateManagerOptions<S, M> & {
-  sync?: (
-    options: Pick<
-      SyncAdapterOptions<S, M, E>,
-      "ms" | "ephemeralUserDataManager" | "assetManager"
-    >
-  ) => void;
-  trackConnectionEvents?: boolean;
-  trackTasks?: boolean;
+  sync?: SyncAdapter<S, M, E, MenuT>;
   inspector?: boolean | StateInspectorOptions;
 };
 
-export function useMultiplayerState<S, M = void, E extends object = object>(
+const defaultStubSync = stubSync<unknown, object, object, string>();
+
+export function useMultiplayerState<
+  S,
+  M extends object = object,
+  E extends object = object,
+  MenuT extends string = string,
+>(
   initialState: S | (() => S),
-  options?: UseMultiplayerStateOptions<S, M, E>
+  options?: UseMultiplayerStateOptions<S, M, E, MenuT>
 ) {
-  const { sync = defaultStubSync as unknown as SyncAdapter<S, M, E>, ...rest } =
-    options ?? {};
-
-  /** RPC */
-
-  const [rpcManager] = useState(
-    () =>
-      new RPCManager<StandardRPCRequestPayload, StandardRPCResponsePayload>()
-  );
-  const [multiplayerStateManager] = useState(
-    () => new MultiplayerStateManager<S, M>(initialState, rest)
+  const {
+    sync = defaultStubSync as unknown as SyncAdapter<S, M, E, MenuT>,
+    inspector,
+    ...rest
+  } = options ?? {};
+
+  const [noyaManager] = useState(
+    () => new NoyaManager<S, M, E, MenuT>(initialState, rest)
   );
-  const [assetManager] = useState(() => new AssetManager());
-  const [aiManager] = useState(() => new AIManager(rpcManager));
-  const [workflowManager] = useState(() => new WorkflowManager(rpcManager));
-  const [secretManager] = useState(() => new SecretManager(rpcManager));
-  const [connectedUsersManager] = useState(() => new ConnectedUsersManager());
-  const syncRef = useRef(sync);
 
-  const [connectionEvents, setConnectionEvents] = useState<
-    ConnectionEvent<S>[] | undefined
-  >();
-  const [ephemeralUserDataManager] = useState<EphemeralUserDataManager<E>>(
-    () => new EphemeralUserDataManager()
+  const state = useObservable(
+    noyaManager.multiplayerStateManager.optimisticState$
   );
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const assets = useObservable(assetManager.assets$);
-  // const connectionStatus = useObservable(
-  //   multiplayerStateManager.connectionStatus$
-  // );
-
-  const extras = useMemo(() => {
+  const assets = useObservable(noyaManager.assetManager.assets$);
+
+  type ExtrasType = {
+    noyaManager: typeof noyaManager;
+    taskManager: typeof noyaManager.taskManager;
+    connectionEventManager: typeof noyaManager.connectionEventManager;
+    connectedUsersManager: typeof noyaManager.connectedUsersManager;
+    ephemeralUserDataManager: typeof noyaManager.ephemeralUserDataManager;
+    multiplayerStateManager: typeof noyaManager.multiplayerStateManager;
+    assetManager: typeof noyaManager.assetManager;
+    aiManager: typeof noyaManager.aiManager;
+    rpcManager: typeof noyaManager.rpcManager;
+    workflowManager: typeof noyaManager.workflowManager;
+    secretManager: typeof noyaManager.secretManager;
+    menuItemsManager: typeof noyaManager.menuManager;
+    createAsset: typeof noyaManager.assetManager.create;
+    deleteAsset: typeof noyaManager.assetManager.delete;
+    assets: typeof assets;
+  };
+
+  const extras = useMemo<ExtrasType>(() => {
     return {
-      tasks,
-      connectionEvents,
-      connectedUsersManager,
-      ephemeralUserDataManager,
-      multiplayerStateManager,
+      noyaManager,
+      taskManager: noyaManager.taskManager,
+      connectionEventManager: noyaManager.connectionEventManager,
+      connectedUsersManager: noyaManager.connectedUsersManager,
+      ephemeralUserDataManager: noyaManager.ephemeralUserDataManager,
+      multiplayerStateManager: noyaManager.multiplayerStateManager,
+      assetManager: noyaManager.assetManager,
+      aiManager: noyaManager.aiManager,
+      rpcManager: noyaManager.rpcManager,
+      workflowManager: noyaManager.workflowManager,
+      secretManager: noyaManager.secretManager,
+      menuItemsManager: noyaManager.menuManager,
+      createAsset: noyaManager.assetManager.create,
+      deleteAsset: noyaManager.assetManager.delete,
       assets,
-      assetManager,
-      aiManager,
-      rpcManager,
-      workflowManager,
-      secretManager,
-      createAsset: assetManager.create,
-      deleteAsset: assetManager.delete,
-      // connectionStatus,
-      // isConnected: connectionStatus === "connected",
     };
-  }, [
-    tasks,
-    connectionEvents,
-    connectedUsersManager,
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    assets,
-    assetManager,
-    aiManager,
-    rpcManager,
-    workflowManager,
-    secretManager,
-  ]);
-
-  const globalTrackEvents = useObservable(shouldTrackEvents$);
-  const globalTrackTasks = useObservable(shouldTrackTasks$);
-
-  const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
-  const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
+  }, [noyaManager, assets]);
 
-  const trackEventsCallbackRef = useRef<
-    ((e: ConnectionEvent<S>) => void) | undefined
-  >();
-  const trackTasksCallbackRef = useRef<((tasks: Task[]) => void) | undefined>();
-
-  useEffect(() => {
-    trackEventsCallbackRef.current = shouldTrackEvents
-      ? (e) =>
-          setConnectionEvents((events) => {
-            const updated = events ? [...events, e] : [e];
-            return updated.length > 50 ? updated.slice(-50) : updated;
-          })
-      : undefined;
-  }, [shouldTrackEvents]);
-
-  useEffect(() => {
-    trackTasksCallbackRef.current = shouldTrackTasks
-      ? (tasks) => {
-          setTasks((old) => {
-            const newIds = new Set(tasks.map((t) => t.id));
-
-            // merge old and new tasks, preferring new tasks
-            const unchanged = old.filter((t) => !newIds.has(t.id));
-
-            return [...unchanged, ...tasks];
-          });
-        }
-      : undefined;
-  }, [shouldTrackTasks]);
+  const syncRef = useRef(sync);
 
   useEffect(() => {
     if (syncRef.current) {
-      return syncRef.current({
-        ms: multiplayerStateManager,
-        assetManager,
-        workflowManager,
-        secretManager,
-        rpcManager,
-        aiManager,
-        ephemeralUserDataManager,
-        connectedUsersManager,
-        onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
-        onChangeTasks: (tasks) => trackTasksCallbackRef.current?.(tasks),
-      });
+      return syncRef.current({ noyaManager });
     }
-  }, [
-    assetManager,
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    workflowManager,
-    secretManager,
-    rpcManager,
-    aiManager,
-    connectedUsersManager,
-  ]);
+  }, [noyaManager]);
 
-  const state = useSyncMultiplayerStateManager(multiplayerStateManager);
+  useErrorOverlay<MenuT>(noyaManager);
 
-  const forceInit = useCallback(() => {
-    const state =
-      initialState instanceof Function ? initialState() : initialState;
-    const schema = options?.schema;
-    multiplayerStateManager.sm.clearHistory();
-    multiplayerStateManager.sendInit({ force: true, state, schema });
-  }, [initialState, multiplayerStateManager, options?.schema]);
+  useStateInspector<S, M, E, MenuT>({
+    noyaManager,
+    disabled: !inspector,
+    ...(typeof inspector === "object" && inspector),
+  });
 
-  const [unrecoverableError, setUnrecoverableError] = useState<
-    MultiplayerStateManagerError | undefined
-  >();
+  return [state, noyaManager.multiplayerStateManager.setState, extras] as const;
+}
 
-  useEffect(() => {
-    return multiplayerStateManager.errorEmitter.addListener((error) => {
-      switch (error.reason) {
-        case "invalidDataType":
-        case "schemaMismatch":
-        case "outdatedSchema":
-        case "dataMigrationFailure":
-        case "schemaMigration":
-          setUnrecoverableError(error);
-          break;
-      }
-    });
-  }, [multiplayerStateManager]);
+function useErrorOverlay<MenuT extends string = string>(
+  noyaManager: NoyaManager<any, any, any, MenuT>
+) {
+  const unrecoverableError = useObservable(noyaManager.unrecoverableError);
 
   useEffect(() => {
     if (!unrecoverableError) return;
@@ -331,20 +230,4 @@ export function useMultiplayerState<S, M = void, E extends object = object>(
       el.remove();
     };
   });
-
-  useStateInspector({
-    ephemeralUserDataManager,
-    multiplayerStateManager,
-    assetManager,
-    secretManager,
-    state,
-    connectionEvents,
-    connectedUsersManager,
-    tasks,
-    forceInit,
-    disabled: !options?.inspector,
-    ...(typeof options?.inspector === "object" && options.inspector),
-  });
-
-  return [state, multiplayerStateManager.setState, extras] as const;
 }

package/src/index.ts

@@ -5,3 +5,5 @@ export * from "./inspector/StateInspector";
 export * from "./noyaApp";
 export * from "./NoyaStateContext";
 export * from "./useObservable";
+export { WebSocketConnection } from "./WebSocketConnection";
+export type { ConnectionEvent, ConnectionOptions } from "./WebSocketConnection";

package/src/inspector/StateInspector.tsx

@@ -1,16 +1,7 @@
 "use client";
 
 import { memoGeneric } from "@noya-app/react-utils";
-import {
-  AssetManager,
-  ConnectedUsersManager,
-  ConnectionEvent,
-  EphemeralUserDataManager,
-  ExtendedPathKey,
-  MultiplayerStateManager,
-  SecretManager,
-  Task,
-} from "@noya-app/state-manager";
+import { ExtendedPathKey, NoyaManager } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
   ComponentPropsWithoutRef,
@@ -26,7 +17,6 @@ import {
   chromeDark,
   chromeLight,
 } from "react-inspector";
-import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
 import { useManagedHistory } from "../hooks";
 import { useObservable } from "../useObservable";
 import { useLocalStorageState } from "./useLocalStorageState";
@@ -134,7 +124,7 @@ function DisclosureSection({
 }: {
   open: boolean;
   setOpen?: (value: boolean) => void;
-  title: string;
+  title: React.ReactNode;
   right?: React.ReactNode;
   children: React.ReactNode;
   colorScheme: "light" | "dark";
@@ -254,36 +244,32 @@ export type StateInspectorOptions = {
 
 export const StateInspector = memoGeneric(function StateInspector<
   S,
-  M,
+  M extends object,
   E extends object,
+  MenuT extends string = string,
 >({
-  state,
-  connectionEvents,
-  tasks,
-  unstyled,
+  noyaManager,
   colorScheme = "light",
-  multiplayerStateManager,
-  assetManager,
-  secretManager,
-  connectedUsersManager,
-  ephemeralUserDataManager,
   anchor = "right",
-  forceInit,
+  unstyled = false,
   ...props
 }: {
-  state: S;
-  connectionEvents?: ConnectionEvent<S>[];
-  tasks?: Task[];
+  noyaManager: NoyaManager<S, M, E, MenuT>;
   unstyled?: boolean;
-  multiplayerStateManager: MultiplayerStateManager<S, M>;
-  assetManager: AssetManager;
-  connectedUsersManager: ConnectedUsersManager;
-  secretManager: SecretManager;
-  ephemeralUserDataManager: EphemeralUserDataManager<E>;
-  forceInit: () => void;
 } & StateInspectorOptions &
   ComponentPropsWithoutRef<"div">) {
+  const {
+    multiplayerStateManager,
+    assetManager,
+    connectedUsersManager,
+    secretManager,
+    ephemeralUserDataManager,
+    connectionEventManager,
+    taskManager,
+  } = noyaManager;
+
   const [didMount, setDidMount] = React.useState(false);
+  const tasks = useObservable(taskManager.tasks$);
 
   useLayoutEffect(() => {
     setDidMount(true);
@@ -329,13 +315,7 @@ export const StateInspector = memoGeneric(function StateInspector<
     false
   );
 
-  useEffect(() => {
-    shouldTrackEvents$.set(showEvents);
-  }, [showEvents]);
-
-  useEffect(() => {
-    shouldTrackTasks$.set(showTasks);
-  }, [showTasks]);
+  const connectionEvents = useObservable(connectionEventManager.events$);
 
   useEffect(() => {
     if (eventsContainerRef.current) {
@@ -344,12 +324,18 @@ export const StateInspector = memoGeneric(function StateInspector<
     }
   }, [connectionEvents]);
 
+  const multipeerStateInitialized = useObservable(
+    multiplayerStateManager.isInitialized$
+  );
   const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
+  const secretsInitialized = useObservable(secretManager.isInitialized$);
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
   const userId = useObservable(connectedUsersManager.currentUserId$);
+  const state = useObservable(multiplayerStateManager.optimisticState$);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -496,7 +482,14 @@ export const StateInspector = memoGeneric(function StateInspector<
         </div>
       </DisclosureSection>
       <DisclosureSection
-        title="Data"
+        title={
+          <TitleLabel>
+            Data
+            <ColoredDot
+              type={multipeerStateInitialized ? "success" : "error"}
+            />
+          </TitleLabel>
+        }
         colorScheme={colorScheme}
         setOpen={setShowData}
         open={showData}
@@ -511,7 +504,7 @@ export const StateInspector = memoGeneric(function StateInspector<
               // disabled={!historySnapshot.canUndo}
               theme={theme}
               onClick={() => {
-                forceInit();
+                noyaManager.forceInit();
               }}
             >
               Reset
@@ -706,10 +699,27 @@ export const StateInspector = memoGeneric(function StateInspector<
       <DisclosureSection
         open={showAssets}
         setOpen={setShowAssets}
-        title="Assets"
+        title={
+          <TitleLabel>
+            Assets
+            <ColoredDot type={assetsInitialized ? "success" : "error"} />
+          </TitleLabel>
+        }
         colorScheme={colorScheme}
         right={
-          <span style={{ display: "flex", gap: "4px" }}>
+          <span style={{ display: "flex", gap: "10px" }}>
+            <SmallButton
+              theme={theme}
+              onClick={() => {
+                console.info(
+                  "[StateInspector] Reloading assets",
+                  noyaManager.id
+                );
+                assetManager.fetch();
+              }}
+            >
+              Reload
+            </SmallButton>
             <SmallButton
               theme={theme}
               onClick={() => {
@@ -779,7 +789,12 @@ export const StateInspector = memoGeneric(function StateInspector<
         </div>
       </DisclosureSection>
       <DisclosureSection
-        title="Secrets"
+        title={
+          <TitleLabel>
+            Secrets
+            <ColoredDot type={secretsInitialized ? "success" : "error"} />
+          </TitleLabel>
+        }
         colorScheme={colorScheme}
         open={showSecrets}
         setOpen={setShowSecrets}
@@ -863,7 +878,6 @@ export const StateInspector = memoGeneric(function StateInspector<
                     name,
                     data,
                     isNonenumerable,
-                    expanded,
                   }: any) => {
                     const direction = event.type === "send" ? "up" : "down";
 
@@ -1051,3 +1065,27 @@ function SmallButton({
     </button>
   );
 }
+
+function ColoredDot({ type }: { type: "success" | "error" }) {
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: 6,
+        height: 6,
+        background:
+          type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
+        borderRadius: "50%",
+        verticalAlign: "middle",
+      }}
+    />
+  );
+}
+
+function TitleLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+      {children}
+    </span>
+  );
+}

package/src/inspector/useStateInspector.tsx

@@ -1,14 +1,6 @@
 "use client";
 
-import {
-  AssetManager,
-  ConnectedUsersManager,
-  ConnectionEvent,
-  EphemeralUserDataManager,
-  MultiplayerStateManager,
-  SecretManager,
-  Task,
-} from "@noya-app/state-manager";
+import { NoyaManager } from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -24,30 +16,19 @@ function createShadowRootElement() {
   return { host, container };
 }
 
-export function useStateInspector<S, M, E extends object>({
-  state,
-  connectionEvents,
-  tasks,
+export function useStateInspector<
+  S,
+  M extends object,
+  E extends object,
+  MenuT extends string = string,
+>({
+  noyaManager,
   disabled = false,
   colorScheme,
   anchor,
-  multiplayerStateManager,
-  assetManager,
-  secretManager,
-  connectedUsersManager,
-  ephemeralUserDataManager,
-  forceInit,
 }: {
-  state: S;
-  connectionEvents?: ConnectionEvent<S>[];
-  tasks?: Task[];
+  noyaManager: NoyaManager<S, M, E, MenuT>;
   disabled: boolean;
-  multiplayerStateManager: MultiplayerStateManager<S, M>;
-  assetManager: AssetManager;
-  secretManager: SecretManager;
-  connectedUsersManager: ConnectedUsersManager;
-  ephemeralUserDataManager: EphemeralUserDataManager<E>;
-  forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
@@ -71,35 +52,10 @@ export function useStateInspector<S, M, E extends object>({
 
     root.render(
       <StateInspector
-        state={state}
-        connectionEvents={connectionEvents}
-        tasks={tasks}
         colorScheme={colorScheme}
         anchor={anchor}
-        forceInit={forceInit}
-        multiplayerStateManager={
-          multiplayerStateManager as MultiplayerStateManager<any, any>
-        }
-        assetManager={assetManager}
-        secretManager={secretManager}
-        ephemeralUserDataManager={
-          ephemeralUserDataManager as EphemeralUserDataManager<any>
-        }
-        connectedUsersManager={connectedUsersManager}
+        noyaManager={noyaManager}
       />
     );
-  }, [
-    anchor,
-    colorScheme,
-    connectionEvents,
-    root,
-    state,
-    multiplayerStateManager,
-    tasks,
-    forceInit,
-    ephemeralUserDataManager,
-    assetManager,
-    secretManager,
-    connectedUsersManager,
-  ]);
+  }, [noyaManager, anchor, colorScheme, root]);
 }