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

package/src/form-engine/model/index.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ReactiveState } from '@flowgram.ai/reactive';
+
+import { getUniqueFieldName, mergeFieldPath } from '../utils';
+import { FormSchema, FormSchemaType, FormSchemaModelState } from '../types';
+
+export class FormSchemaModel implements FormSchema {
+  name?: string;
+
+  type?: FormSchemaType;
+
+  defaultValue?: any;
+
+  properties?: Record<string, FormSchema>;
+
+  ['x-index']?: number;
+
+  ['x-component']?: string;
+
+  ['x-component-props']?: Record<string, unknown>;
+
+  ['x-decorator']?: string;
+
+  ['x-decorator-props']?: Record<string, unknown>;
+
+  [key: string]: any;
+
+  path: string[] = [];
+
+  state = new ReactiveState<FormSchemaModelState>({ disabled: false });
+
+  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);
+  }
+
+  constructor(json: FormSchema, path: string[] = []) {
+    this.fromJSON(json);
+    this.path = path;
+  }
+
+  private fromJSON(json: FormSchema) {
+    Object.entries(json).forEach(([key, value]) => {
+      this[key] = value;
+    });
+  }
+
+  getPropertyList() {
+    const orderProperties: FormSchemaModel[] = [];
+    const unOrderProperties: FormSchemaModel[] = [];
+    Object.entries(this.properties || {}).forEach(([key, item]) => {
+      const index = item['x-index'];
+      const defaultValues = this.defaultValue;
+      /**
+       * The upper layer's default value has a higher priority than its own default value,
+       * because the upper layer's default value ultimately comes from the outside world.
+       */
+      if (typeof defaultValues === 'object' && defaultValues !== null && key in defaultValues) {
+        item.defaultValue = defaultValues[key];
+      }
+      const current = new FormSchemaModel(item, mergeFieldPath(this.path, key));
+      if (index !== undefined && !isNaN(index)) {
+        orderProperties[index] = current;
+      } else {
+        unOrderProperties.push(current);
+      }
+    });
+    return orderProperties.concat(unOrderProperties).filter((item) => !!item);
+  }
+}

package/src/form-engine/types.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import type { Validate, FieldState } from '@flowgram.ai/form';
+
+/** field type */
+export type FormSchemaType = 'string' | 'number' | 'boolean' | 'object' | string;
+
+export type FormSchemaValidate = Validate;
+
+export interface FormSchema {
+  /** core */
+  name?: string;
+  type?: FormSchemaType;
+  defaultValue?: any;
+
+  /** children */
+  properties?: Record<string, FormSchema>;
+
+  /** ui */
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  ['x-index']?: number;
+  ['x-visible']?: boolean;
+  ['x-hidden']?: boolean;
+  ['x-component']?: string;
+  ['x-component-props']?: Record<string, unknown>;
+  ['x-decorator']?: string;
+  ['x-decorator-props']?: Record<string, unknown>;
+
+  /** rule */
+  required?: boolean;
+  ['x-validator']?: FormSchemaValidate;
+
+  /** custom */
+  [key: string]: any;
+}
+
+export type FormComponentProps = {
+  type?: FormSchemaType;
+  disabled?: boolean;
+  [key: string]: any;
+} & FormSchema['x-component-props'] &
+  FormSchema['x-decorator-props'] &
+  Partial<FieldState>;
+export type FormComponent = React.FunctionComponent<any>;
+export type FormComponents = Record<string, FormComponent>;
+
+/** ui state */
+export interface FormSchemaModelState {
+  disabled: boolean;
+}

package/src/form-engine/utils.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createElement } from 'react';
+
+import type { FormSchema, FormSchemaValidate, FormComponentProps } from './types';
+
+/** Splice form item unique name */
+export const getUniqueFieldName = (...args: (string | undefined)[]) =>
+  args.filter((path) => path).join('.');
+
+export const mergeFieldPath = (path?: string[], name?: string) =>
+  [...(path || []), name].filter((i): i is string => Boolean(i));
+
+/** Create validation rules */
+export const createValidate = (schema: FormSchema) => {
+  const rules: Record<string, FormSchemaValidate> = {};
+
+  visit(schema);
+
+  return rules;
+
+  function visit(current: FormSchema, name?: string) {
+    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));
+      });
+    }
+  }
+};
+
+export const connect = <T = any>(
+  Component: React.FunctionComponent<any>,
+  mapProps: (p: FormComponentProps) => T
+) => {
+  const Connected = (props: FormComponentProps) => {
+    const mappedProps = mapProps(props);
+    return createElement(Component, mappedProps, (mappedProps as any).children);
+  };
+
+  return Connected;
+};
+
+export const isFormEmpty = (schema: FormSchema) => {
+  /** is not general field and not has children */
+  const isEmpty = (s: FormSchema): boolean => {
+    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);
+};

package/src/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createTestRunPlugin } from './create-test-run-plugin';
+export { useCreateForm, useTestRunService } from './reactive';
+
+export {
+  FormEngine,
+  connect,
+  type FormInstance,
+  type FormEngineProps,
+  type FormSchema,
+  type FormComponentProps,
+} from './form-engine';
+
+export {
+  type TestRunPipelinePlugin,
+  TestRunPipelineEntity,
+  type TestRunPipelineEntityCtx,
+} from './services';

package/src/reactive/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useCreateForm } from './use-create-form';
+export { useTestRunService } from './use-test-run-service';

package/src/reactive/hooks/use-create-form.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { DisposableCollection } from '@flowgram.ai/utils';
+import type { FlowNodeEntity } from '@flowgram.ai/document';
+
+import { TestRunFormEntity } from '../../services/form/form';
+import { FormEngineProps, isFormEmpty } from '../../form-engine';
+import { useTestRunService } from './use-test-run-service';
+
+interface UseFormOptions {
+  node?: FlowNodeEntity;
+  /** form loading */
+  loadingRenderer?: React.ReactNode;
+  /** form empty */
+  emptyRenderer?: React.ReactNode;
+  defaultValues?: FormEngineProps['defaultValues'];
+  onMounted?: FormEngineProps['onMounted'];
+  onUnmounted?: FormEngineProps['onUnmounted'];
+  onFormValuesChange?: FormEngineProps['onFormValuesChange'];
+}
+
+export const useCreateForm = ({
+  node,
+  loadingRenderer,
+  emptyRenderer,
+  defaultValues,
+  onMounted,
+  onUnmounted,
+  onFormValuesChange,
+}: UseFormOptions) => {
+  const testRun = useTestRunService();
+  const [loading, setLoading] = useState(false);
+  const [form, setForm] = useState<TestRunFormEntity | null>(null);
+  const renderer = useMemo(() => {
+    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);
+    }
+  };
+
+  useEffect(() => {
+    compute();
+  }, [node]);
+
+  useEffect(() => {
+    if (!form) {
+      return;
+    }
+    const disposable = new DisposableCollection(
+      form.onFormMounted((data) => {
+        onMounted?.(data);
+      }),
+      form.onFormUnmounted(() => {
+        onUnmounted?.();
+      })
+    );
+    return () => disposable.dispose();
+  }, [form]);
+
+  return {
+    renderer,
+    loading,
+    form,
+  };
+};

package/src/reactive/hooks/use-test-run-service.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useService } from '@flowgram.ai/core';
+
+import { TestRunService } from '../../services/test-run';
+
+export const useTestRunService = () => useService<TestRunService>(TestRunService);

package/src/reactive/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useCreateForm, useTestRunService } from './hooks';

package/src/services/config.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { FlowNodeType, FlowNodeEntity } from '@flowgram.ai/document';
+
+import type { MaybePromise } from '../types';
+import type { FormSchema, FormComponents } from '../form-engine';
+import type { TestRunPipelinePlugin } from './pipeline';
+
+type PropertiesFunctionParams = {
+  node: FlowNodeEntity;
+};
+export type NodeMap = Record<FlowNodeType, NodeTestConfig>;
+export interface NodeTestConfig {
+  /** Enable node TestRun */
+  enabled?: boolean;
+  /** Input schema properties */
+  properties?:
+    | Record<string, FormSchema>
+    | ((params: PropertiesFunctionParams) => MaybePromise<Record<string, FormSchema>>);
+}
+
+export interface TestRunConfig {
+  components: FormComponents;
+  nodes: NodeMap;
+  plugins: (new () => TestRunPipelinePlugin)[];
+}
+
+export const TestRunConfig = Symbol('TestRunConfig');
+export const defineConfig = (config: Partial<TestRunConfig>) => {
+  const defaultConfig: TestRunConfig = {
+    components: {},
+    nodes: {},
+    plugins: [],
+  };
+  return {
+    ...defaultConfig,
+    ...config,
+  };
+};

package/src/services/form/factory.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { TestRunFormEntity } from './form';
+
+export const TestRunFormFactory = Symbol('TestRunFormFactory');
+export type TestRunFormFactory = () => TestRunFormEntity;

package/src/services/form/form.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createElement, type ReactNode } from 'react';
+
+import { nanoid } from 'nanoid';
+import { injectable, inject } from 'inversify';
+import { Emitter } from '@flowgram.ai/utils';
+
+import { TestRunConfig } from '../config';
+import { FormSchema, FormEngine, type FormInstance, type FormEngineProps } from '../../form-engine';
+
+export type FormRenderProps = Omit<
+  FormEngineProps,
+  'schema' | 'components' | 'onMounted' | 'onUnmounted'
+>;
+
+@injectable()
+export class TestRunFormEntity {
+  @inject(TestRunConfig) private readonly config: TestRunConfig;
+
+  private _schema: FormSchema;
+
+  private initialized = false;
+
+  id = nanoid();
+
+  form: FormInstance | null = null;
+
+  onFormMountedEmitter = new Emitter<FormInstance>();
+
+  onFormMounted = this.onFormMountedEmitter.event;
+
+  onFormUnmountedEmitter = new Emitter<void>();
+
+  onFormUnmounted = this.onFormUnmountedEmitter.event;
+
+  get schema() {
+    return this._schema;
+  }
+
+  init(options: { schema: FormSchema }) {
+    if (this.initialized) return;
+
+    this._schema = options.schema;
+    this.initialized = true;
+  }
+
+  render(props?: FormRenderProps): ReactNode {
+    if (!this.initialized) {
+      return null;
+    }
+    const { children, ...restProps } = props || {};
+    return createElement(
+      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();
+  }
+}

package/src/services/form/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { TestRunFormEntity } from './form';
+export { TestRunFormFactory } from './factory';
+export { TestRunFormManager } from './manager';

package/src/services/form/manager.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+
+import type { TestRunFormEntity } from './form';
+import { TestRunFormFactory } from './factory';
+
+@injectable()
+export class TestRunFormManager {
+  @inject(TestRunFormFactory) private readonly factory: TestRunFormFactory;
+
+  private entities = new Map<string, TestRunFormEntity>();
+
+  createForm() {
+    return this.factory();
+  }
+
+  getForm(id: string) {
+    return this.entities.get(id);
+  }
+
+  getAllForm() {
+    return Array.from(this.entities);
+  }
+
+  disposeForm(id: string) {
+    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);
+    }
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { TestRunService } from './test-run';
+export { TestRunFormEntity, TestRunFormFactory } from './form';
+export {
+  TestRunPipelineEntity,
+  TestRunPipelineFactory,
+  type TestRunPipelinePlugin,
+  type TestRunPipelineEntityCtx,
+} from './pipeline';
+export { TestRunConfig, defineConfig } from './config';

package/src/services/pipeline/factory.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { TestRunPipelineEntity } from './pipeline';
+
+export const TestRunPipelineFactory = Symbol('TestRunPipelineFactory');
+export type TestRunPipelineFactory = () => TestRunPipelineEntity;

package/src/services/pipeline/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { TestRunPipelineFactory } from './factory';
+export {
+  TestRunPipelineEntity,
+  type TestRunPipelineEntityOptions,
+  type TestRunPipelineEntityCtx,
+} from './pipeline';
+export { TestRunPipelinePlugin } from './plugin';