@noya-app/noya-multiplayer-react 0.1.21 → 0.1.23

package/.turbo/turbo-build.log

@@ -5,14 +5,14 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     42.34 KB
-CJS dist/index.js.map 67.91 KB
-CJS ⚡️ Build success in 46ms
-ESM dist/index.mjs     37.54 KB
-ESM dist/index.mjs.map 68.07 KB
-ESM ⚡️ Build success in 46ms
+ESM dist/index.mjs     40.89 KB
+ESM dist/index.mjs.map 75.66 KB
+ESM ⚡️ Build success in 49ms
+CJS dist/index.js     46.11 KB
+CJS dist/index.js.map 75.44 KB
+CJS ⚡️ Build success in 49ms
 DTS Build start
 "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 3045ms
-DTS dist/index.d.ts  4.71 KB
-DTS dist/index.d.mts 4.71 KB
+DTS ⚡️ Build success in 2229ms
+DTS dist/index.d.ts  7.15 KB
+DTS dist/index.d.mts 7.15 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @noya-app/state-manager
 
+## 0.1.23
+
+### Patch Changes
+
+- 3d308c6: Improve noya app hook
+- f14970a: Add useNoyaAppState
+- Updated dependencies [f14970a]
+  - @noya-app/state-manager@0.1.22
+
+## 0.1.22
+
+### Patch Changes
+
+- 7306000: Improve embedded apis
+- Updated dependencies [7306000]
+  - @noya-app/state-manager@0.1.21
+
 ## 0.1.21
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
-import React, { SetStateAction, ComponentProps } from 'react';
+import React, { SetStateAction } from 'react';
 
 declare function getAvatarInitials(name: string): string;
 /**
@@ -45,7 +45,11 @@ declare const UserPointerIcon: React.NamedExoticComponent<{
     color?: string | undefined;
 }>;
 
-type Anchor = "left" | "right" | "bottom left" | "bottom right";
+type StateInspectorAnchor = "left" | "right" | "bottom left" | "bottom right";
+type StateInspectorOptions = {
+    colorScheme?: "light" | "dark";
+    anchor?: StateInspectorAnchor;
+};
 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;
@@ -53,12 +57,10 @@ declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E
     tasks?: Task[] | undefined;
     userId?: string | undefined;
     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)>;
+} & StateInspectorOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
 
 declare function useSyncStateManager<S extends object, M>(stateManager: StateManager<S, M>): S;
 declare function useSyncStateManager<S extends object, M, P extends string>(stateManager: StateManager<S, M>, path: P): Get<S, P, unknown>;
@@ -70,20 +72,71 @@ declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>
     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;
+type UseMultiplayerStateOptions<S extends object, M = void, E = void> = MultiplayerStateManagerOptions<S, M> & {
+    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData">) => 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>, {
+    inspector?: boolean | StateInspectorOptions;
+};
+declare function useMultiplayerState<S extends object, 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>;
+}];
+
+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>;
+declare function getAppData<State>(): AppData<State> | undefined;
+declare function getAppData<State>(initialState: State): AppData<State>;
+type AppDataOptions = {
+    schema?: TSchema;
+};
+/**
+ * Get data from host app. Fall back to default data.
+ */
+declare function useAppData<S extends object>(initialState: S, { schema }?: AppDataOptions): AppData<S>;
+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;
+declare function useNoyaAppState<S extends object, M = void, E = void>(initialState: S | (() => S), options: UseMultiplayerStateOptions<S, M, E> & {
+    localStorageKey?: string;
+}): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, {
+    readonly theme: AppTheme;
+    readonly viewType: AppViewType;
+    readonly tasks: _noya_app_state_manager.Task[];
+    readonly userId: string | undefined;
+    readonly connectionEvents: _noya_app_state_manager.ConnectionEvent<S>[] | undefined;
+    readonly connectedUsers: MultiplayerUser[];
+    readonly ephemeralUserData: _noya_app_state_manager.EphemeralUserData<E>;
+    readonly multiplayerStateManager: _noya_app_state_manager.MultiplayerStateManager<S, M>;
 }];
 
-export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { type AppData, type AppTheme, type AppViewType, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, useAppData, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaAppState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _noya_app_state_manager from '@noya-app/state-manager';
-import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions } from '@noya-app/state-manager';
+import { MultiplayerUser, EphemeralUserData, ConnectionEvent, Task, MultiplayerStateManager, StateManager, Get, StateManagerOptions, MultiplayerStateManagerOptions, SyncAdapterOptions, TSchema } from '@noya-app/state-manager';
 export * from '@noya-app/state-manager';
-import React, { SetStateAction, ComponentProps } from 'react';
+import React, { SetStateAction } from 'react';
 
 declare function getAvatarInitials(name: string): string;
 /**
@@ -45,7 +45,11 @@ declare const UserPointerIcon: React.NamedExoticComponent<{
     color?: string | undefined;
 }>;
 
-type Anchor = "left" | "right" | "bottom left" | "bottom right";
+type StateInspectorAnchor = "left" | "right" | "bottom left" | "bottom right";
+type StateInspectorOptions = {
+    colorScheme?: "light" | "dark";
+    anchor?: StateInspectorAnchor;
+};
 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;
@@ -53,12 +57,10 @@ declare const StateInspector: React.MemoExoticComponent<(<S extends object, M, E
     tasks?: Task[] | undefined;
     userId?: string | undefined;
     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)>;
+} & StateInspectorOptions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) => React.JSX.Element | null)>;
 
 declare function useSyncStateManager<S extends object, M>(stateManager: StateManager<S, M>): S;
 declare function useSyncStateManager<S extends object, M, P extends string>(stateManager: StateManager<S, M>, path: P): Get<S, P, unknown>;
@@ -70,20 +72,71 @@ declare function useEphemeralUserData<E>(ephemeralUserData: EphemeralUserData<E>
     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;
+type UseMultiplayerStateOptions<S extends object, M = void, E = void> = MultiplayerStateManagerOptions<S, M> & {
+    sync?: (options: Pick<SyncAdapterOptions<S, M, E>, "ms" | "ephemeralUserData">) => 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>, {
+    inspector?: boolean | StateInspectorOptions;
+};
+declare function useMultiplayerState<S extends object, 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>;
+}];
+
+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>;
+declare function getAppData<State>(): AppData<State> | undefined;
+declare function getAppData<State>(initialState: State): AppData<State>;
+type AppDataOptions = {
+    schema?: TSchema;
+};
+/**
+ * Get data from host app. Fall back to default data.
+ */
+declare function useAppData<S extends object>(initialState: S, { schema }?: AppDataOptions): AppData<S>;
+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;
+declare function useNoyaAppState<S extends object, M = void, E = void>(initialState: S | (() => S), options: UseMultiplayerStateOptions<S, M, E> & {
+    localStorageKey?: string;
+}): readonly [S, (...args: M extends {} ? [metadata: M, action: S | ((prevState: S) => S)] : [action: S | ((prevState: S) => S)]) => void, {
+    readonly theme: AppTheme;
+    readonly viewType: AppViewType;
+    readonly tasks: _noya_app_state_manager.Task[];
+    readonly userId: string | undefined;
+    readonly connectionEvents: _noya_app_state_manager.ConnectionEvent<S>[] | undefined;
+    readonly connectedUsers: MultiplayerUser[];
+    readonly ephemeralUserData: _noya_app_state_manager.EphemeralUserData<E>;
+    readonly multiplayerStateManager: _noya_app_state_manager.MultiplayerStateManager<S, M>;
 }];
 
-export { StateInspector, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, getAvatarInitials, getAvatarStyle, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useSyncMultiplayerStateManager, useSyncStateManager };
+export { type AppData, type AppTheme, type AppViewType, type HostToIframeMessage, type IframeToHostMessage, StateInspector, type StateInspectorAnchor, type StateInspectorOptions, type UseMultiplayerStateOptions, UserNameTag, UserPointer, UserPointerContainer, type UserPointerData, UserPointerIcon, type UserPointerProps, UserPointersOverlay, type UserPointersOverlayProps, createDefaultAppData, getAppData, getAvatarInitials, getAvatarStyle, isEmbeddedApp, useAppData, useBroadcastConnectedUsers, useBroadcastMenuItems, useEphemeralUserData, useManagedHistory, useManagedState, useMultiplayerState, useNoyaAppState, useSyncMultiplayerStateManager, useSyncStateManager };

package/dist/index.js

@@ -37,12 +37,19 @@ __export(src_exports, {
   UserPointerContainer: () => UserPointerContainer,
   UserPointerIcon: () => UserPointerIcon,
   UserPointersOverlay: () => UserPointersOverlay,
+  createDefaultAppData: () => createDefaultAppData,
+  getAppData: () => getAppData,
   getAvatarInitials: () => getAvatarInitials,
   getAvatarStyle: () => getAvatarStyle,
+  isEmbeddedApp: () => isEmbeddedApp,
+  useAppData: () => useAppData,
+  useBroadcastConnectedUsers: () => useBroadcastConnectedUsers,
+  useBroadcastMenuItems: () => useBroadcastMenuItems,
   useEphemeralUserData: () => useEphemeralUserData,
   useManagedHistory: () => useManagedHistory,
   useManagedState: () => useManagedState,
   useMultiplayerState: () => useMultiplayerState,
+  useNoyaAppState: () => useNoyaAppState,
   useSyncMultiplayerStateManager: () => useSyncMultiplayerStateManager,
   useSyncStateManager: () => useSyncStateManager
 });
@@ -809,6 +816,17 @@ var StateInspector = (0, import_react4.memo)(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ import_react4.default.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
+            }
+          },
+          entry.metadata.name
+        ),
         entry.redoPatches?.map((patch, j) => /* @__PURE__ */ import_react4.default.createElement(
           "pre",
           {
@@ -1197,7 +1215,8 @@ function useMultiplayerState(initialState, options) {
       userId,
       connectionEvents,
       connectedUsers,
-      ephemeralUserData
+      ephemeralUserData,
+      multiplayerStateManager
       // evaluate: async (code: string) => {
       //   const payload = await rpcManager.request({ type: "eval", code });
       //   if (payload.type !== "eval") {
@@ -1205,7 +1224,14 @@ function useMultiplayerState(initialState, options) {
       //   }
       // },
     };
-  }, [tasks, connectionEvents, connectedUsers, ephemeralUserData, userId]);
+  }, [
+    tasks,
+    userId,
+    connectionEvents,
+    connectedUsers,
+    ephemeralUserData,
+    multiplayerStateManager
+  ]);
   const globalTrackEvents = useObservable(shouldTrackEvents$);
   const globalTrackTasks = useObservable(shouldTrackTasks$);
   const shouldTrackEvents = options?.trackConnectionEvents ?? globalTrackEvents;
@@ -1264,12 +1290,104 @@ function useMultiplayerState(initialState, options) {
     disabled: !options?.inspector,
     ...typeof options?.inspector === "object" && options.inspector
   });
-  return [
-    state,
-    multiplayerStateManager.setState,
-    multiplayerStateManager,
-    extras
-  ];
+  return [state, multiplayerStateManager.setState, extras];
+}
+
+// src/noyaApp.ts
+var import_state_manager2 = require("@noya-app/state-manager");
+var import_react7 = require("react");
+function createDefaultAppData(initialState) {
+  return {
+    theme: "light",
+    viewType: "editable",
+    initialState,
+    inspector: false
+  };
+}
+function getAppData(initialState) {
+  try {
+    const urlHash = (window.location.hash || "").replace(/^#/, "");
+    const params = new URLSearchParams(urlHash);
+    const data = params.get("data");
+    if (!data) {
+      return initialState ? createDefaultAppData(initialState) : void 0;
+    }
+    const parsed = JSON.parse(data);
+    if (!parsed.initialState) {
+      parsed.initialState = initialState;
+    }
+    return parsed;
+  } catch (e) {
+    return initialState ? createDefaultAppData(initialState) : void 0;
+  }
+}
+function useAppData(initialState, { schema } = {}) {
+  const appData = (0, import_react7.useMemo)(() => {
+    return getAppData(
+      schema ? (0, import_state_manager2.createValue)(schema, initialState) : initialState
+    );
+  }, [initialState, schema]);
+  return appData;
+}
+function useBroadcastConnectedUsers(connectedUsers) {
+  (0, import_react7.useEffect)(() => {
+    if (!isEmbeddedApp())
+      return;
+    const message = {
+      type: "multiplayer.setUsers",
+      payload: { users: connectedUsers }
+    };
+    parent?.postMessage(message, "*");
+  }, [connectedUsers]);
+}
+function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
+  (0, import_react7.useEffect)(() => {
+    if (!isEmbeddedApp())
+      return;
+    const message = {
+      type: "application.setMenuItems",
+      payload: { menuItems }
+    };
+    parent?.postMessage(message, "*");
+    const listener = (event) => {
+      if (event.data.type === "application.selectMenuItem") {
+        handleSelectMenuItem(event.data.payload.value);
+      }
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, [handleSelectMenuItem, menuItems]);
+}
+function isEmbeddedApp() {
+  return window.self !== window.top;
+}
+function useNoyaAppState(initialState, options) {
+  const [state] = (0, import_react7.useState)(initialState);
+  const {
+    multiplayerUrl,
+    inspector,
+    initialState: noyaAppInitialState,
+    theme,
+    viewType
+  } = useAppData(state, {
+    schema: options.schema
+  });
+  const sync = (0, import_react7.useMemo)(() => {
+    return multiplayerUrl ? (0, import_state_manager2.webSocketSync)(multiplayerUrl) : (0, import_state_manager2.localStorageSync)({ key: options.localStorageKey || "noya-app" });
+  }, [multiplayerUrl, options.localStorageKey]);
+  const result = useMultiplayerState(noyaAppInitialState, {
+    ...options,
+    inspector: options.inspector ?? inspector,
+    sync
+  });
+  const [, , extras] = result;
+  useBroadcastConnectedUsers(extras.connectedUsers);
+  const mergedExtras = (0, import_react7.useMemo)(() => {
+    return { ...extras, theme, viewType };
+  }, [extras, theme, viewType]);
+  return [result[0], result[1], mergedExtras];
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1279,12 +1397,19 @@ function useMultiplayerState(initialState, options) {
   UserPointerContainer,
   UserPointerIcon,
   UserPointersOverlay,
+  createDefaultAppData,
+  getAppData,
   getAvatarInitials,
   getAvatarStyle,
+  isEmbeddedApp,
+  useAppData,
+  useBroadcastConnectedUsers,
+  useBroadcastMenuItems,
   useEphemeralUserData,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
+  useNoyaAppState,
   useSyncMultiplayerStateManager,
   useSyncStateManager,
   ...require("@noya-app/state-manager")