@noya-app/noya-multiplayer-react 0.1.61 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "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.47",
+    "@noya-app/state-manager": "0.1.49",
     "@noya-app/emitter": "0.1.0",
-    "@noya-app/observable": "0.1.9",
+    "@noya-app/observable": "0.1.11",
     "@noya-app/task-runner": "0.1.6",
-    "@noya-app/react-utils": "0.1.22",
+    "@noya-app/react-utils": "0.1.24",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MenuItem } from "@noya-app/noya-designsystem";
 import { Input, OutputTransform } from "@noya-app/noya-schemas";
 import {
@@ -11,6 +13,7 @@ import {
   ConnectedUsersManager,
   CreateParams,
   EphemeralUserDataManager,
+  MultiplayerPatchMetadata,
   MultiplayerStateManager,
   NoyaManager,
   PublishCallback,
@@ -244,13 +247,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
@@ -339,14 +345,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 +361,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 +382,7 @@ export function createNoyaContext<
     S,
     (
       ...args:
-        | [metadata: M, value: SetStateAction<S>]
+        | [metadata: PartialM, value: SetStateAction<S>]
         | [value: SetStateAction<S>]
     ) => void,
   ];
@@ -387,7 +393,7 @@ export function createNoyaContext<
     A,
     (
       ...args:
-        | [metadata: M, value: SetStateAction<S>]
+        | [metadata: PartialM, value: SetStateAction<S>]
         | [value: SetStateAction<S>]
     ) => void,
   ];
@@ -397,7 +403,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 +423,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 +442,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() {

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} />;
+  }
+};