@flowgram.ai/node 0.1.1

package/dist/index.js

@@ -0,0 +1,606 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DataEvent: () => DataEvent,
+  FormModelV2: () => FormModelV2,
+  FormPlugin: () => FormPlugin,
+  createEffectOptions: () => createEffectOptions,
+  defineFormPluginCreator: () => defineFormPluginCreator,
+  getNodeForm: () => getNodeForm,
+  isFormMetaV2: () => isFormMetaV2,
+  isFormModelV2: () => isFormModelV2,
+  isFormV2: () => isFormV2,
+  useInitializedFormModel: () => useInitializedFormModel,
+  useWatchFormErrors: () => useWatchFormErrors,
+  useWatchFormState: () => useWatchFormState,
+  useWatchFormValueIn: () => useWatchFormValueIn,
+  useWatchFormValues: () => useWatchFormValues,
+  useWatchFormWarnings: () => useWatchFormWarnings
+});
+module.exports = __toCommonJS(src_exports);
+
+// 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
+var import_lodash2 = require("lodash");
+var import_utils = require("@flowgram.ai/utils");
+var import_form_core2 = require("@flowgram.ai/form-core");
+var import_form2 = require("@flowgram.ai/form");
+var import_core = require("@flowgram.ai/core");
+
+// src/utils.ts
+var import_lodash = require("lodash");
+var import_form_core = require("@flowgram.ai/form-core");
+function findMatchedInMap(field, validateMap) {
+  if (!validateMap) {
+    return;
+  }
+  if (validateMap[field.name]) {
+    return validateMap[field.name];
+  }
+  const found = (0, import_lodash.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 = import_form_core.FormPathService.normalize(path).slice(1).split("/");
+    return parts.join(".");
+  }
+  return path;
+}
+function mergeEffectMap(origin, source) {
+  return (0, import_lodash.mergeWith)(origin, source, function(objValue, srcValue) {
+    return (objValue || []).concat(srcValue);
+  });
+}
+
+// src/form-render.tsx
+var import_react = __toESM(require("react"));
+var import_form = require("@flowgram.ai/form");
+var FormRender = ({ formModel }) => formModel?.formControl ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_form.Form, { control: formModel?.formControl, keepModelOnUnMount: true }, formModel.formMeta.render)) : null;
+function renderForm(formModel) {
+  return /* @__PURE__ */ import_react.default.createElement(FormRender, { formModel });
+}
+
+// src/form-model-v2.ts
+var DEFAULT = {
+  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 import_form_core2.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 import_utils.Emitter();
+    this.onValidateEmitter = new import_utils.Emitter();
+    this.onValidate = this.onValidateEmitter.event;
+    this.onInitialized = this.onInitializedEmitter.event;
+    this.onDisposeEmitter = new import_utils.Emitter();
+    this.onDispose = this.onDisposeEmitter.event;
+    this.toDispose = new import_utils.DisposableCollection();
+    this.onFormValuesChangeEmitter = new import_utils.Emitter();
+    this.onFormValuesChange = this.onFormValuesChangeEmitter.event;
+    this.onValidChangeEmitter = new import_utils.Emitter();
+    this.onValidChange = this.onValidChangeEmitter.event;
+    this.onFeedbacksChangeEmitter = new import_utils.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(import_form_core2.FormManager);
+  }
+  get formControl() {
+    return this._formControl;
+  }
+  get formMeta() {
+    return this.node.getNodeRegistry().formMeta;
+  }
+  get feedbacks() {
+    return this._feedbacks;
+  }
+  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(import_core.PlaygroundContext)
+    };
+  }
+  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);
+      if (plugin.config?.effect) {
+        mergeEffectMap(this.effectMap, plugin.config.effect);
+      }
+    });
+  }
+  init(formMeta, rawInitialValues) {
+    const formData = this.node.getData(import_form_core2.FlowNodeFormData);
+    this.onFormValuesChange(() => {
+      this._valid = null;
+      formData.fireChange();
+    });
+    const { validateTrigger, validate, effect } = formMeta;
+    if (effect) {
+      this.effectMap = effect;
+    }
+    const defaultValues = typeof formMeta.defaultValues === "function" ? formMeta.defaultValues() : formMeta.defaultValues;
+    const initialValues = formMeta.formatOnInit ? formMeta.formatOnInit(rawInitialValues, this.nodeContext) : rawInitialValues;
+    const { control } = (0, import_form2.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) => import_form2.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 = import_form2.Glob.getParentPathByPattern(effectKey, name);
+            const prevEffectReturn = this.effectReturnMap.get(event)?.[currentName];
+            if (prevEffectReturn) {
+              prevEffectReturn();
+            }
+            const effectReturn = effect2({
+              name: currentName,
+              value: (0, import_lodash2.get)(values, currentName),
+              prevValue: (0, import_lodash2.get)(prevValues, currentName),
+              formValues: values,
+              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 = import_form2.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 (import_form2.Glob.isMatchOrParent(name, path) || name === path) {
+                const prevEffectReturn = this.effectReturnMap.get(event)?.[path];
+                if (prevEffectReturn) {
+                  prevEffectReturn();
+                }
+                const effectReturn = effect2({
+                  name: path,
+                  value: (0, import_lodash2.get)(values, path),
+                  formValues: values,
+                  prevValue: (0, import_lodash2.get)(prevValues, path),
+                  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 = (0, import_lodash2.groupBy)(effectOptionsArr, "event");
+        (0, import_lodash2.mapKeys)(eventMap, (optionsArr, event) => {
+          const combinedEffect = (props) => {
+            optionsArr.forEach(
+              ({ effect: effect2 }) => effect2({
+                ...props,
+                formValues: nativeFormModel.values,
+                context: this.nodeContext
+              })
+            );
+          };
+          switch (event) {
+            case "onArrayAppend" /* onArrayAppend */:
+              if (field instanceof import_form2.FieldArrayModel) {
+                field.onAppend(combinedEffect);
+              }
+              break;
+            case "onArrayDelete" /* onArrayDelete */:
+              if (field instanceof import_form2.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 = (0, import_lodash2.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`
+      );
+    }
+    this.formControl._formModel.onFormValuesChange(({ name: changedName, values, prevValues }) => {
+      if (changedName === name) {
+        callback({
+          value: (0, import_lodash2.get)(values, name),
+          prevValue: (0, import_lodash2.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) {
+    const name = convertGlobPath(path);
+    const that = this;
+    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
+var import_form_core3 = require("@flowgram.ai/form-core");
+function isFormV2(node) {
+  return node.getNodeRegistry().formMeta?.render;
+}
+function createEffectOptions(event, effect) {
+  return {
+    event,
+    effect
+  };
+}
+
+// src/hooks.ts
+var import_react2 = require("react");
+var import_utils3 = require("@flowgram.ai/utils");
+var import_form_core4 = require("@flowgram.ai/form-core");
+var import_form3 = require("@flowgram.ai/form");
+function useWatchFormValues(node) {
+  const formModel = node.getData(import_form_core4.FlowNodeFormData).getFormModel();
+  const refresh = (0, import_utils3.useRefresh)();
+  (0, import_react2.useEffect)(() => {
+    const disposable = formModel.nativeFormModel?.onFormValuesChange(() => {
+      refresh();
+    });
+    return () => disposable?.dispose();
+  }, [formModel.nativeFormModel]);
+  return formModel.getValues();
+}
+function useWatchFormValueIn(node, name) {
+  const formModel = node.getData(import_form_core4.FlowNodeFormData).getFormModel();
+  const refresh = (0, import_utils3.useRefresh)();
+  (0, import_react2.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(import_form_core4.FlowNodeFormData).getFormModel();
+  const refresh = (0, import_utils3.useRefresh)();
+  (0, import_react2.useEffect)(() => {
+    const disposable = formModel.onInitialized(() => {
+      refresh();
+    });
+    return () => disposable.dispose();
+  }, [formModel]);
+  return formModel;
+}
+function useWatchFormState(node) {
+  const formModel = useInitializedFormModel(node);
+  return (0, import_form3.useFormState)(formModel.formControl);
+}
+function useWatchFormErrors(node) {
+  const formModel = useInitializedFormModel(node);
+  return (0, import_form3.useFormErrors)(formModel.formControl);
+}
+function useWatchFormWarnings(node) {
+  const formModel = useInitializedFormModel(node);
+  return (0, import_form3.useFormWarnings)(formModel.formControl);
+}
+
+// src/form-plugin.ts
+var import_nanoid = require("nanoid");
+var FormPlugin = class {
+  constructor(name, config, opts) {
+    this.name = name;
+    this.pluginId = `${name}__${(0, import_nanoid.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
+    };
+  }
+  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(name, config) {
+  return function(opts) {
+    return new FormPlugin(name, config, opts);
+  };
+}
+
+// src/get-node-form.tsx
+var import_react3 = __toESM(require("react"));
+var import_form_core5 = require("@flowgram.ai/form-core");
+function getNodeForm(node) {
+  const formModel = node.getData(import_form_core5.FlowNodeFormData)?.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),
+    render: () => /* @__PURE__ */ import_react3.default.createElement(import_form_core5.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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataEvent,
+  FormModelV2,
+  FormPlugin,
+  createEffectOptions,
+  defineFormPluginCreator,
+  getNodeForm,
+  isFormMetaV2,
+  isFormModelV2,
+  isFormV2,
+  useInitializedFormModel,
+  useWatchFormErrors,
+  useWatchFormState,
+  useWatchFormValueIn,
+  useWatchFormValues,
+  useWatchFormWarnings
+});
+//# sourceMappingURL=index.js.map