@noya-app/noya-multiplayer-react 0.1.62 → 0.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.48",
+    "@noya-app/state-manager": "0.1.50",
     "@noya-app/emitter": "0.1.0",
-    "@noya-app/observable": "0.1.10",
+    "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",
-    "@noya-app/react-utils": "0.1.23",
+    "@noya-app/react-utils": "0.1.25",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -1,31 +1,47 @@
+"use client";
+
 import { MenuItem } from "@noya-app/noya-designsystem";
-import { Input, OutputTransform } from "@noya-app/noya-schemas";
+import {
+  diffResourceMaps,
+  Input,
+  MediaItem,
+  OutputTransform,
+  Resource,
+  ResourceCreateMap,
+  ResourceMap,
+} from "@noya-app/noya-schemas";
 import {
   GetAtPath,
   Observable,
   ObservableOptions,
   PathKey,
 } from "@noya-app/observable";
-import { useStableCallback } from "@noya-app/react-utils";
+import { useJsonMemo, useStableCallback } from "@noya-app/react-utils";
 import {
+  ActivityEventsManager,
   ConnectedUsersManager,
   CreateParams,
   EphemeralUserDataManager,
+  MultiplayerPatchMetadata,
   MultiplayerStateManager,
   NoyaManager,
   PublishCallback,
+  ResourceManager,
   SafeEval,
   StateManagerOptions,
   Static,
+  StreamFilter,
   TSchema,
 } from "@noya-app/state-manager";
 import React, {
   createContext,
+  Dispatch,
   SetStateAction,
   useCallback,
   useContext,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import {
   AppTheme,
@@ -204,6 +220,27 @@ export function useConnectedUsersManager() {
   return useContext(ConnectedUsersContext);
 }
 
+export function useConnectedUsers() {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(connectedUsersManager?.connectedUsers$);
+}
+
+export function useConnectedUser(userId?: string | null) {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(
+    connectedUsersManager?.connectedUsers$,
+    useCallback(
+      (users) => {
+        return users.find((user) => {
+          const prefix = user.id.slice(0, 8);
+          return userId?.includes(prefix);
+        });
+      },
+      [userId]
+    )
+  );
+}
+
 export const AnyEphemeralUserDataManagerContext = createContext<
   EphemeralUserDataManager<object> | undefined
 >(undefined);
@@ -217,6 +254,163 @@ export function useCurrentUserId() {
   return useObservable(connectedUsersManager?.currentUserId$);
 }
 
+export function useIsProcessing() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.isProcessing$);
+}
+
+export function useResourceManager(): ResourceManager {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.resourceManager;
+}
+
+// export function useResources(): Resource[] {
+//   const { noyaManager } = useAnyNoyaStateContext();
+//   const resources = useObservable(noyaManager.resourceManager.resources$);
+//   return resources;
+// }
+
+export function resourceToMediaItem(resource: Resource): MediaItem {
+  switch (resource.type) {
+    case "asset":
+      return { kind: "asset", id: resource.id, assetId: resource.assetId };
+    case "file":
+      return { kind: "noyaFile", id: resource.id, fileId: resource.fileId };
+    default:
+      return { kind: "folder", id: resource.id };
+  }
+}
+
+export function useResources({
+  shouldDeleteAssets = true,
+}: {
+  shouldDeleteAssets?: boolean;
+} = {}): [ResourceMap, Dispatch<SetStateAction<ResourceCreateMap>>] {
+  const resourceManager = useResourceManager();
+  const assetManager = useAssetManager();
+
+  const resourceMap = useObservable(
+    resourceManager.optimisticResources$,
+    useCallback((resources) => {
+      return Object.fromEntries(
+        resources.map((resource) => [resource.path, resource])
+      );
+    }, [])
+  );
+
+  const setResourceMap = useCallback(
+    async (action: SetStateAction<ResourceCreateMap>) => {
+      const newResourceMap =
+        action instanceof Function ? action(resourceMap) : action;
+
+      const { addedResources, removedResources, modifiedResources } =
+        diffResourceMaps(resourceMap, newResourceMap, "id");
+
+      if (addedResources.length > 0) {
+        const payload = addedResources.map((resource) => {
+          switch (resource.type) {
+            case "directory":
+              return {
+                path: resource.path,
+                type: "directory" as const,
+              };
+            case "asset":
+              return {
+                path: resource.path,
+                type: "asset" as const,
+                assetId: resource.assetId,
+                asset: resource.asset,
+              };
+            case "file":
+              return {
+                path: resource.path,
+                type: "file" as const,
+                fileId: resource.fileId,
+              };
+            case "resource":
+              return {
+                path: resource.path,
+                type: "resource" as const,
+                fileId: resource.fileId,
+                resourceId: resource.resourceId,
+              };
+            default:
+              throw new Error(
+                `Unknown resource type: ${(resource as any).type}`
+              );
+          }
+        });
+
+        await resourceManager.createResource(payload);
+      }
+
+      for (const resource of removedResources) {
+        await resourceManager.deleteResource({ id: resource.id });
+
+        if (shouldDeleteAssets && resource.type === "asset") {
+          try {
+            await assetManager.delete(resource.assetId);
+          } catch (error) {
+            console.error("Failed to delete asset:", error);
+          }
+        }
+      }
+
+      await Promise.all(
+        modifiedResources.map(({ id, path, assetId, asset }) =>
+          resourceManager.updateResource({
+            id,
+            path,
+            assetId,
+            asset,
+          })
+        )
+      );
+    },
+    [resourceMap, resourceManager, shouldDeleteAssets, assetManager]
+  );
+
+  return [resourceMap, setResourceMap];
+}
+
+const emptyArray: unknown[] = [];
+
+export function useActivityEvents(streamFilter: StreamFilter) {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useActivityEventsForManager(
+    streamFilter,
+    noyaManager.activityEventsManager
+  );
+}
+
+export function useActivityEventsForManager(
+  streamFilter: StreamFilter | undefined,
+  activityEventsManager: ActivityEventsManager
+) {
+  const [streamId, setStreamId] = useState<string | undefined>(undefined);
+  const stableStreamFilter = useJsonMemo(streamFilter);
+
+  useEffect(() => {
+    if (!stableStreamFilter) return;
+
+    const streamId = activityEventsManager.subscribe(stableStreamFilter);
+
+    setStreamId(streamId);
+
+    return () => {
+      setStreamId(undefined);
+
+      activityEventsManager.unsubscribe(streamId);
+    };
+  }, [activityEventsManager, stableStreamFilter]);
+
+  const observable = streamId
+    ? activityEventsManager.getStream(streamId)
+    : undefined;
+
+  return useObservable(observable) ?? emptyArray;
+}
+
 export const FallbackUntilInitialized = ({
   children,
   fallback,
@@ -244,13 +438,16 @@ export function createNoyaContext<
   schema: Schema;
   mergeHistoryEntries?: StateManagerOptions<
     Static<Schema>,
-    M
+    M & Pick<MultiplayerPatchMetadata, "name" | "timestamp">
   >["mergeHistoryEntries"];
   safeEval?: SafeEval;
   outputTransforms?: CreateParams<OutputTransform>[];
   inputs?: CreateParams<Input>[];
 }) {
   type S = Static<Schema>;
+  type PartialM = Partial<
+    M & Pick<MultiplayerPatchMetadata, "name" | "timestamp">
+  >;
 
   const NoyaStateContext = AnyNoyaStateContext as React.Context<
     NoyaManager<S, M, E> | undefined
@@ -261,6 +458,28 @@ export function createNoyaContext<
       EphemeralUserDataManager<E> | undefined
     >;
 
+  function NoyaContextProvider({
+    children,
+    contextValue,
+  }: {
+    children: React.ReactNode;
+    contextValue: AnyNoyaStateContextValue;
+  }) {
+    return (
+      <AnyNoyaStateContext.Provider value={contextValue}>
+        <ConnectedUsersContext.Provider
+          value={contextValue.noyaManager.connectedUsersManager}
+        >
+          <EphemeralUserDataManagerContext.Provider
+            value={contextValue.noyaManager.ephemeralUserDataManager}
+          >
+            {children}
+          </EphemeralUserDataManagerContext.Provider>
+        </ConnectedUsersContext.Provider>
+      </AnyNoyaStateContext.Provider>
+    );
+  }
+
   function NoyaStateProvider({
     children,
     initialState,
@@ -288,23 +507,15 @@ export function createNoyaContext<
     );
 
     return (
-      <AnyNoyaStateContext.Provider value={contextValue}>
-        <ConnectedUsersContext.Provider
-          value={noyaManager.connectedUsersManager}
-        >
-          <EphemeralUserDataManagerContext.Provider
-            value={noyaManager.ephemeralUserDataManager}
-          >
-            {options.fallback !== undefined ? (
-              <FallbackUntilInitialized fallback={options.fallback}>
-                {children}
-              </FallbackUntilInitialized>
-            ) : (
-              children
-            )}
-          </EphemeralUserDataManagerContext.Provider>
-        </ConnectedUsersContext.Provider>
-      </AnyNoyaStateContext.Provider>
+      <NoyaContextProvider contextValue={contextValue}>
+        {options.fallback !== undefined ? (
+          <FallbackUntilInitialized fallback={options.fallback}>
+            {children}
+          </FallbackUntilInitialized>
+        ) : (
+          children
+        )}
+      </NoyaContextProvider>
     );
   }
 
@@ -339,14 +550,14 @@ export function createNoyaContext<
 
   function useSetValue(): (
     ...args:
-      | [metadata: M, value: SetStateAction<S>]
+      | [metadata: PartialM, value: SetStateAction<S>]
       | [value: SetStateAction<S>]
   ) => void;
   function useSetValue<P extends PathKey[] | string>(
     path: P
   ): (
     ...args:
-      | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+      | [metadata: PartialM, value: SetStateAction<GetAtPath<S, P>>]
       | [value: SetStateAction<GetAtPath<S, P>>]
   ) => void;
   function useSetValue<P extends PathKey[] | string>(path?: P) {
@@ -355,7 +566,7 @@ export function createNoyaContext<
     const setValue = useCallback(
       (
         ...args:
-          | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+          | [metadata: PartialM, value: SetStateAction<GetAtPath<S, P>>]
           | [value: SetStateAction<GetAtPath<S, P>>]
       ): void => {
         const [metadata, value] = args.length === 2 ? args : [{}, args[0]];
@@ -376,7 +587,7 @@ export function createNoyaContext<
     S,
     (
       ...args:
-        | [metadata: M, value: SetStateAction<S>]
+        | [metadata: PartialM, value: SetStateAction<S>]
         | [value: SetStateAction<S>]
     ) => void,
   ];
@@ -387,7 +598,7 @@ export function createNoyaContext<
     A,
     (
       ...args:
-        | [metadata: M, value: SetStateAction<S>]
+        | [metadata: PartialM, value: SetStateAction<S>]
         | [value: SetStateAction<S>]
     ) => void,
   ];
@@ -397,7 +608,7 @@ export function createNoyaContext<
     GetAtPath<S, P>,
     (
       ...args:
-        | [metadata: M, value: SetStateAction<GetAtPath<S, P>>]
+        | [metadata: PartialM, value: SetStateAction<GetAtPath<S, P>>]
         | [value: SetStateAction<GetAtPath<S, P>>]
     ) => void,
   ];
@@ -417,7 +628,10 @@ export function createNoyaContext<
   function useStateManager() {
     const { noyaManager } = useAnyNoyaStateContext();
 
-    return noyaManager.multiplayerStateManager as MultiplayerStateManager<S, M>;
+    return noyaManager.multiplayerStateManager as MultiplayerStateManager<
+      S,
+      PartialM
+    >;
   }
 
   function useEphemeralUserDataManager() {
@@ -433,7 +647,12 @@ export function createNoyaContext<
   }
 
   function useNoyaManager() {
-    return useAnyNoyaStateContext().noyaManager as NoyaManager<S, M, E, MenuT>;
+    return useAnyNoyaStateContext().noyaManager as NoyaManager<
+      S,
+      PartialM,
+      E,
+      MenuT
+    >;
   }
 
   function useLeftMenuItems() {
@@ -499,6 +718,7 @@ export function createNoyaContext<
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
+    NoyaContextProvider,
     useValue,
     useSetValue,
     useValueState,

package/src/__tests__/serialize.test.ts

@@ -0,0 +1,126 @@
+import { Asset } from "@noya-app/noya-schemas";
+import { Base64 } from "@noya-app/noya-utils";
+import { NoyaManager, Static, Type } from "@noya-app/state-manager";
+import { expect, it } from "bun:test";
+import {
+  decodeAll,
+  encodeAll,
+  exportAll,
+  importAll,
+} from "../inspector/serialization";
+
+const asset1Data = new Uint8Array([0x00, 0x01, 0x02, 0x03]);
+const asset1Id = "2717f281-307d-4e9e-aa3b-68d29d4a1723";
+const asset1DataUrl = `data:application/octet-stream;base64,${Base64.encode(
+  asset1Data
+)}`;
+const asset1 = {
+  id: asset1Id,
+  url: asset1DataUrl,
+  createdAt: new Date().toISOString(),
+  size: asset1Data.byteLength,
+};
+const assets: Asset[] = [asset1];
+const assetMap = {
+  [asset1Id]: asset1Data,
+};
+
+it("should serialize and deserialize the state", () => {
+  const schema = Type.Object({
+    name: Type.String(),
+    age: Type.Number(),
+  });
+
+  const initialState: Static<typeof schema> = {
+    name: "John",
+    age: 30,
+  };
+
+  const buffer = encodeAll({
+    state: initialState,
+    schema,
+    assets,
+    assetMap,
+  });
+
+  const decoded = decodeAll(buffer);
+
+  expect(decoded.state).toEqual(initialState);
+  expect(decoded.schema).toEqual(schema);
+  expect(decoded.assets).toEqual(assets);
+  expect(decoded.assetMap).toEqual(assetMap);
+});
+
+it("should import and export the noya manager state", async () => {
+  const schema = Type.Object({
+    name: Type.String(),
+    age: Type.Number(),
+    assetRef: Type.String(),
+  });
+
+  const initialState: Static<typeof schema> = {
+    name: "John",
+    age: 30,
+    assetRef: asset1Id,
+  };
+
+  const noyaManager = new NoyaManager(initialState, {
+    schema,
+    initialAssets: assets,
+  });
+
+  const buffer = await exportAll(noyaManager);
+
+  const stateToReplace = {
+    name: "Jane",
+    age: 20,
+    assetRef: "not-found",
+  };
+
+  const schemaToReplace = Type.Object({
+    name: Type.String(),
+    age: Type.Number(),
+    isAdmin: Type.Boolean(),
+  });
+
+  const newNoyaManager = new NoyaManager(stateToReplace, {
+    schema: schemaToReplace,
+    mode: "standalone",
+  });
+
+  let didCall = false;
+
+  await importAll(buffer, newNoyaManager, {
+    shouldAllowSchemaChange: () => {
+      didCall = true;
+      return true;
+    },
+  });
+
+  expect(didCall).toBe(true);
+
+  const importedAssets = newNoyaManager.assetManager.assets$.get();
+  const firstAsset = importedAssets.at(0);
+
+  if (!firstAsset) {
+    throw new Error("First asset not found");
+  }
+
+  expect(newNoyaManager.multiplayerStateManager.optimisticState$.get()).toEqual(
+    {
+      ...initialState,
+      assetRef: firstAsset.id,
+    }
+  );
+
+  expect(firstAsset).toMatchObject({
+    size: asset1.size,
+  });
+
+  // actualFetch to handle blob: urls
+  const firstAssetData = await (globalThis as any)
+    .actualFetch(firstAsset.url)
+    .then((res: any) => res.arrayBuffer());
+
+  expect(new Uint8Array(firstAssetData)).toEqual(asset1Data);
+});

package/src/ai.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { AIToolDefinition } from "@noya-app/state-manager";
 import { useEffect } from "react";
 import { useAIManager } from "./NoyaStateContext";

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "@noya-app/state-manager";
 export * from "./ai";
 export * from "./components/UserPointersOverlay";
 export * from "./hooks";
+export * from "./inspector/serialization";
 export * from "./inspector/StateInspector";
 export * from "./inspector/useStateInspector";
 export * from "./noyaApp";

package/src/inspector/ColoredDot.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export function ColoredDot({ type }: { type: "success" | "error" }) {
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: 6,
+        height: 6,
+        background:
+          type === "success" ? "rgba(0,200,0,0.8)" : "rgba(200,0,0,0.8)",
+        borderRadius: "50%",
+        verticalAlign: "middle",
+      }}
+    />
+  );
+}

package/src/inspector/ObjectRootLabel.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { ObjectName, ObjectPreview } from "react-inspector";
+
+type MessageDirection = "up" | "down";
+
+export const ObjectRootLabel: FC<{
+  name?: string;
+  data: any;
+  direction?: MessageDirection;
+}> = ({ name, data, direction }) => {
+  if (typeof name === "string") {
+    return (
+      <span>
+        <ObjectName name={name} />
+        <span>: </span>
+        <ObjectPreview data={data} />
+      </span>
+    );
+  }
+  if (direction === "up" || direction === "down") {
+    const arrow = direction === "up" ? "↑" : "↓";
+
+    return (
+      <span>
+        <span
+          style={{
+            background:
+              direction === "up" ? "rgba(0,255,0,0.2)" : "rgba(255,0,0,0.2)",
+            // color: "white",
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: 4,
+            lineHeight: "12px",
+          }}
+        >
+          {arrow}
+        </span>
+        <ObjectPreview data={data} />
+      </span>
+    );
+  } else {
+    return <ObjectPreview data={data} />;
+  }
+};