Fork nodes (#179)

flydelabs · Jan 7, 2025 · 948252d · 948252d
1 parent 8d66721
commit 948252d
Show file tree

Hide file tree

Showing 136 changed files with 2,782 additions and 1,680 deletions.
diff --git a/core/src/misc/custom-code-node-from-code.ts b/core/src/misc/custom-code-node-from-code.ts
@@ -1,6 +1,9 @@
 import { isCodeNode, isMacroNode, MacroNode, Node } from "../";
 import { transpileFile } from "./transpile-file/transpile-file";
-import { processImprovedMacro } from "../improved-macros/improved-macros";
+import {
+  ImprovedMacroNode,
+  processImprovedMacro,
+} from "../improved-macros/improved-macros";
 
 export function customCodeNodeFromCode(
   code: string,
@@ -18,13 +21,28 @@ export function customCodeNodeFromCode(
 
   const result = new Function(wrappedCode)(imports);
 
-  if (isCodeNode(result.default) || isMacroNode(result.default)) {
-    if (result.default.icon) {
-      const macro = processImprovedMacro(result.default) as MacroNode<any>;
+  const validNodes = Object.values(result).filter(
+    (node) => isCodeNode(node) || isMacroNode(node)
+  );
+
+  if (validNodes.length === 0) {
+    throw new Error("No valid nodes found");
+  }
+
+  if (validNodes.length > 1) {
+    throw new Error("Multiple valid nodes found");
+  }
+
+  const node = validNodes[0];
+
+  if (isCodeNode(node) || isMacroNode(node)) {
+    if ((node as ImprovedMacroNode).icon) {
+      const macro = processImprovedMacro(
+        node as ImprovedMacroNode
+      ) as MacroNode<any>;
       macro.id = `${macro.id}${suffixId ? `-${suffixId}` : ""}`;
       return macro;
     }
-    const node = result.default as Node;
     node.id = `${node.id}${suffixId ? `-${suffixId}` : ""}`;
     return node;
   } else {

diff --git a/core/src/node/macro-node.ts b/core/src/node/macro-node.ts
@@ -138,6 +138,7 @@ export type MacroNodeDefinition<T> = Omit<
    * Resolver will use this to load the editor component bundle into the editor
    */
   editorConfig: MacroEditorConfigDefinition;
+  sourceCode?: string;
 };
 
 export interface MacroEditorCompProps<T> {

diff --git a/core/src/node/node.ts b/core/src/node/node.ts
@@ -193,12 +193,16 @@ export type Node = CodeNode | CustomNode;
 export type ImportableSource = {
   module: string;
   node: ImportedNode;
-  implicit?: boolean;
 };
 
 export type CustomNode = VisualNode;
 
-export type CodeNodeDefinition = Omit<CodeNode, "run">;
+export type CodeNodeDefinition = Omit<CodeNode, "run"> & {
+  /**
+   * The source code of the node, if available. Used for editing and forking nodes in the editor.
+   */
+  sourceCode?: string;
+};
 
 export type NodeDefinition = CustomNode | CodeNodeDefinition;
 export type NodeOrMacroDefinition = NodeDefinition | MacroNodeDefinition<any>;

diff --git a/flow-editor/src/flow-editor/ports/ports.ts b/flow-editor/src/flow-editor/ports/ports.ts
@@ -96,7 +96,9 @@ export const defaultPorts: EditorPorts = {
   getLibraryData: () => Promise.resolve({ groups: [] }),
   onRequestSiblingNodes: () => Promise.resolve([]),
   onCreateCustomNode: toastNotImplemented("onCreateCustomNode"),
-  onRequestNodeSource: toastNotImplemented("getNodeSource"),
+  onRequestNodeSource: () => {
+    throw new Error("Not implemented");
+  },
 };
 
 export const PortsContext = createContext<EditorPorts>(defaultPorts);

diff --git a/flow-editor/src/types/@flyde-core.d.ts b/flow-editor/src/types/@flyde-core.d.ts
@@ -672,10 +672,14 @@ declare module '@flyde/core/node/node' {
     export type ImportableSource = {
             module: string;
             node: ImportedNode;
-            implicit?: boolean;
     };
     export type CustomNode = VisualNode;
-    export type CodeNodeDefinition = Omit<CodeNode, "run">;
+    export type CodeNodeDefinition = Omit<CodeNode, "run"> & {
+            /**
+                * The source code of the node, if available. Used for editing and forking nodes in the editor.
+                */
+            sourceCode?: string;
+    };
     export type NodeDefinition = CustomNode | CodeNodeDefinition;
     export type NodeOrMacroDefinition = NodeDefinition | MacroNodeDefinition<any>;
     export type NodeModuleMetaData = {

diff --git a/flow-editor/src/types/flyde-core-types.ts b/flow-editor/src/types/flyde-core-types.ts
@@ -673,10 +673,14 @@ declare module '@flyde/core/node/node' {
     export type ImportableSource = {
             module: string;
             node: ImportedNode;
-            implicit?: boolean;
     };
     export type CustomNode = VisualNode;
-    export type CodeNodeDefinition = Omit<CodeNode, "run">;
+    export type CodeNodeDefinition = Omit<CodeNode, "run"> & {
+            /**
+                * The source code of the node, if available. Used for editing and forking nodes in the editor.
+                */
+            sourceCode?: string;
+    };
     export type NodeDefinition = CustomNode | CodeNodeDefinition;
     export type NodeOrMacroDefinition = NodeDefinition | MacroNodeDefinition<any>;
     export type NodeModuleMetaData = {

diff --git a/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx b/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx
@@ -27,6 +27,8 @@ import {
   ResolvedMacroNodeInstance,
   ImportedNode,
   MacroNodeDefinition,
+  NodeOrMacroDefinition,
+  CodeNodeDefinition,
 } from "@flyde/core";
 
 import { InstanceView, InstanceViewProps } from "./instance-view/InstanceView";
@@ -257,6 +259,10 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
       }>();
 
       const [isAddingCustomNode, setIsAddingCustomNode] = useState(false);
+      const [customNodeForkData, setCustomNodeForkData] = useState<{
+        node: NodeOrMacroDefinition;
+        initialCode: string;
+      }>();
 
       const inlineEditorPortalRootRef = useRef();
 
@@ -1482,6 +1488,27 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
           : "grab"
         : "default";
 
+      const onViewForkCode = React.useCallback(
+        async (instance: NodeInstance) => {
+          const nodeDef = safelyGetNodeDef(
+            instance,
+            currResolvedDeps
+          ) as CodeNodeDefinition;
+          try {
+            const code = nodeDef.sourceCode;
+            if (!code) {
+              toastMsg("No source code found");
+              return;
+            }
+            setCustomNodeForkData({ node: nodeDef, initialCode: code });
+            setIsAddingCustomNode(true);
+          } catch (e) {
+            console.error("Failed to get node source:", e);
+          }
+        },
+        [currResolvedDeps]
+      );
+
       try {
         return (
           <ContextMenu
@@ -1616,6 +1643,7 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
                   onGroupSelected={onGroupSelectedInternal}
                   onPinMouseDown={onPinMouseDown}
                   onPinMouseUp={onPinMouseUp}
+                  onViewForkCode={onViewForkCode}
                   hadError={
                     props.instancesWithErrors?.has(fullInsIdPath(ins.id)) ??
                     false
@@ -1687,8 +1715,12 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
             {isAddingCustomNode ? (
               <CustomNodeModal
                 isOpen={isAddingCustomNode}
-                onClose={() => setIsAddingCustomNode(false)}
+                onClose={() => {
+                  setIsAddingCustomNode(false);
+                  setCustomNodeForkData(undefined);
+                }}
                 onSave={onSaveCustomNode}
+                forkMode={customNodeForkData}
               />
             ) : null}
             <div className="run-btn-container">

diff --git a/flow-editor/src/visual-node-editor/instance-view/InstanceView.tsx b/flow-editor/src/visual-node-editor/instance-view/InstanceView.tsx
@@ -162,6 +162,8 @@ export interface InstanceViewProps {
   onDeleteInstance: (ins: NodeInstance) => void;
   onSetDisplayName: (ins: NodeInstance, view: string | undefined) => void;
 
+  onViewForkCode?: (ins: NodeInstance) => void;
+
   displayMode?: true;
 
   forceShowMinimized?: PinType | "both";
@@ -615,7 +617,10 @@ export const InstanceView: React.FC<InstanceViewProps> =
         { text: "Reorder outputs", onClick: _onChangeVisibleOutputs },
         { text: `Set display name`, onClick: _onSetDisplayName },
         { text: "Group selected instances", onClick: onGroupSelected },
-
+        {
+          text: "View/fork code",
+          onClick: () => props.onViewForkCode(instance),
+        },
         {
           text: "Delete instance",
           intent: "danger",

diff --git a/playground/stdlib-bundle/inline-macros.ts b/playground/stdlib-bundle/inline-macros.ts
diff --git a/playground/types/@flyde-core.d.ts b/playground/types/@flyde-core.d.ts
@@ -672,10 +672,14 @@ declare module '@flyde/core/node/node' {
     export type ImportableSource = {
             module: string;
             node: ImportedNode;
-            implicit?: boolean;
     };
     export type CustomNode = VisualNode;
-    export type CodeNodeDefinition = Omit<CodeNode, "run">;
+    export type CodeNodeDefinition = Omit<CodeNode, "run"> & {
+            /**
+                * The source code of the node, if available. Used for editing and forking nodes in the editor.
+                */
+            sourceCode?: string;
+    };
     export type NodeDefinition = CustomNode | CodeNodeDefinition;
     export type NodeOrMacroDefinition = NodeDefinition | MacroNodeDefinition<any>;
     export type NodeModuleMetaData = {