@noya-app/noya-multiplayer-react 0.1.35 → 0.1.37

package/src/inspector/StateInspector.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  AssetManager,
   ConnectionEvent,
   EphemeralUserData,
   ExtendedPathKey,
@@ -26,6 +27,7 @@ import {
 } from "react-inspector";
 import { shouldTrackEvents$, shouldTrackTasks$ } from "../globals";
 import { useEphemeralUserData, useManagedHistory } from "../hooks";
+import { useObservable } from "../useObservable";
 import { useLocalStorageState } from "./useLocalStorageState";
 
 const lightTheme = {
@@ -258,6 +260,7 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
   unstyled,
   colorScheme = "light",
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   anchor = "right",
   forceInit,
@@ -270,6 +273,7 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
   userId?: string;
   unstyled?: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
+  assetManager: AssetManager;
   ephemeralUserData: EphemeralUserData<E>;
   forceInit: () => void;
 } & StateInspectorOptions &
@@ -311,6 +315,10 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
     "noya-multiplayer-react-show-ephemeral",
     false
   );
+  const [showAssets, setShowAssets] = useLocalStorageState(
+    "noya-multiplayer-react-show-assets",
+    false
+  );
 
   useEffect(() => {
     shouldTrackEvents$.set(showEvents);
@@ -329,6 +337,7 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
 
   const ephemeral = useEphemeralUserData(ephemeralUserData);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
+  const assets = useObservable(assetManager.assets$);
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -680,6 +689,52 @@ export const StateInspector = memo(function StateInspector<S, M, E>({
           ))}
         </div>
       </DisclosureSection>
+      <DisclosureSection
+        open={showAssets}
+        setOpen={setShowAssets}
+        title="Assets"
+        colorScheme={colorScheme}
+        right={
+          <span style={{ display: "flex", gap: "4px" }}>
+            <SmallButton
+              theme={theme}
+              onClick={() => {
+                // get file input
+                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;
+                      assetManager.create(new Uint8Array(buffer));
+                    };
+                    reader.readAsArrayBuffer(file);
+                  }
+                };
+                input.click();
+              }}
+            >
+              Upload
+            </SmallButton>
+          </span>
+        }
+      >
+        <div style={styles.sectionInner}>
+          {assets.map((asset) => (
+            <InspectorRow key={asset.id} colorScheme={colorScheme}>
+              <ObjectInspector name={asset.id} data={asset} theme={theme} />
+              <SmallButton
+                theme={theme}
+                onClick={() => assetManager.delete(asset.id)}
+              >
+                Delete
+              </SmallButton>
+            </InspectorRow>
+          ))}
+        </div>
+      </DisclosureSection>
       <DisclosureSection
         title="Tasks"
         colorScheme={colorScheme}
@@ -939,7 +994,7 @@ function SmallButton({
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "2px 0",
+        padding: "0",
         cursor: "pointer",
         ...style,
       }}

package/src/inspector/useStateInspector.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  AssetManager,
   ConnectionEvent,
   EphemeralUserData,
   MultiplayerStateManager,
@@ -13,10 +14,13 @@ import { createRoot } from "react-dom/client";
 import { Root } from "react-dom/client";
 import { StateInspector } from "./StateInspector";
 
-function createPortalElement() {
-  const el = document.createElement("div");
-  el.id = "noya-multiplayer-react-inspector-portal";
-  return el;
+function createShadowRootElement() {
+  const host = document.createElement("div");
+  host.id = "noya-multiplayer-react-inspector-host";
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  const container = document.createElement("div");
+  shadowRoot.appendChild(container);
+  return { host, container };
 }
 
 export function useStateInspector<S, M, E>({
@@ -29,6 +33,7 @@ export function useStateInspector<S, M, E>({
   colorScheme,
   anchor,
   multiplayerStateManager,
+  assetManager,
   ephemeralUserData,
   forceInit,
 }: {
@@ -39,6 +44,7 @@ export function useStateInspector<S, M, E>({
   userId?: string;
   disabled: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
+  assetManager: AssetManager;
   ephemeralUserData: EphemeralUserData<E>;
   forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
@@ -47,16 +53,15 @@ export function useStateInspector<S, M, E>({
   useLayoutEffect(() => {
     if (disabled) return;
 
-    const portalElement = createPortalElement();
+    const { host, container } = createShadowRootElement();
+    const root = createRoot(container);
 
-    const root = createRoot(portalElement);
-
-    document.body.appendChild(portalElement);
+    document.body.appendChild(host);
 
     setRoot(root);
 
     return () => {
-      document.body.removeChild(portalElement);
+      document.body.removeChild(host);
     };
   }, [disabled]);
 
@@ -76,6 +81,7 @@ export function useStateInspector<S, M, E>({
         multiplayerStateManager={
           multiplayerStateManager as MultiplayerStateManager<any, any>
         }
+        assetManager={assetManager}
         ephemeralUserData={ephemeralUserData as EphemeralUserData<any>}
       />
     );
@@ -91,5 +97,6 @@ export function useStateInspector<S, M, E>({
     tasks,
     forceInit,
     ephemeralUserData,
+    assetManager,
   ]);
 }

package/src/noyaApp.ts

@@ -8,6 +8,7 @@ import {
   stubSync,
   SyncAdapter,
   TSchema,
+  TypeGuard,
   webSocketSync,
 } from "@noya-app/state-manager";
 import { useEffect, useMemo, useState } from "react";
@@ -159,7 +160,7 @@ export function isEmbeddedApp() {
   return window.self !== window.top;
 }
 
-export type UseNoyaAppStateOptions<
+export type UseNoyaStateOptions<
   S,
   M = void,
   E = void,
@@ -167,7 +168,7 @@ export type UseNoyaAppStateOptions<
   localStorageKey?: string;
 };
 
-export type UseNoyaAppStateResult<S, M = void, E = void> = [
+export type UseNoyaStateResult<S, M = void, E = void> = [
   ReturnType<typeof useMultiplayerState<S, M, E>>[0],
   ReturnType<typeof useMultiplayerState<S, M, E>>[1],
   ReturnType<typeof useMultiplayerState<S, M, E>>[2] & {
@@ -176,17 +177,42 @@ export type UseNoyaAppStateResult<S, M = void, E = void> = [
   },
 ];
 
-export function useNoyaAppState<
+/**
+ * Sync data locally or to a multiplayer server.
+ *
+ * There are 3 ways to use this hook:
+ *
+ * 1. Pass an initial state: `useNoyaState(initialState)`
+ * 2. Pass an initial state and a schema: `useNoyaState(initialState, { schema })`
+ * 3. Pass only a schema, and a conforming initial state is created automatically: `useNoyaState({ schema })`
+ */
+export function useNoyaState<
   S,
   M = void,
   E = void,
-  O extends UseNoyaAppStateOptions<S, M, E> = UseNoyaAppStateOptions<S, M, E>,
+  O extends UseNoyaStateOptions<S, M, E> = UseNoyaStateOptions<S, M, E>,
 >(
-  initialState: O["schema"] extends TSchema
-    ? Static<O["schema"]> | (() => Static<O["schema"]>)
-    : S | (() => S),
-  options?: O
-) {
+  ...args:
+    | [
+        initialState: O["schema"] extends TSchema
+          ? Static<O["schema"]> | (() => Static<O["schema"]>)
+          : S | (() => S),
+        options?: O,
+      ]
+    | [options: O & { schema: TSchema }]
+): UseNoyaStateResult<
+  O["schema"] extends TSchema ? Static<O["schema"]> : S,
+  M,
+  E
+> {
+  const [initialState, options] =
+    typeof args[0] === "object" &&
+    args[0] !== null &&
+    "schema" in args[0] &&
+    TypeGuard.IsSchema(args[0].schema)
+      ? [null, args[0]]
+      : [args[0], args[1]];
+
   // Keep these stable after initial render
   const [
     {
@@ -224,9 +250,19 @@ export function useNoyaAppState<
     return { ...extras, theme, viewType } as const;
   }, [extras, theme, viewType]);
 
-  return [result[0], result[1], mergedExtras] as UseNoyaAppStateResult<
+  return [result[0], result[1], mergedExtras] as UseNoyaStateResult<
     O["schema"] extends TSchema ? Static<O["schema"]> : S,
     M,
     E
   >;
 }
+
+// function typeTest() {
+//   const [a, setA] = useNoyaState(7);
+//   const [b, setB] = useNoyaState(7, {
+//     schema: Type.Number(),
+//   });
+//   const [c, setC] = useNoyaState({
+//     schema: Type.Number(),
+//   });
+// }