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

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";
@@ -223,7 +224,7 @@ 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
@@ -274,11 +275,13 @@ var StateInspector = memo(function StateInspector2({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   unstyled,
   colorScheme = "light",
-  stateManager,
+  multiplayerStateManager,
   anchor = "right",
+  forceInit,
   ...props
 }) {
   const [didMount, setDidMount] = React2.useState(false);
@@ -307,15 +310,22 @@ var StateInspector = memo(function StateInspector2({
     "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;
@@ -339,7 +349,7 @@ var StateInspector = memo(function StateInspector2({
   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)",
@@ -365,8 +375,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)
       },
@@ -443,19 +453,42 @@ var StateInspector = memo(function StateInspector2({
         title: "Data",
         colorScheme,
         setOpen: setShowData,
-        open: showData
+        open: showData,
+        right: /* @__PURE__ */ React2.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            SmallButton,
+            {
+              theme,
+              onClick: () => {
+                forceInit();
+              }
+            },
+            "Reset"
+          )
+        )
       },
-      /* @__PURE__ */ React2.createElement(
-        "div",
+      /* @__PURE__ */ React2.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ React2.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ React2.createElement(
+        ObjectInspector,
         {
-          style: {
-            ...styles.sectionInner,
-            gap: "1px",
-            padding: "1px 12px"
-          }
-        },
-        /* @__PURE__ */ React2.createElement(ObjectInspector, { data: state, theme })
-      )
+          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,
@@ -463,7 +496,68 @@ var StateInspector = memo(function StateInspector2({
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
-        colorScheme
+        colorScheme,
+        right: /* @__PURE__ */ React2.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canUndo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.sm.undo();
+              }
+            },
+            /* @__PURE__ */ React2.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React2.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ React2.createElement(
+                "path",
+                {
+                  fill: "currentColor",
+                  d: "M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                }
+              )
+            ))
+          ),
+          /* @__PURE__ */ React2.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canRedo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.sm.redo();
+              }
+            },
+            /* @__PURE__ */ React2.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ React2.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ React2.createElement(
+                "path",
+                {
+                  fill: "currentColor",
+                  d: "M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                }
+              )
+            ))
+          )
+        )
       },
       /* @__PURE__ */ React2.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ React2.createElement(
         "div",
@@ -518,6 +612,33 @@ var StateInspector = memo(function StateInspector2({
         ))
       )))
     ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        title: "Tasks",
+        colorScheme,
+        open: showTasks,
+        setOpen: setShowTasks
+      },
+      /* @__PURE__ */ React2.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ React2.createElement(
+        InspectorRow,
+        {
+          key: task.id,
+          colorScheme,
+          style: {
+            backgroundColor: task.status === "done" ? "rgba(0,255,0,0.2)" : task.status === "error" ? "rgba(255,0,0,0.2)" : void 0
+          }
+        },
+        /* @__PURE__ */ React2.createElement(
+          ObjectInspector,
+          {
+            name: task.name,
+            data: task.payload,
+            theme
+          }
+        )
+      )))
+    ),
     /* @__PURE__ */ React2.createElement(
       DisclosureSection,
       {
@@ -648,6 +769,42 @@ function ellipsis(str, maxLength, position = "end") {
       return `${str.slice(0, maxLength)}\u2026`;
   }
 }
+function SmallButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      style: {
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+        cursor: "pointer",
+        ...style
+      }
+    },
+    children
+  );
+}
 
 // src/inspector/useStateInspector.tsx
 function createPortalElement() {
@@ -659,11 +816,13 @@ function useStateInspector({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   disabled = false,
   colorScheme,
   anchor,
-  stateManager
+  multiplayerStateManager,
+  forceInit
 }) {
   const [root, setRoot] = React3.useState(null);
   useLayoutEffect2(() => {
@@ -687,10 +846,12 @@ function useStateInspector({
           state,
           connectionEvents,
           connectedUsers,
+          tasks,
           userId,
           colorScheme,
           anchor,
-          stateManager
+          forceInit,
+          multiplayerStateManager
         }
       )
     );
@@ -701,8 +862,10 @@ function useStateInspector({
     connectionEvents,
     root,
     state,
-    stateManager,
-    userId
+    multiplayerStateManager,
+    userId,
+    tasks,
+    forceInit
   ]);
 }
 
@@ -774,58 +937,87 @@ 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 {
+      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]);
-  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({
         ms: multiplayerStateManager,
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
-        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2)
+        onChangeConnectedUsers: (users, userId2) => trackConnectedUsersCallbackRef.current?.(users, userId2),
+        onChangeTasks: (tasks2) => trackTasksCallbackRef.current?.(tasks2)
       });
     }
   }, [multiplayerStateManager]);
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
+  const forceInit = useCallback(() => {
+    const state2 = typeof initialState === "function" ? initialState() : initialState;
+    const schema = options?.schema;
+    multiplayerStateManager.sm.clearHistory();
+    multiplayerStateManager.sendInit({ force: true, state: state2, schema });
+  }, [initialState, multiplayerStateManager, options?.schema]);
   useStateInspector({
-    stateManager: multiplayerStateManager.sm,
+    multiplayerStateManager,
     state,
     connectionEvents,
     connectedUsers,
+    tasks,
     userId,
-    disabled: !options.inspector,
-    ...typeof options.inspector === "object" && options.inspector
+    forceInit,
+    disabled: !options?.inspector,
+    ...typeof options?.inspector === "object" && options.inspector
   });
   return [
     state,
-    multiplayerStateManager.setOptimisticState,
+    multiplayerStateManager.setState,
     multiplayerStateManager,
     extras
   ];