@flowgram.ai/test-run-plugin 0.1.0-alpha.20

package/dist/esm/index.js

@@ -0,0 +1,731 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
+
+// src/create-test-run-plugin.ts
+import { definePluginCreator } from "@flowgram.ai/core";
+
+// src/services/form/form.ts
+import { createElement as createElement2 } from "react";
+import { nanoid } from "nanoid";
+import { injectable, inject } from "inversify";
+import { Emitter } from "@flowgram.ai/utils";
+
+// src/services/config.ts
+var TestRunConfig = Symbol("TestRunConfig");
+var defineConfig = (config) => {
+  const defaultConfig = {
+    components: {},
+    nodes: {},
+    plugins: []
+  };
+  return {
+    ...defaultConfig,
+    ...config
+  };
+};
+
+// src/form-engine/form/form.tsx
+import { Form } from "@flowgram.ai/form";
+
+// src/form-engine/hooks/use-create-form.ts
+import { useEffect, useMemo } from "react";
+import { createForm, ValidateTrigger } from "@flowgram.ai/form";
+
+// src/form-engine/utils.ts
+import { createElement } from "react";
+var getUniqueFieldName = (...args) => args.filter((path) => path).join(".");
+var mergeFieldPath = (path, name) => [...path || [], name].filter((i) => Boolean(i));
+var createValidate = (schema) => {
+  const rules = {};
+  visit(schema);
+  return rules;
+  function visit(current, name) {
+    if (name && current["x-validator"]) {
+      rules[name] = current["x-validator"];
+    }
+    if (current.type === "object" && current.properties) {
+      Object.entries(current.properties).forEach(([key, value]) => {
+        visit(value, getUniqueFieldName(name, key));
+      });
+    }
+  }
+};
+var connect = (Component, mapProps) => {
+  const Connected = (props) => {
+    const mappedProps = mapProps(props);
+    return createElement(Component, mappedProps, mappedProps.children);
+  };
+  return Connected;
+};
+var isFormEmpty = (schema) => {
+  const isEmpty = (s) => {
+    if (!s.type || s.type === "object" || !s.name) {
+      return Object.entries(schema.properties || {}).map(([key, value]) => ({
+        name: key,
+        ...value
+      })).every(isFormEmpty);
+    }
+    return false;
+  };
+  return isEmpty(schema);
+};
+
+// src/form-engine/model/index.ts
+import { ReactiveState } from "@flowgram.ai/reactive";
+var FormSchemaModel = class _FormSchemaModel {
+  constructor(json, path = []) {
+    this.path = [];
+    this.state = new ReactiveState({ disabled: false });
+    this.fromJSON(json);
+    this.path = path;
+  }
+  get componentType() {
+    return this["x-component"];
+  }
+  get componentProps() {
+    return this["x-component-props"];
+  }
+  get decoratorType() {
+    return this["x-decorator"];
+  }
+  get decoratorProps() {
+    return this["x-decorator-props"];
+  }
+  get uniqueName() {
+    return getUniqueFieldName(...this.path);
+  }
+  fromJSON(json) {
+    Object.entries(json).forEach(([key, value]) => {
+      this[key] = value;
+    });
+  }
+  getPropertyList() {
+    const orderProperties = [];
+    const unOrderProperties = [];
+    Object.entries(this.properties || {}).forEach(([key, item]) => {
+      const index = item["x-index"];
+      const defaultValues = this.defaultValue;
+      if (typeof defaultValues === "object" && defaultValues !== null && key in defaultValues) {
+        item.defaultValue = defaultValues[key];
+      }
+      const current = new _FormSchemaModel(item, mergeFieldPath(this.path, key));
+      if (index !== void 0 && !isNaN(index)) {
+        orderProperties[index] = current;
+      } else {
+        unOrderProperties.push(current);
+      }
+    });
+    return orderProperties.concat(unOrderProperties).filter((item) => !!item);
+  }
+};
+
+// src/form-engine/hooks/use-create-form.ts
+var useCreateForm = (schema, options = {}) => {
+  const { form, control } = useMemo(
+    () => createForm({
+      validate: {
+        ...createValidate(schema),
+        ...options.validate
+      },
+      validateTrigger: options.validateTrigger ?? ValidateTrigger.onBlur
+    }),
+    [schema]
+  );
+  const model = useMemo(
+    () => new FormSchemaModel({ type: "object", ...schema, defaultValue: options.defaultValues }),
+    [schema]
+  );
+  useEffect(() => {
+    if (options.onMounted) {
+      options.onMounted({ model, form });
+    }
+    const disposable = control._formModel.onFormValuesChange((payload) => {
+      if (options.onFormValuesChange) {
+        options.onFormValuesChange(payload);
+      }
+    });
+    return () => {
+      disposable.dispose();
+      if (options.onUnmounted) {
+        options.onUnmounted();
+      }
+    };
+  }, [control]);
+  return {
+    form,
+    control,
+    model
+  };
+};
+
+// src/form-engine/hooks/use-field.ts
+import { useContext } from "react";
+import { useObserve } from "@flowgram.ai/reactive";
+
+// src/form-engine/contexts.ts
+import { createContext } from "react";
+var FieldModelContext = createContext({});
+var FormModelContext = createContext({});
+var ComponentsContext = createContext({});
+
+// src/form-engine/hooks/use-field.ts
+var useFieldModel = () => useContext(FieldModelContext);
+var useFieldState = () => useObserve(useFieldModel().state.value);
+
+// src/form-engine/hooks/use-form.ts
+import { useContext as useContext2 } from "react";
+import { useObserve as useObserve2 } from "@flowgram.ai/reactive";
+var useFormModel = () => useContext2(FormModelContext);
+var useFormState = () => useObserve2(useFormModel().state.value);
+
+// src/form-engine/fields/schema-field.tsx
+import { useState } from "react";
+
+// src/form-engine/fields/recursion-field.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/form-engine/fields/reactive-field.tsx
+import { useContext as useContext3 } from "react";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var ReactiveField = (props) => {
+  const formState = useFormState();
+  const model = useFieldModel();
+  const modelState = useFieldState();
+  const components = useContext3(ComponentsContext);
+  const disabled = modelState.disabled || formState.disabled;
+  const componentRender = () => {
+    if (!model.componentType || !components[model.componentType]) {
+      return props.children;
+    }
+    return React.createElement(
+      components[model.componentType],
+      {
+        disabled,
+        ...model.componentProps,
+        ...props.componentProps
+      },
+      props.children
+    );
+  };
+  const decoratorRender = (children) => {
+    if (!model.decoratorType || !components[model.decoratorType]) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return React.createElement(
+      components[model.decoratorType],
+      {
+        type: model.type,
+        required: model.required,
+        ...model.decoratorProps,
+        ...props.decoratorProps
+      },
+      children
+    );
+  };
+  return decoratorRender(componentRender());
+};
+
+// src/form-engine/fields/object-field.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ObjectField = ({
+  model,
+  children
+}) => /* @__PURE__ */ jsx2(FieldModelContext.Provider, { value: model, children: /* @__PURE__ */ jsx2(ReactiveField, { children }) });
+
+// src/form-engine/fields/general-field.tsx
+import { Field } from "@flowgram.ai/form";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GeneralField = ({ model }) => /* @__PURE__ */ jsx3(FieldModelContext.Provider, { value: model, children: /* @__PURE__ */ jsx3(
+  Field,
+  {
+    name: model.uniqueName,
+    defaultValue: model.defaultValue,
+    render: ({ field, fieldState }) => /* @__PURE__ */ jsx3(
+      ReactiveField,
+      {
+        componentProps: {
+          value: field.value,
+          onChange: field.onChange,
+          onFocus: field.onFocus,
+          onBlur: field.onBlur,
+          ...fieldState
+        },
+        decoratorProps: fieldState
+      }
+    )
+  }
+) });
+
+// src/form-engine/fields/recursion-field.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var RecursionField = ({ model }) => {
+  const properties = useMemo2(() => model.getPropertyList(), [model]);
+  if (model.type !== "object") {
+    return /* @__PURE__ */ jsx4(GeneralField, { model });
+  }
+  return /* @__PURE__ */ jsx4(ObjectField, { model, children: properties.map((item) => /* @__PURE__ */ jsx4(RecursionField, { model: item }, item.uniqueName)) });
+};
+
+// src/form-engine/fields/schema-field.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var SchemaField = ({
+  components,
+  model,
+  children
+}) => {
+  const [innerComponents] = useState(() => components);
+  return /* @__PURE__ */ jsx5(ComponentsContext.Provider, { value: innerComponents, children: /* @__PURE__ */ jsxs(FormModelContext.Provider, { value: model, children: [
+    /* @__PURE__ */ jsx5(RecursionField, { model }),
+    children
+  ] }) });
+};
+
+// src/form-engine/fields/create-field.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var createSchemaField = (options) => {
+  const InnerSchemaField = ({
+    components,
+    ...props
+  }) => /* @__PURE__ */ jsx6(
+    SchemaField,
+    {
+      components: {
+        ...options.components,
+        ...components
+      },
+      ...props
+    }
+  );
+  return InnerSchemaField;
+};
+
+// src/form-engine/form/form.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SchemaField2 = createSchemaField({});
+var FormEngine = ({
+  schema,
+  components,
+  children,
+  ...props
+}) => {
+  const { model, control } = useCreateForm(schema, props);
+  return /* @__PURE__ */ jsx7(Form, { control, children: /* @__PURE__ */ jsx7(SchemaField2, { model, components, children }) });
+};
+
+// src/services/form/form.ts
+var TestRunFormEntity = class {
+  constructor() {
+    this.initialized = false;
+    this.id = nanoid();
+    this.form = null;
+    this.onFormMountedEmitter = new Emitter();
+    this.onFormMounted = this.onFormMountedEmitter.event;
+    this.onFormUnmountedEmitter = new Emitter();
+    this.onFormUnmounted = this.onFormUnmountedEmitter.event;
+  }
+  get schema() {
+    return this._schema;
+  }
+  init(options) {
+    if (this.initialized) return;
+    this._schema = options.schema;
+    this.initialized = true;
+  }
+  render(props) {
+    if (!this.initialized) {
+      return null;
+    }
+    const { children, ...restProps } = props || {};
+    return createElement2(
+      FormEngine,
+      {
+        schema: this.schema,
+        components: this.config.components,
+        onMounted: (instance) => {
+          this.form = instance;
+          this.onFormMountedEmitter.fire(instance);
+        },
+        onUnmounted: this.onFormUnmountedEmitter.fire.bind(this.onFormUnmountedEmitter),
+        ...restProps
+      },
+      children
+    );
+  }
+  dispose() {
+    this._schema = {};
+    this.form = null;
+    this.onFormMountedEmitter.dispose();
+    this.onFormUnmountedEmitter.dispose();
+  }
+};
+__decorateClass([
+  inject(TestRunConfig)
+], TestRunFormEntity.prototype, "config", 2);
+TestRunFormEntity = __decorateClass([
+  injectable()
+], TestRunFormEntity);
+
+// src/services/form/factory.ts
+var TestRunFormFactory = Symbol("TestRunFormFactory");
+
+// src/services/form/manager.ts
+import { inject as inject2, injectable as injectable2 } from "inversify";
+var TestRunFormManager = class {
+  constructor() {
+    this.entities = /* @__PURE__ */ new Map();
+  }
+  createForm() {
+    return this.factory();
+  }
+  getForm(id) {
+    return this.entities.get(id);
+  }
+  getAllForm() {
+    return Array.from(this.entities);
+  }
+  disposeForm(id) {
+    const form = this.entities.get(id);
+    if (!form) {
+      return;
+    }
+    form.dispose();
+    this.entities.delete(id);
+  }
+  disposeAllForm() {
+    for (const id of this.entities.keys()) {
+      this.disposeForm(id);
+    }
+  }
+};
+__decorateClass([
+  inject2(TestRunFormFactory)
+], TestRunFormManager.prototype, "factory", 2);
+TestRunFormManager = __decorateClass([
+  injectable2()
+], TestRunFormManager);
+
+// src/services/test-run.ts
+import { inject as inject3, injectable as injectable3 } from "inversify";
+import { DisposableCollection, Emitter as Emitter2 } from "@flowgram.ai/utils";
+
+// src/services/pipeline/factory.ts
+var TestRunPipelineFactory = Symbol("TestRunPipelineFactory");
+
+// src/services/test-run.ts
+var TestRunService = class {
+  constructor() {
+    this.pipelineEntities = /* @__PURE__ */ new Map();
+    this.pipelineBindings = /* @__PURE__ */ new Map();
+    this.onPipelineProgressEmitter = new Emitter2();
+    this.onPipelineProgress = this.onPipelineProgressEmitter.event;
+    this.onPipelineFinishedEmitter = new Emitter2();
+    this.onPipelineFinished = this.onPipelineFinishedEmitter.event;
+  }
+  isEnabled(nodeType) {
+    const config = this.config.nodes[nodeType];
+    return config && config?.enabled !== false;
+  }
+  async toSchema(node) {
+    const nodeType = node.flowNodeType;
+    const config = this.config.nodes[nodeType];
+    if (!this.isEnabled(nodeType)) {
+      return {};
+    }
+    const properties = typeof config.properties === "function" ? await config.properties({ node }) : config.properties;
+    return {
+      type: "object",
+      properties
+    };
+  }
+  createFormWithSchema(schema) {
+    const form = this.formManager.createForm();
+    form.init({ schema });
+    return form;
+  }
+  async createForm(node) {
+    const schema = await this.toSchema(node);
+    return this.createFormWithSchema(schema);
+  }
+  createPipeline(options) {
+    const pipeline = this.pipelineFactory();
+    this.pipelineEntities.set(pipeline.id, pipeline);
+    pipeline.init(options);
+    return pipeline;
+  }
+  connectPipeline(pipeline) {
+    if (this.pipelineBindings.get(pipeline.id)) {
+      return;
+    }
+    const disposable = new DisposableCollection(
+      pipeline.onProgress(this.onPipelineProgressEmitter.fire.bind(this.onPipelineProgressEmitter)),
+      pipeline.onFinished(this.onPipelineFinishedEmitter.fire.bind(this.onPipelineFinishedEmitter))
+    );
+    this.pipelineBindings.set(pipeline.id, disposable);
+  }
+  disconnectPipeline(id) {
+    if (this.pipelineBindings.has(id)) {
+      const disposable = this.pipelineBindings.get(id);
+      disposable?.dispose();
+      this.pipelineBindings.delete(id);
+    }
+  }
+  disconnectAllPipeline() {
+    for (const id of this.pipelineBindings.keys()) {
+      this.disconnectPipeline(id);
+    }
+  }
+};
+__decorateClass([
+  inject3(TestRunConfig)
+], TestRunService.prototype, "config", 2);
+__decorateClass([
+  inject3(TestRunPipelineFactory)
+], TestRunService.prototype, "pipelineFactory", 2);
+__decorateClass([
+  inject3(TestRunFormManager)
+], TestRunService.prototype, "formManager", 2);
+TestRunService = __decorateClass([
+  injectable3()
+], TestRunService);
+
+// src/services/pipeline/pipeline.ts
+import { nanoid as nanoid2 } from "nanoid";
+import { injectable as injectable5 } from "inversify";
+import { Emitter as Emitter3 } from "@flowgram.ai/utils";
+
+// src/services/pipeline/tap.ts
+var Tap = class {
+  constructor() {
+    this.taps = [];
+    this.frozen = false;
+  }
+  tap(name, fn) {
+    this.taps.push({ name, fn });
+  }
+  async call(ctx) {
+    for (const tap of this.taps) {
+      if (this.frozen) {
+        return;
+      }
+      await tap.fn(ctx);
+    }
+  }
+  freeze() {
+    this.frozen = true;
+  }
+};
+
+// src/services/store.ts
+import { createStore } from "zustand/vanilla";
+import { injectable as injectable4, unmanaged } from "inversify";
+var StoreService = class {
+  get getState() {
+    return this.store.getState.bind(this.store);
+  }
+  get setState() {
+    return this.store.setState.bind(this.store);
+  }
+  constructor(stateCreator) {
+    this.store = createStore(stateCreator);
+  }
+};
+StoreService = __decorateClass([
+  injectable4(),
+  __decorateParam(0, unmanaged())
+], StoreService);
+
+// src/services/pipeline/pipeline.ts
+var initialState = {
+  status: "idle",
+  data: {}
+};
+var TestRunPipelineEntity = class extends StoreService {
+  constructor() {
+    super((set, get) => ({
+      ...initialState,
+      getData: () => get().data || {},
+      setData: (next) => set((state) => ({ ...state, data: { ...state.data, ...next } }))
+    }));
+    this.id = nanoid2();
+    this.prepare = new Tap();
+    this.onProgressEmitter = new Emitter3();
+    this.onProgress = this.onProgressEmitter.event;
+    this.onFinishedEmitter = new Emitter3();
+    this.onFinished = this.onFinishedEmitter.event;
+  }
+  get status() {
+    return this.getState().status;
+  }
+  set status(next) {
+    this.setState({ status: next });
+  }
+  init(options) {
+    if (!this.container) {
+      return;
+    }
+    const { plugins } = options;
+    for (const PluginClass of plugins) {
+      const plugin = this.container.resolve(PluginClass);
+      plugin.apply(this);
+    }
+  }
+  registerExecute(fn) {
+    this.execute = fn;
+  }
+  registerProgress(fn) {
+    this.progress = fn;
+  }
+  async start(options) {
+    const { data } = options || {};
+    if (this.status !== "idle") {
+      return;
+    }
+    this.setState({ data });
+    const ctx = {
+      id: this.id,
+      store: this.store,
+      operate: {
+        update: this.update.bind(this),
+        cancel: this.cancel.bind(this)
+      }
+    };
+    this.status = "preparing";
+    await this.prepare.call(ctx);
+    if (this.status !== "preparing") {
+      return;
+    }
+    this.status = "executing";
+    if (this.execute) {
+      await this.execute(ctx);
+    }
+    if (this.progress) {
+      await this.progress(ctx);
+    }
+    if (this.status === "executing") {
+      this.status = "finished";
+      this.onFinishedEmitter.fire(this.getState().result);
+    }
+  }
+  update(result) {
+    this.setState({ result });
+    this.onProgressEmitter.fire(result);
+  }
+  cancel() {
+    if (this.status = "preparing") {
+      this.prepare.freeze();
+    }
+    this.status = "canceled";
+  }
+  dispose() {
+  }
+};
+TestRunPipelineEntity = __decorateClass([
+  injectable5()
+], TestRunPipelineEntity);
+
+// src/create-test-run-plugin.ts
+var createTestRunPlugin = definePluginCreator({
+  onBind: ({ bind }, opt) => {
+    bind(TestRunService).toSelf().inSingletonScope();
+    bind(TestRunConfig).toConstantValue(defineConfig(opt));
+    bind(TestRunFormManager).toSelf().inSingletonScope();
+    bind(TestRunFormFactory).toFactory((context) => () => {
+      const e = context.container.resolve(TestRunFormEntity);
+      return e;
+    });
+    bind(TestRunPipelineFactory).toFactory(
+      (context) => () => {
+        const e = context.container.resolve(TestRunPipelineEntity);
+        e.container = context.container.createChild();
+        return e;
+      }
+    );
+  }
+});
+
+// src/reactive/hooks/use-create-form.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
+import { DisposableCollection as DisposableCollection2 } from "@flowgram.ai/utils";
+
+// src/reactive/hooks/use-test-run-service.ts
+import { useService } from "@flowgram.ai/core";
+var useTestRunService = () => useService(TestRunService);
+
+// src/reactive/hooks/use-create-form.ts
+var useCreateForm2 = ({
+  node,
+  loadingRenderer,
+  emptyRenderer,
+  defaultValues,
+  onMounted,
+  onUnmounted,
+  onFormValuesChange
+}) => {
+  const testRun = useTestRunService();
+  const [loading, setLoading] = useState2(false);
+  const [form, setForm] = useState2(null);
+  const renderer = useMemo3(() => {
+    if (loading || !form) {
+      return loadingRenderer;
+    }
+    const isEmpty = isFormEmpty(form.schema);
+    return form.render({
+      defaultValues,
+      onFormValuesChange,
+      children: isEmpty ? emptyRenderer : null
+    });
+  }, [form, loading]);
+  const compute = async () => {
+    if (!node) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const formEntity = await testRun.createForm(node);
+      setForm(formEntity);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect2(() => {
+    compute();
+  }, [node]);
+  useEffect2(() => {
+    if (!form) {
+      return;
+    }
+    const disposable = new DisposableCollection2(
+      form.onFormMounted((data) => {
+        onMounted?.(data);
+      }),
+      form.onFormUnmounted(() => {
+        onUnmounted?.();
+      })
+    );
+    return () => disposable.dispose();
+  }, [form]);
+  return {
+    renderer,
+    loading,
+    form
+  };
+};
+export {
+  FormEngine,
+  TestRunPipelineEntity,
+  connect,
+  createTestRunPlugin,
+  useCreateForm2 as useCreateForm,
+  useTestRunService
+};
+//# sourceMappingURL=index.js.map