stdlib: migrates ListFrom, SpreadList and RoundRobin to macro nodes (#79

) * stdlib: migrates ListFrom, SpreadList and RoundRobin to macro nodes * fixes
flydelabs · Jan 4, 2024 · 817bdc2 · 817bdc2
1 parent 78152c3
commit 817bdc2
Show file tree

Hide file tree

Showing 30 changed files with 830 additions and 777 deletions.
diff --git a/core/src/node/node.ts b/core/src/node/node.ts
@@ -187,7 +187,8 @@ export interface CodeNode extends BaseNode {
 
 export interface MacroNode<T> {
   id: string;
-  displayNameBuilder?: (data: T) => string;
+  displayName?: string;
+  namespace?: string;
   defaultStyle?: NodeStyle;
   description?: string;
   definitionBuilder: (data: T) => Omit<CodeNodeDefinition, "id">;

diff --git a/dev-server/src/service/resolve-dependent-packages.ts b/dev-server/src/service/resolve-dependent-packages.ts
@@ -1,7 +1,8 @@
-import { NodesDefCollection } from "@flyde/core";
+import { NodesDefCollection, isMacroNode } from "@flyde/core";
 import {
   deserializeFlow,
   isCodeNodePath,
+  macroNodeToDefinition,
   resolveCodeNodeDependencies,
   resolveImportablePaths,
 } from "@flyde/resolver";
@@ -18,9 +19,17 @@ export async function resolveDependentPackages(
         const nodes = paths.reduce((acc, filePath) => {
           if (isCodeNodePath(filePath)) {
             const obj = resolveCodeNodeDependencies(filePath).nodes.reduce(
-              (obj, { node }) => ({ ...obj, [node.id]: node }),
+              (obj, { node }) => {
+                return {
+                  ...obj,
+                  [node.id]: isMacroNode(node)
+                    ? macroNodeToDefinition(node, filePath)
+                    : node,
+                };
+              },
               {}
             );
+
             return { ...acc, ...obj };
           }
           try {

diff --git a/examples/custom-macro-nodes/package.json b/examples/custom-macro-nodes/package.json
@@ -15,13 +15,9 @@
     "postinstall": "npm link @flyde/stdlib @flyde/runtime @flyde/core @flyde/resolver @flyde/remote-debugger"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.23.7",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
     "@flyde/resolver": "latest",
     "@flyde/runtime": "latest",
     "@flyde/stdlib": "latest",
-    "@monaco-editor/react": "^4.6.0",
     "@types/react": "^18.2.46",
     "axios": "^1.1.3",
     "chalk": "^4.0.0",

diff --git a/examples/custom-macro-nodes/src/Duplicate/Duplicate.flyde.ts b/examples/custom-macro-nodes/src/Duplicate/Duplicate.flyde.ts
@@ -18,6 +18,7 @@ const node: MacroNode<number> = {
 
     return {
       description: `Duplicates the input value`,
+      displayName: `Duplicate x ${times}`,
       inputs: {
         value: {
           description: "The value to be duplicated",
@@ -34,7 +35,6 @@ const node: MacroNode<number> = {
       outputPin.next(value);
     }
   },
-  displayNameBuilder: (times) => `Duplicate x ${times}`,
   editorComponentBundlePath: "../../../dist/Duplicate.js",
   defaultData: 2,
 };

diff --git a/examples/custom-macro-nodes/src/InlineValue/InlineValue.flyde.ts b/examples/custom-macro-nodes/src/InlineValue/InlineValue.flyde.ts
@@ -6,6 +6,7 @@ const node: MacroNode<any> = {
   definitionBuilder: (val) => {
     return {
       description: `Emits the value ${val}`,
+      displayName: `Inline Value: ${val}`,
       inputs: {},
       outputs: {
         output: {
@@ -18,7 +19,6 @@ const node: MacroNode<any> = {
     const outputPin = outputs.output as DynamicOutput;
     outputPin.next(val);
   },
-  displayNameBuilder: () => `Emit Value`,
   editorComponentBundlePath: "../../../dist/InlineValue.js",
   defaultData: "",
 };

diff --git a/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx b/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx
@@ -117,9 +117,9 @@ export const AddNodeMenu: React.FC<AddNodeMenuProps> = (props) => {
           if (query) {
             const content = `${
               importable.node.searchKeywords?.join(" ") ?? []
-            } ${importable.node.id} ${importable.node.namespace ?? ""} ${
-              importable.node.description
-            }`;
+            } ${importable.node.id} ${importable.node.displayName ?? ""} ${
+              importable.node.namespace ?? ""
+            } ${importable.node.description}`;
             const score = content.toLowerCase().indexOf(query.toLowerCase());
             if (score === -1) {
               return [];

diff --git a/...c/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenuListItem/AddNodeMenuListItem.scss b/...c/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenuListItem/AddNodeMenuListItem.scss
@@ -19,7 +19,7 @@
       align-items: center;
       justify-content: space-between;
 
-      .id {
+      .name {
         font-weight: 600;
         font-size: 1.1em;
         flex: 1;

diff --git a/...rc/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenuListItem/AddNodeMenuListItem.tsx b/...rc/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenuListItem/AddNodeMenuListItem.tsx
@@ -17,7 +17,7 @@ export const AddNodeMenuListItem: React.FC<AddNodeMenuListItemProps> = (
 ) => {
   const { importableNode, onSetFilter, onAdd, onSelect } = props;
   const { node, module } = importableNode;
-  const { id, description } = node;
+  const { id, description, displayName } = node;
 
   // auto scroll to element if selected
   const ref = React.useRef<HTMLDivElement>(null);
@@ -45,7 +45,7 @@ export const AddNodeMenuListItem: React.FC<AddNodeMenuListItemProps> = (
     >
       <div className="content">
         <header>
-          <span className="id">{id}</span>
+          <span className="name">{displayName ?? id}</span>
           {/* {node.namespace ? <Tag className='namespace'>Group: {node.namespace}</Tag> : null} */}
           <Tag
             interactive