@noya-app/noya-multiplayer-react 0.1.9

package/src/inspector/StateInspector.tsx

@@ -0,0 +1,688 @@
+import {
+  ConnectionEvent,
+  ExtendedPathKey,
+  StateManager,
+} from "@noya-app/state-manager";
+import React, {
+  CSSProperties,
+  ComponentPropsWithoutRef,
+  FC,
+  memo,
+  useEffect,
+  useLayoutEffect,
+} from "react";
+import {
+  ObjectInspector,
+  ObjectLabel,
+  ObjectName,
+  ObjectPreview,
+  chromeDark,
+  chromeLight,
+} from "react-inspector";
+import { trackEvents } from "../globals";
+import { useManagedHistory } from "../hooks";
+import { useLocalStorageState } from "./useLocalStorageState";
+
+const lightTheme = {
+  ...chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)",
+} as any;
+
+const darkTheme = {
+  ...chromeDark,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
+} as any;
+
+function ToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+}: {
+  showInspector: boolean;
+  setShowInspector: (value: boolean) => void;
+  theme: typeof chromeLight;
+}) {
+  return (
+    <span
+      role="button"
+      style={{
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        background: "rgba(0,0,0,0.1)",
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+      }}
+      onClick={() => setShowInspector(!showInspector)}
+    >
+      <span style={{ width: "12px", height: "12px" }}>
+        {showInspector ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+            />
+          </svg>
+        )}
+      </span>
+    </span>
+  );
+}
+
+function DisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst,
+}: {
+  open: boolean;
+  setOpen?: (value: boolean) => void;
+  title: string;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  isFirst?: boolean;
+}) {
+  const theme = colorScheme === "light" ? lightTheme : darkTheme;
+
+  const borderColor =
+    colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+
+  return (
+    <div
+      style={{
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        onClick={() => setOpen?.(!open)}
+        style={{
+          cursor: "default",
+          fontSize: "12px",
+          padding: "4px 10px",
+          display: "flex",
+          ...(!isFirst && { borderTop: `1px solid ${borderColor}` }),
+          ...(open && { borderBottom: `1px solid ${borderColor}` }),
+        }}
+      >
+        {setOpen && (
+          <Arrow
+            expanded={open}
+            style={{
+              fontSize: "11px",
+              // fontSize: theme.ARROW_FONT_SIZE,
+              marginRight: theme.ARROW_MARGIN_RIGHT,
+              color: theme.ARROW_COLOR,
+            }}
+          />
+        )}
+        <span style={{ flex: "1 1 0" }}>{title}</span>
+        {right}
+      </div>
+      {open && children}
+    </div>
+  );
+}
+
+export const StateInspector = memo(function StateInspector<
+  S extends object,
+  M,
+>({
+  state,
+  connectionEvents,
+  unstyled,
+  colorScheme = "light",
+  stateManager,
+  ...props
+}: {
+  state: S;
+  connectionEvents?: ConnectionEvent<S>[];
+  unstyled?: boolean;
+  colorScheme?: "light" | "dark";
+  stateManager: StateManager<S, M>;
+} & ComponentPropsWithoutRef<"div">) {
+  const [didMount, setDidMount] = React.useState(false);
+
+  useLayoutEffect(() => {
+    setDidMount(true);
+  }, []);
+
+  const eventsContainerRef = React.useRef<HTMLDivElement>(null);
+  const historyContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const [showInspector, setShowInspector] = useLocalStorageState(
+    "noya-multiplayer-react-show-inspector",
+    true
+  );
+  const [showEvents, setShowEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-events",
+    false
+  );
+  const [showHistory, setShowHistory] = useLocalStorageState(
+    "noya-multiplayer-react-show-history",
+    false
+  );
+
+  useEffect(() => {
+    trackEvents.set(showEvents);
+  }, [showEvents]);
+
+  useEffect(() => {
+    if (eventsContainerRef.current) {
+      eventsContainerRef.current.scrollTop =
+        eventsContainerRef.current.scrollHeight;
+    }
+  }, [connectionEvents]);
+
+  const historySnapshot = useManagedHistory(stateManager);
+
+  useEffect(() => {
+    if (historyContainerRef.current) {
+      historyContainerRef.current.scrollTop =
+        historyContainerRef.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+
+  // If history index changes, scroll to the new history entry into view
+  useEffect(() => {
+    if (!historyContainerRef.current) return;
+
+    const historyEntry = historyContainerRef.current.querySelector(
+      `#history-${historySnapshot.historyIndex - 1}`
+    );
+
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }, [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 baseStyle: CSSProperties = {
+    position: "fixed",
+    top: 12,
+    right: 12,
+    bottom: 12,
+    width: 400,
+    background:
+      colorScheme === "light" ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.95)",
+    backdropFilter: "blur(48px)",
+    border: `1px solid ${borderColor}`,
+    // outlineOffset: -1,
+    borderRadius: 4,
+    display: "flex",
+    flexDirection: "column",
+    // gap: 12,
+    color: theme.BASE_COLOR,
+    overflow: "hidden",
+    zIndex: 9999,
+  };
+
+  if (!didMount) return null;
+
+  if (!showInspector) {
+    return (
+      <div
+        {...props}
+        style={{
+          ...baseStyle,
+          padding: "4px 10px",
+          borderRadius: 8,
+          bottom: undefined,
+          width: undefined,
+        }}
+      >
+        <ToggleButton
+          showInspector={showInspector}
+          setShowInspector={setShowInspector}
+          theme={theme}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...props}
+      style={{
+        ...(!unstyled && baseStyle),
+        ...props.style,
+      }}
+    >
+      {/* <div style={{ flex: "0", fontSize: "12px" }}>User ID: {userId}</div> */}
+      <DisclosureSection
+        open
+        title="Data"
+        colorScheme={colorScheme}
+        isFirst
+        right={
+          <ToggleButton
+            showInspector={showInspector}
+            setShowInspector={setShowInspector}
+            theme={theme}
+          />
+        }
+      >
+        <div
+          style={{
+            flex: "1 1 0",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1px",
+            padding: "1px 12px",
+          }}
+        >
+          <ObjectInspector data={state} theme={theme} />
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        open={showHistory}
+        setOpen={setShowHistory}
+        title="History"
+        colorScheme={colorScheme}
+      >
+        <div
+          ref={historyContainerRef}
+          style={{
+            flex: "1 1 0",
+            overflowY: "auto",
+            overflowX: "hidden",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {historySnapshot.history.length < 50 && (
+            <div
+              id={`history-${0}`}
+              style={{
+                borderBottom: `1px solid ${borderColor}`,
+                fontSize: "12px",
+                fontFamily: "Menlo, monospace",
+                padding: "2px 12px 1px",
+                display: "flex",
+                alignItems: "center",
+                background:
+                  historySnapshot.historyIndex === 0
+                    ? colorScheme === "light"
+                      ? "rgba(0,0,0,0.2)"
+                      : "rgb(59 130 246 / 38%)"
+                    : undefined,
+              }}
+            >
+              <span
+                style={{
+                  fontFamily: "Menlo, monospace",
+                  fontSize: "11px",
+                  borderRadius: 4,
+                  display: "inline-block",
+                }}
+              >
+                Initial state
+              </span>
+            </div>
+          )}
+          {historySnapshot.history.slice(-50).map((entry, index) => (
+            <div
+              id={`history-${index}`}
+              key={index}
+              style={{
+                padding: "0px 12px 1px",
+                borderBottom: `1px solid ${borderColor}`,
+                background:
+                  index === historySnapshot.historyIndex - 1
+                    ? colorScheme === "light"
+                      ? "rgba(0,0,0,0.2)"
+                      : "rgb(59 130 246 / 15%)"
+                    : undefined,
+              }}
+            >
+              {entry.redoPatches?.map((patch, j) => (
+                <pre
+                  key={j}
+                  style={{
+                    fontSize: "11px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  {patch.op === "add" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "replace" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "remove" && (
+                    <>
+                      <span style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>
+                        delete{" "}
+                      </span>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
+                </pre>
+              ))}
+            </div>
+          ))}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        open={showEvents}
+        setOpen={setShowEvents}
+        title="Events"
+        colorScheme={colorScheme}
+      >
+        <div
+          ref={eventsContainerRef}
+          style={{
+            flex: "1 1 0",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {connectionEvents?.map((event, index) => (
+            <div
+              key={index}
+              style={{
+                borderBottom: `1px solid ${borderColor}`,
+              }}
+            >
+              {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>
+          ))}
+          {!connectionEvents && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No recorded events</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+    </div>
+  );
+});
+
+type MessageDirection = "up" | "down";
+
+const ObjectRootLabel: FC<{
+  name?: string;
+  data: any;
+  direction?: MessageDirection;
+}> = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return (
+      <span>
+        <ObjectName name={name} />
+        <span>: </span>
+        <ObjectPreview data={data} />
+      </span>
+    );
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "↑" : "↓";
+
+    return (
+      <span>
+        <span
+          style={{
+            background:
+              direction === "up" ? "rgba(0,255,0,0.2)" : "rgba(255,0,0,0.2)",
+            // color: "white",
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: 4,
+            lineHeight: "12px",
+          }}
+        >
+          {arrow}
+        </span>
+        <ObjectPreview data={data} />
+      </span>
+    );
+  } else {
+    return <ObjectPreview data={data} />;
+  }
+};
+
+// Rotates ▶️ or ▼ based on expanded state
+function Arrow({
+  expanded,
+  onClick,
+  style,
+}: {
+  expanded: boolean;
+  onClick?: () => void;
+  style?: CSSProperties;
+}) {
+  return (
+    <span
+      role="button"
+      onClick={onClick}
+      style={{
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        ...style,
+      }}
+    >
+      {"▼"}
+    </span>
+  );
+}
+
+// <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) =>
+      typeof key === "object"
+        ? `:${ellipsis(key.id.toString(), 8, "middle")}`
+        : key
+    )
+    .map((key, index) =>
+      index === 0 || (typeof key === "string" && key.startsWith(":"))
+        ? key
+        : `.${key}`
+    )
+    .join("");
+}
+
+type EllipsisPosition = "start" | "middle" | "end";
+
+function ellipsis(
+  str: string,
+  maxLength: number,
+  position: EllipsisPosition = "end"
+) {
+  if (str.length <= maxLength) return str;
+
+  switch (position) {
+    case "start":
+      return `…${str.slice(str.length - maxLength)}`;
+    case "middle":
+      const halfLength = Math.floor(maxLength / 2);
+      return `${str.slice(0, halfLength)}…${str.slice(str.length - halfLength)}`;
+    case "end":
+      return `${str.slice(0, maxLength)}…`;
+  }
+}

package/src/inspector/useLocalStorageState.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const localStorage = typeof window !== "undefined" ? window.localStorage : null;
+
+export function useLocalStorageState<S>(
+  key: string,
+  defaultValue: S
+): [S, (value: S) => void] {
+  const [state, setState] = React.useState<S>(() => {
+    const value = localStorage?.getItem(key);
+    let result = defaultValue;
+    if (value) {
+      try {
+        result = JSON.parse(value);
+      } catch (error) {
+        console.error("Error parsing localStorage value", error);
+      }
+    }
+    return result;
+  });
+
+  const setLocalStorageState = (value: S) => {
+    localStorage?.setItem(key, JSON.stringify(value));
+    setState(value);
+  };
+
+  return [state, setLocalStorageState];
+}