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

package/src/NoyaStateContext.tsx

@@ -0,0 +1,218 @@
+import { GetAtPath, ObservableOptions, PathKey } from "@noya-app/observable";
+import {
+  AssetManager,
+  MultiplayerStateManager,
+  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<Schema extends TSchema, M, E>
+  extends Omit<UseNoyaStateOptions<Static<Schema>, M, E>, "schema"> {
+  children: React.ReactNode;
+  initialState?: Static<Schema>;
+}
+
+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,
+}: {
+  schema: Schema;
+}) {
+  const NoyaStateContext = AnyNoyaStateContext as React.Context<
+    | {
+        ms: MultiplayerStateManager<Static<Schema>, M>;
+        assetManager: AssetManager;
+      }
+    | undefined
+  >;
+
+  function NoyaStateProvider({
+    children,
+    initialState,
+    ...options
+  }: NoyaStateProviderProps<Schema, M, E>) {
+    const [, , { multiplayerStateManager, assetManager }] = useNoyaState(
+      initialState,
+      {
+        ...(options as any),
+        schema,
+      }
+    );
+
+    const value = useMemo(
+      () => ({
+        ms: multiplayerStateManager as MultiplayerStateManager<any, any>,
+        assetManager,
+      }),
+      [multiplayerStateManager, assetManager]
+    );
+
+    return (
+      <AnyNoyaStateContext.Provider value={value}>
+        {children}
+      </AnyNoyaStateContext.Provider>
+    );
+  }
+
+  type S = Static<Schema>;
+
+  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];
+  }
+
+  return {
+    Context: NoyaStateContext,
+    Provider: NoyaStateProvider,
+    useValue,
+    useSetValue,
+    useValueState,
+    // 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/noyaApp.ts

@@ -165,7 +165,7 @@ export type UseNoyaStateOptions<
   M = void,
   E = void,
 > = UseMultiplayerStateOptions<S, M, E> & {
-  localStorageKey?: string;
+  offlineStorageKey?: string;
 };
 
 export type UseNoyaStateResult<S, M = void, E = void> = [
@@ -231,10 +231,10 @@ export function useNoyaState<
   const sync = useMemo((): SyncAdapter<S, M, E> => {
     return multiplayerUrl
       ? webSocketSync(multiplayerUrl)
-      : options?.localStorageKey
-        ? localStorageSync({ key: options.localStorageKey })
+      : options?.offlineStorageKey
+        ? localStorageSync({ key: options.offlineStorageKey })
         : stubSync();
-  }, [multiplayerUrl, options?.localStorageKey]);
+  }, [multiplayerUrl, options?.offlineStorageKey]);
 
   const result = useMultiplayerState(noyaAppInitialState as S, {
     ...options,

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;