@flowgram.ai/form-materials 0.2.15 → 0.2.17

package/bin/materials.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { fileURLToPath } from 'url';
 import path from 'path';
 import fs from 'fs';
@@ -17,7 +22,7 @@ export interface Material {
   [key: string]: any; // For other properties from config.json
 }
 
-const _types: string[] = ['components', 'effects', 'utils', 'typings'];
+const _types: string[] = ['components', 'effects', 'utils', 'typings', 'form-plugins'];
 
 export function listAllMaterials(): Material[] {
   const _materials: Material[] = [];

package/bin/project.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import path from 'path';
 import fs from 'fs';
 import { execSync } from 'child_process';

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 
 // src/components/variable-selector/use-variable-tree.tsx
 import React2, { useCallback } from "react";
-import { useScopeAvailable, ASTMatch as ASTMatch2 } from "@flowgram.ai/editor";
+import { ASTMatch as ASTMatch2, useAvailableVariables } from "@flowgram.ai/editor";
 import { Icon as Icon2 } from "@douyinfe/semi-ui";
 
 // src/components/type-selector/constants.tsx
@@ -472,7 +472,7 @@ var JsonSchemaUtils;
       return {
         type: "object",
         properties: drilldown ? Object.fromEntries(
-          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
+          typeAST.properties.map((property) => [property.key, astToSchema(property.type)])
         ) : {}
       };
     }
@@ -512,7 +512,7 @@ var JsonSchemaUtils;
 // src/components/variable-selector/use-variable-tree.tsx
 function useVariableTree(params) {
   const { includeSchema, excludeSchema } = params;
-  const available = useScopeAvailable();
+  const variables = useAvailableVariables();
   const getVariableTypeIcon = useCallback((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
@@ -563,7 +563,7 @@ function useVariableTree(params) {
       rootMeta: parentFields[0]?.meta
     };
   };
-  return [...available.variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
+  return [...variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
 }
 
 // src/components/variable-selector/styles.tsx
@@ -1527,7 +1527,7 @@ var UIValues = styled4.div`
 
 // src/components/condition-row/hooks/useRule.ts
 import { useMemo as useMemo7 } from "react";
-import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
+import { useScopeAvailable } from "@flowgram.ai/editor";
 
 // src/components/condition-row/constants.ts
 var rules = {
@@ -1715,7 +1715,7 @@ function formatNewRefToLegacyRef(value) {
 
 // src/components/condition-row/hooks/useRule.ts
 function useRule(left) {
-  const available = useScopeAvailable2();
+  const available = useScopeAvailable();
   const variable = useMemo7(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
@@ -1795,6 +1795,128 @@ function ConditionRow({ style, value, onChange, readonly }) {
   ) : /* @__PURE__ */ React13.createElement(Input3, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
 }
 
+// src/components/batch-outputs/index.tsx
+import React14 from "react";
+import { Button as Button4, Input as Input4 } from "@douyinfe/semi-ui";
+import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
+
+// src/components/batch-outputs/use-list.ts
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { difference } from "lodash";
+var _id2 = 0;
+function genId2() {
+  return _id2++;
+}
+function useList({ value, onChange }) {
+  const [list, setList] = useState5([]);
+  useEffect3(() => {
+    setList((_prevList) => {
+      const newKeys = Object.keys(value || {});
+      const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
+      const addKeys = difference(newKeys, oldKeys);
+      return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
+        id: item.id,
+        key: item.key,
+        value: item.key ? value?.[item.key] : void 0
+      })).concat(
+        addKeys.map((_key) => ({
+          id: genId2(),
+          key: _key,
+          value: value?.[_key]
+        }))
+      );
+    });
+  }, [value]);
+  const add = () => {
+    setList((prevList) => [
+      ...prevList,
+      {
+        id: genId2()
+      }
+    ]);
+  };
+  const update = (item) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === item.id) {
+          return item;
+        }
+        return _item;
+      });
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item2) => item2.key).map((item2) => [item2.key, item2.value])
+        )
+      );
+      return nextList;
+    });
+  };
+  const remove = (itemId) => {
+    setList((prevList) => {
+      const nextList = prevList.filter((_item) => _item.id !== itemId);
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
+        )
+      );
+      return nextList;
+    });
+  };
+  return { list, add, update, remove };
+}
+
+// src/components/batch-outputs/styles.tsx
+import styled5 from "styled-components";
+var UIRows = styled5.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+var UIRow2 = styled5.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+// src/components/batch-outputs/index.tsx
+function BatchOutputs(props) {
+  const { readonly, style } = props;
+  const { list, add, update, remove } = useList(props);
+  return /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ React14.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ React14.createElement(
+    Input4,
+    {
+      style: { width: 100 },
+      disabled: readonly,
+      size: "small",
+      value: item.key,
+      onChange: (v) => update({ ...item, key: v })
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    VariableSelector,
+    {
+      style: { flexGrow: 1 },
+      readonly,
+      value: item.value?.content,
+      onChange: (v) => update({
+        ...item,
+        value: {
+          type: "ref",
+          content: v
+        }
+      })
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    Button4,
+    {
+      disabled: readonly,
+      icon: /* @__PURE__ */ React14.createElement(IconDelete, null),
+      size: "small",
+      onClick: () => remove(item.id)
+    }
+  )))), /* @__PURE__ */ React14.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React14.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory as ASTFactory2,
@@ -1837,7 +1959,6 @@ import {
   getNodeForm as getNodeForm2
 } from "@flowgram.ai/editor";
 var provideBatchOutputsEffect = createEffectFromVariableProvider2({
-  private: true,
   parse: (value, ctx) => [
     ASTFactory3.createVariableDeclaration({
       key: `${ctx.node.id}`,
@@ -1960,8 +2081,84 @@ var syncVariableTitle = [
     }
   }
 ];
+
+// src/form-plugins/batch-outputs-plugin/index.ts
+import {
+  ASTFactory as ASTFactory5,
+  createEffectFromVariableProvider as createEffectFromVariableProvider4,
+  defineFormPluginCreator,
+  getNodeForm as getNodeForm4,
+  getNodePrivateScope,
+  getNodeScope,
+  ScopeChainTransformService,
+  FlowNodeScopeType
+} from "@flowgram.ai/editor";
+var provideBatchOutputsEffect2 = createEffectFromVariableProvider4({
+  parse: (value, ctx) => [
+    ASTFactory5.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm4(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: ASTFactory5.createObject({
+        properties: Object.entries(value).map(
+          ([_key, value2]) => ASTFactory5.createProperty({
+            key: _key,
+            initializer: ASTFactory5.createWrapArrayExpression({
+              wrapFor: ASTFactory5.createKeyPathExpression({
+                keyPath: value2?.content || []
+              })
+            })
+          })
+        )
+      })
+    })
+  ]
+});
+var createBatchOutputsFormPlugin = defineFormPluginCreator({
+  name: "batch-outputs-plugin",
+  onSetupFormMeta({ mergeEffect }, { outputKey }) {
+    mergeEffect({
+      [outputKey]: provideBatchOutputsEffect2
+    });
+  },
+  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, ctx2) => {
+        const node = ctx2.scope.meta?.node;
+        if (node?.parent?.flowNodeType === batchNodeType) {
+          return [...covers, getNodeScope(node.parent)];
+        }
+        return covers;
+      },
+      transformDeps(scopes, ctx2) {
+        const scopeMeta = ctx2.scope.meta;
+        if (scopeMeta?.type === FlowNodeScopeType.private) {
+          return scopes;
+        }
+        const node = scopeMeta?.node;
+        if (node?.flowNodeType === batchNodeType) {
+          const childBlocks = node.blocks;
+          return [
+            getNodePrivateScope(node),
+            ...childBlocks.map((_childBlock) => getNodeScope(_childBlock))
+          ];
+        }
+        return scopes;
+      }
+    });
+  }
+});
 export {
   ArrayIcons,
+  BatchOutputs,
   BatchVariableSelector,
   ConditionRow,
   ConstantInput,
@@ -1972,6 +2169,7 @@ export {
   VariableSelector,
   VariableTypeIcons,
   autoRenameRefEffect,
+  createBatchOutputsFormPlugin,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef,
@@ -1984,6 +2182,7 @@ export {
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
-  syncVariableTitle
+  syncVariableTitle,
+  useVariableTree
 };
 //# sourceMappingURL=index.js.map