@noya-app/noya-multiplayer-react 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.43",
+    "@noya-app/state-manager": "0.1.44",
     "@noya-app/emitter": "0.1.0",
-    "@noya-app/observable": "0.1.5",
-    "@noya-app/task-runner": "0.1.5",
-    "@noya-app/react-utils": "0.1.17",
+    "@noya-app/observable": "0.1.6",
+    "@noya-app/task-runner": "0.1.6",
+    "@noya-app/react-utils": "0.1.18",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -12,6 +12,7 @@ import {
   EphemeralUserDataManager,
   MultiplayerStateManager,
   NoyaManager,
+  SafeEval,
   StateManagerOptions,
   Static,
   TSchema,
@@ -221,12 +222,14 @@ export function createNoyaContext<
   mergeHistoryEntries,
   outputTransforms,
   inputs,
+  safeEval,
 }: {
   schema: Schema;
   mergeHistoryEntries?: StateManagerOptions<
     Static<Schema>,
     M
   >["mergeHistoryEntries"];
+  safeEval?: SafeEval;
   outputTransforms?: CreateParams<OutputTransform>[];
   inputs?: CreateParams<Input>[];
 }) {
@@ -253,6 +256,7 @@ export function createNoyaContext<
         mergeHistoryEntries,
         outputTransforms,
         inputs,
+        safeEval,
         ...(options as any),
       }
     );

package/src/components/UserPointersOverlay.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { Observable } from "@noya-app/observable";
 import { memoGeneric } from "@noya-app/react-utils";
 import {
   ConnectedUsersManager,
   EphemeralUserDataManager,
   MultiplayerUser,
 } from "@noya-app/state-manager";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useObservable } from "../useObservable";
 type Point = { x: number; y: number };
 
@@ -41,12 +42,20 @@ const UserPointerInternal = memoGeneric(function UserPointerInternal<
   hideAfter = 5000,
   renderUserPointer,
 }: InternalUserPointerProps<E>) {
-  const metadata = useObservable(ephemeralUserDataManager.metadata$, [
-    user.id,
-  ] as const);
-  const data = useObservable(ephemeralUserDataManager.data$, [
-    user.id,
-  ] as const);
+  const observable = useMemo(() => {
+    const metadata$ = ephemeralUserDataManager.metadata$
+      .observePath([user.id] as const)
+      .throttle(50);
+    const data$ = ephemeralUserDataManager.data$
+      .observePath([user.id] as const)
+      .throttle(50);
+
+    return Observable.combine([metadata$, data$], ([metadata, data]) => {
+      return { metadata, data };
+    });
+  }, [ephemeralUserDataManager, user.id]);
+
+  const { metadata, data } = useObservable(observable);
 
   const [, setForceUpdate] = useState(0);
 

package/src/hooks.ts

@@ -3,8 +3,8 @@
 import { GetAtPath } from "@noya-app/observable";
 import {
   ActionHandler,
-  MultiplayerStateManagerOptions,
   NoyaManager,
+  NoyaManagerOptions,
   StateManager,
   StateManagerOptions,
   stubSync,
@@ -125,13 +125,11 @@ export type UseMultiplayerStateOptions<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
-> = MultiplayerStateManagerOptions<S, M> & {
+> = NoyaManagerOptions<S, M> & {
   sync?: SyncAdapter<S, M, E, MenuT>;
   inspector?: boolean | StateInspectorOptions;
 };
 
-const defaultStubSync = stubSync<unknown, object, object, string>();
-
 export function useMultiplayerState<
   S,
   M extends object = object,
@@ -142,7 +140,12 @@ export function useMultiplayerState<
   options?: UseMultiplayerStateOptions<S, M, E, MenuT>
 ) {
   const {
-    sync = defaultStubSync as unknown as SyncAdapter<S, M, E, MenuT>,
+    sync = stubSync<
+      unknown,
+      object,
+      object,
+      string
+    >() as unknown as SyncAdapter<S, M, E, MenuT>,
     inspector,
     ...rest
   } = options ?? {};

package/src/inspector/StateInspector.tsx

@@ -55,6 +55,42 @@ function ToggleButton({
   theme: typeof chromeLight;
   anchor: StateInspectorAnchor;
 }) {
+  const isRightAnchor = anchor === "right";
+
+  const rightIcon = (
+    <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>
+  );
+
+  const leftIcon = (
+    <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>
+  );
+
   return (
     <span
       role="button"
@@ -76,39 +112,13 @@ function ToggleButton({
         setShowInspector(!showInspector);
       }}
     >
-      <span style={{ width: "12px", height: "12px" }}>
-        {showInspector === (anchor === "right") ? (
-          <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>
+      {showInspector ? (
+        "Hide Inspector"
+      ) : (
+        <span style={{ width: "12px", height: "12px" }}>
+          {isRightAnchor ? rightIcon : leftIcon}
+        </span>
+      )}
     </span>
   );
 }
@@ -793,7 +803,7 @@ export const StateInspector = memoGeneric(function StateInspector<
               if (!name) return;
               const value = prompt("Enter secret value");
               if (!value) return;
-              secretManager.createSecret(name, value);
+              secretManager.createSecret(null, name, value);
             }}
           >
             Create
@@ -806,7 +816,7 @@ export const StateInspector = memoGeneric(function StateInspector<
               <ObjectInspector data={secret} theme={theme} />
               <SmallButton
                 theme={theme}
-                onClick={() => secretManager.deleteSecret(secret.name)}
+                onClick={() => secretManager.deleteSecret(secret.id)}
               >
                 Delete
               </SmallButton>