feat(core): 新增事件处理前后的钩子函数配置

packages/core/src/App.ts

@@ -20,14 +20,8 @@ import { EventEmitter } from 'events';
 
 import { isEmpty } from 'lodash-es';
 
-import {
-  createDataSourceManager,
-  type DataSource,
-  DataSourceManager,
-  type DataSourceManagerData,
-  ObservedDataClass,
-} from '@tmagic/data-source';
-import type { CodeBlockDSL, DataSourceSchema, Id, JsEngine, MApp, RequestFunction } from '@tmagic/schema';
+import { createDataSourceManager, DataSourceManager, type DataSourceManagerData } from '@tmagic/data-source';
+import type { CodeBlockDSL, Id, JsEngine, MApp, RequestFunction } from '@tmagic/schema';
 
 import Env from './Env';
 import EventHelper from './EventHelper';
@@ -35,34 +29,9 @@ import Flexible from './Flexible';
 import FlowState from './FlowState';
 import Node from './Node';
 import Page from './Page';
+import { AppOptionsConfig, ErrorHandler } from './type';
 import { transformStyle as defaultTransformStyle } from './utils';
 
-export type ErrorHandler = (
-  err: Error,
-  node: DataSource<DataSourceSchema> | Node | undefined,
-  info: Record<string, any>,
-) => void;
-
-export interface AppOptionsConfig {
-  ua?: string;
-  env?: Env;
-  config?: MApp;
-  platform?: 'editor' | 'mobile' | 'tv' | 'pc';
-  jsEngine?: JsEngine;
-  designWidth?: number;
-  curPage?: Id;
-  useMock?: boolean;
-  disabledFlexible?: boolean;
-  pageFragmentContainerType?: string | string[];
-  iteratorContainerType?: string | string[];
-  transformStyle?: (style: Record<string, any>) => Record<string, any>;
-  request?: RequestFunction;
-  DataSourceObservedData?: ObservedDataClass;
-  dataSourceManagerInitialData?: DataSourceManagerData;
-  nodeStoreInitialData?: () => any;
-  errorHandler?: ErrorHandler;
-}
-
 class App extends EventEmitter {
   [x: string]: any;
   static nodeClassMap = new Map<string, typeof Node>();
@@ -134,7 +103,11 @@ class App extends EventEmitter {
     }
 
     if (this.platform !== 'editor') {
-      this.eventHelper = new EventHelper({ app: this });
+      this.eventHelper = new EventHelper({
+        app: this,
+        beforeEventHandler: options.beforeEventHandler,
+        afterEventHandler: options.afterEventHandler,
+      });
     }
 
     this.transformStyle =

packages/core/src/EventHelper.ts

@@ -37,16 +37,29 @@ import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 import type { default as TMagicApp } from './App';
 import FlowState from './FlowState';
 import type { default as TMagicNode } from './Node';
+import { AfterEventHandler, BeforeEventHandler } from './type';
 
 export default class EventHelper extends EventEmitter {
   public app: TMagicApp;
 
   private nodeEventList = new Map<(fromCpt: TMagicNode, ...args: any[]) => void, symbol>();
   private dataSourceEventList = new Map<string, Map<string, (...args: any[]) => void>>();
+  private beforeEventHandler?: BeforeEventHandler;
+  private afterEventHandler?: AfterEventHandler;
 
-  constructor({ app }: { app: TMagicApp }) {
+  constructor({
+    app,
+    beforeEventHandler,
+    afterEventHandler,
+  }: {
+    app: TMagicApp;
+    beforeEventHandler?: BeforeEventHandler;
+    afterEventHandler?: AfterEventHandler;
+  }) {
     super();
 
+    this.beforeEventHandler = beforeEventHandler;
+    this.afterEventHandler = afterEventHandler;
     this.app = app;
   }
 
@@ -59,6 +72,10 @@ export default class EventHelper extends EventEmitter {
 
   public bindNodeEvents(node: TMagicNode) {
     node.events?.forEach((event, index) => {
+      if (!event.name) {
+        return;
+      }
+
       let eventNameKey = `${event.name}_${node.data.id}`;
 
       // 页面片容器可以配置页面片内组件的事件，形式为“${nodeId}.${eventName}”
@@ -150,6 +167,10 @@ export default class EventHelper extends EventEmitter {
   private async eventHandler(config: EventConfig | number, fromCpt: TMagicNode | DataSource | undefined, args: any[]) {
     const eventConfig = typeof config === 'number' ? (fromCpt as TMagicNode).events[config] : config;
 
+    if (typeof this.beforeEventHandler === 'function') {
+      this.beforeEventHandler({ eventConfig, source: fromCpt, args });
+    }
+
     if (has(eventConfig, 'actions')) {
       // EventConfig类型
       const flowState = new FlowState();
@@ -177,6 +198,10 @@ export default class EventHelper extends EventEmitter {
         }
       }
     }
+
+    if (typeof this.afterEventHandler === 'function') {
+      this.afterEventHandler({ eventConfig, source: fromCpt, args });
+    }
   }
 
   private async actionHandler(

packages/core/src/index.ts

@@ -28,7 +28,7 @@ export * from '@tmagic/utils';
 export { default as EventHelper } from './EventHelper';
 export * from './utils';
 
-export { type AppOptionsConfig } from './App';
+export * from './type';
 export { default as Env } from './Env';
 export { default as Page } from './Page';
 export { default as Node } from './Node';

packages/core/src/type.ts

@@ -0,0 +1,45 @@
+import type { DataSource, DataSourceManagerData, ObservedDataClass } from '@tmagic/data-source';
+import type { DataSourceSchema, EventConfig, Id, JsEngine, MApp, RequestFunction } from '@tmagic/schema';
+
+import type Env from './Env';
+import type TMagicNode from './Node';
+
+export type ErrorHandler = (
+  err: Error,
+  node: DataSource<DataSourceSchema> | TMagicNode | undefined,
+  info: Record<string, any>,
+) => void;
+
+export interface AppOptionsConfig {
+  ua?: string;
+  env?: Env;
+  config?: MApp;
+  platform?: 'editor' | 'mobile' | 'tv' | 'pc';
+  jsEngine?: JsEngine;
+  designWidth?: number;
+  curPage?: Id;
+  useMock?: boolean;
+  disabledFlexible?: boolean;
+  pageFragmentContainerType?: string | string[];
+  iteratorContainerType?: string | string[];
+  transformStyle?: (style: Record<string, any>) => Record<string, any>;
+  request?: RequestFunction;
+  DataSourceObservedData?: ObservedDataClass;
+  dataSourceManagerInitialData?: DataSourceManagerData;
+  nodeStoreInitialData?: () => any;
+  errorHandler?: ErrorHandler;
+  beforeEventHandler?: BeforeEventHandler;
+  afterEventHandler?: AfterEventHandler;
+}
+
+export type BeforeEventHandler = (args: {
+  eventConfig: EventConfig;
+  source: TMagicNode | DataSource | undefined;
+  args: any[];
+}) => void;
+
+export type AfterEventHandler = (args: {
+  eventConfig: EventConfig;
+  source: TMagicNode | DataSource | undefined;
+  args: any[];
+}) => void;