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

package/.turbo/turbo-build.log

@@ -5,14 +5,14 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     29.75 KB
-ESM dist/index.mjs.map 53.84 KB
-ESM ⚡️ Build success in 50ms
-CJS dist/index.js     33.83 KB
-CJS dist/index.js.map 53.63 KB
-CJS ⚡️ Build success in 70ms
+ESM dist/index.mjs     37.08 KB
+ESM dist/index.mjs.map 67.28 KB
+ESM ⚡️ Build success in 79ms
+CJS dist/index.js     41.86 KB
+CJS dist/index.js.map 67.12 KB
+CJS ⚡️ Build success in 80ms
 DTS Build start
-"ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/inspector/StateInspector.tsx" and "src/hooks.ts".
-DTS ⚡️ Build success in 2630ms
-DTS dist/index.d.ts  2.69 KB
-DTS dist/index.d.mts 2.69 KB
+"ComponentPropsWithoutRef" is imported from external module "react" but never used in "src/components/UserPointersOverlay.tsx", "src/inspector/StateInspector.tsx" and "src/hooks.ts".
+DTS ⚡️ Build success in 3235ms
+DTS dist/index.d.ts  4.71 KB
+DTS dist/index.d.mts 4.71 KB

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @noya-app/state-manager
 
+## 0.1.19
+
+### Patch Changes
+
+- 35b2424: Add ephemeral data and observable
+- Updated dependencies [35b2424]
+- Updated dependencies [48cd6ba]
+- Updated dependencies [6d2cf3d]
+- Updated dependencies [1b63535]
+  - @noya-app/state-manager@0.1.19
+  - @noya-app/observable@0.1.1
+
+## 0.1.18
+
+### Patch Changes
+
+- 536ef31: Add ephemeral user data
+- Updated dependencies [536ef31]
+  - @noya-app/state-manager@0.1.18
+
 ## 0.1.17
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,10 +1,52 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
+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 Anchor = "left" | "right" | "bottom left" | "bottom right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, anchor, forceInit, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
@@ -13,6 +55,7 @@ declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    ephemeralUserData: EphemeralUserData<E>;
     anchor?: Anchor | undefined;
     forceInit: () => void;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
@@ -22,17 +65,25 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, 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 extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
+declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): {
+    data: Record<string, E | undefined>;
+    metadata: Record<string, _noya_app_state_manager.EphemeralUserMetadata | undefined>;
+    currentUserId: string | undefined;
+};
+declare function useMultiplayerState<S extends object, M = void, E = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
+        ephemeralUserData: EphemeralUserData<E>;
     }) => void;
     trackConnectionEvents?: boolean;
     trackTasks?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     tasks: Task[];
+    userId: string | undefined;
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
+    ephemeralUserData: EphemeralUserData<E>;
 }];
 
-export { StateInspector, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.d.ts

@@ -1,10 +1,52 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { ConnectionEvent, MultiplayerUser, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
 import React, { SetStateAction, ComponentProps } from 'react';
 
+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 Anchor = "left" | "right" | "bottom left" | "bottom right";
-declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, anchor, forceInit, ...props }: {
+declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E>({ state, connectionEvents, connectedUsers, tasks, userId, unstyled, colorScheme, multiplayerStateManager, ephemeralUserData, anchor, forceInit, ...props }: {
     state: S;
     connectionEvents?: ConnectionEvent<S>[] | undefined;
     connectedUsers?: MultiplayerUser[] | undefined;
@@ -13,6 +55,7 @@ declare const StateInspector: React.MemoExoticComponent<(<S extends object, M>({
     unstyled?: boolean | undefined;
     colorScheme?: "light" | "dark" | undefined;
     multiplayerStateManager: MultiplayerStateManager<S, M>;
+    ephemeralUserData: EphemeralUserData<E>;
     anchor?: Anchor | undefined;
     forceInit: () => void;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
@@ -22,17 +65,25 @@ declare function useSyncStateManager<S extends object, M, P extends string>(stat
 declare function useManagedState<S extends object, 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 extends object, M = void>(stateManager: StateManager<S, M>): _noya_app_state_manager.HistorySnapshot<S, M>;
 declare function useSyncMultiplayerStateManager<S extends object, M = void>(multiplayerStateManager: MultiplayerStateManager<S, M>): S;
-declare function useMultiplayerState<S extends object, M = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
+declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>): {
+    data: Record<string, E | undefined>;
+    metadata: Record<string, _noya_app_state_manager.EphemeralUserMetadata | undefined>;
+    currentUserId: string | undefined;
+};
+declare function useMultiplayerState<S extends object, M = void, E = void>(initialState: S | (() => S), options?: MultiplayerStateManagerOptions<S, M> & {
     sync?: (options: {
         ms: MultiplayerStateManager<S, M>;
+        ephemeralUserData: EphemeralUserData<E>;
     }) => void;
     trackConnectionEvents?: boolean;
     trackTasks?: boolean;
     inspector?: boolean | Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">;
 }): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, MultiplayerStateManager<S, M>, {
     tasks: Task[];
+    userId: string | undefined;
     connectionEvents: ConnectionEvent<S>[] | undefined;
     connectedUsers: MultiplayerUser[];
+    ephemeralUserData: EphemeralUserData<E>;
 }];
 
-export { StateInspector, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };