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

package/src/inspector/serialization.ts

@@ -0,0 +1,202 @@
+import { Asset, decodeSchema, encodeSchema } from "@noya-app/noya-schemas";
+import { createHash, NoyaManager, TSchema } from "@noya-app/state-manager";
+import { TinyZip } from "./zip/TinyZip";
+
+export async function fetchAssetMap(
+  assets: Asset[]
+): Promise<Record<string, Uint8Array>> {
+  const res = await Promise.all(
+    assets.map(async (asset) => {
+      const url = asset.url;
+      const response = await fetch(url);
+      const data = await response.arrayBuffer();
+      return [asset.id, data];
+    })
+  );
+
+  return Object.fromEntries(res);
+}
+
+export async function exportAll(noyaManager: NoyaManager<any, any, any, any>) {
+  const { multiplayerStateManager, assetManager } = noyaManager;
+
+  const assetMap = await fetchAssetMap(assetManager.assets$.get());
+
+  return encodeAll({
+    state: multiplayerStateManager.optimisticState$.get(),
+    schema: multiplayerStateManager.schema,
+    assets: assetManager.assets$.get(),
+    assetMap,
+  });
+}
+
+export function encodeAll({
+  state,
+  schema,
+  assets,
+  assetMap,
+}: {
+  state: unknown;
+  schema?: TSchema;
+  assets: Asset[];
+  assetMap: Record<string, Uint8Array>;
+}) {
+  const zip = new TinyZip();
+
+  zip.addFile("state.json", JSON.stringify(state, null, 2));
+
+  if (schema) {
+    const encodedSchema = encodeSchema(schema);
+
+    zip.addFile("schema.json", JSON.stringify(encodedSchema, null, 2));
+  }
+
+  if (assets.length) {
+    zip.addFile("assets.json", JSON.stringify(assets, null, 2));
+  }
+
+  for (const [id, data] of Object.entries(assetMap)) {
+    zip.addFile(`assets/${id}`, data);
+  }
+
+  return zip.finish();
+}
+
+export async function importAll(
+  buffer: Uint8Array | ArrayBuffer,
+  noyaManager: NoyaManager<any, any, any, any>,
+  {
+    shouldAllowSchemaChange,
+  }: {
+    shouldAllowSchemaChange?: ({
+      oldSchema,
+      newSchema,
+    }: {
+      oldSchema: TSchema;
+      newSchema: TSchema;
+    }) => boolean;
+  } = {}
+) {
+  let { state, schema, assets, assetMap } = await decodeAll(buffer);
+
+  if (shouldAllowSchemaChange && noyaManager.options.schema && schema) {
+    const oldSchemaHash = createHash(noyaManager.options.schema);
+    const newSchemaHash = createHash(schema);
+
+    if (oldSchemaHash !== newSchemaHash) {
+      const shouldAllow = shouldAllowSchemaChange({
+        oldSchema: noyaManager.options.schema,
+        newSchema: schema,
+      });
+
+      if (!shouldAllow) {
+        throw new Error("Schema change not allowed");
+      }
+    }
+  }
+
+  if (assets.length) {
+    // Delete all existing assets
+    await Promise.all(
+      noyaManager.assetManager.assets$
+        .get()
+        .map((asset) => noyaManager.assetManager.delete(asset.id))
+    );
+
+    // Add new assets
+    const idPairs = await Promise.all(
+      assets.map(async (asset): Promise<[string, string]> => {
+        const newAsset = await noyaManager.assetManager.create({
+          data: assetMap[asset.id],
+          contentType: asset.contentType,
+        });
+
+        return [asset.id, newAsset.id];
+      })
+    );
+
+    const replacementMap = Object.fromEntries(idPairs);
+
+    state = replaceDeep(state, replacementMap);
+  }
+
+  // if (schema) {
+  //   noyaManager.options.schema = schema;
+  // }
+
+  noyaManager.initialState = state;
+  noyaManager.forceInit();
+}
+
+export function decodeAll(buffer: Uint8Array | ArrayBuffer): {
+  state: unknown;
+  schema?: TSchema;
+  assets: Asset[];
+  assetMap: Record<string, Uint8Array>;
+} {
+  const zip = TinyZip.extract(buffer);
+
+  const stateFile = zip["state.json"];
+  const schemaFile = zip["schema.json"];
+  const assetsFile = zip["assets.json"];
+
+  if (!stateFile) {
+    throw new Error("State file not found");
+  }
+
+  const state = JSON.parse(new TextDecoder().decode(stateFile));
+
+  let schema: TSchema | undefined;
+
+  if (schemaFile) {
+    const encodedSchema = JSON.parse(new TextDecoder().decode(schemaFile));
+    schema = decodeSchema(encodedSchema);
+  }
+
+  let assets: Asset[] = [];
+
+  let assetMap: Record<string, Uint8Array> = {};
+
+  if (assetsFile) {
+    assets = JSON.parse(new TextDecoder().decode(assetsFile));
+
+    for (const asset of assets) {
+      const data = zip[`assets/${asset.id}`];
+
+      if (!data) {
+        throw new Error(`Asset ${asset.id} not found`);
+      }
+
+      assetMap[asset.id] = data;
+    }
+  }
+
+  return { state, schema, assets, assetMap };
+}
+
+export function replaceDeep<T>(
+  obj: T,
+  replacementMap: Record<string, string>
+): T {
+  switch (typeof obj) {
+    case "object":
+      if (obj === null) {
+        return obj;
+      }
+
+      if (Array.isArray(obj)) {
+        return obj.map((item) => replaceDeep(item, replacementMap)) as any;
+      }
+
+      return Object.fromEntries(
+        Object.entries(obj).map(([key, value]) => [
+          key,
+          replaceDeep(value, replacementMap),
+        ])
+      ) as any;
+    case "string":
+      return (replacementMap[obj] ?? obj) as any;
+    default:
+      return obj;
+  }
+}

package/src/inspector/utils.ts

@@ -0,0 +1,60 @@
+import { ExtendedPathKey } from "@noya-app/state-manager";
+
+export function pathToString(extendedPath: ExtendedPathKey[]) {
+  return extendedPath
+    .map((key) =>
+      typeof key === "object"
+        ? `:${ellipsis(key.id.toString(), 8, "middle")}`
+        : key
+    )
+    .map((key, index) =>
+      index === 0 || (typeof key === "string" && key.startsWith(":"))
+        ? key
+        : `.${key}`
+    )
+    .join("");
+}
+
+export type EllipsisPosition = "start" | "middle" | "end";
+
+export function ellipsis(
+  str: string,
+  maxLength: number,
+  position: EllipsisPosition = "end"
+) {
+  if (str.length <= maxLength) return str;
+
+  switch (position) {
+    case "start":
+      return `…${str.slice(str.length - maxLength)}`;
+    case "middle": {
+      const halfLength = Math.floor(maxLength / 2);
+      return `${str.slice(0, halfLength)}…${str.slice(str.length - halfLength)}`;
+    }
+    case "end":
+      return `${str.slice(0, maxLength)}…`;
+  }
+}
+
+export function uploadFile() {
+  return new Promise<Blob>((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const buffer = reader.result as ArrayBuffer;
+          const blob = new Blob([buffer]);
+          resolve(blob);
+        };
+        reader.onerror = () => {
+          reject(new Error("Failed to read file"));
+        };
+        reader.readAsArrayBuffer(file);
+      }
+    };
+    input.click();
+  });
+}