@noya-app/noya-multiplayer-react 0.1.39 → 0.1.40

package/src/NoyaStateContext.tsx

@@ -2,6 +2,7 @@ import { GetAtPath, ObservableOptions, PathKey } from "@noya-app/observable";
 import {
   AssetManager,
   MultiplayerStateManager,
+  StateManagerOptions,
   Static,
   TSchema,
 } from "@noya-app/state-manager";
@@ -15,10 +16,10 @@ import React, {
 import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
 import { useObservable } from "./useObservable";
 
-interface NoyaStateProviderProps<Schema extends TSchema, M, E>
-  extends Omit<UseNoyaStateOptions<Static<Schema>, M, E>, "schema"> {
+interface NoyaStateProviderProps<S, M, E>
+  extends Omit<UseNoyaStateOptions<S, M, E>, "schema" | "mergeHistoryEntries"> {
   children: React.ReactNode;
-  initialState?: Static<Schema>;
+  initialState?: S;
 }
 
 const AnyNoyaStateContext = createContext<
@@ -65,12 +66,19 @@ export function useAssetManager() {
 
 export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
   schema,
+  mergeHistoryEntries,
 }: {
   schema: Schema;
+  mergeHistoryEntries?: StateManagerOptions<
+    Static<Schema>,
+    M
+  >["mergeHistoryEntries"];
 }) {
+  type S = Static<Schema>;
+
   const NoyaStateContext = AnyNoyaStateContext as React.Context<
     | {
-        ms: MultiplayerStateManager<Static<Schema>, M>;
+        ms: MultiplayerStateManager<S, M>;
         assetManager: AssetManager;
       }
     | undefined
@@ -80,12 +88,13 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     children,
     initialState,
     ...options
-  }: NoyaStateProviderProps<Schema, M, E>) {
+  }: NoyaStateProviderProps<S, M, E>) {
     const [, , { multiplayerStateManager, assetManager }] = useNoyaState(
       initialState,
       {
         ...(options as any),
         schema,
+        mergeHistoryEntries,
       }
     );
 
@@ -104,8 +113,6 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     );
   }
 
-  type S = Static<Schema>;
-
   function useValue(): S;
   function useValue<A>(
     selector: (value: S) => A,
@@ -205,12 +212,21 @@ export function createNoyaContext<Schema extends TSchema, M = void, E = void>({
     return [value, setValue];
   }
 
+  function useStateManager() {
+    const { ms } = useAnyNoyaStateContext() as {
+      ms: MultiplayerStateManager<S, M>;
+    };
+
+    return ms;
+  }
+
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
     useValue,
     useSetValue,
     useValueState,
+    useStateManager,
     // useAssets,
     // useAssetManager,
     // useAsset,

package/dist/index.d.mts

@@ -1,204 +0,0 @@
-import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, AssetManager, StateManager, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
-export * from '@noya-app/state-manager';
-import React, { ComponentPropsWithoutRef, SetStateAction } from 'react';
-import { GetAtPath, ObservableOptions, PathKey, Observable } from '@noya-app/observable';
-
-declare function getAvatarInitials(name: string): string;
-/**
- * Create a background color and initials from a name
- *
- * Adapted from https://mui.com/material-ui/react-avatar/
- */
-declare function getAvatarStyle(name: string): {
-    color: string;
-    backgroundColor: string;
-};
-
-type Point = {
-    x: number;
-    y: number;
-};
-type UserPointerData = {
-    pointer?: Point;
-};
-type UserPointerProps<E extends UserPointerData> = {
-    user: MultiplayerUser;
-    ephemeralUserData: EphemeralUserData<E>;
-    hideAfter?: number;
-};
-declare const UserPointer_: <E extends UserPointerData>({ user, ephemeralUserData, hideAfter, }: UserPointerProps<E>) => React.JSX.Element | null;
-declare const UserPointer: typeof UserPointer_;
-declare const UserPointerContainer: React.NamedExoticComponent<{
-    point: Point;
-    children: React.ReactNode;
-    show?: boolean;
-}>;
-declare const UserNameTag: React.NamedExoticComponent<{
-    background: string;
-    children: React.ReactNode;
-}>;
-type UserPointersOverlayProps<E extends UserPointerData> = {
-    connectedUsers: MultiplayerUser[];
-    ephemeralUserData: EphemeralUserData<E>;
-};
-declare const UserPointersOverlay: React.MemoExoticComponent<(<E extends UserPointerData>({ connectedUsers, ephemeralUserData }: UserPointersOverlayProps<E>) => React.JSX.Element)>;
-declare const UserPointerIcon: React.NamedExoticComponent<{
-    color?: string;
-}>;
-
-type StateInspectorAnchor = "left" | "right" | "bottom left" | "bottom right";
-type StateInspectorOptions = {
-    colorScheme?: "light" | "dark";
-    anchor?: StateInspectorAnchor;
-};
-declare const StateInspector: React.MemoExoticComponent<(<S, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, assetManager, ephemeralUserData, anchor, forceInit, ...props }: {
-    state: S;
-    connectionEvents?: ConnectionEvent<S>[];
-    connectedUsers?: MultiplayerUser[];
-    tasks?: Task[];
-    userId?: string;
-    unstyled?: boolean;
-    multiplayerStateManager: MultiplayerStateManager<S, M>;
-    assetManager: AssetManager;
-    ephemeralUserData: EphemeralUserData<E>;
-    forceInit: () => void;
-} & StateInspectorOptions & ComponentPropsWithoutRef<"div">) => React.JSX.Element | null)>;
-
-declare function useSyncStateManager<S, M>(stateManager: StateManager<S, M>): S;
-declare function useSyncStateManager<S, M, P extends string>(stateManager: StateManager<S, M>, path: P): GetAtPath<S, P>;
-declare function useManagedState<S, M = void>(createInitialState: () => S, options?: StateManagerOptions<S, M>): readonly [S, (...args: M extends {} ? [metadata: M, action: SetStateAction<S>] : [action: SetStateAction<S>]) => void, StateManager<S, M>];
-declare function useManagedHistory<S, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
-declare function useSyncMultiplayerStateManager<S, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>, options?: {
-    throttle?: number;
-}): {
-    data: Record<string, E | undefined>;
-    metadata: Record<string, _noya_app_state_manager.EphemeralUserMetadata | undefined>;
-    currentUserId: string | undefined;
-};
-type UseMultiplayerStateOptions<S, M = void, E = void> = MultiplayerStateManagerOptions<S, M> & {
-    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData" | "assetManager">) => void;
-    trackConnectionEvents?: boolean;
-    trackTasks?: boolean;
-    inspector?: boolean | StateInspectorOptions;
-};
-declare function useMultiplayerState<S, M = void, E = void>(initialState: S | (() => S), options?: UseMultiplayerStateOptions<S, M, E>): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, {
-    tasks: Task[];
-    userId: string | undefined;
-    connectionEvents: ConnectionEvent<S>[] | undefined;
-    connectedUsers: MultiplayerUser[];
-    ephemeralUserData: EphemeralUserData<E>;
-    multiplayerStateManager: MultiplayerStateManager<S, M>;
-    assets: _noya_app_state_manager.Asset[];
-    assetManager: AssetManager;
-    createAsset: (options: _noya_app_state_manager.CreateAssetOptions | Uint8Array | File | Blob) => Promise<_noya_app_state_manager.Asset>;
-    deleteAsset: (id: string) => Promise<void>;
-}];
-
-type AppViewType = "editable" | "readOnly" | "preview";
-type AppTheme = "light" | "dark";
-type AppData<State> = {
-    multiplayerUrl?: string;
-    theme: AppTheme;
-    viewType: AppViewType;
-    initialState: State;
-    inspector: boolean | StateInspectorOptions;
-};
-declare function createDefaultAppData<State>(initialState: State): AppData<State>;
-type GetAppDataOptions = {
-    window?: {
-        location: {
-            hash: string;
-        };
-    };
-    overrideExistingState?: boolean;
-};
-declare function enforceSchema<State>(initialState: State, schema?: TSchema): State;
-declare function parseAppDataParameter(options?: GetAppDataOptions): AppData<unknown> | null;
-declare function getAppData<State>(initialState: State | (() => State), schema?: TSchema, options?: GetAppDataOptions): AppData<State>;
-type IframeToHostMessage = {
-    type: "application.setMenuItems";
-    payload: {
-        menuItems: any[];
-    };
-} | {
-    type: "multiplayer.setUsers";
-    payload: {
-        users: any[];
-    };
-};
-type HostToIframeMessage = {
-    type: "application.selectMenuItem";
-    payload: {
-        value: string;
-    };
-};
-declare function useBroadcastConnectedUsers(connectedUsers: MultiplayerUser[]): void;
-declare function useBroadcastMenuItems<T>(menuItems: any[], handleSelectMenuItem: (value: T) => void): void;
-declare function isEmbeddedApp(): boolean;
-type UseNoyaStateOptions<S, M = void, E = void> = UseMultiplayerStateOptions<S, M, E> & {
-    offlineStorageKey?: string;
-};
-type UseNoyaStateResult<S, M = void, E = void> = [
-    ReturnType<typeof useMultiplayerState<S, M, E>>[0],
-    ReturnType<typeof useMultiplayerState<S, M, E>>[1],
-    ReturnType<typeof useMultiplayerState<S, M, E>>[2] & {
-        theme: AppTheme;
-        viewType: AppViewType;
-    }
-];
-/**
- * Sync data locally or to a multiplayer server.
- *
- * There are 3 ways to use this hook:
- *
- * 1. Pass an initial state: `useNoyaState(initialState)`
- * 2. Pass an initial state and a schema: `useNoyaState(initialState, { schema })`
- * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaState({ schema })`
- */
-declare function useNoyaState<S, M = void, E = void, O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>>(...args: [
-    initialState: O["schema"] extends TSchema ? Static<O["schema"]> | (() => Static<O["schema"]>) : S | (() => S),
-    options?: O
-] | [options: O & {
-    schema: TSchema;
-}]): UseNoyaStateResult<O["schema"] extends TSchema ? Static<O["schema"]> : S, M, E>;
-
-interface NoyaStateProviderProps<Schema extends TSchema, M, E> extends Omit<UseNoyaStateOptions<Static<Schema>, M, E>, "schema"> {
-    children: React.ReactNode;
-    initialState?: Static<Schema>;
-}
-declare function useAssets(): _noya_app_state_manager.Asset[];
-declare function useAsset(id: string | undefined): _noya_app_state_manager.Asset | undefined;
-declare function useAssetManager(): {
-    create: (options: _noya_app_state_manager.CreateAssetOptions | Uint8Array | File | Blob) => Promise<_noya_app_state_manager.Asset>;
-    delete: (id: string) => Promise<void>;
-};
-declare function createNoyaContext<Schema extends TSchema, M = void, E = void>({ schema, }: {
-    schema: Schema;
-}): {
-    Context: React.Context<{
-        ms: MultiplayerStateManager<Static<Schema>, M>;
-        assetManager: AssetManager;
-    } | undefined>;
-    Provider: ({ children, initialState, ...options }: NoyaStateProviderProps<Schema, M, E>) => React.JSX.Element;
-    useValue: {
-        (): Static<Schema>;
-        <A>(selector: (value: Static<Schema>) => A, options?: Pick<ObservableOptions, "isEqual">): A;
-        <P extends PathKey[] | string>(path: P): GetAtPath<Static<Schema>, P>;
-    };
-    useSetValue: {
-        (): M extends {} ? (metadata: M, value: SetStateAction<Static<Schema>>) => void : (value: SetStateAction<Static<Schema>>) => void;
-        <P extends PathKey[] | string>(path: P): M extends {} ? (metadata: M, value: SetStateAction<GetAtPath<Static<Schema>, P>>) => void : (value: SetStateAction<GetAtPath<Static<Schema>, P>>) => void;
-    };
-    useValueState: {
-        (): [Static<Schema>, M extends {} ? (metadata: M, value: SetStateAction<Static<Schema>>) => void : (value: SetStateAction<Static<Schema>>) => void];
-        <A>(selector: (value: Static<Schema>) => A, options?: ObservableOptions): [A, M extends {} ? (metadata: M, value: SetStateAction<Static<Schema>>) => void : (value: SetStateAction<Static<Schema>>) => void];
-        <P extends PathKey[] | string>(path?: P): [GetAtPath<Static<Schema>, P>, M extends {} ? (metadata: M, value: SetStateAction<GetAtPath<Static<Schema>, P>>) => void : (value: SetStateAction<GetAtPath<Static<Schema>, P>>) => void];
-    };
-};
-
-declare function useObservable<T>(observable: Observable<T>): T;
-declare function useObservable<T, P extends PathKey[] | string>(observable: Observable<T>, path: P): GetAtPath<T, P>;
-
-export { type AppData, type AppTheme, type AppViewType, type GetAppDataOptions, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, type UseNoyaStateOptions, type UseNoyaStateResult, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, createNoyaContext, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useAsset, useAssetManager, useAssets, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };