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

package/src/NoyaStateContext.tsx

@@ -0,0 +1,234 @@
+import { GetAtPath, ObservableOptions, PathKey } from "@noya-app/observable";
+import {
+  AssetManager,
+  MultiplayerStateManager,
+  StateManagerOptions,
+  Static,
+  TSchema,
+} from "@noya-app/state-manager";
+import React, {
+  createContext,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
+import { useNoyaState, UseNoyaStateOptions } from "./noyaApp";
+import { useObservable } from "./useObservable";
+
+interface NoyaStateProviderProps<S, M, E>
+  extends Omit<UseNoyaStateOptions<S, M, E>, "schema" | "mergeHistoryEntries"> {
+  children: React.ReactNode;
+  initialState?: S;
+}
+
+const AnyNoyaStateContext = createContext<
+  | { ms: MultiplayerStateManager<any, any>; assetManager: AssetManager }
+  | undefined
+>(undefined);
+
+function useAnyNoyaStateContext() {
+  const value = useContext(AnyNoyaStateContext);
+
+  if (!value) {
+    throw new Error(
+      "useNoyaStateContext must be used within a NoyaStateProvider"
+    );
+  }
+
+  return value;
+}
+
+export function useAssets() {
+  const { assetManager } = useAnyNoyaStateContext();
+  return useObservable(assetManager.assets$);
+}
+
+export function useAsset(id: string | undefined) {
+  const { assetManager } = useAnyNoyaStateContext();
+  const observable = useMemo(
+    () => assetManager.assets$.map((assets) => assets.find((a) => a.id === id)),
+    [assetManager, id]
+  );
+  return useObservable(observable);
+}
+
+export function useAssetManager() {
+  const { assetManager } = useAnyNoyaStateContext();
+  return useMemo(
+    () => ({
+      create: assetManager.create,
+      delete: assetManager.delete,
+    }),
+    [assetManager]
+  );
+}
+
+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<S, M>;
+        assetManager: AssetManager;
+      }
+    | undefined
+  >;
+
+  function NoyaStateProvider({
+    children,
+    initialState,
+    ...options
+  }: NoyaStateProviderProps<S, M, E>) {
+    const [, , { multiplayerStateManager, assetManager }] = useNoyaState(
+      initialState,
+      {
+        ...(options as any),
+        schema,
+        mergeHistoryEntries,
+      }
+    );
+
+    const value = useMemo(
+      () => ({
+        ms: multiplayerStateManager as MultiplayerStateManager<any, any>,
+        assetManager,
+      }),
+      [multiplayerStateManager, assetManager]
+    );
+
+    return (
+      <AnyNoyaStateContext.Provider value={value}>
+        {children}
+      </AnyNoyaStateContext.Provider>
+    );
+  }
+
+  function useValue(): S;
+  function useValue<A>(
+    selector: (value: S) => A,
+    options?: Pick<ObservableOptions, "isEqual">
+  ): A;
+  function useValue<P extends PathKey[] | string>(path: P): GetAtPath<S, P>;
+  function useValue(
+    path?: PathKey[] | string | ((value: S) => any),
+    options?: Pick<ObservableOptions, "isEqual">
+  ) {
+    const { ms } = 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 ms.optimisticState$;
+    }, [ms, path, options?.isEqual]);
+
+    const value = useObservable(mappedObservable, actualPath);
+
+    return value;
+  }
+
+  function useSetValue(): M extends {}
+    ? (metadata: M, value: SetStateAction<S>) => void
+    : (value: SetStateAction<S>) => void;
+  function useSetValue<P extends PathKey[] | string>(
+    path: P
+  ): M extends {}
+    ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
+    : (value: SetStateAction<GetAtPath<S, P>>) => void;
+  function useSetValue<P extends PathKey[] | string>(path?: P) {
+    const { ms } = useAnyNoyaStateContext();
+
+    const setValue = useCallback(
+      (
+        ...args: M extends {}
+          ? [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+          : [value: SetStateAction<GetAtPath<S, P>>]
+      ): void => {
+        const [metadata, value] =
+          args.length === 2 ? args : [undefined as M, args[0]];
+
+        const setStateAtPath = ms.setStateAtPath as (
+          metadata: M,
+          path: P,
+          value: GetAtPath<S, P>
+        ) => void;
+
+        setStateAtPath(metadata, (path ?? "") as P, value as never);
+      },
+      [ms, path]
+    );
+
+    return setValue as M extends {}
+      ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
+      : (value: SetStateAction<GetAtPath<S, P>>) => void;
+  }
+
+  function useValueState(): [
+    S,
+    M extends {}
+      ? (metadata: M, value: SetStateAction<S>) => void
+      : (value: SetStateAction<S>) => void,
+  ];
+  function useValueState<A>(
+    selector: (value: S) => A,
+    options?: ObservableOptions
+  ): [
+    A,
+    M extends {}
+      ? (metadata: M, value: SetStateAction<S>) => void
+      : (value: SetStateAction<S>) => void,
+  ];
+  function useValueState<P extends PathKey[] | string>(
+    path?: P
+  ): [
+    GetAtPath<S, P>,
+    M extends {}
+      ? (metadata: M, value: SetStateAction<GetAtPath<S, P>>) => void
+      : (value: SetStateAction<GetAtPath<S, P>>) => void,
+  ];
+  function useValueState<P extends PathKey[] | string>(
+    ...args: [P?] | [selector: (value: S) => any, options?: ObservableOptions]
+  ) {
+    const [selector, options, path] =
+      args.length >= 1 && typeof args[0] === "function"
+        ? [args[0], args[1], undefined]
+        : [undefined, undefined, args[0] as P | undefined];
+
+    const value = useValue((selector ?? path ?? "") as any, options);
+    const setValue = useSetValue(path ?? "");
+    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/src/__tests__/NoyaStateContext.test.ts

@@ -0,0 +1,43 @@
+import { Type } from "@noya-app/state-manager";
+import { it } from "bun:test";
+import { useCallback } from "react";
+import { createNoyaContext } from "../NoyaStateContext";
+
+it("typechecks", () => {
+  const testSchema = Type.Object({
+    count: Type.Number(),
+  });
+
+  const { useValue, useSetValue, useValueState } = createNoyaContext({
+    schema: testSchema,
+  });
+
+  // For type checking
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function TestComponent() {
+    const state = useValue();
+    const count = useValue("count");
+    const setValue = useSetValue();
+    const setCount = useSetValue("count");
+    setValue({ count: 1 });
+    setCount(1);
+    setCount((prev) => prev + 1);
+    const [count2, setCount2] = useValueState("count");
+    setCount2(1);
+    setCount2((prev) => prev + 1);
+    const count3 = useValue(useCallback((state) => state.count, []));
+    const [count4, setValue2] = useValueState(
+      useCallback((state) => state.count, [])
+    );
+    setValue2({ count: 1 });
+    setValue2((prev) => ({ count: prev.count + 1 }));
+
+    expectType<{ count: number }>(state);
+    expectType<number>(count);
+    expectType<number>(count2);
+    expectType<number>(count3);
+    expectType<number>(count4);
+  }
+});
+
+function expectType<T>(value: T): void {}

package/src/hooks.ts

@@ -1,11 +1,11 @@
 "use client";
 
+import { GetAtPath } from "@noya-app/observable";
 import {
   ActionHandler,
   AssetManager,
   ConnectionEvent,
   EphemeralUserData,
-  Get,
   MultiplayerStateManager,
   MultiplayerStateManagerError,
   MultiplayerStateManagerOptions,
@@ -38,7 +38,7 @@ export function useSyncStateManager<S, M>(stateManager: StateManager<S, M>): S;
 export function useSyncStateManager<S, M, P extends string>(
   stateManager: StateManager<S, M>,
   path: P
-): Get<S, P, unknown>;
+): GetAtPath<S, P>;
 export function useSyncStateManager<S, M>(
   stateManager: StateManager<S, M>,
   path?: string
@@ -241,6 +241,7 @@ export function useMultiplayerState<S, M = void, E = void>(
       ephemeralUserData,
       multiplayerStateManager,
       assets,
+      assetManager,
       createAsset: assetManager.create,
       deleteAsset: assetManager.delete,
       // evaluate: async (code: string) => {
@@ -338,7 +339,15 @@ export function useMultiplayerState<S, M = void, E = void>(
 
   useEffect(() => {
     return multiplayerStateManager.errorEmitter.addListener((error) => {
-      setUnrecoverableError(error);
+      switch (error.reason) {
+        case "invalidDataType":
+        case "schemaMismatch":
+        case "outdatedSchema":
+        case "dataMigrationFailure":
+        case "schemaMigration":
+          setUnrecoverableError(error);
+          break;
+      }
     });
   }, [multiplayerStateManager]);
 

package/src/index.ts

@@ -4,4 +4,5 @@ export * from "./components/UserPointersOverlay";
 export * from "./hooks";
 export * from "./inspector/StateInspector";
 export * from "./noyaApp";
+export * from "./NoyaStateContext";
 export * from "./useObservable";

package/src/useObservable.ts

@@ -1,20 +1,20 @@
-import { GetWithPath, Observable, PathKey } from "@noya-app/observable";
+import { GetAtPath, Observable, PathKey } from "@noya-app/observable";
 import { useMemo, useSyncExternalStore } from "react";
 
 export function useObservable<T>(observable: Observable<T>): T;
-export function useObservable<T, P extends PathKey[]>(
+export function useObservable<T, P extends PathKey[] | string>(
   observable: Observable<T>,
   path: P
-): GetWithPath<T, P>;
+): GetAtPath<T, P>;
 export function useObservable<T, P extends PathKey[]>(
   observable: Observable<T>,
   path?: P
 ) {
   const { get, listen } = useMemo(() => {
     const listen = path
-      ? (callback: (value: GetWithPath<T, P>) => void) =>
-          observable.listen(path, callback)
-      : observable.listen;
+      ? (callback: (value: GetAtPath<T, P>) => void) =>
+          observable.subscribe(path, callback)
+      : observable.subscribe;
 
     const get: () => void = path ? () => observable.get(path) : observable.get;
 

package/dist/index.d.mts

@@ -1,168 +0,0 @@
-import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, AssetManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema, Static } from '@noya-app/state-manager';
-export * from '@noya-app/state-manager';
-import React, { SetStateAction } from 'react';
-import { Observable, PathKey, GetWithPath } 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 UserPointerContainer: React.NamedExoticComponent<{
-    point: Point;
-    children: React.ReactNode;
-    show?: boolean | undefined;
-}>;
-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 | undefined;
-}>;
-
-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>[] | undefined;
-    connectedUsers?: MultiplayerUser[] | undefined;
-    tasks?: Task[] | undefined;
-    userId?: string | undefined;
-    unstyled?: boolean | undefined;
-    multiplayerStateManager: MultiplayerStateManager<S, M>;
-    assetManager: AssetManager;
-    ephemeralUserData: EphemeralUserData<E>;
-    forceInit: () => void;
-} & StateInspectorOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => 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): Get<S, P, unknown>;
-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[];
-    createAsset: (options: Uint8Array | _noya_app_state_manager.CreateAssetOptions) => 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>;
-
-declare function useObservable<T>(observable: Observable<T>): T;
-declare function useObservable<T, P extends PathKey[]>(observable: Observable<T>, path: P): GetWithPath<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, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };