@flowgram.ai/node 0.1.0-alpha.10

package/dist/esm/index.js

@@ -0,0 +1,634 @@
+// src/types.ts
+var DataEvent = /* @__PURE__ */ ((DataEvent2) => {
+  DataEvent2["onValueChange"] = "onValueChange";
+  DataEvent2["onValueInit"] = "onValueInit";
+  DataEvent2["onValueInitOrChange"] = "onValueInitOrChange";
+  DataEvent2["onArrayAppend"] = "onArrayAppend";
+  DataEvent2["onArrayDelete"] = "onArrayDelete";
+  return DataEvent2;
+})(DataEvent || {});
+function isFormModelV2(fm) {
+  return "onFormValuesChange" in fm;
+}
+function isFormMetaV2(formMeta) {
+  return "render" in formMeta;
+}
+
+// src/form-model-v2.ts
+import { get, groupBy, isEmpty, mapKeys } from "lodash";
+import { DisposableCollection, Emitter } from "@flowgram.ai/utils";
+import {
+  FlowNodeFormData,
+  FormManager,
+  FormModel
+} from "@flowgram.ai/form-core";
+import {
+  createForm,
+  FieldArrayModel,
+  Glob,
+  toForm
+} from "@flowgram.ai/form";
+import { PlaygroundContext, PluginContext } from "@flowgram.ai/core";
+
+// src/utils.ts
+import { find, mergeWith } from "lodash";
+import { FormPathService } from "@flowgram.ai/form-core";
+function findMatchedInMap(field, validateMap) {
+  if (!validateMap) {
+    return;
+  }
+  if (validateMap[field.name]) {
+    return validateMap[field.name];
+  }
+  const found = find(Object.keys(validateMap), (key) => {
+    if (key.startsWith("regex:")) {
+      const regex = RegExp(key.split(":")[1]);
+      return regex.test(field.name);
+    }
+    return false;
+  });
+  if (found) {
+    return validateMap[found];
+  }
+}
+function formFeedbacksToNodeCoreFormFeedbacks(formFeedbacks) {
+  return formFeedbacks.map(
+    (f) => ({
+      feedbackStatus: f.level,
+      feedbackText: f.message,
+      path: f.name
+    })
+  );
+}
+function convertGlobPath(path) {
+  if (path.startsWith("/")) {
+    const parts = FormPathService.normalize(path).slice(1).split("/");
+    return parts.join(".");
+  }
+  return path;
+}
+
+// src/form-render.tsx
+import React from "react";
+import { Form } from "@flowgram.ai/form";
+var FormRender = ({ formModel }) => formModel?.formControl ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Form, { control: formModel?.formControl, keepModelOnUnMount: true }, formModel.formMeta.render)) : null;
+function renderForm(formModel) {
+  return /* @__PURE__ */ React.createElement(FormRender, { formModel });
+}
+
+// src/form-model-v2.ts
+var DEFAULT = {
+  // Different formModel should have different reference
+  EFFECT_MAP: () => ({}),
+  EFFECT_RETURN_MAP: () => /* @__PURE__ */ new Map([
+    ["onValueInitOrChange" /* onValueInitOrChange */, {}],
+    ["onValueChange" /* onValueChange */, {}],
+    ["onValueInit" /* onValueInit */, {}],
+    ["onArrayAppend" /* onArrayAppend */, {}],
+    ["onArrayDelete" /* onArrayDelete */, {}]
+  ]),
+  FORM_FEEDBACKS: () => [],
+  VALID: null
+};
+var FormModelV2 = class extends FormModel {
+  constructor(node) {
+    super();
+    this.effectMap = DEFAULT.EFFECT_MAP();
+    this.effectReturnMap = DEFAULT.EFFECT_RETURN_MAP();
+    this.plugins = [];
+    this.formFeedbacks = DEFAULT.FORM_FEEDBACKS();
+    this.onInitializedEmitter = new Emitter();
+    this.onValidateEmitter = new Emitter();
+    this.onValidate = this.onValidateEmitter.event;
+    this.onInitialized = this.onInitializedEmitter.event;
+    this.onDisposeEmitter = new Emitter();
+    this.onDispose = this.onDisposeEmitter.event;
+    this.toDispose = new DisposableCollection();
+    this.onFormValuesChangeEmitter = new Emitter();
+    this.onFormValuesChange = this.onFormValuesChangeEmitter.event;
+    this.onValidChangeEmitter = new Emitter();
+    this.onValidChange = this.onValidChangeEmitter.event;
+    this.onFeedbacksChangeEmitter = new Emitter();
+    this.onFeedbacksChange = this.onFeedbacksChangeEmitter.event;
+    this._valid = DEFAULT.VALID;
+    this._feedbacks = [];
+    this._initialized = false;
+    this.node = node;
+    this.toDispose.pushAll([
+      this.onInitializedEmitter,
+      this.onValidateEmitter,
+      this.onValidChangeEmitter,
+      this.onFeedbacksChangeEmitter,
+      this.onFormValuesChangeEmitter
+    ]);
+  }
+  get valid() {
+    return this._valid;
+  }
+  set valid(valid) {
+    this._valid = valid;
+    this.onValidChangeEmitter.fire(valid);
+  }
+  get flowNodeEntity() {
+    return this.node;
+  }
+  get formManager() {
+    return this.node.getService(FormManager);
+  }
+  get formControl() {
+    return this._formControl;
+  }
+  get formMeta() {
+    return this._formMeta || this.node.getNodeRegistry().formMeta;
+  }
+  get values() {
+    return this.nativeFormModel?.values;
+  }
+  get feedbacks() {
+    return this._feedbacks;
+  }
+  updateFormValues(value) {
+    if (this.nativeFormModel) {
+      const finalValue = this.formMeta.formatOnInit ? this.formMeta.formatOnInit(value, this.nodeContext) : value;
+      this.nativeFormModel.values = finalValue;
+    }
+  }
+  set feedbacks(feedbacks) {
+    this._feedbacks = feedbacks;
+    this.onFeedbacksChangeEmitter.fire(feedbacks);
+  }
+  get formItemPathMap() {
+    return /* @__PURE__ */ new Map();
+  }
+  get initialized() {
+    return this._initialized;
+  }
+  get nodeContext() {
+    return {
+      node: this.node,
+      playgroundContext: this.node.getService(PlaygroundContext),
+      clientContext: this.node.getService(PluginContext)
+    };
+  }
+  get nativeFormModel() {
+    return this._formControl?._formModel;
+  }
+  render() {
+    return renderForm(this);
+  }
+  initPlugins(plugins) {
+    if (!plugins.length) {
+      return;
+    }
+    this.plugins = plugins;
+    plugins.forEach((plugin) => {
+      plugin.init(this);
+    });
+  }
+  init(formMeta, rawInitialValues) {
+    const formData = this.node.getData(FlowNodeFormData);
+    this.onFormValuesChange(() => {
+      this._valid = null;
+      formData.fireChange();
+    });
+    (formMeta.plugins || [])?.forEach((_plugin) => {
+      if (_plugin.setupFormMeta) {
+        formMeta = _plugin.setupFormMeta(formMeta, this.nodeContext);
+      }
+    });
+    this._formMeta = formMeta;
+    const { validateTrigger, validate, effect } = formMeta;
+    if (effect) {
+      this.effectMap = effect;
+    }
+    const defaultValues = typeof formMeta.defaultValues === "function" ? formMeta.defaultValues(this.nodeContext) : formMeta.defaultValues;
+    const initialValues = formMeta.formatOnInit ? formMeta.formatOnInit(rawInitialValues, this.nodeContext) : rawInitialValues;
+    const { control } = createForm({
+      initialValues: initialValues || defaultValues,
+      validateTrigger,
+      context: this.nodeContext,
+      validate,
+      disableAutoInit: true
+    });
+    this._formControl = control;
+    const nativeFormModel = control._formModel;
+    this.toDispose.push(nativeFormModel);
+    nativeFormModel.onFormValuesChange((props) => {
+      this.onFormValuesChangeEmitter.fire(props);
+    });
+    if (formMeta.plugins) {
+      this.initPlugins(formMeta.plugins);
+    }
+    nativeFormModel.onFormValuesChange(({ values, prevValues, name }) => {
+      const effectKeys = Object.keys(this.effectMap).filter(
+        (pattern) => Glob.isMatchOrParent(pattern, name)
+      );
+      effectKeys.forEach((effectKey) => {
+        const effectOptionsArr = this.effectMap[effectKey];
+        effectOptionsArr.forEach(({ effect: effect2, event }) => {
+          if (event === "onValueChange" /* onValueChange */ || event === "onValueInitOrChange" /* onValueInitOrChange */) {
+            const currentName = Glob.getParentPathByPattern(effectKey, name);
+            const prevEffectReturn = this.effectReturnMap.get(event)?.[currentName];
+            if (prevEffectReturn) {
+              prevEffectReturn();
+            }
+            const effectReturn = effect2({
+              name: currentName,
+              value: get(values, currentName),
+              prevValue: get(prevValues, currentName),
+              formValues: values,
+              form: toForm(this.nativeFormModel),
+              context: this.nodeContext
+            });
+            if (effectReturn && typeof effectReturn === "function" && this.effectReturnMap.has(event)) {
+              const eventMap = this.effectReturnMap.get(event);
+              eventMap[currentName] = effectReturn;
+            }
+          }
+        });
+      });
+    });
+    nativeFormModel.onFormValuesInit(({ values, name, prevValues }) => {
+      Object.keys(this.effectMap).forEach((pattern) => {
+        const paths = Glob.findMatchPaths(values, pattern);
+        const effectOptionsArr = this.effectMap[pattern];
+        effectOptionsArr.forEach(({ event, effect: effect2 }) => {
+          if (event === "onValueInit" /* onValueInit */ || event === "onValueInitOrChange" /* onValueInitOrChange */) {
+            paths.forEach((path) => {
+              if (Glob.isMatchOrParent(name, path) || name === path) {
+                const prevEffectReturn = this.effectReturnMap.get(event)?.[path];
+                if (prevEffectReturn) {
+                  prevEffectReturn();
+                }
+                const effectReturn = effect2({
+                  name: path,
+                  value: get(values, path),
+                  formValues: values,
+                  prevValue: get(prevValues, path),
+                  form: toForm(this.nativeFormModel),
+                  context: this.nodeContext
+                });
+                if (effectReturn && typeof effectReturn === "function" && this.effectReturnMap.has(event)) {
+                  const eventMap = this.effectReturnMap.get(event);
+                  eventMap[path] = effectReturn;
+                }
+              }
+            });
+          }
+        });
+      });
+    });
+    nativeFormModel.onFieldModelCreate((field) => {
+      const effectOptionsArr = findMatchedInMap(field, this.effectMap);
+      if (effectOptionsArr?.length) {
+        const eventMap = groupBy(effectOptionsArr, "event");
+        mapKeys(eventMap, (optionsArr, event) => {
+          const combinedEffect = (props) => {
+            optionsArr.forEach(
+              ({ effect: effect2 }) => effect2({
+                ...props,
+                formValues: nativeFormModel.values,
+                form: toForm(this.nativeFormModel),
+                context: this.nodeContext
+              })
+            );
+          };
+          switch (event) {
+            case "onArrayAppend" /* onArrayAppend */:
+              if (field instanceof FieldArrayModel) {
+                field.onAppend(combinedEffect);
+              }
+              break;
+            case "onArrayDelete" /* onArrayDelete */:
+              if (field instanceof FieldArrayModel) {
+                field.onDelete(combinedEffect);
+              }
+              break;
+          }
+        });
+      }
+    });
+    this._formControl.init();
+    this._initialized = true;
+    this.onInitializedEmitter.fire(this);
+    this.onDispose(() => {
+      this._initialized = false;
+      this.effectMap = {};
+      nativeFormModel.dispose();
+    });
+  }
+  toJSON() {
+    if (this.formMeta.formatOnSubmit) {
+      return this.formMeta.formatOnSubmit(this.nativeFormModel?.values, this.nodeContext);
+    }
+    return this.nativeFormModel?.values;
+  }
+  clearValid() {
+    if (this.valid !== null) {
+      this.valid = null;
+    }
+  }
+  async validate() {
+    this.formFeedbacks = await this.nativeFormModel?.validate();
+    this.valid = isEmpty(this.formFeedbacks?.filter((f) => f.level === "error"));
+    this.onValidateEmitter.fire(this);
+    return this.valid;
+  }
+  getValues() {
+    return this._formControl?._formModel.values;
+  }
+  getField(name) {
+    let finalName = name.includes("/") ? convertGlobPath(name) : name;
+    return this.formControl?.getField(finalName);
+  }
+  getValueIn(name) {
+    let finalName = name.includes("/") ? convertGlobPath(name) : name;
+    return this.nativeFormModel?.getValueIn(finalName);
+  }
+  setValueIn(name, value) {
+    let finalName = name.includes("/") ? convertGlobPath(name) : name;
+    this.nativeFormModel?.setValueIn(finalName, value);
+  }
+  /**
+   * 监听表单某个路径下的值变化
+   * @param name 路径
+   * @param callback 回调函数
+   */
+  onFormValueChangeIn(name, callback) {
+    if (!this._initialized) {
+      throw new Error(
+        `[NodeEngine] FormModel Error: onFormValueChangeIn can not be called before initialized`
+      );
+    }
+    return this.formControl._formModel.onFormValuesChange(
+      ({ name: changedName, values, prevValues }) => {
+        if (changedName === name) {
+          callback({
+            value: get(values, name),
+            prevValue: get(prevValues, name),
+            formValues: values,
+            prevFormValues: prevValues
+          });
+        }
+      }
+    );
+  }
+  /**
+   * @deprecated 该方法用于兼容 V1 版本 FormModel接口，如果确定是FormModelV2 请使用 FormModel.getValueIn
+   * @param path glob path
+   */
+  getFormItemValueByPath(globPath) {
+    if (!globPath) {
+      return;
+    }
+    if (globPath === "/") {
+      return this._formControl?._formModel.values;
+    }
+    const name = convertGlobPath(globPath);
+    return this.getValueIn(name);
+  }
+  async validateWithFeedbacks() {
+    await this.validate();
+    return formFeedbacksToNodeCoreFormFeedbacks(this.formFeedbacks);
+  }
+  /**
+   * @deprecated 该方法用于兼容 V1 版本 FormModel接口，如果确定是FormModelV2, 请使用FormModel.getValueIn 和 FormModel.setValueIn
+   * @param path glob path
+   */
+  getFormItemByPath(path) {
+    if (!this.nativeFormModel) {
+      return;
+    }
+    const that = this;
+    if (path === "/") {
+      return {
+        get value() {
+          return that.nativeFormModel.values;
+        },
+        set value(v) {
+          that.nativeFormModel.values = v;
+        }
+      };
+    }
+    const name = convertGlobPath(path);
+    const formItemValue = that.getValueIn(name);
+    return {
+      get value() {
+        return formItemValue;
+      },
+      set value(v) {
+        that.setValueIn(name, v);
+      }
+    };
+  }
+  dispose() {
+    this.onDisposeEmitter.fire();
+    this.effectReturnMap.forEach((eventMap) => {
+      Object.values(eventMap).forEach((effectReturn) => {
+        effectReturn();
+      });
+    });
+    this.effectMap = DEFAULT.EFFECT_MAP();
+    this.effectReturnMap = DEFAULT.EFFECT_RETURN_MAP();
+    this.plugins.forEach((p) => {
+      p.dispose();
+    });
+    this.plugins = [];
+    this.formFeedbacks = DEFAULT.FORM_FEEDBACKS();
+    this._valid = DEFAULT.VALID;
+    this._formControl = void 0;
+    this._initialized = false;
+    this.toDispose.dispose();
+  }
+};
+
+// src/helpers.ts
+import { FlowNodeFormData as FlowNodeFormData2 } from "@flowgram.ai/form-core";
+function isFormV2(node) {
+  return !!node.getNodeRegistry().formMeta?.render;
+}
+function createEffectOptions(event, effect) {
+  return {
+    event,
+    effect
+  };
+}
+
+// src/hooks.ts
+import { useEffect } from "react";
+import { useRefresh } from "@flowgram.ai/utils";
+import { FlowNodeFormData as FlowNodeFormData3 } from "@flowgram.ai/form-core";
+import { useFormErrors, useFormState, useFormWarnings } from "@flowgram.ai/form";
+function useWatchFormValues(node) {
+  const formModel = node.getData(FlowNodeFormData3).getFormModel();
+  const refresh = useRefresh();
+  useEffect(() => {
+    const disposable = formModel.nativeFormModel?.onFormValuesChange(() => {
+      refresh();
+    });
+    return () => disposable?.dispose();
+  }, [formModel.nativeFormModel]);
+  return formModel.getValues();
+}
+function useWatchFormValueIn(node, name) {
+  const formModel = node.getData(FlowNodeFormData3).getFormModel();
+  const refresh = useRefresh();
+  useEffect(() => {
+    const disposable = formModel.nativeFormModel?.onFormValuesChange(({ name: changedName }) => {
+      if (name === changedName) {
+        refresh();
+      }
+    });
+    return () => disposable?.dispose();
+  }, []);
+  return formModel.getValueIn(name);
+}
+function useInitializedFormModel(node) {
+  const formModel = node.getData(FlowNodeFormData3).getFormModel();
+  const refresh = useRefresh();
+  useEffect(() => {
+    const disposable = formModel.onInitialized(() => {
+      refresh();
+    });
+    return () => disposable.dispose();
+  }, [formModel]);
+  return formModel;
+}
+function useWatchFormState(node) {
+  const formModel = useInitializedFormModel(node);
+  return useFormState(formModel.formControl);
+}
+function useWatchFormErrors(node) {
+  const formModel = useInitializedFormModel(node);
+  return useFormErrors(formModel.formControl);
+}
+function useWatchFormWarnings(node) {
+  const formModel = useInitializedFormModel(node);
+  return useFormWarnings(formModel.formControl);
+}
+
+// src/form-plugin.ts
+import { nanoid } from "nanoid";
+var FormPlugin = class {
+  constructor(config, opts) {
+    this.name = config?.name || "";
+    this.pluginId = `${this.name}__${nanoid()}`;
+    this.config = config;
+    this.opts = opts;
+  }
+  get formModel() {
+    return this._formModel;
+  }
+  get ctx() {
+    return {
+      formModel: this.formModel,
+      node: this.formModel.nodeContext.node,
+      playgroundContext: this.formModel.nodeContext.playgroundContext
+    };
+  }
+  setupFormMeta(formMeta, nodeContext) {
+    const nextFormMeta = {
+      ...formMeta
+    };
+    this.config.onSetupFormMeta?.(
+      {
+        mergeEffect: (effect) => {
+          nextFormMeta.effect = {
+            ...nextFormMeta.effect || {},
+            ...effect
+          };
+        },
+        mergeValidate: (validate) => {
+          nextFormMeta.validate = {
+            ...nextFormMeta.validate || {},
+            ...validate
+          };
+        },
+        addFormatOnInit: (formatOnInit) => {
+          if (!nextFormMeta.formatOnInit) {
+            nextFormMeta.formatOnInit = formatOnInit;
+            return;
+          }
+          const legacyFormatOnInit = nextFormMeta.formatOnInit;
+          nextFormMeta.formatOnInit = (v, c) => formatOnInit?.(legacyFormatOnInit(v, c), c);
+        },
+        addFormatOnSubmit: (formatOnSubmit) => {
+          if (!nextFormMeta.formatOnSubmit) {
+            nextFormMeta.formatOnSubmit = formatOnSubmit;
+            return;
+          }
+          const legacyFormatOnSubmit = nextFormMeta.formatOnSubmit;
+          nextFormMeta.formatOnSubmit = (v, c) => formatOnSubmit?.(legacyFormatOnSubmit(v, c), c);
+        },
+        ...nodeContext
+      },
+      this.opts
+    );
+    return nextFormMeta;
+  }
+  init(formModel) {
+    this._formModel = formModel;
+    this.config?.onInit?.(this.ctx, this.opts);
+  }
+  dispose() {
+    if (this.config?.onDispose) {
+      this.config?.onDispose(this.ctx, this.opts);
+    }
+  }
+};
+function defineFormPluginCreator(config) {
+  return function(opts) {
+    return new FormPlugin(config, opts);
+  };
+}
+
+// src/get-node-form.tsx
+import React2 from "react";
+import { FlowNodeFormData as FlowNodeFormData4, NodeRender } from "@flowgram.ai/form-core";
+function getNodeForm(node) {
+  const formModel = node.getData(FlowNodeFormData4)?.getFormModel();
+  const nativeFormModel = formModel?.nativeFormModel;
+  if (!formModel || !nativeFormModel) return void 0;
+  const result = {
+    initialValues: nativeFormModel.initialValues,
+    get values() {
+      return nativeFormModel.values;
+    },
+    state: nativeFormModel.state,
+    getValueIn: (name) => nativeFormModel.getValueIn(name),
+    setValueIn: (name, value) => nativeFormModel.setValueIn(name, value),
+    updateFormValues: (values) => {
+      formModel.updateFormValues(values);
+    },
+    render: () => /* @__PURE__ */ React2.createElement(NodeRender, { node }),
+    onFormValuesChange: formModel.onFormValuesChange.bind(formModel),
+    onFormValueChangeIn: formModel.onFormValueChangeIn.bind(formModel),
+    onValidate: formModel.nativeFormModel.onValidate,
+    validate: formModel.validate.bind(formModel)
+  };
+  Object.defineProperty(result, "_formModel", {
+    enumerable: false,
+    get() {
+      return formModel;
+    }
+  });
+  return result;
+}
+export {
+  DataEvent,
+  FormModelV2,
+  FormPlugin,
+  createEffectOptions,
+  defineFormPluginCreator,
+  getNodeForm,
+  isFormMetaV2,
+  isFormModelV2,
+  isFormV2,
+  useInitializedFormModel,
+  useWatchFormErrors,
+  useWatchFormState,
+  useWatchFormValueIn,
+  useWatchFormValues,
+  useWatchFormWarnings
+};
+//# sourceMappingURL=index.js.map