improved macro node

.github/workflows/main.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - uses: pnpm/action-setup@v2
         name: Install pnpm
         id: pnpm-install

core/src/execute/debugger/format-event.ts

@@ -13,7 +13,7 @@ function eventBody(event: DebuggerEvent) {
         .map(([pinId, size]) => `${pinId}: ${size}`)
         .join(", ")}`;
     case DebuggerEventType.ERROR:
-      return `Error: ${event.val}`;
+      return `Error: ${JSON.stringify(event.val)}`;
   }
 }
 

core/src/index.ts

@@ -1,8 +1,9 @@
 export * from "./common";
 import { Pos, OMap } from "./common";
+import { FlydeFlow } from "./flow-schema";
 import {
-  CustomNode,
   VisualNode,
+  CustomNode,
   InputPinsConfig,
   Node,
   NodeDefinition,
@@ -38,3 +39,13 @@ export interface NodeLibraryGroup {
 export interface NodeLibraryData {
   groups: NodeLibraryGroup[];
 }
+
+export type ImportablesResult = {
+  importables: Record<string, NodesDefCollection>;
+  errors: { path: string; message: string }[];
+};
+
+export interface FlowJob {
+  flow: FlydeFlow;
+  id: string;
+}

core/src/node/macro-node.ts

@@ -1,56 +1,106 @@
 import { CodeNode, CodeNodeDefinition, NodeMetadata } from "./node";
 import type React from "react";
+import { MacroNodeInstance } from "./node-instance";
 
-export type MacroEditorFieldDefinitionTypeString = {
-  value: "string";
+export type MacroEditorFieldDefinitionType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "json"
+  | "select"
+  | "longtext"
+  | "enum"
+  | "dynamic";
+
+// Replace the conditional type with this mapped type
+export type MacroConfigurableValueTypeMap = {
+  string: string;
+  number: number;
+  boolean: boolean;
+  json: any;
+  select: string | number;
+  dynamic: undefined;
 };
 
-export type MacroEditorFieldDefinitionTypeNumber = {
-  value: "number";
-  min?: number;
-  max?: number;
-};
+export type MacroConfigurableValue = {
+  [K in keyof MacroConfigurableValueTypeMap]: {
+    type: K;
+    value: MacroConfigurableValueTypeMap[K];
+  };
+}[keyof MacroConfigurableValueTypeMap];
+
+export function macroConfigurableValue(
+  type: MacroConfigurableValue["type"],
+  value: MacroConfigurableValue["value"]
+): MacroConfigurableValue {
+  return { type, value };
+}
 
-export type MacroEditorFieldDefinitionTypeBoolean = {
-  value: "boolean";
-};
+export type MacroEditorFieldDefinition =
+  | StringFieldDefinition
+  | NumberFieldDefinition
+  | BooleanFieldDefinition
+  | JsonFieldDefinition
+  | SelectFieldDefinition
+  | LongTextFieldDefinition
+  | EnumFieldDefinition;
 
-export type MacroEditorFieldDefinitionTypeJson = {
-  value: "json";
-  label?: string;
-};
+interface BaseFieldDefinition {
+  label: string;
+  description?: string;
+  configKey: string;
+  templateSupport?: boolean;
+  typeConfigurable?: boolean;
+}
 
-export type MacroEditorFieldDefinitionTypeSelect = {
-  value: "select";
-  items: { value: string | number; label: string }[];
-};
+export interface StringFieldDefinition extends BaseFieldDefinition {
+  type: "string";
+}
 
-export type MacroEditorFieldDefinitionTypeLongText = {
-  value: "longtext";
-  rows?: number;
-};
+export interface BooleanFieldDefinition extends BaseFieldDefinition {
+  type: "boolean";
+}
 
-export type MacroEditorFieldDefinitionTypeEnum = {
-  value: "enum";
-  options: string[];
-};
+export interface JsonFieldDefinition extends BaseFieldDefinition {
+  type: "json";
+  typeData?: {
+    helperText?: string;
+  };
+}
 
-export type MacroEditorFieldDefinitionType =
-  | MacroEditorFieldDefinitionTypeString
-  | MacroEditorFieldDefinitionTypeNumber
-  | MacroEditorFieldDefinitionTypeBoolean
-  | MacroEditorFieldDefinitionTypeJson
-  | MacroEditorFieldDefinitionTypeSelect
-  | MacroEditorFieldDefinitionTypeLongText
-  | MacroEditorFieldDefinitionTypeEnum;
-
-export interface MacroEditorFieldDefinition {
-  label: string;
-  description?: string;
-  configKey: string;
-  allowDynamic: boolean;
-  type: MacroEditorFieldDefinitionType;
-  defaultValue?: any;
+export interface LongTextFieldDefinition extends BaseFieldDefinition {
+  type: "longtext";
+  typeData?: {
+    rows?: number;
+  };
+}
+
+export interface NumberFieldDefinition extends BaseFieldDefinition {
+  type: "number";
+  typeData?: NumberTypeData;
+}
+
+export interface SelectFieldDefinition extends BaseFieldDefinition {
+  type: "select";
+  typeData: SelectTypeData;
+}
+
+export interface EnumFieldDefinition extends BaseFieldDefinition {
+  type: "enum";
+  typeData: EnumTypeData;
+}
+
+export interface NumberTypeData {
+  min?: number;
+  max?: number;
+}
+
+export interface SelectTypeData {
+  items: { value: string | number; label: string }[];
+}
+
+export interface EnumTypeData {
+  options: string[];
 }
 
 export interface MacroEditorConfigCustomResolved {
@@ -104,25 +154,11 @@ export type MacroNodeDefinition<T> = Omit<
 export interface MacroEditorCompProps<T> {
   value: T;
   onChange: (value: T) => void;
+  prompt: (message: string) => Promise<string>;
 }
 
 export interface MacroEditorComp<T> extends React.FC<MacroEditorCompProps<T>> {}
 
-/* helpers, used flow-editor macro editor builder */
-
-export type ConfigurableInputStatic<T> = {
-  mode: "static";
-  value: T;
-};
-
-export type ConfigurableInputDynamic = {
-  mode: "dynamic";
-};
-
-export type ConfigurableInput<T> =
-  | ConfigurableInputStatic<T>
-  | ConfigurableInputDynamic;
-
 export const isMacroNode = (p: any): p is MacroNode<any> => {
   return p && typeof (p as MacroNode<any>).runFnBuilder === "function";
 };
@@ -140,3 +176,25 @@ export const isMacroNodeDefinition = (
     return editorConfig?.type === "structured";
   }
 };
+
+export function processMacroNodeInstance(
+  namespace: string,
+  macro: MacroNode<any>,
+  instance: MacroNodeInstance
+) {
+  const metaData = macro.definitionBuilder(instance.macroData);
+  const runFn = macro.runFnBuilder(instance.macroData);
+
+  const id = `${namespace}${macro.id}__${instance.id}`;
+
+  const resolvedNode: CodeNode = {
+    ...metaData,
+    defaultStyle: metaData.defaultStyle ?? macro.defaultStyle,
+    displayName: metaData.displayName ?? macro.id,
+    namespace: macro.namespace,
+    id,
+    run: runFn,
+  };
+
+  return resolvedNode;
+}

dev-server/src/client.ts

@@ -1,16 +1,11 @@
 import axios from "axios";
 import {
   FlydeFlow,
-  ImportableSource,
   NodeLibraryData,
-  NodeLibraryGroup,
   ResolvedFlydeFlowDefinition,
+  ImportablesResult,
 } from "@flyde/core";
 import { FolderStructure } from "./fs-helper/shared";
-import type { ImportablesResult } from "./service/scan-importable-nodes";
-export type { ImportablesResult } from "./service/scan-importable-nodes";
-
-export * from "./runner/shared";
 
 export const createDevServerClient = (baseUrl: string) => {
   return {

dev-server/src/runner/index.ts

@@ -1,2 +1 @@
-export * from "./shared";
 export * from "./runFlow.host";

dev-server/src/runner/runFlow.host.ts

@@ -2,7 +2,7 @@
 import { fork } from "child_process";
 import { join } from "path";
 import { runFlow } from "./runFlow";
-import { FlowJob } from "./shared";
+import type { FlowJob } from "@flyde/core";
 import { onMessage, sendMessage } from "./typedProcessMessage";
 
 export function forkRunFlow(data: {

dev-server/src/runner/runFlow.ts

@@ -1,5 +1,4 @@
-import { FlydeFlow } from "@flyde/core";
-import { FlowJob } from "./shared";
+import { FlowJob, FlydeFlow } from "@flyde/core";
 import { createId } from "@paralleldrive/cuid2";
 import { loadFlowFromContent } from "@flyde/runtime";
 

dev-server/src/runner/typedProcessMessage.ts

@@ -1,6 +1,6 @@
 import { ChildProcess } from "child_process";
 import type { runFlow } from "./runFlow";
-import { FlowJob } from "./shared";
+import { FlowJob } from "@flyde/core";
 
 export interface ProcessMessageEventsMap {
   runFlow: Parameters<typeof runFlow>;

dev-server/src/service/scan-importable-nodes.ts

@@ -12,6 +12,7 @@ import {
   isBaseNode,
   isMacroNode,
   NodesDefCollection,
+  ImportablesResult,
 } from "@flyde/core";
 import { scanFolderStructure } from "./scan-folders-structure";
 import { FlydeFile } from "../fs-helper/shared";
@@ -25,11 +26,6 @@ export interface CorruptScannedNode {
   error: string;
 }
 
-export type ImportablesResult = {
-  importables: Record<string, NodesDefCollection>;
-  errors: { path: string; message: string }[];
-};
-
 export async function scanImportableNodes(
   rootPath: string,
   filename: string

editor/src/integrated-flow-manager/IntegratedFlowManager.tsx

@@ -32,7 +32,7 @@ import { FlowEditor } from "@flyde/flow-editor"; // ../../common/flow-editor/Flo
 import { useDebouncedCallback } from "use-debounce";
 
 import { IntegratedFlowSideMenu } from "./side-menu";
-import { NodeDefinition } from "@flyde/core";
+import { NodeDefinition, ImportablesResult } from "@flyde/core";
 
 import { AppToaster } from "@flyde/flow-editor"; // ../../common/toaster
 
@@ -49,7 +49,6 @@ import { useState } from "react";
 import { useEffect } from "react";
 import _ from "lodash";
 import { useBootstrapData } from "./use-bootstrap-data";
-import type { ImportablesResult } from "@flyde/dev-server";
 
 export const PIECE_HEIGHT = 28;
 

flow-editor/package.json

@@ -19,8 +19,8 @@
     "@blueprintjs/icons": "^5.1.5",
     "@blueprintjs/select": "^5.0.1",
     "@flyde/core": "workspace:*",
-    "@flyde/dev-server": "workspace:*",
     "@flyde/remote-debugger": "workspace:*",
+    "@flyde/stdlib": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",

flow-editor/src/flow-editor/DependenciesContext.tsx

@@ -3,8 +3,8 @@ import {
   ImportableSource,
   Pos,
   NodeLibraryData,
+  ImportablesResult,
 } from "@flyde/core";
-import type { ImportablesResult } from "@flyde/dev-server";
 import { createContext, useContext } from "react";
 
 // TODO - merge this interface with the one from the dev-server

flow-editor/src/flow-editor/ports/ports.ts

@@ -5,8 +5,9 @@ import {
   NodeLibraryData,
   ResolvedDependenciesDefinitions,
   noop,
+  FlowJob,
+  ImportablesResult,
 } from "@flyde/core";
-import { FlowJob, ImportablesResult } from "@flyde/dev-server";
 import { ReportEvent } from "./analytics";
 import { toastMsg } from "../../toaster";
 

flow-editor/src/index.tsx

@@ -15,3 +15,4 @@ export * from "./physics";
 export * from "./flow-editor/base-node-editor";
 export * from "./visual-node-editor/utils";
 export * from "./lib/logger";
+export * from "./visual-node-editor/MacroInstanceEditor/SimpleJsonEditor";