@noya-app/noya-multiplayer-react 0.1.17 → 0.1.19

package/src/hooks.ts

@@ -3,6 +3,7 @@
 import {
   ActionHandler,
   ConnectionEvent,
+  EphemeralUserData,
   Get,
   MultiplayerStateManager,
   MultiplayerStateManagerOptions,
@@ -23,13 +24,10 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import {
-  shouldTrackEvents$,
-  shouldTrackTasks$,
-  useObservable,
-} from "./globals";
+import { shouldTrackEvents$, shouldTrackTasks$ } from "./globals";
 import { StateInspector } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
+import { useObservable } from "./useObservable";
 
 export function useSyncStateManager<S extends object, M>(
   stateManager: StateManager<S, M>
@@ -137,12 +135,25 @@ export function useSyncMultiplayerStateManager<S extends object, M = void>(
   );
 }
 
+export function useEphemeralUserData<E>(
+  ephemeralUserData: EphemeralUserData<E>
+) {
+  return useSyncExternalStore(
+    ephemeralUserData.addListener,
+    ephemeralUserData.getSnapshot,
+    ephemeralUserData.getSnapshot
+  );
+}
+
 const defaultStubSync = stubSync();
 
-export function useMultiplayerState<S extends object, M = void>(
+export function useMultiplayerState<S extends object, M = void, E = void>(
   initialState: S | (() => S),
   options?: MultiplayerStateManagerOptions<S, M> & {
-    sync?: (options: { ms: MultiplayerStateManager<S, M> }) => void;
+    sync?: (options: {
+      ms: MultiplayerStateManager<S, M>;
+      ephemeralUserData: EphemeralUserData<E>;
+    }) => void;
     trackConnectionEvents?: boolean;
     trackTasks?: boolean;
     inspector?:
@@ -150,7 +161,7 @@ export function useMultiplayerState<S extends object, M = void>(
       | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
   }
 ) {
-  const { sync = defaultStubSync as unknown as SyncAdapter<S, M>, ...rest } =
+  const { sync = defaultStubSync as unknown as SyncAdapter<S, M, E>, ...rest } =
     options ?? {};
 
   const [multiplayerStateManager] = useState(
@@ -163,14 +174,19 @@ export function useMultiplayerState<S extends object, M = void>(
   >();
 
   const [connectedUsers, setConnectedUsers] = useState<MultiplayerUser[]>([]);
+  const [ephemeralUserData] = useState<EphemeralUserData<E>>(
+    () => new EphemeralUserData()
+  );
   const [tasks, setTasks] = useState<Task[]>([]);
   const [userId, setUserId] = useState<string | undefined>();
 
   const extras = useMemo(() => {
     return {
       tasks,
+      userId,
       connectionEvents,
       connectedUsers,
+      ephemeralUserData,
       // evaluate: async (code: string) => {
       //   const payload = await rpcManager.request({ type: "eval", code });
 
@@ -179,7 +195,7 @@ export function useMultiplayerState<S extends object, M = void>(
       //   }
       // },
     };
-  }, [tasks, connectionEvents, connectedUsers]);
+  }, [tasks, connectionEvents, connectedUsers, ephemeralUserData, userId]);
 
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
@@ -231,13 +247,14 @@ export function useMultiplayerState<S extends object, M = void>(
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
+        ephemeralUserData,
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
         onChangeConnectedUsers: (users, userId) =>
           trackConnectedUsersCallbackRef.current?.(users, userId),
         onChangeTasks: (tasks) => trackTasksCallbackRef.current?.(tasks),
       });
     }
-  }, [multiplayerStateManager]);
+  }, [ephemeralUserData, multiplayerStateManager]);
 
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
 
@@ -250,6 +267,7 @@ export function useMultiplayerState<S extends object, M = void>(
   }, [initialState, multiplayerStateManager, options?.schema]);
 
   useStateInspector({
+    ephemeralUserData,
     multiplayerStateManager,
     state,
     connectionEvents,

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from "@noya-app/state-manager";
+export * from "./avatarStyle";
+export * from "./components/UserPointersOverlay";
 export * from "./hooks";
 export * from "./inspector/StateInspector";

package/src/inspector/StateInspector.tsx

@@ -2,6 +2,7 @@
 
 import {
   ConnectionEvent,
+  EphemeralUserData,
   ExtendedPathKey,
   MultiplayerStateManager,
   MultiplayerUser,
@@ -24,7 +25,7 @@ import {
   chromeLight,
 } from "react-inspector";
 import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
-import { useManagedHistory } from "../hooks";
+import { useEphemeralUserData, useManagedHistory } from "../hooks";
 import { useLocalStorageState } from "./useLocalStorageState";
 
 const lightTheme = {
@@ -242,6 +243,7 @@ type Anchor = "left" | "right" | "bottom left" | "bottom right";
 export const StateInspector = memo(function StateInspector<
   S extends object,
   M,
+  E,
 >({
   state,
   connectionEvents,
@@ -251,6 +253,7 @@ export const StateInspector = memo(function StateInspector<
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
+  ephemeralUserData,
   anchor = "right",
   forceInit,
   ...props
@@ -263,6 +266,7 @@ export const StateInspector = memo(function StateInspector<
   unstyled?: boolean;
   colorScheme?: "light" | "dark";
   multiplayerStateManager: MultiplayerStateManager<S, M>;
+  ephemeralUserData: EphemeralUserData<E>;
   anchor?: Anchor;
   forceInit: () => void;
 } & ComponentPropsWithoutRef<"div">) {
@@ -299,6 +303,10 @@ export const StateInspector = memo(function StateInspector<
     "noya-multiplayer-react-show-tasks",
     false
   );
+  const [showEphemeral, setShowEphemeral] = useLocalStorageState(
+    "noya-multiplayer-react-show-ephemeral",
+    false
+  );
 
   useEffect(() => {
     shouldTrackEvents$.set(showEvents);
@@ -315,6 +323,7 @@ export const StateInspector = memo(function StateInspector<
     }
   }, [connectionEvents]);
 
+  const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
 
   useEffect(() => {
@@ -668,6 +677,25 @@ export const StateInspector = memo(function StateInspector<
           ))}
         </div>
       </DisclosureSection>
+      <DisclosureSection
+        open={showEphemeral}
+        setOpen={setShowEphemeral}
+        title="Ephemeral User Data"
+        colorScheme={colorScheme}
+      >
+        <div style={styles.sectionInner}>
+          {Object.entries(ephemeral).map(([key, value]) => (
+            <InspectorRow key={key} colorScheme={colorScheme}>
+              <ObjectInspector
+                name={key}
+                data={value}
+                theme={theme}
+                expandLevel={10}
+              />
+            </InspectorRow>
+          ))}
+        </div>
+      </DisclosureSection>
       <DisclosureSection
         open={showEvents}
         setOpen={setShowEvents}

package/src/inspector/useStateInspector.tsx

@@ -2,6 +2,7 @@
 
 import {
   ConnectionEvent,
+  EphemeralUserData,
   MultiplayerStateManager,
   MultiplayerUser,
   Task,
@@ -18,7 +19,7 @@ function createPortalElement() {
   return el;
 }
 
-export function useStateInspector<S extends object, M>({
+export function useStateInspector<S extends object, M, E>({
   state,
   connectionEvents,
   connectedUsers,
@@ -28,6 +29,7 @@ export function useStateInspector<S extends object, M>({
   colorScheme,
   anchor,
   multiplayerStateManager,
+  ephemeralUserData,
   forceInit,
 }: {
   state: S;
@@ -37,6 +39,7 @@ export function useStateInspector<S extends object, M>({
   userId?: string;
   disabled: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
+  ephemeralUserData: EphemeralUserData<E>;
   forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
@@ -73,6 +76,7 @@ export function useStateInspector<S extends object, M>({
         multiplayerStateManager={
           multiplayerStateManager as MultiplayerStateManager<any, any>
         }
+        ephemeralUserData={ephemeralUserData as EphemeralUserData<any>}
       />
     );
   }, [
@@ -86,5 +90,6 @@ export function useStateInspector<S extends object, M>({
     userId,
     tasks,
     forceInit,
+    ephemeralUserData,
   ]);
 }

package/src/useObservable.ts

@@ -0,0 +1,25 @@
+import { GetWithPath, Observable, PathKey } from "@noya-app/observable";
+import { useMemo, useSyncExternalStore } from "react";
+
+export function useObservable<T>(observable: Observable<T>): T;
+export function useObservable<T, P extends PathKey[]>(
+  observable: Observable<T>,
+  path: P
+): GetWithPath<T, P>;
+export function useObservable<T, P extends PathKey[]>(
+  observable: Observable<T>,
+  path?: P
+) {
+  const { get, listen } = useMemo(() => {
+    const listen = path
+      ? (callback: (value: GetWithPath<T, P>) => void) =>
+          observable.listen(path, callback)
+      : observable.listen;
+
+    const get: () => void = path ? () => observable.get(path) : observable.get;
+
+    return { get, listen };
+  }, [observable, path]);
+
+  return useSyncExternalStore(listen, get, get);
+}