@noya-app/noya-multiplayer-react 0.1.9

package/dist/index.mjs

@@ -0,0 +1,764 @@
+// src/index.ts
+export * from "@noya-app/state-manager";
+
+// src/hooks.ts
+import {
+  MultiplayerStateManager,
+  StateManager,
+  stubSync
+} from "@noya-app/state-manager";
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useMemo,
+  useRef,
+  useState as useState2,
+  useSyncExternalStore
+} from "react";
+
+// src/globals.ts
+import { Emitter } from "@noya-app/emitter";
+import { useEffect, useState } from "react";
+var Observable = class {
+  value;
+  emitter = new Emitter();
+  constructor(value) {
+    this.value = value;
+  }
+  get() {
+    return this.value;
+  }
+  set(value) {
+    if (this.value === value)
+      return;
+    this.value = value;
+    this.emitter.emit(value);
+  }
+  listen(callback) {
+    callback(this.value);
+    return this.emitter.addListener(callback);
+  }
+};
+function useObservable(observable) {
+  const [value, setValue] = useState(observable.get());
+  useEffect(() => {
+    return observable.listen(setValue);
+  }, [observable]);
+  return value;
+}
+var trackEvents = new Observable(false);
+
+// src/inspector/useStateInspector.tsx
+import React3, { useLayoutEffect as useLayoutEffect2 } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/inspector/StateInspector.tsx
+import React2, {
+  memo,
+  useEffect as useEffect2,
+  useLayoutEffect
+} from "react";
+import {
+  ObjectInspector,
+  ObjectLabel,
+  ObjectName,
+  ObjectPreview,
+  chromeDark,
+  chromeLight
+} from "react-inspector";
+
+// src/inspector/useLocalStorageState.tsx
+import React from "react";
+var localStorage = typeof window !== "undefined" ? window.localStorage : null;
+function useLocalStorageState(key, defaultValue) {
+  const [state, setState] = React.useState(() => {
+    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) => {
+    localStorage?.setItem(key, JSON.stringify(value));
+    setState(value);
+  };
+  return [state, setLocalStorageState];
+}
+
+// src/inspector/StateInspector.tsx
+var lightTheme = {
+  ...chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)"
+};
+var darkTheme = {
+  ...chromeDark,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)"
+};
+function ToggleButton({
+  showInspector,
+  setShowInspector,
+  theme
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    "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)
+    },
+    /* @__PURE__ */ React2.createElement("span", { style: { width: "12px", height: "12px" } }, showInspector ? /* @__PURE__ */ React2.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ React2.createElement(
+        "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"
+        }
+      )
+    ) : /* @__PURE__ */ React2.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: 1.5,
+        stroke: "currentColor",
+        className: "size-6"
+      },
+      /* @__PURE__ */ React2.createElement(
+        "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"
+        }
+      )
+    ))
+  );
+}
+function DisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst
+}) {
+  const theme = colorScheme === "light" ? lightTheme : darkTheme;
+  const borderColor = colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "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 && /* @__PURE__ */ React2.createElement(
+        Arrow,
+        {
+          expanded: open,
+          style: {
+            fontSize: "11px",
+            // fontSize: theme.ARROW_FONT_SIZE,
+            marginRight: theme.ARROW_MARGIN_RIGHT,
+            color: theme.ARROW_COLOR
+          }
+        }
+      ),
+      /* @__PURE__ */ React2.createElement("span", { style: { flex: "1 1 0" } }, title),
+      right
+    ),
+    open && children
+  );
+}
+var StateInspector = memo(function StateInspector2({
+  state,
+  connectionEvents,
+  unstyled,
+  colorScheme = "light",
+  stateManager,
+  ...props
+}) {
+  const [didMount, setDidMount] = React2.useState(false);
+  useLayoutEffect(() => {
+    setDidMount(true);
+  }, []);
+  const eventsContainerRef = React2.useRef(null);
+  const historyContainerRef = React2.useRef(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
+  );
+  useEffect2(() => {
+    trackEvents.set(showEvents);
+  }, [showEvents]);
+  useEffect2(() => {
+    if (eventsContainerRef.current) {
+      eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
+    }
+  }, [connectionEvents]);
+  const historySnapshot = useManagedHistory(stateManager);
+  useEffect2(() => {
+    if (historyContainerRef.current) {
+      historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+  useEffect2(() => {
+    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 = {
+    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 /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        ...props,
+        style: {
+          ...baseStyle,
+          padding: "4px 10px",
+          borderRadius: 8,
+          bottom: void 0,
+          width: void 0
+        }
+      },
+      /* @__PURE__ */ React2.createElement(
+        ToggleButton,
+        {
+          showInspector,
+          setShowInspector,
+          theme
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ...props,
+      style: {
+        ...!unstyled && baseStyle,
+        ...props.style
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        open: true,
+        title: "Data",
+        colorScheme,
+        isFirst: true,
+        right: /* @__PURE__ */ React2.createElement(
+          ToggleButton,
+          {
+            showInspector,
+            setShowInspector,
+            theme
+          }
+        )
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: {
+            flex: "1 1 0",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1px",
+            padding: "1px 12px"
+          }
+        },
+        /* @__PURE__ */ React2.createElement(ObjectInspector, { data: state, theme })
+      )
+    ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        open: showHistory,
+        setOpen: setShowHistory,
+        title: "History",
+        colorScheme
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ref: historyContainerRef,
+          style: {
+            flex: "1 1 0",
+            overflowY: "auto",
+            overflowX: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        historySnapshot.history.length < 50 && /* @__PURE__ */ React2.createElement(
+          "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%)" : void 0
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "span",
+            {
+              style: {
+                fontFamily: "Menlo, monospace",
+                fontSize: "11px",
+                borderRadius: 4,
+                display: "inline-block"
+              }
+            },
+            "Initial state"
+          )
+        ),
+        historySnapshot.history.slice(-50).map((entry, index) => /* @__PURE__ */ React2.createElement(
+          "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%)" : void 0
+            }
+          },
+          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)))
+          ))
+        ))
+      )
+    ),
+    /* @__PURE__ */ React2.createElement(
+      DisclosureSection,
+      {
+        open: showEvents,
+        setOpen: setShowEvents,
+        title: "Events",
+        colorScheme
+      },
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ref: eventsContainerRef,
+          style: {
+            flex: "1 1 0",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column"
+          }
+        },
+        connectionEvents?.map((event, index) => /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            key: index,
+            style: {
+              borderBottom: `1px solid ${borderColor}`
+            }
+          },
+          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",
+            {
+              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
+                    }
+                  );
+                }
+              }
+            )
+          )
+        )),
+        !connectionEvents && /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ React2.createElement("span", null, "No recorded events")
+        )
+      )
+    )
+  );
+});
+var ObjectRootLabel = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ React2.createElement("span", null, /* @__PURE__ */ React2.createElement(ObjectName, { name }), /* @__PURE__ */ React2.createElement("span", null, ": "), /* @__PURE__ */ React2.createElement(ObjectPreview, { data }));
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "\u2191" : "\u2193";
+    return /* @__PURE__ */ React2.createElement("span", null, /* @__PURE__ */ React2.createElement(
+      "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
+    ), /* @__PURE__ */ React2.createElement(ObjectPreview, { data }));
+  } else {
+    return /* @__PURE__ */ React2.createElement(ObjectPreview, { data });
+  }
+};
+function Arrow({
+  expanded,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      role: "button",
+      onClick,
+      style: {
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        ...style
+      }
+    },
+    "\u25BC"
+  );
+}
+function pathToString(extendedPath) {
+  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("");
+}
+function ellipsis(str, maxLength, position = "end") {
+  if (str.length <= maxLength)
+    return str;
+  switch (position) {
+    case "start":
+      return `\u2026${str.slice(str.length - maxLength)}`;
+    case "middle":
+      const halfLength = Math.floor(maxLength / 2);
+      return `${str.slice(0, halfLength)}\u2026${str.slice(str.length - halfLength)}`;
+    case "end":
+      return `${str.slice(0, maxLength)}\u2026`;
+  }
+}
+
+// src/inspector/useStateInspector.tsx
+function createPortalElement() {
+  const el = document.createElement("div");
+  el.id = "noya-multiplayer-react-inspector-portal";
+  return el;
+}
+function useStateInspector({
+  state,
+  connectionEvents,
+  disabled = false,
+  colorScheme,
+  stateManager
+}) {
+  const [root, setRoot] = React3.useState(null);
+  useLayoutEffect2(() => {
+    if (disabled)
+      return;
+    const portalElement = createPortalElement();
+    const root2 = createRoot(portalElement);
+    document.body.appendChild(portalElement);
+    setRoot(root2);
+    return () => {
+      document.body.removeChild(portalElement);
+    };
+  }, [disabled]);
+  useLayoutEffect2(() => {
+    if (!root)
+      return;
+    root.render(
+      /* @__PURE__ */ React3.createElement(
+        StateInspector,
+        {
+          state,
+          connectionEvents,
+          colorScheme,
+          stateManager
+        }
+      )
+    );
+  }, [colorScheme, connectionEvents, root, state, stateManager]);
+}
+
+// src/hooks.ts
+function useSyncStateManager(stateManager, path) {
+  const getSnapshot = useCallback(
+    () => typeof path === "string" ? stateManager.getState(path) : stateManager.getState(),
+    [stateManager, path]
+  );
+  return useSyncExternalStore(
+    stateManager.addListener,
+    getSnapshot,
+    getSnapshot
+  );
+}
+function useManagedState(createInitialState, options) {
+  const [stateManager] = useState2(
+    () => new StateManager(createInitialState(), options)
+  );
+  const state = useSyncStateManager(stateManager);
+  const setState = useCallback(
+    (...args) => {
+      const [metadata, action] = args.length === 1 ? [void 0, args[0]] : args;
+      if (metadata === void 0) {
+        const performActionNoMetadata = stateManager.performAction;
+        if (typeof action === "function") {
+          performActionNoMetadata({
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionNoMetadata({
+            run: () => action,
+            undo: () => state
+          });
+        }
+      } else {
+        const performActionWithMetadata = stateManager.performAction;
+        if (typeof action === "function") {
+          performActionWithMetadata(metadata, {
+            run: action,
+            undo: () => state
+          });
+        } else {
+          performActionWithMetadata(metadata, {
+            run: () => action,
+            undo: () => state
+          });
+        }
+      }
+    },
+    [state, stateManager]
+  );
+  return [state, setState, stateManager];
+}
+function useManagedHistory(stateManager) {
+  return useSyncExternalStore(
+    stateManager.historyEmittor.addListener,
+    stateManager.getHistorySnapshot,
+    stateManager.getHistorySnapshot
+  );
+}
+function useSyncMultiplayerStateManager(multiplayerStateManager) {
+  return useSyncExternalStore(
+    multiplayerStateManager.addListener,
+    multiplayerStateManager.getOptimisticState,
+    multiplayerStateManager.getOptimisticState
+  );
+}
+var defaultStubSync = stubSync();
+function useMultiplayerState(initialState, options) {
+  const { sync = defaultStubSync, ...rest } = options;
+  const [multiplayerStateManager] = useState2(
+    () => new MultiplayerStateManager(initialState, rest)
+  );
+  const syncRef = useRef(sync);
+  const [connectionEvents, setConnectionEvents] = useState2();
+  const extras = useMemo(() => {
+    return {
+      connectionEvents
+    };
+  }, [connectionEvents]);
+  const globalTrackEvents = useObservable(trackEvents);
+  const trackConnectionEvents = options.trackConnectionEvents ?? globalTrackEvents;
+  const trackEventsCallbackRef = useRef();
+  useEffect3(() => {
+    trackEventsCallbackRef.current = trackConnectionEvents ? (e) => setConnectionEvents((events) => {
+      const updated = events ? [...events, e] : [e];
+      return updated.length > 50 ? updated.slice(-50) : updated;
+    }) : void 0;
+  }, [trackConnectionEvents]);
+  useEffect3(() => {
+    if (syncRef.current) {
+      return syncRef.current(
+        multiplayerStateManager,
+        (e) => trackEventsCallbackRef.current?.(e)
+      );
+    }
+  }, [multiplayerStateManager]);
+  const state = useSyncMultiplayerStateManager(multiplayerStateManager);
+  useStateInspector({
+    stateManager: multiplayerStateManager.sm,
+    state,
+    connectionEvents,
+    disabled: !options.inspector,
+    colorScheme: typeof options.inspector === "object" ? options.inspector.colorScheme : void 0
+  });
+  return [
+    state,
+    multiplayerStateManager.setOptimisticState,
+    multiplayerStateManager,
+    extras
+  ];
+}
+export {
+  StateInspector,
+  useManagedHistory,
+  useManagedState,
+  useMultiplayerState,
+  useSyncMultiplayerStateManager,
+  useSyncStateManager
+};
+//# sourceMappingURL=index.mjs.map