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

package/src/inspector/StateInspector.tsx

@@ -1,7 +1,11 @@
+"use client";
+
 import {
   ConnectionEvent,
   ExtendedPathKey,
-  StateManager,
+  MultiplayerStateManager,
+  MultiplayerUser,
+  Task,
 } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
@@ -19,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";
 
@@ -35,6 +39,16 @@ const darkTheme = {
   OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
 } as any;
 
+const styles = {
+  sectionInner: {
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column",
+  },
+} as const;
+
 function ToggleButton({
   showInspector,
   setShowInspector,
@@ -61,7 +75,11 @@ function ToggleButton({
         justifyContent: "center",
         padding: "2px 0",
       }}
-      onClick={() => setShowInspector(!showInspector)}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        setShowInspector(!showInspector);
+      }}
     >
       <span style={{ width: "12px", height: "12px" }}>
         {showInspector === (anchor === "right") ? (
@@ -108,6 +126,7 @@ function DisclosureSection({
   children,
   colorScheme,
   isFirst,
+  style,
 }: {
   open: boolean;
   setOpen?: (value: boolean) => void;
@@ -116,6 +135,7 @@ function DisclosureSection({
   children: React.ReactNode;
   colorScheme: "light" | "dark";
   isFirst?: boolean;
+  style?: CSSProperties;
 }) {
   const theme = colorScheme === "light" ? lightTheme : darkTheme;
 
@@ -128,6 +148,7 @@ function DisclosureSection({
         flex: open ? "1 1 0" : "0",
         display: "flex",
         flexDirection: "column",
+        ...style,
       }}
     >
       <div
@@ -152,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}
@@ -160,9 +181,63 @@ function DisclosureSection({
   );
 }
 
+function InspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant,
+}: {
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  selected?: boolean;
+  style?: CSSProperties;
+  variant?: "up" | "down";
+}) {
+  const solidBorderColor =
+    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+
+  return (
+    <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%)"
+                : undefined,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </span>
+    </div>
+  );
+}
+
 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,
@@ -170,17 +245,23 @@ 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);
@@ -204,11 +285,27 @@ export const StateInspector = memo(function StateInspector<
     "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
+  );
 
   useEffect(() => {
-    trackEvents.set(showEvents);
+    shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
 
+  useEffect(() => {
+    shouldTrackTasks$.set(showTasks);
+  }, [showTasks]);
+
   useEffect(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop =
@@ -216,7 +313,7 @@ export const StateInspector = memo(function StateInspector<
     }
   }, [connectionEvents]);
 
-  const historySnapshot = useManagedHistory(stateManager);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -242,15 +339,15 @@ export const StateInspector = memo(function StateInspector<
   }, [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 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: CSSProperties = {
     position: "fixed",
     top: 12,
-    ...(anchor === "right" ? { right: 12 } : { left: 12 }),
+    ...(anchor.includes("right") ? { right: 12 } : { left: 12 }),
     bottom: 12,
     width: 400,
     background:
@@ -277,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)}
       >
@@ -300,12 +399,16 @@ export const StateInspector = memo(function StateInspector<
         ...props.style,
       }}
     >
-      {/* <div style={{ flex: "0", fontSize: "12px" }}>User ID: {userId}</div> */}
       <DisclosureSection
-        open
-        title="Data"
-        colorScheme={colorScheme}
         isFirst
+        open={showUsers}
+        setOpen={setShowUsers}
+        title="Users"
+        colorScheme={colorScheme}
+        style={{
+          flex: "0 0 auto",
+          maxHeight: "200px",
+        }}
         right={
           <ToggleButton
             showInspector={showInspector}
@@ -315,17 +418,54 @@ export const StateInspector = memo(function StateInspector<
           />
         }
       >
-        <div
-          style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1px",
-            padding: "1px 12px",
-          }}
-        >
-          <ObjectInspector data={state} theme={theme} />
+        <div style={{ ...styles.sectionInner, flex: "0 0 auto" }}>
+          {connectedUsers?.map((user) => (
+            <InspectorRow
+              key={user.id}
+              colorScheme={colorScheme}
+              variant={user.id === userId ? "up" : undefined}
+            >
+              {user.name} ({ellipsis(user.id.toString(), 8, "middle")})
+            </InspectorRow>
+          ))}
+          {!connectedUsers && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No connected users</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        title="Data"
+        colorScheme={colorScheme}
+        setOpen={setShowData}
+        open={showData}
+      >
+        <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
@@ -334,16 +474,7 @@ export const StateInspector = memo(function StateInspector<
         title="History"
         colorScheme={colorScheme}
       >
-        <div
-          ref={historyContainerRef}
-          style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            overflowX: "hidden",
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
+        <div ref={historyContainerRef} style={styles.sectionInner}>
           <div
             id={`${HISTORY_ELEMENT_PREFIX}0`}
             style={{
@@ -427,91 +558,85 @@ export const StateInspector = memo(function StateInspector<
         </div>
       </DisclosureSection>
       <DisclosureSection
-        open={showEvents}
-        setOpen={setShowEvents}
-        title="Events"
+        title="Tasks"
         colorScheme={colorScheme}
+        open={showTasks}
+        setOpen={setShowTasks}
       >
-        <div
-          ref={eventsContainerRef}
-          style={{
-            flex: "1 1 0",
-            overflowY: "auto",
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          {connectionEvents?.map((event, index) => (
-            <div
-              key={index}
+        <div style={styles.sectionInner}>
+          {tasks?.map((task) => (
+            <InspectorRow
+              key={task.id}
+              colorScheme={colorScheme}
               style={{
-                borderBottom: `1px solid ${borderColor}`,
+                backgroundColor:
+                  task.status === "done"
+                    ? "rgba(0,255,0,0.2)"
+                    : task.status === "error"
+                      ? "rgba(255,0,0,0.2)"
+                      : undefined,
               }}
             >
-              {event.type === "stateChange" ? (
-                <div
-                  style={{
-                    padding: "2px 12px",
-                    background:
-                      colorScheme === "light"
-                        ? "rgba(0,0,0,0.05)"
-                        : "rgba(255,255,255,0.05)",
-                    display: "flex",
-                    alignItems: "center",
-                  }}
-                >
-                  <span
-                    style={{
-                      fontFamily: "Menlo, monospace",
-                      fontSize: "11px",
-                      borderRadius: 4,
-                      display: "inline-block",
-                    }}
-                  >
-                    connection:{" "}
-                    <span style={{ fontStyle: "italic" }}>
-                      {event.state.toLowerCase()}
-                    </span>
-                  </span>
-                </div>
-              ) : (
-                <div
-                  style={{
-                    padding: "0px 12px 1px",
-                    background:
-                      event.type === "send"
-                        ? "rgba(0,255,0,0.1)"
-                        : "rgba(255,0,0,0.1)",
-                  }}
-                >
-                  <ObjectInspector
-                    data={event.message}
-                    theme={theme}
-                    nodeRenderer={({
-                      depth,
-                      name,
-                      data,
-                      isNonenumerable,
-                      expanded,
-                    }: any) => {
-                      const direction = event.type === "send" ? "up" : "down";
-
-                      return depth === 0 ? (
-                        <ObjectRootLabel direction={direction} data={data} />
-                      ) : (
-                        <ObjectLabel
-                          direction={direction}
-                          name={name}
-                          data={data}
-                          isNonenumerable={isNonenumerable}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-              )}
-            </div>
+              <ObjectInspector
+                name={task.name}
+                data={task.payload}
+                theme={theme}
+              />
+            </InspectorRow>
           ))}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        open={showEvents}
+        setOpen={setShowEvents}
+        title="Events"
+        colorScheme={colorScheme}
+      >
+        <div ref={eventsContainerRef} style={styles.sectionInner}>
+          {connectionEvents?.map((event, index) =>
+            event.type === "stateChange" ? (
+              <InspectorRow key={index} colorScheme={colorScheme}>
+                connection:{" "}
+                <span style={{ fontStyle: "italic" }}>
+                  {event.state.toLowerCase()}
+                </span>
+              </InspectorRow>
+            ) : (
+              <InspectorRow
+                key={index}
+                colorScheme={colorScheme}
+                variant={event.type === "send" ? "up" : "down"}
+                style={{
+                  padding: "0px 12px 1px",
+                }}
+              >
+                <ObjectInspector
+                  data={event.message}
+                  theme={theme}
+                  nodeRenderer={({
+                    depth,
+                    name,
+                    data,
+                    isNonenumerable,
+                    expanded,
+                  }: any) => {
+                    const direction = event.type === "send" ? "up" : "down";
+
+                    return depth === 0 ? (
+                      <ObjectRootLabel direction={direction} data={data} />
+                    ) : (
+                      <ObjectLabel
+                        direction={direction}
+                        name={name}
+                        data={data}
+                        isNonenumerable={isNonenumerable}
+                      />
+                    );
+                  }}
+                />
+              </InspectorRow>
+            )
+          )}
           {!connectionEvents && (
             <div
               style={{
@@ -604,61 +729,6 @@ function Arrow({
   );
 }
 
-// <div className="flex py-px flex-col-reverse">
-// <button
-// type="button"
-// className={cx(
-// "px-4 py-2 cursor-pointer text-left",
-// 0 === historySnapshot.historyIndex && "bg-orange-500/25"
-// )}
-// onClick={() => {
-// // stateManager.goToHistoryIndex(0);
-// }}
-// >
-// <div className="flex justify-between gap-2">
-// <span>Initial State</span>
-// </div>
-// </button>
-// {historySnapshot.history.map((entry, index) => (
-// <button
-// key={index}
-// type="button"
-// className={cx(
-// "px-4 py-2 cursor-pointer text-left",
-// index === historySnapshot.historyIndex - 1 &&
-// "bg-orange-500/25"
-// )}
-// onClick={() => {
-// // stateManager.goToHistoryIndex(index + 1);
-// }}
-// >
-// <div className="flex justify-between gap-2">
-// <span>
-// {index + 1}. {entry.metadata.name}
-// </span>
-// <span>
-// {new Date(
-// entry.metadata.timestamp
-// ).toLocaleTimeString()}
-// </span>
-// </div>
-// <div className="font-mono text-xs">
-// {entry.redoPatches?.map((patch, index) => (
-// <pre key={index} className="max-w-full">
-// {patch.op === "remove"
-// ? `Delete ${pathToString(patch.path)}`
-// : `${pathToString(patch.path)} = ${JSON.stringify(
-// patch.value,
-// null,
-// 2
-// )}`}
-// </pre>
-// ))}
-// </div>
-// </button>
-// ))}
-// </div>
-
 function pathToString(extendedPath: ExtendedPathKey[]) {
   return extendedPath
     .map((key) =>

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,4 +1,11 @@
-import { ConnectionEvent, StateManager } from "@noya-app/state-manager";
+"use client";
+
+import {
+  ConnectionEvent,
+  MultiplayerStateManager,
+  MultiplayerUser,
+  Task,
+} from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -14,15 +21,21 @@ function createPortalElement() {
 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);
 
@@ -49,10 +62,25 @@ export function useStateInspector<S extends object, M>({
       <StateInspector
         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>
+        }
       />
     );
-  }, [anchor, colorScheme, connectionEvents, root, state, stateManager]);
+  }, [
+    anchor,
+    colorScheme,
+    connectedUsers,
+    connectionEvents,
+    root,
+    state,
+    multiplayerStateManager,
+    userId,
+    tasks,
+  ]);
 }