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

package/dist/index.d.mts

@@ -0,0 +1,206 @@
+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<S, M, E> extends Omit<UseNoyaStateOptions<S, M, E>, "schema" | "mergeHistoryEntries"> {
+    children: React.ReactNode;
+    initialState?: S;
+}
+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, mergeHistoryEntries, }: {
+    schema: Schema;
+    mergeHistoryEntries?: StateManagerOptions<Static<Schema>, M>["mergeHistoryEntries"];
+}): {
+    Context: React.Context<{
+        ms: MultiplayerStateManager<Static<Schema>, M>;
+        assetManager: AssetManager;
+    } | undefined>;
+    Provider: ({ children, initialState, ...options }: NoyaStateProviderProps<Static<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];
+    };
+    useStateManager: () => MultiplayerStateManager<Static<Schema>, M>;
+};
+
+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 };

package/dist/index.d.ts

@@ -203,4 +203,4 @@ declare function createNoyaContext<Schema extends TSchema, M = void, E = 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 { AppData, AppTheme, AppViewType, GetAppDataOptions, HostToIframeMessage, IframeToHostMessage, StateInspector, StateInspectorAnchor, StateInspectorOptions, UseMultiplayerStateOptions, UseNoyaStateOptions, UseNoyaStateResult, UserNameTag, UserPointer, UserPointerContainer, UserPointerData, UserPointerIcon, UserPointerProps, UserPointersOverlay, UserPointersOverlayProps, createDefaultAppData, createNoyaContext, enforceSchema, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, parseAppDataParameter, useAsset, useAssetManager, useAssets, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaState, useObservable, useSyncMultiplayerStateManager, useSyncStateManager };
+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 };

package/dist/index.js

@@ -139,16 +139,14 @@ var UserPointer_ = function UserPointer({
   const [, setForceUpdate] = (0, import_react2.useState)(0);
   const updatedAt = metadata?.updatedAt ?? 0;
   (0, import_react2.useEffect)(() => {
-    if (!shouldShow(hideAfter, updatedAt))
-      return;
+    if (!shouldShow(hideAfter, updatedAt)) return;
     const timeoutId = setTimeout(() => {
       setForceUpdate((prev) => prev + 1);
     }, hideAfter);
     return () => clearTimeout(timeoutId);
   }, [hideAfter, updatedAt]);
   const show = shouldShow(hideAfter, updatedAt);
-  if (!data || !data.pointer)
-    return null;
+  if (!data || !data.pointer) return null;
   return /* @__PURE__ */ import_react2.default.createElement(UserPointerContainer, { key: user.id, point: data.pointer, show }, /* @__PURE__ */ import_react2.default.createElement(UserPointerIcon, { color: avatarStyle.backgroundColor }), /* @__PURE__ */ import_react2.default.createElement(UserNameTag, { background: avatarStyle.backgroundColor }, user.name));
 };
 var UserPointer2 = (0, import_react2.memo)(UserPointer_);
@@ -204,8 +202,7 @@ var UserNameTag = (0, import_react2.memo)(function UserNameTag2({
 var UserPointersOverlay = (0, import_react2.memo)(function UserPointers({ connectedUsers, ephemeralUserData }) {
   const currentUserId = useObservable(ephemeralUserData.currentUserId$);
   return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, connectedUsers.map((user) => {
-    if (user.id === currentUserId)
-      return null;
+    if (user.id === currentUserId) return null;
     return /* @__PURE__ */ import_react2.default.createElement(
       UserPointer2,
       {
@@ -622,8 +619,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
     }
   }, [historySnapshot]);
   (0, import_react5.useEffect)(() => {
-    if (!historyContainerRef.current)
-      return;
+    if (!historyContainerRef.current) return;
     const historyEntry = historyContainerRef.current.querySelector(
       `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
     );
@@ -655,8 +651,7 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
     zIndex: 9999,
     lineHeight: "13px"
   };
-  if (!didMount)
-    return null;
+  if (!didMount) return null;
   if (!showInspector) {
     return /* @__PURE__ */ import_react5.default.createElement(
       "div",
@@ -725,14 +720,14 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             src: user.image,
             alt: user.name,
             style: {
-              width: "12px",
-              height: "12px",
+              width: "13px",
+              height: "13px",
               borderRadius: "50%",
               marginRight: "4px",
               display: "inline-block",
               position: "relative",
-              top: "-1px",
-              background: solidBorderColor
+              background: solidBorderColor,
+              verticalAlign: "middle"
             }
           }
         ),
@@ -909,7 +904,8 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             style: {
               fontSize: "11px",
               display: "flex",
-              flexWrap: "wrap"
+              flexWrap: "wrap",
+              margin: 0
             }
           },
           entry.metadata.name
@@ -921,7 +917,8 @@ var StateInspector = (0, import_react5.memo)(function StateInspector2({
             style: {
               fontSize: "11px",
               display: "flex",
-              flexWrap: "wrap"
+              flexWrap: "wrap",
+              margin: 0
             }
           },
           patch.op === "add" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontStyle: "italic" } }, pathToString(patch.path)), " = ", /* @__PURE__ */ import_react5.default.createElement(import_react_inspector.ObjectInspector, { data: patch.value, theme })),
@@ -1134,8 +1131,7 @@ function pathToString(extendedPath) {
   ).join("");
 }
 function ellipsis(str, maxLength, position = "end") {
-  if (str.length <= maxLength)
-    return str;
+  if (str.length <= maxLength) return str;
   switch (position) {
     case "start":
       return `\u2026${str.slice(str.length - maxLength)}`;
@@ -1208,8 +1204,7 @@ function useStateInspector({
 }) {
   const [root, setRoot] = import_react6.default.useState(null);
   (0, import_react6.useLayoutEffect)(() => {
-    if (disabled)
-      return;
+    if (disabled) return;
     const { host, container } = createShadowRootElement();
     const root2 = (0, import_client.createRoot)(container);
     document.body.appendChild(host);
@@ -1219,8 +1214,7 @@ function useStateInspector({
     };
   }, [disabled]);
   (0, import_react6.useLayoutEffect)(() => {
-    if (!root)
-      return;
+    if (!root) return;
     root.render(
       /* @__PURE__ */ import_react6.default.createElement(
         StateInspector,
@@ -1327,8 +1321,7 @@ function throttle(fn, ms) {
   return (...args) => {
     const now = Date.now();
     if (now - lastCall < ms) {
-      if (timeoutId)
-        clearTimeout(timeoutId);
+      if (timeoutId) clearTimeout(timeoutId);
       timeoutId = setTimeout(
         () => {
           lastCall = now;
@@ -1467,8 +1460,7 @@ function useMultiplayerState(initialState, options) {
     });
   }, [multiplayerStateManager]);
   (0, import_react7.useEffect)(() => {
-    if (!unrecoverableError)
-      return;
+    if (!unrecoverableError) return;
     const el = document.createElement("div");
     el.id = "noya-multiplayer-react-error-overlay";
     document.body.appendChild(el);
@@ -1516,13 +1508,11 @@ function enforceSchema(initialState, schema) {
 function parseAppDataParameter(options) {
   const window2 = options?.window ?? globalThis;
   const location = window2.location;
-  if (!location)
-    return null;
+  if (!location) return null;
   const urlHash = (location.hash || "").replace(/^#/, "");
   const params = new URLSearchParams(urlHash);
   const data = params.get("data");
-  if (!data)
-    return null;
+  if (!data) return null;
   try {
     return JSON.parse(data);
   } catch (e) {
@@ -1540,8 +1530,7 @@ function getAppData(initialState, schema, options) {
 }
 function useBroadcastConnectedUsers(connectedUsers) {
   (0, import_react8.useEffect)(() => {
-    if (!isEmbeddedApp())
-      return;
+    if (!isEmbeddedApp()) return;
     const message = {
       type: "multiplayer.setUsers",
       payload: { users: connectedUsers }
@@ -1551,8 +1540,7 @@ function useBroadcastConnectedUsers(connectedUsers) {
 }
 function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
   (0, import_react8.useEffect)(() => {
-    if (!isEmbeddedApp())
-      return;
+    if (!isEmbeddedApp()) return;
     const message = {
       type: "application.setMenuItems",
       payload: { menuItems }