@noya-app/noya-multiplayer-react 0.1.47 → 0.1.49

package/src/NoyaStateContext.tsx

@@ -1,3 +1,4 @@
+import { MenuItem } from "@noya-app/noya-designsystem";
 import {
   GetAtPath,
   Observable,
@@ -21,7 +22,12 @@ import React, {
   useEffect,
   useMemo,
 } from "react";
-import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
+import {
+  AppTheme,
+  AppViewType,
+  useNoyaState,
+  UseNoyaStateOptions,
+} from "./noyaApp";
 import { useObservable } from "./useObservable";
 
 interface NoyaStateProviderProps<
@@ -39,10 +45,15 @@ interface NoyaStateProviderProps<
 }
 
 const AnyNoyaStateContext = createContext<
-  NoyaManager<any, any, any, any> | undefined
+  | {
+      noyaManager: NoyaManager<any, any, any, any>;
+      theme: AppTheme;
+      viewType: AppViewType;
+    }
+  | undefined
 >(undefined);
 
-function useAnyNoyaStateContext() {
+export function useAnyNoyaStateContext() {
   const value = useContext(AnyNoyaStateContext);
 
   if (!value) {
@@ -54,81 +65,99 @@ function useAnyNoyaStateContext() {
   return value;
 }
 
+export function useAnyNoyaManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager as NoyaManager<any, any, any, any>;
+}
+
+export function useColorScheme() {
+  const { theme } = useAnyNoyaStateContext();
+  return theme;
+}
+
+export function useViewType() {
+  const { viewType } = useAnyNoyaStateContext();
+  return viewType;
+}
+
 export function useAssets() {
-  const { assetManager } = useAnyNoyaStateContext();
-  return useObservable(assetManager.assets$);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.assetManager.assets$);
 }
 
 export function useAsset(id: string | undefined) {
-  const { assetManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
   const observable = useMemo(
-    () => assetManager.assets$.map((assets) => assets.find((a) => a.id === id)),
-    [assetManager, id]
+    () =>
+      noyaManager.assetManager.assets$.map((assets) =>
+        assets.find((a) => a.id === id)
+      ),
+    [noyaManager, id]
   );
   return useObservable(observable);
 }
 
 export function useAssetManager() {
-  const { assetManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
+  const isInitialized = useObservable(noyaManager.assetManager.isInitialized$);
   return useMemo(
     () => ({
-      create: assetManager.create,
-      delete: assetManager.delete,
+      create: noyaManager.assetManager.create,
+      delete: noyaManager.assetManager.delete,
+      isInitialized,
     }),
-    [assetManager]
+    [noyaManager, isInitialized]
   );
 }
 
 export function useAIManager() {
-  const { aiManager } = useAnyNoyaStateContext();
-  return aiManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.aiManager;
 }
 
 export function useSecretManager() {
-  const { secretManager } = useAnyNoyaStateContext();
-  return secretManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.secretManager;
 }
 
 export function useSecrets() {
-  const { secretManager } = useAnyNoyaStateContext();
-  return useObservable(secretManager.secrets$);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.secretManager.secrets$);
 }
 
 export function useSecret(name: string) {
-  const { secretManager } = useAnyNoyaStateContext();
+  const { noyaManager } = useAnyNoyaStateContext();
 
   return useObservable(
-    secretManager.secrets$,
+    noyaManager.secretManager.secrets$,
     useCallback((secrets) => secrets.find((s) => s.name === name), [name])
   );
 }
 
 export function useIsInitialized() {
-  const {
-    multiplayerStateManager: ms,
-    secretManager,
-    assetManager,
-  } = useAnyNoyaStateContext();
+  const { noyaManager, viewType } = useAnyNoyaStateContext();
 
   const isInitializedObservable = useMemo(
     () =>
       Observable.combine(
         [
-          ms.isInitialized$,
-          secretManager.isInitialized$,
-          assetManager.isInitialized$,
+          ...(viewType === "preview"
+            ? []
+            : [noyaManager.multiplayerStateManager.isInitialized$]),
+          noyaManager.secretManager.isInitialized$,
+          noyaManager.assetManager.isInitialized$,
         ],
         (values) => values.every((v) => v)
       ),
-    [ms, secretManager, assetManager]
+    [noyaManager, viewType]
   );
 
   return useObservable(isInitializedObservable);
 }
 
 export function useWorkflowManager() {
-  const { workflowManager } = useAnyNoyaStateContext();
-  return workflowManager;
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.workflowManager;
 }
 
 export const ConnectedUsersContext = createContext<
@@ -195,14 +224,26 @@ export function createNoyaContext<
     initialState,
     ...options
   }: NoyaStateProviderProps<S, M, E, MenuT>) {
-    const [, , { noyaManager }] = useNoyaState<S, M, E, MenuT>(initialState, {
-      ...(options as any),
-      schema,
-      mergeHistoryEntries,
-    });
+    const [, , { noyaManager, theme, viewType }] = useNoyaState<S, M, E, MenuT>(
+      initialState,
+      {
+        ...(options as any),
+        schema,
+        mergeHistoryEntries,
+      }
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        noyaManager,
+        theme,
+        viewType,
+      }),
+      [noyaManager, theme, viewType]
+    );
 
     return (
-      <AnyNoyaStateContext.Provider value={noyaManager}>
+      <AnyNoyaStateContext.Provider value={contextValue}>
         <ConnectedUsersContext.Provider
           value={noyaManager.connectedUsersManager}
         >
@@ -232,17 +273,19 @@ export function createNoyaContext<
     path?: PathKey[] | string | ((value: S) => any),
     options?: Pick<ObservableOptions, "isEqual">
   ) {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
     let actualPath: PathKey[] | string =
       typeof path === "function" || !path ? "" : path;
 
     const mappedObservable = useMemo(() => {
       if (typeof path === "function") {
-        return ms.optimisticState$.map(path, { isEqual: options?.isEqual });
+        return noyaManager.multiplayerStateManager.optimisticState$.map(path, {
+          isEqual: options?.isEqual,
+        });
       }
-      return ms.optimisticState$;
-    }, [ms, path, options?.isEqual]);
+      return noyaManager.multiplayerStateManager.optimisticState$;
+    }, [noyaManager, path, options?.isEqual]);
 
     const value = useObservable(mappedObservable, actualPath);
 
@@ -262,7 +305,7 @@ export function createNoyaContext<
       | [value: SetStateAction<GetAtPath<S, P>>]
   ) => void;
   function useSetValue<P extends PathKey[] | string>(path?: P) {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
     const setValue = useCallback(
       (
@@ -272,9 +315,13 @@ export function createNoyaContext<
       ): void => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
 
-        ms.setStateAtPath(metadata, (path ?? "") as P, value as never);
+        noyaManager.multiplayerStateManager.setStateAtPath(
+          metadata,
+          (path ?? "") as P,
+          value as never
+        );
       },
-      [ms, path]
+      [noyaManager, path]
     );
 
     return setValue;
@@ -323,9 +370,9 @@ export function createNoyaContext<
   }
 
   function useStateManager() {
-    const { multiplayerStateManager: ms } = useAnyNoyaStateContext();
+    const { noyaManager } = useAnyNoyaStateContext();
 
-    return ms as MultiplayerStateManager<S, M>;
+    return noyaManager.multiplayerStateManager as MultiplayerStateManager<S, M>;
   }
 
   function useEphemeralUserDataManager() {
@@ -341,19 +388,41 @@ export function createNoyaContext<
   }
 
   function useNoyaManager() {
-    return useAnyNoyaStateContext() as NoyaManager<S, M, E, MenuT>;
+    return useAnyNoyaStateContext().noyaManager as NoyaManager<S, M, E, MenuT>;
   }
 
   function useLeftMenuItems() {
     const { menuManager } = useNoyaManager();
+
     return useObservable(menuManager.leftMenuItems$);
   }
 
+  function useSetLeftMenuItems(leftMenuItems?: MenuItem<MenuT>[]) {
+    const { menuManager } = useNoyaManager();
+
+    useEffect(() => {
+      if (leftMenuItems) {
+        menuManager.setLeftMenuItems(leftMenuItems);
+      }
+    }, [menuManager, leftMenuItems]);
+  }
+
   function useRightMenuItems() {
     const { menuManager } = useNoyaManager();
+
     return useObservable(menuManager.rightMenuItems$);
   }
 
+  function useSetRightMenuItems(rightMenuItems?: MenuItem<MenuT>[]) {
+    const { menuManager } = useNoyaManager();
+
+    useEffect(() => {
+      if (rightMenuItems) {
+        menuManager.setRightMenuItems(rightMenuItems);
+      }
+    }, [menuManager, rightMenuItems]);
+  }
+
   function useHandleMenuItem(callback: (type: MenuT) => void) {
     const { menuManager } = useNoyaManager();
 
@@ -368,6 +437,20 @@ export function createNoyaContext<
     return useCallback((type: MenuT) => menuManager.emit(type), [menuManager]);
   }
 
+  function useMenu(options: {
+    leftMenuItems?: MenuItem<MenuT>[];
+    rightMenuItems?: MenuItem<MenuT>[];
+    onSelectMenuItem?: (type: MenuT) => void;
+  }) {
+    const { leftMenuItems, rightMenuItems, onSelectMenuItem } = options;
+
+    useSetLeftMenuItems(leftMenuItems);
+    useSetRightMenuItems(rightMenuItems);
+
+    const noop = useCallback(() => {}, []);
+    useHandleMenuItem(onSelectMenuItem ?? noop);
+  }
+
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
@@ -377,9 +460,12 @@ export function createNoyaContext<
     useStateManager,
     useEphemeralUserDataManager,
     useLeftMenuItems,
+    useSetLeftMenuItems,
     useRightMenuItems,
+    useSetRightMenuItems,
     useHandleMenuItem,
     useOnSelectMenuItemCallback,
     useNoyaManager,
+    useMenu,
   };
 }

package/src/noyaApp.ts

@@ -180,7 +180,10 @@ export function useNoyaState<
     return isEmbeddedApp()
       ? parentFrameSync<S, M, E, MenuT>({ debug: options?.debug })
       : multiplayerUrl
-        ? webSocketSync<S, M, E, MenuT>(multiplayerUrl)
+        ? webSocketSync<S, M, E, MenuT>({
+            url: multiplayerUrl,
+            debug: options?.debug,
+          })
         : options?.offlineStorageKey
           ? localStorageSync<S, M, E, MenuT>({ key: options.offlineStorageKey })
           : stubSync<S, M, E, MenuT>();