@flowgram-vue/test-run-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,759 @@
+import { definePluginCreator, useService } from '@flowgram-vue/core';
+import { defineComponent, inject, h, provide, onBeforeUnmount, ref, shallowRef, computed, watch } from 'vue';
+import { nanoid } from 'nanoid';
+import { inject as inject$1, injectable, unmanaged } from 'inversify';
+import { Emitter, DisposableCollection } from '@flowgram-vue/utils';
+import { Field, Form, createForm, ValidateTrigger } from '@flowgram-vue/form';
+import { useObserve, ReactiveState } from '@flowgram-vue/reactive';
+import { createStore } from 'zustand/vanilla';
+
+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/services/config.ts
+var TestRunConfig = /* @__PURE__ */ Symbol("TestRunConfig");
+var defineConfig = (config) => {
+  const defaultConfig = {
+    components: {},
+    nodes: {},
+    plugins: []
+  };
+  return {
+    ...defaultConfig,
+    ...config
+  };
+};
+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 = (Comp, mapProps) => {
+  const Connected = defineComponent({
+    name: "ConnectedFormComponent",
+    setup(props, { slots }) {
+      return () => {
+        const mappedProps = mapProps(props);
+        return h(Comp, mappedProps, () => slots.default?.() ?? 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);
+};
+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 } = createForm({
+    validate: {
+      ...createValidate(schema),
+      ...options.validate
+    },
+    validateTrigger: options.validateTrigger ?? ValidateTrigger.onBlur
+  });
+  const model = new FormSchemaModel({
+    type: "object",
+    ...schema,
+    defaultValue: options.defaultValues
+  });
+  if (options.onMounted) {
+    options.onMounted({ model, form });
+  }
+  const disposable = control._formModel.onFormValuesChange((payload) => {
+    if (options.onFormValuesChange) {
+      options.onFormValuesChange(payload);
+    }
+  });
+  onBeforeUnmount(() => {
+    disposable.dispose();
+    if (options.onUnmounted) {
+      options.onUnmounted();
+    }
+  });
+  return {
+    form,
+    control,
+    model
+  };
+};
+
+// src/form-engine/contexts.ts
+var FieldModelKey = /* @__PURE__ */ Symbol("FieldModelContext");
+var FormModelKey = /* @__PURE__ */ Symbol("FormModelContext");
+var ComponentsKey = /* @__PURE__ */ Symbol("ComponentsContext");
+
+// src/form-engine/hooks/use-field.ts
+var useFieldModel = () => {
+  const model = inject(FieldModelKey);
+  if (!model) {
+    throw new Error("useFieldModel must be used within FieldModelKey provider");
+  }
+  return model;
+};
+var useFieldState = () => useObserve(useFieldModel().state.value);
+var useFormModel = () => {
+  const model = inject(FormModelKey);
+  if (!model) {
+    throw new Error("useFormModel must be used within FormModelKey provider");
+  }
+  return model;
+};
+var useFormState = () => useObserve(useFormModel().state.value);
+var ReactiveField = defineComponent({
+  name: "ReactiveField",
+  props: {
+    componentProps: { type: Object, default: void 0 },
+    decoratorProps: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const formState = useFormState();
+    const model = useFieldModel();
+    const modelState = useFieldState();
+    const components = inject(ComponentsKey, {});
+    return () => {
+      const disabled = modelState.disabled || formState.disabled;
+      let children = slots.default?.();
+      if (model.componentType && components[model.componentType]) {
+        children = [
+          h(
+            components[model.componentType],
+            {
+              disabled,
+              ...model.componentProps,
+              ...props.componentProps
+            },
+            () => slots.default?.()
+          )
+        ];
+      }
+      if (!model.decoratorType || !components[model.decoratorType]) {
+        return children;
+      }
+      return h(
+        components[model.decoratorType],
+        {
+          type: model.type,
+          required: model.required,
+          ...model.decoratorProps,
+          ...props.decoratorProps
+        },
+        () => children
+      );
+    };
+  }
+});
+
+// src/form-engine/fields/object-field.ts
+var ObjectField = defineComponent({
+  name: "ObjectField",
+  props: {
+    model: { type: Object, required: true }
+  },
+  setup(props, { slots }) {
+    provide(FieldModelKey, props.model);
+    return () => h(ReactiveField, null, () => slots.default?.());
+  }
+});
+var GeneralField = defineComponent({
+  name: "GeneralField",
+  props: {
+    model: { type: Object, required: true }
+  },
+  setup(props) {
+    provide(FieldModelKey, props.model);
+    return () => h(Field, {
+      name: props.model.uniqueName,
+      defaultValue: props.model.defaultValue,
+      render: ({ field, fieldState }) => h(ReactiveField, {
+        componentProps: {
+          value: field.value,
+          onChange: field.onChange,
+          onFocus: field.onFocus,
+          onBlur: field.onBlur,
+          ...fieldState
+        },
+        decoratorProps: fieldState
+      })
+    });
+  }
+});
+
+// src/form-engine/fields/recursion-field.ts
+var RecursionField = defineComponent({
+  name: "RecursionField",
+  props: {
+    model: { type: Object, required: true }
+  },
+  setup(props) {
+    return () => {
+      const properties = props.model.getPropertyList();
+      if (props.model.type !== "object") {
+        return h(GeneralField, { model: props.model });
+      }
+      return h(
+        ObjectField,
+        { model: props.model },
+        () => properties.map((item) => h(RecursionField, { key: item.uniqueName, model: item }))
+      );
+    };
+  }
+});
+
+// src/form-engine/fields/schema-field.ts
+var SchemaField = defineComponent({
+  name: "SchemaField",
+  props: {
+    model: { type: Object, required: true },
+    components: { type: Object, default: () => ({}) }
+  },
+  setup(props, { slots }) {
+    provide(ComponentsKey, props.components || {});
+    provide(FormModelKey, props.model);
+    return () => [h(RecursionField, { model: props.model }), slots.default?.()];
+  }
+});
+var createSchemaField = (options) => {
+  const InnerSchemaField = defineComponent({
+    name: "InnerSchemaField",
+    props: {
+      model: { type: Object, required: true },
+      components: { type: Object, default: void 0 }
+    },
+    setup(props, { slots }) {
+      return () => h(
+        SchemaField,
+        {
+          model: props.model,
+          components: {
+            ...options.components,
+            ...props.components
+          }
+        },
+        () => slots.default?.()
+      );
+    }
+  });
+  return InnerSchemaField;
+};
+
+// src/form-engine/form/form.ts
+var SchemaField2 = createSchemaField({});
+var FormEngine = defineComponent({
+  name: "FormEngine",
+  props: {
+    schema: { type: Object, required: true },
+    components: { type: Object, default: void 0 },
+    defaultValues: { default: void 0 },
+    validate: { type: Object, default: void 0 },
+    validateTrigger: { default: void 0 },
+    onMounted: { type: Function, default: void 0 },
+    onFormValuesChange: {
+      type: Function,
+      default: void 0
+    },
+    onUnmounted: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const { model, control } = useCreateForm(props.schema, {
+      defaultValues: props.defaultValues,
+      validate: props.validate,
+      validateTrigger: props.validateTrigger,
+      onMounted: props.onMounted,
+      onFormValuesChange: props.onFormValuesChange,
+      onUnmounted: props.onUnmounted
+    });
+    return () => h(
+      Form,
+      { control },
+      () => h(SchemaField2, { model, components: props.components }, () => slots.default?.())
+    );
+  }
+});
+
+// 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 h(
+      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$1(TestRunConfig)
+], TestRunFormEntity.prototype, "config", 2);
+TestRunFormEntity = __decorateClass([
+  injectable()
+], TestRunFormEntity);
+
+// src/services/form/factory.ts
+var TestRunFormFactory = /* @__PURE__ */ Symbol("TestRunFormFactory");
+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([
+  inject$1(TestRunFormFactory)
+], TestRunFormManager.prototype, "factory", 2);
+TestRunFormManager = __decorateClass([
+  injectable()
+], TestRunFormManager);
+
+// src/services/pipeline/factory.ts
+var TestRunPipelineFactory = /* @__PURE__ */ Symbol("TestRunPipelineFactory");
+
+// src/services/test-run.ts
+var TestRunService = class {
+  constructor() {
+    this.pipelineEntities = /* @__PURE__ */ new Map();
+    this.pipelineBindings = /* @__PURE__ */ new Map();
+    this.onPipelineProgressEmitter = new Emitter();
+    this.onPipelineProgress = this.onPipelineProgressEmitter.event;
+    this.onPipelineFinishedEmitter = new Emitter();
+    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;
+  }
+  disposePipeline(id) {
+    const pipeline = this.pipelineEntities.get(id);
+    if (pipeline) {
+      this.pipelineEntities.delete(id);
+      pipeline.dispose();
+    }
+  }
+  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([
+  inject$1(TestRunConfig)
+], TestRunService.prototype, "config", 2);
+__decorateClass([
+  inject$1(TestRunPipelineFactory)
+], TestRunService.prototype, "pipelineFactory", 2);
+__decorateClass([
+  inject$1(TestRunFormManager)
+], TestRunService.prototype, "formManager", 2);
+TestRunService = __decorateClass([
+  injectable()
+], TestRunService);
+
+// 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;
+  }
+};
+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([
+  injectable(),
+  __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 = nanoid();
+    this.plugins = [];
+    this.prepare = new Tap();
+    this.onProgressEmitter = new Emitter();
+    this.onProgress = this.onProgressEmitter.event;
+    this.onFinishedEmitter = new Emitter();
+    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);
+      this.plugins.push(plugin);
+    }
+  }
+  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() {
+    this.status = "disposed";
+    this.plugins.forEach((p) => {
+      if (p.dispose) {
+        p.dispose();
+      }
+    });
+    this.onProgressEmitter.dispose();
+    this.onFinishedEmitter.dispose();
+  }
+};
+TestRunPipelineEntity = __decorateClass([
+  injectable()
+], 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;
+      }
+    );
+  }
+});
+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 = ref(false);
+  const form = shallowRef(null);
+  const renderer = computed(() => {
+    if (loading.value || !form.value) {
+      return loadingRenderer;
+    }
+    const isEmpty = isFormEmpty(form.value.schema);
+    return form.value.render({
+      defaultValues,
+      onFormValuesChange,
+      children: isEmpty ? emptyRenderer : null
+    });
+  });
+  const compute = async () => {
+    if (!node) {
+      return;
+    }
+    try {
+      loading.value = true;
+      const formEntity = await testRun.createForm(node);
+      form.value = formEntity;
+    } finally {
+      loading.value = false;
+    }
+  };
+  watch(
+    () => node,
+    () => {
+      void compute();
+    },
+    { immediate: true }
+  );
+  watch(
+    form,
+    (next, _prev, onCleanup) => {
+      if (!next) {
+        return;
+      }
+      const disposable = new DisposableCollection(
+        next.onFormMounted((data) => {
+          onMounted?.(data);
+        }),
+        next.onFormUnmounted(() => {
+          onUnmounted?.();
+        })
+      );
+      onCleanup(() => disposable.dispose());
+    }
+  );
+  onBeforeUnmount(() => {
+    form.value = null;
+  });
+  return {
+    renderer,
+    loading,
+    form
+  };
+};
+
+export { FormEngine, TestRunPipelineEntity, connect, createTestRunPlugin, useCreateForm2 as useCreateForm, useTestRunService };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map