@noya-app/noya-multiplayer-react 0.1.18 → 0.1.19

package/src/globals.ts

@@ -1,42 +1,4 @@
-import { Emitter } from "@noya-app/emitter";
-import { useEffect, useState } from "react";
-
-class Observable<T> {
-  private value: T;
-  private emitter = new Emitter<[T]>();
-
-  constructor(value: T) {
-    this.value = value;
-  }
-
-  get() {
-    return this.value;
-  }
-
-  set(value: T) {
-    if (this.value === value) return;
-
-    this.value = value;
-
-    this.emitter.emit(value);
-  }
-
-  listen(callback: (value: T) => void) {
-    callback(this.value);
-
-    return this.emitter.addListener(callback);
-  }
-}
-
-export function useObservable<T>(observable: Observable<T>) {
-  const [value, setValue] = useState(observable.get());
-
-  useEffect(() => {
-    return observable.listen(setValue);
-  }, [observable]);
-
-  return value;
-}
+import { Observable } from "@noya-app/observable";
 
 export const shouldTrackEvents$ = new Observable(false);
 export const shouldTrackTasks$ = new Observable(false);

package/src/hooks.ts

@@ -24,13 +24,10 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import {
-  shouldTrackEvents$,
-  shouldTrackTasks$,
-  useObservable,
-} from "./globals";
+import { shouldTrackEvents$, shouldTrackTasks$ } from "./globals";
 import { StateInspector } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
+import { useObservable } from "./useObservable";
 
 export function useSyncStateManager<S extends object, M>(
   stateManager: StateManager<S, M>
@@ -186,6 +183,7 @@ export function useMultiplayerState<S extends object, M = void, E = void>(
   const extras = useMemo(() => {
     return {
       tasks,
+      userId,
       connectionEvents,
       connectedUsers,
       ephemeralUserData,
@@ -197,7 +195,7 @@ export function useMultiplayerState<S extends object, M = void, E = void>(
       //   }
       // },
     };
-  }, [tasks, connectionEvents, connectedUsers, ephemeralUserData]);
+  }, [tasks, connectionEvents, connectedUsers, ephemeralUserData, userId]);
 
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from "@noya-app/state-manager";
+export * from "./avatarStyle";
+export * from "./components/UserPointersOverlay";
 export * from "./hooks";
 export * from "./inspector/StateInspector";

package/src/inspector/StateInspector.tsx

@@ -686,7 +686,12 @@ export const StateInspector = memo(function StateInspector<
         <div style={styles.sectionInner}>
           {Object.entries(ephemeral).map(([key, value]) => (
             <InspectorRow key={key} colorScheme={colorScheme}>
-              <ObjectInspector name={key} data={value} theme={theme} />
+              <ObjectInspector
+                name={key}
+                data={value}
+                theme={theme}
+                expandLevel={10}
+              />
             </InspectorRow>
           ))}
         </div>

package/src/useObservable.ts

@@ -0,0 +1,25 @@
+import { GetWithPath, 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[]>(
+  observable: Observable<T>,
+  path: P
+): GetWithPath<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;
+
+    const get: () => void = path ? () => observable.get(path) : observable.get;
+
+    return { get, listen };
+  }, [observable, path]);
+
+  return useSyncExternalStore(listen, get, get);
+}