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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "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.40",
     "@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.16",
     "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();
 
@@ -155,9 +172,9 @@ export function useIsInitialized() {
   return useObservable(isInitializedObservable);
 }
 
-export function useWorkflowManager() {
+export function usePipelineManager() {
   const { noyaManager } = useAnyNoyaStateContext();
-  return noyaManager.workflowManager;
+  return noyaManager.pipelineManager;
 }
 
 export const ConnectedUsersContext = createContext<
@@ -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/WebSocketConnection.ts

@@ -32,9 +32,7 @@ export type ConnectionOptions<State> = {
 
 export class WebSocketConnection<State> {
   private ws: ReconnectingWebSocket;
-  private pingCount = 0;
-  private pendingPingId?: string;
-  private intervalId?: NodeJS.Timer;
+  private closedForever = false;
 
   constructor(
     private url: URL,
@@ -50,38 +48,13 @@ export class WebSocketConnection<State> {
   }
 
   async connect() {
-    this.ws.connect(this.url.toString());
-
-    // Start ping interval
-    this.intervalId = setInterval(() => {
-      if (this.ws.state !== "OPEN") return;
-
-      // A response to a previous ping hasn't been received, so we'll reset the connection
-      if (this.pendingPingId) {
-        this.ws.close();
-        return;
-      }
-
-      const pingId = (this.pingCount++).toString();
+    if (this.closedForever) return;
 
-      const message: ClientToServerMessage<State> = {
-        type: "ping",
-        id: pingId,
-      };
-
-      this.pendingPingId = message.id;
-
-      this.options.onConnectionEvent?.({
-        type: "send",
-        message,
-      });
-
-      this.ws.send(JSON.stringify(message));
-    }, 10000);
+    this.ws.connect(this.url.toString());
   }
 
   private handleOpen = () => {
-    this.pendingPingId = undefined;
+    if (this.closedForever) return;
 
     if (this.options.debug) {
       console.info("ws connected");
@@ -94,6 +67,8 @@ export class WebSocketConnection<State> {
   };
 
   private handleMessage = (event: MessageEvent) => {
+    if (this.closedForever) return;
+
     if (this.options.debug) {
       console.info("ws receiving message ", event.data);
     }
@@ -104,14 +79,10 @@ export class WebSocketConnection<State> {
       type: "receive",
       message: parsed,
     });
-
-    if (parsed.type === "pong" && parsed.id === this.pendingPingId) {
-      this.pendingPingId = undefined;
-    }
   };
 
   private handleClose = () => {
-    this.pendingPingId = undefined;
+    if (this.closedForever) return;
 
     if (this.options.debug) {
       console.info("ws disconnected");
@@ -124,6 +95,8 @@ export class WebSocketConnection<State> {
   };
 
   send(message: ClientToServerMessage<State>) {
+    if (this.closedForever) return;
+
     if (this.options.debug) {
       console.info("ws sending message", message);
     }
@@ -137,10 +110,15 @@ export class WebSocketConnection<State> {
   }
 
   close() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
+    if (this.closedForever) return;
+
+    this.closedForever = true;
     this.ws.shutdown();
+
+    // remove all listeners
+    this.ws.listeners.forEach((listener) => {
+      this.ws.removeListener(listener);
+    });
   }
 
   addListener(listener: (state: ReconnectingWebSocketState) => void) {

package/src/hooks.ts

@@ -166,7 +166,7 @@ export function useMultiplayerState<
     assetManager: typeof noyaManager.assetManager;
     aiManager: typeof noyaManager.aiManager;
     rpcManager: typeof noyaManager.rpcManager;
-    workflowManager: typeof noyaManager.workflowManager;
+    pipelineManager: typeof noyaManager.pipelineManager;
     secretManager: typeof noyaManager.secretManager;
     menuItemsManager: typeof noyaManager.menuManager;
     createAsset: typeof noyaManager.assetManager.create;
@@ -185,7 +185,7 @@ export function useMultiplayerState<
       assetManager: noyaManager.assetManager,
       aiManager: noyaManager.aiManager,
       rpcManager: noyaManager.rpcManager,
-      workflowManager: noyaManager.workflowManager,
+      pipelineManager: noyaManager.pipelineManager,
       secretManager: noyaManager.secretManager,
       menuItemsManager: noyaManager.menuManager,
       createAsset: noyaManager.assetManager.create,

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,