@noya-app/noya-multiplayer-react 0.1.49 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.38",
+    "@noya-app/state-manager": "0.1.39",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.5",
     "@noya-app/task-runner": "0.1.5",
-    "@noya-app/react-utils": "0.1.14",
+    "@noya-app/react-utils": "0.1.15",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -1,4 +1,5 @@
 import { MenuItem } from "@noya-app/noya-designsystem";
+import { Input, OutputTransform } from "@noya-app/noya-schemas";
 import {
   GetAtPath,
   Observable,
@@ -7,6 +8,7 @@ import {
 } from "@noya-app/observable";
 import {
   ConnectedUsersManager,
+  CreateParams,
   EphemeralUserDataManager,
   MultiplayerStateManager,
   NoyaManager,
@@ -134,6 +136,21 @@ export function useSecret(name: string) {
   );
 }
 
+export function useInputs() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.ioManager.inputs$);
+}
+
+export function useOutputTransforms() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.ioManager.outputTransforms$);
+}
+
+export function useIOManager() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.ioManager;
+}
+
 export function useIsInitialized() {
   const { noyaManager, viewType } = useAnyNoyaStateContext();
 
@@ -201,12 +218,16 @@ export function createNoyaContext<
 >({
   schema,
   mergeHistoryEntries,
+  outputTransforms,
+  inputs,
 }: {
   schema: Schema;
   mergeHistoryEntries?: StateManagerOptions<
     Static<Schema>,
     M
   >["mergeHistoryEntries"];
+  outputTransforms?: CreateParams<OutputTransform>[];
+  inputs?: CreateParams<Input>[];
 }) {
   type S = Static<Schema>;
 
@@ -227,9 +248,11 @@ export function createNoyaContext<
     const [, , { noyaManager, theme, viewType }] = useNoyaState<S, M, E, MenuT>(
       initialState,
       {
-        ...(options as any),
         schema,
         mergeHistoryEntries,
+        outputTransforms,
+        inputs,
+        ...(options as any),
       }
     );
 

package/src/inspector/StateInspector.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Input, OutputTransform } from "@noya-app/noya-schemas";
 import { memoGeneric } from "@noya-app/react-utils";
 import { ExtendedPathKey, NoyaManager } from "@noya-app/state-manager";
 import React, {
@@ -266,10 +267,13 @@ export const StateInspector = memoGeneric(function StateInspector<
     ephemeralUserDataManager,
     connectionEventManager,
     taskManager,
+    ioManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
   const tasks = useObservable(taskManager.tasks$);
+  const inputs = useObservable(ioManager.inputs$);
+  const outputTransforms = useObservable(ioManager.outputTransforms$);
 
   useLayoutEffect(() => {
     setDidMount(true);
@@ -314,6 +318,14 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-secrets",
     false
   );
+  const [showInputs, setShowInputs] = useLocalStorageState(
+    "noya-multiplayer-react-show-inputs",
+    false
+  );
+  const [showOutputTransforms, setShowOutputTransforms] = useLocalStorageState(
+    "noya-multiplayer-react-show-output-transforms",
+    false
+  );
 
   const connectionEvents = useObservable(connectionEventManager.events$);
 
@@ -336,6 +348,10 @@ export const StateInspector = memoGeneric(function StateInspector<
   const connectedUsers = useObservable(connectedUsersManager.connectedUsers$);
   const userId = useObservable(connectedUsersManager.currentUserId$);
   const state = useObservable(multiplayerStateManager.optimisticState$);
+  const inputsInitialized = useObservable(ioManager.inputsInitialized$);
+  const outputTransformsInitialized = useObservable(
+    ioManager.outputTransformsInitialized$
+  );
 
   useEffect(() => {
     if (historyContainerRef.current) {
@@ -759,35 +775,6 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </div>
       </DisclosureSection>
-      <DisclosureSection
-        title="Tasks"
-        colorScheme={colorScheme}
-        open={showTasks}
-        setOpen={setShowTasks}
-      >
-        <div style={styles.sectionInner}>
-          {tasks?.map((task) => (
-            <InspectorRow
-              key={task.id}
-              colorScheme={colorScheme}
-              style={{
-                backgroundColor:
-                  task.status === "done"
-                    ? "rgba(0,255,0,0.2)"
-                    : task.status === "error"
-                      ? "rgba(255,0,0,0.2)"
-                      : undefined,
-              }}
-            >
-              <ObjectInspector
-                name={task.name}
-                data={task.payload}
-                theme={theme}
-              />
-            </InspectorRow>
-          ))}
-        </div>
-      </DisclosureSection>
       <DisclosureSection
         title={
           <TitleLabel>
@@ -826,6 +813,101 @@ export const StateInspector = memoGeneric(function StateInspector<
             </InspectorRow>
           ))}
         </div>
+      </DisclosureSection>{" "}
+      <DisclosureSection
+        open={showInputs}
+        setOpen={setShowInputs}
+        title={
+          <TitleLabel>
+            Inputs
+            <ColoredDot type={inputsInitialized ? "success" : "error"} />
+          </TitleLabel>
+        }
+        colorScheme={colorScheme}
+      >
+        <div style={styles.sectionInner}>
+          {inputs?.map((input: Input) => (
+            <InspectorRow key={input.id} colorScheme={colorScheme}>
+              <ObjectInspector data={input} theme={theme} />
+            </InspectorRow>
+          ))}
+          {!inputs?.length && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No inputs</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        open={showOutputTransforms}
+        setOpen={setShowOutputTransforms}
+        title={
+          <TitleLabel>
+            Output Transforms
+            <ColoredDot
+              type={outputTransformsInitialized ? "success" : "error"}
+            />
+          </TitleLabel>
+        }
+        colorScheme={colorScheme}
+      >
+        <div style={styles.sectionInner}>
+          {outputTransforms?.map((transform: OutputTransform) => (
+            <InspectorRow key={transform.id} colorScheme={colorScheme}>
+              <ObjectInspector data={transform} theme={theme} />
+            </InspectorRow>
+          ))}
+          {!outputTransforms?.length && (
+            <div
+              style={{
+                padding: "12px",
+                fontSize: "12px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "4px",
+              }}
+            >
+              <span>No output transforms</span>
+            </div>
+          )}
+        </div>
+      </DisclosureSection>
+      <DisclosureSection
+        title="Tasks"
+        colorScheme={colorScheme}
+        open={showTasks}
+        setOpen={setShowTasks}
+      >
+        <div style={styles.sectionInner}>
+          {tasks?.map((task) => (
+            <InspectorRow
+              key={task.id}
+              colorScheme={colorScheme}
+              style={{
+                backgroundColor:
+                  task.status === "done"
+                    ? "rgba(0,255,0,0.2)"
+                    : task.status === "error"
+                      ? "rgba(255,0,0,0.2)"
+                      : undefined,
+              }}
+            >
+              <ObjectInspector
+                name={task.name}
+                data={task.payload}
+                theme={theme}
+              />
+            </InspectorRow>
+          ))}
+        </div>
       </DisclosureSection>
       <DisclosureSection
         open={showEphemeral}

package/src/noyaApp.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-globals */
+import { findAllDefs } from "@noya-app/noya-schemas";
 import {
   createOrCastValue,
-  findAllDefs,
   isEmbeddedApp,
   localStorageSync,
   parentFrameSync,