@noya-app/noya-multiplayer-react 0.1.22 → 0.1.24

package/src/{embedded.ts → noyaApp.ts}

@@ -1,6 +1,15 @@
 /* eslint-disable no-restricted-globals */
-import { createValue, MultiplayerUser, TSchema } from "@noya-app/state-manager";
-import { useEffect, useMemo } from "react";
+import {
+  createValue,
+  localStorageSync,
+  MultiplayerUser,
+  SyncAdapter,
+  TSchema,
+  webSocketSync,
+} from "@noya-app/state-manager";
+import { useEffect, useMemo, useState } from "react";
+import { useMultiplayerState, UseMultiplayerStateOptions } from "./hooks";
+import { StateInspectorOptions } from "./inspector/StateInspector";
 
 export type AppViewType = "editable" | "readOnly" | "preview";
 
@@ -11,7 +20,7 @@ export type AppData<State> = {
   theme: AppTheme;
   viewType: AppViewType;
   initialState: State;
-  inspector: boolean;
+  inspector: boolean | StateInspectorOptions;
 };
 
 export function createDefaultAppData<State>(
@@ -47,16 +56,16 @@ export function getAppData<State>(
   }
 }
 
-type NoyaAppOptions = {
+type AppDataOptions = {
   schema?: TSchema;
 };
 
 /**
  * Get data from host app. Fall back to default data.
  */
-export function useNoyaApp<State>(
-  initialState: State,
-  { schema }: NoyaAppOptions = {}
+export function useAppData<S extends object>(
+  initialState: S,
+  { schema }: AppDataOptions = {}
 ) {
   const appData = useMemo(() => {
     return getAppData(
@@ -132,3 +141,45 @@ export function useBroadcastMenuItems<T>(
 export function isEmbeddedApp() {
   return window.self !== window.top;
 }
+
+export function useNoyaAppState<S extends object, M = void, E = void>(
+  initialState: S | (() => S),
+  options: UseMultiplayerStateOptions<S, M, E> & {
+    localStorageKey?: string;
+  }
+) {
+  // Resolve state to a value
+  const [state] = useState(initialState);
+
+  const {
+    multiplayerUrl,
+    inspector,
+    initialState: noyaAppInitialState,
+    theme,
+    viewType,
+  } = useAppData(state, {
+    schema: options.schema,
+  });
+
+  const sync = useMemo((): SyncAdapter<S, M, E> => {
+    return multiplayerUrl
+      ? webSocketSync(multiplayerUrl)
+      : localStorageSync({ key: options.localStorageKey || "noya-app" });
+  }, [multiplayerUrl, options.localStorageKey]);
+
+  const result = useMultiplayerState(noyaAppInitialState, {
+    ...options,
+    inspector: options.inspector ?? inspector,
+    sync,
+  });
+
+  const [, , extras] = result;
+
+  useBroadcastConnectedUsers(extras.connectedUsers);
+
+  const mergedExtras = useMemo(() => {
+    return { ...extras, theme, viewType } as const;
+  }, [extras, theme, viewType]);
+
+  return [result[0], result[1], mergedExtras] as const;
+}