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

package/src/inspector/sections/HistorySection.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import {
+  HistorySnapshot,
+  MultiplayerPatchMetadata,
+  MultiplayerStateManager,
+} from "@noya-app/state-manager";
+import React, { useEffect, useRef } from "react";
+import { ObjectInspector } from "react-inspector";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import {
+  getStateInspectorBorderColor,
+  getStateInspectorTheme,
+} from "../inspectorTheme";
+import { pathToString } from "../utils";
+
+const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+
+export function HistorySection<S, M extends object>({
+  showHistory,
+  setShowHistory,
+  colorScheme,
+  historySnapshot,
+  multiplayerStateManager,
+}: {
+  showHistory: boolean;
+  setShowHistory: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  historySnapshot: HistorySnapshot<S, Partial<M> & MultiplayerPatchMetadata>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+
+  // If history index changes, scroll to the new history entry into view
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const historyEntry = ref.current.querySelector(
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
+    );
+
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }, [historySnapshot.historyIndex]);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showHistory}
+      setOpen={setShowHistory}
+      title="History"
+      colorScheme={colorScheme}
+      right={
+        <span
+          style={{
+            display: "flex",
+            gap: "4px",
+          }}
+        >
+          <StateInspectorButton
+            disabled={!historySnapshot.canUndo}
+            theme={theme}
+            onClick={() => {
+              multiplayerStateManager.undo();
+            }}
+          >
+            <span style={{ width: "12px", height: "12px" }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                />
+              </svg>
+            </span>
+          </StateInspectorButton>
+          <StateInspectorButton
+            disabled={!historySnapshot.canRedo}
+            theme={theme}
+            onClick={() => {
+              multiplayerStateManager.redo();
+            }}
+          >
+            <span style={{ width: "12px", height: "12px" }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill="currentColor"
+                  d="M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                />
+              </svg>
+            </span>
+          </StateInspectorButton>
+        </span>
+      }
+    >
+      <StateInspectorDisclosureRowInner ref={ref}>
+        <div
+          id={`${HISTORY_ELEMENT_PREFIX}0`}
+          style={{
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
+            display: "flex",
+            alignItems: "center",
+            background:
+              historySnapshot.historyIndex === 0
+                ? "rgb(59 130 246 / 15%)"
+                : undefined,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: "Menlo, monospace",
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block",
+            }}
+          >
+            Initial state
+          </span>
+        </div>
+        {historySnapshot.history.map((entry, index) => {
+          const metadata = entry.metadata;
+          const { id, name, timestamp, ...rest } = metadata;
+
+          return (
+            <div
+              id={`${HISTORY_ELEMENT_PREFIX}${index + 1}`}
+              key={index}
+              style={{
+                padding: "0px 12px 1px",
+                borderBottom: `1px solid ${solidBorderColor}`,
+                background:
+                  index + 1 === historySnapshot.historyIndex
+                    ? "rgb(59 130 246 / 15%)"
+                    : undefined,
+              }}
+            >
+              {typeof name === "string" && (
+                <pre
+                  style={{
+                    fontSize: "11px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    margin: 0,
+                  }}
+                >
+                  {entry.metadata.name}
+                  {Object.keys(rest).length > 0 && (
+                    <ObjectInspector data={rest} theme={theme} />
+                  )}
+                </pre>
+              )}
+              {entry.redoPatches?.map((patch, j) => (
+                <pre
+                  key={j}
+                  style={{
+                    fontSize: "11px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    margin: 0,
+                  }}
+                >
+                  {patch.op === "add" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "replace" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "remove" && (
+                    <>
+                      <span style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>
+                        delete{" "}
+                      </span>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
+                  {patch.op === "move" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.from!)}
+                      </span>
+                      {" -> "}
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
+                </pre>
+              ))}
+            </div>
+          );
+        })}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

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<File>((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 File([buffer], file.name, { type: file.type });
+          resolve(blob);
+        };
+        reader.onerror = () => {
+          reject(new Error("Failed to read file"));
+        };
+        reader.readAsArrayBuffer(file);
+      }
+    };
+    input.click();
+  });
+}