feat: did some stuff

app/src/lib/components/node/NodeInput.svelte

@@ -5,17 +5,19 @@
 
   export let node: Node;
   export let input: NodeInput;
-  export let label: string;
+  export let id: string;
+  export let label: string | undefined;
 
   const graph = getGraphManager();
 
-  let value = node?.props?.[label] ?? input.value;
+  let value = node?.props?.[id] ?? input.value;
 
-  $: if (node?.props?.[label] !== value) {
-    node.props = { ...node.props, [label]: value };
+  $: if (node?.props?.[id] !== value) {
+    node.props = { ...node.props, [id]: value };
+    graph.save();
     graph.execute();
   }
 </script>
 
-<label for="asd">{label}</label>
+<label for="asd">{label || id}</label>
 <Input {input} bind:value />

app/src/lib/components/node/NodeParameter.svelte

@@ -5,6 +5,7 @@
   import { possibleSocketIds } from "../graph/stores";
   import { getGraphManager } from "../graph/context";
   import NodeInput from "./NodeInput.svelte";
+  import Node from "./Node.svelte";
 
   export let node: Node;
   export let input: NodeInputType;
@@ -68,9 +69,11 @@
   class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
-    <div class="content" class:disabled={$inputSockets.has(socketId)}>
-      <NodeInput {node} {input} label={input?.title || id} />
-    </div>
+    {#if node?.tmp?.type?.inputs?.[id]?.external !== true}
+      <div class="content" class:disabled={$inputSockets.has(socketId)}>
+        <NodeInput {node} {input} {id} label={input.title} />
+      </div>
+    {/if}
 
     {#if node?.tmp?.type?.inputs?.[id]?.internal !== true}
       <div

app/src/lib/graph-manager.ts

@@ -145,7 +145,8 @@ export class GraphManager extends EventEmitter<{ "save": Graph }> {
     this.status.set("loading");
     this.id.set(graph.id);
 
-    this.nodeRegistry.load();
+    const nodeIds = Array.from(new Set([...graph.nodes.map(n => n.type)]));
+    await this.nodeRegistry.load(nodeIds);
 
     for (const node of this.graph.nodes) {
       const nodeType = this.nodeRegistry.getNode(node.type);

app/src/lib/graphs/grid.ts

@@ -33,7 +33,7 @@ export function grid(width: number, height: number) {
       visible: false,
     },
     position: [width * 30, (height - 1) * 40],
-    type: "output",
+    type: "max/plantarium/output",
     props: {},
   });
 

app/src/lib/graphs/tree.ts

@@ -5,7 +5,7 @@ export function tree(depth: number): Graph {
   const nodes: Node[] = [
     {
       id: 0,
-      type: "output",
+      type: "max/plantarium/output",
       position: [0, 0]
     },
     {

app/src/lib/node-registry.ts

@@ -1,6 +1,7 @@
 import type { NodeRegistry, NodeType } from "@nodes/types";
 
 import * as d from "plantarium-nodes-math";
+import { createLogger } from "./helpers";
 
 const nodeTypes: NodeType[] = [
   {
@@ -9,7 +10,7 @@ const nodeTypes: NodeType[] = [
       "value": { type: "float", value: 0.1, internal: true },
     },
     outputs: ["float"],
-    execute: ({ value }) => { return [0, value] }
+    execute: (value) => { return value; }
   },
   {
     id: "max/plantarium/math",
@@ -19,7 +20,7 @@ const nodeTypes: NodeType[] = [
       "b": { type: "float" },
     },
     outputs: ["float"],
-    execute: ({ op_type, a, b }: { op_type: number, a: number, b: number }) => {
+    execute: (op_type: number, a: number, b: number) => {
       switch (op_type) {
         case 0: return a + b;
         case 1: return a - b;
@@ -29,7 +30,7 @@ const nodeTypes: NodeType[] = [
     }
   },
   {
-    id: "output",
+    id: "max/plantarium/output",
     inputs: {
       "input": { type: "float" },
     },
@@ -37,6 +38,8 @@ const nodeTypes: NodeType[] = [
   }
 ]
 
+
+const log = createLogger("node-registry");
 export class RemoteNodeRegistry implements NodeRegistry {
 
   private nodes: Map<string, NodeType> = new Map();
@@ -44,13 +47,39 @@ export class RemoteNodeRegistry implements NodeRegistry {
   constructor(private url: string) { }
 
   async load(nodeIds: string[]) {
+    const a = performance.now();
     for (const id of nodeIds) {
-      const response = await fetch(`${this.url}/nodes/${id}`);
-      const node = this.getNode(id);
-      if (node) {
-        this.nodes.set(id, node);
+      const nodeUrl = `${this.url}/n/${id}`;
+      const response = await fetch(nodeUrl);
+      const wasmResponse = await fetch(`${nodeUrl}/wasm`);
+      const wrapperReponse = await fetch(`${nodeUrl}/wrapper`);
+      if (!wrapperReponse.ok) {
+        throw new Error(`Failed to load node ${id}`);
       }
+
+      let wrapperCode = await wrapperReponse.text();
+      wrapperCode = wrapperCode.replace("wasm = val;", `if(wasm) return;
+wasm = val;`);
+      const wasmWrapper = await import(/*@vite-ignore*/`data:text/javascript;base64,${btoa(wrapperCode)}`);
+
+      const module = new WebAssembly.Module(await wasmResponse.arrayBuffer());
+      const instance = new WebAssembly.Instance(module, { ["./index_bg.js"]: wasmWrapper });
+      wasmWrapper.__wbg_set_wasm(instance.exports);
+
+      if (!response.ok) {
+        throw new Error(`Failed to load node ${id}`);
+      }
+      const node = await response.json();
+      node.execute = (...args) => {
+        console.log("Executing", id, args);
+        return wasmWrapper.execute(...args)
+      };
+      this.nodes.set(id, node);
     }
+
+    const duration = performance.now() - a;
+
+    log.log("loaded nodes in", duration, "ms");
   }
 
   getNode(id: string) {

app/src/lib/runtime-executor.ts

@@ -23,7 +23,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     // First, lets check if all nodes have a type
     const typeMap = this.getNodeTypes(graph);
 
-    const outputNode = graph.nodes.find(node => node.type === "output");
+    const outputNode = graph.nodes.find(node => node.type.endsWith("/output"));
     if (!outputNode) {
       throw new Error("No output node found");
     }
@@ -125,13 +125,13 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
         }
 
         // execute the node and store the result
-        results[node.id] = node.tmp.type.execute(inputs) as number;;
+        results[node.id] = node.tmp.type.execute(...Object.values(inputs)) as number;
 
       }
     }
 
     // return the result of the parent of the output node
-    const res = results[outputNode.tmp?.parents?.[0].id as number] as string
+    const res = results[outputNode.id] as string
 
 
     return res;

app/src/routes/+page.svelte

@@ -3,12 +3,14 @@
   import { GraphManager } from "$lib/graph-manager";
   import Graph from "$lib/components/graph/Graph.svelte";
   import { MemoryRuntimeExecutor } from "$lib/runtime-executor";
-  import { MemoryNodeRegistry } from "$lib/node-registry";
+  import { MemoryNodeRegistry, RemoteNodeRegistry } from "$lib/node-registry";
   import { LinearSRGBColorSpace } from "three";
   import Details from "$lib/components/Details.svelte";
   import { JsonView } from "@zerodevx/svelte-json-view";
 
-  const nodeRegistry = new MemoryNodeRegistry();
+  const memNodeRegistry = new MemoryNodeRegistry();
+  const nodeRegistry = new RemoteNodeRegistry("http://localhost:5174");
+
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
 
   const graphManager = new GraphManager(nodeRegistry, runtimeExecutor);