@noya-app/noya-multiplayer-react 0.1.42 → 0.1.44

package/src/hooks.ts

@@ -3,19 +3,24 @@
 import { GetAtPath } from "@noya-app/observable";
 import {
   ActionHandler,
+  AIManager,
   AssetManager,
+  ConnectedUsersManager,
   ConnectionEvent,
-  EphemeralUserData,
+  EphemeralUserDataManager,
   MultiplayerStateManager,
   MultiplayerStateManagerError,
   MultiplayerStateManagerOptions,
-  MultiplayerUser,
+  RPCManager,
+  StandardRPCRequestPayload,
+  StandardRPCResponsePayload,
   StateManager,
   StateManagerOptions,
   stubSync,
   SyncAdapter,
   SyncAdapterOptions,
   Task,
+  WorkflowManager,
 } from "@noya-app/state-manager";
 import {
   createElement,
@@ -28,6 +33,7 @@ import {
   useSyncExternalStore,
 } from "react";
 import { createRoot } from "react-dom/client";
+import { SecretManager } from "../../noya-state-manager/src/SecretManager";
 import { ErrorOverlay } from "./components/ErrorOverlay";
 import { shouldTrackEvents$, shouldTrackTasks$ } from "./globals";
 import { StateInspectorOptions } from "./inspector/StateInspector";
@@ -138,68 +144,17 @@ export function useSyncMultiplayerStateManager<S, M = void>(
   );
 }
 
-function throttle<F extends (...args: any[]) => any>(fn: F, ms: number) {
-  let lastCall = 0;
-  let timeoutId: number | null = null;
-  return (...args: Parameters<F>) => {
-    const now = Date.now();
-    if (now - lastCall < ms) {
-      if (timeoutId) clearTimeout(timeoutId);
-      timeoutId = setTimeout(
-        () => {
-          lastCall = now;
-          fn(...args);
-        },
-        ms - (now - lastCall)
-      ) as unknown as number;
-      return;
-    }
-    lastCall = now;
-    return fn(...args);
-  };
-}
-
-export function useEphemeralUserData<E>(
-  ephemeralUserData: EphemeralUserData<E>,
-  options?: {
-    throttle?: number;
-  }
-) {
-  const throttledAddListener = useMemo(() => {
-    const throttleMs = options?.throttle ?? 0;
-
-    if (throttleMs > 0) {
-      const addListener = (
-        fn: Parameters<typeof ephemeralUserData.addListener>[0]
-      ) => {
-        const throttledFn = throttle(fn, throttleMs);
-        return ephemeralUserData.addListener(throttledFn);
-      };
-
-      return addListener;
-    }
-
-    return ephemeralUserData.addListener;
-  }, [ephemeralUserData, options?.throttle]);
-
-  return useSyncExternalStore(
-    throttledAddListener,
-    ephemeralUserData.getSnapshot,
-    ephemeralUserData.getSnapshot
-  );
-}
-
 const defaultStubSync = stubSync();
 
 export type UseMultiplayerStateOptions<
   S,
   M = void,
-  E = void,
+  E extends object = object,
 > = MultiplayerStateManagerOptions<S, M> & {
   sync?: (
     options: Pick<
       SyncAdapterOptions<S, M, E>,
-      "ms" | "ephemeralUserData" | "assetManager"
+      "ms" | "ephemeralUserDataManager" | "assetManager"
     >
   ) => void;
   trackConnectionEvents?: boolean;
@@ -207,60 +162,71 @@ export type UseMultiplayerStateOptions<
   inspector?: boolean | StateInspectorOptions;
 };
 
-export function useMultiplayerState<S, M = void, E = void>(
+export function useMultiplayerState<S, M = void, E extends object = object>(
   initialState: S | (() => S),
   options?: UseMultiplayerStateOptions<S, M, E>
 ) {
   const { sync = defaultStubSync as unknown as SyncAdapter<S, M, E>, ...rest } =
     options ?? {};
 
+  /** RPC */
+
+  const [rpcManager] = useState(
+    () =>
+      new RPCManager<StandardRPCRequestPayload, StandardRPCResponsePayload>()
+  );
   const [multiplayerStateManager] = useState(
     () => new MultiplayerStateManager<S, M>(initialState, rest)
   );
   const [assetManager] = useState(() => new AssetManager());
+  const [aiManager] = useState(() => new AIManager(rpcManager));
+  const [workflowManager] = useState(() => new WorkflowManager(rpcManager));
+  const [secretManager] = useState(() => new SecretManager(rpcManager));
+  const [connectedUsersManager] = useState(() => new ConnectedUsersManager());
   const syncRef = useRef(sync);
 
   const [connectionEvents, setConnectionEvents] = useState<
     ConnectionEvent<S>[] | undefined
   >();
-
-  const [connectedUsers, setConnectedUsers] = useState<MultiplayerUser[]>([]);
-  const [ephemeralUserData] = useState<EphemeralUserData<E>>(
-    () => new EphemeralUserData()
+  const [ephemeralUserDataManager] = useState<EphemeralUserDataManager<E>>(
+    () => new EphemeralUserDataManager()
   );
   const [tasks, setTasks] = useState<Task[]>([]);
-  const [userId, setUserId] = useState<string | undefined>();
   const assets = useObservable(assetManager.assets$);
+  // const connectionStatus = useObservable(
+  //   multiplayerStateManager.connectionStatus$
+  // );
 
   const extras = useMemo(() => {
     return {
       tasks,
-      userId,
       connectionEvents,
-      connectedUsers,
-      ephemeralUserData,
+      connectedUsersManager,
+      ephemeralUserDataManager,
       multiplayerStateManager,
       assets,
       assetManager,
+      aiManager,
+      rpcManager,
+      workflowManager,
+      secretManager,
       createAsset: assetManager.create,
       deleteAsset: assetManager.delete,
-      // 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}`);
-      //   }
-      // },
+      // connectionStatus,
+      // isConnected: connectionStatus === "connected",
     };
   }, [
     tasks,
-    userId,
     connectionEvents,
-    connectedUsers,
-    ephemeralUserData,
+    connectedUsersManager,
+    ephemeralUserDataManager,
     multiplayerStateManager,
-    assetManager,
     assets,
+    assetManager,
+    aiManager,
+    rpcManager,
+    workflowManager,
+    secretManager,
   ]);
 
   const globalTrackEvents = useObservable(shouldTrackEvents$);
@@ -272,9 +238,6 @@ export function useMultiplayerState<S, M = void, E = void>(
   const trackEventsCallbackRef = useRef<
     ((e: ConnectionEvent<S>) => void) | undefined
   >();
-  const trackConnectedUsersCallbackRef = useRef<
-    ((users: MultiplayerUser[], userId: string) => void) | undefined
-  >();
   const trackTasksCallbackRef = useRef<((tasks: Task[]) => void) | undefined>();
 
   useEffect(() => {
@@ -287,13 +250,6 @@ export function useMultiplayerState<S, M = void, E = void>(
       : undefined;
   }, [shouldTrackEvents]);
 
-  useEffect(() => {
-    trackConnectedUsersCallbackRef.current = (users, userId) => {
-      setConnectedUsers(users);
-      setUserId(userId);
-    };
-  }, []);
-
   useEffect(() => {
     trackTasksCallbackRef.current = shouldTrackTasks
       ? (tasks) => {
@@ -314,14 +270,26 @@ export function useMultiplayerState<S, M = void, E = void>(
       return syncRef.current({
         ms: multiplayerStateManager,
         assetManager,
-        ephemeralUserData,
+        workflowManager,
+        secretManager,
+        rpcManager,
+        aiManager,
+        ephemeralUserDataManager,
+        connectedUsersManager,
         onConnectionEvent: (e) => trackEventsCallbackRef.current?.(e),
-        onChangeConnectedUsers: (users, userId) =>
-          trackConnectedUsersCallbackRef.current?.(users, userId),
         onChangeTasks: (tasks) => trackTasksCallbackRef.current?.(tasks),
       });
     }
-  }, [assetManager, ephemeralUserData, multiplayerStateManager]);
+  }, [
+    assetManager,
+    ephemeralUserDataManager,
+    multiplayerStateManager,
+    workflowManager,
+    secretManager,
+    rpcManager,
+    aiManager,
+    connectedUsersManager,
+  ]);
 
   const state = useSyncMultiplayerStateManager(multiplayerStateManager);
 
@@ -365,14 +333,14 @@ export function useMultiplayerState<S, M = void, E = void>(
   });
 
   useStateInspector({
-    ephemeralUserData,
+    ephemeralUserDataManager,
     multiplayerStateManager,
     assetManager,
+    secretManager,
     state,
     connectionEvents,
-    connectedUsers,
+    connectedUsersManager,
     tasks,
-    userId,
     forceInit,
     disabled: !options?.inspector,
     ...(typeof options?.inspector === "object" && options.inspector),

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from "@noya-app/state-manager";
-export * from "./avatarStyle";
 export * from "./components/UserPointersOverlay";
 export * from "./hooks";
 export * from "./inspector/StateInspector";

package/src/inspector/StateInspector.tsx

@@ -1,19 +1,20 @@
 "use client";
 
+import { memoGeneric } from "@noya-app/react-utils";
 import {
   AssetManager,
+  ConnectedUsersManager,
   ConnectionEvent,
-  EphemeralUserData,
+  EphemeralUserDataManager,
   ExtendedPathKey,
   MultiplayerStateManager,
-  MultiplayerUser,
+  SecretManager,
   Task,
 } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
   ComponentPropsWithoutRef,
   FC,
-  memo,
   useEffect,
   useLayoutEffect,
 } from "react";
@@ -26,7 +27,7 @@ import {
   chromeLight,
 } from "react-inspector";
 import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
-import { useEphemeralUserData, useManagedHistory } from "../hooks";
+import { useManagedHistory } from "../hooks";
 import { useObservable } from "../useObservable";
 import { useLocalStorageState } from "./useLocalStorageState";
 
@@ -213,7 +214,7 @@ function InspectorRow({
           variant === "up"
             ? "rgba(0,255,0,0.1)"
             : variant === "down"
-              ? "rgba(255,0,0,0.1)"
+              ? "transparent"
               : selected
                 ? "rgb(59 130 246 / 15%)"
                 : undefined,
@@ -251,30 +252,34 @@ export type StateInspectorOptions = {
   anchor?: StateInspectorAnchor;
 };
 
-export const StateInspector = memo(function StateInspector<S, M, E>({
+export const StateInspector = memoGeneric(function StateInspector<
+  S,
+  M,
+  E extends object,
+>({
   state,
   connectionEvents,
-  connectedUsers,
   tasks,
-  userId,
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
   assetManager,
-  ephemeralUserData,
+  secretManager,
+  connectedUsersManager,
+  ephemeralUserDataManager,
   anchor = "right",
   forceInit,
   ...props
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
-  connectedUsers?: MultiplayerUser[];
   tasks?: Task[];
-  userId?: string;
   unstyled?: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
   assetManager: AssetManager;
-  ephemeralUserData: EphemeralUserData<E>;
+  connectedUsersManager: ConnectedUsersManager;
+  secretManager: SecretManager;
+  ephemeralUserDataManager: EphemeralUserDataManager<E>;
   forceInit: () => void;
 } & StateInspectorOptions &
   ComponentPropsWithoutRef<"div">) {
@@ -319,6 +324,10 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
     "noya-multiplayer-react-show-assets",
     false
   );
+  const [showSecrets, setShowSecrets] = useLocalStorageState(
+    "noya-multiplayer-react-show-secrets",
+    false
+  );
 
   useEffect(() => {
     shouldTrackEvents$.set(showEvents);
@@ -335,9 +344,12 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
     }
   }, [connectionEvents]);
 
-  const ephemeral = useEphemeralUserData(ephemeralUserData);
+  const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const secrets = useObservable(secretManager.secrets$);
+  const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
+  const userId = useObservable(connectedUsersManager.currentUserId$);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -766,6 +778,40 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
           ))}
         </div>
       </DisclosureSection>
+      <DisclosureSection
+        title="Secrets"
+        colorScheme={colorScheme}
+        open={showSecrets}
+        setOpen={setShowSecrets}
+        right={
+          <SmallButton
+            theme={theme}
+            onClick={() => {
+              const name = prompt("Enter secret name");
+              if (!name) return;
+              const value = prompt("Enter secret value");
+              if (!value) return;
+              secretManager.createSecret(name, value);
+            }}
+          >
+            Create
+          </SmallButton>
+        }
+      >
+        <div style={styles.sectionInner}>
+          {secrets.map((secret) => (
+            <InspectorRow key={secret.id} colorScheme={colorScheme}>
+              <ObjectInspector data={secret} theme={theme} />
+              <SmallButton
+                theme={theme}
+                onClick={() => secretManager.deleteSecret(secret.name)}
+              >
+                Delete
+              </SmallButton>
+            </InspectorRow>
+          ))}
+        </div>
+      </DisclosureSection>
       <DisclosureSection
         open={showEphemeral}
         setOpen={setShowEphemeral}

package/src/inspector/useStateInspector.tsx

@@ -2,10 +2,11 @@
 
 import {
   AssetManager,
+  ConnectedUsersManager,
   ConnectionEvent,
-  EphemeralUserData,
+  EphemeralUserDataManager,
   MultiplayerStateManager,
-  MultiplayerUser,
+  SecretManager,
   Task,
 } from "@noya-app/state-manager";
 import React, { ComponentProps, useLayoutEffect } from "react";
@@ -23,29 +24,29 @@ function createShadowRootElement() {
   return { host, container };
 }
 
-export function useStateInspector<S, M, E>({
+export function useStateInspector<S, M, E extends object>({
   state,
   connectionEvents,
-  connectedUsers,
   tasks,
-  userId,
   disabled = false,
   colorScheme,
   anchor,
   multiplayerStateManager,
   assetManager,
-  ephemeralUserData,
+  secretManager,
+  connectedUsersManager,
+  ephemeralUserDataManager,
   forceInit,
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
-  connectedUsers?: MultiplayerUser[];
   tasks?: Task[];
-  userId?: string;
   disabled: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
   assetManager: AssetManager;
-  ephemeralUserData: EphemeralUserData<E>;
+  secretManager: SecretManager;
+  connectedUsersManager: ConnectedUsersManager;
+  ephemeralUserDataManager: EphemeralUserDataManager<E>;
   forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
@@ -72,9 +73,7 @@ export function useStateInspector<S, M, E>({
       <StateInspector
         state={state}
         connectionEvents={connectionEvents}
-        connectedUsers={connectedUsers}
         tasks={tasks}
-        userId={userId}
         colorScheme={colorScheme}
         anchor={anchor}
         forceInit={forceInit}
@@ -82,21 +81,25 @@ export function useStateInspector<S, M, E>({
           multiplayerStateManager as MultiplayerStateManager<any, any>
         }
         assetManager={assetManager}
-        ephemeralUserData={ephemeralUserData as EphemeralUserData<any>}
+        secretManager={secretManager}
+        ephemeralUserDataManager={
+          ephemeralUserDataManager as EphemeralUserDataManager<any>
+        }
+        connectedUsersManager={connectedUsersManager}
       />
     );
   }, [
     anchor,
     colorScheme,
-    connectedUsers,
     connectionEvents,
     root,
     state,
     multiplayerStateManager,
-    userId,
     tasks,
     forceInit,
-    ephemeralUserData,
+    ephemeralUserDataManager,
     assetManager,
+    secretManager,
+    connectedUsersManager,
   ]);
 }

package/src/noyaApp.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-restricted-globals */
 import {
+  ConnectedUsersManager,
   createOrCastValue,
   findAllDefs,
   localStorageSync,
-  MultiplayerUser,
   Static,
   stubSync,
   SyncAdapter,
@@ -115,17 +115,25 @@ export type HostToIframeMessage = {
   };
 };
 
-export function useBroadcastConnectedUsers(connectedUsers: MultiplayerUser[]) {
+export function useBroadcastConnectedUsers(
+  connectedUsersManager: ConnectedUsersManager
+) {
   useEffect(() => {
     if (!isEmbeddedApp()) return;
 
-    const message: IframeToHostMessage = {
-      type: "multiplayer.setUsers",
-      payload: { users: connectedUsers },
-    };
+    const unsubscribe = connectedUsersManager.connectedUsers$.subscribe(
+      (users) => {
+        const message: IframeToHostMessage = {
+          type: "multiplayer.setUsers",
+          payload: { users },
+        };
 
-    parent?.postMessage(message, "*");
-  }, [connectedUsers]);
+        parent?.postMessage(message, "*");
+      }
+    );
+
+    return unsubscribe;
+  }, [connectedUsersManager]);
 }
 
 export function useBroadcastMenuItems<T>(
@@ -163,12 +171,12 @@ export function isEmbeddedApp() {
 export type UseNoyaStateOptions<
   S,
   M = void,
-  E = void,
+  E extends object = object,
 > = UseMultiplayerStateOptions<S, M, E> & {
   offlineStorageKey?: string;
 };
 
-export type UseNoyaStateResult<S, M = void, E = void> = [
+export type UseNoyaStateResult<S, M = void, E extends object = object> = [
   ReturnType<typeof useMultiplayerState<S, M, E>>[0],
   ReturnType<typeof useMultiplayerState<S, M, E>>[1],
   ReturnType<typeof useMultiplayerState<S, M, E>>[2] & {
@@ -189,7 +197,7 @@ export type UseNoyaStateResult<S, M = void, E = void> = [
 export function useNoyaState<
   S,
   M = void,
-  E = void,
+  E extends object = object,
   O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>,
 >(
   ...args:
@@ -244,7 +252,7 @@ export function useNoyaState<
 
   const [, , extras] = result;
 
-  useBroadcastConnectedUsers(extras.connectedUsers);
+  useBroadcastConnectedUsers(extras.connectedUsersManager);
 
   const mergedExtras = useMemo(() => {
     return { ...extras, theme, viewType } as const;

package/src/useObservable.ts

@@ -1,25 +1,72 @@
-import { GetAtPath, Observable, PathKey } from "@noya-app/observable";
+import {
+  GetAtPath,
+  Observable,
+  ObservableOptions,
+  PathKey,
+} from "@noya-app/observable";
 import { useMemo, useSyncExternalStore } from "react";
 
+// Overloads for when observable is definitely defined
 export function useObservable<T>(observable: Observable<T>): T;
+export function useObservable<T, A>(
+  observable: Observable<T>,
+  selector: (value: T) => A,
+  options?: Pick<ObservableOptions, "isEqual">
+): A;
 export function useObservable<T, P extends PathKey[] | string>(
   observable: Observable<T>,
   path: P
 ): GetAtPath<T, P>;
+
+// Overloads for when observable might be undefined
+export function useObservable<T>(
+  observable: Observable<T> | undefined
+): T | undefined;
+export function useObservable<T, A>(
+  observable: Observable<T> | undefined,
+  selector: (value: T) => A,
+  options?: Pick<ObservableOptions, "isEqual">
+): A | undefined;
+export function useObservable<T, P extends PathKey[] | string>(
+  observable: Observable<T> | undefined,
+  path: P
+): GetAtPath<T, P> | undefined;
+
+// Implementation
 export function useObservable<T, P extends PathKey[]>(
-  observable: Observable<T>,
-  path?: P
+  observable: Observable<T> | undefined,
+  pathOrSelector?: P | ((value: T) => any),
+  options?: Pick<ObservableOptions, "isEqual">
 ) {
   const { get, listen } = useMemo(() => {
-    const listen = path
+    if (!observable) {
+      return {
+        get: () => undefined,
+        listen: () => () => {},
+      };
+    }
+
+    if (typeof pathOrSelector === "function") {
+      const mappedObservable = observable.map(pathOrSelector, {
+        isEqual: options?.isEqual,
+      });
+      return {
+        get: mappedObservable.get,
+        listen: mappedObservable.subscribe,
+      };
+    }
+
+    const listen = pathOrSelector
       ? (callback: (value: GetAtPath<T, P>) => void) =>
-          observable.subscribe(path, callback)
+          observable.subscribe(pathOrSelector, callback)
       : observable.subscribe;
 
-    const get: () => void = path ? () => observable.get(path) : observable.get;
+    const get: () => void = pathOrSelector
+      ? () => observable.get(pathOrSelector)
+      : observable.get;
 
     return { get, listen };
-  }, [observable, path]);
+  }, [observable, pathOrSelector, options?.isEqual]);
 
   return useSyncExternalStore(listen, get, get);
 }