From 59004add6d4ff37b239f94681ca57c8452f7dcd5 Mon Sep 17 00:00:00 2001 From: xzdry Date: Fri, 17 Mar 2023 10:40:49 +0800 Subject: [PATCH] feat(Runtime): add debug info --- .../ImplWrapper/hooks/useGlobalHandlerMap.ts | 10 +++++++++- .../ImplWrapper/hooks/useRuntimeFunctions.ts | 9 ++++++++- packages/runtime/src/index.ts | 7 +++++++ .../runtime/src/services/UtilMethodManager.ts | 15 +++++++++++++++ packages/runtime/src/services/apiService.ts | 7 +++++++ packages/runtime/src/services/debug.ts | 4 ++++ 6 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 packages/runtime/src/services/debug.ts diff --git a/packages/runtime/src/components/_internal/ImplWrapper/hooks/useGlobalHandlerMap.ts b/packages/runtime/src/components/_internal/ImplWrapper/hooks/useGlobalHandlerMap.ts index d5b1d6a7..ab4f738b 100644 --- a/packages/runtime/src/components/_internal/ImplWrapper/hooks/useGlobalHandlerMap.ts +++ b/packages/runtime/src/components/_internal/ImplWrapper/hooks/useGlobalHandlerMap.ts @@ -1,11 +1,11 @@ import { useEffect } from 'react'; +import { DebugLoggerType } from '../../../../services/debug'; import { ImplWrapperProps } from '../../../../types'; export function useGlobalHandlerMap(props: ImplWrapperProps) { const { component: c, services } = props; const { apiService, globalHandlerMap } = services; - useEffect(() => { if (!globalHandlerMap.has(c.id)) { globalHandlerMap.set(c.id, {}); @@ -21,6 +21,14 @@ export function useGlobalHandlerMap(props: ImplWrapperProps) { // maybe log? return; } + // Logging event-triggered debug messages + apiService.send('debug', { + type: DebugLoggerType.TRIGGER_EVENT, + componentId: s.componentId, + name: s.name, + parameters: s.parameters, + methodType: 'uiMethod', + }); handlerMap[s.name](s.parameters); }; diff --git a/packages/runtime/src/components/_internal/ImplWrapper/hooks/useRuntimeFunctions.ts b/packages/runtime/src/components/_internal/ImplWrapper/hooks/useRuntimeFunctions.ts index 50ad0fa6..6d1d73d4 100644 --- a/packages/runtime/src/components/_internal/ImplWrapper/hooks/useRuntimeFunctions.ts +++ b/packages/runtime/src/components/_internal/ImplWrapper/hooks/useRuntimeFunctions.ts @@ -3,6 +3,7 @@ import { RuntimeTraitSchema } from '@sunmao-ui/core'; import { ImplWrapperProps } from '../../../../types'; import { merge } from 'lodash'; import { HandlerMap } from '../../../../services/handler'; +import { DebugLoggerType } from '../../../../services/debug'; export function useRuntimeFunctions(props: ImplWrapperProps) { const { component: c, services, slotContext } = props; @@ -12,8 +13,14 @@ export function useRuntimeFunctions(props: ImplWrapperProps) { const mergeState = useCallback( (partial: any) => { stateManager.store[c.id] = { ...stateManager.store[c.id], ...partial }; + // Logging state change debug messages + services.apiService.send('debug', { + type: DebugLoggerType.MERGE_STATE, + id: c.id, + param: partial, + }); }, - [c.id, stateManager.store] + [c.id, services.apiService, stateManager.store] ); const subscribeMethods = useCallback( (map: HandlerMap) => { diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts index a1b2ebbb..eb16fcb6 100644 --- a/packages/runtime/src/index.ts +++ b/packages/runtime/src/index.ts @@ -19,6 +19,9 @@ export type SunmaoUIRuntimeProps = { dependencies?: Record; hooks?: AppHooks; isInEditor?: boolean; + debugHandler?: { + onDebug: (currentState: Record, message: Record) => void; + }; }; export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) { @@ -43,6 +46,10 @@ export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) { registry.installLib(lib); }); + apiService.on('debug', params => { + props.debugHandler?.onDebug(stateManager.store, params); + }); + return { App: genApp( { diff --git a/packages/runtime/src/services/UtilMethodManager.ts b/packages/runtime/src/services/UtilMethodManager.ts index cd5cb81f..8c19b897 100644 --- a/packages/runtime/src/services/UtilMethodManager.ts +++ b/packages/runtime/src/services/UtilMethodManager.ts @@ -1,6 +1,7 @@ import { GLOBAL_MODULE_ID, GLOBAL_UTIL_METHOD_ID } from '../constants'; import { ApiService } from './apiService'; import { ImplementedUtilMethod, UIServices } from '../types'; +import { DebugLoggerType } from './debug'; export class UtilMethodManager { constructor(private apiService: ApiService) { @@ -13,6 +14,13 @@ export class UtilMethodManager { componentId === GLOBAL_UTIL_METHOD_ID && name === `${utilMethod.version}/${utilMethod.metadata.name}` ) { + this.apiService.send('debug', { + type: DebugLoggerType.TRIGGER_EVENT, + id: componentId, + methodType: 'uiMethod', + name, + parameters, + }); utilMethod.impl(parameters, services); } }); @@ -23,6 +31,13 @@ export class UtilMethodManager { switch (componentId) { // handler as module event case GLOBAL_MODULE_ID: + this.apiService.send('debug', { + type: DebugLoggerType.TRIGGER_EVENT, + id: componentId, + methodType: 'uiMethod', + name, + parameters, + }); this.apiService.send('moduleEvent', { fromId: parameters.moduleId, eventType: name, diff --git a/packages/runtime/src/services/apiService.ts b/packages/runtime/src/services/apiService.ts index fc2931ac..cb2f1d2f 100644 --- a/packages/runtime/src/services/apiService.ts +++ b/packages/runtime/src/services/apiService.ts @@ -1,4 +1,5 @@ import mitt from 'mitt'; +import { DebugLoggerType } from './debug'; export type ApiService = ReturnType; export function initApiService() { @@ -16,6 +17,12 @@ export function initApiService() { fromId: string; eventType: string; }; + /** + * @description: record debug info + */ + debug: { + type: DebugLoggerType; + } & Record; }>(); const apiService = { on: emitter.on, diff --git a/packages/runtime/src/services/debug.ts b/packages/runtime/src/services/debug.ts new file mode 100644 index 00000000..4a0d59aa --- /dev/null +++ b/packages/runtime/src/services/debug.ts @@ -0,0 +1,4 @@ +export const enum DebugLoggerType { + MERGE_STATE = 'Merge State', + TRIGGER_EVENT = 'Trigger Event', +}