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

package/.turbo/turbo-build.log

@@ -5,14 +5,14 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     23.51 KB
-ESM dist/index.mjs.map 43.29 KB
-ESM ⚡️ Build success in 19ms
-CJS dist/index.js     27.13 KB
-CJS dist/index.js.map 43.09 KB
-CJS ⚡️ Build success in 19ms
+ESM dist/index.mjs     29.45 KB
+ESM dist/index.mjs.map 53.24 KB
+ESM ⚡️ Build success in 71ms
+CJS dist/index.js     33.48 KB
+CJS dist/index.js.map 53.03 KB
+CJS ⚡️ Build success in 76ms
 DTS Build start
 "ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/inspector/StateInspector.tsx" and "src/hooks.ts".
-DTS ⚡️ Build success in 1607ms
-DTS dist/index.d.ts  2.50 KB
-DTS dist/index.d.mts 2.50 KB
+DTS ⚡️ Build success in 2151ms
+DTS dist/index.d.ts  2.69 KB
+DTS dist/index.d.mts 2.69 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @noya-app/state-manager
 
+## 0.1.14
+
+### Patch Changes
+
+- 380da63: Add more inspector tools
+- Updated dependencies [380da63]
+  - @noya-app/state-manager@0.1.14
+
+## 0.1.13
+
+### Patch Changes
+
+- 149f2f9: Improve multiplayer
+- Updated dependencies [149f2f9]
+  - @noya-app/state-manager@0.1.13
+
 ## 0.1.12
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,18 +1,20 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
-type Anchor = "left" | "right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, userId, unstyled, colorScheme, stateManager, anchor, ...props }: {
+type Anchor = "left" | "right" | "bottom left" | "bottom right";
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
+    tasks?: Task[] | undefined;
     userId?: string | undefined;
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
-    stateManager: StateManager<S, M>;
+    multiplayerStateManager: MultiplayerStateManager<S, M>;
     anchor?: Anchor | undefined;
+    forceInit: () => void;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
 
 declare function useSyncStateManager<S extends object, M>(stateManager: StateManager<S, M>): S;
@@ -20,13 +22,15 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, M = void>(createInitialState: () => S, options?: StateManagerOptions<S, M>): readonly [S, (...args: M extends {} ? [metadata: M, action: SetStateAction<S>] : [action: SetStateAction<S>]) => void, StateManager<S, M>];
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options: MultiplayerStateManagerOptions<S, M> & {
+declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
     }) => void;
     trackConnectionEvents?: boolean;
+    trackTasks?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
+    tasks: Task[];
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
 }];

package/dist/index.d.ts

@@ -1,18 +1,20 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, StateManager, Get, StateManagerOptions, MultiplayerStateManager, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
-type Anchor = "left" | "right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, userId, unstyled, colorScheme, stateManager, anchor, ...props }: {
+type Anchor = "left" | "right" | "bottom left" | "bottom right";
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
+    tasks?: Task[] | undefined;
     userId?: string | undefined;
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
-    stateManager: StateManager<S, M>;
+    multiplayerStateManager: MultiplayerStateManager<S, M>;
     anchor?: Anchor | undefined;
+    forceInit: () => void;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
 
 declare function useSyncStateManager<S extends object, M>(stateManager: StateManager<S, M>): S;
@@ -20,13 +22,15 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, M = void>(createInitialState: () => S, options?: StateManagerOptions<S, M>): readonly [S, (...args: M extends {} ? [metadata: M, action: SetStateAction<S>] : [action: SetStateAction<S>]) => void, StateManager<S, M>];
 declare function useManagedHistory<S extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options: MultiplayerStateManagerOptions<S, M> & {
+declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
     }) => void;
     trackConnectionEvents?: boolean;
+    trackTasks?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
+    tasks: Task[];
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
 }];

package/dist/index.js

@@ -75,7 +75,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
 var import_react4 = __toESM(require("react"));
@@ -241,7 +242,7 @@ function DisclosureSection({
           }
         }
       ),
-      /* @__PURE__ */ import_react3.default.createElement("span", { style: { flex: "1 1 0" } }, title),
+      /* @__PURE__ */ import_react3.default.createElement("span", { style: { flex: "1 1 0", userSelect: "none" } }, title),
       right
     ),
     open && children
@@ -292,11 +293,13 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   unstyled,
   colorScheme = "light",
-  stateManager,
+  multiplayerStateManager,
   anchor = "right",
+  forceInit,
   ...props
 }) {
   const [didMount, setDidMount] = import_react3.default.useState(false);
@@ -325,15 +328,22 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
     "noya-multiplayer-react-show-data",
     true
   );
+  const [showTasks, setShowTasks] = useLocalStorageState(
+    "noya-multiplayer-react-show-tasks",
+    false
+  );
   (0, import_react3.useEffect)(() => {
-    trackEvents.set(showEvents);
+    shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
+  (0, import_react3.useEffect)(() => {
+    shouldTrackTasks$.set(showTasks);
+  }, [showTasks]);
   (0, import_react3.useEffect)(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
-  const historySnapshot = useManagedHistory(stateManager);
+  const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   (0, import_react3.useEffect)(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
@@ -357,7 +367,7 @@ var StateInspector = (0, import_react3.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)",
@@ -383,8 +393,8 @@ var StateInspector = (0, import_react3.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)
       },
@@ -461,19 +471,42 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
         title: "Data",
         colorScheme,
         setOpen: setShowData,
-        open: showData
+        open: showData,
+        right: /* @__PURE__ */ import_react3.default.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ import_react3.default.createElement(
+            SmallButton,
+            {
+              theme,
+              onClick: () => {
+                forceInit();
+              }
+            },
+            "Reset"
+          )
+        )
       },
-      /* @__PURE__ */ import_react3.default.createElement(
-        "div",
+      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react3.default.createElement(
+        import_react_inspector.ObjectInspector,
         {
-          style: {
-            ...styles.sectionInner,
-            gap: "1px",
-            padding: "1px 12px"
-          }
-        },
-        /* @__PURE__ */ import_react3.default.createElement(import_react_inspector.ObjectInspector, { data: state, theme })
-      )
+          name: multiplayerStateManager.sm.schema ? "state" : void 0,
+          data: state,
+          theme
+        }
+      )), multiplayerStateManager.sm.schema && /* @__PURE__ */ import_react3.default.createElement(InspectorRow, { colorScheme }, /* @__PURE__ */ import_react3.default.createElement(
+        import_react_inspector.ObjectInspector,
+        {
+          name: "schema",
+          data: multiplayerStateManager.sm.schema,
+          theme
+        }
+      )))
     ),
     /* @__PURE__ */ import_react3.default.createElement(
       DisclosureSection,
@@ -481,7 +514,68 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
         open: showHistory,
         setOpen: setShowHistory,
         title: "History",
-        colorScheme
+        colorScheme,
+        right: /* @__PURE__ */ import_react3.default.createElement(
+          "span",
+          {
+            style: {
+              display: "flex",
+              gap: "4px"
+            }
+          },
+          /* @__PURE__ */ import_react3.default.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canUndo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.sm.undo();
+              }
+            },
+            /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react3.default.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+            SmallButton,
+            {
+              disabled: !historySnapshot.canRedo,
+              theme,
+              onClick: () => {
+                multiplayerStateManager.sm.redo();
+              }
+            },
+            /* @__PURE__ */ import_react3.default.createElement("span", { style: { width: "12px", height: "12px" } }, /* @__PURE__ */ import_react3.default.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 20 20"
+              },
+              /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { ref: historyContainerRef, style: styles.sectionInner }, /* @__PURE__ */ import_react3.default.createElement(
         "div",
@@ -536,6 +630,33 @@ var StateInspector = (0, import_react3.memo)(function StateInspector2({
         ))
       )))
     ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      DisclosureSection,
+      {
+        title: "Tasks",
+        colorScheme,
+        open: showTasks,
+        setOpen: setShowTasks
+      },
+      /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.sectionInner }, tasks?.map((task) => /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+          import_react_inspector.ObjectInspector,
+          {
+            name: task.name,
+            data: task.payload,
+            theme
+          }
+        )
+      )))
+    ),
     /* @__PURE__ */ import_react3.default.createElement(
       DisclosureSection,
       {
@@ -666,6 +787,42 @@ function ellipsis(str, maxLength, position = "end") {
       return `${str.slice(0, maxLength)}\u2026`;
   }
 }
+function SmallButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled
+}) {
+  return /* @__PURE__ */ import_react3.default.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() {
@@ -677,11 +834,13 @@ function useStateInspector({
   state,
   connectionEvents,
   connectedUsers,
+  tasks,
   userId,
   disabled = false,
   colorScheme,
   anchor,
-  stateManager
+  multiplayerStateManager,
+  forceInit
 }) {
   const [root, setRoot] = import_react4.default.useState(null);
   (0, import_react4.useLayoutEffect)(() => {
@@ -705,10 +864,12 @@ function useStateInspector({
           state,
           connectionEvents,
           connectedUsers,
+          tasks,
           userId,
           colorScheme,
           anchor,
-          stateManager
+          forceInit,
+          multiplayerStateManager
         }
       )
     );
@@ -719,8 +880,10 @@ function useStateInspector({
     connectionEvents,
     root,
     state,
-    stateManager,
-    userId
+    multiplayerStateManager,
+    userId,
+    tasks,
+    forceInit
   ]);
 }
 
@@ -792,58 +955,87 @@ function useSyncMultiplayerStateManager(multiplayerStateManager) {
 }
 var defaultStubSync = (0, import_state_manager.stubSync)();
 function useMultiplayerState(initialState, options) {
-  const { sync = defaultStubSync, ...rest } = options;
+  const { sync = defaultStubSync, ...rest } = options ?? {};
   const [multiplayerStateManager] = (0, import_react5.useState)(
     () => new import_state_manager.MultiplayerStateManager(initialState, rest)
   );
   const syncRef = (0, import_react5.useRef)(sync);
   const [connectionEvents, setConnectionEvents] = (0, import_react5.useState)();
   const [connectedUsers, setConnectedUsers] = (0, import_react5.useState)([]);
+  const [tasks, setTasks] = (0, import_react5.useState)([]);
   const [userId, setUserId] = (0, import_react5.useState)();
   const extras = (0, import_react5.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 = (0, import_react5.useRef)();
   const trackConnectedUsersCallbackRef = (0, import_react5.useRef)();
+  const trackTasksCallbackRef = (0, import_react5.useRef)();
   (0, import_react5.useEffect)(() => {
-    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]);
   (0, import_react5.useEffect)(() => {
     trackConnectedUsersCallbackRef.current = (users, userId2) => {
       setConnectedUsers(users);
       setUserId(userId2);
     };
-  });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    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]);
   (0, import_react5.useEffect)(() => {
     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 = (0, import_react5.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
   ];