@noya-app/noya-multiplayer-react 0.1.12 → 0.1.13

package/src/hooks.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   ActionHandler,
   ConnectionEvent,
@@ -8,6 +10,7 @@ import {
   StateManager,
   StateManagerOptions,
   SyncAdapter,
+  Task,
   stubSync,
 } from "@noya-app/state-manager";
 import {
@@ -20,7 +23,11 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import { trackEvents, useObservable } from "./globals";
+import {
+  shouldTrackEvents$,
+  shouldTrackTasks$,
+  useObservable,
+} from "./globals";
 import { StateInspector } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
 
@@ -134,21 +141,21 @@ const defaultStubSync = stubSync();
 
 export function useMultiplayerState<S extends object, M = void>(
   initialState: S | (() => S),
-  options: MultiplayerStateManagerOptions<S, M> & {
+  options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: { ms: MultiplayerStateManager<S, M> }) => void;
     trackConnectionEvents?: boolean;
+    trackTasks?: boolean;
     inspector?:
       | boolean
       | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
   }
 ) {
   const { sync = defaultStubSync as unknown as SyncAdapter<S, M>, ...rest } =
-    options;
+    options ?? {};
 
   const [multiplayerStateManager] = useState(
     () => new MultiplayerStateManager<S, M>(initialState, rest)
   );
-
   const syncRef = useRef(sync);
 
   const [connectionEvents, setConnectionEvents] = useState<
@@ -156,43 +163,69 @@ export function useMultiplayerState<S extends object, M = void>(
   >();
 
   const [connectedUsers, setConnectedUsers] = useState<MultiplayerUser[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [userId, setUserId] = useState<string | undefined>();
 
   const extras = useMemo(() => {
     return {
+      tasks,
       connectionEvents,
       connectedUsers,
+      // evaluate: async (code: string) => {
+      //   const payload = await rpcManager.request({ type: "eval", code });
+
+      //   if (payload.type !== "eval") {
+      //     throw new Error(`Unexpected rpc response type: ${payload.type}`);
+      //   }
+      // },
     };
-  }, [connectionEvents, connectedUsers]);
+  }, [tasks, connectionEvents, connectedUsers]);
 
-  const globalTrackEvents = useObservable(trackEvents);
-  const trackConnectionEvents =
-    options.trackConnectionEvents ?? globalTrackEvents;
+  const globalTrackEvents = useObservable(shouldTrackEvents$);
+  const globalTrackTasks = useObservable(shouldTrackTasks$);
+
+  const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
+  const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
 
   const trackEventsCallbackRef = useRef<
     ((e: ConnectionEvent<S>) => void) | undefined
   >();
-
   const trackConnectedUsersCallbackRef = useRef<
     ((users: MultiplayerUser[], userId: string) => void) | undefined
   >();
+  const trackTasksCallbackRef = useRef<((tasks: Task[]) => void) | undefined>();
 
   useEffect(() => {
-    trackEventsCallbackRef.current = trackConnectionEvents
+    trackEventsCallbackRef.current = shouldTrackEvents
       ? (e) =>
           setConnectionEvents((events) => {
             const updated = events ? [...events, e] : [e];
             return updated.length > 50 ? updated.slice(-50) : updated;
           })
       : undefined;
-  }, [trackConnectionEvents]);
+  }, [shouldTrackEvents]);
 
   useEffect(() => {
     trackConnectedUsersCallbackRef.current = (users, userId) => {
       setConnectedUsers(users);
       setUserId(userId);
     };
-  });
+  }, []);
+
+  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]);
 
   useEffect(() => {
     if (syncRef.current) {
@@ -201,6 +234,7 @@ export function useMultiplayerState<S extends object, M = void>(
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
         onChangeConnectedUsers: (users, userId) =>
           trackConnectedUsersCallbackRef.current?.(users, userId),
+        onChangeTasks: (tasks) => trackTasksCallbackRef.current?.(tasks),
       });
     }
   }, [multiplayerStateManager]);
@@ -208,18 +242,19 @@ export function useMultiplayerState<S extends object, M = void>(
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
 
   useStateInspector({
-    stateManager: multiplayerStateManager.sm,
+    multiplayerStateManager,
     state,
     connectionEvents,
     connectedUsers,
+    tasks,
     userId,
-    disabled: !options.inspector,
-    ...(typeof options.inspector === "object" && options.inspector),
+    disabled: !options?.inspector,
+    ...(typeof options?.inspector === "object" && options.inspector),
   });
 
   return [
     state,
-    multiplayerStateManager.setOptimisticState,
+    multiplayerStateManager.setState,
     multiplayerStateManager,
     extras,
   ] as const;

package/src/inspector/StateInspector.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import {
   ConnectionEvent,
   ExtendedPathKey,
+  MultiplayerStateManager,
   MultiplayerUser,
-  StateManager,
+  Task,
 } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
@@ -20,7 +23,7 @@ import {
   chromeDark,
   chromeLight,
 } from "react-inspector";
-import { trackEvents } from "../globals";
+import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
 import { useManagedHistory } from "../hooks";
 import { useLocalStorageState } from "./useLocalStorageState";
 
@@ -170,7 +173,7 @@ function DisclosureSection({
             }}
           />
         )}
-        <span style={{ flex: "1 1 0" }}>{title}</span>
+        <span style={{ flex: "1 1 0", userSelect: "none" }}>{title}</span>
         {right}
       </div>
       {open && children}
@@ -234,7 +237,7 @@ function InspectorRow({
 
 const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 
-type Anchor = "left" | "right";
+type Anchor = "left" | "right" | "bottom left" | "bottom right";
 
 export const StateInspector = memo(function StateInspector<
   S extends object,
@@ -243,20 +246,22 @@ export const StateInspector = memo(function StateInspector<
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   unstyled,
   colorScheme = "light",
-  stateManager,
+  multiplayerStateManager,
   anchor = "right",
   ...props
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
   connectedUsers?: MultiplayerUser[];
+  tasks?: Task[];
   userId?: string;
   unstyled?: boolean;
   colorScheme?: "light" | "dark";
-  stateManager: StateManager<S, M>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
   anchor?: Anchor;
 } & ComponentPropsWithoutRef<"div">) {
   const [didMount, setDidMount] = React.useState(false);
@@ -288,11 +293,19 @@ export const StateInspector = memo(function StateInspector<
     "noya-multiplayer-react-show-data",
     true
   );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
 
   useEffect(() => {
-    trackEvents.set(showEvents);
+    shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
 
+  useEffect(() => {
+    shouldTrackTasks$.set(showTasks);
+  }, [showTasks]);
+
   useEffect(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop =
@@ -300,7 +313,7 @@ export const StateInspector = memo(function StateInspector<
     }
   }, [connectionEvents]);
 
-  const historySnapshot = useManagedHistory(stateManager);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -334,7 +347,7 @@ export const StateInspector = memo(function StateInspector<
   const baseStyle: CSSProperties = {
     position: "fixed",
     top: 12,
-    ...(anchor === "right" ? { right: 12 } : { left: 12 }),
+    ...(anchor.includes("right") ? { right: 12 } : { left: 12 }),
     bottom: 12,
     width: 400,
     background:
@@ -361,8 +374,10 @@ export const StateInspector = memo(function StateInspector<
         style={{
           ...baseStyle,
           padding: "4px 10px",
-          bottom: undefined,
           width: undefined,
+          ...(anchor.includes("bottom")
+            ? { bottom: 12, top: undefined }
+            : { bottom: undefined }),
         }}
         onClick={() => setShowInspector(true)}
       >
@@ -434,14 +449,23 @@ export const StateInspector = memo(function StateInspector<
         setOpen={setShowData}
         open={showData}
       >
-        <div
-          style={{
-            ...styles.sectionInner,
-            gap: "1px",
-            padding: "1px 12px",
-          }}
-        >
-          <ObjectInspector data={state} theme={theme} />
+        <div style={styles.sectionInner}>
+          <InspectorRow colorScheme={colorScheme}>
+            <ObjectInspector
+              name={multiplayerStateManager.sm.schema ? "state" : undefined}
+              data={state}
+              theme={theme}
+            />
+          </InspectorRow>
+          {multiplayerStateManager.sm.schema && (
+            <InspectorRow colorScheme={colorScheme}>
+              <ObjectInspector
+                name="schema"
+                data={multiplayerStateManager.sm.schema}
+                theme={theme}
+              />
+            </InspectorRow>
+          )}
         </div>
       </DisclosureSection>
       <DisclosureSection
@@ -533,6 +557,35 @@ export const StateInspector = memo(function StateInspector<
           ))}
         </div>
       </DisclosureSection>
+      <DisclosureSection
+        title="Tasks"
+        colorScheme={colorScheme}
+        open={showTasks}
+        setOpen={setShowTasks}
+      >
+        <div style={styles.sectionInner}>
+          {tasks?.map((task) => (
+            <InspectorRow
+              key={task.id}
+              colorScheme={colorScheme}
+              style={{
+                backgroundColor:
+                  task.status === "done"
+                    ? "rgba(0,255,0,0.2)"
+                    : task.status === "error"
+                      ? "rgba(255,0,0,0.2)"
+                      : undefined,
+              }}
+            >
+              <ObjectInspector
+                name={task.name}
+                data={task.payload}
+                theme={theme}
+              />
+            </InspectorRow>
+          ))}
+        </div>
+      </DisclosureSection>
       <DisclosureSection
         open={showEvents}
         setOpen={setShowEvents}

package/src/inspector/useLocalStorageState.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 const localStorage = typeof window !== "undefined" ? window.localStorage : null;

package/src/inspector/useStateInspector.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import {
   ConnectionEvent,
+  MultiplayerStateManager,
   MultiplayerUser,
-  StateManager,
+  Task,
 } from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
@@ -19,18 +22,20 @@ export function useStateInspector<S extends object, M>({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   disabled = false,
   colorScheme,
   anchor,
-  stateManager,
+  multiplayerStateManager,
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
   connectedUsers?: MultiplayerUser[];
+  tasks?: Task[];
   userId?: string;
   disabled: boolean;
-  stateManager: StateManager<S, M>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
@@ -58,10 +63,13 @@ export function useStateInspector<S extends object, M>({
         state={state}
         connectionEvents={connectionEvents}
         connectedUsers={connectedUsers}
+        tasks={tasks}
         userId={userId}
         colorScheme={colorScheme}
         anchor={anchor}
-        stateManager={stateManager as StateManager<any, any>}
+        multiplayerStateManager={
+          multiplayerStateManager as MultiplayerStateManager<any, any>
+        }
       />
     );
   }, [
@@ -71,7 +79,8 @@ export function useStateInspector<S extends object, M>({
     connectionEvents,
     root,
     state,
-    stateManager,
+    multiplayerStateManager,
     userId,
+    tasks,
   ]);
 }