@noya-app/noya-multiplayer-react 0.1.9

package/src/inspector/useStateInspector.tsx

@@ -0,0 +1,57 @@
+import { ConnectionEvent, StateManager } from "@noya-app/state-manager";
+import React, { ComponentProps, useLayoutEffect } from "react";
+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;
+}
+
+export function useStateInspector<S extends object, M>({
+  state,
+  connectionEvents,
+  disabled = false,
+  colorScheme,
+  stateManager,
+}: {
+  state: S;
+  connectionEvents?: ConnectionEvent<S>[];
+  disabled: boolean;
+  colorScheme: ComponentProps<typeof StateInspector>["colorScheme"];
+  stateManager: StateManager<S, M>;
+}) {
+  const [root, setRoot] = React.useState<Root | null>(null);
+
+  useLayoutEffect(() => {
+    if (disabled) return;
+
+    const portalElement = createPortalElement();
+
+    const root = createRoot(portalElement);
+
+    document.body.appendChild(portalElement);
+
+    setRoot(root);
+
+    return () => {
+      document.body.removeChild(portalElement);
+    };
+  }, [disabled]);
+
+  useLayoutEffect(() => {
+    if (!root) return;
+
+    root.render(
+      <StateInspector
+        state={state}
+        connectionEvents={connectionEvents}
+        colorScheme={colorScheme}
+        stateManager={stateManager as StateManager<any, any>}
+      />
+    );
+  }, [colorScheme, connectionEvents, root, state, stateManager]);
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@repo/typescript-config/library.json"
+}