@noya-app/noya-multiplayer-react 0.1.70 → 0.1.72

package/src/inspector/StateInspectorRow.tsx

@@ -8,12 +8,14 @@ export function StateInspectorRow({
   selected,
   style,
   variant,
+  bordered = true,
 }: {
   children: React.ReactNode;
   colorScheme: "light" | "dark";
   selected?: boolean;
   style?: CSSProperties;
   variant?: "up" | "down";
+  bordered?: boolean;
 }) {
   const solidBorderColor =
     colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
@@ -21,7 +23,7 @@ export function StateInspectorRow({
   return (
     <div
       style={{
-        borderBottom: `1px solid ${solidBorderColor}`,
+        borderBottom: bordered ? `1px solid ${solidBorderColor}` : undefined,
         fontSize: "12px",
         fontFamily: "Menlo, monospace",
         padding: "2px 12px 1px",

package/src/inspector/sections/ServerScriptLogsSection.tsx

@@ -0,0 +1,128 @@
+import { ServerScriptLogEntry } from "@noya-app/state-manager";
+import React from "react";
+import { ObjectInspector } from "react-inspector";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+const levelColors: Record<ServerScriptLogEntry["level"], string> = {
+  error: "#f87171",
+  warn: "#facc15",
+  log: "#9ca3af",
+};
+
+function formatTimestamp(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString();
+}
+
+export function ServerScriptLogsSection({
+  showLogs,
+  setShowLogs,
+  colorScheme,
+  logs,
+  containerRef,
+  paused,
+  onTogglePaused,
+}: {
+  showLogs: boolean;
+  setShowLogs: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  logs: ServerScriptLogEntry[];
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  paused: boolean;
+  onTogglePaused: () => void;
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showLogs}
+      setOpen={setShowLogs}
+      title="Server Script Logs"
+      colorScheme={colorScheme}
+      right={
+        <StateInspectorButton theme={theme} onClick={onTogglePaused}>
+          {paused ? "Resume" : "Pause"}
+        </StateInspectorButton>
+      }
+    >
+      <StateInspectorDisclosureRowInner ref={containerRef}>
+        {paused && (
+          <div
+            style={{
+              padding: "4px 12px",
+              fontSize: "11px",
+              opacity: 0.7,
+            }}
+          >
+            Log streaming paused
+          </div>
+        )}
+        {logs.map((log) => (
+          <StateInspectorRow key={log.id} colorScheme={colorScheme}>
+            <div
+              style={{
+                display: "flex",
+                gap: "6px",
+                alignItems: "center",
+                fontSize: "10px",
+                color: "inherit",
+                marginBottom: log.values.length ? "4px" : 0,
+                textTransform: "uppercase",
+              }}
+            >
+              <span>{formatTimestamp(log.timestamp)}</span>
+              <span style={{ color: levelColors[log.level] }}>{log.level}</span>
+              <span
+                style={{
+                  fontFamily: "monospace",
+                  textTransform: "none",
+                  fontSize: "10px",
+                }}
+              >
+                {log.scriptId}
+              </span>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              {log.values.length > 0 ? (
+                log.values.map((value, index) => (
+                  <ObjectInspector
+                    key={index}
+                    data={value}
+                    theme={theme}
+                    expandLevel={3}
+                  />
+                ))
+              ) : (
+                <span style={{ fontSize: "11px", opacity: 0.7 }}>No data</span>
+              )}
+            </div>
+          </StateInspectorRow>
+        ))}
+        {!logs?.length && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No logs received</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/inspector/serialization.ts

@@ -17,7 +17,9 @@ export async function fetchAssetMap(
   return Object.fromEntries(res);
 }
 
-export async function exportAll(noyaManager: NoyaManager<any, any, any, any>) {
+export async function exportAll(
+  noyaManager: NoyaManager<any, any, any, any, any>
+) {
   const { multiplayerStateManager, assetManager } = noyaManager;
 
   const assetMap = await fetchAssetMap(assetManager.assets$.get());
@@ -64,7 +66,7 @@ export function encodeAll({
 
 export async function importAll(
   buffer: Uint8Array | ArrayBuffer,
-  noyaManager: NoyaManager<any, any, any, any>,
+  noyaManager: NoyaManager<any, any, any, any, any>,
   {
     shouldAllowSchemaChange,
   }: {

package/src/inspector/useStateInspector.tsx

@@ -35,15 +35,20 @@ export function useStateInspector<
   M extends object,
   E extends object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >({
   noyaManager,
   disabled = false,
+  advanced = false,
   colorScheme,
   anchor,
 }: {
-  noyaManager: NoyaManager<S, M, E, MenuT>;
-  disabled: boolean;
-} & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
+  noyaManager: NoyaManager<S, M, E, MenuT, I>;
+  disabled?: boolean;
+  advanced?: boolean;
+  colorScheme?: ComponentProps<typeof StateInspector>["colorScheme"];
+  anchor?: ComponentProps<typeof StateInspector>["anchor"];
+}) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
   useIsomorphicLayoutEffect(() => {
@@ -64,7 +69,8 @@ export function useStateInspector<
         colorScheme={colorScheme}
         anchor={anchor}
         noyaManager={noyaManager}
+        advanced={advanced}
       />
     );
-  }, [noyaManager, anchor, colorScheme, root]);
+  }, [noyaManager, anchor, colorScheme, root, advanced]);
 }

package/src/noyaApp.ts

@@ -1,12 +1,15 @@
 "use client";
 
 import { findAllDefs } from "@noya-app/noya-schemas";
+import type { LocalStorageSyncOptions } from "@noya-app/state-manager";
 import {
+  AccessType,
   createOrCastValue,
   isEmbeddedApp,
   localStorageSync,
   NoyaManager,
   parentFrameSync,
+  PolicyAuthContext,
   Static,
   stubSync,
   SyncAdapter,
@@ -14,7 +17,7 @@ import {
   TypeGuard,
   webSocketSync,
 } from "@noya-app/state-manager";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBindNoyaManager, UseMultiplayerStateOptions } from "./hooks";
 import { StateInspectorOptions } from "./inspector/StateInspector";
 
@@ -28,6 +31,9 @@ export type AppData<State> = {
   viewType: AppViewType;
   initialState: State;
   inspector: boolean | StateInspectorOptions;
+  userId?: string;
+  isDemo: boolean;
+  access?: AccessType;
 };
 
 export function createDefaultAppData<State>(
@@ -38,6 +44,8 @@ export function createDefaultAppData<State>(
     viewType: "editable",
     initialState,
     inspector: false,
+    isDemo: false,
+    access: undefined,
   };
 }
 
@@ -93,6 +101,10 @@ export function getAppData<State>(
   }
 
   appData.initialState = enforceSchema(appData.initialState, schema) as State;
+  appData.isDemo = appData.isDemo ?? false;
+  const fallbackAccess: AccessType =
+    appData.viewType === "editable" ? "write" : "read";
+  appData.access = appData.access ?? fallbackAccess;
 
   return appData as AppData<State>;
 }
@@ -102,20 +114,32 @@ export function getSyncAdapter<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >(params?: {
   multiplayerUrl?: string;
   offlineStorageKey?: string;
   debug?: boolean;
-}): SyncAdapter<S, M, E, MenuT> {
-  const { multiplayerUrl, offlineStorageKey, debug } = params ?? {};
+  policyAuthContext?: PolicyAuthContext;
+  serverScripts?: LocalStorageSyncOptions["serverScripts"];
+}): SyncAdapter<S, M, E, MenuT, I> {
+  const {
+    multiplayerUrl,
+    offlineStorageKey,
+    debug,
+    policyAuthContext,
+    serverScripts,
+  } = params ?? {};
 
   return isEmbeddedApp()
-    ? parentFrameSync<S, M, E, MenuT>({ debug })
+    ? parentFrameSync<S, M, E, MenuT, I>({ debug, policyAuthContext })
     : multiplayerUrl
-      ? webSocketSync<S, M, E, MenuT>({ url: multiplayerUrl, debug })
+      ? webSocketSync<S, M, E, MenuT, I>({ url: multiplayerUrl, debug })
       : offlineStorageKey
-        ? localStorageSync<S, M, E, MenuT>({ key: offlineStorageKey })
-        : stubSync<S, M, E, MenuT>();
+        ? localStorageSync<S, M, E, MenuT, I>({
+            key: offlineStorageKey,
+            ...(serverScripts ? { serverScripts } : {}),
+          })
+        : stubSync<S, M, E, MenuT, I>();
 }
 
 export type UseNoyaStateOptions<
@@ -123,7 +147,8 @@ export type UseNoyaStateOptions<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
-> = UseMultiplayerStateOptions<S, M, E, MenuT> & {
+  I extends Record<string, any> = Record<string, unknown>,
+> = UseMultiplayerStateOptions<S, M, E, MenuT, I> & {
   offlineStorageKey?: string;
 };
 
@@ -132,12 +157,14 @@ export type UseNoyaStateResult<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 > = [
-  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[0],
-  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[1],
-  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT>>[2] & {
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT, I>>[0],
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT, I>>[1],
+  ReturnType<typeof useBindNoyaManager<S, M, E, MenuT, I>>[2] & {
     theme: AppTheme;
     viewType: AppViewType;
+    isDemo: boolean;
   },
 ];
 
@@ -155,11 +182,13 @@ export function useNoyaStateInternal<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
-  O extends UseNoyaStateOptions<S, M, E, MenuT> = UseNoyaStateOptions<
+  I extends Record<string, any> = Record<string, unknown>,
+  O extends UseNoyaStateOptions<S, M, E, MenuT, I> = UseNoyaStateOptions<
     S,
     M,
     E,
-    MenuT
+    MenuT,
+    I
   >,
 >(
   ...args:
@@ -174,7 +203,8 @@ export function useNoyaStateInternal<
   O["schema"] extends TSchema ? Static<O["schema"]> : S,
   M,
   E,
-  MenuT
+  MenuT,
+  I
 > {
   const [initialState, options] =
     typeof args[0] === "object" &&
@@ -192,6 +222,9 @@ export function useNoyaStateInternal<
       initialState: noyaAppInitialState,
       theme,
       viewType,
+      userId,
+      isDemo,
+      access,
     },
   ] = useState(() => {
     return getAppData(initialState, options?.schema, {
@@ -199,19 +232,57 @@ export function useNoyaStateInternal<
     });
   });
 
-  const sync = useMemo((): SyncAdapter<S, M, E, MenuT> => {
-    return getSyncAdapter<S, M, E, MenuT>({
+  const basePolicyAuthContext = useMemo((): PolicyAuthContext | undefined => {
+    if (!access && userId === undefined) return undefined;
+
+    const context: PolicyAuthContext = {};
+
+    if (access) {
+      context.access = access;
+    }
+
+    if (userId !== undefined) {
+      context.id = userId ?? null;
+    }
+
+    return context;
+  }, [access, userId]);
+
+  const sync = useMemo((): SyncAdapter<S, M, E, MenuT, I> => {
+    return getSyncAdapter<S, M, E, MenuT, I>({
       multiplayerUrl,
       offlineStorageKey: options?.offlineStorageKey,
       debug: options?.debug,
+      policyAuthContext: basePolicyAuthContext,
     });
-  }, [multiplayerUrl, options?.offlineStorageKey, options?.debug]);
+  }, [
+    multiplayerUrl,
+    options?.offlineStorageKey,
+    options?.debug,
+    basePolicyAuthContext,
+  ]);
 
   const [noyaManager] = useState(
-    () => new NoyaManager<S, M, E, MenuT>(noyaAppInitialState as S, options)
+    () => new NoyaManager<S, M, E, MenuT, I>(noyaAppInitialState as S, options)
   );
 
-  const result = useBindNoyaManager<S, M, E, MenuT>(noyaManager, {
+  useEffect(() => {
+    if (!userId) return;
+
+    noyaManager.sharedConnectionDataManager.setCurrentConnectionId(userId);
+    noyaManager.userManager.setCurrentConnectionId(userId);
+    noyaManager.userManager.setCurrentUserId(userId);
+  }, [noyaManager, userId]);
+
+  useEffect(() => {
+    if (!basePolicyAuthContext) return;
+
+    noyaManager.multiplayerStateManager.setPolicyAuthContext(
+      basePolicyAuthContext
+    );
+  }, [noyaManager, basePolicyAuthContext]);
+
+  const result = useBindNoyaManager<S, M, E, MenuT, I>(noyaManager, {
     inspector: options?.inspector ?? inspector,
     sync: options?.sync ?? sync,
   });
@@ -219,14 +290,15 @@ export function useNoyaStateInternal<
   const [, , extras] = result;
 
   const mergedExtras = useMemo(() => {
-    return { ...extras, theme, viewType } as const;
-  }, [extras, theme, viewType]);
+    return { ...extras, theme, viewType, isDemo } as const;
+  }, [extras, theme, viewType, isDemo]);
 
   return [result[0], result[1], mergedExtras] as UseNoyaStateResult<
     O["schema"] extends TSchema ? Static<O["schema"]> : S,
     M,
     E,
-    MenuT
+    MenuT,
+    I
   >;
 }
 

package/src/singleton.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { LocalStorageSyncOptions } from "@noya-app/state-manager";
 import {
   NoyaManager,
   NoyaManagerOptions,
@@ -16,14 +17,16 @@ import {
   getSyncAdapter,
 } from "./noyaApp";
 
-let noyaManagerSingleton: NoyaManager<any, any, any, any> | undefined;
+let noyaManagerSingleton: NoyaManager<any, any, any, any, any> | undefined;
 let noyaSingletonBindings: AnyNoyaSingletonBindings | undefined;
 
 export type AnyNoyaSingletonBindings = {
-  sync?: SyncAdapter<any, any, any, any>;
+  sync?: SyncAdapter<any, any, any, any, any>;
   inspector?: boolean | StateInspectorOptions;
   theme: AppTheme;
   viewType: AppViewType;
+  userId?: string;
+  isDemo: boolean;
 };
 
 export type AnyNoyaSingletonOptions<
@@ -31,14 +34,16 @@ export type AnyNoyaSingletonOptions<
   M extends object,
   E extends object,
   MenuT extends string,
+  I extends Record<string, any> = Record<string, unknown>,
 > = NoyaManagerOptions<S, M> & {
   initialState?: S | (() => S);
-  sync?: SyncAdapter<S, M, E, MenuT>;
+  sync?: SyncAdapter<S, M, E, MenuT, I>;
   inspector?: boolean | StateInspectorOptions;
   theme?: AppTheme;
   viewType?: AppViewType;
   offlineStorageKey?: string;
   multiplayerUrl?: string;
+  serverScripts?: LocalStorageSyncOptions["serverScripts"];
 };
 
 export function initializeNoyaSingleton<
@@ -46,7 +51,8 @@ export function initializeNoyaSingleton<
   M extends object,
   E extends object,
   MenuT extends string,
->(options?: AnyNoyaSingletonOptions<S, M, E, MenuT>) {
+  I extends Record<string, any> = Record<string, unknown>,
+>(options?: AnyNoyaSingletonOptions<S, M, E, MenuT, I>) {
   if (noyaManagerSingleton) {
     throw new Error(
       "Noya has already been initialized. Call `useNoyaState` instead."
@@ -61,8 +67,9 @@ export function initializeNoyaSingleton<
     viewType,
     offlineStorageKey,
     multiplayerUrl,
+    serverScripts,
     ...managerOptions
-  } = (options ?? {}) as AnyNoyaSingletonOptions<S, M, E, MenuT>;
+  } = (options ?? {}) as AnyNoyaSingletonOptions<S, M, E, MenuT, I>;
 
   const appData = getAppData<S>(
     (initialState ?? null) as S | (() => S),
@@ -70,17 +77,37 @@ export function initializeNoyaSingleton<
     { overrideExistingState: managerOptions?.overrideExistingState }
   );
 
-  noyaManagerSingleton = new NoyaManager<S, M, E, MenuT>(
+  const policyAuthContext =
+    appData.access || appData.userId !== undefined
+      ? {
+          ...(appData.access ? { access: appData.access } : {}),
+          ...(appData.userId !== undefined
+            ? { id: appData.userId ?? null }
+            : {}),
+        }
+      : undefined;
+
+  noyaManagerSingleton = new NoyaManager<S, M, E, MenuT, I>(
     appData.initialState as S,
     managerOptions
   );
 
+  if (appData.userId) {
+    noyaManagerSingleton.sharedConnectionDataManager.setCurrentConnectionId(
+      appData.userId
+    );
+    noyaManagerSingleton.userManager.setCurrentConnectionId(appData.userId);
+    noyaManagerSingleton.userManager.setCurrentUserId(appData.userId);
+  }
+
   const resolvedSync =
     sync ??
-    getSyncAdapter<S, M, E, MenuT>({
+    getSyncAdapter<S, M, E, MenuT, I>({
       multiplayerUrl: multiplayerUrl ?? appData.multiplayerUrl,
       offlineStorageKey,
       debug: managerOptions?.debug,
+      serverScripts,
+      policyAuthContext,
     });
 
   // Activate sync immediately for the singleton
@@ -108,6 +135,9 @@ export function initializeNoyaSingleton<
         anchor={
           resolvedInspector === true ? "bottom right" : resolvedInspector.anchor
         }
+        advanced={
+          resolvedInspector === true ? false : resolvedInspector.advanced
+        }
       />
     );
   }
@@ -117,10 +147,18 @@ export function initializeNoyaSingleton<
     inspector: resolvedInspector,
     theme: resolvedTheme,
     viewType: resolvedViewType,
+    userId: appData.userId,
+    isDemo: appData.isDemo,
   };
 }
 
-export function getNoyaManagerSingleton() {
+export function getNoyaManagerSingleton(): NoyaManager<
+  any,
+  any,
+  any,
+  any,
+  any
+> {
   if (!noyaManagerSingleton || !noyaSingletonBindings) {
     throw new Error(
       "Noya has not been initialized. Call initializeNoya once before using Noya hooks."