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

package/src/noyaApp.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-restricted-globals */
 import {
-  ConnectedUsersManager,
   createOrCastValue,
   findAllDefs,
+  isEmbeddedApp,
   localStorageSync,
+  parentFrameSync,
   Static,
   stubSync,
   SyncAdapter,
@@ -11,7 +12,7 @@ import {
   TypeGuard,
   webSocketSync,
 } from "@noya-app/state-manager";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useMultiplayerState, UseMultiplayerStateOptions } from "./hooks";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 
@@ -94,92 +95,24 @@ export function getAppData<State>(
   return appData as AppData<State>;
 }
 
-export type IframeToHostMessage =
-  | {
-      type: "application.setMenuItems";
-      payload: {
-        menuItems: any[];
-      };
-    }
-  | {
-      type: "multiplayer.setUsers";
-      payload: {
-        users: any[];
-      };
-    };
-
-export type HostToIframeMessage = {
-  type: "application.selectMenuItem";
-  payload: {
-    value: string;
-  };
-};
-
-export function useBroadcastConnectedUsers(
-  connectedUsersManager: ConnectedUsersManager
-) {
-  useEffect(() => {
-    if (!isEmbeddedApp()) return;
-
-    const unsubscribe = connectedUsersManager.connectedUsers$.subscribe(
-      (users) => {
-        const message: IframeToHostMessage = {
-          type: "multiplayer.setUsers",
-          payload: { users },
-        };
-
-        parent?.postMessage(message, "*");
-      }
-    );
-
-    return unsubscribe;
-  }, [connectedUsersManager]);
-}
-
-export function useBroadcastMenuItems<T>(
-  menuItems: any[],
-  handleSelectMenuItem: (value: T) => void
-) {
-  useEffect(() => {
-    if (!isEmbeddedApp()) return;
-
-    const message: IframeToHostMessage = {
-      type: "application.setMenuItems",
-      payload: { menuItems },
-    };
-
-    parent?.postMessage(message, "*");
-
-    const listener = (event: MessageEvent<HostToIframeMessage>) => {
-      if (event.data.type === "application.selectMenuItem") {
-        handleSelectMenuItem(event.data.payload.value as T);
-      }
-    };
-
-    window.addEventListener("message", listener);
-
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }, [handleSelectMenuItem, menuItems]);
-}
-
-export function isEmbeddedApp() {
-  return window.self !== window.top;
-}
-
 export type UseNoyaStateOptions<
   S,
-  M = void,
+  M extends object = object,
   E extends object = object,
-> = UseMultiplayerStateOptions<S, M, E> & {
+  MenuT extends string = string,
+> = UseMultiplayerStateOptions<S, M, E, MenuT> & {
   offlineStorageKey?: string;
 };
 
-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] & {
+export type UseNoyaStateResult<
+  S,
+  M extends object = object,
+  E extends object = object,
+  MenuT extends string = string,
+> = [
+  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[0],
+  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[1],
+  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[2] & {
     theme: AppTheme;
     viewType: AppViewType;
   },
@@ -196,9 +129,15 @@ export type UseNoyaStateResult<S, M = void, E extends object = object> = [
  */
 export function useNoyaState<
   S,
-  M = void,
+  M extends object = object,
   E extends object = object,
-  O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>,
+  MenuT extends string = string,
+  O extends UseNoyaStateOptions<S, M, E, MenuT> = UseNoyaStateOptions<
+    S,
+    M,
+    E,
+    MenuT
+  >,
 >(
   ...args:
     | [
@@ -211,7 +150,8 @@ export function useNoyaState<
 ): UseNoyaStateResult<
   O["schema"] extends TSchema ? Static<O["schema"]> : S,
   M,
-  E
+  E,
+  MenuT
 > {
   const [initialState, options] =
     typeof args[0] === "object" &&
@@ -236,13 +176,15 @@ export function useNoyaState<
     });
   });
 
-  const sync = useMemo((): SyncAdapter<S, M, E> => {
-    return multiplayerUrl
-      ? webSocketSync(multiplayerUrl)
-      : options?.offlineStorageKey
-        ? localStorageSync({ key: options.offlineStorageKey })
-        : stubSync();
-  }, [multiplayerUrl, options?.offlineStorageKey]);
+  const sync = useMemo((): SyncAdapter<S, M, E, MenuT> => {
+    return isEmbeddedApp()
+      ? parentFrameSync<S, M, E, MenuT>({ debug: options?.debug })
+      : multiplayerUrl
+        ? webSocketSync<S, M, E, MenuT>(multiplayerUrl)
+        : options?.offlineStorageKey
+          ? localStorageSync<S, M, E, MenuT>({ key: options.offlineStorageKey })
+          : stubSync<S, M, E, MenuT>();
+  }, [multiplayerUrl, options?.offlineStorageKey, options?.debug]);
 
   const result = useMultiplayerState(noyaAppInitialState as S, {
     ...options,
@@ -252,8 +194,6 @@ export function useNoyaState<
 
   const [, , extras] = result;
 
-  useBroadcastConnectedUsers(extras.connectedUsersManager);
-
   const mergedExtras = useMemo(() => {
     return { ...extras, theme, viewType } as const;
   }, [extras, theme, viewType]);
@@ -261,7 +201,8 @@ export function useNoyaState<
   return [result[0], result[1], mergedExtras] as UseNoyaStateResult<
     O["schema"] extends TSchema ? Static<O["schema"]> : S,
     M,
-    E
+    E,
+    MenuT
   >;
 }
 

package/src/globals.ts

@@ -1,4 +0,0 @@
-import { Observable } from "@noya-app/observable";
-
-export const shouldTrackEvents$ = new Observable(false);
-export const shouldTrackTasks$ = new Observable(false);