@noya-app/noya-multiplayer-react 0.1.66 → 0.1.67

package/src/__tests__/serialize.test.ts

@@ -14,11 +14,16 @@ const asset1Id = "2717f281-307d-4e9e-aa3b-68d29d4a1723";
 const asset1DataUrl = `data:application/octet-stream;base64,${Base64.encode(
   asset1Data
 )}`;
-const asset1 = {
+const asset1: Asset = {
   id: asset1Id,
+  stableId: "stable-id",
   url: asset1DataUrl,
   createdAt: new Date().toISOString(),
   size: asset1Data.byteLength,
+  width: 100,
+  height: 100,
+  userId: "123",
+  contentType: "image/png",
 };
 const assets: Asset[] = [asset1];
 const assetMap = {
@@ -61,7 +66,7 @@ it("should import and export the noya manager state", async () => {
   const initialState: Static<typeof schema> = {
     name: "John",
     age: 30,
-    assetRef: asset1Id,
+    assetRef: asset1.stableId,
   };
 
   const noyaManager = new NoyaManager(initialState, {
@@ -107,10 +112,7 @@ it("should import and export the noya manager state", async () => {
   }
 
   expect(newNoyaManager.multiplayerStateManager.optimisticState$.get()).toEqual(
-    {
-      ...initialState,
-      assetRef: firstAsset.id,
-    }
+    initialState
   );
 
   expect(firstAsset).toMatchObject({

package/src/hooks.ts

@@ -1,6 +1,5 @@
 "use client";
 
-import { GetAtPath } from "@noya-app/observable";
 import {
   ActionHandler,
   NoyaManager,
@@ -26,30 +25,6 @@ import { StateInspectorOptions } from "./inspector/StateInspector";
 import { useStateInspector } from "./inspector/useStateInspector";
 import { useObservable } from "./useObservable";
 
-export function useSyncStateManager<S, M>(stateManager: StateManager<S, M>): S;
-export function useSyncStateManager<S, M, P extends string>(
-  stateManager: StateManager<S, M>,
-  path: P
-): GetAtPath<S, P>;
-export function useSyncStateManager<S, M>(
-  stateManager: StateManager<S, M>,
-  path?: string
-) {
-  const getSnapshot = useCallback(
-    () =>
-      typeof path === "string"
-        ? stateManager.getState(path)
-        : stateManager.getState(),
-    [stateManager, path]
-  );
-
-  return useSyncExternalStore(
-    stateManager.addListener,
-    getSnapshot,
-    getSnapshot
-  );
-}
-
 export function useManagedState<S, M = void>(
   createInitialState: () => S,
   options?: StateManagerOptions<S, M>
@@ -58,7 +33,15 @@ export function useManagedState<S, M = void>(
     () => new StateManager<S, M>(createInitialState(), options)
   );
 
-  const state = useSyncStateManager(stateManager);
+  const getSnapshot = useCallback((): S => {
+    return stateManager.getState();
+  }, [stateManager]);
+
+  const state = useSyncExternalStore(
+    stateManager.addListener,
+    getSnapshot,
+    getSnapshot
+  );
 
   const setState = useCallback(
     (
@@ -130,30 +113,19 @@ export type UseMultiplayerStateOptions<
   inspector?: boolean | StateInspectorOptions;
 };
 
-export function useMultiplayerState<
+// Bind an existing NoyaManager to React and wire up extras, inspector, and sync
+export function useBindNoyaManager<
   S,
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
 >(
-  initialState: S | (() => S),
-  options?: UseMultiplayerStateOptions<S, M, E, MenuT>
+  noyaManager: NoyaManager<S, M, E, MenuT>,
+  options?: Pick<
+    UseMultiplayerStateOptions<S, M, E, MenuT>,
+    "inspector" | "sync"
+  >
 ) {
-  const {
-    sync = stubSync<
-      unknown,
-      object,
-      object,
-      string
-    >() as unknown as SyncAdapter<S, M, E, MenuT>,
-    inspector,
-    ...rest
-  } = options ?? {};
-
-  const [noyaManager] = useState(
-    () => new NoyaManager<S, M, E, MenuT>(initialState, rest)
-  );
-
   const state = useObservable(
     noyaManager.multiplayerStateManager.optimisticState$
   );
@@ -197,7 +169,7 @@ export function useMultiplayerState<
     };
   }, [noyaManager, assets]);
 
-  const syncRef = useRef(sync);
+  const syncRef = useRef(options?.sync);
 
   useEffect(() => {
     if (syncRef.current) {
@@ -209,13 +181,40 @@ export function useMultiplayerState<
 
   useStateInspector<S, M, E, MenuT>({
     noyaManager,
-    disabled: !inspector,
-    ...(typeof inspector === "object" && inspector),
+    disabled: !options?.inspector,
+    ...(typeof options?.inspector === "object" && options?.inspector),
   });
 
   return [state, noyaManager.multiplayerStateManager.setState, extras] as const;
 }
 
+export function useMultiplayerState<
+  S,
+  M extends object = object,
+  E extends object = object,
+  MenuT extends string = string,
+>(
+  initialState: S | (() => S),
+  options?: UseMultiplayerStateOptions<S, M, E, MenuT>
+) {
+  const {
+    sync = stubSync<
+      unknown,
+      object,
+      object,
+      string
+    >() as unknown as SyncAdapter<S, M, E, MenuT>,
+    inspector,
+    ...rest
+  } = options ?? {};
+
+  const [noyaManager] = useState(
+    () => new NoyaManager<S, M, E, MenuT>(initialState, rest)
+  );
+
+  return useBindNoyaManager<S, M, E, MenuT>(noyaManager, { sync, inspector });
+}
+
 function useErrorOverlay<MenuT extends string = string>(
   noyaManager: NoyaManager<any, any, any, MenuT>
 ) {

package/src/index.ts

@@ -7,6 +7,7 @@ export * from "./inspector/StateInspector";
 export * from "./inspector/useStateInspector";
 export * from "./noyaApp";
 export * from "./NoyaStateContext";
+export * from "./singleton";
 export * from "./useObservable";
 export { WebSocketConnection } from "./WebSocketConnection";
 export type { ConnectionEvent, ConnectionOptions } from "./WebSocketConnection";

package/src/inspector/StateInspector.tsx

@@ -2,9 +2,9 @@
 "use client";
 
 import { Input, OutputTransform } from "@noya-app/noya-schemas";
-import { Base64, uuid } from "@noya-app/noya-utils";
+import { Base64, memoize, uuid } from "@noya-app/noya-utils";
 import { downloadBlob, memoGeneric } from "@noya-app/react-utils";
-import { NoyaManager } from "@noya-app/state-manager";
+import { NoyaAsset, NoyaManager } from "@noya-app/state-manager";
 import React, {
   CSSProperties,
   ComponentPropsWithoutRef,
@@ -432,7 +432,11 @@ export const StateInspector = memoGeneric(function StateInspector<
         <StateInspectorDisclosureRowInner>
           {assets.map((asset) => (
             <StateInspectorRow key={asset.id} colorScheme={colorScheme}>
-              <ObjectInspector name={asset.id} data={asset} theme={theme} />
+              <ObjectInspector
+                name={asset.id}
+                data={truncateAsset(asset)}
+                theme={theme}
+              />
               <StateInspectorButton
                 theme={theme}
                 onClick={() => assetManager.delete(asset.id)}
@@ -462,10 +466,8 @@ export const StateInspector = memoGeneric(function StateInspector<
                   "Are you sure you want to delete all resources?"
                 );
                 if (!ok) return;
-                await Promise.all(
-                  resources.map((resource) =>
-                    resourceManager.deleteResource({ id: resource.id })
-                  )
+                await resourceManager.deleteResource(
+                  resources.map((resource) => ({ id: resource.id }))
                 );
               }}
             >
@@ -706,3 +708,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     </div>
   );
 });
+
+const truncateAsset = memoize((asset: NoyaAsset) => {
+  if (asset.url.startsWith("data:") || asset.url.startsWith("blob:")) {
+    return { ...asset, url: ellipsis(asset.url, 40) };
+  }
+  return asset;
+});

package/src/inspector/serialization.ts

@@ -96,28 +96,22 @@ export async function importAll(
   }
 
   if (assets.length) {
-    // Delete all existing assets
     await Promise.all(
       noyaManager.assetManager.assets$
         .get()
-        .map((asset) => noyaManager.assetManager.delete(asset.id))
+        .map((asset) => noyaManager.assetManager.delete(asset.stableId))
     );
 
-    // Add new assets
-    const idPairs = await Promise.all(
-      assets.map(async (asset): Promise<[string, string]> => {
-        const newAsset = await noyaManager.assetManager.create({
+    // Add new assets, preserving stableIds
+    await Promise.all(
+      assets.map(async (asset) => {
+        await noyaManager.assetManager.create({
           data: assetMap[asset.id],
           contentType: asset.contentType,
+          stableId: asset.stableId,
         });
-
-        return [asset.id, newAsset.id];
       })
     );
-
-    const replacementMap = Object.fromEntries(idPairs);
-
-    state = replaceDeep(state, replacementMap);
   }
 
   // if (schema) {

package/src/inspector/useStateInspector.tsx

@@ -17,6 +17,19 @@ function createShadowRootElement() {
   return { host, container };
 }
 
+export function createStateInspectorRoot() {
+  const { host, container } = createShadowRootElement();
+  const root = createRoot(container);
+  document.body.appendChild(host);
+
+  return {
+    root,
+    unmount: () => {
+      document.body.removeChild(host);
+    },
+  };
+}
+
 export function useStateInspector<
   S,
   M extends object,
@@ -36,16 +49,11 @@ export function useStateInspector<
   useIsomorphicLayoutEffect(() => {
     if (disabled) return;
 
-    const { host, container } = createShadowRootElement();
-    const root = createRoot(container);
-
-    document.body.appendChild(host);
+    const { root, unmount } = createStateInspectorRoot();
 
     setRoot(root);
 
-    return () => {
-      document.body.removeChild(host);
-    };
+    return unmount;
   }, [disabled]);
 
   useIsomorphicLayoutEffect(() => {

package/src/noyaApp.ts

@@ -5,6 +5,7 @@ import {
   createOrCastValue,
   isEmbeddedApp,
   localStorageSync,
+  NoyaManager,
   parentFrameSync,
   Static,
   stubSync,
@@ -14,7 +15,7 @@ import {
   webSocketSync,
 } from "@noya-app/state-manager";
 import { useMemo, useState } from "react";
-import { useMultiplayerState, UseMultiplayerStateOptions } from "./hooks";
+import { useBindNoyaManager, UseMultiplayerStateOptions } from "./hooks";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 
 export type AppViewType = "editable" | "readOnly" | "preview";
@@ -96,6 +97,27 @@ export function getAppData<State>(
   return appData as AppData<State>;
 }
 
+export function getSyncAdapter<
+  S,
+  M extends object = object,
+  E extends object = object,
+  MenuT extends string = string,
+>(params?: {
+  multiplayerUrl?: string;
+  offlineStorageKey?: string;
+  debug?: boolean;
+}): SyncAdapter<S, M, E, MenuT> {
+  const { multiplayerUrl, offlineStorageKey, debug } = params ?? {};
+
+  return isEmbeddedApp()
+    ? parentFrameSync<S, M, E, MenuT>({ debug })
+    : multiplayerUrl
+      ? webSocketSync<S, M, E, MenuT>({ url: multiplayerUrl, debug })
+      : offlineStorageKey
+        ? localStorageSync<S, M, E, MenuT>({ key: offlineStorageKey })
+        : stubSync<S, M, E, MenuT>();
+}
+
 export type UseNoyaStateOptions<
   S,
   M extends object = object,
@@ -111,9 +133,9 @@ export type UseNoyaStateResult<
   E extends object = object,
   MenuT extends string = string,
 > = [
-  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[0],
-  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[1],
-  ReturnType<typeof useMultiplayerState<S, M, E, MenuT>>[2] & {
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[0],
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[1],
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[2] & {
     theme: AppTheme;
     viewType: AppViewType;
   },
@@ -128,7 +150,7 @@ export type UseNoyaStateResult<
  * 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 })`
  */
-export function useNoyaState<
+export function useNoyaStateInternal<
   S,
   M extends object = object,
   E extends object = object,
@@ -178,20 +200,18 @@ export function useNoyaState<
   });
 
   const sync = useMemo((): SyncAdapter<S, M, E, MenuT> => {
-    return isEmbeddedApp()
-      ? parentFrameSync<S, M, E, MenuT>({ debug: options?.debug })
-      : multiplayerUrl
-        ? webSocketSync<S, M, E, MenuT>({
-            url: multiplayerUrl,
-            debug: options?.debug,
-          })
-        : options?.offlineStorageKey
-          ? localStorageSync<S, M, E, MenuT>({ key: options.offlineStorageKey })
-          : stubSync<S, M, E, MenuT>();
+    return getSyncAdapter<S, M, E, MenuT>({
+      multiplayerUrl,
+      offlineStorageKey: options?.offlineStorageKey,
+      debug: options?.debug,
+    });
   }, [multiplayerUrl, options?.offlineStorageKey, options?.debug]);
 
-  const result = useMultiplayerState(noyaAppInitialState as S, {
-    ...options,
+  const [noyaManager] = useState(
+    () => new NoyaManager<S, M, E, MenuT>(noyaAppInitialState as S, options)
+  );
+
+  const result = useBindNoyaManager<S, M, E, MenuT>(noyaManager, {
     inspector: options?.inspector ?? inspector,
     sync: options?.sync ?? sync,
   });

package/src/singleton.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import {
+  NoyaManager,
+  NoyaManagerOptions,
+  type SyncAdapter,
+} from "@noya-app/state-manager";
+import React from "react";
+import type { StateInspectorOptions } from "./inspector/StateInspector";
+import { StateInspector } from "./inspector/StateInspector";
+import { createStateInspectorRoot } from "./inspector/useStateInspector";
+import {
+  type AppTheme,
+  type AppViewType,
+  getAppData,
+  getSyncAdapter,
+} from "./noyaApp";
+
+let noyaManagerSingleton: NoyaManager<any, any, any, any> | undefined;
+let noyaSingletonBindings: AnyNoyaSingletonBindings | undefined;
+
+export type AnyNoyaSingletonBindings = {
+  sync?: SyncAdapter<any, any, any, any>;
+  inspector?: boolean | StateInspectorOptions;
+  theme: AppTheme;
+  viewType: AppViewType;
+};
+
+export type AnyNoyaSingletonOptions<
+  S,
+  M extends object,
+  E extends object,
+  MenuT extends string,
+> = NoyaManagerOptions<S, M> & {
+  initialState?: S | (() => S);
+  sync?: SyncAdapter<S, M, E, MenuT>;
+  inspector?: boolean | StateInspectorOptions;
+  theme?: AppTheme;
+  viewType?: AppViewType;
+  offlineStorageKey?: string;
+  multiplayerUrl?: string;
+};
+
+export function initializeNoyaSingleton<
+  S,
+  M extends object,
+  E extends object,
+  MenuT extends string,
+>(options?: AnyNoyaSingletonOptions<S, M, E, MenuT>) {
+  if (noyaManagerSingleton) {
+    throw new Error(
+      "Noya has already been initialized. Call `useNoyaState` instead."
+    );
+  }
+
+  const {
+    initialState,
+    sync,
+    inspector,
+    theme,
+    viewType,
+    offlineStorageKey,
+    multiplayerUrl,
+    ...managerOptions
+  } = (options ?? {}) as AnyNoyaSingletonOptions<S, M, E, MenuT>;
+
+  const appData = getAppData<S>(
+    (initialState ?? null) as S | (() => S),
+    managerOptions?.schema,
+    { overrideExistingState: managerOptions?.overrideExistingState }
+  );
+
+  noyaManagerSingleton = new NoyaManager<S, M, E, MenuT>(
+    appData.initialState as S,
+    managerOptions
+  );
+
+  const resolvedSync =
+    sync ??
+    getSyncAdapter<S, M, E, MenuT>({
+      multiplayerUrl: multiplayerUrl ?? appData.multiplayerUrl,
+      offlineStorageKey,
+      debug: managerOptions?.debug,
+    });
+
+  // Activate sync immediately for the singleton
+  try {
+    resolvedSync({ noyaManager: noyaManagerSingleton });
+  } catch (error) {
+    console.warn("Failed to activate sync", error);
+  }
+
+  const resolvedInspector = inspector ?? appData.inspector;
+  const resolvedTheme = theme ?? appData.theme ?? "light";
+  const resolvedViewType = viewType ?? appData.viewType ?? "editable";
+
+  if (resolvedInspector) {
+    const { root } = createStateInspectorRoot();
+
+    root.render(
+      <StateInspector
+        noyaManager={noyaManagerSingleton}
+        colorScheme={
+          resolvedInspector === true
+            ? resolvedTheme
+            : resolvedInspector.colorScheme
+        }
+        anchor={
+          resolvedInspector === true ? "bottom right" : resolvedInspector.anchor
+        }
+      />
+    );
+  }
+
+  noyaSingletonBindings = {
+    sync: resolvedSync,
+    inspector: resolvedInspector,
+    theme: resolvedTheme,
+    viewType: resolvedViewType,
+  };
+}
+
+export function getNoyaManagerSingleton() {
+  if (!noyaManagerSingleton || !noyaSingletonBindings) {
+    throw new Error(
+      "Noya has not been initialized. Call initializeNoya once before using Noya hooks."
+    );
+  }
+
+  return noyaManagerSingleton;
+}
+
+export function getNoyaSingletonBindings() {
+  return noyaSingletonBindings;
+}
+
+export function deleteNoyaSingleton() {
+  noyaManagerSingleton = undefined;
+  noyaSingletonBindings = undefined;
+}