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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.52",
+    "@noya-app/state-manager": "0.1.54",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",

package/src/NoyaStateContext.tsx

@@ -2,11 +2,14 @@
 
 import { MenuItem } from "@noya-app/noya-designsystem";
 import {
+  CreateResourceParametersWithoutAccessibleByFileId,
   diffResourceMaps,
   Input,
   MediaItem,
+  ModifiedResource,
   OutputTransform,
   Resource,
+  ResourceCreate,
   ResourceCreateMap,
   ResourceMap,
 } from "@noya-app/noya-schemas";
@@ -19,7 +22,6 @@ import {
 import { useJsonMemo, useStableCallback } from "@noya-app/react-utils";
 import {
   ActivityEventsManager,
-  ConnectedUsersManager,
   CreateParams,
   EphemeralUserDataManager,
   MultiplayerPatchMetadata,
@@ -46,11 +48,112 @@ import React, {
 import {
   AppTheme,
   AppViewType,
-  useNoyaState,
+  useNoyaStateInternal,
   UseNoyaStateOptions,
 } from "./noyaApp";
+import { getNoyaManagerSingleton, getNoyaSingletonBindings } from "./singleton";
 import { useObservable } from "./useObservable";
 
+export function resourceToCreateParameters(
+  resource: ResourceCreate
+): CreateResourceParametersWithoutAccessibleByFileId {
+  switch (resource.type) {
+    case "directory":
+      return {
+        path: resource.path,
+        type: "directory",
+      };
+    case "asset":
+      return {
+        path: resource.path,
+        type: "asset",
+        assetId: resource.assetId,
+        asset: resource.asset,
+      };
+    case "file":
+      return {
+        path: resource.path,
+        type: "file",
+        fileId: resource.fileId,
+      };
+    case "resource":
+      return {
+        path: resource.path,
+        type: "resource",
+        fileId: resource.fileId,
+        resourceId: resource.resourceId,
+      };
+    default:
+      throw new Error(`Unknown resource type: ${(resource as any).type}`);
+  }
+}
+
+type BuildCreateResourcePayloadParameters = {
+  addedResources: ResourceCreate[];
+  modifiedResources: ModifiedResource[];
+  newResourceMap: ResourceCreateMap;
+  resourceMap: ResourceMap;
+};
+
+type BuildCreateResourcePayloadResult = {
+  payload: CreateResourceParametersWithoutAccessibleByFileId[];
+  consumedModifiedResourceIds: string[];
+};
+
+export function buildCreateResourcePayload({
+  addedResources,
+  modifiedResources,
+  newResourceMap,
+  resourceMap,
+}: BuildCreateResourcePayloadParameters): BuildCreateResourcePayloadResult {
+  const toCreateParameters = resourceToCreateParameters;
+
+  const resourcesById = new Map(
+    Object.values(resourceMap).map((resource) => [resource.id, resource])
+  );
+
+  const payload: CreateResourceParametersWithoutAccessibleByFileId[] = [
+    ...addedResources.map(toCreateParameters),
+  ];
+
+  const handledModifiedResourceIds: string[] = [];
+
+  const assetReplacements = modifiedResources
+    .filter(
+      (resource) =>
+        resource.assetId !== undefined || resource.asset !== undefined
+    )
+    .map((resource) => {
+      const previousResource = resourcesById.get(resource.id);
+      const path = resource.path ?? previousResource?.path;
+
+      if (!path) return undefined;
+
+      const updated = newResourceMap[path];
+
+      if (!updated || updated.type !== "asset") return undefined;
+
+      handledModifiedResourceIds.push(resource.id);
+
+      return toCreateParameters(updated);
+    })
+    .filter(
+      (
+        resource
+      ): resource is CreateResourceParametersWithoutAccessibleByFileId =>
+        resource !== undefined
+    );
+
+  const deduped = new Map(
+    [...payload, ...assetReplacements].map((item) => [item.path, item])
+  );
+
+  return {
+    payload: Array.from(deduped.values()),
+    consumedModifiedResourceIds: [...new Set(handledModifiedResourceIds)],
+  };
+}
+
 export interface NoyaStateProviderProps<
   S,
   M extends object,
@@ -79,6 +182,16 @@ export function useAnyNoyaStateContext() {
   const value = useContext(AnyNoyaStateContext);
 
   if (!value) {
+    const bindings = getNoyaSingletonBindings();
+
+    if (bindings) {
+      return {
+        noyaManager: getNoyaManagerSingleton(),
+        theme: bindings.theme,
+        viewType: bindings.viewType,
+      } as AnyNoyaStateContextValue;
+    }
+
     throw new Error(
       "useNoyaStateContext must be used within a NoyaStateProvider"
     );
@@ -111,8 +224,10 @@ export function useAsset(id: string | undefined) {
   const { noyaManager } = useAnyNoyaStateContext();
   const observable = useMemo(
     () =>
-      noyaManager.assetManager.assets$.map((assets) =>
-        assets.find((a) => a.id === id)
+      noyaManager.assetManager.assets$.map(
+        (assets) =>
+          assets.find((a) => a.stableId === id) ??
+          assets.find((a) => a.id === id)
       ),
     [noyaManager, id]
   );
@@ -212,12 +327,9 @@ export function usePipelineManager() {
   return noyaManager.pipelineManager;
 }
 
-export const ConnectedUsersContext = createContext<
-  ConnectedUsersManager | undefined
->(undefined);
-
 export function useConnectedUsersManager() {
-  return useContext(ConnectedUsersContext);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.connectedUsersManager;
 }
 
 export function useConnectedUsers() {
@@ -241,12 +353,9 @@ export function useConnectedUser(userId?: string | null) {
   );
 }
 
-export const AnyEphemeralUserDataManagerContext = createContext<
-  EphemeralUserDataManager<object> | undefined
->(undefined);
-
 export function useAnyEphemeralUserData() {
-  return useContext(AnyEphemeralUserDataManagerContext);
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.ephemeralUserDataManager;
 }
 
 export function useCurrentUserId() {
@@ -259,6 +368,22 @@ export function useIsProcessing() {
   return useObservable(noyaManager.isProcessing$);
 }
 
+export function useFileName() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.filePropertyManager.optimisticValue$);
+}
+
+export function useFilePropertyManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.filePropertyManager;
+}
+
+export function useSetFileNameState() {
+  const fileName = useFileName();
+  const filePropertyManager = useFilePropertyManager();
+  return [fileName, filePropertyManager.updateName] as const;
+}
+
 export function useResourceManager(): ResourceManager {
   const { noyaManager } = useAnyNoyaStateContext();
   return noyaManager.resourceManager;
@@ -306,63 +431,45 @@ export function useResources({
       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}`
-              );
-          }
+      const { payload: createPayload, consumedModifiedResourceIds } =
+        buildCreateResourcePayload({
+          addedResources,
+          modifiedResources,
+          newResourceMap,
+          resourceMap,
         });
 
-        await resourceManager.createResource(payload);
+      if (createPayload.length > 0) {
+        await resourceManager.createResource(createPayload);
       }
 
-      for (const resource of removedResources) {
-        await resourceManager.deleteResource({ id: resource.id });
+      const consumedModifiedResourceIdsSet = new Set(
+        consumedModifiedResourceIds
+      );
 
-        if (shouldDeleteAssets && resource.type === "asset") {
-          try {
+      const remainingModifiedResources = modifiedResources.filter(
+        (resource) => !consumedModifiedResourceIdsSet.has(resource.id)
+      );
+
+      await resourceManager.deleteResource(
+        removedResources.map((resource) => ({ id: resource.id }))
+      );
+
+      if (shouldDeleteAssets) {
+        for (const resource of removedResources) {
+          if (resource.type === "asset") {
             await assetManager.delete(resource.assetId);
-          } catch (error) {
-            console.error("Failed to delete asset:", error);
           }
         }
       }
 
       await Promise.all(
-        modifiedResources.map(({ id, path, assetId, asset }) =>
+        remainingModifiedResources.map(({ id, path, assetId, asset }) =>
           resourceManager.updateResource({
             id,
             path,
             assetId,
-            asset,
+            ...(assetId ? {} : asset ? { asset } : {}),
           })
         )
       );
@@ -453,11 +560,6 @@ export function createNoyaContext<
     NoyaManager<S, M, E> | undefined
   >;
 
-  const EphemeralUserDataManagerContext =
-    AnyEphemeralUserDataManagerContext as React.Context<
-      EphemeralUserDataManager<E> | undefined
-    >;
-
   function NoyaContextProvider({
     children,
     contextValue,
@@ -467,15 +569,7 @@ export function createNoyaContext<
   }) {
     return (
       <AnyNoyaStateContext.Provider value={contextValue}>
-        <ConnectedUsersContext.Provider
-          value={contextValue.noyaManager.connectedUsersManager}
-        >
-          <EphemeralUserDataManagerContext.Provider
-            value={contextValue.noyaManager.ephemeralUserDataManager}
-          >
-            {children}
-          </EphemeralUserDataManagerContext.Provider>
-        </ConnectedUsersContext.Provider>
+        {children}
       </AnyNoyaStateContext.Provider>
     );
   }
@@ -485,17 +579,19 @@ export function createNoyaContext<
     initialState,
     ...options
   }: NoyaStateProviderProps<S, M, E, MenuT>) {
-    const [, , { noyaManager, theme, viewType }] = useNoyaState<S, M, E, MenuT>(
-      initialState,
-      {
-        schema,
-        mergeHistoryEntries,
-        outputTransforms,
-        inputs,
-        safeEval,
-        ...(options as any),
-      }
-    );
+    const [, , { noyaManager, theme, viewType }] = useNoyaStateInternal<
+      S,
+      M,
+      E,
+      MenuT
+    >(initialState, {
+      schema,
+      mergeHistoryEntries,
+      outputTransforms,
+      inputs,
+      safeEval,
+      ...(options as any),
+    });
 
     const contextValue = useMemo(
       () => ({
@@ -635,15 +731,8 @@ export function createNoyaContext<
   }
 
   function useEphemeralUserDataManager() {
-    const ephemeralUserData = useContext(EphemeralUserDataManagerContext);
-
-    if (!ephemeralUserData) {
-      throw new Error(
-        "useEphemeralUserData must be used within a NoyaStateProvider"
-      );
-    }
-
-    return ephemeralUserData;
+    const { noyaManager } = useAnyNoyaStateContext();
+    return noyaManager.ephemeralUserDataManager as EphemeralUserDataManager<E>;
   }
 
   function useNoyaManager() {

package/src/__tests__/NoyaStateContext.test.ts

@@ -13,7 +13,6 @@ it("typechecks", () => {
   });
 
   // For type checking
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function TestComponent() {
     const state = useValue();
     const count = useValue("count");
@@ -38,6 +37,8 @@ it("typechecks", () => {
     expectType<number>(count3);
     expectType<number>(count4);
   }
+
+  void TestComponent;
 });
 
-function expectType<T>(value: T): void {}
+function expectType<T>(_value: T): void {}

package/src/__tests__/resourcePayload.test.ts

@@ -0,0 +1,263 @@
+import {
+  ModifiedResource,
+  Resource,
+  ResourceCreate,
+  ResourceCreateMap,
+  ResourceMap,
+} from "@noya-app/noya-schemas";
+import { describe, expect, it } from "bun:test";
+import {
+  buildCreateResourcePayload,
+  resourceToCreateParameters,
+} from "../NoyaStateContext";
+
+const ISO_DATE = "2024-01-01T00:00:00.000Z";
+
+type AssetResource = Extract<Resource, { type: "asset" }>;
+type AssetResourceCreate = Extract<ResourceCreate, { type: "asset" }>;
+type DirectoryResourceCreate = Extract<ResourceCreate, { type: "directory" }>;
+
+function createAssetResource(
+  overrides: Partial<AssetResource> = {}
+): AssetResource {
+  const resource: AssetResource = {
+    id: "resource-id",
+    stableId: "stable-id",
+    path: "assets/default.png",
+    createdAt: ISO_DATE,
+    updatedAt: ISO_DATE,
+    accessibleByFileId: null,
+    accessibleByFileVersionId: null,
+    type: "asset",
+    assetId: "asset-id",
+    ...overrides,
+  };
+
+  return resource;
+}
+
+function createAssetResourceCreate(
+  overrides: Partial<AssetResourceCreate> = {}
+): AssetResourceCreate {
+  const resource: AssetResourceCreate = {
+    id: "resource-id",
+    stableId: "stable-id",
+    path: "assets/default.png",
+    createdAt: ISO_DATE,
+    updatedAt: ISO_DATE,
+    accessibleByFileId: null,
+    accessibleByFileVersionId: null,
+    type: "asset",
+    assetId: "asset-id",
+    asset: {
+      content: "ZGF0YQ==",
+      contentType: "image/png",
+      encoding: "base64" as const,
+    },
+    ...overrides,
+  };
+
+  return resource;
+}
+
+function createDirectoryResourceCreate(
+  overrides: Partial<DirectoryResourceCreate> = {}
+): DirectoryResourceCreate {
+  const resource: DirectoryResourceCreate = {
+    id: "directory-id",
+    stableId: "directory-stable",
+    path: "docs",
+    createdAt: ISO_DATE,
+    updatedAt: ISO_DATE,
+    accessibleByFileId: null,
+    accessibleByFileVersionId: null,
+    type: "directory",
+    ...overrides,
+  };
+
+  return resource;
+}
+
+describe("resource payload helpers", () => {
+  it("returns create parameters for added resources", () => {
+    const addedResource = createDirectoryResourceCreate();
+
+    const result = buildCreateResourcePayload({
+      addedResources: [addedResource],
+      modifiedResources: [],
+      newResourceMap: {
+        [addedResource.path]: addedResource,
+      } satisfies ResourceCreateMap,
+      resourceMap: {},
+    });
+
+    expect(result.payload).toEqual([
+      {
+        path: "docs",
+        type: "directory",
+      },
+    ]);
+    expect(result.consumedModifiedResourceIds).toEqual([]);
+  });
+
+  it("includes asset replacements when a modified resource swaps the asset", () => {
+    const existingResource = createAssetResource({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "images/logo.png",
+      assetId: "asset-old",
+    });
+
+    const updatedResource = createAssetResourceCreate({
+      id: "new-resource",
+      stableId: "new-stable",
+      path: "images/logo.png",
+      assetId: "asset-new",
+    });
+
+    const result = buildCreateResourcePayload({
+      addedResources: [],
+      modifiedResources: [
+        {
+          id: existingResource.id,
+          stableId: existingResource.stableId,
+          assetId: updatedResource.assetId,
+        } satisfies ModifiedResource,
+      ],
+      newResourceMap: {
+        [updatedResource.path]: updatedResource,
+      } satisfies ResourceCreateMap,
+      resourceMap: {
+        [existingResource.path]: existingResource,
+      } satisfies ResourceMap,
+    });
+
+    expect(result.payload).toEqual([
+      resourceToCreateParameters(updatedResource),
+    ]);
+    expect(result.consumedModifiedResourceIds).toEqual([
+      existingResource.id,
+    ]);
+  });
+
+  it("includes asset replacements when a modified resource provides inline asset data", () => {
+    const existingResource = createAssetResource({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "images/logo.png",
+      assetId: "asset-old",
+    });
+
+    const updatedResource = createAssetResourceCreate({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "images/logo.png",
+      assetId: "asset-old",
+      asset: {
+        content: "ZGF0YQ==",
+        contentType: "image/png",
+        encoding: "base64" as const,
+      },
+    });
+
+    const result = buildCreateResourcePayload({
+      addedResources: [],
+      modifiedResources: [
+        {
+          id: existingResource.id,
+          stableId: existingResource.stableId,
+          asset: updatedResource.asset,
+        } satisfies ModifiedResource,
+      ],
+      newResourceMap: {
+        [updatedResource.path]: updatedResource,
+      } satisfies ResourceCreateMap,
+      resourceMap: {
+        [existingResource.path]: existingResource,
+      } satisfies ResourceMap,
+    });
+
+    expect(result.payload).toEqual([
+      resourceToCreateParameters(updatedResource),
+    ]);
+    expect(result.consumedModifiedResourceIds).toEqual([
+      existingResource.id,
+    ]);
+  });
+
+  it("deduplicates payload entries by path", () => {
+    const existingResource = createAssetResource({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "shared/path",
+      assetId: "asset-old",
+    });
+
+    const updatedResource = createAssetResourceCreate({
+      id: "new-resource",
+      stableId: "new-stable",
+      path: "shared/path",
+      assetId: "asset-new",
+    });
+
+    const result = buildCreateResourcePayload({
+      addedResources: [updatedResource],
+      modifiedResources: [
+        {
+          id: existingResource.id,
+          stableId: existingResource.stableId,
+          assetId: updatedResource.assetId,
+        } satisfies ModifiedResource,
+      ],
+      newResourceMap: {
+        [updatedResource.path]: updatedResource,
+      } satisfies ResourceCreateMap,
+      resourceMap: {
+        [existingResource.path]: existingResource,
+      } satisfies ResourceMap,
+    });
+
+    expect(result.payload).toEqual([
+      resourceToCreateParameters(updatedResource),
+    ]);
+    expect(result.consumedModifiedResourceIds).toEqual([
+      existingResource.id,
+    ]);
+  });
+
+  it("excludes modified resources without asset changes from the consumed list", () => {
+    const existingResource = createAssetResource({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "images/logo.png",
+      assetId: "asset-old",
+    });
+
+    const updatedResource = createAssetResourceCreate({
+      id: "existing-resource",
+      stableId: "existing-stable",
+      path: "images/logo.png",
+      assetId: "asset-old",
+    });
+
+    const result = buildCreateResourcePayload({
+      addedResources: [],
+      modifiedResources: [
+        {
+          id: existingResource.id,
+          stableId: existingResource.stableId,
+          path: updatedResource.path,
+        } satisfies ModifiedResource,
+      ],
+      newResourceMap: {
+        [updatedResource.path]: updatedResource,
+      } satisfies ResourceCreateMap,
+      resourceMap: {
+        [existingResource.path]: existingResource,
+      } satisfies ResourceMap,
+    });
+
+    expect(result.payload).toEqual([]);
+    expect(result.consumedModifiedResourceIds).toEqual([]);
+  });
+});