@noya-app/noya-multiplayer-react 0.1.22 → 0.1.24

package/dist/index.mjs

@@ -193,77 +193,6 @@ var UserPointerIcon = memo(function CursorIcon({
   );
 });
 
-// src/embedded.ts
-import { createValue } from "@noya-app/state-manager";
-import { useEffect as useEffect2, useMemo as useMemo3 } from "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 useNoyaApp(initialState, { schema } = {}) {
-  const appData = useMemo3(() => {
-    return getAppData(
-      schema ? createValue(schema, initialState) : initialState
-    );
-  }, [initialState, schema]);
-  return appData;
-}
-function useBroadcastConnectedUsers(connectedUsers) {
-  useEffect2(() => {
-    if (!isEmbeddedApp())
-      return;
-    const message = {
-      type: "multiplayer.setUsers",
-      payload: { users: connectedUsers }
-    };
-    parent?.postMessage(message, "*");
-  }, [connectedUsers]);
-}
-function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
-  useEffect2(() => {
-    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;
-}
-
 // src/hooks.ts
 import {
   EphemeralUserData,
@@ -273,8 +202,8 @@ import {
 } from "@noya-app/state-manager";
 import {
   useCallback,
-  useEffect as useEffect4,
-  useMemo as useMemo4,
+  useEffect as useEffect3,
+  useMemo as useMemo3,
   useRef,
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
@@ -292,7 +221,7 @@ import { createRoot } from "react-dom/client";
 // src/inspector/StateInspector.tsx
 import React3, {
   memo as memo2,
-  useEffect as useEffect3,
+  useEffect as useEffect2,
   useLayoutEffect
 } from "react";
 import {
@@ -555,25 +484,25 @@ var StateInspector = memo2(function StateInspector2({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
-  useEffect3(() => {
+  useEffect2(() => {
     shouldTrackEvents$.set(showEvents);
   }, [showEvents]);
-  useEffect3(() => {
+  useEffect2(() => {
     shouldTrackTasks$.set(showTasks);
   }, [showTasks]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop = eventsContainerRef.current.scrollHeight;
     }
   }, [connectionEvents]);
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
-  useEffect3(() => {
+  useEffect2(() => {
     if (historyContainerRef.current) {
       historyContainerRef.current.scrollTop = historyContainerRef.current.scrollHeight;
     }
   }, [historySnapshot]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!historyContainerRef.current)
       return;
     const historyEntry = historyContainerRef.current.querySelector(
@@ -855,6 +784,17 @@ var StateInspector = memo2(function StateInspector2({
             background: index + 1 === historySnapshot.historyIndex ? "rgb(59 130 246 / 15%)" : void 0
           }
         },
+        "name" in entry.metadata && typeof entry.metadata.name === "string" && /* @__PURE__ */ React3.createElement(
+          "pre",
+          {
+            style: {
+              fontSize: "11px",
+              display: "flex",
+              flexWrap: "wrap"
+            }
+          },
+          entry.metadata.name
+        ),
         entry.redoPatches?.map((patch, j) => /* @__PURE__ */ React3.createElement(
           "pre",
           {
@@ -1216,9 +1156,41 @@ function useSyncMultiplayerStateManager(multiplayerStateManager) {
     multiplayerStateManager.getOptimisticState
   );
 }
-function useEphemeralUserData(ephemeralUserData) {
+function throttle(fn, ms) {
+  let lastCall = 0;
+  let timeoutId = null;
+  return (...args) => {
+    const now = Date.now();
+    if (now - lastCall < ms) {
+      if (timeoutId)
+        clearTimeout(timeoutId);
+      timeoutId = setTimeout(
+        () => {
+          lastCall = now;
+          fn(...args);
+        },
+        ms - (now - lastCall)
+      );
+      return;
+    }
+    lastCall = now;
+    return fn(...args);
+  };
+}
+function useEphemeralUserData(ephemeralUserData, options) {
+  const throttledAddListener = useMemo3(() => {
+    const throttleMs = options?.throttle ?? 0;
+    if (throttleMs > 0) {
+      const addListener = (fn) => {
+        const throttledFn = throttle(fn, throttleMs);
+        return ephemeralUserData.addListener(throttledFn);
+      };
+      return addListener;
+    }
+    return ephemeralUserData.addListener;
+  }, [ephemeralUserData, options?.throttle]);
   return useSyncExternalStore2(
-    ephemeralUserData.addListener,
+    throttledAddListener,
     ephemeralUserData.getSnapshot,
     ephemeralUserData.getSnapshot
   );
@@ -1237,13 +1209,14 @@ function useMultiplayerState(initialState, options) {
   );
   const [tasks, setTasks] = useState2([]);
   const [userId, setUserId] = useState2();
-  const extras = useMemo4(() => {
+  const extras = useMemo3(() => {
     return {
       tasks,
       userId,
       connectionEvents,
       connectedUsers,
-      ephemeralUserData
+      ephemeralUserData,
+      multiplayerStateManager
       // evaluate: async (code: string) => {
       //   const payload = await rpcManager.request({ type: "eval", code });
       //   if (payload.type !== "eval") {
@@ -1251,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;
@@ -1259,19 +1239,19 @@ function useMultiplayerState(initialState, options) {
   const trackEventsCallbackRef = useRef();
   const trackConnectedUsersCallbackRef = useRef();
   const trackTasksCallbackRef = useRef();
-  useEffect4(() => {
+  useEffect3(() => {
     trackEventsCallbackRef.current = shouldTrackEvents ? (e) => setConnectionEvents((events) => {
       const updated = events ? [...events, e] : [e];
       return updated.length > 50 ? updated.slice(-50) : updated;
     }) : void 0;
   }, [shouldTrackEvents]);
-  useEffect4(() => {
+  useEffect3(() => {
     trackConnectedUsersCallbackRef.current = (users, userId2) => {
       setConnectedUsers(users);
       setUserId(userId2);
     };
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     trackTasksCallbackRef.current = shouldTrackTasks ? (tasks2) => {
       setTasks((old) => {
         const newIds = new Set(tasks2.map((t) => t.id));
@@ -1280,7 +1260,7 @@ function useMultiplayerState(initialState, options) {
       });
     } : void 0;
   }, [shouldTrackTasks]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (syncRef.current) {
       return syncRef.current({
         ms: multiplayerStateManager,
@@ -1310,13 +1290,108 @@ function useMultiplayerState(initialState, options) {
     disabled: !options?.inspector,
     ...typeof options?.inspector === "object" && options.inspector
   });
-  useBroadcastConnectedUsers(connectedUsers);
-  return [
-    state,
-    multiplayerStateManager.setState,
-    multiplayerStateManager,
-    extras
-  ];
+  return [state, multiplayerStateManager.setState, extras];
+}
+
+// src/noyaApp.ts
+import {
+  createValue,
+  localStorageSync,
+  webSocketSync
+} from "@noya-app/state-manager";
+import { useEffect as useEffect4, useMemo as useMemo4, useState as useState3 } from "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 = useMemo4(() => {
+    return getAppData(
+      schema ? createValue(schema, initialState) : initialState
+    );
+  }, [initialState, schema]);
+  return appData;
+}
+function useBroadcastConnectedUsers(connectedUsers) {
+  useEffect4(() => {
+    if (!isEmbeddedApp())
+      return;
+    const message = {
+      type: "multiplayer.setUsers",
+      payload: { users: connectedUsers }
+    };
+    parent?.postMessage(message, "*");
+  }, [connectedUsers]);
+}
+function useBroadcastMenuItems(menuItems, handleSelectMenuItem) {
+  useEffect4(() => {
+    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] = useState3(initialState);
+  const {
+    multiplayerUrl,
+    inspector,
+    initialState: noyaAppInitialState,
+    theme,
+    viewType
+  } = useAppData(state, {
+    schema: options.schema
+  });
+  const sync = useMemo4(() => {
+    return multiplayerUrl ? webSocketSync(multiplayerUrl) : 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 = useMemo4(() => {
+    return { ...extras, theme, viewType };
+  }, [extras, theme, viewType]);
+  return [result[0], result[1], mergedExtras];
 }
 export {
   StateInspector,
@@ -1330,13 +1405,15 @@ export {
   getAvatarInitials,
   getAvatarStyle,
   isEmbeddedApp,
+  useAppData,
   useBroadcastConnectedUsers,
   useBroadcastMenuItems,
   useEphemeralUserData,
   useManagedHistory,
   useManagedState,
   useMultiplayerState,
-  useNoyaApp,
+  useNoyaAppState,
+  useObservable,
   useSyncMultiplayerStateManager,
   useSyncStateManager
 };