@flowgram.ai/form-materials 0.1.0-alpha.10

package/src/components/variable-selector/use-variable-tree.tsx

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useCallback } from 'react';
+
+import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
+import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Icon } from '@douyinfe/semi-ui';
+
+import { ArrayIcons, VariableTypeIcons } from '../type-selector/constants';
+import { JsonSchemaUtils } from '../../utils/json-schema';
+import { IJsonSchema } from '../../typings/json-schema';
+
+type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
+
+export function useVariableTree(params: {
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+}): TreeNodeData[] {
+  const { includeSchema, excludeSchema } = params;
+
+  const variables = useAvailableVariables();
+
+  const getVariableTypeIcon = useCallback((variable: VariableField) => {
+    if (variable.meta?.icon) {
+      if (typeof variable.meta.icon === 'string') {
+        return <img style={{ marginRight: 8 }} width={12} height={12} src={variable.meta.icon} />;
+      }
+
+      return variable.meta.icon;
+    }
+
+    const _type = variable.type;
+
+    if (ASTMatch.isArray(_type)) {
+      return (
+        <Icon
+          size="small"
+          svg={ArrayIcons[_type.items?.kind.toLowerCase()] || VariableTypeIcons.array}
+        />
+      );
+    }
+
+    if (ASTMatch.isCustomType(_type)) {
+      return <Icon size="small" svg={VariableTypeIcons[_type.typeName.toLowerCase()]} />;
+    }
+
+    return <Icon size="small" svg={VariableTypeIcons[variable.type?.kind.toLowerCase()]} />;
+  }, []);
+
+  const renderVariable = (
+    variable: VariableField,
+    parentFields: VariableField[] = []
+  ): TreeNodeData | null => {
+    let type = variable?.type;
+
+    if (!type) {
+      return null;
+    }
+
+    let children: TreeNodeData[] | undefined;
+
+    if (ASTMatch.isObject(type)) {
+      children = (type.properties || [])
+        .map((_property) => renderVariable(_property as VariableField, [...parentFields, variable]))
+        .filter(Boolean) as TreeNodeData[];
+    }
+
+    const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+    const key = keyPath.join('.');
+
+    const isSchemaInclude = includeSchema
+      ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema)
+      : true;
+    const isSchemaExclude = excludeSchema
+      ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
+      : false;
+
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+
+    // If not match, and no children, return null
+    if (!isSchemaMatch && !children?.length) {
+      return null;
+    }
+
+    return {
+      key: key,
+      label: variable.meta?.title || variable.key,
+      value: key,
+      keyPath,
+      icon: getVariableTypeIcon(variable),
+      children,
+      disabled: !isSchemaMatch,
+      rootMeta: parentFields[0]?.meta,
+    };
+  };
+
+  return [...variables.slice(0).reverse()]
+    .map((_variable) => renderVariable(_variable as VariableField))
+    .filter(Boolean) as TreeNodeData[];
+}

package/src/effects/auto-rename-ref/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "auto-rename-ref",
+  "depMaterials": ["flow-value"],
+  "depPackages": ["lodash"]
+}

package/src/effects/auto-rename-ref/index.ts

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isArray, isObject } from 'lodash';
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  VariableFieldKeyRenameService,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+/**
+ * Auto rename ref when form item's key is renamed
+ *
+ * Example:
+ *
+ * formMeta: {
+ *  effects: {
+ *    "inputsValues": autoRenameRefEffect,
+ *  }
+ * }
+ */
+export const autoRenameRefEffect: EffectOptions[] = [
+  {
+    event: DataEvent.onValueInit,
+    effect: ((params) => {
+      const { context, form, name } = params;
+
+      const renameService = context.node.getService(VariableFieldKeyRenameService);
+
+      const disposable = renameService.onRename(({ before, after }) => {
+        const beforeKeyPath = [
+          ...before.parentFields.map((_field) => _field.key).reverse(),
+          before.key,
+        ];
+        const afterKeyPath = [
+          ...after.parentFields.map((_field) => _field.key).reverse(),
+          after.key,
+        ];
+
+        // traverse rename refs inside form item 'name'
+        traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
+          if (isRefMatch(_v, beforeKeyPath)) {
+            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+            form.setValueIn(_drilldownName, _v);
+          }
+        });
+      });
+
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];
+
+/**
+ * If ref value's keyPath is the under as targetKeyPath
+ * @param value
+ * @param targetKeyPath
+ * @returns
+ */
+function isRefMatch(value: IFlowRefValue, targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+}
+
+/**
+ * If value is ref
+ * @param value
+ * @returns
+ */
+function isRef(value: any): value is IFlowRefValue {
+  return (
+    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
+  );
+}
+
+/**
+ * Traverse value to find ref
+ * @param value
+ * @param options
+ * @returns
+ */
+function traverseRef(name: string, value: any, cb: (name: string, _v: IFlowRefValue) => void) {
+  if (isObject(value)) {
+    if (isRef(value)) {
+      cb(name, value);
+      return;
+    }
+
+    Object.entries(value).forEach(([_key, _value]) => {
+      traverseRef(`${name}.${_key}`, _value, cb);
+    });
+    return;
+  }
+
+  if (isArray(value)) {
+    value.forEach((_value, idx) => {
+      traverseRef(`${name}[${idx}]`, _value, cb);
+    });
+    return;
+  }
+
+  return;
+}

package/src/effects/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './provide-batch-input';
+export * from './provide-batch-outputs';
+export * from './auto-rename-ref';
+export * from './provide-json-schema-outputs';
+export * from './sync-variable-title';

package/src/effects/provide-batch-input/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-input",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

package/src/effects/provide-batch-input/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: IFlowRefValue, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: [
+          ASTFactory.createProperty({
+            key: 'item',
+            initializer: ASTFactory.createEnumerateExpression({
+              enumerateFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          }),
+          ASTFactory.createProperty({
+            key: 'index',
+            type: ASTFactory.createNumber(),
+          }),
+        ],
+      }),
+    }),
+  ],
+});

package/src/effects/provide-batch-outputs/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "provide-batch-outputs",
+  "depMaterials": ["flow-value"],
+  "depPackages": []
+}

package/src/effects/provide-batch-outputs/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: Record<string, IFlowRefValue>, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: Object.entries(value).map(([_key, value]) =>
+          ASTFactory.createProperty({
+            key: _key,
+            initializer: ASTFactory.createWrapArrayExpression({
+              wrapFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          })
+        ),
+      }),
+    }),
+  ],
+});

package/src/effects/provide-json-schema-outputs/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "provide-json-schema-outputs",
+  "depMaterials": [
+    "typings/json-schema",
+    "utils/json-schema"
+  ],
+  "depPackages": []
+}

package/src/effects/provide-json-schema-outputs/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { JsonSchemaUtils } from '../../utils';
+import { IJsonSchema } from '../../typings';
+
+export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: IJsonSchema, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title') || ctx.node.id,
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: JsonSchemaUtils.schemaToAST(value),
+    }),
+  ],
+});

package/src/effects/sync-variable-title/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "sync-variable-title",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/effects/sync-variable-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  FlowNodeRegistry,
+  FlowNodeVariableData,
+} from '@flowgram.ai/editor';
+
+export const syncVariableTitle: EffectOptions[] = [
+  {
+    event: DataEvent.onValueChange,
+    effect: (({ value, context }) => {
+      context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
+        _scope.output.variables.forEach((_var) => {
+          _var.updateMeta({
+            title: value || context.node.id,
+            icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+          });
+        });
+      });
+    }) as Effect,
+  },
+];

package/src/form-plugins/batch-outputs-plugin/config.json

@@ -0,0 +1,7 @@
+{
+  "name": "batch-outputs-plugin",
+  "depMaterials": [
+    "flow-value"
+  ],
+  "depPackages": []
+}

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  ASTFactory,
+  createEffectFromVariableProvider,
+  defineFormPluginCreator,
+  FlowNodeRegistry,
+  getNodeForm,
+  getNodePrivateScope,
+  getNodeScope,
+  ScopeChainTransformService,
+  type EffectOptions,
+  type FormPluginCreator,
+  FlowNodeScopeType,
+} from '@flowgram.ai/editor';
+
+import { IFlowRefValue } from '../../typings';
+
+export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: Record<string, IFlowRefValue>, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: Object.entries(value).map(([_key, value]) =>
+          ASTFactory.createProperty({
+            key: _key,
+            initializer: ASTFactory.createWrapArrayExpression({
+              wrapFor: ASTFactory.createKeyPathExpression({
+                keyPath: value?.content || [],
+              }),
+            }),
+          })
+        ),
+      }),
+    }),
+  ],
+});
+
+/**
+ * Free Layout only right now
+ */
+export const createBatchOutputsFormPlugin: FormPluginCreator<{ outputKey: string }> =
+  defineFormPluginCreator({
+    name: 'batch-outputs-plugin',
+    onSetupFormMeta({ mergeEffect }, { outputKey }) {
+      mergeEffect({
+        [outputKey]: provideBatchOutputsEffect,
+      });
+    },
+    onInit(ctx, { outputKey }) {
+      const chainTransformService = ctx.node.getService(ScopeChainTransformService);
+
+      const batchNodeType = ctx.node.flowNodeType;
+
+      const transformerId = `${batchNodeType}-outputs`;
+
+      if (chainTransformService.hasTransformer(transformerId)) {
+        return;
+      }
+
+      chainTransformService.registerTransformer(transformerId, {
+        transformCovers: (covers, ctx) => {
+          const node = ctx.scope.meta?.node;
+
+          // Child Node's variable can cover parent
+          if (node?.parent?.flowNodeType === batchNodeType) {
+            return [...covers, getNodeScope(node.parent)];
+          }
+
+          return covers;
+        },
+        transformDeps(scopes, ctx) {
+          const scopeMeta = ctx.scope.meta;
+
+          if (scopeMeta?.type === FlowNodeScopeType.private) {
+            return scopes;
+          }
+
+          const node = scopeMeta?.node;
+
+          // Public of Loop Node depends on child Node
+          if (node?.flowNodeType === batchNodeType) {
+            // Get all child blocks
+            const childBlocks = node.blocks;
+
+            // public scope of all child blocks
+            return [
+              getNodePrivateScope(node),
+              ...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
+            ];
+          }
+
+          return scopes;
+        },
+      });
+    },
+  });

package/src/form-plugins/index.ts

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

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './components';
+export * from './effects';
+export * from './utils';
+export * from './typings';
+export * from './form-plugins';

package/src/typings/flow-value/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "flow-value",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/typings/flow-value/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export interface IFlowConstantValue {
+  type: 'constant';
+  content?: string | number | boolean;
+}
+
+export interface IFlowRefValue {
+  type: 'ref';
+  content?: string[];
+}
+
+export interface IFlowExpressionValue {
+  type: 'expression';
+  content?: string;
+}
+
+export interface IFlowTemplateValue {
+  type: 'template';
+  content?: string;
+}
+
+export type IFlowValue =
+  | IFlowConstantValue
+  | IFlowRefValue
+  | IFlowExpressionValue
+  | IFlowTemplateValue;
+
+export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;

package/src/typings/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './flow-value';
+export * from './json-schema';

package/src/typings/json-schema/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "json-schema",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/typings/json-schema/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export type JsonSchemaBasicType =
+  | 'boolean'
+  | 'string'
+  | 'integer'
+  | 'number'
+  | 'object'
+  | 'array'
+  | 'map';
+
+export interface IJsonSchema<T = string> {
+  type?: T;
+  default?: any;
+  title?: string;
+  description?: string;
+  enum?: (string | number)[];
+  properties?: Record<string, IJsonSchema<T>>;
+  additionalProperties?: IJsonSchema<T>;
+  items?: IJsonSchema<T>;
+  required?: string[];
+  $ref?: string;
+  extra?: {
+    index?: number;
+    // Used in BaseType.isEqualWithJSONSchema, the type comparison will be weak
+    weak?: boolean;
+    // Set the render component
+    formComponent?: string;
+    [key: string]: any;
+  };
+}
+
+export type IBasicJsonSchema = IJsonSchema<JsonSchemaBasicType>;

package/src/utils/format-legacy-refs/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "format-legacy-ref",
+  "depMaterials": [],
+  "depPackages": []
+}