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

package/dist/index.mjs

@@ -46,7 +46,8 @@ function useObservable(observable) {
   }, [observable]);
   return value;
 }
-var trackEvents = new Observable(false);
+var shouldTrackEvents$ = new Observable(false);
+var shouldTrackTasks$ = new Observable(false);
 
 // src/inspector/useStateInspector.tsx
 import React3, { useLayoutEffect as useLayoutEffect2 } from "react";
@@ -101,6 +102,15 @@ var darkTheme = {
   BASE_BACKGROUND_COLOR: "transparent",
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
 };
+var styles = {
+  sectionInner: {
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  }
+};
 function ToggleButton({
   showInspector,
   setShowInspector,
@@ -123,7 +133,10 @@ function ToggleButton({
         justifyContent: "center",
         padding: "2px 0"
       },
-      onClick: () => setShowInspector(!showInspector)
+      onClick: (event) => {
+        event.stopPropagation();
+        setShowInspector(!showInspector);
+      }
     },
     /* @__PURE__ */ React2.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector === (anchor === "right") ? /* @__PURE__ */ React2.createElement(
       "svg",
@@ -171,7 +184,8 @@ function DisclosureSection({
   right,
   children,
   colorScheme,
-  isFirst
+  isFirst,
+  style
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
   const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
@@ -181,7 +195,8 @@ function DisclosureSection({
       style: {
         flex: open ? "1 1 0" : "0",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        ...style
       }
     },
     /* @__PURE__ */ React2.createElement(
@@ -209,19 +224,62 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ React2.createElement("span", { style: { flex: "1 1 0" } }, title),
+      /* @__PURE__ */ React2.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
   );
 }
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant
+}) {
+  const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        padding: "2px 12px 1px",
+        display: "flex",
+        alignItems: "center",
+        background: variant === "up" ? "rgba(0,255,0,0.1)" : variant === "down" ? "rgba(255,0,0,0.1)" : selected ? "rgb(59 130 246 / 15%)" : void 0,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        style: {
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block"
+        }
+      },
+      children
+    )
+  );
+}
 var HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
 var StateInspector = memo(function StateInspector2({
   state,
   connectionEvents,
+  connectedUsers,
+  tasks,
+  userId,
   unstyled,
   colorScheme = "light",
-  stateManager,
+  multiplayerStateManager,
   anchor = "right",
   ...props
 }) {
@@ -243,15 +301,30 @@ var StateInspector = memo(function StateInspector2({
     "noya-multiplayer-react-show-history",
     false
   );
+  const [showUsers, setShowUsers] = useLocalStorageState(
+    "noya-multiplayer-react-show-users",
+    true
+  );
+  const [showData, setShowData] = useLocalStorageState(
+    "noya-multiplayer-react-show-data",
+    true
+  );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
   useEffect2(() => {
-    trackEvents.set(showEvents);
+    shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
+  useEffect2(() => {
+    shouldTrackTasks$.set(showTasks);
+  }, [showTasks]);
   useEffect2(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
-  const historySnapshot = useManagedHistory(stateManager);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   useEffect2(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
@@ -271,12 +344,11 @@ var StateInspector = memo(function StateInspector2({
     }
   }, [historySnapshot.historyIndex]);
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
-  const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
   const solidBorderColor = colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
   const baseStyle = {
     position: "fixed",
     top: 12,
-    ...anchor === "right" ? { right: 12 } : { left: 12 },
+    ...anchor.includes("right") ? { right: 12 } : { left: 12 },
     bottom: 12,
     width: 400,
     background: colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
@@ -302,8 +374,8 @@ var StateInspector = memo(function StateInspector2({
         style: {
           ...baseStyle,
           padding: "4px 10px",
-          bottom: void 0,
-          width: void 0
+          width: void 0,
+          ...anchor.includes("bottom") ? { bottom: 12, top: void 0 } : { bottom: void 0 }
         },
         onClick: () => setShowInspector(true)
       },
@@ -330,10 +402,15 @@ var StateInspector = memo(function StateInspector2({
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
       {
-        open: true,
-        title: "Data",
-        colorScheme,
         isFirst: true,
+        open: showUsers,
+        setOpen: setShowUsers,
+        title: "Users",
+        colorScheme,
+        style: {
+          flex: "0 0 auto",
+          maxHeight: "200px"
+        },
         right: /* @__PURE__ */ React2.createElement(
           ToggleButton,
           {
@@ -344,20 +421,54 @@ var StateInspector = memo(function StateInspector2({
           }
         )
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React2.createElement("div", { style: { ...styles.sectionInner, flex: "0 0 auto" } }, connectedUsers?.map((user) => /* @__PURE__ */ React2.createElement(
+        InspectorRow,
+        {
+          key: user.id,
+          colorScheme,
+          variant: user.id === userId ? "up" : void 0
+        },
+        user.name,
+        " (",
+        ellipsis(user.id.toString(), 8, "middle"),
+        ")"
+      )), !connectedUsers && /* @__PURE__ */ React2.createElement(
         "div",
         {
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
+            padding: "12px",
+            fontSize: "12px",
             display: "flex",
             flexDirection: "column",
-            gap: "1px",
-            padding: "1px 12px"
+            gap: "4px"
           }
         },
-        /* @__PURE__ */ React2.createElement(ObjectInspector, { data: state, theme })
-      )
+        /* @__PURE__ */ React2.createElement("span", null, "No connected users")
+      ))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        title: "Data",
+        colorScheme,
+        setOpen: setShowData,
+        open: showData
+      },
+      /* @__PURE__ */ React2.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React2.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React2.createElement(
+        ObjectInspector,
+        {
+          name: multiplayerStateManager.sm.schema ? "state" : void 0,
+          data: state,
+          theme
+        }
+      )), multiplayerStateManager.sm.schema && /* @__PURE__ */ React2.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React2.createElement(
+        ObjectInspector,
+        {
+          name: "schema",
+          data: multiplayerStateManager.sm.schema,
+          theme
+        }
+      )))
     ),
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
@@ -367,173 +478,144 @@ var StateInspector = memo(function StateInspector2({
         title: "History",
         colorScheme
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React2.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React2.createElement(
         "div",
         {
-          ref: historyContainerRef,
+          id: `${HISTORY_ELEMENT_PREFIX}0`,
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            overflowX: "hidden",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
             display: "flex",
-            flexDirection: "column"
+            alignItems: "center",
+            background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
         /* @__PURE__ */ React2.createElement(
-          "div",
+          "span",
           {
-            id: `${HISTORY_ELEMENT_PREFIX}0`,
             style: {
-              borderBottom: `1px solid ${solidBorderColor}`,
-              fontSize: "12px",
               fontFamily: "Menlo, monospace",
-              padding: "2px 12px 1px",
-              display: "flex",
-              alignItems: "center",
-              background: historySnapshot.historyIndex === 0 ? "rgb(59 130 246 / 15%)" : void 0
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block"
             }
           },
-          /* @__PURE__ */ React2.createElement(
-            "span",
-            {
-              style: {
-                fontFamily: "Menlo, monospace",
-                fontSize: "11px",
-                borderRadius: 4,
-                display: "inline-block"
-              }
-            },
-            "Initial state"
-          )
-        ),
-        historySnapshot.history.map((entry, index) => /* @__PURE__ */ React2.createElement(
-          "div",
+          "Initial state"
+        )
+      ), historySnapshot.history.map((entry, index) => /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
+          key: index,
+          style: {
+            padding: "0px 12px 1px",
+            borderBottom: `1px solid ${solidBorderColor}`,
+            background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+          }
+        },
+        entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React2.createElement(
+          "pre",
           {
-            id: `${HISTORY_ELEMENT_PREFIX}${index + 1}`,
-            key: index,
+            key: j,
             style: {
-              padding: "0px 12px 1px",
-              borderBottom: `1px solid ${solidBorderColor}`,
-              background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
             }
           },
-          entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React2.createElement(
-            "pre",
-            {
-              key: j,
-              style: {
-                fontSize: "11px",
-                display: "flex",
-                flexWrap: "wrap"
-              }
-            },
-            patch.op === "add" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
-            patch.op === "replace" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
-            patch.op === "remove" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
-          ))
+          patch.op === "add" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "replace" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ React2.createElement(ObjectInspector, { data: patch.value, theme })),
+          patch.op === "remove" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { style: { color: theme.OBJECT_VALUE_STRING_COLOR } }, "delete", " "), /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)))
         ))
-      )
+      )))
     ),
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
       {
-        open: showEvents,
-        setOpen: setShowEvents,
-        title: "Events",
-        colorScheme
+        title: "Tasks",
+        colorScheme,
+        open: showTasks,
+        setOpen: setShowTasks
       },
-      /* @__PURE__ */ React2.createElement(
-        "div",
+      /* @__PURE__ */ React2.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React2.createElement(
+        InspectorRow,
         {
-          ref: eventsContainerRef,
+          key: task.id,
+          colorScheme,
           style: {
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column"
+            backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
           }
         },
-        connectionEvents?.map((event, index) => /* @__PURE__ */ React2.createElement(
-          "div",
+        /* @__PURE__ */ React2.createElement(
+          ObjectInspector,
+          {
+            name: task.name,
+            data: task.payload,
+            theme
+          }
+        )
+      )))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        open: showEvents,
+        setOpen: setShowEvents,
+        title: "Events",
+        colorScheme
+      },
+      /* @__PURE__ */ React2.createElement("div", { ref: eventsContainerRef, style: styles.sectionInner }, connectionEvents?.map(
+        (event, index) => event.type === "stateChange" ? /* @__PURE__ */ React2.createElement(InspectorRow, { key: index, colorScheme }, "connection:", " ", /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())) : /* @__PURE__ */ React2.createElement(
+          InspectorRow,
           {
             key: index,
+            colorScheme,
+            variant: event.type === "send" ? "up" : "down",
             style: {
-              borderBottom: `1px solid ${borderColor}`
+              padding: "0px 12px 1px"
             }
           },
-          event.type === "stateChange" ? /* @__PURE__ */ React2.createElement(
-            "div",
-            {
-              style: {
-                padding: "2px 12px",
-                background: colorScheme === "light" ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
-                display: "flex",
-                alignItems: "center"
-              }
-            },
-            /* @__PURE__ */ React2.createElement(
-              "span",
-              {
-                style: {
-                  fontFamily: "Menlo, monospace",
-                  fontSize: "11px",
-                  borderRadius: 4,
-                  display: "inline-block"
-                }
-              },
-              "connection:",
-              " ",
-              /* @__PURE__ */ React2.createElement("span", { style: { fontStyle: "italic" } }, event.state.toLowerCase())
-            )
-          ) : /* @__PURE__ */ React2.createElement(
-            "div",
+          /* @__PURE__ */ React2.createElement(
+            ObjectInspector,
             {
-              style: {
-                padding: "0px 12px 1px",
-                background: event.type === "send" ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)"
-              }
-            },
-            /* @__PURE__ */ React2.createElement(
-              ObjectInspector,
-              {
-                data: event.message,
-                theme,
-                nodeRenderer: ({
-                  depth,
-                  name,
-                  data,
-                  isNonenumerable,
-                  expanded
-                }) => {
-                  const direction = event.type === "send" ? "up" : "down";
-                  return depth === 0 ? /* @__PURE__ */ React2.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React2.createElement(
-                    ObjectLabel,
-                    {
-                      direction,
-                      name,
-                      data,
-                      isNonenumerable
-                    }
-                  );
-                }
+              data: event.message,
+              theme,
+              nodeRenderer: ({
+                depth,
+                name,
+                data,
+                isNonenumerable,
+                expanded
+              }) => {
+                const direction = event.type === "send" ? "up" : "down";
+                return depth === 0 ? /* @__PURE__ */ React2.createElement(ObjectRootLabel, { direction, data }) : /* @__PURE__ */ React2.createElement(
+                  ObjectLabel,
+                  {
+                    direction,
+                    name,
+                    data,
+                    isNonenumerable
+                  }
+                );
               }
-            )
-          )
-        )),
-        !connectionEvents && /* @__PURE__ */ React2.createElement(
-          "div",
-          {
-            style: {
-              padding: "12px",
-              fontSize: "12px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "4px"
             }
-          },
-          /* @__PURE__ */ React2.createElement("span", null, "No recorded events")
+          )
         )
-      )
+      ), !connectionEvents && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            fontSize: "12px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px"
+          }
+        },
+        /* @__PURE__ */ React2.createElement("span", null, "No recorded events")
+      ))
     )
   );
 });
@@ -616,10 +698,13 @@ function createPortalElement() {
 function useStateInspector({
   state,
   connectionEvents,
+  connectedUsers,
+  tasks,
+  userId,
   disabled = false,
   colorScheme,
   anchor,
-  stateManager
+  multiplayerStateManager
 }) {
   const [root, setRoot] = React3.useState(null);
   useLayoutEffect2(() => {
@@ -642,13 +727,26 @@ function useStateInspector({
         {
           state,
           connectionEvents,
+          connectedUsers,
+          tasks,
+          userId,
           colorScheme,
           anchor,
-          stateManager
+          multiplayerStateManager
         }
       )
     );
-  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
+  }, [
+    anchor,
+    colorScheme,
+    connectedUsers,
+    connectionEvents,
+    root,
+    state,
+    multiplayerStateManager,
+    userId,
+    tasks
+  ]);
 }
 
 // src/hooks.ts
@@ -719,45 +817,80 @@ function useSyncMultiplayerStateManager(multiplayerStateManager) {
 }
 var defaultStubSync = stubSync();
 function useMultiplayerState(initialState, options) {
-  const { sync = defaultStubSync, ...rest } = options;
+  const { sync = defaultStubSync, ...rest } = options ?? {};
   const [multiplayerStateManager] = useState2(
     () => new MultiplayerStateManager(initialState, rest)
   );
   const syncRef = useRef(sync);
   const [connectionEvents, setConnectionEvents] = useState2();
+  const [connectedUsers, setConnectedUsers] = useState2([]);
+  const [tasks, setTasks] = useState2([]);
+  const [userId, setUserId] = useState2();
   const extras = useMemo(() => {
     return {
-      connectionEvents
+      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]);
-  const globalTrackEvents = useObservable(trackEvents);
-  const trackConnectionEvents = options.trackConnectionEvents ?? globalTrackEvents;
+  }, [tasks, connectionEvents, connectedUsers]);
+  const globalTrackEvents = useObservable(shouldTrackEvents$);
+  const globalTrackTasks = useObservable(shouldTrackTasks$);
+  const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
+  const shouldTrackTasks = options?.trackTasks ?? globalTrackTasks;
   const trackEventsCallbackRef = useRef();
+  const trackConnectedUsersCallbackRef = useRef();
+  const trackTasksCallbackRef = useRef();
   useEffect3(() => {
-    trackEventsCallbackRef.current = trackConnectionEvents ? (e) => setConnectionEvents((events) => {
+    trackEventsCallbackRef.current = shouldTrackEvents ? (e) => setConnectionEvents((events) => {
       const updated = events ? [...events, e] : [e];
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
-  }, [trackConnectionEvents]);
+  }, [shouldTrackEvents]);
+  useEffect3(() => {
+    trackConnectedUsersCallbackRef.current = (users, userId2) => {
+      setConnectedUsers(users);
+      setUserId(userId2);
+    };
+  }, []);
+  useEffect3(() => {
+    trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
+      setTasks((old) => {
+        const newIds = new Set(tasks2.map((t) => t.id));
+        const unchanged = old.filter((t) => !newIds.has(t.id));
+        return [...unchanged, ...tasks2];
+      });
+    } : void 0;
+  }, [shouldTrackTasks]);
   useEffect3(() => {
     if (syncRef.current) {
-      return syncRef.current(
-        multiplayerStateManager,
-        (e) => trackEventsCallbackRef.current?.(e)
-      );
+      return syncRef.current({
+        ms: multiplayerStateManager,
+        onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
+        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2),
+        onChangeTasks: (tasks2) => trackTasksCallbackRef.current?.(tasks2)
+      });
     }
   }, [multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
   useStateInspector({
-    stateManager: multiplayerStateManager.sm,
+    multiplayerStateManager,
     state,
     connectionEvents,
-    disabled: !options.inspector,
-    ...typeof options.inspector === "object" && options.inspector
+    connectedUsers,
+    tasks,
+    userId,
+    disabled: !options?.inspector,
+    ...typeof options?.inspector === "object" && options.inspector
   });
   return [
     state,
-    multiplayerStateManager.setOptimisticState,
+    multiplayerStateManager.setState,
     multiplayerStateManager,
     extras
   ];