feat: form node-context add clientContext (bytedance#363)

* feat: form node-context add clientContext

* fix: errorRender add clientContext props

Author: xiamidaxia

packages/node-engine/form-core/src/client/node-render.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect } from 'react';
 
-import { PlaygroundContext, useRefresh, useService } from '@flowgram.ai/core';
+import { PlaygroundContext, useRefresh, useService, PluginContext } from '@flowgram.ai/core';
 
 import { NodeEngineReactContext } from '../node-react/context/node-engine-react-context';
 import { useNodeEngineContext } from '../node-react';
@@ -18,6 +18,7 @@ const PureNodeRender = ({ node }: NodeRenderProps) => {
   const isNodeError = !!getNodeError(node);
   const isFormReady = isNodeFormReady(node);
   const playgroundContext = useService<PlaygroundContext>(PlaygroundContext);
+  const clientContext = useService<PluginContext>(PluginContext);
   const nodeManager = useService<NodeManager>(NodeManager);
   const nodeFormRender = nodeManager.getPluginRender(PLUGIN_KEY.FORM);
   const nodeErrorRender = nodeManager.getPluginRender(PLUGIN_KEY.ERROR);
@@ -40,13 +41,13 @@ const PureNodeRender = ({ node }: NodeRenderProps) => {
 
   const renderContent = useCallback(() => {
     if (isNodeError) {
-      return nodeErrorRender!({ node, playgroundContext });
+      return nodeErrorRender!({ node, playgroundContext, clientContext });
     }
     if (!formModel.formMeta) {
       return null;
     }
     if (isFormReady) {
-      return nodeFormRender!({ node, playgroundContext });
+      return nodeFormRender!({ node, playgroundContext, clientContext });
     }
     return nodePlaceholderRender?.({ node, playgroundContext }) || null;
   }, [

packages/node-engine/form-core/src/error/renders/error-render.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 
 import { FlowNodeEntity } from '@flowgram.ai/document';
-import { PlaygroundContext, useRefresh, useService } from '@flowgram.ai/core';
+import { PlaygroundContext, useRefresh, useService, PluginContext } from '@flowgram.ai/core';
 
 import { FlowNodeErrorData } from '../flow-node-error-data';
 import { MATERIAL_KEY, NodeManager, NodePluginRender } from '../../node';
@@ -10,9 +10,10 @@ import { defaultErrorRender } from './default-error-render';
 interface NodeRenderProps {
   node: FlowNodeEntity;
   playgroundContext: PlaygroundContext;
+  clientContext: PluginContext;
 }
 
-export const ErrorRender = ({ node, playgroundContext }: NodeRenderProps) => {
+export const ErrorRender = ({ node, playgroundContext, clientContext }: NodeRenderProps) => {
   const refresh = useRefresh();
   const nodeErrorData = node.getData<FlowNodeErrorData>(FlowNodeErrorData);
   const nodeError = nodeErrorData.getError();
@@ -23,14 +24,14 @@ export const ErrorRender = ({ node, playgroundContext }: NodeRenderProps) => {
     if (!nodeErrorRender) {
       return defaultErrorRender({
         error: nodeError,
-        context: { node, playgroundContext },
+        context: { node, playgroundContext, clientContext },
       });
     }
     return nodeErrorRender({
       error: nodeError,
-      context: { node, playgroundContext },
+      context: { node, playgroundContext, clientContext },
     });
-  }, [nodeError, node, playgroundContext]);
+  }, [nodeError, node, playgroundContext, clientContext]);
 
   useEffect(() => {
     const disposable = nodeErrorData.onDataChange(() => {

packages/node-engine/form-core/src/node/types.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import { FlowNodeEntity } from '@flowgram.ai/document';
-import { PlaygroundContext } from '@flowgram.ai/core';
+import { PlaygroundContext, PluginContext } from '@flowgram.ai/core';
 
 export interface NodeContext {
   node: FlowNodeEntity;
   playgroundContext: PlaygroundContext;
+  clientContext: PluginContext & Record<string, any>;
 }
 
 export type Render<T = any> = (props: T) => any;
@@ -19,5 +20,5 @@ export interface NodeRenderProps {
 }
 
 export type NodeRenderHoc = (
-  Component: React.JSXElementConstructor<NodeRenderProps>,
+  Component: React.JSXElementConstructor<NodeRenderProps>
 ) => React.JSXElementConstructor<NodeRenderProps>;

packages/node-engine/node/src/form-model-v2.ts

@@ -24,7 +24,7 @@ import {
   toForm,
 } from '@flowgram.ai/form';
 import { FlowNodeEntity } from '@flowgram.ai/document';
-import { PlaygroundContext } from '@flowgram.ai/core';
+import { PlaygroundContext, PluginContext } from '@flowgram.ai/core';
 
 import {
   convertGlobPath,
@@ -175,6 +175,7 @@ export class FormModelV2 extends FormModel implements Disposable {
     return {
       node: this.node,
       playgroundContext: this.node.getService(PlaygroundContext),
+      clientContext: this.node.getService(PluginContext),
     };
   }