feat(material): optimize inputs-values-type (#886)

* feat: optimize inputs-values-type

* fix: eslint

* fix: ts check

apps/demo-free-layout/src/app.tsx

@@ -4,9 +4,15 @@
  */
 
 import { createRoot } from 'react-dom/client';
+import { unstableSetCreateRoot } from '@flowgram.ai/form-materials';
 
 import { Editor } from './editor';
 
+/**
+ * React 18/19 polyfill for form-materials
+ */
+unstableSetCreateRoot(createRoot);
+
 const app = createRoot(document.getElementById('root')!);
 
 app.render(<Editor />);

packages/materials/form-materials/src/components/coze-editor-extensions/extensions/inputs-tree.tsx

@@ -24,7 +24,8 @@ import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree, Popover } from '@douyinfe/semi-ui';
 
-import { IFlowValue, FlowValueUtils } from '@/shared';
+import { IInputsValues } from '@/shared/flow-value/types';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -32,7 +33,7 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: any;
+  inputsValues: IInputsValues;
   onSelect: (v: string) => void;
 }) {
   const available = useScopeAvailable();
@@ -130,7 +131,7 @@ export function InputsTree({
   inputsValues,
   triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: IInputsValues;
   triggerCharacters?: string[];
 }) {
   const [posKey, setPosKey] = useState('');

packages/materials/form-materials/src/components/display-inputs-values/index.tsx

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react';
 import { isPlainObject } from 'lodash-es';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IInputsValues } from '@/shared/flow-value';
 import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
@@ -15,7 +16,7 @@ import { DisplayInputsWrapper } from './styles';
 import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: any;
+  value?: IInputsValues;
   showIconInTree?: boolean;
 }
 

packages/materials/form-materials/src/components/inputs-values-tree/index.tsx

@@ -9,7 +9,7 @@ import { I18n } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { FlowValueUtils } from '@/shared';
+import { FlowValueUtils, IFlowValue, IInputsValues } from '@/shared';
 import { useObjectList } from '@/hooks';
 
 import { PropsType } from './types';
@@ -19,9 +19,11 @@ import { InputValueRow } from './row';
 export function InputsValuesTree(props: PropsType) {
   const { value, onChange, readonly, hasError, constantProps } = props;
 
-  const { list, updateKey, updateValue, remove, add } = useObjectList({
+  const { list, updateKey, updateValue, remove, add } = useObjectList<
+    IInputsValues | IFlowValue | undefined
+  >({
     value,
-    onChange,
+    onChange: (v) => onChange?.(v as IInputsValues),
     sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
   });
 

packages/materials/form-materials/src/components/inputs-values-tree/types.ts

@@ -5,11 +5,12 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
+import { IInputsValues } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
-  value?: any;
-  onChange: (value?: any) => void;
+  value?: IInputsValues;
+  onChange: (value?: IInputsValues) => void;
   readonly?: boolean;
   hasError?: boolean;
   schema?: IJsonSchema;

packages/materials/form-materials/src/components/prompt-editor-with-inputs/editor.tsx

@@ -5,11 +5,12 @@
 
 import React from 'react';
 
+import type { IInputsValues } from '@/shared/flow-value';
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
 import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
-  inputsValues: any;
+  inputsValues: IInputsValues;
 }
 
 export function PromptEditorWithInputs({

packages/materials/form-materials/src/index.ts

@@ -115,6 +115,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
   type IPolyfillRoot,
   unstableSetCreateRoot,
   withSuspense,

packages/materials/form-materials/src/shared/flow-value/index.ts

@@ -13,4 +13,5 @@ export {
   type IFlowExpressionValue,
   type IFlowTemplateValue,
   type IFlowConstantRefValue,
+  type IInputsValues,
 } from './types';

packages/materials/form-materials/src/shared/flow-value/types.ts

@@ -43,3 +43,7 @@ export type IFlowValue =
   | IFlowTemplateValue;
 
 export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
+
+export interface IInputsValues {
+  [key: string]: IInputsValues | IFlowValue | undefined;
+}

packages/materials/form-materials/src/shared/index.ts

@@ -13,6 +13,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
 } from './flow-value';
 export {
   formatLegacyRefOnInit,

packages/plugins/node-variable-plugin/src/form-v2/create-provider-effect.ts

@@ -26,14 +26,14 @@ export function createEffectFromVariableProvider(
     return variableData.public;
   };
 
-  const transformValueToAST: Effect = ({ value, context }) => {
+  const transformValueToAST: Effect = ({ value, name, context }) => {
     if (!context) {
       return;
     }
     const { node } = context;
     const scope = getScope(node);
 
-    scope.ast.set(options.namespace || '', {
+    scope.ast.set(options.namespace || name || '', {
       kind: ASTKind.VariableDeclarationList,
       declarations: options.parse(value, {
         node,
@@ -56,12 +56,11 @@ export function createEffectFromVariableProvider(
           options,
         });
 
-        if (disposable) {
-          // 作用域销毁时同时销毁该监听
-          scope.toDispose.push(disposable);
-        }
-
         transformValueToAST(params);
+
+        return () => {
+          disposable?.dispose();
+        };
       }) as Effect,
     },
     {

packages/plugins/node-variable-plugin/src/types.ts

@@ -20,8 +20,6 @@ export interface VariableAbilityCommonContext {
 export interface VariableAbilityInitCtx extends VariableAbilityCommonContext {}
 
 export interface VariableAbilityOptions {
-  // 变量提供能力可复用
-  key?: string;
   /**
    * @deprecated use scope: 'private'
    */
@@ -40,7 +38,10 @@ export interface VariableAbilityParseContext extends VariableAbilityCommonContex
 
 export interface VariableProviderAbilityOptions<V = any> extends VariableAbilityOptions {
   // 解析变量协议
-  parse: (v: V, ctx: VariableAbilityParseContext) => VariableDeclarationJSON[];
+  parse: (
+    v: V,
+    ctx: VariableAbilityParseContext
+  ) => VariableDeclarationJSON | VariableDeclarationJSON[];
 }
 
 export interface VariableConsumerAbilityOptions<V = any> extends VariableAbilityOptions {